From 6ff6f38469023fdaab5d34063bf96931eff00270 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sat, 21 Mar 2026 23:59:31 +0100
Subject: [PATCH] feat: show where your userdata is coming from on the
 dashboard

---
 src/_components/grid.vto                   |  5 +++
 src/common/pages/dashboard.js              | 26 +++++++++++++++-
 src/common/pages/grid.js                   | 36 ++++++++++++++++++++++
 src/common/pages/ppr.js                    |  1 +
 src/facets/connect/atproto/index.inline.js |  1 +
 src/facets/connect/s3/index.inline.js      |  1 +
 src/styles/diffuse/page.css                | 11 +++++++
 7 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/src/_components/grid.vto b/src/_components/grid.vto
index d9bc32f9..69d4b912 100644
--- a/src/_components/grid.vto
+++ b/src/_components/grid.vto
@@ -4,6 +4,11 @@
   <button class="button--border button--tiny" data-filter="all">All</button>
   <button class="button--border button--tiny button--bg-accent button--tr-accent button--transparent" data-filter="prelude">Features</button>
   <button class="button--border button--tiny button--bg-twist-2 button--tr-twist-2 button--transparent" data-filter="interface">Interfaces</button>
+
+  <div style="flex: 1"></div>
+
+  <span class="grid-filter--label grid-filter--label-output">Userdata from</span>
+  <span class="grid-filter--output"></span>
 </div>
 
 <ul class="grid" style="margin-top: var(--space-xs);">
diff --git a/src/common/pages/dashboard.js b/src/common/pages/dashboard.js
index d053da94..f6b6c1fb 100644
--- a/src/common/pages/dashboard.js
+++ b/src/common/pages/dashboard.js
@@ -10,6 +10,7 @@ import { nothing } from "~/common/element.js";
 
 import { deleteFacet, saveFacet } from "./crud.js";
 import { output } from "./output.js";
+import OutputOrchestrator from "@toko/diffuse/components/orchestrator/output/element.js";
 
 // Signals
 const activeFilter = signal("all");
@@ -206,7 +207,7 @@ export async function renderList() {
 }
 
 /**
- * @param {OutputElement} output
+ * @param {OutputOrchestrator} output
  * @param {HTMLElement} listEl
  */
 function _renderList(output, listEl) {
@@ -239,6 +240,10 @@ function _renderList(output, listEl) {
       })
     : [];
 
+  const selected = output.selected();
+  const outputLabel = selected?.label ?? selected?.getAttribute?.("label") ??
+    "Local";
+
   const filterBar = html`
     <div class="grid-filter">
       <span class="grid-filter--label">Filter by</span>
@@ -268,6 +273,12 @@ function _renderList(output, listEl) {
       >
         Interfaces
       </button>
+
+      <div style="flex: 1"></div>
+
+      <span class="grid-filter--label grid-filter--label-output"
+      >Userdata from</span>
+      <span class="grid-filter--output">${outputLabel}</span>
     </div>
   `;
 
@@ -363,4 +374,17 @@ function _renderList(output, listEl) {
     `;
 
   render(h, listEl);
+
+  setTimeout(() => {
+    /** @type {HTMLElement | null} */
+    const l = listEl.querySelector(".grid-filter--label-output");
+
+    /** @type {HTMLElement | null} */
+    const o = listEl.querySelector(".grid-filter--output");
+
+    if (o && l) {
+      l.style.opacity = "0.4";
+      o.style.opacity = "1";
+    }
+  }, 250);
 }
diff --git a/src/common/pages/grid.js b/src/common/pages/grid.js
index 7d5cdcdc..f6e58117 100644
--- a/src/common/pages/grid.js
+++ b/src/common/pages/grid.js
@@ -36,6 +36,42 @@ export function setupFilter() {
   });
 }
 
+////////////////////////////////////////////
+// OUTPUT INDICATOR
+////////////////////////////////////////////
+
+/** @type {() => void | undefined} */
+let stopOutputIndicator;
+
+export async function setupOutputIndicator() {
+  if (stopOutputIndicator) stopOutputIndicator();
+
+  const filterEl = document.querySelector(".grid-filter");
+  if (!filterEl) return;
+
+  const out = await output();
+
+  /** @type {HTMLElement | null} */
+  const indicator = filterEl.querySelector(".grid-filter--output");
+  if (!indicator) return;
+
+  /** @type {HTMLElement | null} */
+  const label = filterEl.querySelector(".grid-filter--label-output");
+  if (!label) return;
+
+  setTimeout(() => {
+    indicator.style.opacity = "1";
+    label.style.opacity = "0.4";
+  }, 250);
+
+  stopOutputIndicator = effect(() => {
+    const selected = out.selected();
+    const label = selected?.label ?? selected?.getAttribute?.("label") ??
+      "Local";
+    indicator.textContent = label;
+  });
+}
+
 ////////////////////////////////////////////
 // TOGGLE BUTTONS
 ////////////////////////////////////////////
diff --git a/src/common/pages/ppr.js b/src/common/pages/ppr.js
index afacf391..7f6d05fb 100644
--- a/src/common/pages/ppr.js
+++ b/src/common/pages/ppr.js
@@ -33,6 +33,7 @@ async function initJsBasedOnPage(url) {
   Grid.setupFilter();
   Grid.insertToggleButtons();
   await Grid.monitorToggleButtonStates();
+  await Grid.setupOutputIndicator();
 
   switch (path) {
     case "/build":
diff --git a/src/facets/connect/atproto/index.inline.js b/src/facets/connect/atproto/index.inline.js
index 874732e8..0c0cbbd9 100644
--- a/src/facets/connect/atproto/index.inline.js
+++ b/src/facets/connect/atproto/index.inline.js
@@ -219,6 +219,7 @@ async function connect() {
 }
 
 async function disconnect() {
+  await outputOrchestrator.deselect();
   await atprotoEl?.logout();
 }
 
diff --git a/src/facets/connect/s3/index.inline.js b/src/facets/connect/s3/index.inline.js
index aae07311..946faea1 100644
--- a/src/facets/connect/s3/index.inline.js
+++ b/src/facets/connect/s3/index.inline.js
@@ -184,6 +184,7 @@ async function removeBucket(uri, isOutput) {
     }
 
     if (isOutput) {
+      await outputOrchestrator.deselect();
       await s3El?.unsetBucket();
     }
   } catch (err) {
diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css
index 79817b5c..86be6153 100644
--- a/src/styles/diffuse/page.css
+++ b/src/styles/diffuse/page.css
@@ -350,6 +350,17 @@ textarea {
     margin-right: var(--space-2xs);
     opacity: 0.4;
   }
+
+  .grid-filter--output {
+    font-size: var(--fs-xs);
+    font-weight: 700;
+  }
+
+  .grid-filter--label-output,
+  .grid-filter--output {
+    opacity: 0;
+    transition: opacity 250ms;
+  }
 }
 
 /**
-- 
2.51.2