docs: add a guide for running

.env.dev

@@ -1,2 +1,5 @@
+# en-US or cs-CZ.
 LANGUAGE_CODE=en-US
+
+# Required only for mobile native client builds.
 MOBILE_SERVER_URL=

.github/workflows/checkov-check.yaml

@@ -22,7 +22,7 @@ jobs:
         with:
           python-version: "3.13.1"
       - name: Rust toolchain installation
-        uses: dtolnay/rust-toolchain@9bc92bc5598b4f3bec5d910d352094982cb0c3b9 # 1.92.0
+        uses: dtolnay/rust-toolchain@c2b55edffaf41a251c410bb32bed22afefa800f1 # 1.92.0
       - name: code checkout
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
         with:

.github/workflows/hadolint-check.yaml

@@ -23,8 +23,8 @@ jobs:
           set -e
 
           VERSION="2.12.0"
-          ARCH="$(uname -m)"
 
+          ARCH="$(uname -m)"
           if [ "$ARCH" = "x86_64" ] || [ "$ARCH" = "amd64" ]; then
             ASSET="hadolint-Linux-x86_64"
             CHECKSUM="56de6d5e5ec427e17b74fa48d51271c7fc0d61244bf5c90e828aab8362d55010  hadolint"

.github/workflows/rust-check.yaml

@@ -26,7 +26,7 @@ jobs:
           libwebkit2gtk-4.1-dev=2.50.4-0ubuntu0.22.04.1
           libxdo-dev=1:3.20160805.1-4
       - name: Rust toolchain installation
-        uses: dtolnay/rust-toolchain@9bc92bc5598b4f3bec5d910d352094982cb0c3b9 # 1.92.0
+        uses: dtolnay/rust-toolchain@c2b55edffaf41a251c410bb32bed22afefa800f1 # 1.92.0
         with:
           components: clippy, rustfmt
       - name: code checkout

.gitignore

@@ -1,6 +1,7 @@
 /.env
 
 /docker-compose.yaml
+/docker-compose.override.yaml
 
 /node_modules
 /target

docker-compose-prod.yaml

@@ -5,8 +5,6 @@ services:
       dockerfile: docker/prod/app/Dockerfile
     networks:
       - default
-      - web-server-network
-    ports: ["8000:80"]
     restart: always
     depends_on: ["db"]
 
@@ -23,7 +21,3 @@ services:
 
 volumes:
   db_data:
-
-networks:
-  web-server-network:
-    external: true

docker-compose-proxy.override.yaml

@@ -0,0 +1,10 @@
+---
+services:
+  app:
+    networks:
+      - default
+      - web-server-network
+
+networks:
+  web-server-network:
+    external: true

docker/prod/app/Dockerfile

@@ -21,7 +21,7 @@ ENV ANDROID_SDK_ROOT=/opt/android-sdk
 SHELL ["/bin/bash", "-o", "pipefail", "-c"]
 
 RUN apt-get update && apt-get install -y --no-install-recommends \
