feat: with updated stuff

Signed-off-by: kjuulh <contact@kjuulh.io>
2023-08-20 21:19:28 +02:00
24 changed files with 1008 additions and 1098 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -1,2 +0,0 @@
-kind: template
-load: cuddle-empty-plan.yaml
--- a/.gitignore
+++ b/.gitignore
@ -12,3 +12,4 @@ test-results/
 end2end/playwright-report/
 playwright/.cache/
 .cuddle/
+.helix/
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@ -1,8 +1,8 @@
 [workspace]

 [workspace.dependencies]
-uuid = { version = "1.8.0", features = ["v4", "serde"] }
-chrono = { version = "0.4.38", features = ["serde"] }
+uuid = { version = "1.3.0", features = ["v4", "serde"] }
+chrono = { version = "0.4.23", features = ["serde"] }
 serde = { version = "1", features = ["derive"] }


@ -16,34 +16,34 @@ crate-type = ["cdylib", "rlib"]

 [dependencies]
 console_error_panic_hook = "0.1"
-console_log = "1.0"
+console_log = "0.2"
 cfg-if = "1"
 lazy_static = "1"
-leptos = { version = "*",  features = ["serde"] }
-leptos_dom = { version = "*" }
-leptos_meta = { version = "*" }
-leptos_axum = { version = "*", optional = true }
-leptos_router = { version = "*" }
+leptos = { version = "*", default-features = false, features = ["serde"] }
+leptos_dom = { version = "*", default-features = false }
+leptos_meta = { version = "*", default-features = false }
+leptos_axum = { version = "*", default-features = false, optional = true }
+leptos_router = { version = "*", default-features = false }
 log = "0.4"
-simple_logger = "5"
+simple_logger = "4"
 thiserror = "1"
-axum = { version = "0.7.5", optional = true }
+axum = { version = "0.6.1", optional = true }
 tower = { version = "0.4.13", optional = true }
-tower-http = { version = "0.5.2", features = ["fs"], optional = true }
-tokio = { version = "1", features = ["rt-multi-thread", "macros", "time"], optional = true }
+tower-http = { version = "0.3.4", features = ["fs"], optional = true }
+tokio = { version = "1", features = ["time"], optional = true }
 wasm-bindgen = "0.2"
-tracing-subscriber = { version = "0.3.18", optional = true, features = [
+tracing-subscriber = { version = "0.3.16", optional = true, features = [
  "env-filter",
 ] }
-tracing = { version = "0.1.40", features = ["log"], optional = true }
-anyhow = { version = "1.0.86" }
+tracing = { version = "0.1.37", features = ["log"], optional = true }
+anyhow = { version = "1.0.71" }

 serde = { workspace = true }
 chrono = { workspace = true }
-uuid = { workspace = true, features = ["v4", "js", "serde"] }
-graphql_client = { version = "0.14.0", features = ["reqwest"] }
+uuid = { workspace = true, features = ["v4", "wasm-bindgen", "js", "serde"] }
+graphql_client = { version = "0.13.0", features = ["reqwest"] }
 reqwasm = "0.5.0"
-serde_json = "1.0.117"
+serde_json = "1.0.96"

 [features]
 hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
@ -61,10 +61,6 @@ ssr = [
  "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"
--- a/cuddle.yaml
+++ b/cuddle.yaml
@ -5,17 +5,6 @@ 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:
--- a/end2end/package-lock.json
+++ b/end2end/package-lock.json
@ -13,96 +13,61 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.46.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
-      "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
      "dev": true,
      "dependencies": {
-        "playwright": "1.46.1"
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
      },
      "bin": {
        "playwright": "cli.js"
      },
      "engines": {
-        "node": ">=18"
+        "node": ">=14"
      }
    },
-    "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.46.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
-      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
-      "dev": true,
-      "dependencies": {
-        "playwright-core": "1.46.1"
-      },
-      "bin": {
-        "playwright": "cli.js"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "fsevents": "2.3.2"
-      }
+    "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.46.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
-      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
      "dev": true,
      "bin": {
-        "playwright-core": "cli.js"
+        "playwright": "cli.js"
      },
      "engines": {
-        "node": ">=18"
+        "node": ">=14"
      }
    }
  },
  "dependencies": {
    "@playwright/test": {
-      "version": "1.46.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.46.1.tgz",
-      "integrity": "sha512-Fq6SwLujA/DOIvNC2EL/SojJnkKf/rAwJ//APpJJHRyMi1PdKrY3Az+4XNQ51N4RTbItbIByQ0jgd1tayq1aeA==",
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.28.0.tgz",
+      "integrity": "sha512-vrHs5DFTPwYox5SGKq/7TDn/S4q6RA1zArd7uhO6EyP9hj3XgZBBM12ktMbnDQNxh/fL1IUKsTNLxihmsU38lQ==",
      "dev": true,
      "requires": {
-        "playwright": "1.46.1"
+        "@types/node": "*",
+        "playwright-core": "1.28.0"
      }
    },
-    "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.46.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
-      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
-      "dev": true,
-      "requires": {
-        "fsevents": "2.3.2",
-        "playwright-core": "1.46.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
    },
    "playwright-core": {
-      "version": "1.46.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
-      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
+      "version": "1.28.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.28.0.tgz",
+      "integrity": "sha512-nJLknd28kPBiCNTbqpu6Wmkrh63OEqJSFw9xOfL9qxfNwody7h6/L3O2dZoWQ6Oxcm0VOHjWmGiCUGkc0X3VZA==",
      "dev": true
    }
  }
