feat: UI overhaul (#131)

src/components/app.rs

@@ -1,5 +1,4 @@
 use crate::internationalization::get_language_identifier;
-
 use crate::route::Route;
 use dioxus::core_macro::rsx;
 use dioxus::dioxus_core::Element;
@@ -8,6 +7,13 @@ 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,7 +16,9 @@ pub(crate) fn Input(
     rsx! {
         input {
             class: format!(
-                "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 {}",
+                /* `w-full` is required for the Chromium renderer to allow the input to shrink
+                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"
@@ -30,7 +32,6 @@ 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);
@@ -41,6 +42,11 @@ 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,9 +64,6 @@ 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",
+            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",
             id: "input_project_id",
             option {
                 value: 0,

src/components/reoccurrence_interval_input.rs

@@ -11,7 +11,6 @@ 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: true
+                        autofocus: task.is_none()
                     }
                 },
                 div {
@@ -246,16 +246,16 @@ pub(crate) fn TaskForm() -> Element {
                                 r#for: "input_category_calendar_date"
                             },
                             div {
-                                class: "grow flex flex-row gap-3",
+                                class: "grow grid grid-cols-7 gap-3",
                                 Input {
-                                    class: "grow",
+                                    class: "grow col-span-4",
                                     name: "category_calendar_date",
                                     r#type: "date",
                                     required: true,
                                     initial_value: date.format("%Y-%m-%d").to_string(),
                                 },
                                 Input {
-                                    class: "grow",
+                                    class: "grow col-span-3",
                                     name: "category_calendar_time",
                                     r#type: "time",
                                     initial_value: time.map(|calendar_time|
@@ -367,9 +367,6 @@ 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 {