glide: Add status bar

1 files changed, 250 insertions, 0 deletions

diff --git a/glide/.config/glide/glide.ts b/glide/.config/glide/glide.ts
index 0afc4f4..aab1e2a 100644
--- a/glide/.config/glide/glide.ts
+++ b/glide/.config/glide/glide.ts
@@ -468,3 +468,253 @@ const other_window = glide.excmds.create({
 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 tabs = await glide.tabs.query({});
+        const active_tab = await glide.tabs.active();
+        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 = `Tabs: ${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" });
+