feat: UI overhaul

src/components/input.rs

@@ -32,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);
@@ -43,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 grid grid-cols-2 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 {