feat: UI overhaul
All checks were successful
conventional pull request title check / conventional pull request title check (pull_request) Successful in 6s
actionlint check / actionlint check (pull_request) Successful in 20s
conventional commit messages check / conventional commit messages check (pull_request) Successful in 10s
dotenv-linter check / dotenv-linter check (pull_request) Successful in 32s
GitLeaks check / GitLeaks check (pull_request) Successful in 28s
hadolint check / hadolint check (pull_request) Successful in 42s
htmlhint check / htmlhint check (pull_request) Successful in 1m16s
markdownlint check / markdownlint check (pull_request) Successful in 53s
Prettier check / Prettier check (pull_request) Successful in 50s
ShellCheck check / ShellCheck check (pull_request) Successful in 39s
yamllint check / yamllint check (pull_request) Successful in 42s
Stylelint check / Stylelint check (pull_request) Successful in 44s
checkov check / checkov check (pull_request) Successful in 6m52s
Rust check / Rust check (pull_request) Successful in 33m33s

This commit is contained in:
2026-01-28 19:36:00 +01:00
parent be1a21b746
commit 30fdeae3b2
41 changed files with 845 additions and 994 deletions

View File

@@ -1,10 +1,11 @@
use crate::components::select_button::SelectButton;
use crate::models::category::Category;
use dioxus::core_macro::rsx;
use dioxus::dioxus_core::Element;
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
use dioxus_free_icons::icons::fa_solid_icons::{
FaCalendarDays, FaForward, FaHourglassHalf, FaInbox, FaQuestion, FaWater,
FaCalendarDays, FaHourglassHalf, FaInbox, FaSignsPost, FaWater,
};
#[component]
@@ -14,105 +15,51 @@ pub(crate) fn CategoryInput(
) -> Element {
rsx! {
div {
class: format!("flex flex-row gap-2 {}", class.unwrap_or("")),
button {
r#type: "button",
class: format!(
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if selected_category() == Category::SomedayMaybe { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
class: format!("grid grid-cols-3 gap-3 {}", class.unwrap_or("")),
SelectButton {
icon: FaLightbulb,
is_selected: matches!(selected_category(), Category::SomedayMaybe),
on_select: move |_| {
selected_category.set(Category::SomedayMaybe);
},
Icon {
icon: FaQuestion,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if selected_category() == Category::LongTerm { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
}
SelectButton {
icon: FaWater,
is_selected: matches!(selected_category(), Category::LongTerm),
on_select: move |_| {
selected_category.set(Category::LongTerm);
},
Icon {
icon: FaWater,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if let Category::WaitingFor(_) = selected_category() { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
}
SelectButton {
icon: FaHourglassHalf,
is_selected: matches!(selected_category(), Category::WaitingFor(_)),
on_select: move |_| {
selected_category.set(Category::WaitingFor(String::new()));
},
Icon {
icon: FaHourglassHalf,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if selected_category() == Category::NextSteps { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
}
SelectButton {
icon: FaSignsPost,
is_selected: matches!(selected_category(), Category::NextSteps),
on_select: move |_| {
selected_category.set(Category::NextSteps);
},
Icon {
icon: FaForward,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if let Category::Calendar { .. } = selected_category() { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
}
SelectButton {
icon: FaCalendarDays,
is_selected: matches!(selected_category(), Category::Calendar { .. }),
on_select: move |_| {
selected_category.set(Category::Calendar {
date: chrono::Local::now().date_naive(),
reoccurrence: None,
time: None,
});
},
Icon {
icon: FaCalendarDays,
height: 16,
width: 16
}
},
button {
r#type: "button",
class: format!(
"py-3 flex flex-row justify-center items-center rounded-lg grow basis-0 {} cursor-pointer",
if selected_category() == Category::Inbox { "bg-zinc-500/50" }
else { "bg-zinc-800/50" }
),
onclick: move |_| {
}
SelectButton {
icon: FaInbox,
is_selected: matches!(selected_category(), Category::Inbox),
on_select: move |_| {
selected_category.set(Category::Inbox);
},
Icon {
icon: FaInbox,
height: 16,
width: 16
}
}
}