-    openjdk-17-jdk-headless=17.0.17+10-1~deb12u1 \
+    openjdk-17-jdk-headless=17.0.18+8-1~deb12u1 \
  && apt-get clean \
  && rm -rf /var/lib/apt/lists/* \
  && rustup target add aarch64-linux-android \
@@ -46,14 +46,14 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 
 
 FROM builder_base AS builder_web
- 
+
 RUN dx bundle --locked --release
 
 
 FROM debian:bookworm@sha256:b877a1a3fdf02469440f1768cf69c9771338a875b7add5e80c45b756c92ac20a AS runner_web
 
 RUN apt-get update \
- && apt-get install -y --no-install-recommends libpq5=15.10-0+deb12u1 \
+ && apt-get install -y --no-install-recommends libpq5=15.16-0+deb12u1 \
  && apt-get clean \
  && rm -rf /var/lib/apt/lists/*
 

readme.md

@@ -0,0 +1,59 @@
+# Todo Baggins
+
+A task management app tailored specifically to my personal GTD workflow.
+
+## Running the web server
+
+### Development
+
+1. Copy `.env.dev` to `.env` and, if desired, edit it.
+2. Create a symlink from `docker-compose.yaml` to `docker-compose-dev.yaml`.
+3. Run the Docker compose stack with
+
+   ```sh
+   docker compose up --build -d
+   ```
+
+4. Enter the container shell with
+
+   ```sh
+   docker compose exec -it app sh
+   ```
+
+5. Inside, start the development server with
+
+   ```sh
+   dx serve --locked --addr 0.0.0.0 --port 8000
+   ```
+
+6. Once the build is finished, the web app will be accessible at
+   <http://localhost:8000>.
+
+### Production
+
+1. Copy `.env.dev` to `.env` and, if desired, edit it.
+2. Create a symlink from `docker-compose.yaml` to `docker-compose-prod.yaml`.
+3. Run the Docker compose stack with
+
+   ```sh
+   docker compose up --build -d
+   ```
+
+4. Once the build is finished, the web app will be accessible at the Docker
+   container, on port 80.
+
+## Running the Android client
+
+1. Copy `.env.dev` to `.env` and, if desired, edit it. Set the
+   `MOBILE_SERVER_URL` to the URL of the server which will be available as a
+   backend for the mobile client.
+2. Start the build with
+
+   ```sh
+   ./scripts/export_android_bundle.sh
+   ```
+
+3. Once it is finished, the APK will be present at `bundle/android`.
+4. Run the web server as described in a previous section and make it accessible
+   from the client running the mobile app at the URL specified in the
+   environment variable.

src/components/app.rs

@@ -48,7 +48,7 @@ pub(crate) fn App() -> Element {
         document::Link { rel: "manifest", href: MANIFEST, crossorigin: "use-credentials" }
 
         div {
-            class: "min-h-screen py-4 flex flex-col text-gray-300 bg-gray-900",
+            class: "min-h-screen flex flex-col text-gray-300 bg-gray-900",
             Router::<Route> {}
         }
     }

src/components/bottom_panel.rs

@@ -1,6 +1,7 @@
-use crate::components::navigation::Navigation;
 use dioxus::prelude::*;
 
+use crate::components::navigation;
+
 #[component]
 pub(crate) fn BottomPanel() -> Element {
     let navigation_expanded = use_signal(|| false);
@@ -10,12 +11,12 @@ pub(crate) fn BottomPanel() -> Element {
             class: format!(
                 "flex flex-col pointer-events-auto bg-gray-800 transition-[height] duration-[500ms] ease-[cubic-bezier(0.79,0.14,0.15,0.86)] overflow-y-scroll {}",
                 if navigation_expanded() {
-                    "h-[130px]"
+                    "h-[132px]"
                 } else {
                     "h-[66px]"
                 }
             ),
-            Navigation {
+            navigation::Bottom {
                 is_expanded: navigation_expanded,
             }
         }

src/components/category_calendar_task_list.rs

@@ -23,12 +23,12 @@ pub(crate) fn CategoryCalendarTaskList() -> Element {
 
     rsx! {
         div {
-            class: "pt-4 flex flex-col gap-8",
+            class: "pt-3 flex flex-col gap-8",
             for date_current in today_date.iter_days().take(CALENDAR_LENGTH_DAYS) {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         div {
                             class: "pt-1",
                             {

src/components/category_today_task_list.rs

@@ -52,7 +52,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         Icon {
                             class: "mx-1.5",
                             icon: FaWater
@@ -70,7 +70,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
                 div {
                     class: "flex flex-col gap-4",
                     div {
-                        class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                        class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold",
                         Icon {
                             class: "mx-1.25",
                             height: 22,
@@ -90,7 +90,7 @@ pub(crate) fn CategoryTodayTaskList() -> Element {
             div {
                 class: "flex flex-col gap-4",
                 div {
-                    class: "px-7 flex flex-row items-center gap-2 text-gray-500 font-bold",
+                    class: "px-7 sm:px-8 flex flex-row items-center gap-2 text-gray-500 font-bold",
                     Icon {
                         class: "mx-1.25",
                         height: 22,

src/components/create_button.rs

@@ -10,7 +10,7 @@ pub(crate) fn CreateButton() -> Element {
     let current_route = use_route();
     rsx! {
         ButtonPrimary {
-            class: "pointer-events-auto m-4 self-end *:rounded-full! *:p-4",
+            class: "pointer-events-auto sm:self-auto *:rounded-full! *:p-4",
             onclick: move |_| {
                 *TASK_BEING_EDITED.write() = None;
                 *PROJECT_BEING_EDITED.write() = None;

src/components/mod.rs

@@ -10,7 +10,6 @@ pub(crate) mod error_boundary_message;
 pub(crate) mod input;
 pub(crate) mod input_label;
 pub(crate) mod navigation;
-pub(crate) mod navigation_item;
 pub(crate) mod project_form;
 pub(crate) mod project_list;
 pub(crate) mod project_select;

src/components/navigation/bottom.rs

@@ -1,4 +1,3 @@
-use crate::components::navigation_item::NavigationItem;
 use crate::route::Route;
 use dioxus::prelude::*;
 use dioxus_free_icons::Icon;
@@ -9,13 +8,13 @@ use dioxus_free_icons::icons::fa_solid_icons::{
 };
 
 #[component]
-pub(crate) fn Navigation(is_expanded: Signal<bool>) -> Element {
+pub(crate) fn Bottom(is_expanded: Signal<bool>) -> Element {
     rsx! {
         div {
             class: "grid grid-cols-5 justify-stretch",
             button {
                 class: format!(
-                    "py-2 flex flex-row justify-center items-center cursor-pointer",
+                    "py-2 flex flex-row justify-center items-center sm:hidden cursor-pointer",
                 ),
                 onclick: move |_| is_expanded.set(!is_expanded()),
                 div {
@@ -30,41 +29,41 @@ pub(crate) fn Navigation(is_expanded: Signal<bool>) -> Element {
                     }
                 }
             },
-            NavigationItem {
+            super::Item {
                 route: Route::CategoryNextStepsPage,
                 icon: FaSignsPost
             },
-            NavigationItem {
+            super::Item {
                 route: Route::CategoryCalendarPage,
                 icon: FaCalendarDays
             },
-            NavigationItem {
+            super::Item {
                 route: Route::CategoryTodayPage,
                 icon: FaCalendarDay
             },
-            NavigationItem {
+            super::Item {
                 route: Route::CategoryInboxPage,
                 icon: FaInbox
             },
             {if is_expanded() {
                 rsx! {
-                    NavigationItem {
+                    super::Item {
                         route: Route::ProjectsPage,
                         icon: FaList
                     },
-                    NavigationItem {
+                    super::Item {
                         route: Route::CategoryTrashPage,
                         icon: FaTrashCan
                     },
-                    NavigationItem {
+                    super::Item {
                         route: Route::CategoryDonePage,
                         icon: FaVolcano
                     },
-                    NavigationItem {
+                    super::Item {
                         route: Route::CategorySomedayMaybePage,
                         icon: FaLightbulb
                     },
-                    NavigationItem {
+                    super::Item {
                         route: Route::CategoryWaitingForPage,
                         icon: FaHourglassHalf
                     }

src/components/navigation/item.rs

@@ -3,17 +3,14 @@ use dioxus::prelude::*;
 use dioxus_free_icons::{Icon, IconShape};
 
 #[component]
-pub(crate) fn NavigationItem<I: IconShape + Clone + PartialEq + 'static>(
-    route: Route,
-    icon: I,
-) -> Element {
+pub(crate) fn Item<I: IconShape + Clone + PartialEq + 'static>(route: Route, icon: I) -> Element {
     let current_route = use_route::<Route>();
 
     rsx! {
         Link {
             to: route.clone(),
             class: format!(
-                "py-2.5 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400",
+                "py-2.5 sm:px-6 flex flex-row justify-center items-center hover:*:bg-gray-900 active:*:text-gray-400",
             ),
             div {
                 class: format!("pt-2.5 px-4 {} transition-all duration-150",

src/components/navigation/mod.rs

@@ -0,0 +1,7 @@
+mod bottom;
+mod item;
+mod side;
+
+pub(crate) use bottom::Bottom;
+use item::Item;
+pub(crate) use side::Side;

src/components/navigation/side.rs

@@ -0,0 +1,52 @@
+use crate::route::Route;
+use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_regular_icons::FaLightbulb;
+use dioxus_free_icons::icons::fa_solid_icons::{
+    FaCalendarDay, FaCalendarDays, FaHourglassHalf, FaInbox, FaList, FaSignsPost, FaTrashCan,
+    FaVolcano,
+};
+
+#[component]
+pub(crate) fn Side(class: Option<String>) -> Element {
+    rsx! {
+        div {
+            class: format!("flex flex-col {}", class.unwrap_or(String::new())),
+            super::Item {
+                route: Route::CategoryInboxPage,
+                icon: FaInbox
+            },
+            super::Item {
+                route: Route::CategoryTodayPage,
+                icon: FaCalendarDay
+            },
+            super::Item {
+                route: Route::CategoryCalendarPage,
+                icon: FaCalendarDays
+            },
+            super::Item {
+                route: Route::CategoryNextStepsPage,
+                icon: FaSignsPost
+            },
+            super::Item {
+                route: Route::CategoryWaitingForPage,
+                icon: FaHourglassHalf
+            },
+            super::Item {
+                route: Route::CategorySomedayMaybePage,
+                icon: FaLightbulb
+            },
+            super::Item {
+                route: Route::CategoryDonePage,
+                icon: FaVolcano
+            },
+            super::Item {
+                route: Route::CategoryTrashPage,
+                icon: FaTrashCan
+            },
+            super::Item {
+                route: Route::ProjectsPage,
+                icon: FaList
+            }
+        }
+    }
+}

src/components/project_list.rs

@@ -11,7 +11,7 @@ pub(crate) fn ProjectList() -> Element {
             class: "flex flex-col",
             for project in projects {
                 div {
-                    class: "px-7 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer",
+                    class: "px-7 sm:px-8 py-4 hover:bg-gray-800 font-medium text-pretty wrap-anywhere select-none transition-all duration-150 cursor-pointer",
                     key: "{project.id}",
                     onclick: move |_| {
                         *PROJECT_BEING_EDITED.write() = Some(project.clone());

src/components/sticky_bottom.rs

@@ -4,7 +4,7 @@ use dioxus::prelude::*;
 pub(crate) fn StickyBottom(children: Element) -> Element {
     rsx! {
         div {
-            class: "fixed bottom-0 left-0 right-0 flex flex-col pointer-events-none",
+            class: "fixed bottom-0 left-0 right-0 flex flex-col pointer-events-none sm:hidden",
             {children}
         }
     }

src/components/task_list.rs

@@ -23,7 +23,7 @@ pub(crate) fn TaskList(
                 div {
                     key: "{task.task.id}",
                     class: format!(
-                        "px-7 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150",
+                        "px-7 sm:px-8 pt-3.75 {} flex flex-row items-start gap-4 hover:bg-gray-800 cursor-pointer select-none transition-all duration-150",
                         if task.task.deadline.is_some() || !task.subtasks.is_empty() {
                             "pb-0.25"
                         } else if let Category::Calendar { time, .. } = &task.task.category {

src/layouts/navigation.rs

@@ -1,3 +1,4 @@
+use crate::components;
 use crate::components::bottom_panel::BottomPanel;
 use crate::components::create_button::CreateButton;
 use crate::components::sticky_bottom::StickyBottom;
@@ -27,11 +28,24 @@ pub(crate) fn Navigation() -> Element {
 
     rsx! {
         div {
-            class: "grow flex flex-col pb-36",
-            Outlet::<Route> {}
+            class: "grow flex flex-col sm:flex-row pb-36 sm:pb-0",
+            div {
+                class: "hidden sm:flex sm:flex-col gap-4 py-3.25 items-center bg-gray-800",
+                components::navigation::Side {},
+                div {
+                    CreateButton {}
+                }
+            }
+            div {
+                class: "grow flex flex-col py-4",
+                Outlet::<Route> {}
+            }
         }
         StickyBottom {
-            CreateButton {},
+            div {
+                class: "m-4 self-end",
+                CreateButton {},
+            }
             BottomPanel {}
         }
     }

src/views/project_form_page.rs

@@ -5,7 +5,7 @@ use dioxus::prelude::*;
 pub(crate) fn ProjectFormPage() -> Element {
     rsx! {
         ErrorBoundaryMessage {
-            class: "grow py-4 flex flex-col gap-12",
+            class: "grow py-8 max-w-xl w-full mx-auto flex flex-col gap-12",
             ProjectForm {}
         }
     }

src/views/task_form_page.rs

@@ -5,7 +5,7 @@ use dioxus::prelude::*;
 pub(crate) fn TaskFormPage() -> Element {
     rsx! {
         ErrorBoundaryMessage {
-            class: "grow py-4 flex flex-col gap-12",
+            class: "grow py-8 max-w-xl w-full mx-auto flex flex-col gap-12",
             TaskForm {}
         }
     }