feat: UI overhaul

src/components/app.rs

@@ -1,4 +1,5 @@
 use crate::internationalization::get_language_identifier;
+
 use crate::route::Route;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
@@ -7,13 +8,6 @@ use dioxus_i18n::prelude::*;
 use dioxus_i18n::unic_langid::langid;
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
-/* Once https://github.com/DioxusLabs/dioxus/issues/4490 is resolved, hopefully it will be
-sufficient to just include the single icon.png. */
-#[used]
-static IMAGES_DIRECTORY: Asset = asset!(
-    "/assets/images",
-    AssetOptions::builder().with_hash_suffix(false)
-);
 #[used]
 static FONTS_DIRECTORY: Asset = asset!(
     "/assets/fonts",

src/components/input.rs

@@ -16,9 +16,7 @@ pub(crate) fn Input(
     rsx! {
         input {
             class: format!(
-                /* `w-full` is required for the Chromium renderer to allow the input to shrink
+                "pt-3 pb-2.25 {} bg-gray-800-muted enabled:hover:bg-gray-800 enabled:focus:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl outline-0 {} transition-all duration-150 {}",
-                properly. */
-                "pt-3 pb-2.25 w-full {} bg-gray-800-muted enabled:hover:bg-gray-800 enabled:focus:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl outline-0 {} transition-all duration-150 {}",
                 match r#type.as_str() {
                     "date" => "ps-3.25 pe-3",
                     _ => "px-4"
@@ -32,6 +30,7 @@ pub(crate) fn Input(
             name: name.clone(),
             r#type,
             id: id.unwrap_or(format!("input_{}", name)),
+            autofocus,
             oninput: move |event| {
                 if let Some(oninput) = oninput {
                     oninput.call(event);
@@ -42,11 +41,6 @@ pub(crate) fn Input(
                     onchange.call(event);
                 }
             },
-            onmounted: move |element| async move {
-                if let Some(true) = autofocus {
-                    let _ = element.set_focus(true).await;
-                }
-            },
             ..attributes
         }
     }

src/components/project_form.rs

@@ -64,6 +64,9 @@ pub(crate) fn ProjectForm() -> Element {
                             if let Some(project) = project {
                                 let result = delete_project(project.id).await;
                                 if result.is_ok() {
+                                    /* TODO: Might not work on mobile due to
+                                    https://dioxuslabs.com/learn/0.7/essentials/router/navigation#history-buttons.
+                                    */
                                     navigator.go_back();
                                 }
                             } else {

src/components/project_select.rs

@@ -10,7 +10,7 @@ pub(crate) fn ProjectSelect(initial_selected_id: Option<i32>) -> Element {
     rsx! {
         select {
             name: "project_id",
-            class: "px-4 pt-3 pb-2.25 bg-gray-800-muted enabled:hover:bg-gray-800 enabled:active:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl grow cursor-pointer transition-all duration-150",
+            class: "px-4 pt-3 pb-2.25 bg-gray-800-muted enabled:hover:bg-gray-800 enabled:active:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl grow cursor-pointer",
             id: "input_project_id",
             option {
                 value: 0,

src/components/reoccurrence_interval_input.rs

@@ -11,6 +11,7 @@ pub(crate) fn ReoccurrenceIntervalInput(
     class_buttons: Option<&'static str>,
 ) -> Element {
     rsx! {
+        // TODO: Abstract into SelectButton. Make it sank into the surface by default, like other inputs (abstract those too haha), and rise it up on selection (rationale: it will influence what is on the surface).
         SelectButton {
             icon: FaBan,
             is_selected: reoccurrence_interval().is_none(),

src/components/task_form.rs

@@ -172,7 +172,7 @@ pub(crate) fn TaskForm() -> Element {
                         required: true,
                         initial_value: task.as_ref().map(|task| task.title.clone()),
                         r#type: "text",
-                        autofocus: task.is_none()
+                        autofocus: true
                     }
                 },
                 div {
@@ -246,16 +246,16 @@ pub(crate) fn TaskForm() -> Element {
                                 r#for: "input_category_calendar_date"
                             },
                             div {
-                                class: "grow grid grid-cols-7 gap-3",
+                                class: "grow flex flex-row gap-3",
                                 Input {
-                                    class: "grow col-span-4",
+                                    class: "grow",
                                     name: "category_calendar_date",
                                     r#type: "date",
                                     required: true,
                                     initial_value: date.format("%Y-%m-%d").to_string(),
                                 },
                                 Input {
-                                    class: "grow col-span-3",
+                                    class: "grow",
                                     name: "category_calendar_time",
                                     r#type: "time",
                                     initial_value: time.map(|calendar_time|
@@ -367,6 +367,9 @@ pub(crate) fn TaskForm() -> Element {
                                     edit_task(task.id, new_task).await.map(|_| ())
                                 };
                                 if result.is_ok() {
+                                    /* TODO: Might not work on mobile due to
+                                    https://dioxuslabs.com/learn/0.7/essentials/router/navigation#history-buttons.
+                                    */
                                     navigator.go_back();
                                 }
                             } else {