@3sln/trove 0.0.2

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

@@ -0,0 +1,35 @@
+// The left rail — the app's only global chrome now that the title bar is gone.
+// Brand mark at the top (→ home), the primary views below, then a bottom cluster
+// of notifications, settings, and the signed-in principal. Search is reached from
+// the Home view itself and via the double-shift modal, so there is no omni bar.
+
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+import { notificationBell, principalChip } from './social.js';
+
+const { div, button, span, img } = dd;
+
+const ITEMS = [
+  { id: 'home', icon: 'search', title: 'Search & files', command: 'workbench.view.home' },
+  { id: 'plugins', icon: 'plug', title: 'Plugins', command: 'workbench.view.plugins' },
+];
+
+export default function activityBar(state, ui) {
+  const active = state.wb.activity;
+  const pluginCount = state.plugins?.filter((p) => p.status === 'active').length || 0;
+  return div({ className: 'activitybar' },
+    button({ className: 'brand-mark', title: 'Trove — home' }, img({ src: '/icon.svg', alt: 'Trove' }))
+      .on({ click: () => ui.exec('workbench.view.home') }),
+    ...ITEMS.map((it) =>
+      button({ className: `item ${active === it.id ? 'active' : ''}`, title: it.title },
+        icon(it.icon, { size: 22 }),
+        it.id === 'plugins' && pluginCount ? span({ className: 'badge' }, String(pluginCount)) : null,
+      ).on({ click: () => ui.exec(it.command) }),
+    ),
+    div({ className: 'spacer' }),
+    notificationBell(state, ui),
+    button({ className: `item ${active === 'settings' ? 'active' : ''}`, title: 'Settings' }, icon('gear', { size: 21 }))
+      .on({ click: () => ui.exec('workbench.openSettings') }),
+    principalChip(state),
+  );
+}

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

