initial commit

frontend/src/components/navigationManager.ts

@@ -0,0 +1,48 @@
+import Alpine from 'alpinejs';
+
+declare global {
+  interface Window {
+    Alpine: typeof Alpine;
+  }
+}
+
+interface NavigationStore {
+  activeTab: string;
+
+  init(): void;
+  loadPage(): Promise<void>;
+}
+
+const navigationStore: NavigationStore = {
+  activeTab: '',
+
+  async init() {
+    await this.loadPage();
+    window.addEventListener('hashchange', () => this.loadPage());
+  },
+
+  async loadPage() {
+    const tab = window.location.hash.split('/')[1] || 'chats';
+    if (this.activeTab === tab) return;
+    this.activeTab = tab;
+
+    const pageContent = document.getElementById('page-content');
+    if (!pageContent) throw new Error('Failed to find #page-content');
+
+    try {
+      const response = await fetch(`/pages/${tab}.html`);
+      if (!response.ok) throw new Error('Failed to load page');
+
+      pageContent.innerHTML = await response.text();
+    } catch (error) {
+      console.error('Page load error:', error);
+      pageContent.innerHTML = `
+        <div class="bg-tertiary-50 border border-tertiary-200 rounded-lg p-4">
+          <p class="text-tertiary-700">Failed to load page. Please try again.</p>
+        </div>
+      `;
+    }
+  },
+};
+
+Alpine.store('navigation', navigationStore);