From 42f5ce609c4d7aee28a499c9bb4473762f0dcef2 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Thu, 20 Nov 2025 14:40:15 -0300
Subject: [PATCH] - Fix all js errors.

---
 web/desktop/chat/chat.html | 19 +++++++++-----
 web/desktop/index.html     | 53 +++++++++++++++++++-------------------
 web/desktop/js/layout.js   | 10 ++++++-
 3 files changed, 49 insertions(+), 33 deletions(-)
diff --git a/web/desktop/chat/chat.html b/web/desktop/chat/chat.html
index 03d1ab396..c86d4774a 100644
--- a/web/desktop/chat/chat.html
+++ b/web/desktop/chat/chat.html
@@ -1,12 +1,16 @@
-<div class="chat-layout" x-data="chatApp()" x-cloak>
-
+<div class="chat-layout" id="chat-app">
     <div id="connectionStatus" class="connection-status disconnected"></div>
     <main id="messages"></main>
 
     <footer>
         <div class="suggestions-container" id="suggestions"></div>
         <div class="input-container">
-            <input id="messageInput" type="text" placeholder="Message..." autofocus />
+            <input
+                id="messageInput"
+                type="text"
+                placeholder="Message..."
+                autofocus
+            />
             <button id="voiceBtn" title="Voice">🎤</button>
             <button id="sendBtn" title="Send">↑</button>
         </div>
@@ -16,8 +20,11 @@
         <div>Context</div>
         <div id="contextPercentage">0%</div>
         <div class="context-progress">
-            <div class="context-progress-bar" id="contextProgressBar" style="width:0%"></div>
+            <div
+                class="context-progress-bar"
+                id="contextProgressBar"
+                style="width: 0%"
+            ></div>
         </div>
     </div>
-
-</div>
\ No newline at end of file
+</div>
diff --git a/web/desktop/index.html b/web/desktop/index.html
index c26fa4e8c..52c5049f6 100644
--- a/web/desktop/index.html
+++ b/web/desktop/index.html
@@ -11,41 +11,42 @@
     </head>
 
     <body>
-        <nav x-data="{ current: 'chat' }">
+        <nav id="main-nav">
             <div class="logo">⚡ General Bots</div>
-            <a
-                href="#chat"
-                @click.prevent="current = 'chat'; window.switchSection('chat')"
-                :class="{ active: current === 'chat' }"
+            <a href="#chat" class="nav-link active" data-section="chat"
                 >💬 Chat</a
             >
-
-            <a
-                href="#drive"
-                @click.prevent="current = 'drive'; window.switchSection('drive')"
-                :class="{ active: current === 'drive' }"
-                >📁 Drive</a
-            >
-            <a
-                href="#tasks"
-                @click.prevent="current = 'tasks'; window.switchSection('tasks')"
-                :class="{ active: current === 'tasks' }"
-                >✓ Tasks</a
-            >
-            <a
-                href="#mail"
-                @click.prevent="current = 'mail'; window.switchSection('mail')"
-                :class="{ active: current === 'mail' }"
-                >✉ Mail</a
-            >
+            <a href="#drive" class="nav-link" data-section="drive">📁 Drive</a>
+            <a href="#tasks" class="nav-link" data-section="tasks">✓ Tasks</a>
+            <a href="#mail" class="nav-link" data-section="mail">✉ Mail</a>
         </nav>
 
         <div id="main-content">
             <!-- Sections will be loaded dynamically -->
         </div>
 
-        <!-- Load Layout Script first, then Alpine - module scripts are loaded dynamically -->
+        <!-- Load scripts -->
         <script src="js/layout.js"></script>
-        <script src="js/alpine.js"></script>
+        <script>
+            // Simple navigation state management without Alpine
+            document.addEventListener("DOMContentLoaded", () => {
+                const nav = document.getElementById("main-nav");
+                const links = nav.querySelectorAll(".nav-link");
+
+                links.forEach((link) => {
+                    link.addEventListener("click", (e) => {
+                        e.preventDefault();
+                        const section = link.dataset.section;
+
+                        // Update active state
+                        links.forEach((l) => l.classList.remove("active"));
+                        link.classList.add("active");
+
+                        // Switch section
+                        window.switchSection(section);
+                    });
+                });
+            });
+        </script>
     </body>
 </html>
diff --git a/web/desktop/js/layout.js b/web/desktop/js/layout.js
index 4166680cf..d443f0c6f 100644
--- a/web/desktop/js/layout.js
+++ b/web/desktop/js/layout.js
@@ -132,7 +132,15 @@ async function switchSection(section) {
     }
 
     window.history.pushState({}, "", `#${section}`);
-    Alpine.initTree(mainContent);
+
+    // Start Alpine on first load, then just init the tree for new sections
+    if (typeof window.startAlpine === "function") {
+      window.startAlpine();
+      delete window.startAlpine;
+    } else if (window.Alpine) {
+      window.Alpine.initTree(mainContent);
+    }
+
     const inputEl = document.getElementById("messageInput");
     if (inputEl) {
       inputEl.focus();