--- a/renovate.json
+++ b/renovate.json
@ -1,3 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
-}
--- a/scripts/dev.sh
+++ b/scripts/dev.sh
@ -1,6 +1,20 @@
 #!/bin/bash

-zellij run -- sh -c "cuddle x leptos:dev"
+tmux new-window -n dev

-zellij run -- sh -c "cuddle x tailwind:watch"
+# allow for user input
+tmux split-window -h
+
+# leptos
+tmux send-keys -t dev "cuddle x leptos:dev" C-m
+
+tmux split-window -v
+# tailwind
+tmux send-keys -t dev "cuddle x tailwind:watch" C-m
+
+# set user input to first 
+tmux select-pane -t 0
+
+
+tmux attach-session -t dev

--- a/something/.drone.yml
+++ b/something/.drone.yml
@ -1,2 +0,0 @@
-kind: template
-load: cuddle-empty-plan.yaml
--- a/something/.gitignore
+++ b/something/.gitignore
@ -1 +0,0 @@
-.cuddle/
--- a/something/cuddle.yaml
+++ b/something/cuddle.yaml
@ -1,16 +0,0 @@
-# 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  
-
--- a/something/renovate.json
+++ b/something/renovate.json
@ -1,3 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
-}
--- a/src/app.rs
+++ b/src/app.rs
@ -4,48 +4,48 @@ use leptos_router::*;

 use crate::common::layout::DashboardLayout;
 use crate::routes::dash::home::DashHomePage;
-use crate::routes::features_view::FeaturesView;
+use crate::routes::features_view::features_view;
 use crate::routes::home::HomePage;

 #[component]
