Ignis settings tabs

plugin/src/settings/general-tab.js

@@ -1,17 +1,158 @@
 const { Setting } = require("obsidian");
 
-function display(containerEl) {
-  containerEl.createEl("h2", { text: "Ignis General Settings" });
+const GITHUB_URL = "https://github.com/Nystik-gh/ignis";
+const GITHUB_API_LATEST =
+  "https://api.github.com/repos/Nystik-gh/ignis/releases/latest";
 
-  new Setting(containerEl)
-    .setName("Example toggle")
-    .setDesc("This is a test toggle to prove the Setting API works.")
-    .addToggle((toggle) => {
-      toggle.setValue(false);
-      toggle.onChange((value) => {
-        console.log("[ignis] Toggle:", value);
-      });
-    });
+function getVersion(app) {
+  try {
+    const manifest = app.plugins.getPlugin("ignis-bridge")?.manifest;
+    return manifest?.version || "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
+async function checkForUpdate(currentVersion) {
+  try {
+    const res = await fetch(GITHUB_API_LATEST);
+
+    if (!res.ok) {
+      return null;
+    }
+
+    const data = await res.json();
+    const latest = data.tag_name?.replace(/^v/, "");
+
+    if (latest && latest !== currentVersion) {
+      return latest;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function display(containerEl, app) {
+  const version = getVersion(app);
+
+  const header = containerEl.createDiv("ignis-header");
+
+  const logo = header.createEl("img", {
+    cls: "ignis-header-logo",
+    attr: { src: "/assets/ignis.webp", alt: "Ignis" },
+  });
+
+  const info = header.createDiv("ignis-header-info");
+  info.createEl("div", { text: "Ignis", cls: "ignis-header-title" });
+  info.createEl("div", {
+    text: "Obsidian server bridge",
+    cls: "ignis-header-subtitle",
+  });
+
+  const right = header.createDiv("ignis-header-right");
+
+  const versionCol = right.createDiv("ignis-header-version-col");
+  versionCol.createEl("span", {
+    text: `Version ${version}`,
+    cls: "ignis-header-version",
+  });
+
+  const updateIndicator = versionCol.createEl("span", {
+    text: "Checking...",
+    cls: "ignis-update-indicator",
+  });
+
+  const githubLink = right.createEl("a", {
+    cls: "ignis-github-link",
+    href: GITHUB_URL,
+    attr: { target: "_blank", "aria-label": "GitHub" },
+  });
+
+  const githubIcon = githubLink.createEl("img", {
+    cls: "ignis-github-icon",
+    attr: { src: "/assets/github.svg", alt: "GitHub" },
+  });
+
+  checkForUpdate(version).then((latestVersion) => {
+    if (latestVersion) {
+      updateIndicator.textContent = `v${latestVersion} available`;
+      updateIndicator.addClass("ignis-update-available");
+    } else {
+      updateIndicator.textContent = "Up to date";
+    }
+  });
+
+  addServerStatus(containerEl);
+}
+
+function getWsStatus() {
+  const ws = window.__ignisWs;
+
+  if (!ws) {
+    return "disconnected";
+  }
+
+  switch (ws.readyState) {
+    case WebSocket.CONNECTING:
+      return "connecting";
+    case WebSocket.OPEN:
+      return "connected";
+    case WebSocket.CLOSING:
+    case WebSocket.CLOSED:
+      return "disconnected";
+    default:
+      return "disconnected";
+  }
+}
+
+function statusLabel(status) {
+  switch (status) {
+    case "connected":
+      return "Connected";
+    case "connecting":
+      return "Connecting...";
+    case "disconnected":
+      return "Disconnected";
+    default:
+      return "Unknown";
+  }
+}
+
+function addServerStatus(containerEl) {
+  const status = getWsStatus();
+
+  const setting = new Setting(containerEl).setName("Server status");
+
+  const dotEl = setting.controlEl.createEl("span", {
+    cls: `ignis-status-dot ignis-status-${status}`,
+  });
+
+  const labelEl = setting.controlEl.createEl("span", {
+    text: statusLabel(status),
+    cls: "ignis-status-label",
+  });
+
+  const update = () => {
+    const s = getWsStatus();
+    dotEl.className = `ignis-status-dot ignis-status-${s}`;
+    labelEl.textContent = statusLabel(s);
+  };
+
+  const pollInterval = setInterval(update, 3000);
+
+  const observer = new MutationObserver(() => {
+    if (!containerEl.isConnected) {
+      clearInterval(pollInterval);
+      observer.disconnect();
+    }
+  });
+
+  observer.observe(containerEl.parentElement || document.body, {
+    childList: true,
+    subtree: true,
+  });
 }
 
 module.exports = { display };

plugin/src/settings/inject.js

@@ -41,30 +41,44 @@ function createTab(id, name, displayFn, app) {
   return tab;
 }
 
-function injectIgnisSettings(setting, app) {
+function createGroup(name) {
   const group = document.createElement("div");
   group.className = "vertical-tab-header-group";
 
   const title = document.createElement("div");
   title.className = "vertical-tab-header-group-title";
-  title.textContent = "Ignis";
+  title.textContent = name;
   group.appendChild(title);
 
   const items = document.createElement("div");
   items.className = "vertical-tab-header-group-items";
   group.appendChild(items);
 
+  return { group, items };
+}
+
+function injectIgnisSettings(setting, app) {
+  const ignis = createGroup("Ignis");
+
   const tabs = [
     createTab("ignis-general", "General", generalTab.display, app),
-    createTab("ignis-server-plugins", "Server Plugins", serverPluginsTab.display, app),
+    createTab(
+      "ignis-core-plugins",
+      "Core plugins",
+      serverPluginsTab.display,
+      app,
+    ),
   ];
 
   for (const tab of tabs) {
     tab.navEl = createNavEl(tab, setting);
-    items.appendChild(tab.navEl);
+    ignis.items.appendChild(tab.navEl);
   }
 
-  setting.tabHeadersEl.appendChild(group);
+  setting.tabHeadersEl.appendChild(ignis.group);
+
+  const corePlugins = createGroup("Ignis Core Plugins");
+  setting.tabHeadersEl.appendChild(corePlugins.group);
 }
 
 function patchSettingsModal(plugin) {

plugin/src/settings/server-plugins-tab.js

@@ -48,7 +48,14 @@ async function activateBundledPlugin(bundledPluginId, enable, app) {
 }
 
 function display(containerEl, app) {
-  containerEl.createEl("h2", { text: "Server Plugins" });
+  containerEl.createEl("h2", { text: "Ignis Core Plugins" });
+
+  const descEl = containerEl.createEl("p", {
+    text:
+      "Ignis plugins extend server functionality and run alongside your vaults. " +
+      "They are separate from Obsidian's built-in plugins.",
+    cls: "ignis-plugins-description",
+  });
 
   const loadingEl = containerEl.createEl("p", { text: "Loading plugins..." });