Compact and rank pinned mobile work

frontend/dashboard.css

@@ -1555,6 +1555,7 @@ textarea { resize: vertical; min-height: 120px; }
   .mobile-queue-list .mobile-recent-work-row button { min-height:44px; width:auto; }
   .mobile-queue-list .mobile-recent-work-row [data-recent-work-route] { min-width:0; width:100%; min-height:56px; overflow-wrap:anywhere; }
   .mobile-queue-list .mobile-recent-work-row [data-recent-work-pin] { min-width:64px; justify-content:center; padding-inline:12px; }
+  .mobile-pinned-work-toggle { min-height:44px; width:100%; margin-top:8px; }
   .mobile-queue-list [data-mobile-queue-count] { min-width:28px; padding:3px 8px; border-radius:999px; text-align:center; background:#1d426d; }
   .mobile-queue-list [data-mobile-queue="agenda"][data-deadlines="true"] { border-color:#f59e0b; background:#30240f; box-shadow:inset 3px 0 #f59e0b; }
   .mobile-queue-list [data-recommended="true"] { border-color:#60a5fa; box-shadow:0 0 0 2px #60a5fa; }

frontend/dashboard.js

@@ -441,6 +441,7 @@
     list:qs('#mobile-recent-work-list'),
     pinnedSection:qs('#mobile-pinned-work'),
     pinnedList:qs('#mobile-pinned-work-list'),
+    pinnedToggle:qs('#mobile-pinned-work-toggle'),
     status:qs('#mobile-recent-work-status'),
     openRoute:fragment => {
       const sheet = qs('#mobile-queue-sheet');

frontend/index.html

@@ -2187,6 +2187,7 @@
     <section class="mobile-queue-group" id="mobile-pinned-work" aria-labelledby="mobile-pinned-work-heading" hidden>
       <h3 id="mobile-pinned-work-heading">Pinned work</h3>
       <div class="mobile-queue-list" id="mobile-pinned-work-list"></div>
+      <button class="mobile-pinned-work-toggle" id="mobile-pinned-work-toggle" type="button" aria-controls="mobile-pinned-work-list" aria-expanded="false" hidden>Show all</button>
     </section>
     <section class="mobile-queue-group" id="mobile-recent-work" aria-labelledby="mobile-recent-work-heading" hidden>
       <h3 id="mobile-recent-work-heading">Recent work</h3>

frontend/mobile-recent-work.js

@@ -24,6 +24,12 @@
   let retryAccount = '';
   let retryAttempt = 0;
   let operationSequence = 0;
+  let pinsExpanded = false;
+
+  options.pinnedToggle?.addEventListener?.('click', () => {
+    pinsExpanded = !pinsExpanded;
+    render();
+  });
 
   function operationId() {
     operationSequence += 1;
@@ -196,7 +202,9 @@
     if (!accountKey || !normalized) return false;
     const current = read();
     current.items = [normalized, ...current.items.filter(existing => existing.route !== normalized.route)].slice(0, limit);
-    current.pinned = current.pinned.map(existing => existing.route === normalized.route ? normalized : existing);
+    current.pinned = current.pinned.some(existing => existing.route === normalized.route)
+      ? [normalized, ...current.pinned.filter(existing => existing.route !== normalized.route)]
+      : current.pinned;
     current.pending = [{...normalized, operationId:operationId()}, ...current.pending.filter(existing => existing.route !== normalized.route)].slice(0, limit);
     if (!persist(current, accountKey)) return false;
     announce(current);
@@ -374,7 +382,10 @@
     button.setAttribute('type', 'button');
     button.setAttribute('data-recent-work-route', item.route);
     button.setAttribute('aria-label', 'Open ' + item.title + ', ' + itemDetail.toLowerCase().replace(' · ', ' '));
-    button.addEventListener('click', () => options.openRoute?.(item.route));
+    button.addEventListener('click', () => {
+      if (isPinned) record(item);
+      options.openRoute?.(item.route);
+    });
     action.textContent = isPinned ? 'Unpin' : 'Pin';
     action.setAttribute('type', 'button');
     action.setAttribute('data-recent-work-pin', isPinned ? 'unpin' : 'pin');
@@ -388,19 +399,28 @@
   function render() {
     const recent = items();
     const fixed = pinned();
+    const fixedRoutes = new Set(fixed.map(item => item.route));
+    const visibleRecent = recent.filter(item => !fixedRoutes.has(item.route));
     const list = options.list;
     const section = options.section;
     if (list && section && options.document) {
-      const rows = recent.map(item => row(item, false));
+      const rows = visibleRecent.map(item => row(item, false));
       list.replaceChildren(...rows);
       section.hidden = rows.length === 0;
     }
     if (options.pinnedList && options.pinnedSection && options.document) {
-      const rows = fixed.map(item => row(item, true));
+      const visiblePins = pinsExpanded ? fixed : fixed.slice(0, 3);
+      const rows = visiblePins.map(item => row(item, true));
       options.pinnedList.replaceChildren(...rows);
       options.pinnedSection.hidden = rows.length === 0;
     }
-    return recent.length + fixed.length;
+    if (options.pinnedToggle) {
+      options.pinnedToggle.hidden = fixed.length <= 3;
+      options.pinnedToggle.textContent = pinsExpanded ? 'Show fewer' : 'Show all ' + fixed.length;
+      options.pinnedToggle.setAttribute('aria-expanded', pinsExpanded ? 'true' : 'false');
+      options.pinnedToggle.setAttribute('aria-controls', 'mobile-pinned-work-list');
+    }
+    return visibleRecent.length + fixed.length;
   }
 
   return {items, pinned, record, pin, unpin, render, load, sync, startLifecycle, state};