fedipod 0.8.0

package/web/admin/bar.css

@@ -0,0 +1,64 @@
+/* The bar every page of ours carries — the record, the setup form and the
+   client view. One file so the three cannot drift apart. */
+/* One column, 960px, centred — the bar included, so the title sits over the
+   page's left edge and the buttons over its right rather than out at the window
+   borders. `width: 100%` with `box-sizing: border-box` keeps the padding inside
+   that 960 instead of adding to it, which is what makes the two margins equal. */
+/* Phanpy's own colours, read off the running client. --surface is the one you
+   see behind Phanpy — its --bg-faded-color — and that is the PAGE. --raised is
+   Phanpy's --bg-color, and that is the bar sitting on top of it. Declared here
+   because bar.css is on all three pages, so they cannot drift. */
+:root { --surface: #f0f2f5; --raised: #fff;
+  --ink: #1b1c1e; --field-bg: #ffffff; --field-bg-hover: #f7f4ee; --field-edge: #767676;
+  --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23444444' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
+@media (prefers-color-scheme: dark) {
+  :root { --surface: #18191a; --raised: #242526;
+    --ink: #e8eaed; --field-bg: #383d44; --field-bg-hover: #40464e; --field-edge: #9aa0a6;
+    --chevron: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23dddddd' stroke-width='1.6' stroke-linecap='round'/></svg>"); }
+}
+body { background: var(--surface); }
+/* The BAND spans the window; its CONTENTS stay in the 960 column. Constraining
+   the element itself left the colour as a stripe with bare page either side.
+   The inline padding is the column's own margin plus the 1rem the page uses
+   inside it, so the title lands exactly on the page's left edge — and `max`
+   keeps it at 1rem once the window is narrower than the column.
+   No rule underneath: the tone change is the boundary, and a line as well
+   would be drawing it twice. */
+/* Wraps, because it does not fit: at 320px the title plus three destinations
+   ran 67px past the viewport, and the bar is on every page — so the whole
+   document scrolled sideways whatever was under it. */
+#bar { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
+  width: 100%; max-width: none; margin: 0; box-sizing: border-box;
+  /* The column width is the page's to declare (--bar-col); 960 stands where a
+     page says nothing. */
+  padding: .5rem max(1rem, calc((100% - var(--bar-col, 960px)) / 2 + 1rem));
+  background: var(--raised); }
+/* The actor's fediverse handle, in the row between the title and the
+   destinations. */
+#bar-handle { color: var(--heading); font-size: .95rem; margin-right: .6rem; }
+#bar-handle:empty { display: none; }
+/* The actors dropdown, where a page's bar carries one instead of the static
+   handle. Styled here so every page's bar shows the same control: the same
+   light well and drawn caret every setting on the record page uses. */
+#bar select { font: inherit; font-size: .95rem; max-width: min(24rem, 55vw);
+  margin-right: .6rem; appearance: none; min-width: 0;
+  padding: .15rem 1.7rem .15rem .55rem;
+  border: 1px solid var(--field-edge); border-radius: .3rem;
+  color: var(--ink); cursor: pointer;
+  background-color: var(--field-bg); background-image: var(--chevron);
+  background-repeat: no-repeat; background-position: right .55rem center;
+  background-size: .6rem auto; }
+#bar select:hover { background-color: var(--field-bg-hover); }
+/* The app title, in px rather than rem: it is chrome, the same on every page,
+   not something that should move when a page changes its base size. */
+#bar .name { flex: 1 1 auto; font-weight: 600; font-size: 24px; color: var(--heading);
+  margin: 0; line-height: 1.1; }
+/* Plain text, not chrome: three destinations in a row read better without a
+   box round each. */
+#bar button, #bar a { font: inherit; font-size: .95rem; padding: .15rem .2rem;
+  border: 0; background: none; color: var(--link); cursor: pointer;
+  text-decoration: none; }
+/* The page you are already on stays in the row, so the set never moves — it is
+   underlined rather than removed. */
+#bar button[aria-current="page"], #bar a[aria-current="page"] {
+  text-decoration: underline; text-underline-offset: .3rem; }

package/web/admin/bar.js

