server status bar indicator

plugin/src/main.js

@@ -2,6 +2,7 @@ const { Plugin, TFile, TFolder } = require("obsidian");
 const { showFilePicker, addFileMenuItems, addFolderMenuItems } = require("./file-actions");
 const { patchSettingsModal, unpatchSettingsModal } = require("./settings/inject");
 const pluginRegistry = require("./plugin-registry");
+const { initStatusBar } = require("./status-bar");
 
 window.__obsidianAPI = require("obsidian");
 
@@ -11,6 +12,7 @@ class IgnisBridgePlugin extends Plugin {
 
     await pluginRegistry.refresh();
     patchSettingsModal(this);
+    this._statusBarInterval = initStatusBar(this);
 
     this.addRibbonIcon("upload", "Upload file", () => {
       showFilePicker(this.app);
@@ -28,6 +30,10 @@ class IgnisBridgePlugin extends Plugin {
   }
 
   onunload() {
+    if (this._statusBarInterval) {
+      clearInterval(this._statusBarInterval);
+    }
+
     unpatchSettingsModal(this);
     console.log("[ignis-bridge] Plugin unloaded");
   }

plugin/src/status-bar.js

@@ -0,0 +1,48 @@
+function getWsStatus() {
+  const ws = window.__ignisWs;
+
+  if (!ws) {
+    return "disconnected";
+  }
+
+  switch (ws.readyState) {
+    case WebSocket.CONNECTING:
+      return "connecting";
+    case WebSocket.OPEN:
+      return "connected";
+    default:
+      return "disconnected";
+  }
+}
+
+const STATUS_LABELS = {
+  connected: "Ignis server: Connected",
+  connecting: "Ignis server: Connecting...",
+  disconnected: "Ignis server: Disconnected",
+};
+
+function initStatusBar(plugin) {
+  const item = plugin.addStatusBarItem();
+  item.addClass("ignis-statusbar-item");
+
+  const dot = item.createEl("span", {
+    cls: "ignis-statusbar-dot",
+  });
+
+  item.setAttribute("aria-label", "Ignis: Checking...");
+  item.setAttribute("data-tooltip-position", "top");
+
+  const update = () => {
+    const status = getWsStatus();
+    dot.className = `ignis-statusbar-dot ignis-statusbar-${status}`;
+    item.setAttribute("aria-label", STATUS_LABELS[status] || "Ignis: Unknown");
+  };
+
+  update();
+
+  const interval = setInterval(update, 3000);
+
+  return interval;
+}
+
+module.exports = { initStatusBar };

plugin/styles.css

@@ -105,6 +105,31 @@
   color: var(--text-muted);
 }
 
+.ignis-statusbar-item {
+  display: flex;
+  align-items: center;
+  cursor: default;
+}
+
+.ignis-statusbar-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.ignis-statusbar-connected {
+  background-color: var(--color-green);
+}
+
+.ignis-statusbar-connecting {
+  background-color: var(--color-yellow);
+}
+
+.ignis-statusbar-disconnected {
+  background-color: var(--color-red);
+}
+
 .ignis-plugins-description {
   padding: 0 16px;
   color: var(--text-muted);