small update

Author: bradcypert

client/index.html

@@ -240,8 +240,7 @@ <h1 class="error-title">Unable to Load Dust</h1>
 
   <!-- Main Application Container -->
   <div id="app">
-    <!-- The Dust application will be mounted here -->
-    <dust-app></dust-app>
+    <!-- The Dust application will be mounted here by main.js -->
   </div>
 
   <!-- Application Initialization Script -->
@@ -292,7 +291,7 @@ <h1 class="error-title">Unable to Load Dust</h1>
     document.addEventListener('DOMContentLoaded', async () => {
       try {
         // Wait for custom elements to be defined
-        await customElements.whenDefined('dust-app');
+        await customElements.whenDefined('dust-main');
 
         // Small delay to ensure everything is properly rendered
         await new Promise(resolve => setTimeout(resolve, 100));

client/src/components/dust-app.ts

@@ -34,8 +34,8 @@ export class DustApp extends LitElement {
   @property({ attribute: false })
   appStateService!: AppStateService;
 
-  @property({ type: Object })
-  appState!: AppState;
+  @state()
+  private appState!: AppState;
 
   @state()
   private currentPage = "library";
@@ -46,7 +46,7 @@ export class DustApp extends LitElement {
   @state()
   private currentGenreId: number | null = null;
 
-  // Removed unused state variable
+  private unsubscribe?: () => void;
 
   static styles = css`
     :host {
@@ -142,6 +142,15 @@ export class DustApp extends LitElement {
   connectedCallback() {
     console.log("DustApp - connected callback");
     super.connectedCallback();
+    
+    // Initialize app state from service
+    this.appState = this.appStateService.getState();
+    
+    // Subscribe to state changes
+    this.unsubscribe = this.appStateService.subscribe(() => {
+      this.appState = this.appStateService.getState();
+    });
+    
     window.addEventListener("popstate", this.handleNavigation);
     this.handleNavigation();
 
@@ -152,6 +161,7 @@ export class DustApp extends LitElement {
   disconnectedCallback() {
     console.log("DustApp - disconnected callback");
     super.disconnectedCallback();
+    this.unsubscribe?.();
     window.removeEventListener("popstate", this.handleNavigation);
   }
 

client/src/main.ts

@@ -3,11 +3,10 @@
  */
 
 import { LitElement, html, css } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement } from "lit/decorators.js";
 import { provide } from "@lit/context";
 
 import { appState, appStateContext } from "./services/app-state.js";
-import type { AppState } from "./types/app.js";
 
 // Import components
 import "./components/dust-app.js";
@@ -17,8 +16,7 @@ export class DustMain extends LitElement {
   @provide({ context: appStateContext })
   appStateService = appState;
 
-  @state()
-  private appState: AppState = appState.getState();
+  // App state is managed by the dust-app component directly
 
   static styles = css`
     :host {
@@ -32,20 +30,10 @@ export class DustMain extends LitElement {
   connectedCallback() {
     console.log("DustMain - connected callback");
     super.connectedCallback();
-    this.unsubscribe = appState.subscribe(() => {
-      this.appState = appState.getState();
-    });
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unsubscribe?.();
-  }
-
-  private unsubscribe?: () => void;
-
   render() {
-    return html` <dust-app .appState=${this.appState}></dust-app> `;
+    return html` <dust-app></dust-app> `;
   }
 }