chore(release): 0.1.0

Reviewed-on: https://git.front.kjuulh.io/kjuulh/como-web/pulls/3

.drone.yml

@@ -0,0 +1,2 @@
+kind: template
+load: cuddle-empty-plan.yaml

CHANGELOG.md

@@ -0,0 +1,66 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2025-02-01
+
+### Added
+- add please
+- add drone
+- fix deps
+- update to newest leptos
+- with updated things
+- add feature slicing
+- add base app
+- with dev environment
+- initial template
+
+### Fixed
+- *(deps)* update rust crate wasm-bindgen to v0.2.100
+- *(deps)* update rust crate wasm-bindgen to v0.2.99
+- *(deps)* update tokio-tracing monorepo
+- *(deps)* update rust crate wasm-bindgen to v0.2.97
+- *(deps)* update rust crate wasm-bindgen to v0.2.96
+- *(deps)* update rust crate wasm-bindgen to v0.2.95
+- *(deps)* update rust crate wasm-bindgen to v0.2.94
+- *(deps)* update rust crate wasm-bindgen to v0.2.93
+- *(deps)* update all dependencies
+- *(deps)* update all dependencies
+- *(deps)* update rust crate anyhow to 1.0.86
+- *(deps)* update rust crate anyhow to 1.0.85
+- *(deps)* update rust crate anyhow to 1.0.84
+- *(deps)* update rust crate serde_json to 1.0.117
+- *(deps)* update rust crate anyhow to 1.0.83
+- *(deps)* update rust crate simple_logger to v5
+- *(deps)* update rust crate serde_json to 1.0.116
+- *(deps)* update rust crate anyhow to 1.0.82
+- *(deps)* update all dependencies
+
+### Other
+- *(deps)* update dependency @playwright/test to v1.50.1
+- *(deps)* update dependency @playwright/test to v1.50.0
+- *(deps)* update rust crate serde to v1.0.217
+- *(deps)* update rust crate serde to v1.0.216
+- *(deps)* update dependency @playwright/test to v1.49.1
+- *(deps)* update dependency @playwright/test to v1.49.0
+- *(deps)* update rust crate serde to v1.0.215
+- *(deps)* update dependency @playwright/test to v1.46.1
+- *(deps)* update rust crate serde to v1.0.208
+- *(deps)* update dependency @playwright/test to v1.45.1
+- *(deps)* update dependency @playwright/test to v1.44.1
+- *(deps)* update rust crate serde to v1.0.203
+- *(deps)* update rust crate chrono to 0.4.38
+- Merge pull request 'fix(deps): update all dependencies' (#3) from renovate/all into main
+
+Reviewed-on: https://git.front.kjuulh.io/kjuulh/como-web/pulls/3
+
+- Merge pull request 'Configure Renovate' (#1) from renovate/configure into main
+
+Reviewed-on: https://git.front.kjuulh.io/kjuulh/como-web/pulls/1
+
+- Add renovate.json
+

Cargo.toml

@@ -1,8 +1,8 @@
 [workspace]
 
 [workspace.dependencies]
-uuid = { version = "1.3.0", features = ["v4", "serde"] }
-chrono = { version = "0.4.23", features = ["serde"] }
+uuid = { version = "1.8.0", features = ["v4", "serde"] }
+chrono = { version = "0.4.38", features = ["serde"] }
 serde = { version = "1", features = ["derive"] }
 
 
@@ -16,33 +16,34 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 console_error_panic_hook = "0.1"
-console_log = "0.2"
+console_log = "1.0"
 cfg-if = "1"
 lazy_static = "1"
-leptos = { version = "*", default-features = false, features = ["serde"] }
-leptos_meta = { version = "*", default-features = false }
-leptos_axum = { version = "*", default-features = false, optional = true }
-leptos_router = { version = "*", default-features = false }
+leptos = { version = "*",  features = ["serde"] }
+leptos_dom = { version = "*" }
+leptos_meta = { version = "*" }
+leptos_axum = { version = "*", optional = true }
+leptos_router = { version = "*" }
 log = "0.4"
-simple_logger = "4"
+simple_logger = "5"
 thiserror = "1"
-axum = { version = "0.6.1", optional = true }
+axum = { version = "0.7.5", optional = true }
 tower = { version = "0.4.13", optional = true }
-tower-http = { version = "0.3.4", features = ["fs"], optional = true }
-tokio = { version = "1", features = ["time"], optional = true }
+tower-http = { version = "0.5.2", features = ["fs"], optional = true }
+tokio = { version = "1", features = ["rt-multi-thread", "macros", "time"], optional = true }
 wasm-bindgen = "0.2"
-tracing-subscriber = { version = "0.3.16", optional = true, features = [
+tracing-subscriber = { version = "0.3.18", optional = true, features = [
   "env-filter",
 ] }
-tracing = { version = "0.1.37", features = ["log"], optional = true }
-anyhow = { version = "1.0.71" }
+tracing = { version = "0.1.40", features = ["log"], optional = true }
+anyhow = { version = "1.0.86" }
 
 serde = { workspace = true }
 chrono = { workspace = true }
-uuid = { workspace = true, features = ["v4", "wasm-bindgen", "js", "serde"] }
-graphql_client = { version = "0.13.0", features = ["reqwest"] }
+uuid = { workspace = true, features = ["v4", "js", "serde"] }
+graphql_client = { version = "0.14.0", features = ["reqwest"] }
 reqwasm = "0.5.0"
-serde_json = "1.0.96"
+serde_json = "1.0.117"
 
 [features]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
@@ -54,11 +55,16 @@ ssr = [
   "leptos/ssr",
   "leptos_meta/ssr",
   "leptos_router/ssr",
+  "leptos_dom/ssr",
   "dep:leptos_axum",
   "dep:tracing-subscriber",
   "dep:tracing",
 ]
 
+[package.metadata.cargo-all-features]
+denylist = ["axum", "tower", "tower-http", "tokio", "sqlx", "leptos_axum"]
+skip_feature_sets = [["ssr", "hydrate"]]
+
 [package.metadata.leptos]
 # The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name   
 output-name = "como_web"

cuddle.yaml

@@ -5,6 +5,17 @@ base: "git@git.front.kjuulh.io:kjuulh/cuddle-rust-plan.git"
 vars:
   service: "como-web"
   deployments: "git@git.front.kjuulh.io:como/deployments.git"
+  registry: "kasperhermansen"
+
+please:
+  project:
+    owner: kjuulh
+    repository: "como-web"
+    branch: main
+  settings:
+    api_url: https://git.front.kjuulh.io  
+
+
 
 scripts:
   render_como_templates:

end2end/package-lock.json

@@ -13,61 +13,96 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
-      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.50.1.tgz",
+      "integrity": "sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ==",
       "dev": true,
       "dependencies": {
-        "@types/node": "*",
-        "playwright-core": "1.28.0"
+        "playwright": "1.50.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
       }
     },
-    "node_modules/@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
-      "dev": true
-    },
-    "node_modules/playwright-core": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
-      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.50.1.tgz",
+      "integrity": "sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.50.1"
+      },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.50.1.tgz",
+      "integrity": "sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
       }
     }
   },
   "dependencies": {
     "@playwright/test": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
-      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.50.1.tgz",
+      "integrity": "sha512-Jii3aBg+CEDpgnuDxEp/h7BimHcUTDlpEtce89xEumlJ5ef2hqepZ+PWp1DDpYC/VO9fmWVI1IlEaoI5fK9FXQ==",
       "dev": true,
       "requires": {
-        "@types/node": "*",
-        "playwright-core": "1.28.0"
+        "playwright": "1.50.1"
       }
     },