@@ -0,0 +1,132 @@
+// The Activity panel — what is running, and what is stuck.
+//
+// Two sections, because they are two different kinds of fact and the user acts on them
+// differently. Running work is watched and possibly cancelled; a standing problem is
+// retried or dismissed. Merging them into one "notifications" list would lose that:
+// a task that finished is over, while an issue that is listed is still true right now.
+//
+// A task that doesn't know its total renders as an indeterminate bar rather than a
+// guess. Nothing here fabricates a percentage.
+
+import { dd } from '../../runtime.js';
+import { icon } from '../icon.js';
+import { bytes } from '../format.js';
+
+const { div, button, span, h3, p } = dd;
+
+const STATUS_ICON = { running: 'refresh', done: 'check', failed: 'close', cancelled: 'close' };
+
+function amount(task) {
+  if (task.total == null) return null;
+  return task.unit === 'bytes'
+    ? `${bytes(task.done || 0)} of ${bytes(task.total)}`
+    : `${task.done || 0} of ${task.total}${task.unit ? ` ${task.unit}` : ''}`;
+}
+
+function taskRow(task, ui) {
+  const running = task.status === 'running';
+  const determinate = running && task.total != null && task.total > 0;
+  const pct = determinate ? Math.min(100, Math.round(((task.done || 0) / task.total) * 100)) : 0;
+  return div({ className: `act-task act-${task.status}`, 'data-task-id': task.id },
+    div({ className: 'act-row' },
+      running
+        ? div({ className: 'spinner', $styling: { width: '12px', height: '12px' } })
+        : icon(STATUS_ICON[task.status] || 'info', { size: 13 }),
+      div({ className: 'act-body' },
+        div({ className: 'act-title' }, task.title),
+        task.detail ? div({ className: 'act-detail' }, task.detail) : null,
+        task.error ? div({ className: 'act-error' }, task.error) : null,
+      ),
+      running && task.cancellable
+        ? button({ className: 'act-action', title: 'Cancel' }, icon('close', { size: 12 })).on({ click: () => ui.app.activity.cancel(task.id) })
+        : !running
+          ? button({ className: 'act-action', title: 'Dismiss' }, icon('close', { size: 12 })).on({ click: () => ui.app.activity.dismiss(task.id) })
+          : null,
+    ),
+    running
+      // An indeterminate bar animates without claiming a position. The alternative —
+      // picking a number — would be a lie dressed as information.
+      ? div({ className: `act-bar ${determinate ? '' : 'indeterminate'}` },
+        div({ className: 'act-fill', $styling: determinate ? { width: `${pct}%` } : {} }))
+      : null,
+    running && amount(task) ? div({ className: 'act-amount' }, amount(task)) : null,
+  );
+}
+
+function issueRow(issue, ui) {
+  const since = new Date(issue.firstAt || issue.lastAt).toLocaleString();
+  return div({ className: `act-issue act-sev-${issue.severity || 'error'}`, 'data-issue-id': issue.id },
+    div({ className: 'act-row' },
+      icon(issue.severity === 'warning' ? 'info' : 'close', { size: 13 }),
+      div({ className: 'act-body' },
+        div({ className: 'act-title' }, issue.title),
+        issue.detail ? div({ className: 'act-detail' }, issue.detail) : null,
+        div({ className: 'act-meta' }, issue.count > 1 ? `${issue.count} times, since ${since}` : `since ${since}`),
+      ),
+    ),
+    div({ className: 'act-actions' },
+      // Retry only when the server said pressing it will actually do something.
+      issue.retryable
+        ? button({ className: 'btn small act-retry' }, icon('refresh', { size: 12 }), span('Retry'))
+          .on({ click: () => ui.app.activity.retryIssue(issue.id) })
+        : null,
+      button({ className: 'btn small ghost act-dismiss' }, 'Dismiss')
+        .on({ click: () => ui.app.activity.dismissIssue(issue.id) }),
+    ),
+  );
+}
+
+export default function activityPanel(state, ui) {
+  const act = state.act || { tasks: [], issues: [] };
+  if (!act.open) return null;
+  const running = act.tasks.filter((t) => t.status === 'running');
+  const recent = act.tasks.filter((t) => t.status !== 'running');
+
+  return div({ className: 'activity-panel' },
+    div({ className: 'act-head' },
+      h3('Activity'),
+      button({ className: 'act-action', title: 'Close' }, icon('close', { size: 13 }))
+        .on({ click: () => ui.app.activity.togglePanel(false) }),
+    ),
+
+    // "Nothing is wrong" and "we couldn't ask" look identical unless one says so. Both
+    // loads are reported, because either can fail alone.
+    act.tasksError || act.issuesError
+      ? div({ className: 'act-offline' }, icon('info', { size: 12 }),
+        span(`Couldn't reach the server — this list may be out of date (${act.issuesError || act.tasksError})`))
+      : null,
+
+    div({ className: 'act-section' },
+      div({ className: 'act-section-title' }, 'Running'),
+      running.length
+        ? div(...running.map((t) => taskRow(t, ui)))
+        : p({ className: 'act-empty' }, 'Nothing running.'),
+    ),
+
+    act.issues.length
+      ? div({ className: 'act-section' },
+        div({ className: 'act-section-title' }, `Needs attention (${act.issues.length})`),
+        div(...act.issues.map((i) => issueRow(i, ui))),
+      )
+      : div({ className: 'act-section' },
+        div({ className: 'act-section-title' }, 'Needs attention'),
+        // An unreadable list is not an empty one, and must never render as "all clear".
+        p({ className: 'act-empty' },
+          act.issuesError ? 'Could not load the list of problems.' : act.issuesLoading ? 'Checking…' : 'No standing problems.'),
+      ),
+
+    recent.length
+      ? div({ className: 'act-section' },
+        div({ className: 'act-section-title' }, 'Recently finished'),
+        div(...recent.map((t) => taskRow(t, ui))),
+      )
+      : null,
+
+    div({ className: 'act-foot act-actions' },
+      button({ className: 'btn small ghost act-rebuild' }, icon('refresh', { size: 12 }), span('Rebuild search index'))
+        .on({ click: () => ui.exec('workbench.rebuildIndex') }),
+      button({ className: 'btn small ghost act-scan' }, icon('refresh', { size: 12 }), span('Scan for outside changes'))
+        .on({ click: () => ui.exec('workbench.scanCollection') }),
+    ),
+  );
+}

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

