From fd832ce7a3660bd81b5476477ecdc2bc822df5c2 Mon Sep 17 00:00:00 2001
From: Benedikt Peetz <benedikt.peetz@b-peetz.de>
Date: Fri, 26 Sep 2025 20:15:48 +0200
Subject: chore: Second version

---
 src/components/container.rs        | 34 +++++++++++++++++
 src/components/mod.rs              |  5 +++
 src/components/product_overview.rs | 47 +++++++++++++++++++++++
 src/components/side_header.rs      | 22 +++++++++++
 src/lib.rs                         | 10 +++--
 src/pages/home.rs                  | 78 ++++++++++----------------------------
 6 files changed, 134 insertions(+), 62 deletions(-)
 create mode 100644 src/components/container.rs
 create mode 100644 src/components/product_overview.rs
 create mode 100644 src/components/side_header.rs

(limited to 'src')

diff --git a/src/components/container.rs b/src/components/container.rs
new file mode 100644
index 0000000..cf7aa5a
--- /dev/null
+++ b/src/components/container.rs
@@ -0,0 +1,34 @@
+use leptos::{
+    IntoView, component,
+    prelude::{Children, ClassAttribute, ElementChild},
+    view,
+};
+use leptos_meta::Style;
+
+#[component]
+pub fn Container(header: impl IntoView, children: Children) -> impl IntoView {
+    view! {
+        <Style>
+            "
+            .rocie-container {
+                border-width: 0.1rem;
+                border-style: solid;
+                border-color: gray;
+                border-radius: 15%;
+
+                padding: 0.2rem;
+
+                text-align: left;
+            }
+            .rocie-container-header {
+                font-size: 1.5rem;
+            }
+            "
+        </Style>
+
+        <div class="rocie-container">
+            <p class="rocie-container-header">{header}</p>
+            {children()}
+        </div>
+    }
+}
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 8b13789..85f9671 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -1 +1,6 @@
+// Generic
+pub mod container;
 
+// Specific
+pub mod product_overview;
+pub mod side_header;
diff --git a/src/components/product_overview.rs b/src/components/product_overview.rs
new file mode 100644
index 0000000..4e95335
--- /dev/null
+++ b/src/components/product_overview.rs
@@ -0,0 +1,47 @@
+use std::sync::Arc;
+
+use leptos::{
+    IntoView, component,
+    prelude::{ElementChild, Set, signal},
+    task::spawn_local,
+    view,
+};
+use rocie_client::apis::{api_get_product_api::products, configuration::Configuration};
+
+use crate::components::container::Container;
+
+#[component]
+pub fn ProductOverview(config: Arc<Configuration>) -> impl IntoView {
+    let (read_status, write_status) = signal("Loading..".to_owned());
+
+    {
+        let local_config = Arc::clone(&config);
+
+        spawn_local(async move {
+            let products = products(&local_config).await;
+
+            write_status.set(
+                products
+                    .as_ref()
+                    .map(move |products| {
+                        let products_num = products.len();
+                        let plural_s = if products_num == 1 { "" } else { "s" };
+                        let products_value = 2;
+                        let products_currency = "EUR";
+                        format!(
+                            "You have {products_num} product{plural_s} \
+                         in stock with a value \
+                         of {products_value} {products_currency}.",
+                        )
+                    })
+                    .unwrap(),
+            );
+        });
+    }
+
+    view! {
+        <Container header="Inventory">
+            <p>{read_status}</p>
+        </Container>
+    }
+}
diff --git a/src/components/side_header.rs b/src/components/side_header.rs
new file mode 100644
index 0000000..9cd6777
--- /dev/null
+++ b/src/components/side_header.rs
@@ -0,0 +1,22 @@
+use leptos::prelude::{AddAnyAttr, ElementChild, IntoView, StyleAttribute, component, view};
+use leptos_router::{NavigateOptions, hooks::use_navigate};
+use thaw::{Flex, FlexJustify, LayoutHeader};
+
+#[component]
+pub fn SiteHeader() -> impl IntoView {
+    let navigate = use_navigate();
+
+    view! {
+        <LayoutHeader
+            attr:style="padding: 20px;"
+            on:click=move |_| {
+                navigate("/", NavigateOptions::default());
+            }
+        >
+            <Flex justify=FlexJustify::SpaceAround>
+                <img src="/logo.svg" style="width: 36px" />
+                <h3>"Rocie"</h3>
+            </Flex>
+        </LayoutHeader>
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index 7d58735..357ce93 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -6,6 +6,10 @@
     clippy::must_use_candidate,
     reason = "Can't add it to leptos' components"
 )]
