@3sln/trove 0.0.7 → 0.0.9

package/packages/web/src/ui/components/social.js

@@ -5,8 +5,11 @@
 import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
 import { relativeDate } from '../format.js';
-import { OpenFileAction } from '../../bl/actions.js';
+import { AddTagAction, CopyTextAction, DeleteCommentAction, EnablePushAction, ExecCommandAction, LoadSidecarAction, OpenFileAction, OpenNotificationTargetAction, PostCommentAction, ReactToCommentAction, RemoveTagAction, SetReplyToAction, ToggleInboxAction, ToggleInfoPanelAction } from '../../bl/actions.js';
 import { troveUri } from '@3sln/trove/core/links.js';
+import { parseMentions } from '../../bl/mentions.js';
+import { sidecarFor } from '../../bl/queries.js';
+import { watchQuery } from '../../bl/watchQuery.js';
 
 const { div, span, button, textarea, input, p } = dd;
 
@@ -28,26 +31,24 @@ export function principalChip(state) {
 
 export function notificationBell(state, ui) {
   const n = state.so.notifications;
-  const social = ui.app.social;
   return div({ className: 'bell-wrap' },
     button({ className: 'iconbtn bell', title: 'Notifications' },
       icon('bell', { size: 19 }),
       n.unread ? span({ className: 'bell-badge' }, String(n.unread > 9 ? '9+' : n.unread)) : null,
-    ).on({ click: () => social.toggleInbox() }),
+    ).on({ click: () => ui.engine.dispatch(new ToggleInboxAction()) }),
     state.so.inboxOpen ? inboxDropdown(state, ui) : null,
   );
 }
 
 function inboxDropdown(state, ui) {
   const items = state.so.notifications.items;
-  const social = ui.app.social;
   return div({},
-    div({ className: 'scrim', $styling: { background: 'transparent', 'z-index': '54' } }).on({ click: () => social.toggleInbox(false) }),
+    div({ className: 'scrim', $styling: { background: 'transparent', 'z-index': '54' } }).on({ click: () => ui.engine.dispatch(new ToggleInboxAction(false)) }),
     div({ className: 'inbox' },
       div({ className: 'inbox-head' },
         span('Notifications'),
         state.so.pushSupported && !state.so.pushEnabled
-          ? button({ className: 'link' }, 'Enable push').on({ click: () => social.enablePush() })
+          ? button({ className: 'link' }, 'Enable push').on({ click: () => ui.engine.dispatch(new EnablePushAction()) })
           : state.so.pushEnabled ? span({ className: 'muted' }, icon('check', { size: 13 })) : null,
       ),
       items.length
@@ -65,21 +66,10 @@ function inboxItem(note, ui) {
     div({ className: 'ii-time' }, relativeDate(note.createdAt)),
   ).on({
     click: () => {
-      if (first?.nodeId) {
-        ui.platform.api.stat(first.nodeId).then((r) => {
-          ui.go(new OpenFileAction(r.node));
-          ui.platform.workbench.toggleInfoPanel(true);
-        }).catch((err) => {
-          // The item a notification points at can be deleted, or live somewhere the
-          // reader lost access to. Either way the click must not just do nothing.
-          ui.platform.notifications.warn(
-            err?.status === 403 || err?.code === 'forbidden'
-              ? 'You no longer have access to that item.'
-              : 'That item no longer exists.',
-          );
-        });
-      }
-      ui.app.social.toggleInbox(false);
+      // One intent, one action — including what to say when the item a notification
+      // points at is gone. See OpenNotificationTargetAction.
+      if (first?.nodeId) ui.engine.dispatch(new OpenNotificationTargetAction(first.nodeId));
+      ui.engine.dispatch(new ToggleInboxAction(false));
     },
   });
 }
@@ -89,26 +79,31 @@ function inboxItem(note, ui) {
 export function infoPanel(state, ui) {
   const nav = state.nav;
   const active = nav.activeFile ? { id: nav.activeTabId, node: nav.activeFile } : null;
-  const sc = state.so.sidecar;
   return div({ className: 'infopanel' },
     div({ className: 'ip-head' },
       icon('info', { size: 15 }),
       span('Details'),
-      button({ className: 'iconbtn', title: 'Close' }, icon('close', { size: 14 })).on({ click: () => ui.platform.workbench.toggleInfoPanel(false) }),
+      button({ className: 'iconbtn', title: 'Close' }, icon('close', { size: 14 })).on({ click: () => ui.engine.dispatch(new ToggleInfoPanelAction(false)) }),
     ),
     !active
       ? div({ className: 'ip-empty' }, span('Open a file to see its tags and conversation.'))
-      : div({ className: 'ip-body' },
-          fileHeader(active.node, state, ui),
-          linkSection(active.node, state, ui),
-          tagSection(sc, ui),
-          conversationSection(state, sc, ui),
-        ),
+      // Watching `sidecarFor(id)` is what LOADS it: the query's bootAction fetches when the
+      // first observer arrives and its killAction clears when the last one leaves. Nothing
+      // watches the nav stack to notice a file changed — a different file is a different
+      // query. See bl/queries.js.
+      : ui.watch(watchQuery(ui.engine, sidecarFor(active.node.id)), (sc) => div({ className: 'ip-body' },
+        fileHeader(active.node, state, ui),
+        linkSection(active.node, state, ui),
+        tagSection(sc, ui),
+        conversationSection(state, sc, ui),
+      )),
   );
 }
 
 function fileHeader(node, state, ui) {
-  const pinned = ui.app.offline.isPinned(node.id);
+  // From the offline view, which resolves the pin set — the component asks whether this
+  // file is pinned without knowing that pins are a list to be scanned.
+  const pinned = state.off?.pinnedIds?.has(node.id) ?? false;
   return div({ className: 'ip-file' },
     div({ className: 'ip-name' }, node.name),
     div({ className: 'ip-path' }, node.contentType || ''),
@@ -118,7 +113,7 @@ function fileHeader(node, state, ui) {
     button({ className: `btn small ${pinned ? 'on' : ''}`, $styling: { 'margin-top': '10px' } },
       icon(pinned ? 'check' : 'download', { size: 14 }),
       pinned ? 'Available offline' : 'Make available offline',
-    ).on({ click: () => (pinned ? ui.exec('offline.unpin', node) : ui.exec('offline.pin', node)) }),
+    ).on({ click: () => (pinned ? ui.engine.dispatch(new ExecCommandAction('offline.unpin', node)) : ui.engine.dispatch(new ExecCommandAction('offline.pin', node))) }),
   );
 }
 
@@ -147,18 +142,13 @@ function linkSection(node, state, ui) {
         : mine?.items?.length
           ? div({ className: 'ip-backlinks' }, ...mine.items.map((n) =>
             button({ className: 'ip-backlink', title: n.name }, icon('file-text', { size: 12 }), span(n.name))
-              .on({ click: () => ui.go(new OpenFileAction(n)) })))
+              .on({ click: () => ui.engine.dispatch(new OpenFileAction(n)) })))
           : div({ className: 'ip-muted' }, 'Nothing links here yet.'),
   );
 }
 