@@ -0,0 +1,154 @@
+// Command palette + quick-open. Mode 'commands' fuzzy-filters registered
+// commands (respecting when-clauses); mode 'files' searches the drive by name
+// and opens the chosen file. Arrow keys move, Enter runs, Esc closes.
+
+import { dd } from '../../runtime.js';
+import { icon, iconForNode } from '../icon.js';
+import { prettyKey } from '../../platform/keybindings.js';
+import { OpenFileAction, QuickOpenAction } from '../../bl/actions.js';
+
+const { div, input, span } = dd;
+
+export default function commandPalette(state, ui) {
+  const pal = state.overlay.palette;
+  if (!pal) return null;
+  const wb = ui.platform.workbench;
+  // With no query there is nothing to show — and showing the PREVIOUS session's hits
+  // would be worse than nothing, since they don't match what the field now says.
+  const items = pal.mode === 'files'
+    ? (pal.query.trim() ? state.se.paletteFiles || [] : [])
+    : filterCommands(state, ui, pal.query);
+  const index = Math.min(pal.index, Math.max(0, items.length - 1));
+
+  const run = (item) => {
+    if (!item) return;
+    wb.closePalette();
+    if (pal.mode === 'files') ui.go(new OpenFileAction(item.node));
+    else ui.exec(item.id);
+  };
+
+  return div({},
+    div({ className: 'scrim' }).on({ click: () => wb.closePalette() }),
+    div({ className: 'palette' },
+      div({ className: 'search' },
+        icon(pal.mode === 'files' ? 'search' : 'command', { size: 18 }),
+        input({
+          type: 'text', value: pal.query, autofocus: true,
+          placeholder: pal.mode === 'files' ? 'Search files by name…' : 'Type a command…',
+        }).on({
+          // NOTE: the mode is read from live state inside onQuery, NOT captured here.
+          // A listener belongs to the render that created it, and rendering is async —
+          // a keystroke landing between `openPalette('files')` and the re-render would
+          // otherwise be handled as a COMMANDS keystroke and silently do nothing.
+          input: (e) => onQuery(ui, e.target.value),
+          keydown: (e) => onKey(e, ui, items, index, run),
+          $attach: (el) => {
+            queueMicrotask(() => el.focus());
+            // Same reason in reverse: dodo only patches `value` when the vnode prop
+            // changed, so a reopened palette whose query is '' both times would keep
+            // whatever text the previous session left in the live DOM node.
+            if (el.value !== pal.query) el.value = pal.query;
+          },
+        }),
+      ),
+      div({ className: 'results' },
+        items.length
+          ? items.map((item, i) => {
+            const hover = () => wb.setPaletteIndex(i);
+            return pal.mode === 'files' ? fileOpt(item, i === index, run, hover) : cmdOpt(item, i === index, ui, run, hover);
+          })
+          : emptyResults(pal, state),
+      ),
+    ),
+  );
+}
+
+// Nothing to show is three different situations, and saying "No files found" for all
+// three tells the user something false in two of them.
+function emptyResults(pal, state) {
+  if (pal.mode !== 'files') return div({ className: 'none' }, 'No matching commands');
+  if (state.se.paletteError) return div({ className: 'none error' }, icon('warn', { size: 14 }), ` ${state.se.paletteError}`);
+  if (state.se.paletteLoading) return div({ className: 'none' }, div({ className: 'spinner' }), ' Searching…');
+  return div({ className: 'none' }, pal.query.trim() ? 'No files found' : 'Type to search files by name');
+}
+
+function cmdOpt(cmd, active, ui, run, hover) {
+  const key = ui.platform.keybindings.labelFor(cmd.id);
+  const available = ui.platform.commands.isAvailable(cmd);
+  return div({ className: `opt ${active ? 'active' : ''} ${available ? '' : 'unavailable'}` },
+    span({ className: 'ico' }, icon(cmd.icon || 'command', { size: 16 })),
+    cmd.category ? span({ className: 'cat' }, cmd.category + ' ›') : null,
+    span({ className: 'title' }, cmd.title),
+    !available ? span({ className: 'offline-tag' }, 'offline') : null,
+    key ? span({ className: 'kbd' }, dd.h('kbd', prettyKey(keyRaw(ui, cmd.id)))) : null,
+  ).on({ click: () => run(cmd), mouseenter: hover });
+}
+
+function keyRaw(ui, id) {
+  const b = ui.platform.keybindings.resolved().find((x) => x.command === id);
+  return b ? b.key : '';
+}
+
+function fileOpt(item, active, run, hover) {
+  return div({ className: `opt ${active ? 'active' : ''}` },
+    span({ className: 'ico' }, icon(iconForNode(item.node), { size: 16 })),
+    span({ className: 'title' }, item.node.name),
+    span({ className: 'sub' }, item.node.contentType || ''),
+  ).on({ click: () => run(item), mouseenter: hover });
+}
+
+function filterCommands(state, ui, query) {
+  const all = ui.platform.commands.paletteCommands();
+  const q = query.trim().toLowerCase();
+  if (!q) return all.slice(0, 60);
+  const scored = [];
+  for (const c of all) {
+    const hay = `${c.category || ''} ${c.title}`.toLowerCase();
+    const s = fuzzyScore(hay, q);
+    if (s > 0) scored.push([s, c]);
+  }
+  return scored.sort((a, b) => b[0] - a[0]).slice(0, 60).map((x) => x[1]);
+}
+
+function fuzzyScore(hay, q) {
+  let score = 0;
+  let hi = 0;
+  for (const ch of q) {
+    const idx = hay.indexOf(ch, hi);
+    if (idx < 0) return 0;
+    score += idx === hi ? 3 : 1;
+    hi = idx + 1;
+  }
+  if (hay.includes(q)) score += 10;
+  return score;
+}
+
+function onKey(e, ui, items, index, run) {
+  const wb = ui.platform.workbench;
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    wb.movePalette(1, items.length);
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    wb.movePalette(-1, items.length);
+  } else if (e.key === 'Enter') {
+    e.preventDefault();
+    run(items[index]);
+  } else if (e.key === 'Escape') {
+    e.preventDefault();
+    wb.closePalette();
+  }
+}
+
+let fileTimer = null;
+function onQuery(ui, value) {
+  const wb = ui.platform.workbench;
+  wb.setPaletteQuery(value);
+  // The palette's CURRENT mode, not whichever one was on screen when this listener
+  // was created — see the note at the input.
+  clearTimeout(fileTimer);
+  if (wb.overlay.state.palette?.mode !== 'files') return;
+  // Route the file search through an action; results land in the reactive search
+  // service (state.se.paletteFiles), so the palette re-renders without ad-hoc state.
+  fileTimer = setTimeout(() => ui.go(new QuickOpenAction(value)), 200);
+}

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

