From 287abcc721cfe8f811423ca3eea61d48ca9d04a2 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sun, 26 Apr 2026 19:52:39 +0000
Subject: [PATCH] chore: add source connection status to sources facet

---
 src/facets/data/sources/index.html | 22 ++++++++++++++++++++++
 src/facets/data/sources/index.inline.js | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++---------
 2 file(s) changed, 75 insertion(s)(+), 9 deletion(s)(-)

diff --git a/src/facets/data/sources/index.html b/src/facets/data/sources/index.html
--- a/src/facets/data/sources/index.html
+++ b/src/facets/data/sources/index.html
@@ -53,11 +53,33 @@
   }
 
   .sources-item__detail {
+    align-items: center;
     color: oklch(from var(--text-color) l c h / 0.6);
+    display: flex;
     font-size: var(--fs-xs);
+    gap: var(--space-3xs);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+  }
+
+  .sources-item__status {
+    border-radius: 50%;
+    flex-shrink: 0;
+    height: 6px;
+    width: 6px;
+  }
+
+  .sources-item__status--online {
+    background-color: var(--accent);
+  }
+
+  .sources-item__status--offline {
+    background-color: var(--accent-twist-4);
+  }
+
+  .sources-item__status--unknown {
+    background-color: oklch(from var(--text-color) l c h / 0.2);
   }
 </style>
 
diff --git a/src/facets/data/sources/index.inline.js b/src/facets/data/sources/index.inline.js
--- a/src/facets/data/sources/index.inline.js
+++ b/src/facets/data/sources/index.inline.js
@@ -2,7 +2,7 @@
 
 import * as Output from "~/common/output.js";
 import foundation from "~/common/foundation.js";
-import { effect } from "~/common/signal.js";
+import { effect, signal } from "~/common/signal.js";
 
 import { SCHEME as SCHEME_DROPBOX } from "~/components/input/dropbox/constants.js";
 import { SCHEME as SCHEME_EPHEMERAL_CACHE } from "~/components/input/ephemeral-cache/constants.js";
@@ -93,11 +93,55 @@
   return q === -1 ? uri : uri.slice(0, q);
 };
 
+////////////////////////////////////////////
+// ONLINE STATUS
+////////////////////////////////////////////
+
+
+const onlineMap = signal(/** @type {Record<string, boolean | null>} */ ({}));
+
+/** @param {{ [scheme: string]: import("~/components/input/types.d.ts").Source[] }} sourcesRecord */
+async function checkOnlineStatus(sourcesRecord) {
+  const sources = Object.values(sourcesRecord).flat();
+  const entries = await Promise.all(
+    sources.map(async ({ uri }) => {
+      const result = await inputConfigurator.consult(uri);
+      const online =
+        result.supported && result.consult !== "undetermined"
+          ? result.consult
+          : null;
+      return /** @type {[string, boolean | null]} */ ([trackPrefix(uri), online]);
+    }),
+  );
+  onlineMap.value = Object.fromEntries(entries);
+}
+
+effect(() => {
+  checkOnlineStatus(sourcesOrchestrator.sources());
+});
+
 effect(() => {
   const sourcesRecord = sourcesOrchestrator.sources();
+  const statusMap = onlineMap.get();
 
   const tracksCol = outputOrchestrator.tracks.collection();
   const tracks = tracksCol.state === "loaded" ? tracksCol.data : [];
+
+  /** @param {string} uri */
+  const statusClass = (uri) => {
+    const status = statusMap[trackPrefix(uri)];
+    if (status === true) return "sources-item__status--online";
+    if (status === false) return "sources-item__status--offline";
+    return "sources-item__status--unknown";
+  };
+
+  /** @param {string} uri */
+  const statusTitle = (uri) => {
+    const status = statusMap[trackPrefix(uri)];
+    if (status === true) return "Online";
+    if (status === false) return "Offline";
+    return "Status unknown";
+  };
 
   const entries = Object.entries(sourcesRecord).filter(
     ([, sources]) => sources.length > 0,
@@ -120,10 +164,10 @@
               : ""}">
               <div class="sources-item__info">
                 <span class="sources-item__name">Files stored in the browser</span>
-                <span class="sources-item__detail">${trackCount} track${trackCount ===
-                    1
-                  ? ""
-                  : "s"}</span>
+                <span class="sources-item__detail">
+                  <span class="sources-item__status ${statusClass(uri)}" title="${statusTitle(uri)}"></span>
+                  ${trackCount} track${trackCount === 1 ? "" : "s"}
+                </span>
               </div>
               <button
                 class="button--plain"
@@ -158,10 +202,10 @@
                 : ""}">
                 <div class="sources-item__info">
                   <span class="sources-item__name">${label}</span>
-                  <span class="sources-item__detail">${trackCount} track${trackCount ===
-                      1
-                    ? ""
-                    : "s"}</span>
+                  <span class="sources-item__detail">
+                    <span class="sources-item__status ${statusClass(uri)}" title="${statusTitle(uri)}"></span>
+                    ${trackCount} track${trackCount === 1 ? "" : "s"}
+                  </span>
                 </div>
                 <button
                   class="button--plain button--icon"

--
tangled.sh