-pub fn App() -> impl IntoView {
+pub fn App(cx: Scope) -> impl IntoView {
    // Provides context that manages stylesheets, titles, meta tags, etc.
-    provide_meta_context();
+    provide_meta_context(cx);

-    view! {
+    view! { cx,
        <Stylesheet id="leptos" href="/pkg/como_web.css"/>
        <Router>
            <main>
                <Routes>
                    <Route
                        path=""
-                        view=|| {
-                            view! { <HomePage/> }
+                        view=|cx| {
+                            view! { cx, <HomePage/> }
                        }
                    />
                    <Route
                        path="/dash"
-                        view=|| {
-                            view! { <DashboardLayout/> }
+                        view=|cx| {
+                            view! { cx, <DashboardLayout/> }
                        }
                    >
                        <Route
                            path=""
-                            view=|| {
-                                view! { <DashHomePage/> }
+                            view=|cx| {
+                                view! { cx, <DashHomePage/> }
                            }
                        />
                        <Route
                            path="home"
-                            view=|| {
-                                view! { <DashHomePage/> }
+                            view=|cx| {
+                                view! { cx, <DashHomePage/> }
                            }
                        />
                    </Route>
                    <Route
                        path="/features"
-                        view=|| {
-                            view! { <FeaturesView/> }
+                        view=|cx| {
+                            features_view(cx)
                        }
                    />
                </Routes>
--- a/src/common/layout.rs
+++ b/src/common/layout.rs
@ -5,9 +5,9 @@ use crate::features::command_line::CommandLine;
 use crate::features::navbar_projects::NavbarProjects;

 #[component]
-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">
+pub fn DashNav(cx: Scope) -> impl IntoView {
+    view! { cx,
+        <nav class="min-w-[200px] p-4 space-y-4 h-screen max-h-screen sticky top-0 select-none bg-gray-800 overflow-auto">
            <div>
                <a href="/dash/home" class="text-xl">
                    "como"
@ -35,8 +35,8 @@ pub fn DashNav() -> impl IntoView {
 }

 #[component]
-pub fn DashboardLayout() -> impl IntoView {
-    view! {
+pub fn DashboardLayout(cx: Scope) -> impl IntoView {
+    view! { cx,
        <div class="flex flex-row">
            <DashNav/>
            <div id="content" class="px-0.5 flex-grow">
--- a/src/fallback.rs
+++ b/src/fallback.rs
@ -10,8 +10,9 @@ cfg_if! { if #[cfg(feature = "ssr")] {
    use axum::response::Response as AxumResponse;
    use tower::ServiceExt;
    use tower_http::services::ServeDir;
-    use leptos::{LeptosOptions, view};
-    use crate::app::App;
+    use std::sync::Arc;
+    use leptos::{LeptosOptions, Errors, view};
+    use crate::app::{App, AppProps};

    pub async fn file_and_error_handler(uri: Uri, State(options): State<LeptosOptions>, req: Request<Body>) -> AxumResponse {
        let root = options.site_root.clone();
@ -22,7 +23,7 @@ cfg_if! { if #[cfg(feature = "ssr")] {
        } else{
            let handler = leptos_axum::render_app_to_stream(
                options.to_owned(),
-                move || view!{ <App/> }
+                move |cx| view!{ cx, <App/> }
            );
            handler(req).await.into_response()
        }
--- a/src/features/command_line/mod.rs
+++ b/src/features/command_line/mod.rs
@ -6,50 +6,50 @@ pub struct CommandLineState {
 }

 #[component]
-pub fn CommandLineModalView() -> impl IntoView {
-    view! { <div>"modal"</div> }
+pub fn CommandLineModalView(cx: Scope) -> impl IntoView {
+    view! { cx, <div>"modal"</div> }
 }

 #[component]
-pub fn CommandLineModal() -> impl IntoView {
+pub fn CommandLineModal(cx: Scope) -> impl IntoView {
    let state =
-        use_context::<RwSignal<CommandLineState>>().expect("command line state must be provided");
+        use_context::<RwSignal<CommandLineState>>(cx).expect("command line state must be provided");

-    let (hidden, _) = create_slice(state, |state| state.hidden, |state, n| state.hidden = n);
+    let (hidden, _) = create_slice(cx, state, |state| state.hidden, |state, n| state.hidden = n);

-    view! {
+    view! { cx,
        {move || {
            if !hidden.get() {
-                view! { <CommandLineModalView/> }
+                view! { cx, <CommandLineModalView/> }
            } else {
-                view! {  }.into_view()
+                view! { cx, <div></div> }.into_view(cx)
            }
        }}
    }
 }

 #[component]
-pub fn CommandLine(children: Children) -> impl IntoView {
-    let state = create_rw_signal(CommandLineState { hidden: true });
-    provide_context(state);
+pub fn CommandLine(cx: Scope, children: Children) -> impl IntoView {
+    let state = create_rw_signal(cx, CommandLineState { hidden: true });
+    provide_context(cx, state);
    let (hidden, set_hidden) =
-        create_slice(state, |state| state.hidden, |state, n| state.hidden = n);
+        create_slice(cx, 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")
+                    //set_hidden(!hidden.get());
+                    log!("toggle command")
                }
                _ => {}
            }
        }
    });

-    view! {
+    view! { cx,
        <div>
-            <div>{children()}</div>
+            <div>{children(cx)}</div>
            <CommandLineModal/>
        </div>
    }
--- a/src/features/dashboard_list_view/dashboard_list_view.rs
+++ b/src/features/dashboard_list_view/dashboard_list_view.rs
@ -24,13 +24,16 @@ pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetPro
 }

 #[component]
-pub fn DashboardItemView(item: GetProjectsListViewGetProjectsItems) -> impl IntoView {
-    view! { <div class="dashboard-list-item dashboard-item">{item.title}</div> }
+pub fn DashboardItemView(cx: Scope, item: GetProjectsListViewGetProjectsItems) -> impl IntoView {
+    view! { cx, <div class="dashboard-list-item dashboard-item">{item.title}</div> }
 }

 #[component]
-pub fn DashboardProjectItemView(project: GetProjectsListViewGetProjects) -> impl IntoView {
-    view! {
+pub fn DashboardProjectItemView(
+    cx: Scope,
+    project: GetProjectsListViewGetProjects,
+) -> impl IntoView {
+    view! { cx,
        <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">
@ -45,24 +48,20 @@ pub fn DashboardProjectItemView(project: GetProjectsListViewGetProjects) -> impl

 #[component]
 pub fn DashboardListView(
+    cx: Scope,
    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();
-
+        projects.with(cx, |projects| {
            if projects.is_empty() {
-                return vec![view! { <div class="project-item">"No projects"</div> }.into_any()];
+                return vec![view! { cx, <div class="project-item">"No projects"</div> }.into_any()];
            }

            projects
                .into_iter()
                .filter(|project| !project.items.is_empty())
                .map(|project| {
-                    view! {
+                    view! { cx,
                        <div>
                            <DashboardProjectItemView project=project.clone()/>
                            {&project
@ -70,10 +69,10 @@ pub fn DashboardListView(
                                .clone()
                                .into_iter()
                                .map(|item| {
-                                    view! { <DashboardItemView item=item/> }
+                                    view! { cx, <DashboardItemView item=item/> }
                                })
                                .collect::<Vec<_>>()
-                                .into_view()}
+                                .into_view(cx)}
                        </div>
                    }
                    .into_any()
@ -82,12 +81,13 @@ pub fn DashboardListView(
        })
    };

-    view! {<div class="project-items">{projects_view}</div> }
+    view! { cx, <div class="project-items">{projects_view}</div> }
 }

 #[component]
-pub fn DashboardList() -> impl IntoView {
-    let projects = create_local_resource(|| (), |_| async { get_projects_list().await.unwrap() });
+pub fn DashboardList(cx: Scope) -> impl IntoView {
+    let projects =
+        create_local_resource(cx, || (), |_| async { get_projects_list().await.unwrap() });

-    view! {<DashboardListView projects=projects/> }
+    view! { cx, <DashboardListView projects=projects/> }
 }
--- a/src/features/navbar_projects/navbar_projects.rs
+++ b/src/features/navbar_projects/navbar_projects.rs
@ -25,28 +25,20 @@ pub async fn get_projects_list() -> anyhow::Result<Vec<GetProjectsListViewGetPro

 #[component]
 pub fn NavbarProjectsView(
+    cx: Scope,
    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();
-
-
+        projects.with(cx, |projects| {
            if projects.is_empty() {
-                return vec![view! { <div class="project-item">"No projects"</div> }.into_any()];
+                return vec![view! { cx, <div class="project-item">"No projects"</div> }.into_any()];
            }

            projects
                .into_iter()
                .map(|project| {
-                    view! { 
+                    view! { cx,
                        <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">
                                {&project.name}
                            </div>
@ -57,13 +49,13 @@ pub fn NavbarProjectsView(
        })
    };

-    view! { <div class="project-items space-y-1">{projects_view}</div> }
+    view! { cx, <div class="project-items space-y-1">{projects_view}</div> }
 }

 #[component]
-pub fn NavbarProjects() -> impl IntoView {
+pub fn NavbarProjects(cx: Scope) -> impl IntoView {
    let projects =
-        create_local_resource(|| (), |_| async { get_projects_list().await.unwrap() });
+        create_local_resource(cx, || (), |_| async { get_projects_list().await.unwrap() });

-    view! { <NavbarProjectsView projects=projects/> }
+    view! { cx, <NavbarProjectsView projects=projects/> }
 }
--- a/src/lib.rs
+++ b/src/lib.rs
@ -19,8 +19,8 @@ if #[cfg(feature = "hydrate")] {

      console_error_panic_hook::set_once();

-      leptos::mount_to_body(move || {
-          view! { <App/> }
+      leptos::mount_to_body(move |cx| {
+          view! { cx, <App/> }
      });
    }
 }
--- a/src/main.rs
+++ b/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(App);
+    let routes = generate_route_list(|cx| view! { cx, <App/> }).await;

    como_web::api::register();

    let app = Router::new()
        .route("/api/*fn_name", post(leptos_axum::handle_server_fns))
-        .leptos_routes(&leptos_options.clone(), routes, || view! { <App/> })
+        .leptos_routes(&leptos_options.clone(), routes, |cx| view! { cx, <App/> })
        .fallback(file_and_error_handler)
        .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
--- a/src/routes/dash/home.rs
+++ b/src/routes/dash/home.rs
@ -3,8 +3,8 @@ use leptos::*;
 use crate::features::dashboard_list_view::DashboardList;

 #[component]
-pub fn DashHomePage() -> impl IntoView {
-    view! {
+pub fn DashHomePage(cx: Scope) -> impl IntoView {
+    view! { cx,
        <div class="home-dash">
            <DashboardList/>
        </div>
--- a/src/routes/features_view.rs
+++ b/src/routes/features_view.rs
@ -1,12 +1,14 @@
-use leptos::*;
+use leptos::{ev, html::*, *};
 use uuid::Uuid;

 use crate::features::navbar_projects::gen::queries::get_projects_list_view::GetProjectsListViewGetProjects;
-use crate::features::navbar_projects::NavbarProjectsView;
+use crate::features::navbar_projects::{
+    NavbarProjects, NavbarProjectsProps, NavbarProjectsView, NavbarProjectsViewProps,
+};

-#[component]
-pub fn FeaturesView() -> impl IntoView {
+pub fn features_view(cx: Scope) -> impl IntoView {
    let projects = create_local_resource(
+        cx,
        || (),
        |_| async {
            vec![
@ -23,21 +25,24 @@ pub fn FeaturesView() -> impl IntoView {
    );

    let emptyProjects: Resource<(), Vec<GetProjectsListViewGetProjects>> =
-        create_local_resource(|| (), |_| async { Vec::new() });
+        create_local_resource(cx, || (), |_| async { Vec::new() });

-    view! {
-        <div>
-            <div class="space-y-5 p-2">
-                <h1>"NavbarProjects"</h1>
-                <h2>"Projects"</h2>
-                <div class="feature-case">
-                    <NavbarProjectsView projects=projects/>
-                </div>
-                <h2>"no projects"</h2>
-                <div class="feature-case">
-                    <NavbarProjectsView projects=emptyProjects/>
-                </div>
-            </div>
-        </div>
-    }
+    return div(cx).child(
+        div(cx)
+            .classes("space-y-5 p-2")
+            .child(h1(cx).child("NavbarProjects"))
+            .child(h2(cx).child("Projects"))
+            .child(
+                div(cx)
+                    .classes("feature-case")
+                    .child(NavbarProjectsView(cx, NavbarProjectsViewProps { projects })),
+            )
+            .child(h2(cx).child("no projects"))
+            .child(div(cx).classes("feature-case").child(NavbarProjectsView(
+                cx,
+                NavbarProjectsViewProps {
+                    projects: emptyProjects,
+                },
+            ))),
+    );
 }
--- a/src/routes/home.rs
+++ b/src/routes/home.rs
@ -1,8 +1,8 @@
 use leptos::*;

 #[component]
-pub fn Navbar() -> impl IntoView {
-    view! {
+pub fn Navbar(cx: Scope) -> impl IntoView {
+    view! { cx,
        <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() -> impl IntoView {
 }

 #[component]
-pub fn HomePage() -> impl IntoView {
-    view! {
+pub fn HomePage(cx: Scope) -> impl IntoView {
+    view! { cx,
        <Navbar/>
        <h1 class="text-xl text-red-50">"Welcome to Leptos!"</h1>
    }
--- a/style/output.css
+++ b/style/output.css
@ -570,6 +570,10 @@ video {
  height: 100vh;
 }

+.max-h-screen {
+  max-height: 100vh;
+}
+
 .min-w-\[200px\] {
  min-width: 200px;
 }
@ -630,6 +634,10 @@ video {
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
 }

+.overflow-auto {
+  overflow: auto;
+}
+
 .rounded-md {
  border-radius: 0.375rem;
 }