+#![expect(
+    clippy::needless_pass_by_value,
+    reason = "Can't add it to leptos' components"
+)]
 
 mod components;
 mod pages;
@@ -20,7 +24,7 @@ use leptos_router::{
 };
 use rocie_client::apis::configuration::Configuration;
 
-use crate::pages::home::Home;
+use crate::pages::{home::Home, not_found::NotFound};
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -31,7 +35,7 @@ pub fn App() -> impl IntoView {
         let mut config = Configuration::new();
 
         config.user_agent = Some("rocie-mobile".to_owned());
-        config.base_path = "http://127.0.0.1:8080".to_owned();
+        "http://127.0.0.1:8080".clone_into(&mut config.base_path);
 
         Arc::new(config)
     };
@@ -45,7 +49,7 @@ pub fn App() -> impl IntoView {
         <Meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <Router>
-            <Routes fallback=|| view! { NotFound }>
+            <Routes fallback=|| view! { <NotFound /> }>
                 <Route
                     path=path!("/")
                     view=move || {
diff --git a/src/pages/home.rs b/src/pages/home.rs
index 9c86833..8749860 100644
--- a/src/pages/home.rs
+++ b/src/pages/home.rs
@@ -3,45 +3,26 @@ use std::sync::Arc;
 use leptos::{
     IntoView, component,
     error::ErrorBoundary,
-    prelude::{
-        ClassAttribute, CollectView, ElementChild, Get, Read, ReadSignal, Set, With, signal,
-    },
-    reactive::spawn_local,
-    server::{LocalResource, Resource},
+    prelude::{CollectView, ElementChild, Get, GetUntracked},
     view,
 };
-use rocie_client::apis::{
-    api_get_product_api::{ProductsError, products},
-    configuration::Configuration,
+use leptos_router::{
+    NavigateOptions,
+    hooks::{use_navigate, use_query_map},
 };
+use rocie_client::apis::configuration::Configuration;
+use thaw::{Layout, LayoutPosition};
+
+use crate::components::{product_overview::ProductOverview, side_header::SiteHeader};
 
 #[component]
 pub fn Home(config: Arc<Configuration>) -> impl IntoView {
-    let (read_status, write_status) = signal("Loading..".to_owned());
-
-    {
-        let local_config = Arc::clone(&config);
+    let query_map = use_query_map().get_untracked();
+    let navigate = use_navigate();
 
-        spawn_local(async move {
-            let products = products(&local_config).await;
-
-            write_status.set(
-                products
-                    .as_ref()
-                    .map(move |products| {
-                        let products_num = products.len();
-                        let plural_s = if products_num == 1 { "" } else { "s" };
-                        let products_value = 2;
-                        let products_currency = "EUR";
-                        format!(
-                            "You have {products_num} product{plural_s} \
-                         in stock with a value \
-                         of {products_value} {products_currency}.",
-                        )
-                    })
-                    .unwrap(),
-            );
-        });
+    // mobile page
+    if let Some(path) = query_map.get("path") {
+        navigate(&path, NavigateOptions::default());
     }
 
     view! {
@@ -63,33 +44,12 @@ pub fn Home(config: Arc<Configuration>) -> impl IntoView {
             }
         }>
 
-            <nav>
-                <div class="nav">
-                    <img
-                        src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg"
-                        alt="Rocie Logo"
-                        height="200"
-                        width="400"
-                    />
-                    <h1>Rocie</h1>
-                </div>
-            </nav>
-
-            <div class="container">
-                <div class="container">
-                    <h1>"Inventory"</h1>
-
-                    <p>{read_status}</p>
-                </div>
-
-                <div class="container">
-                    <h1>"Recipies"</h1>
-                </div>
-
-                <div class="container">
-                    <h1>"Shopping list"</h1>
-                </div>
-            </div>
+            <Layout position=LayoutPosition::Absolute>
+                <SiteHeader />
+                <Layout>
+                    <ProductOverview config />
+                </Layout>
+            </Layout>
         </ErrorBoundary>
     }
 }
-- 
cgit 1.4.1