glide: Load tabbar from separate file

2 files changed, 253 insertions, 252 deletions

diff --git a/glide/.config/glide/glide.ts b/glide/.config/glide/glide.ts
index 3212891..7c6fe36 100644
--- a/glide/.config/glide/glide.ts
+++ b/glide/.config/glide/glide.ts
@@ -472,258 +472,7 @@ glide.keymaps.set('normal', '<C-x>4b', 'split_window');
 glide.keymaps.set('normal', '<C-x>1', 'unsplit_window');
 glide.keymaps.set('normal', '<A-o>', 'other_window');
 
-// Status bar
-// https://github.com/glide-browser/glide/discussions/147#discussioncomment-15573076
-
-const status_bar_id = "glide-status-bar"
-
-const mode_colors: Record<keyof GlideModes, string> = {
-    "command": "--glide-mode-command",
-    "hint": "--glide-mode-hint",
-    "ignore": "--glide-mode-ignore",
-    "insert": "--glide-mode-insert",
-    "normal": "--glide-mode-normal",
-    "op-pending": "--glide-mode-op-pending",
-    "visual": "--glide-mode-visual",
-}
-const fallback_mode_color = "--glide-fallback-mode"
-
-glide.autocmds.create("ConfigLoaded", async () => {
-    const existing = document.getElementById(status_bar_id)
-    if (existing) {
-        existing.remove()
-    }
-
-    const status_bar = DOM.create_element("div", {
-        id: status_bar_id,
-        children: [
-            DOM.create_element("div", {
-                className: "glide-status-tabs",
-                children: []
-            }),
-            DOM.create_element("div", {
-                className: "glide-status-right",
-                children: []
-            })
-        ]
-    })
-
-    const browser = document.getElementById("browser")
-    if (browser) {
-        browser.appendChild(status_bar)
-    }
-
-    setTimeout(() => {
-        update_status_bar()
-    }, 100)
-})
-
-glide.autocmds.create("WindowLoaded", async () => {
-    let status_bar = document.getElementById(status_bar_id) as HTMLElement
-    if (!status_bar) {
-        status_bar = DOM.create_element("div", {
-            id: status_bar_id,
-            children: [
-                DOM.create_element("div", {
-                    className: "glide-status-tabs",
-                    children: []
-                }),
-                DOM.create_element("div", {
-                    className: "glide-status-right",
-                    children: []
-                })
-            ]
-        }) as HTMLElement
-
-        const browser = document.getElementById("browser")
-        if (browser) {
-            browser.appendChild(status_bar)
-        }
-    }
-
-    await update_status_bar()
-})
-
-function ensure_status_bar() {
-    let status_bar = document.getElementById(status_bar_id) as HTMLElement
-    if (!status_bar) {
-        status_bar = DOM.create_element("div", {
-            id: status_bar_id,
-            children: [
-                DOM.create_element("div", {
-                    className: "glide-status-tabs",
-                    children: []
-                }),
-                DOM.create_element("div", {
-                    className: "glide-status-right",
-                    children: []
-                })
-            ]
-        }) as HTMLElement
-
-        const browser = document.getElementById("browser")
-        if (browser) {
-            browser.appendChild(status_bar)
-        }
-    } else {
-        let tabs = status_bar.querySelector(".glide-status-tabs")
-        let right = status_bar.querySelector(".glide-status-right")
-        if (!tabs || !right) {
-            status_bar.innerHTML = ""
-            status_bar.appendChild(DOM.create_element("div", {
-                className: "glide-status-tabs",
-                children: []
-            }))
-            status_bar.appendChild(DOM.create_element("div", {
-                className: "glide-status-right",
-                children: []
-            }))
-        }
-    }
-    return status_bar
-}
-
-async function update_status_bar() {
-    // Ensure status bar exists
-    const status_bar = ensure_status_bar() as HTMLElement
-    if (!status_bar) return
-
-    const tabs_container = status_bar.querySelector(".glide-status-tabs")
-    const right = status_bar.querySelector(".glide-status-right")
-    if (!tabs_container || !right) {
-        // If elements don't exist, recreate them
-        ensure_status_bar()
-        return
-    }
-
-    try {
-        const current_window = await browser.windows.getCurrent();
-        const tabs = await browser.tabs.query({
-            windowId: current_window.id,
-        });
-        const active_tab = await glide.tabs.active();
-        const tab_index = tabs.findIndex(t => t.id == active_tab.id);
-        const url = active_tab.url;
-        const title = active_tab.title || "Untitled";
-
-        let display_url = url || "about:blank";
-
-        if (display_url.length > 50) {
-            display_url = display_url.substring(0, 47) + "...";
-        }
-
-        tabs_container.textContent = `[${tab_index + 1}/${tabs.length}]`;
-        right.textContent = `${title} | ${display_url}`;
-    } catch (e) {
-        tabs_container.textContent = e;
-        right.textContent = "Error loading tabs"
-    }
-}
-
-glide.autocmds.create("ModeChanged", "*", (args) => {
-    const style_id = "glide-custom-mode-indicator"
-    glide.styles.remove(style_id)
-    glide.styles.add(`
-      #browser {
-        border-bottom: 3px solid var(${mode_colors[args.new_mode] ?? fallback_mode_color})
-      }
-    `, { id: style_id })
-})
-
-glide.autocmds.create("UrlEnter", /.*/, async () => {
-    await update_status_bar()
-})
-
-browser.tabs.onActivated.addListener(async () => {
-    await update_status_bar()
-})
-
-browser.tabs.onUpdated.addListener(async (tabId, changeInfo) => {
-    if (changeInfo.url || changeInfo.title) {
-        await update_status_bar()
-    }
-})
-
-browser.tabs.onCreated.addListener(async () => {
-    await update_status_bar()
-})
-
-browser.tabs.onRemoved.addListener(async () => {
-    await update_status_bar()
-})
-
-glide.styles.add(`
-    #${status_bar_id} {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 24px;
-      background-color: #1e1e1e;
-      color: #d4d4d4;
-      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
-      font-size: 12px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0 12px;
-      border-top: 1px solid #3e3e3e;
-      z-index: 10000;
-      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
-      overflow: hidden;
-    }
-
-    #${status_bar_id} .glide-status-tabs {
-      display: flex;
-      align-items: center;
-      gap: 0;
-      flex: 1;
-      overflow-x: auto;
-      overflow-y: hidden;
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-    }
-
-    #${status_bar_id} .glide-status-tabs::-webkit-scrollbar {
-      display: none;
-    }
-
-    #${status_bar_id} .glide-tab-item {
-      color: #858585;
-      cursor: pointer;
-      padding: 2px 4px;
-      border-radius: 2px;
-      white-space: nowrap;
-      transition: background-color 0.2s ease, color 0.2s ease;
-    }
-
-    #${status_bar_id} .glide-tab-item:hover {
-      background-color: #2e2e2e;
-      color: #d4d4d4;
-    }
-
-    #${status_bar_id} .glide-tab-item.active {
-      color: #569cd6;
-      font-weight: 600;
-      background-color: #2a2a2a;
-    }
-
-    #${status_bar_id} .glide-tab-separator {
-      color: #3e3e3e;
-      user-select: none;
-    }
-
-    #${status_bar_id} .glide-status-right {
-      color: #858585;
-      margin-left: 12px;
-      white-space: nowrap;
-      flex-shrink: 0;
-    }
-
-    #browser {
-      padding-bottom: 24px;
-    }
-  `, { id: "glide-status-bar-styles" });
+glide.include('tabbar.glide.ts');
 
 const toggle_reader_mode = glide.excmds.create({
     name: 'toggle_reader_mode',
diff --git a/glide/.config/glide/tabbar.glide.ts b/glide/.config/glide/tabbar.glide.ts
new file mode 100644
index 0000000..b542604
--- /dev/null
+++ b/glide/.config/glide/tabbar.glide.ts
@@ -0,0 +1,252 @@
+// Status bar
+// https://github.com/glide-browser/glide/discussions/147#discussioncomment-15573076
+
+const status_bar_id = "glide-status-bar"
+
+const mode_colors: Record<keyof GlideModes, string> = {
+    "command": "--glide-mode-command",
+    "hint": "--glide-mode-hint",
+    "ignore": "--glide-mode-ignore",
+    "insert": "--glide-mode-insert",
+    "normal": "--glide-mode-normal",
+    "op-pending": "--glide-mode-op-pending",
+    "visual": "--glide-mode-visual",
+}
+const fallback_mode_color = "--glide-fallback-mode"
+
+glide.autocmds.create("ConfigLoaded", async () => {
+    const existing = document.getElementById(status_bar_id)
+    if (existing) {
+        existing.remove()
+    }
+
+    const status_bar = DOM.create_element("div", {
+        id: status_bar_id,
+        children: [
+            DOM.create_element("div", {
+                className: "glide-status-tabs",
+                children: []
+            }),
+            DOM.create_element("div", {
+                className: "glide-status-right",
+                children: []
+            })
+        ]
+    })
+
+    const browser = document.getElementById("browser")
+    if (browser) {
+        browser.appendChild(status_bar)
+    }
+
+    setTimeout(() => {
+        update_status_bar()
+    }, 100)
+})
+
+glide.autocmds.create("WindowLoaded", async () => {
+    let status_bar = document.getElementById(status_bar_id) as HTMLElement
+    if (!status_bar) {
+        status_bar = DOM.create_element("div", {
+            id: status_bar_id,
+            children: [
+                DOM.create_element("div", {
+                    className: "glide-status-tabs",
+                    children: []
+                }),
+                DOM.create_element("div", {
+                    className: "glide-status-right",
+                    children: []
+                })
+            ]
+        }) as HTMLElement
+
+        const browser = document.getElementById("browser")
+        if (browser) {
+            browser.appendChild(status_bar)
+        }
+    }
+
+    await update_status_bar()
+})
+
+function ensure_status_bar() {
+    let status_bar = document.getElementById(status_bar_id) as HTMLElement
+    if (!status_bar) {
+        status_bar = DOM.create_element("div", {
+            id: status_bar_id,
+            children: [
+                DOM.create_element("div", {
+                    className: "glide-status-tabs",
+                    children: []
+                }),
+                DOM.create_element("div", {
+                    className: "glide-status-right",
+                    children: []
+                })
+            ]
+        }) as HTMLElement
+
+        const browser = document.getElementById("browser")
+        if (browser) {
+            browser.appendChild(status_bar)
+        }
+    } else {
+        let tabs = status_bar.querySelector(".glide-status-tabs")
+        let right = status_bar.querySelector(".glide-status-right")
+        if (!tabs || !right) {
+            status_bar.innerHTML = ""
+            status_bar.appendChild(DOM.create_element("div", {
+                className: "glide-status-tabs",
+                children: []
+            }))
+            status_bar.appendChild(DOM.create_element("div", {
+                className: "glide-status-right",
+                children: []
+            }))
+        }
+    }
+    return status_bar
+}
+
+async function update_status_bar() {
+    // Ensure status bar exists
+    const status_bar = ensure_status_bar() as HTMLElement
+    if (!status_bar) return
+
+    const tabs_container = status_bar.querySelector(".glide-status-tabs")
+    const right = status_bar.querySelector(".glide-status-right")
+    if (!tabs_container || !right) {
+        // If elements don't exist, recreate them
+        ensure_status_bar()
+        return
+    }
+
+    try {
+        const current_window = await browser.windows.getCurrent();
+        const tabs = await browser.tabs.query({
+            windowId: current_window.id,
+        });
+        const active_tab = await glide.tabs.active();
+        const tab_index = tabs.findIndex(t => t.id == active_tab.id);
+        const url = active_tab.url;
+        const title = active_tab.title || "Untitled";
+
+        let display_url = url || "about:blank";
+
+        if (display_url.length > 50) {
+            display_url = display_url.substring(0, 47) + "...";
+        }
+
+        tabs_container.textContent = `[${tab_index + 1}/${tabs.length}]`;
+        right.textContent = `${title} | ${display_url}`;
+    } catch (e) {
+        tabs_container.textContent = e;
+        right.textContent = "Error loading tabs"
+    }
+}
+
+glide.autocmds.create("ModeChanged", "*", (args) => {
+    const style_id = "glide-custom-mode-indicator"
+    glide.styles.remove(style_id)
+    glide.styles.add(`
+      #browser {
+        border-bottom: 3px solid var(${mode_colors[args.new_mode] ?? fallback_mode_color})
+      }
+    `, { id: style_id })
+})
+
+glide.autocmds.create("UrlEnter", /.*/, async () => {
+    await update_status_bar()
+})
+
+browser.tabs.onActivated.addListener(async () => {
+    await update_status_bar()
+})
+
+browser.tabs.onUpdated.addListener(async (tabId, changeInfo) => {
+    if (changeInfo.url || changeInfo.title) {
+        await update_status_bar()
+    }
+})
+
+browser.tabs.onCreated.addListener(async () => {
+    await update_status_bar()
+})
+
+browser.tabs.onRemoved.addListener(async () => {
+    await update_status_bar()
+})
+
+glide.styles.add(`
+    #${status_bar_id} {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 24px;
+      background-color: #1e1e1e;
+      color: #d4d4d4;
+      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
+      font-size: 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 12px;
+      border-top: 1px solid #3e3e3e;
+      z-index: 10000;
+      box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
+      overflow: hidden;
+    }
+
+    #${status_bar_id} .glide-status-tabs {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      flex: 1;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+
+    #${status_bar_id} .glide-status-tabs::-webkit-scrollbar {
+      display: none;
+    }
+
+    #${status_bar_id} .glide-tab-item {
+      color: #858585;
+      cursor: pointer;
+      padding: 2px 4px;
+      border-radius: 2px;
+      white-space: nowrap;
+      transition: background-color 0.2s ease, color 0.2s ease;
+    }
+
+    #${status_bar_id} .glide-tab-item:hover {
+      background-color: #2e2e2e;
+      color: #d4d4d4;
+    }
+
+    #${status_bar_id} .glide-tab-item.active {
+      color: #569cd6;
+      font-weight: 600;
+      background-color: #2a2a2a;
+    }
+
+    #${status_bar_id} .glide-tab-separator {
+      color: #3e3e3e;
+      user-select: none;
+    }
+
+    #${status_bar_id} .glide-status-right {
+      color: #858585;
+      margin-left: 12px;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    #browser {
+      padding-bottom: 24px;
+    }
+  `, { id: "glide-status-bar-styles" });