-    "@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==",
-      "dev": true
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
+    "playwright": {
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.50.1.tgz",
+      "integrity": "sha512-G8rwsOQJ63XG6BbKj2w5rHeavFjy5zynBA9zsJMMtBoe/Uf757oG12NXz6e6OirF7RCrTVAKFXbLmn1RbL7Qaw==",
+      "dev": true,
+      "requires": {
+        "fsevents": "2.3.2",
+        "playwright-core": "1.50.1"
+      }
     },
     "playwright-core": {
-      "version": "1.28.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
-      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
+      "version": "1.50.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.50.1.tgz",
+      "integrity": "sha512-ra9fsNWayuYumt+NiM069M6OkcRb1FZSK8bgi66AtpFoWkg2+y0bJSNmkFrWhMbEBbVKC/EruAHH3g0zmtwGmQ==",
       "dev": true
     }
   }

input.css

@@ -12,3 +12,15 @@ html, body {
 .feature-case {
   @apply m-8 border-blue-700 border-2 rounded-lg p-4;
 }
+
+.dashboard-list-item {
+  @apply flex flex-col justify-center hover:dark:bg-blue-900 cursor-pointer select-none px-4 py-2 border-y border-y-gray-800;
+}
+
+.dashboard-list-project {
+  @apply dark:bg-gray-800 hover:dark:bg-blue-900 text-gray-300;
+}
+
+.dashboard-item {
+  @apply pl-6
+}

scripts/dev.sh

@@ -1,20 +1,6 @@
 #!/bin/bash
 
-tmux new-session -d -s dev
+zellij run -- sh -c "cuddle x leptos:dev"
 
-# allow for user input
-tmux split-window -h
-
-# leptos
-tmux send-keys -t dev "cuddle_cli x leptos:dev" C-m
-
-tmux split-window -v
-# tailwind
-tmux send-keys -t dev "cuddle_cli x tailwind:watch" C-m
-
-# set user input to first 
-tmux select-pane -t 0
-
-
-tmux attach-session -t dev
+zellij run -- sh -c "cuddle x tailwind:watch"
 

scripts/nodev.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-tmux kill-session -t dev || true
+tmux kill-window -t dev || true

scripts/refresh:schema.sh

@@ -9,4 +9,14 @@ graphql-client generate \
   --schema-path src/api/graphql/schema/schema.json \
   src/features/navbar_projects/graphql/queries.graphql \
   --output-directory src/features/navbar_projects/gen \
-  --custom-scalars-module='crate::common::graphql'
+  --custom-scalars-module='crate::common::graphql' \
+  --variables-derives='Clone,Debug' \
+  --response-derives='Clone,Debug'
+
+graphql-client generate \
+  --schema-path src/api/graphql/schema/schema.json \
+  src/features/dashboard_list_view/graphql/queries.graphql \
+  --output-directory src/features/dashboard_list_view/gen \
+  --custom-scalars-module='crate::common::graphql' \
+  --variables-derives='Clone,Debug' \
+  --response-derives='Clone,Debug'

something/.drone.yml

@@ -0,0 +1,2 @@
+kind: template
+load: cuddle-empty-plan.yaml

something/.gitignore

@@ -0,0 +1 @@
+.cuddle/

something/cuddle.yaml

@@ -0,0 +1,16 @@
+# yaml-language-server: $schema=https://git.front.kjuulh.io/kjuulh/cuddle/raw/branch/main/schemas/base.json
+
+base: "git@git.front.kjuulh.io:kjuulh/cuddle-empty-plan.git"
+
+vars:
+  service: "como-web"
+  registry: kasperhermansen
+
+please:
+  project:
+    owner: kjuulh
+    repository: "como-web"
+    branch: main
+  settings:
+    api_url: https://git.front.kjuulh.io  
+

something/renovate.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+}

