feat: pin current mobile detail item (Closes #1489)

frontend/dashboard.css

@@ -888,8 +888,11 @@ textarea { resize: vertical; min-height: 120px; }
 .issue-sheet-panel { width:min(560px,100%); height:100%; overflow:auto; padding:18px; background:#0b1526; border-left:1px solid #2a496e; }
 .issue-sheet-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
 .issue-sheet-header button { min-height:44px; }
+.current-work-pin { display:none; }
 .mobile-issue-detail-nav, .mobile-pull-detail-nav, .mobile-update-detail-nav, .mobile-review-detail-nav { display:none; }
 @media (max-width:600px) {
+  [data-current-work-pin] { display:inline-flex; align-items:center; justify-content:center; min-width:64px; min-height:44px; padding-inline:12px; }
+  [data-current-work-pin="unpin"] { border-color:#60a5fa; background:#17365a; color:#fff; }
   .issue-sheet-panel, .pull-sheet-panel, .update-sheet-panel, .review-sheet-panel { padding-top:max(12px,env(safe-area-inset-top)); }
   .mobile-issue-detail-nav, .mobile-pull-detail-nav, .mobile-update-detail-nav, .mobile-review-detail-nav {
     position:sticky; top:env(safe-area-inset-top); z-index:6;

frontend/dashboard.js

@@ -442,6 +442,7 @@
     pinnedSection:qs('#mobile-pinned-work'),
     pinnedList:qs('#mobile-pinned-work-list'),
     pinnedToggle:qs('#mobile-pinned-work-toggle'),
+    detailPins:qsa('[data-current-work-pin]'),
     status:qs('#mobile-recent-work-status'),
     openRoute:fragment => {
       const sheet = qs('#mobile-queue-sheet');
@@ -2082,6 +2083,7 @@
       closeOpenWorkSheets();
       await openRoutedWorkSection(item);
       mobileRecentWork.record(item);
+      mobileRecentWork.setCurrent(item);
       const route = createWorkRoute.parse(window.location.hash);
       if (route?.section === item.section) navigateWorkSection(item.kind, item.section);
     },
@@ -2112,6 +2114,7 @@
   qs('#retry-work-route').addEventListener('click', () => workRoute.sync());
 
   function closeOpenWorkSheets() {
+    mobileRecentWork.setCurrent(null);
     issueVoiceReply.cancel();
     pullVoiceReply.cancel();
     updateVoiceReply.cancel();

frontend/index.html

@@ -1053,6 +1053,7 @@
         <div class="small" id="issue-sheet-key"></div>
         <h3 id="issue-sheet-title">Assigned issue</h3>
       </div>
+      <button class="current-work-pin" data-current-work-pin type="button" hidden>Pin</button>
       <button id="close-issue-sheet" type="button">Close sheet</button>
     </div>
     <nav class="mobile-issue-detail-nav" aria-label="Issue sections">
@@ -1553,6 +1554,7 @@
         <div class="small" id="update-sheet-key"></div>
         <h3 id="update-sheet-title">Unread update</h3>
       </div>
+      <button class="current-work-pin" data-current-work-pin type="button" hidden>Pin</button>
     </div>
     <div id="update-triage-progress" class="update-triage-progress small" aria-live="polite" hidden></div>
     <nav class="mobile-update-detail-nav" aria-label="Update sections">
@@ -1676,6 +1678,7 @@
   <section class="pull-sheet-panel">
     <div class="pull-sheet-header">
       <div><div class="small" id="pull-sheet-key"></div><h3 id="pull-sheet-title">Assigned pull request</h3></div>
+      <button class="current-work-pin" data-current-work-pin type="button" hidden>Pin</button>
       <button id="close-pull-sheet" type="button">Close</button>
     </div>
     <nav class="mobile-detail-nav mobile-pull-detail-nav" aria-label="Pull request sections">
@@ -1912,6 +1915,7 @@
         <div class="small" id="review-sheet-key"></div>
         <h3 id="review-sheet-title">Pull request review</h3>
       </div>
+      <button class="current-work-pin" data-current-work-pin type="button" hidden>Pin</button>
       <button class="review-action" id="close-review-sheet">Close</button>
     </div>
     <nav class="mobile-review-detail-nav" aria-label="Review sections">

frontend/mobile-recent-work.js

@@ -25,6 +25,15 @@
   let retryAttempt = 0;
   let operationSequence = 0;
   let pinsExpanded = false;
+  let currentItem = null;
+
+  const detailPins = Array.from(options.detailPins || []);
+  detailPins.forEach(button => button.addEventListener?.('click', () => {
+    if (!currentItem) return;
+    const isPinned = pinned().some(item => item.route === currentItem.route);
+    if (isPinned) unpin(currentItem.route);
+    else pin(currentItem);
+  }));
 
   options.pinnedToggle?.addEventListener?.('click', () => {
     pinsExpanded = !pinsExpanded;
@@ -396,6 +405,24 @@
     return wrapper;
   }
 
+  function renderCurrent() {
+    const isPinned = currentItem && pinned().some(item => item.route === currentItem.route);
+    detailPins.forEach(button => {
+      button.hidden = !currentItem;
+      if (!currentItem) return;
+      button.textContent = isPinned ? 'Pinned' : 'Pin';
+      button.setAttribute('aria-pressed', isPinned ? 'true' : 'false');
+      button.setAttribute('aria-label', (isPinned ? 'Unpin ' : 'Pin ') + currentItem.title);
+      button.setAttribute('data-current-work-pin', isPinned ? 'unpin' : 'pin');
+    });
+  }
+
+  function setCurrent(item) {
+    currentItem = normalize(item);
+    renderCurrent();
+    return Boolean(currentItem);
+  }
+
   function render() {
     const recent = items();
     const fixed = pinned();
@@ -420,8 +447,9 @@
       options.pinnedToggle.setAttribute('aria-expanded', pinsExpanded ? 'true' : 'false');
       options.pinnedToggle.setAttribute('aria-controls', 'mobile-pinned-work-list');
     }
+    renderCurrent();
     return visibleRecent.length + fixed.length;
   }
 
-  return {items, pinned, record, pin, unpin, render, load, sync, startLifecycle, state};
+  return {items, pinned, record, pin, unpin, setCurrent, render, load, sync, startLifecycle, state};
 });