Update 2025-04-24_11:44:19

static/streams-ui.js

@@ -0,0 +1,76 @@
+// static/streams-ui.js — public streams loader and profile-link handling
+import { showOnly } from './router.js';
+
+let loadingStreams = false;
+
+export function renderStreamList(streams) {
+  const ul = document.getElementById('stream-list');
+  if (!ul) return;
+  if (streams.length) {
+    streams.sort();
+    ul.innerHTML = streams
+      .map(
+        uid => `<li><a href="/?profile=${encodeURIComponent(uid)}" class="profile-link">▶ ${uid}</a></li>`
+      )
+      .join('');
+  } else {
+    ul.innerHTML = '<li>No active streams.</li>';
+  }
+  highlightActiveProfileLink();
+}
+
+export function highlightActiveProfileLink() {
+  const params = new URLSearchParams(window.location.search);
+  const profileUid = params.get('profile');
+  const ul = document.getElementById('stream-list');
+  if (!ul) return;
+  ul.querySelectorAll('a.profile-link').forEach(link => {
+    const url = new URL(link.href, window.location.origin);
+    const uidParam = url.searchParams.get('profile');
+    link.classList.toggle('active', uidParam === profileUid);
+  });
+}
+
+export function initStreamsLoader() {
+  const streamsLink = document.getElementById('show-streams');
+  streamsLink?.addEventListener('click', async e => {
+    e.preventDefault();
+    if (loadingStreams) return;
+    loadingStreams = true;
+    showOnly('stream-page');
+    try {
+      const res = await fetch('/streams');
+      if (!res.ok) throw new Error(`HTTP error ${res.status}`);
+      const data = await res.json();
+      renderStreamList(data.streams || []);
+    } catch {
+      const ul = document.getElementById('stream-list');
+      if (ul) ul.innerHTML = '<li>Error loading stream list</li>';
+    } finally {
+      loadingStreams = false;
+    }
+  });
+}
+
+export function initStreamLinks() {
+  const ul = document.getElementById('stream-list');
+  if (!ul) return;
+  ul.addEventListener('click', e => {
+    const a = e.target.closest('a.profile-link');
+    if (!a || !ul.contains(a)) return;
+    e.preventDefault();
+    const url = new URL(a.href, window.location.origin);
+    const profileUid = url.searchParams.get('profile');
+    if (profileUid && window.location.search !== `?profile=${encodeURIComponent(profileUid)}`) {
+      window.profileNavigationTriggered = true;
+      window.history.pushState({}, '', `/?profile=${encodeURIComponent(profileUid)}`);
+      window.dispatchEvent(new Event('popstate'));
+    }
+  });
+}
+
+export function initStreamsUI() {
+  initStreamsLoader();
+  initStreamLinks();
+  window.addEventListener('popstate', highlightActiveProfileLink);
+}