-async function copyLink(ui, uri) {
-  try {
-    await navigator.clipboard.writeText(uri);
-    ui.platform.notifications.success(`Copied ${uri}`);
-  } catch {
-    ui.platform.notifications.info(uri, { sticky: true });
-  }
+function copyLink(ui, uri) {
+  ui.engine.dispatch(new CopyTextAction(uri, `Copied ${uri}`));
 }
 
 function tagSection(sc, ui) {
@@ -169,7 +159,7 @@ function tagSection(sc, ui) {
       ...tags.map((t) =>
         span({ className: 'tag' },
           t.value ? `${t.name}: ${t.value}` : t.name,
-          button({ className: 'tag-x' }, icon('close', { size: 11 })).on({ click: () => ui.app.social.removeTag(t.name) }),
+          button({ className: 'tag-x' }, icon('close', { size: 11 })).on({ click: () => ui.engine.dispatch(new RemoveTagAction(t.name)) }),
         ),
       ),
       input({ className: 'tag-input', placeholder: '+ tag', value: '' }).on({
@@ -177,7 +167,7 @@ function tagSection(sc, ui) {
           if (e.key === 'Enter' && e.target.value.trim()) {
             const raw = e.target.value.trim();
             const [name, ...rest] = raw.split(':');
-            ui.app.social.addTag(name.trim(), rest.join(':').trim() || undefined);
+            ui.engine.dispatch(new AddTagAction(name.trim(), rest.join(':').trim() || undefined));
             e.target.value = '';
           }
         },
@@ -194,7 +184,7 @@ function conversationSection(state, sc, ui) {
   const body = sc?.error
     ? div({ className: 'conv-empty' },
         span(`Couldn't load the conversation: ${sc.error}`),
-        button({ className: 'btn', $styling: { 'margin-top': '8px' } }, 'Retry').on({ click: () => ui.app.social.loadSidecar(sc.nodeId) }))
+        button({ className: 'btn', $styling: { 'margin-top': '8px' } }, 'Retry').on({ click: () => ui.engine.dispatch(new LoadSidecarAction(sc.nodeId)) }))
     : comments.length
       ? div({ className: 'thread' }, ...comments.map((c) => commentNode(c, state, ui, 0)))
       : div({ className: 'conv-empty' }, 'No comments yet. Start the discussion — use @ to mention someone.');
@@ -207,7 +197,6 @@ function conversationSection(state, sc, ui) {
 
 function commentNode(c, state, ui, depth) {
   const me = state.so.me;
-  const social = ui.app.social;
   const mine = me && c.author?.id === me.id;
   return div({ className: 'comment', $styling: depth ? { marginLeft: '18px' } : {} },
     div({ className: 'c-head' },
@@ -222,17 +211,16 @@ function commentNode(c, state, ui, depth) {
       ...REACTIONS.map((emoji) => {
         const users = c.reactions?.[emoji] || [];
         return button({ className: `react ${users.includes(me?.id) ? 'on' : ''}` }, emoji, users.length ? span({ className: 'rc' }, String(users.length)) : null)
-          .on({ click: () => social.react(c.id, emoji) });
+          .on({ click: () => ui.engine.dispatch(new ReactToCommentAction(c.id, emoji)) });
       }),
-      button({ className: 'c-link' }, 'Reply').on({ click: () => social.setReplyTo({ id: c.id, author: c.author }) }),
-      mine ? button({ className: 'c-link danger' }, 'Delete').on({ click: () => social.deleteComment(c.id) }) : null,
+      button({ className: 'c-link' }, 'Reply').on({ click: () => ui.engine.dispatch(new SetReplyToAction({ id: c.id, author: c.author })) }),
+      mine ? button({ className: 'c-link danger' }, 'Delete').on({ click: () => ui.engine.dispatch(new DeleteCommentAction(c.id)) }) : null,
     ) : null,
     (c.replies || []).length ? div({ className: 'replies' }, ...c.replies.map((r) => commentNode(r, state, ui, depth + 1))) : null,
   ).key(c.id);
 }
 
 function composer(state, ui) {
-  const social = ui.app.social;
   const me = state.so.me;
   const replyTo = state.so.replyTo;
   // `me` is null only when /api/me didn't answer — offline, or refused. It is NOT the
@@ -252,11 +240,11 @@ function composer(state, ui) {
   }
   return div({ className: 'composer' },
     replyTo ? div({ className: 'replying' }, `Replying to ${replyTo.author?.name || 'comment'}`,
-      button({ className: 'c-link' }, 'cancel').on({ click: () => social.setReplyTo(null) })) : null,
+      button({ className: 'c-link' }, 'cancel').on({ click: () => ui.engine.dispatch(new SetReplyToAction(null)) })) : null,
     textarea({ className: 'composer-input', placeholder: 'Write a comment…  @mention someone', rows: 2, value: '' }).on({
       keydown: (e) => {
         if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-          social.comment(e.target.value);
+          ui.engine.dispatch(new PostCommentAction(e.target.value));
           e.target.value = '';
         }
       },
@@ -266,7 +254,7 @@ function composer(state, ui) {
       button({ className: 'btn primary', disabled: state.so.posting }, 'Comment').on({
         click: (e) => {
           const box = e.target.closest('.composer').querySelector('.composer-input');
-          social.comment(box.value);
+          ui.engine.dispatch(new PostCommentAction(box.value));
           box.value = '';
         },
       }),
@@ -274,17 +262,9 @@ function composer(state, ui) {
   );
 }
 
-// Render @[Name](id) tokens and bare @handles as highlighted mentions.
+// WHERE the mentions are is parsed in bl/mentions.js, beside the `#tag` parser it is a
+// sibling of. All that is left here is the decision to draw one as a chip.
 function renderBody(text) {
-  const out = [];
-  const re = /@\[([^\]]+)\]\(([^)]+)\)|(?:^|\s)@([a-zA-Z0-9._@-]{2,})/g;
-  let last = 0;
-  let m;
-  while ((m = re.exec(text))) {
-    if (m.index > last) out.push(text.slice(last, m.index + (m[3] ? (m[0].startsWith(' ') ? 1 : 0) : 0)));
-    out.push(span({ className: 'mention' }, '@' + (m[1] || m[3])));
-    last = re.lastIndex;
-  }
-  if (last < text.length) out.push(text.slice(last));
-  return out;
+  return parseMentions(text).map((part) =>
+    (part.type === 'mention' ? span({ className: 'mention' }, `@${part.name}`) : part.value));
 }

package/packages/web/src/ui/components/statusBar.js

@@ -2,6 +2,7 @@ import { dd } from '../../runtime.js';
 import { icon } from '../icon.js';
 import { bytes } from '../format.js';
 import { sanitizedVNodes, htmlToText } from '../sanitize.js';
+import { CancelTransferAction, ExecCommandAction, ShowContextMenuAction, ToggleActivityPanelAction } from '../../bl/actions.js';
 
 const { div, button, span } = dd;
 
@@ -12,15 +13,17 @@ const { div, button, span } = dd;
  * A slot with nothing in it, or one whose `when` doesn't hold, renders nothing at all
  * rather than an empty chip.
  */
+// The item arrives already decided — see the statusItems view query. Whether it should
+// show at all (`visible`, its `when` clause, whether the plugin behind it is responding) is
+// resolved on the query side now, which is what let this stop reaching into `platform`
+// mid-render. `html` is still untrusted plugin markup: a query emitting plain data says
+// nothing about that data being safe, so it is still sanitised here.
 function statusSlot(item, ui) {
-  if (item.visible === false || !item.html) return null;
-  if (item.when && !ui.platform.context.evaluate(item.when)) return null;
-  if (!ui.platform.plugins.isAvailable(item)) return null;
   const content = sanitizedVNodes(item.html, dd);
   if (!content.length) return null;
   const title = item.tooltip ? htmlToText(item.tooltip) : '';
   return item.command
-    ? button({ className: 'seg', title }, ...content).on({ click: () => ui.exec(item.command) })
+    ? button({ className: 'seg', title }, ...content).on({ click: () => ui.engine.dispatch(new ExecCommandAction(item.command)) })
     : span({ className: 'seg', title }, ...content);
 }
 
@@ -35,7 +38,7 @@ function statusSlot(item, ui) {
 export function activityChips(state, ui) {
   const act = state.act || { tasks: [], issues: [] };
   const running = act.tasks.filter((t) => t.status === 'running');
-  const open = () => ui.app.activity.togglePanel(true);
+  const open = () => ui.engine.dispatch(new ToggleActivityPanelAction(true));
   const chips = [];
 
   if (running.length) {
@@ -71,12 +74,9 @@ export function activityChips(state, ui) {
  * meter that means nothing. The bar turns amber under 10% free and red under 5%, which
  * is early enough to act on.
  */
-export function usageChip(ex) {
-  const u = ex.usage;
+export function usageChip({ usage: u, usageLevel: level = '' }) {
   if (!u?.total) return null;
-  const freeRatio = u.available / u.total;
   const pct = Math.min(100, Math.round((u.used / u.total) * 100));
-  const level = freeRatio < 0.05 ? 'critical' : freeRatio < 0.1 ? 'low' : '';
   return span({
     className: `seg sb-usage ${level}`,
     title: `${bytes(u.used)} used of ${bytes(u.total)} — ${bytes(u.available)} free on this volume`,
@@ -85,63 +85,19 @@ export function usageChip(ex) {
   span(`${bytes(u.available)} free`));
 }
 
-/**
- * Everything the status bar reports, derived once.
- *
- * Two shells render these: the desktop as a row of segments along the bottom, the phone
- * as rows in a sheet behind a single icon. Deriving them in one place is what stops the
- * two from quietly telling the user different things about the same drive.
- */
-export function statusFacts(state, ui) {
-  const ex = state.ex;
-  const items = ex.items || [];
-  const act = state.act || { tasks: [], issues: [] };
-  return {
-    // `null` with nothing open — `collectionLabel` renders that as "no collection". The
-    // old fallback made the bar name a collection that may not exist, on a drive where
-    // the user had not yet chosen one.
-    collectionId: ex.collectionId ?? null,
-    // What to CALL it, so the phone shell and the desktop bar cannot end up saying
-    // different things — which is the entire reason these facts are derived once. The
-    // phone rendered `collectionId` raw, which showed an opaque `col_…` id where the
-    // desktop showed the name.
-    collectionLabel: collectionLabel(ex),
-    // The COLLECTION's totals when the server could give them, not the page's. Summing
-    // what happens to be loaded reports a 3,000-file drive as 500 files — a wrong number,
-    // not a rounded one. Falls back to the page only when the server didn't say.
-    totalItems: ex.stats?.items ?? items.length,
-    // Whether that total is the COLLECTION's or just the page we happen to hold. With
-    // more pages waiting, the page length is a floor, not a total, and must read as one.
-    totalKnown: ex.stats?.items != null,
-    totalBytes: ex.stats?.bytes ?? items.reduce((n, i) => n + (i.size || 0), 0),
-    shown: items.length,
-    partial: !!ex.nextCursor,
-    usage: ex.usage,
-    uploading: state.tr.items.filter((t) => t.status === 'active'),
-    running: act.tasks.filter((t) => t.status === 'running'),
-    issues: act.issues,
-    off: state.off || { online: true, pins: [], queued: 0, syncing: false },
-    caps: ui.platform.capabilities,
-  };
-}
-
-/** What to call the current collection: its name, its id, or an honest nothing. */
-function collectionLabel(ex) {
-  if (!ex?.collectionId) return 'no collection';
-  const match = (ex.collections || []).find((c) => c.id === ex.collectionId);
-  return match?.name || ex.collectionId;
-}
-
 export default function statusBar(state, ui) {
   const ex = state.ex;
   const items = ex.items || [];
-  const f = statusFacts(state, ui);
-  const { totalItems, totalBytes, caps } = f;
+  // Derived by the `statusFacts` query — see bl/status.js. These used to be worked out
+  // here and imported INTO the phone chrome from this module, which is a business-layer
+  // derivation living in a component and being shared out of it.
+  const f = state.facts;
+  const { totalItems, totalBytes } = f;
+  const caps = state.caps;
   const active = f.uploading;
 
-  // Plugin-contributed status slots, ordered by their declared `order` then name.
-  const slots = [...(state.statusItems || [])]
-    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.name.localeCompare(b.name));
+  // Plugin-contributed status slots. Already filtered and ordered by the query.
+  const slots = state.statusItems || [];
   const left = slots.filter((s) => s.slot === 'left').map((s) => statusSlot(s, ui));
   const right = slots.filter((s) => s.slot !== 'left').map((s) => statusSlot(s, ui));
 
@@ -161,34 +117,34 @@ export default function statusBar(state, ui) {
         icon('download', { size: 12 }), span(`${off.pins.length} offline`), icon('chevron-down', { size: 11 }))
         .on({ click: (e) => {
           const items = off.pins.slice(0, 12).flatMap((p) => [
-            { label: p.name, icon: 'file-text', run: () => ui.exec('explorer.open', p) },
-            { label: `Remove “${p.name}” from offline`, icon: 'close', run: () => ui.exec('offline.unpin', p) },
+            { label: p.name, icon: 'file-text', actions: [new ExecCommandAction('explorer.open', p)] },
+            { label: `Remove “${p.name}” from offline`, icon: 'close', actions: [new ExecCommandAction('offline.unpin', p)] },
             { sep: true },
           ]);
-          if (off.pins.length > 12) items.push({ label: `…and ${off.pins.length - 12} more`, run: () => {} });
+          if (off.pins.length > 12) items.push({ label: `…and ${off.pins.length - 12} more`, actions: [] });
           const r = e.currentTarget.getBoundingClientRect();
-          ui.platform.workbench.showContextMenu(r.left, r.top - 8 - items.length * 34, items);
+          ui.engine.dispatch(new ShowContextMenuAction(r.left, r.top - 8 - items.length * 34, items));
         } })
       : null,
     button({ className: 'seg', title: 'Switch collection' },
       // The NAME, and nothing invented. `|| 'default'` used to sit here, which meant the
       // status bar cheerfully named a collection on a drive that had none.
-      icon('files', { size: 13 }), span(collectionLabel(ex)),
+      icon('files', { size: 13 }), span(f.collectionLabel),
       (ex.collections || []).length > 1 || ex.canCreateCollection ? icon('chevron-down', { size: 11 }) : null)
       .on({ click: (e) => {
-        const items = ui.app.collectionMenu?.() || [];
+        const items = ex.collectionMenu || [];
         // With nowhere else to go, the segment is a label, not a dead menu.
         if (items.length > 1 || ex.canCreateCollection) {
           const r = e.currentTarget.getBoundingClientRect();
-          ui.platform.workbench.showContextMenu(r.left, r.top - 8 - items.length * 34, items);
-        } else ui.exec('workbench.view.home');
+          ui.engine.dispatch(new ShowContextMenuAction(r.left, r.top - 8 - items.length * 34, items));
+        } else ui.engine.dispatch(new ExecCommandAction('workbench.view.home'));
       } }),
     active.length
       ? button({ className: 'seg', title: 'Active uploads — click to cancel' }, div({ className: 'spinner', $styling: { width: '11px', height: '11px' } }), span(`${active.length} uploading`))
-        .on({ click: (e) => ui.platform.workbench.showContextMenu(e.clientX, e.clientY, active.map((t) => ({
+        .on({ click: (e) => ui.engine.dispatch(new ShowContextMenuAction(e.clientX, e.clientY, active.map((t) => ({
           label: `Cancel ${t.name} (${Math.round((t.ratio || 0) * 100)}%)`, icon: 'close', danger: true,
-          run: () => ui.app.transfers.cancel(t.id),
-        }))) })
+          actions: [new CancelTransferAction(t.id)],
+        })))) })
       : span({ className: 'seg', title: ex.nextCursor ? `Showing ${items.length} of ${f.totalKnown ? totalItems : 'more'}` : '' },
         `${totalItems.toLocaleString()}${f.totalKnown || !f.partial ? '' : '+'} item${totalItems === 1 ? '' : 's'}`),
     ...left,
@@ -204,12 +160,12 @@ export default function statusBar(state, ui) {
         ? 'Total size of this collection'
         : `Size of the ${f.shown.toLocaleString()} items loaded so far — this server doesn’t report a collection total`,
     }, `${bytes(totalBytes)}${f.totalKnown || !f.partial ? '' : '+'}`),
-    usageChip(ex),
+    usageChip(f),
     caps ? span({ className: 'seg', title: 'Storage backend capabilities' },
       icon(caps.storage?.presignDownload ? 'download' : 'files', { size: 12 }),
       span(caps.storage?.presignDownload ? 'S3 direct' : 'proxied'),
     ) : null,
     caps?.features?.semanticSearch ? button({ className: 'seg', title: 'Semantic search enabled' }, icon('star', { size: 12 }), span('semantic'))
-      .on({ click: () => ui.exec('workbench.view.home') }) : null,
+      .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.view.home')) }) : null,
   );
 }

package/packages/web/src/ui/components/views/grid.js

@@ -17,6 +17,7 @@ import { dd } from '../../../runtime.js';
 import { icon, iconForNode } from '../../icon.js';
 import { groupHeader, menuButton, openRowMenu } from './parts.js';
 import { attachMedia } from '../../media.js';
+import { activate } from '../../activate.js';
 
 const { div, span, img } = dd;
 
@@ -24,7 +25,7 @@ export function gridView({ groups, index, handlers, ui }) {
   let gi = -1;
   return div({ className: 'launch-view view-grid' },
     ...groups.map((group) => div({ className: 'launch-group' },
-      groupHeader(group),
+      groupHeader(group, ui),
       group.items.length
         ? div({ className: 'grid-list' }, ...group.items.map((it) => {
           const at = ++gi;
@@ -108,7 +109,7 @@ function tile(it, active, { hover, select }, ui) {
     ),
     div({ className: 'gt-name' }, it.title),
   ).on({
-    click: it.run,
+    click: () => activate(ui, it),
     mouseenter: hover,
     ...(it.menu ? { contextmenu: (e) => { e.preventDefault(); openRowMenu(e.currentTarget, it, ui, e, select); } } : {}),
   });

package/packages/web/src/ui/components/views/index.js

@@ -20,6 +20,8 @@
 
 import { dd } from '../../../runtime.js';
 import { icon } from '../../icon.js';
+import { SetSettingAction } from '../../../bl/actions.js';
+import { SETTING } from '../../../bl/views.js';
 import { listView } from './list.js';
 import { gridView, gridMove } from './grid.js';
 
@@ -44,76 +46,19 @@ export function registerBuiltinViews(platform) {
   }
 }
 
-const SETTING = 'explorer.view';
 
-/**
- * Every view that could draw these results, best first.
- *
- * No availability check, unlike openers: a view is host code, so there is no "its
- * provider isn't answering" state to be in. A when-clause is the only gate, and it is
- * the same one every other contribution answers to.
- */
-export function availableViews(platform) {
-  return platform.contributions
-    .ofType('view')
-    .filter((v) => !v.when || platform.context.evaluate(v.when))
-    .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
-}
-
-/**
- * The view to draw with, in order of how much someone meant it.
- *
- * 1. A saved choice — they pressed a button. Nothing infers its way past that.
- * 2. The search transformer's hint, when there is a search on screen. It read the
- *    sentence: "photos from the trip last summer" is a request for a gallery as much as
- *    it is a query, and nothing downstream can recover that from a list of content types.
- * 3. A view whose `match` suits what is actually there — a collection of photographs
- *    opens as a grid without anyone asking.
- * 4. The highest priority, which is the list.
- *
- * A hint naming a view this build doesn't have is ignored, not an error: the transformer
- * is deployment configuration and may outlive the build it was written against.
- */
-export function activeView(platform, items = [], hint = null) {
-  const views = availableViews(platform);
-  if (!views.length) return null;
-  const saved = platform.settings.get(SETTING);
-  const chosen = saved && views.find((v) => v.id === saved);
-  if (chosen) return chosen;
-  const suggested = hint && views.find((v) => v.id === hint);
-  if (suggested) return suggested;
-  const nodes = items.map((i) => i.node).filter(Boolean);
-  if (nodes.length >= 3) {
-    const suits = (v) => v.match && Object.keys(v.match).length
-      && nodes.filter((n) => matchesView(v, n)).length / nodes.length > 0.6;
-    const fitted = views.find(suits);
-    if (fitted) return fitted;
-  }
-  return views[0];
-}
-
-function matchesView(view, node) {
-  const ct = node.contentType || '';
-  const name = (node.name || '').toLowerCase();
-  const ext = name.includes('.') ? name.slice(name.lastIndexOf('.')) : '';
-  if ((view.match.ext || []).includes(ext)) return true;
-  return (view.match.mime || []).some((m) => (m.endsWith('/*') ? ct.startsWith(m.slice(0, -1)) : ct === m));
-}
-
-export function chooseView(platform, viewId) {
-  platform.settings.set(SETTING, viewId || undefined);
-}
 
 /** The switcher, shown only when there is more than one way to look at this. */
-export function viewSwitcher(platform, current) {
-  const views = availableViews(platform);
+export function viewSwitcher(slice, current, ui) {
+  const views = slice?.views || [];
   if (views.length < 2) return null;
   return div({ className: 'view-switch' }, ...views.map((v) =>
     button({
       className: `vs-btn ${v.id === current?.id ? 'on' : ''}`,
-      title: `${v.title || v.name} view`,
+      title: `${v.title} view`,
       'aria-pressed': v.id === current?.id ? 'true' : 'false',
-    }, icon(v.icon || 'list', { size: 14 })).on({ click: () => chooseView(platform, v.id) })));
+    }, icon(v.icon || 'list', { size: 14 }))
+      .on({ click: () => ui.engine.dispatch(new SetSettingAction(SETTING, v.id)) })));
 }
 
 /**

package/packages/web/src/ui/components/views/list.js

@@ -8,6 +8,7 @@
 import { dd } from '../../../runtime.js';
 import { icon } from '../../icon.js';
 import { groupHeader, menuButton, openRowMenu } from './parts.js';
+import { activate } from '../../activate.js';
 
 const { div, span } = dd;
 
@@ -15,7 +16,7 @@ export function listView({ groups, index, handlers, ui }) {
   let gi = -1;
   return div({ className: 'launch-view view-list' },
     ...groups.map((group) => div({ className: 'launch-group' },
-      groupHeader(group),
+      groupHeader(group, ui),
       group.items.length
         ? div({ className: 'launch-list' }, ...group.items.map((it) => {
           const at = ++gi;
@@ -43,7 +44,7 @@ function itemRow(it, active, { hover, select }, ui) {
   // which is how adding `contextmenu` silently removed `click` and stopped every file
   // in the drive from opening.
   ).on({
-    click: it.run,
+    click: () => activate(ui, it),
     mouseenter: hover,
     ...(it.menu ? { contextmenu: (e) => { e.preventDefault(); openRowMenu(e.currentTarget, it, ui, e, select); } } : {}),
   });

package/packages/web/src/ui/components/views/parts.js

@@ -8,6 +8,8 @@
 
 import { dd } from '../../../runtime.js';
 import { icon } from '../../icon.js';
+import { ShowContextMenuAction } from '../../../bl/actions.js';
+import { activate } from '../../activate.js';
 
 const { div, span, button } = dd;
 
@@ -18,14 +20,23 @@ const { div, span, button } = dd;
  * the user typed — it turns their `#draft` into `#DRAFT`, a tag that isn't what they
  * wrote. So a group can carry a verbatim half.
  */
-export function groupHeader(group) {
+export function groupHeader(group, ui) {
+  const controls = group.controls || [];
   return div({ className: 'launch-h' },
     // Label and value together on the left; `.launch-h` is space-between, so an
     // ungrouped value gets flung to the far edge away from the label it belongs to.
     div({ className: 'lh-title' },
       span(group.title),
       group.verbatim ? span({ className: 'lh-verbatim' }, group.verbatim) : null),
-    group.action || null,
+    // Descriptions, not a pre-rendered button. A group used to carry a vnode in `action`,
+    // which meant the thing deciding WHAT a header offers had to be able to draw one — the
+    // same reason menu items stopped carrying `run` closures. See ui/activate.js.
+    controls.length
+      ? div({ className: 'lh-actions' }, ...controls.map((c) =>
+        button({ className: 'launch-up', title: c.title || c.label },
+          c.icon ? icon(c.icon, { size: 13 }) : null, c.label)
+          .on({ click: () => activate(ui, c) })))
+      : null,
   );
 }
 
@@ -52,7 +63,7 @@ export function openRowMenu(anchor, it, ui, event, select) {
   const y = event?.clientY ?? (r ? r.bottom : 0);
   // Read the coordinates BEFORE selecting: selecting re-renders, and `anchor` is then
   // a detached node whose rect is all zeroes.
-  const items = it.menu(ui);
+  const items = it.menu();
   select?.();
-  ui.platform.workbench.showContextMenu(x, y, items);
+  ui.engine.dispatch(new ShowContextMenuAction(x, y, items));
 }