@3sln/trove 0.0.2

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

@@ -0,0 +1,290 @@
+// Social UI: the notification bell (title bar) and the info panel (a right rail
+// with the active file's tags and threaded conversation). Both render from the
+// reactive SocialService; actions call back into it.
+
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+import { relativeDate } from '../format.js';
+import { OpenFileAction } from '../../bl/actions.js';
+import { troveUri } from '@3sln/trove/core/links.js';
+
+const { div, span, button, textarea, input, p } = dd;
+
+const REACTIONS = ['👍', '❤️', '🎉', '👀', '🚀'];
+
+// ---- title-bar principal chip + bell ---------------------------------------
+
+export function principalChip(state) {
+  const me = state.so.me;
+  // No identity, no profile. On a deployment with no login the server hands back a
+  // shared anonymous stand-in; rendering an avatar and a name for it would describe a
+  // user who does not exist, and imply an account there is no way to sign in or out of.
+  if (!me || me.anonymous) return null;
+  const initial = (me.name || me.id || '?')[0].toUpperCase();
+  return div({ className: 'principal', title: me.email || me.name || me.id },
+    me.picture ? dd.img({ src: me.picture, alt: '', className: 'avatar-img' }) : span({ className: 'avatar-txt' }, initial),
+  );
+}
+
+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() }),
+    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: 'inbox' },
+      div({ className: 'inbox-head' },
+        span('Notifications'),
+        state.so.pushSupported && !state.so.pushEnabled
+          ? button({ className: 'link' }, 'Enable push').on({ click: () => social.enablePush() })
+          : state.so.pushEnabled ? span({ className: 'muted' }, icon('check', { size: 13 })) : null,
+      ),
+      items.length
+        ? div({ className: 'inbox-items' }, ...items.slice(0, 30).map((note) => inboxItem(note, ui)))
+        : div({ className: 'inbox-empty' }, icon('info', { size: 24 }), span('You’re all caught up.')),
+    ),
+  );
+}
+
+function inboxItem(note, ui) {
+  const first = note.items?.[0];
+  return div({ className: `inbox-item ${note.read ? '' : 'unread'}` },
+    div({ className: 'ii-title' }, note.title),
+    first?.excerpt ? div({ className: 'ii-excerpt' }, '“' + first.excerpt + '”') : null,
+    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);
+    },
+  });
+}
+
+// ---- info panel (tags + conversation) --------------------------------------
+
+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) }),
+    ),
+    !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),
+        ),
+  );
+}
+
+function fileHeader(node, state, ui) {
+  const pinned = ui.app.offline.isPinned(node.id);
+  return div({ className: 'ip-file' },
+    div({ className: 'ip-name' }, node.name),
+    div({ className: 'ip-path' }, node.contentType || ''),
+    // Secondary, not primary. Pinning a file for offline is a useful thing to be able
+    // to do and not the thing you came to this panel for — as the brightest element on
+    // screen it out-shouted the file's own links, tags and conversation.
+    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)) }),
+  );
+}
+
+/**
+ * The item's own `trove:` link, and what links to it.
+ *
+ * With no folders, backlinks are the answer to "where does this live?" — the documents
+ * that gather it up. A load failure says so rather than rendering as an empty list,
+ * which would read as a fact about the drive instead of about the request.
+ */
+function linkSection(node, state, ui) {
+  const bl = state.so.backlinks;
+  const uri = node.collectionId ? troveUri(node) : null;
+  const mine = bl && bl.nodeId === node.id ? bl : null;
+  return div({ className: 'ip-section' },
+    div({ className: 'ip-label' }, 'Links'),
+    uri
+      ? button({ className: 'ip-uri', title: 'Copy this item’s link' }, icon('link', { size: 12 }), span(uri))
+        .on({ click: () => copyLink(ui, uri) })
+      : null,
+    div({ className: 'ip-label', $styling: { 'margin-top': '10px' } }, 'Linked from'),
+    mine?.loading
+      ? div({ className: 'ip-muted' }, 'Loading…')
+      : mine?.error
+        ? div({ className: 'ip-muted error' }, `Couldn’t load links: ${mine.error}`)
+        : 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)) })))
+          : 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 tagSection(sc, ui) {
+  const tags = sc?.tags || [];
+  return div({ className: 'ip-section' },
+    div({ className: 'ip-label' }, 'Tags'),
+    div({ className: 'tags' },
+      ...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) }),
+        ),
+      ),
+      input({ className: 'tag-input', placeholder: '+ tag', value: '' }).on({
+        keydown: (e) => {
+          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);
+            e.target.value = '';
+          }
+        },
+      }),
+    ),
+  );
+}
+
+function conversationSection(state, sc, ui) {
+  if (sc?.loading) return div({ className: 'ip-section' }, div({ className: 'spinner' }));
+  const comments = sc?.comments || [];
+  // On a load failure, don't render a false "No comments yet" — say it couldn't load
+  // and offer a retry, so the user doesn't post into what looks like an empty thread.
+  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) }))
+    : 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.');
+  return div({ className: 'ip-section conv' },
+    div({ className: 'ip-label' }, `Conversation${sc?.commentCount ? ` · ${sc.commentCount}` : ''}`),
+    body,
+    sc?.error ? null : composer(state, 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' },
+      span({ className: 'c-avatar' }, (c.author?.name || '?')[0].toUpperCase()),
+      span({ className: 'c-author' }, c.author?.name || c.author?.id || 'Someone'),
+      span({ className: 'c-time' }, relativeDate(c.createdAt), c.edited ? ' · edited' : ''),
+    ),
+    c.deleted
+      ? div({ className: 'c-body deleted' }, 'comment deleted')
+      : div({ className: 'c-body' }, renderBody(c.body)),
+    !c.deleted ? div({ className: 'c-actions' },
+      ...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) });
+      }),
+      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,
+    ) : 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
+  // anonymous case (an anonymous deployment returns a real anonymous principal), so
+  // "Sign in to join the conversation" was shown to people with nowhere to sign in,
+  // and to people who were merely offline. Say which it is, and offer the one action
+  // that helps: Trove ships no login of its own, so signing in means letting the
+  // identity proxy in front of it redirect a fresh page load.
+  if (!me) {
+    if (!state.off?.online) {
+      return div({ className: 'conv-signin' }, 'You’re offline. Conversations come back when you reconnect.');
+    }
+    return div({ className: 'conv-signin' },
+      span('You’re signed out, so you can read this conversation but not add to it.'),
+      button({ className: 'c-link' }, 'Reload to sign in').on({ click: () => window.location.reload() }),
+    );
+  }
+  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,
+    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);
+          e.target.value = '';
+        }
+      },
+    }),
+    div({ className: 'composer-actions' },
+      span({ className: 'muted' }, '⌘/Ctrl + Enter'),
+      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);
+          box.value = '';
+        },
+      }),
+    ),
+  );
+}
+
+// Render @[Name](id) tokens and bare @handles as highlighted mentions.
+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;
+}

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