src/api/graphql/schema/schema.json

@@ -767,7 +767,7 @@
                 "name": null,
                 "ofType": {
                   "kind": "OBJECT",
-                  "name": "ProjectDto",
+                  "name": "Project",
                   "ofType": null
                 }
               }
@@ -789,7 +789,7 @@
                     "name": null,
                     "ofType": {
                       "kind": "OBJECT",
-                      "name": "ProjectDto",
+                      "name": "Project",
                       "ofType": null
                     }
                   }

src/app.rs

@@ -8,44 +8,44 @@ use crate::routes::features_view::FeaturesView;
 use crate::routes::home::HomePage;
 
 #[component]
-pub fn App(cx: Scope) -> impl IntoView {
+pub fn App() -> impl IntoView {
     // Provides context that manages stylesheets, titles, meta tags, etc.
-    provide_meta_context(cx);
+    provide_meta_context();
 
-    view! { cx,
+    view! {
         <Stylesheet id="leptos" href="/pkg/como_web.css"/>
         <Router>
             <main>
                 <Routes>
                     <Route
                         path=""
-                        view=|cx| {
-                            view! { cx, <HomePage/> }
+                        view=|| {
+                            view! { <HomePage/> }
                         }
                     />
                     <Route
                         path="/dash"
-                        view=|cx| {
-                            view! { cx, <DashboardLayout/> }
+                        view=|| {
+                            view! { <DashboardLayout/> }
                         }
                     >
                         <Route
                             path=""
-                            view=|cx| {
-                                view! { cx, <DashHomePage/> }
+                            view=|| {
+                                view! { <DashHomePage/> }
                             }
                         />
                         <Route
                             path="home"
-                            view=|cx| {
-                                view! { cx, <DashHomePage/> }
+                            view=|| {
+                                view! { <DashHomePage/> }
                             }
                         />
                     </Route>
                     <Route
                         path="/features"
-                        view=|cx| {
-                            view! { cx, <FeaturesView/> }
+                        view=|| {
+                            view! { <FeaturesView/> }
                         }
                     />
                 </Routes>

src/common/layout.rs

@@ -1,12 +1,13 @@
 use leptos::*;
 use leptos_router::*;
 
+use crate::features::command_line::CommandLine;
 use crate::features::navbar_projects::NavbarProjects;
 
 #[component]
-pub fn DashNav(cx: Scope) -> impl IntoView {
-    view! { cx,
-        <nav class="absolute min-w-[200px] p-4 space-y-4 h-screen sticky top-0 select-none">
+pub fn DashNav() -> impl IntoView {
+    view! {
+        <nav class="min-w-[200px] p-4 space-y-4 h-screen sticky top-0 select-none bg-gray-800">
             <div>
                 <a href="/dash/home" class="text-xl">
                     "como"
@@ -34,12 +35,14 @@ pub fn DashNav(cx: Scope) -> impl IntoView {
 }
 
 #[component]
-pub fn DashboardLayout(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn DashboardLayout() -> impl IntoView {
+    view! {
         <div class="flex flex-row">
             <DashNav/>
-            <div id="content" class="p-2">
-                <Outlet/>
+            <div id="content" class="px-0.5 flex-grow">
+                <CommandLine>
+                    <Outlet/>
+                </CommandLine>
             </div>
         </div>
     }

src/fallback.rs

@@ -3,28 +3,26 @@ use cfg_if::cfg_if;
 cfg_if! { if #[cfg(feature = "ssr")] {
     use axum::{
         body::{boxed, Body, BoxBody},
-        extract::Extension,
+        extract::State,
         response::IntoResponse,
         http::{Request, Response, StatusCode, Uri},
     };
     use axum::response::Response as AxumResponse;
     use tower::ServiceExt;
     use tower_http::services::ServeDir;
-    use std::sync::Arc;
-    use leptos::{LeptosOptions, Errors, view};
-    use crate::app::{App, AppProps};
+    use leptos::{LeptosOptions, view};
+    use crate::app::App;
 
-    pub async fn file_and_error_handler(uri: Uri, Extension(options): Extension<Arc<LeptosOptions>>, req: Request<Body>) -> AxumResponse {
-        let options = &*options;
+    pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> AxumResponse {
         let root = options.site_root.clone();
         let res = get_static_file(uri.clone(), &root).await.unwrap();
 
         if res.status() == StatusCode::OK {
-           res.into_response()
+            res.into_response()
         } else{
             let handler = leptos_axum::render_app_to_stream(
                 options.to_owned(),
-                move |cx| view!{ cx, <App/> }
+                move || view!{ <App/> }
             );
             handler(req).await.into_response()
         }

src/features.rs

@@ -1 +1,3 @@
+pub mod command_line;
+pub mod dashboard_list_view;
 pub mod navbar_projects;

src/features/command_line/mod.rs

@@ -0,0 +1,56 @@
+use leptos::*;
+
+#[derive(Clone, Debug)]
+pub struct CommandLineState {
+    hidden: bool,
+}
+
+#[component]
+pub fn CommandLineModalView() -> impl IntoView {
+    view! { <div>"modal"</div> }
+}
+
+#[component]
+pub fn CommandLineModal() -> impl IntoView {
+    let state =
+        use_context::<RwSignal<CommandLineState>>().expect("command line state must be provided");
+
+    let (hidden, _) = create_slice(state, |state| state.hidden, |state, n| state.hidden = n);
+
+    view! {
+        {move || {
+            if !hidden.get() {
+                view! { <CommandLineModalView/> }
+            } else {
+                view! {  }.into_view()
+            }
+        }}
+    }
+}
+
+#[component]
+pub fn CommandLine(children: Children) -> impl IntoView {
+    let state = create_rw_signal(CommandLineState { hidden: true });
+    provide_context(state);
+    let (hidden, set_hidden) =
+        create_slice(state, |state| state.hidden, |state, n| state.hidden = n);
+
+    leptos_dom::helpers::window_event_listener(ev::keypress, move |event| {
+        if event.ctrl_key() {
+            match event.code().as_str() {
+                "KeyK" => {
+                    set_hidden.set(!hidden.get());
+                    //log!("toggle command")
+                }
+                _ => {}
+            }
+        }
+    });
+
+    view! {
+        <div>
+            <div>{children()}</div>
+            <CommandLineModal/>
+        </div>
+    }
+}

src/features/dashboard_list_view.rs

@@ -0,0 +1,4 @@
+pub mod dashboard_list_view;
+pub mod gen;
+
+pub use dashboard_list_view::*;

src/features/dashboard_list_view/dashboard_list_view.rs

@@ -0,0 +1,93 @@
+use graphql_client::{GraphQLQuery, Response};
+use leptos::*;
+
+use crate::features::dashboard_list_view::gen::queries::get_projects_list_view::GetProjectsListViewGetProjectsItems;
+
+use super::gen::queries::get_projects_list_view::{
+    GetProjectsListViewGetProjects, ResponseData, Variables,
+};
+use super::gen::queries::GetProjectsListView;
+
+pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetProjects>> {
+    let request_body = GetProjectsListView::build_query(Variables {});
+    let payload = serde_json::to_string(&request_body)?;
+    let res = reqwasm::http::Request::post("http://localhost:3001/graphql")
+        .credentials(reqwasm::http::RequestCredentials::Include)
+        .body(payload)
+        .send()
+        .await?;
+    let response_body: Response<ResponseData> = res.json().await?;
+    Ok(response_body
+        .data
+        .ok_or(anyhow::anyhow!("failed to get projects list"))?
+        .get_projects)
+}
+
+#[component]
+pub fn DashboardItemView(item: GetProjectsListViewGetProjectsItems) -> impl IntoView {
+    view! { <div class="dashboard-list-item dashboard-item">{item.title}</div> }
+}
+
+#[component]
+pub fn DashboardProjectItemView(project: GetProjectsListViewGetProjects) -> impl IntoView {
+    view! {
+       <div class="dashboard-list-item dashboard-list-project">
+            <a href=format!("/dash/project/{}", & project.id) class="project-item flex flex-row">
+                <div class="space-x-2">
+                    <span>{&project.name}</span>
+                    <span class="text-gray-50">{project.items.len()}</span>
+                    <span class="flex-grow"></span>
+                </div>
+            </a>
+        </div>
+    }
+}
+
+#[component]
+pub fn DashboardListView(
+    projects: Resource<(), Vec<GetProjectsListViewGetProjects>>,
+) -> impl IntoView {
+    let projects_view = move || {
+        projects.with(|projects| {
+            if projects.is_none() {
+                return Vec::new();
+            }
+            let projects = projects.as_ref().unwrap();
+
+            if projects.is_empty() {
+                return vec![view! { <div class="project-item">"No projects"</div> }.into_any()];
+            }
+
+            projects
+                .into_iter()
+                .filter(|project| !project.items.is_empty())
+                .map(|project| {
+                    view! {
+                        <div>
+                            <DashboardProjectItemView project=project.clone()/>
+                            {&project
+                                .items
+                                .clone()
+                                .into_iter()
+                                .map(|item| {
+                                    view! { <DashboardItemView item=item/> }
+                                })
+                                .collect::<Vec<_>>()
+                                .into_view()}
+                        </div>
+                    }
+                    .into_any()
+                })
+                .collect::<Vec<_>>()
+        })
+    };
+
+    view! {<div class="project-items">{projects_view}</div> }
+}
+
+#[component]
+pub fn DashboardList() -> impl IntoView {
+    let projects = create_local_resource(|| (), |_| async { get_projects_list().await.unwrap() });
+
+    view! {<DashboardListView projects=projects/> }
+}

src/features/dashboard_list_view/gen/mod.rs

@@ -0,0 +1 @@
+pub mod queries;

src/features/dashboard_list_view/gen/queries.rs

@@ -0,0 +1,81 @@
+#![allow(clippy::all, warnings)]
+pub struct GetProjectsListView;
+pub mod get_projects_list_view {
+    #![allow(dead_code)]
+    use std::result::Result;
+    pub const OPERATION_NAME: &str = "GetProjectsListView";
+    pub const QUERY : & str = "query GetProjectsListView {\n  getProjects {\n    id\n    name\n\n    items {\n      id\n      title\n      description\n      state\n    }\n  }\n}\n" ;
+    use super::*;
+    use serde::{Deserialize, Serialize};
+    #[allow(dead_code)]
+    type Boolean = bool;
+    #[allow(dead_code)]
+    type Float = f64;
+    #[allow(dead_code)]
+    type Int = i64;
+    #[allow(dead_code)]
+    type ID = String;
+    type UUID = crate::common::graphql::UUID;
+    #[derive(Clone, Debug)]
+    pub enum ItemState {
+        CREATED,
+        DONE,
+        ARCHIVED,
+        DELETED,
+        Other(String),
+    }
+    impl ::serde::Serialize for ItemState {
+        fn serialize<S: serde::Serializer>(&self, ser: S) -> Result<S::Ok, S::Error> {
+            ser.serialize_str(match *self {
+                ItemState::CREATED => "CREATED",
+                ItemState::DONE => "DONE",
+                ItemState::ARCHIVED => "ARCHIVED",
+                ItemState::DELETED => "DELETED",
+                ItemState::Other(ref s) => &s,
+            })
+        }
+    }
+    impl<'de> ::serde::Deserialize<'de> for ItemState {
+        fn deserialize<D: ::serde::Deserializer<'de>>(deserializer: D) -> Result<Self, D::Error> {
+            let s: String = ::serde::Deserialize::deserialize(deserializer)?;
+            match s.as_str() {
+                "CREATED" => Ok(ItemState::CREATED),
+                "DONE" => Ok(ItemState::DONE),
+                "ARCHIVED" => Ok(ItemState::ARCHIVED),
+                "DELETED" => Ok(ItemState::DELETED),
+                _ => Ok(ItemState::Other(s)),
+            }
+        }
+    }
+    #[derive(Serialize, Clone, Debug)]
+    pub struct Variables;
+    #[derive(Deserialize, Clone, Debug)]
+    pub struct ResponseData {
+        #[serde(rename = "getProjects")]
+        pub get_projects: Vec<GetProjectsListViewGetProjects>,
+    }
+    #[derive(Deserialize, Clone, Debug)]
+    pub struct GetProjectsListViewGetProjects {
+        pub id: UUID,
+        pub name: String,
+        pub items: Vec<GetProjectsListViewGetProjectsItems>,
+    }
+    #[derive(Deserialize, Clone, Debug)]
+    pub struct GetProjectsListViewGetProjectsItems {
+        pub id: UUID,
+        pub title: String,
+        pub description: Option<String>,
+        pub state: ItemState,
+    }
+}
+impl graphql_client::GraphQLQuery for GetProjectsListView {
+    type Variables = get_projects_list_view::Variables;
+    type ResponseData = get_projects_list_view::ResponseData;
+    fn build_query(variables: Self::Variables) -> ::graphql_client::QueryBody<Self::Variables> {
+        graphql_client::QueryBody {
+            variables,
+            query: get_projects_list_view::QUERY,
+            operation_name: get_projects_list_view::OPERATION_NAME,
+        }
+    }
+}

src/features/dashboard_list_view/graphql/queries.graphql

@@ -0,0 +1,13 @@
+query GetProjectsListView {
+  getProjects {
+    id
+    name
+
+    items {
+      id
+      title
+      description
+      state
+    }
+  }
+}

src/features/navbar_projects/gen/queries.rs

@@ -17,14 +17,14 @@ pub mod get_projects_list_view {
     #[allow(dead_code)]
     type ID = String;
     type UUID = crate::common::graphql::UUID;
-    #[derive(Serialize)]
+    #[derive(Serialize, Clone, Debug)]
     pub struct Variables;
-    #[derive(Deserialize)]
+    #[derive(Deserialize, Clone, Debug)]
     pub struct ResponseData {
         #[serde(rename = "getProjects")]
         pub get_projects: Vec<GetProjectsListViewGetProjects>,
     }
-    #[derive(Deserialize)]
+    #[derive(Deserialize, Clone, Debug)]
     pub struct GetProjectsListViewGetProjects {
         pub id: UUID,
         pub name: String,

src/features/navbar_projects/navbar_projects.rs

@@ -1,6 +1,5 @@
 use graphql_client::{GraphQLQuery, Response};
 use leptos::*;
-use leptos_router::*;
 
 use crate::features::navbar_projects::gen::queries::get_projects_list_view::{
     ResponseData, Variables,
@@ -18,27 +17,37 @@ pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetPro
         .send()
         .await?;
     let response_body: Response<ResponseData> = res.json().await?;
-    Ok(response_body.data.unwrap().get_projects)
+    Ok(response_body
+        .data
+        .ok_or(anyhow::anyhow!("failed to get projects list"))?
+        .get_projects)
 }
 
 #[component]
 pub fn NavbarProjectsView(
-    cx: Scope,
     projects: Resource<(), Vec<GetProjectsListViewGetProjects>>,
 ) -> impl IntoView {
     let projects_view = move || {
-        projects.with(cx, |projects| {
+        projects.with(|projects| {
+            if projects.is_none() {
+                return Vec::new()
+            }
+            let projects = projects.as_ref().unwrap();
+
 
             if projects.is_empty() {
-                return vec![view! { cx, <div class="project-item">"No projects"</div> }.into_any()];
+                return vec![view! { <div class="project-item">"No projects"</div> }.into_any()];
             }
 
             projects
                 .into_iter()
                 .map(|project| {
-                    view! { cx,
+                    view! { 
                         <a href=format!("/dash/project/{}", & project.id) class="project-item">
-                            <div class="project-item-name hover:dark:bg-blue-700 rounded-md p-0.5 px-2">
+
+
+
+                               <div class="project-item-name hover:dark:bg-blue-700 rounded-md p-0.5 px-2">
                                 {&project.name}
                             </div>
                         </a>
@@ -48,13 +57,13 @@ pub fn NavbarProjectsView(
         })
     };
 
-    view! { cx, <div class="project-items space-y-1">{projects_view}</div> }
+    view! { <div class="project-items space-y-1">{projects_view}</div> }
 }
 
 #[component]
-pub fn NavbarProjects(cx: Scope) -> impl IntoView {
+pub fn NavbarProjects() -> impl IntoView {
     let projects =
-        create_local_resource(cx, || (), |_| async { get_projects_list().await.unwrap() });
+        create_local_resource(|| (), |_| async { get_projects_list().await.unwrap() });
 
-    view! { cx, <NavbarProjectsView projects=projects/> }
+    view! { <NavbarProjectsView projects=projects/> }
 }

src/lib.rs

@@ -19,8 +19,8 @@ if #[cfg(feature = "hydrate")] {
 
       console_error_panic_hook::set_once();
 
-      leptos::mount_to_body(move |cx| {
-          view! { cx, <App/> }
+      leptos::mount_to_body(move || {
+          view! { <App/> }
       });
     }
 }

src/main.rs

@@ -18,19 +18,19 @@ async fn main() {
     let addr = conf.leptos_options.site_addr;
     let leptos_options = conf.leptos_options;
     // Generate the list of routes in your Leptos App
-    let routes = generate_route_list(|cx| view! { cx, <App/> }).await;
+    let routes = generate_route_list(App);
 
     como_web::api::register();
 
     let app = Router::new()
         .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
-        .leptos_routes(leptos_options.clone(), routes, |cx| view! { cx, <App/> })
+        .leptos_routes(&leptos_options.clone(), routes, || view! { <App/> })
         .fallback(file_and_error_handler)
-        .layer(Extension(Arc::new(leptos_options)));
+        .with_state(leptos_options);
 
     // run our app with hyper
     // `axum::Server` is a re-export of `hyper::Server`
-    log!("listening on http://{}", &addr);
+    // log!("listening on http://{}", &addr);
     axum::Server::bind(&addr)
         .serve(app.into_make_service())
         .await

src/routes.rs

@@ -1,4 +1,3 @@
 pub mod dash;
 pub mod features_view;
 pub mod home;
-

src/routes/dash/home.rs

@@ -1,12 +1,12 @@
 use leptos::*;
 
-use crate::features::navbar_projects::NavbarProjects;
+use crate::features::dashboard_list_view::DashboardList;
 
 #[component]
-pub fn DashHomePage(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn DashHomePage() -> impl IntoView {
+    view! {
         <div class="home-dash">
-            <NavbarProjects/>
+            <DashboardList/>
         </div>
     }
 }

src/routes/features_view.rs

@@ -5,9 +5,8 @@ use crate::features::navbar_projects::gen::queries::get_projects_list_view::GetP
 use crate::features::navbar_projects::NavbarProjectsView;
 
 #[component]
-pub fn FeaturesView(cx: Scope) -> impl IntoView {
+pub fn FeaturesView() -> impl IntoView {
     let projects = create_local_resource(
-        cx,
         || (),
         |_| async {
             vec![
@@ -24,11 +23,11 @@ pub fn FeaturesView(cx: Scope) -> impl IntoView {
     );
 
     let emptyProjects: Resource<(), Vec<GetProjectsListViewGetProjects>> =
-        create_local_resource(cx, || (), |_| async { Vec::new() });
+        create_local_resource(|| (), |_| async { Vec::new() });
 
-    view! { cx,
+    view! {
         <div>
-            <div class="space-y-5">
+            <div class="space-y-5 p-2">
                 <h1>"NavbarProjects"</h1>
                 <h2>"Projects"</h2>
                 <div class="feature-case">

src/routes/home.rs

@@ -1,8 +1,8 @@
 use leptos::*;
 
 #[component]
-pub fn Navbar(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn Navbar() -> impl IntoView {
+    view! {
         <div class="flex flex-row justify-between items-center bg-gray-800 p-4">
             <div class="flex flex-row items-center">
                 <div class="text-2xl text-white font-bold">"Como - Todo"</div>
@@ -19,8 +19,8 @@ pub fn Navbar(cx: Scope) -> impl IntoView {
 }
 
 #[component]
-pub fn HomePage(cx: Scope) -> impl IntoView {
-    view! { cx,
+pub fn HomePage() -> impl IntoView {
+    view! {
         <Navbar/>
         <h1 class="text-xl text-red-50">"Welcome to Leptos!"</h1>
     }

style/output.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -191,6 +191,10 @@ select,
 textarea {
   font-family: inherit;
   /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
   font-size: 100%;
   /* 1 */
   font-weight: inherit;
@@ -341,6 +345,14 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -522,10 +534,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.absolute {
-  position: absolute;
-}
-
 .relative {
   position: relative;
 }
@@ -550,6 +558,14 @@ video {
   display: flex;
 }
 
+.\!hidden {
+  display: none !important;
+}
+
+.hidden {
+  display: none;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -558,6 +574,10 @@ video {
   min-width: 200px;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -580,6 +600,12 @@ video {
   justify-content: space-between;
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -629,6 +655,16 @@ video {
   padding: 1rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.px-0\.5 {
+  padding-left: 0.125rem;
+  padding-right: 0.125rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -657,6 +693,11 @@ video {
   font-weight: 700;
 }
 
+.text-gray-50 {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
 .text-red-50 {
   --tw-text-opacity: 1;
   color: rgb(254 242 242 / var(--tw-text-opacity));
@@ -667,6 +708,10 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 html, body {
   scroll-behavior: smooth;
   min-height: 100%;
@@ -694,6 +739,53 @@ html, body {
   padding: 1rem;
 }
 
+.dashboard-list-item {
+  display: flex;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  flex-direction: column;
+  justify-content: center;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-top-color: rgb(31 41 55 / var(--tw-border-opacity));
+  border-bottom-color: rgb(31 41 55 / var(--tw-border-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dashboard-list-item:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+  }
+}
+
+.dashboard-list-project {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+@media (prefers-color-scheme: dark) {
+  .dashboard-list-project {
+    --tw-bg-opacity: 1;
+    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  }
+
+  .dashboard-list-project:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(30 58 138 / var(--tw-bg-opacity));
+  }
+}
+
+.dashboard-item {
+  padding-left: 1.5rem;
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:text-gray-300 {
     --tw-text-opacity: 1;