@@ -0,0 +1,61 @@
+// bar.js — the three destinations, shared by the record, the setup form and the
+// client view, so they cannot drift apart. Nothing here touches the client in
+// the frame: it is this agent's own root, and framing it is the whole of the
+// relationship.
+
+(() => {
+  // The three destinations are <a href> now: they are navigations, so they
+  // belong in a screen reader's links list, and middle-click and open-in-new-tab
+  // work the way they do everywhere else. Nothing here has to drive them.
+  //
+  // One exception, and it keeps its href as the fallback: on the record page
+  // `add new account` opens the form IN PLACE rather than reloading. admin.js
+  // binds that and calls preventDefault; without the form it is a plain link to
+  // ?new=1, which opens it on arrival.
+
+  // The bar says the product; the TAB says which actor, which is what tells two
+  // open windows apart without putting the handle in the page twice.
+  // /status, not /config: an agent that is not set up yet answers this one and
+  // 409s the other, which logged a failed request on every setup page.
+  fetch(location.pathname.replace(/\/admin\/.*$/u, '') + '/status').then(r => (r.ok ? r.json() : null)).then((s) => {
+    if (s?.handle) document.title = `FediPod — ${s.handle}`;
+    // The full fediverse handle, centred in the bar on every page.
+    const el = document.getElementById('bar-handle');
+    if (el && s?.handle && s?.actor) {
+      try { el.textContent = `@${s.handle}@${new URL(s.actor).host}`; } catch { /* odd actor url */ }
+    }
+  }).catch(() => { /* not up yet; the bar still works */ });
+
+  // The actors dropdown, on a page whose bar carries one. The record page
+  // wires its own richer version (it can start a stopped actor and open the
+  // new-account form in place), so this one stands down there.
+  const pick = document.getElementById('actor-pick');
+  if (pick && !document.getElementById('new-actor-form')) {
+    const base = location.pathname.replace(/\/admin\/.*$/u, '');
+    fetch(base + '/profiles').then(r => (r.ok ? r.json() : null)).then((j) => {
+      const actors = j?.identities || [];
+      pick.textContent = '';
+      const label = (r) => (r.address || r.handle || r.name)
+        + (r.mode && r.mode !== 'active' ? ` (${r.mode})` : '') + (r.mode ? '' : ' (stopped)');
+      for (const [i, r] of actors.entries()) {
+        const o = document.createElement('option');
+        o.value = String(i);
+        o.selected = !!r.current;
+        o.textContent = label(r);
+        pick.appendChild(o);
+      }
+      const add = document.createElement('option');
+      add.value = '__add';
+      add.textContent = '+ add a new account…';
+      pick.appendChild(add);
+      pick.addEventListener('change', () => {
+        if (pick.value === '__add') { location.href = base + '/admin/?new=1'; return; }
+        const r2 = actors[Number(pick.value)];
+        if (!r2 || r2.current) return;
+        // A running actor's client; a stopped one is started from its record.
+        if (r2.mode && r2.admin) location.href = r2.admin + 'client/';
+        else if (r2.admin) location.href = r2.admin;
+      });
+    }).catch(() => { pick.hidden = true; });
+  }
+})();

package/web/admin/client/client.js

