finished pruning for lit-only demo

components/app-root.js

@@ -1,44 +1,64 @@
 import { LitElement, html, css } from "lit";
-import { store} from "../store/index.js";
-import { StoreController } from "../controllers/store.js";
 import "./nav-bar.js";
 import "./page-home.js";
 import "./page-items.js";
 
 class AppRoot extends LitElement {
-    #hydrated = new StoreController(this, store, s => s._hydrated);
-    #user = new StoreController(this, store, s => s.user);
-    #route = new StoreController(this, store, s => s.route);
+    static properties = {
+        user: { type: Object, state: true },
+        route: { type: String, state: true },
+        items: { type: Array, state: true }
+    };
+
+    constructor() {
+        super();
+        this.user = null;
+        this.route = 'home';
+        this.items = [];
+    }
 
     static styles = css`
         :host {
             display: block;
             min-height: 100vh;
         }
-        
-        .loading {
-            display: grid;
-            place-items: center;
-            height: 100vh;
-            opacity: 0.4;
-        }
     `;
 
+    #navigate(route) {
+        this.route = route;
+    }
+
+    #addItem(item) {
+        this.items = [...this.items, item];
+    }
+
+    #removeItem(id) {
+        this.items = this.items.filter(i => i.id !== id);
+    }
+
     render() {
-        if (!this.#hydrated.value) {
-            return html`<div class="loading">loading...</div>`;
-        }
         return html`
-            <nav-bar .user=${this.#user.value}></nav-bar>
+            <nav-bar 
+                .user=${this.user}
+                .route=${this.route}
+                @navigate=${(e) => this.#navigate(e.detail.route)}
+            ></nav-bar>
             <main>${this.#renderRoute()}</main>
         `;
     }
 
     #renderRoute() {
-        switch (this.#route.value) {
-            case "home": return html`<page-home></page-home>`;
-            case "items": return html`<page-items></page-items>`;
-            default: return html`<page-home></page-home>`;
+        switch (this.route) {
+            case "home": 
+                return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
+            case "items": 
+                return html`<page-items 
+                    .items=${this.items}
+                    @add-item=${(e) => this.#addItem(e.detail.item)}
+                    @remove-item=${(e) => this.#removeItem(e.detail.id)}
+                ></page-items>`;
+            default: 
+                return html`<page-home .user=${this.user} .items=${this.items}></page-home>`;
         }
     }
 }