@3sln/trove 0.0.18 → 0.0.20

package/packages/web/src/bl/state.js

@@ -49,6 +49,10 @@ export function slice(initial = {}) {
 export const explorerState = (settings) => slice({
   items: [], loading: false, error: null,
   selection: [], sort: settings.get('explorer.sort'), order: settings.get('explorer.sortOrder'),
+  // Whether the list is in SELECTION MODE. It lives here rather than in `viewState`
+  // because it is a property of the selection it governs, not a transient overlay: the
+  // selection is already here, and splitting the two would let them disagree.
+  bulk: false,
   // No collection until one is chosen or created. `gate` is 'create' | 'choose' | null —
   // when set, it is the ONLY thing the workbench shows, because every request needs a
   // collection and there is nothing sensible to render without one.

package/packages/web/src/platform/pluginRpc.js

@@ -363,7 +363,20 @@ export class PluginRpcRouter {
   /** blob:/data: carry their own bytes; anything else must be a declared endpoint. */
   #artworkAllowed(record, src) {
     if (!src) return false;
-    if (/^(blob:|data:image\/)/i.test(src)) return true;
+    if (/^data:image\//i.test(src)) return true;
+    // A `blob:` URL from a plugin frame is ALWAYS unusable here, and accepting one was
+    // worse than refusing it: the frame runs on an opaque origin, so its object URLs are
+    // `blob:null/…`, and this page cannot load another origin's blob. The browser says
+    // "Not allowed to load local resource" against the HOST document — a message that
+    // names neither the plugin nor the artwork, for a lock-screen image that simply never
+    // appeared.
+    //
+    // There is no version of this that works: a frame cannot mint a URL in this origin.
+    // Artwork has to arrive as bytes, which `data:image/…` above is.
+    if (/^blob:/i.test(src)) {
+      console.warn(`[trove] ${record.id}: media artwork must be a data: URL — a blob: from a sandboxed frame is opaque-origin and cannot be loaded here`);
+      return false;
+    }
     return isAllowedUrl(networkEndpoints(record.manifest), src);
   }
 

package/packages/web/src/styles.css

@@ -957,6 +957,33 @@ kbd {
 .launch-item:hover .launch-more, .launch-item.active .launch-more, .launch-more:focus-visible { opacity: 1; }
 .launch-more:hover { background: var(--bg-active); color: var(--text); }
 .launch-more:focus-visible { outline: none; color: var(--text); background: var(--bg-active); box-shadow: 0 0 0 2px var(--focus-halo); }
+/* IN SELECTION MODE the same control is this item's checkbox, so it is always visible —
+   a checkbox that appears on hover is one you cannot see the state of, which is the only
+   thing a checkbox is for. */
+.launch-more.check { opacity: 1; color: var(--text-faint); }
+.launch-more.check.on { color: var(--accent); }
+.launch-more.check:hover { color: var(--text); }
+
+/* The bar over a selection. Above the results, because it is about the set. */
+.sel-bar {
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+  padding: 8px 12px; margin-bottom: 8px; border-radius: 10px;
+  background: var(--bg-active); border: 1px solid var(--border);
+}
+.sel-count { font-weight: 600; font-size: 13px; min-width: 8ch; }
+.sel-actions { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
+.sel-act, .sel-done {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--bg); color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
+}
+.sel-act:hover:not(:disabled), .sel-done:hover { background: var(--bg-active); }
+/* Disabled rather than hidden while nothing is picked: the actions are what the mode is
+   FOR, and hiding them would leave a bar that looks broken instead of one that is waiting. */
+.sel-act:disabled { opacity: .45; cursor: default; }
+.sel-act.danger:not(:disabled) { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
+.sel-done { margin-left: auto; }
+
 /* On a touch screen there is no hover to reveal it, so it is simply always there. */
 @media (hover: none) { .launch-more { opacity: 1; } }
 .launch-kind { flex: none; color: var(--text-faint); font-size: 11px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; }

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

@@ -9,7 +9,7 @@ import { icon } from '../icon.js';
 import { ExecCommandAction, FilterAction, MoveLaunchAction, SearchAction, SelectLaunchAction, SetLaunchIndexAction, SetLaunchQueryAction } from '../../bl/actions.js';
 import { parseTagQuery, filterLabel } from '../../bl/tagQuery.js';
 import { renderView, viewSwitcher, viewMove } from './views/index.js';
-import { openRowMenu } from './views/parts.js';
+import { openRowMenu, selectionBar } from './views/parts.js';
 import { activate } from '../activate.js';
 
 const { div, span, input, button } = dd;
@@ -160,6 +160,8 @@ export default function launcher(state, ui, opts = {}) {
     // WHAT is on screen (these groups, this highlight); the view says how it looks. That
     // split is why a gallery is a contribution rather than another branch in here.
     div({ className: 'launch-body' },
+      // Above the results, because it is about the set rather than about a row.
+      selectionBar(state, ui),
       renderView(view, { groups, index: idx, handlers: { hover: hoverAt, select: selectAt }, state, ui }),
       searchHelp(content.help, ui),
     ),

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

@@ -372,7 +372,24 @@ export function toasts(state, ui) {
 // ---- Transfer tray ---------------------------------------------------------
 export function transferTray(state, ui) {
   const items = state.tr.items;
-  if (!items.length) return null;
+  if (!items.length) {
+    // The list is empty, so a dismissal from the last batch has served its purpose. Clear
+    // it here rather than leaving it set: otherwise the next upload — a fresh decision by
+    // the user, minutes or hours later — inherits a choice they made about transfers that
+    // no longer exist, and the tray silently never appears again.
+    if (state.vs?.transfersDismissed) ui.engine.dispatch(new SetViewStateAction('transfersDismissed', false));
+    return null;
+  }
+  // DISMISSABLE, running transfers or not. This is a view of the work, not the work:
+  // closing it cancels nothing, and it used to sit over the drive for the whole of a large
+  // upload — which is exactly when someone wants to keep using the drive. "Clear finished"
+  // was the only control and by definition cannot remove something still running.
+  //
+  // The dismissal is remembered until the transfer list empties (see `transfersDismissed`
+  // in viewState). A NEW transfer does not force it back open: undoing a choice someone
+  // just made is worse than being quiet, and the status bar still shows that something is
+  // happening and offers the way back in.
+  if (state.vs?.transfersDismissed) return null;
   return div({ className: 'tray' },
     div({ className: 'head' },
       icon('upload', { size: 14 }),
@@ -380,6 +397,8 @@ export function transferTray(state, ui) {
       div({ className: 'actions' },
         button({ className: 'iconbtn', title: 'Clear finished' }, icon('check', { size: 14 }))
           .on({ click: () => ui.engine.dispatch(new ClearFinishedTransfersAction()) }),
+        button({ className: 'iconbtn', title: 'Hide transfers (they keep going)' }, icon('close', { size: 14 }))
+          .on({ click: () => ui.engine.dispatch(new SetViewStateAction('transfersDismissed', true)) }),
       ),
     ),
     div({ className: 'items' },

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

@@ -95,6 +95,8 @@ export default function statusBar(state, ui) {
   const { totalItems, totalBytes } = f;
   const caps = state.caps;
   const active = f.uploading;
+  const transfers = state.tr?.items || [];
+  const trayHidden = !!state.vs?.transfersDismissed;
 
   // Plugin-contributed status slots. Already filtered and ordered by the query.
   const slots = state.statusItems || [];
@@ -141,12 +143,24 @@ export default function statusBar(state, ui) {
           }));
         } 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.engine.dispatch(new ShowContextMenuAction(active.map((t) => ({
-          label: `Cancel ${t.name} (${Math.round((t.ratio || 0) * 100)}%)`, icon: 'close', danger: true,
-          actions: [new CancelTransferAction(t.id)],
-        })), { x: e.clientX, y: e.clientY })) })
+    // The way back to the tray, and the signal that something is happening.
+    //
+    // Shown whenever there is anything to LOOK AT, not only while something is active: a
+    // failed upload from two minutes ago is the case where someone most wants the panel
+    // back, and it used to disappear the moment the transfer stopped.
+    //
+    // A click toggles the panel rather than opening a cancel menu. Cancelling one transfer
+    // is a thing to do in the panel, next to the transfer; the status bar's job is to say
+    // "there is transfer activity" and to be the handle for it.
+    transfers.length
+      ? button({
+        className: `seg ${trayHidden ? '' : 'on'}`,
+        title: trayHidden ? 'Show transfers' : 'Hide transfers',
+        'aria-pressed': trayHidden ? 'false' : 'true',
+      },
+      active.length ? div({ className: 'spinner', $styling: { width: '11px', height: '11px' } }) : icon('upload', { size: 12 }),
+      span(active.length ? `${active.length} uploading` : `${transfers.length} transfer${transfers.length === 1 ? '' : 's'}`))
+        .on({ click: () => ui.engine.dispatch(new ExecCommandAction('workbench.transfers.toggle')) })
       : 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,

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

@@ -22,7 +22,7 @@ import { activate } from '../../activate.js';
 
 const { div, span, img } = dd;
 
-export function gridView({ groups, index, handlers, ui }) {
+export function gridView({ groups, index, handlers, state, ui }) {
   let gi = -1;
   return div({ className: 'launch-view view-grid' },
     ...groups.map((group) => div({ className: 'launch-group' },
@@ -33,7 +33,7 @@ export function gridView({ groups, index, handlers, ui }) {
           return tile(it, at === index, {
             hover: () => handlers.hover(at),
             select: () => handlers.select(at),
-          }, ui);
+          }, ui, state);
         }))
         : div({ className: 'launch-empty' }, group.empty || 'Nothing here.'),
     )),
@@ -80,7 +80,7 @@ function columns() {
   return n || 1;
 }
 
-function tile(it, active, { hover, select }, ui) {
+function tile(it, active, { hover, select }, ui, state) {
   const node = it.node;
   // A contributed thumbnail beats the file itself. It is already a picture of the right
   // size, it needs no minted URL, and for anything that is not an image it is the only
@@ -118,7 +118,7 @@ function tile(it, active, { hover, select }, ui) {
         }).opaque()
         : null,
       it.badge ? span({ className: 'gt-badge' }, it.badge) : null,
-      menuButton(it, ui, select),
+      menuButton(it, ui, select, state),
     ),
     div({ className: 'gt-name' }, it.title),
   ).on({

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

@@ -12,7 +12,7 @@ import { activate } from '../../activate.js';
 
 const { div, span } = dd;
 
-export function listView({ groups, index, handlers, ui }) {
+export function listView({ groups, index, handlers, state, ui }) {
   let gi = -1;
   return div({ className: 'launch-view view-list' },
     ...groups.map((group) => div({ className: 'launch-group' },
@@ -23,14 +23,14 @@ export function listView({ groups, index, handlers, ui }) {
           return itemRow(it, at === index, {
             hover: () => handlers.hover(at),
             select: () => handlers.select(at),
-          }, ui);
+          }, ui, state);
         }))
         : div({ className: 'launch-empty' }, group.empty || 'Nothing here.'),
     )),
   );
 }
 
-function itemRow(it, active, { hover, select }, ui) {
+function itemRow(it, active, { hover, select }, ui, state) {
   return div({ className: `launch-item ${active ? 'active' : ''}` },
     icon(it.icon, { size: 15 }),
     span({ className: 'name' }, it.title),
@@ -39,7 +39,7 @@ function itemRow(it, active, { hover, select }, ui) {
     // Everything you can do to a file, on the file. Rename, download, copy link and
     // delete were all commands with no way to reach them: the palette's versions act on
     // "the selection", and until the highlight became a selection there never was one.
-    menuButton(it, ui, select),
+    menuButton(it, ui, select, state),
   // One `.on()` call: a second replaces the handler map rather than merging into it,
   // which is how adding `contextmenu` silently removed `click` and stopped every file
   // in the drive from opening.

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

@@ -8,7 +8,7 @@
 
 import { dd } from '../../../runtime.js';
 import { icon } from '../../icon.js';
-import { ShowContextMenuAction } from '../../../bl/actions.js';
+import { ShowContextMenuAction, ToggleItemSelectedAction, ExitSelectionModeAction, ExecCommandAction } from '../../../bl/actions.js';
 import { activate } from '../../activate.js';
 
 const { div, span, button } = dd;
@@ -41,8 +41,21 @@ export function groupHeader(group, ui) {
 }
 
 /** The "…" button, for items that have a menu. */
-export function menuButton(it, ui, select) {
+export function menuButton(it, ui, select, state) {
   if (!it.menu) return null;
+  // IN SELECTION MODE the `⋯` becomes this item's checkbox, in the same place. Putting the
+  // checkbox somewhere else and leaving `⋯` where it was would mean the thing under the
+  // cursor is no longer the thing it was a moment ago — and the per-item menu is the wrong
+  // verb in a mode where actions apply to everything picked. Those live in the bar above.
+  if (state?.ex?.bulk) {
+    const on = (state.ex.selection || []).includes(it.node?.id);
+    return button({
+      className: `launch-more check ${on ? 'on' : ''}`,
+      title: on ? `Deselect ${it.title}` : `Select ${it.title}`,
+      $attrs: { 'aria-label': on ? `Deselect ${it.title}` : `Select ${it.title}`, 'aria-pressed': on ? 'true' : 'false', role: 'checkbox', 'aria-checked': on ? 'true' : 'false' },
+    }, icon(on ? 'check' : 'square', { size: 14 }))
+      .on({ click: (e) => { e.stopPropagation(); ui.engine.dispatch(new ToggleItemSelectedAction(it.node)); } });
+  }
   return button({
     className: 'launch-more',
     title: `Actions for ${it.title}`,
@@ -51,6 +64,38 @@ export function menuButton(it, ui, select) {
     .on({ click: (e) => { e.stopPropagation(); openRowMenu(e.currentTarget, it, ui, null, select); } });
 }
 
+/**
+ * The bar over a selection: what is picked, and what can be done to all of it.
+ *
+ * Above the list rather than on a row, because "act on these six" is a different verb from
+ * "act on this one" and should not share a place with it. Only actions that MEAN something
+ * over many items appear — rename and open-with are single-item verbs and are absent
+ * rather than present and disabled, which reads as broken rather than as inapplicable.
+ */
+export function selectionBar(state, ui) {
+  if (!state?.ex?.bulk) return null;
+  const n = (state.ex.selection || []).length;
+  const act = (label, iconName, command, danger = false) => button({
+    className: `sel-act ${danger ? 'danger' : ''}`,
+    disabled: !n,
+    title: n ? `${label} ${n} item${n === 1 ? '' : 's'}` : `Pick something first`,
+  }, icon(iconName, { size: 14 }), span(label))
+    .on({ click: () => ui.engine.dispatch(new ExecCommandAction(command)) });
+
+  return div({ className: 'sel-bar' },
+    // Says what is selected, including when that is nothing: pressing Delete on an empty
+    // selection should visibly do nothing, and the count is what makes that unsurprising.
+    span({ className: 'sel-count' }, n ? `${n} selected` : 'Nothing selected'),
+    div({ className: 'sel-actions' },
+      act('Download', 'download', 'explorer.download'),
+      act('Keep offline', 'download', 'offline.pin'),
+      act('Delete', 'trash', 'explorer.delete', true),
+    ),
+    button({ className: 'sel-done', title: 'Done selecting (Esc)' }, icon('close', { size: 14 }), span('Done'))
+      .on({ click: () => ui.engine.dispatch(new ExitSelectionModeAction()) }),
+  );
+}
+
 /**
  * Open an item's menu, anchored to the thing it belongs to.
  *

package/packages/web/src/ui/compositions/workbench.js

@@ -125,6 +125,8 @@ export default function workbench({ engine, platform }) {
     // than by the status bar and imported from there by the phone chrome, which is what it
     // was — a business-layer derivation living in a component. See bl/status.js.
     facts: q.statusFacts,
+    // Whether the transfer tray is dismissed — the status bar is the way back to it.
+    vs: q.viewState,
   };
   // A query boots asynchronously — it awaits a container lease first — so a region is
   // PENDING for the first frame or two and `watch` renders its placeholder. For a bar with
@@ -137,7 +139,7 @@ export default function workbench({ engine, platform }) {
     // Both render nothing when there is nothing to show, so an absent first frame is what
     // they would have drawn anyway.
     phoneSheet: region(engine, chrome, (s) => phoneSheet(s, ui)),
-    transferTray: region(engine, { tr: q.transfers }, (s) => transferTray(s, ui)),
+    transferTray: region(engine, { tr: q.transfers, vs: q.viewState }, (s) => transferTray(s, ui)),
     // Both read one slice each, and both change often enough to matter: a toast arriving
     // or auto-dismissing used to rebuild the entire shell — including every row of the
     // file list — to add a line in the corner.