@@ -0,0 +1,66 @@
+// client.js — make the framed client be THIS agent's actor.
+//
+// The client is a general fediverse client: it keeps a list of accounts in
+// localStorage and one of them is current. Nothing makes that one agree with
+// the agent serving the page. A leftover account from another identity wins,
+// and you get somebody else's timeline on this actor's page, with the profile
+// editor pointed at a host that cannot answer.
+//
+// Per-origin storage is what keeps identities apart, and it does work — each
+// actor answers at <handle>.localhost:<port> and each origin has its own
+// accounts list. What was missing is the other half: telling the client which
+// account it is meant to be showing.
+//
+// The frame's markup declares what it loads (`src="/"`), and that does not
+// change. This navigates the loaded app to its own login route, which is app
+// navigation, not an include: `?instance=` prefills and `?submit=` runs it, so
+// the round trip needs no typing. Hash-routed, so the query lives after the
+// hash; `submit` must be non-empty, because the empty string is falsy and the
+// auto-submit never fires.
+
+(async () => {
+  const frame = document.getElementById('client');
+  if (!frame) return;
+
+  // Who this agent is, in the form the client stores: `info.uri` is the actor
+  // URI on the pod. Matching on that rather than on the origin is deliberate —
+  // "which account logged in here" is a different question, and it is the one
+  // that goes wrong when the two origins get mixed.
+  const base = location.pathname.replace(/\/admin\/.*$/u, '');
+  const status = await fetch(base + '/status').then(r => (r.ok ? r.json() : null)).catch(() => null);
+  if (!status?.actor) return;                 // not set up yet; setup owns that
+
+  // A deep link into the client — the record links an actor's own page this way
+  // — arrives as a hash on THIS page, and the frame never sees it. Forward it,
+  // so the link lands where it says while keeping the bar above it.
+  const wanted = location.hash && location.hash !== '#' ? location.hash : null;
+  const sendTo = (hash) => {
+    try { frame.contentWindow.location.hash = hash; } catch { /* not ready yet */ }
+  };
+  const whenReady = (fn) => {
+    if (frame.contentWindow?.location?.href && frame.contentWindow.location.href !== 'about:blank') fn();
+    else frame.addEventListener('load', fn, { once: true });
+  };
+
+  let accounts = [];
+  try { accounts = JSON.parse(localStorage.getItem('accounts') || '[]'); } catch { /* unreadable */ }
+  const ours = accounts.find(a => a?.info?.uri === status.actor);
+  if (ours) {
+    // A stored login can be dead — its token revoked or minted by a run that
+    // never finished. Trusting it shows an empty client with no way out, so
+    // ask the facade first; a dead one falls through to the same one-trip
+    // login a missing account gets.
+    const alive = ours.accessToken && await fetch('/api/v1/accounts/verify_credentials', {
+      headers: { authorization: `Bearer ${ours.accessToken}` },
+    }).then(r => r.ok).catch(() => false);
+    if (alive) {
+      if (wanted) whenReady(() => sendTo(wanted));
+      return;
+    }
+  }
+
+  // Same origin, so the frame's own host is the instance to log into. A deep
+  // link is dropped here on purpose: logging in navigates the frame anyway, and
+  // arriving somewhere unexpected afterwards is worse than arriving home.
+  whenReady(() => sendTo(`#/login?instance=${encodeURIComponent(location.host)}&submit=1`));
+})();

package/web/admin/client/index.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>FediPod — client</title>
+<style>
+:root { color-scheme: light dark; font-size: 112.5%; --link: #1a4f8a; --heading: #5b3a8e; }
+/* The bar is fixed height, the client takes the rest — the page never scrolls,
+   the frame does. */
+html { height: 100%; }
+body { font: 1rem/1.5 system-ui, sans-serif; margin: 0; height: 100dvh;
+  display: flex; flex-direction: column; overflow: hidden; }
+main { flex: 1 1 auto; min-height: 0; display: flex; }
+#client { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; }
+@media (prefers-color-scheme: dark) {
+  :root { --link: #7fb3e8; --heading: #b9a3e3; }
+}
+</style>
+<link rel="stylesheet" href="../bar.css">
+</head>
+<body>
+
+<!-- The same bar the record carries, so the two surfaces are one thing with two
+     views. The client below is this agent's own, at its own root: same origin,
+     which is why framing it needs nothing opened beyond frame-ancestors 'self'. -->
+<nav id="bar" aria-label="Site">
+  <h1 class="name">FediPod</h1>
+  <select id="actor-pick" aria-label="Local actors"
+    title="   Every actor on this machine; choosing one opens its client"></select>
+  <a id="bar-fediverse" href="./" title="   Open the client and read your timeline" aria-current="page">visit account</a>
+  <a id="bar-manage" href="../" title="   The record: what this actor is, and what you can do to it">manage account</a>
+</nav>
+
+<main>
+<iframe id="client" src="../../" title="fediverse client"></iframe>
+</main>
+
+<script src="../bar.js"></script>
+<script src="client.js"></script>
+</body>
+</html>