@@ -0,0 +1,75 @@
+// The viewer — the top of the panel stack (a file's opener), full-width, with a
+// nav bar: a Back button, a trail of the stacked panels (Search › A › B),
+// and details/close actions. The opener host returns a *stable* keyed alias per
+// panel so dodo reuses its DOM across unrelated workbench re-renders — critical for
+// any media opener, whose <audio>/<video> must keep playing while state churns; the
+// DOM persists as long as the panel stays in the stack.
+
+import { dd } from '../../runtime.js';
+import { icon, iconForNode } from '../icon.js';
+import { renderOpener } from './openers/index.js';
+import { availableOpeners } from '../../bl/openers.js';
+
+const { div, span, button } = dd;
+
+const openerFns = new Map(); // `${panelId}:${openerId}` -> stable render fn
+
+export default function editorArea(state, ui) {
+  const wb = state.wb;
+  const files = state.nav.stack.filter((p) => p.kind === 'file');
+  pruneOpeners(files);
+  const active = files[files.length - 1];
+  if (!active) return div({ className: 'editor' });
+  return div({ className: 'editor' },
+    navBar(files, active, ui),
+    div({ className: 'stage' }, openerHost(active, ui)),
+  );
+}
+
+function navBar(files, active, ui) {
+  const w = ui.platform.workbench;
+  return div({ className: 'viewer-nav' },
+    button({ className: 'vn-back', title: 'Back (Esc)' }, icon('chevron-left', { size: 16 }))
+      .on({ click: () => w.back() }),
+    div({ className: 'vn-trail' },
+      button({ className: 'vn-crumb' }, icon('search', { size: 13 }), span('Search'))
+        .on({ click: () => w.showHome() }),
+      ...files.map((p) =>
+        button({ className: `vn-crumb ${p.id === active.id ? 'active' : ''}`, title: p.node.name },
+          icon(iconForNode(p.node), { size: 13 }), span({ className: 'label' }, p.node.name))
+          .on({ click: () => w.openFile(p.node, p.openerId) })),
+    ),
+    div({ className: 'vn-actions' },
+      openerSwitch(active, ui),
+      button({ className: 'iconbtn', title: 'Details & comments' }, icon('info', { size: 15 }))
+        .on({ click: () => w.toggleInfoPanel() }),
+      button({ className: 'iconbtn', title: 'Close (Esc)' }, icon('close', { size: 15 }))
+        .on({ click: () => w.showHome() }),
+    ),
+  );
+}
+
+// "Open with…" — shown only when more than one opener can handle this file. Opens
+// the chooser (pre-selected to the current opener) so the user can switch viewers,
+// and optionally make the choice their default for this file type.
+function openerSwitch(active, ui) {
+  const openers = availableOpeners(ui.platform, active.node);
+  if (openers.length <= 1) return null;
+  return button({ className: 'iconbtn', title: 'Open with…' }, icon('dots', { size: 15 }))
+    .on({ click: () => ui.platform.workbench.showDialog({ kind: 'opener-chooser', node: active.node, openers, current: active.openerId }) });
+}
+
+function openerHost(panel, ui) {
+  const key = `${panel.id}:${panel.openerId}`;
+  let fn = openerFns.get(key);
+  if (!fn) {
+    fn = () => renderOpener(panel.node, panel.openerId, ui);
+    openerFns.set(key, fn);
+  }
+  return dd.alias(fn)().key(panel.id);
+}
+
+function pruneOpeners(files) {
+  const live = new Set(files.map((p) => `${p.id}:${p.openerId}`));
+  for (const k of openerFns.keys()) if (!live.has(k)) openerFns.delete(k);
+}