added some error handling

components/app-root.js

@@ -4,6 +4,7 @@ import { StoreController } from "../controllers/store-controller.js";
 import "./nav-bar.js";
 import "./page-home.js";
 import "./page-items.js";
+import "./error-toast.js";
 
 class AppRoot extends LitElement {
     #hydrated = new StoreController(this, store, s => s._hydrated);
@@ -31,6 +32,7 @@ class AppRoot extends LitElement {
         return html`
             <nav-bar .user=${this.#user.value}></nav-bar>
             <main>${this.#renderRoute()}</main>
+            <error-toast></error-toast>
         `;
     }
 

components/error-toast.js

@@ -0,0 +1,79 @@
+// components/error-toast.js
+import { LitElement, html, css } from 'lit'
+import { store } from '../store/index.js'
+import { StoreController } from '../controllers/store-controller.js'
+
+class ErrorToast extends LitElement {
+  #error = new StoreController(this, store, s => s.error)
+
+  static styles = css`
+    :host {
+      position: fixed;
+      top: 1rem;
+      right: 1rem;
+      z-index: 1000;
+    }
+
+    .toast {
+      background: #ef4444;
+      color: white;
+      padding: 1rem 1.5rem;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      min-width: 300px;
+      animation: slideIn 0.3s ease-out;
+    }
+
+    @keyframes slideIn {
+      from {
+        transform: translateX(400px);
+        opacity: 0;
+      }
+      to {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+
+    .message {
+      flex: 1;
+      font-size: 0.9rem;
+    }
+
+    .close {
+      background: none;
+      border: none;
+      color: white;
+      cursor: pointer;
+      font-size: 1.2rem;
+      padding: 0;
+      opacity: 0.8;
+    }
+
+    .close:hover {
+      opacity: 1;
+    }
+  `
+
+  render() {
+    if (!this.#error.value) {
+      return html``
+    }
+
+    return html`
+      <div class="toast">
+        <span class="message">${this.#error.value}</span>
+        <button 
+          class="close" 
+          @click=${() => store.getState().clearError()}
+          aria-label="Close"
+        >×</button>
+      </div>
+    `
+  }
+}
+
+customElements.define('error-toast', ErrorToast)