@@ -0,0 +1,198 @@
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+import { bytes } from '../format.js';
+import { sanitizedVNodes, htmlToText } from '../sanitize.js';
+
+const { div, button, span } = dd;
+
+/**
+ * A plugin's status slot. The manifest declares the slot (name + side); the plugin
+ * pushes content into it at runtime over RPC. The content is untrusted HTML from a
+ * sandboxed frame, so it goes through the allowlist sanitizer before it becomes nodes.
+ * A slot with nothing in it, or one whose `when` doesn't hold, renders nothing at all
+ * rather than an empty chip.
+ */
+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) })
+    : span({ className: 'seg', title }, ...content);
+}
+
+/**
+ * The two things that make background work and standing problems discoverable at all.
+ *
+ * Running work shows only while it is running — a status bar that always carries an
+ * "Activity" button teaches people to ignore it. The attention badge is the opposite:
+ * it stays until the problem is actually fixed, because that is the whole point of an
+ * issue as against a toast that scrolls away.
+ */
+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 chips = [];
+
+  if (running.length) {
+    const first = running[0];
+    const determinate = first.total != null && first.total > 0;
+    const pct = determinate ? Math.round(((first.done || 0) / first.total) * 100) : null;
+    chips.push(button({
+      className: 'seg sb-activity',
+      title: running.map((t) => t.title).join('\n'),
+    },
+    div({ className: 'spinner', $styling: { width: '11px', height: '11px' } }),
+    span(running.length > 1
+      ? `${running.length} running`
+      : `${first.title}${pct == null ? '' : ` ${pct}%`}`)).on({ click: open }));
+  }
+
+  if (act.issues.length) {
+    chips.push(button({
+      className: 'seg sb-attention',
+      title: act.issues.map((i) => i.title).join('\n'),
+    }, icon('info', { size: 12 }), span(`${act.issues.length} need${act.issues.length === 1 ? 's' : ''} attention`))
+      .on({ click: open }));
+  }
+  return chips;
+}
+
+/**
+ * How full the disk is — but only when the backend actually knows.
+ *
+ * A filesystem or NAS can answer exactly, and that is where it matters: a disk fills
+ * up and every upload starts failing with no warning that anything was coming. An
+ * object store has no equivalent number, so this renders nothing at all rather than a
+ * 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;
+  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`,
+  },
+  div({ className: 'usage-bar' }, div({ className: 'usage-fill', $styling: { width: `${pct}%` } })),
+  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 {
+    collectionId: ex.collectionId || 'default',
+    // 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,
+  };
+}
+
+export default function statusBar(state, ui) {
+  const ex = state.ex;
+  const items = ex.items || [];
+  const f = statusFacts(state, ui);
+  const { totalItems, totalBytes, caps } = f;
+  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));
+  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));
+
+  const off = f.off;
+  return div({ className: 'statusbar' },
+    !off.online
+      ? span({ className: 'seg offline-badge', title: 'You are offline — pinned files and cached data are available' }, icon('info', { size: 12 }), span('Offline'))
+      : off.syncing
+        ? span({ className: 'seg', title: 'Syncing offline changes' }, div({ className: 'spinner', $styling: { width: '11px', height: '11px' } }), span('Syncing…'))
+        : null,
+    off.queued ? span({ className: 'seg', title: 'Changes waiting to sync' }, `${off.queued} queued`) : null,
+    // The pinned files themselves. There is no offline-files view anywhere, so a chip
+    // counting them that only dropped you on the home screen was a label pretending to
+    // be a control — and unpinning meant finding each file again through search.
+    off.pins.length
+      ? button({ className: 'seg', title: `${off.pins.length} file(s) available offline` },
+        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) },
+            { sep: true },
+          ]);
+          if (off.pins.length > 12) items.push({ label: `…and ${off.pins.length - 12} more`, run: () => {} });
+          const r = e.currentTarget.getBoundingClientRect();
+          ui.platform.workbench.showContextMenu(r.left, r.top - 8 - items.length * 34, items);
+        } })
+      : null,
+    button({ className: 'seg', title: 'Switch collection' },
+      icon('files', { size: 13 }), span(ex.collectionId || 'default'),
+      (ex.collections || []).length > 1 || ex.canCreateCollection ? icon('chevron-down', { size: 11 }) : null)
+      .on({ click: (e) => {
+        const items = ui.app.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');
+      } }),
+    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) => ({
+          label: `Cancel ${t.name} (${Math.round((t.ratio || 0) * 100)}%)`, icon: 'close', danger: true,
+          run: () => ui.app.transfers.cancel(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,
+    div({ className: 'spacer' }),
+    ...activityChips(state, ui),
+    ...right,
+    // Same qualifier as the item count beside it. Without it the two numbers in one bar
+    // disagreed about their own honesty: "500+ items" next to a byte figure that was
+    // only the loaded page's, presented as the collection's.
+    span({
+      className: 'seg',
+      title: f.totalKnown || !f.partial
+        ? '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),
+    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,
+  );
+}

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

@@ -0,0 +1,115 @@
+// The grid view: tiles, with a picture on them where there is a picture to show.
+//
+// This is the second way to look at a drive, and it exists as much to prove the view
+// contract as to be useful — a contribution type with one implementation is a guess. It
+// draws the SAME groups the list does, headers and all, because the group header is
+// where Upload, Empty trash and Retry live: a view that dropped it would take those off
+// the screen the moment someone switched to tiles.
+//
+// On thumbnails, honestly: there is no thumbnail service yet, so a tile showing a
+// photograph is showing the photograph, scaled down by the browser. That is affordable
+// only because `loading="lazy"` means the ones below the fold are never fetched — the
+// grid asks for what is on screen and nothing else. A hosted build that generates real
+// thumbnails should register its own view rather than patch this one; that is the whole
+// point of the contribution.
+
+import { dd } from '../../../runtime.js';
+import { icon, iconForNode } from '../../icon.js';
+import { groupHeader, menuButton, openRowMenu } from './parts.js';
+import { attachMedia } from '../../media.js';
+
+const { div, span, img } = dd;
+
+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),
+      group.items.length
+        ? div({ className: 'grid-list' }, ...group.items.map((it) => {
+          const at = ++gi;
+          return tile(it, at === index, {
+            hover: () => handlers.hover(at),
+            select: () => handlers.select(at),
+          }, ui);
+        }))
+        : div({ className: 'launch-empty' }, group.empty || 'Nothing here.'),
+    )),
+  );
+}
+
+/**
+ * Which way to move for an arrow key.
+ *
+ * The launcher owns keyboard navigation and thinks in one flat list, which is right for
+ * rows and wrong for tiles: down should mean the tile below, not the tile beside. The
+ * view is asked, gets to answer in the launcher's own terms (a delta), and the launcher
+ * keeps the wrapping, the selection and the scrolling.
+ *
+ * The column count is measured rather than assumed, because it comes from
+ * `auto-fill` — it depends on the window width, the shell, and whether the sidebar
+ * is open, none of which this file should be trying to predict.
+ *
+ * Left and right are only ours when the search box is empty. With a query typed in it,
+ * those keys belong to the caret: someone fixing a typo must not find the highlight
+ * walking across the grid instead.
+ */
+export function gridMove({ key, textual }) {
+  if (key === 'ArrowLeft') return textual ? null : -1;
+  if (key === 'ArrowRight') return textual ? null : 1;
+  const cols = columns();
+  if (key === 'ArrowUp') return -cols;
+  if (key === 'ArrowDown') return cols;
+  return null;
+}
+
+function columns() {
+  // Tiles on the same row share an offsetTop. One row's worth is the answer; a grid with
+  // a single row (or none on screen) falls back to 1, which is the list's behaviour and
+  // never worse than a guess.
+  const tiles = document.querySelectorAll('.grid-list .grid-tile');
+  if (tiles.length < 2) return 1;
+  const top = tiles[0].offsetTop;
+  let n = 0;
+  for (const el of tiles) {
+    if (el.offsetTop !== top) break;
+    n++;
+  }
+  return n || 1;
+}
+
+function tile(it, active, { hover, select }, ui) {
+  const node = it.node;
+  const pictorial = (node?.contentType || '').startsWith('image/');
+  return div({ className: `grid-tile ${active ? 'active' : ''}`, title: it.detail ? `${it.title} — ${it.detail}` : it.title },
+    div({ className: 'gt-media' },
+      // The icon is drawn underneath, always. When the image loads it covers it; when
+      // the image fails — a deleted object, a format the browser won't decode, a 401 —
+      // hiding the <img> uncovers exactly what the list would have shown, rather than
+      // leaving the browser's broken-image glyph in a gallery.
+      icon(node ? iconForNode(node) : it.icon, { size: 26 }),
+      // The `src` is minted rather than built — a tile fetches without our Authorization
+      // header, so the URL has to carry its own grant. Minting is batched (see
+      // platform/mediaUrls.js), so a wall of tiles costs one request, not one each.
+      pictorial
+        ? img({ className: 'gt-img', alt: '', loading: 'lazy', decoding: 'async' }).on({
+          $attach: (dom) => {
+            dom._detachMedia = attachMedia(dom, node, ui, {
+              // Uncovering the icon underneath is exactly what the list would have shown,
+              // and better than the browser's broken-image glyph in a gallery.
+              onError: () => { dom.style.display = 'none'; },
+            });
+          },
+          $detach: (dom) => { dom._detachMedia?.(); dom._detachMedia = null; },
+        }).opaque()
+        : null,
+      it.badge ? span({ className: 'gt-badge' }, it.badge) : null,
+      menuButton(it, ui, select),
+    ),
+    div({ className: 'gt-name' }, it.title),
+  ).on({
+    click: it.run,
+    mouseenter: hover,
+    ...(it.menu ? { contextmenu: (e) => { e.preventDefault(); openRowMenu(e.currentTarget, it, ui, e, select); } } : {}),
+  });
+}