feat: open progressive My Work in app (Closes #1413)

frontend/dashboard.css

@@ -280,6 +280,15 @@ textarea { resize: vertical; min-height: 120px; }
 .event { padding: 8px 0; border-bottom: 1px solid #1b2d45; }
 .event:last-child { border-bottom: 0; }
 .my-work { grid-column: 1 / -1; }
+.progressive-work-detail { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center; background:rgba(5,12,21,.82); backdrop-filter:blur(4px); }
+.progressive-work-detail[hidden] { display:none; }
+.progressive-work-detail-panel { box-sizing:border-box; width:min(560px,100%); max-height:100dvh; overflow:auto; overflow-x:hidden; padding:calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); border:1px solid #55d6be; border-radius:18px 18px 0 0; background:#0b1526; overflow-wrap:anywhere; }
+.progressive-work-detail-panel header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
+.progressive-work-detail-panel h2, .progressive-work-detail-panel p { margin-top:0; }
+.progressive-work-detail-panel button, .progressive-work-detail-panel .button-link { box-sizing:border-box; min-height:44px; }
+.progressive-work-detail-panel .button-link { display:flex; align-items:center; justify-content:center; width:100%; }
+@media(max-width:320px) { .progressive-work-detail-panel { width:100%; padding-inline:14px; } }
+
 .plan-today-sheet { position:fixed; inset:0; z-index:75; display:flex; justify-content:flex-end; background:rgba(5,12,21,.78); backdrop-filter:blur(4px); }
 .plan-today-sheet[hidden] { display:none; }
 .plan-today-panel { box-sizing:border-box; width:min(620px,100%); height:100%; overflow:auto; overflow-x:hidden; padding:18px; background:#0b1526; border-left:1px solid #2a496e; }

frontend/dashboard.js

@@ -8453,6 +8453,16 @@
     adoptedProgressiveSnapshot = await contextPoller.adoptPending(progressiveWorkHandoff.liveSnapshotPromise);
   }
   if (!adoptedProgressiveSnapshot) await load();
+  if (progressiveWorkHandoff?.openWork) {
+    const progressiveItem = lastMyWork.find(item =>
+      item.repository === progressiveWorkHandoff.openWork.repository &&
+      Number(item.number) === Number(progressiveWorkHandoff.openWork.number));
+    if (progressiveItem) {
+      openRoutedWork(progressiveItem, null);
+      qs('#progressive-work-detail').hidden = true;
+    }
+  }
+
   await appShortcut.run();
   document.addEventListener('visibilitychange', () => {
     contextPoller.setVisible(!document.hidden);

frontend/index.html

@@ -375,6 +375,19 @@
       </div>
     </div>
   </section>
+  <section class="progressive-work-detail" id="progressive-work-detail" role="dialog" aria-modal="true" aria-labelledby="progressive-work-detail-title" hidden>
+    <div class="progressive-work-detail-panel">
+      <header>
+        <div><p class="small muted">My Work</p><h2 id="progressive-work-detail-title">Work item</h2></div>
+        <button id="close-progressive-work-detail" type="button">Close</button>
+      </header>
+      <p class="small" id="progressive-work-detail-meta"></p>
+      <p id="progressive-work-detail-reason"></p>
+      <p class="muted">The full workspace is still loading. You can read this assignment now or open it in Gitea.</p>
+      <a class="button-link" id="open-progressive-work-gitea" href="" hidden>Open in Gitea</a>
+    </div>
+  </section>
+
   <dialog class="release-receipt-sheet" id="release-receipt-sheet" aria-labelledby="release-receipt-title">
     <section class="release-receipt-panel">
       <header><div><p class="small muted">Exact merge evidence</p><h2 id="release-receipt-title">Release watchlist</h2></div><button id="close-release-receipt" type="button">Close</button></header>

frontend/progressive-my-work.js

@@ -3,6 +3,12 @@ function createProgressiveMyWork({
 }) {
   const list = document.querySelector('#my-work-list');
   const status = document.querySelector('#my-work-status');
+  const detail = document.querySelector('#progressive-work-detail');
+  const detailTitle = document.querySelector('#progressive-work-detail-title');
+  const detailMeta = document.querySelector('#progressive-work-detail-meta');
+  const detailReason = document.querySelector('#progressive-work-detail-reason');
+  const closeDetail = document.querySelector('#close-progressive-work-detail');
+  const openGitea = document.querySelector('#open-progressive-work-gitea');
   const filters = Array.from(document.querySelectorAll('[data-work-filter]'));
   const listeners = [];
   const lifecycleListeners = [];
@@ -14,6 +20,8 @@ function createProgressiveMyWork({
   let liveSnapshotPromise = null;
   let confirmedLogin = '';
   let poller = null;
+  let detailTrigger = null;
+  let openWork = null;
   const deferredQueues = {
     today:'Today', agenda:'Agenda', later:'Later', draft:'Drafts',
   };
@@ -35,6 +43,28 @@ function createProgressiveMyWork({
             filter === 'authored' ? item.is_authored :
               filter === 'pull' ? item.kind === 'pull' && !item.is_review : item.kind === filter;
   const visibleItems = () => active === 'all' ? items : items.filter(item => matches(item, active));
+  const closeProgressiveDetail = ({ restoreFocus = true } = {}) => {
+    if (!detail || detail.hidden) return;
+    detail.hidden = true;
+    if (restoreFocus) detailTrigger?.focus?.();
+    detailTrigger = null;
+    openWork = null;
+  };
+  const openProgressiveDetail = (item, trigger) => {
+    if (!detail || !item) return;
+    detailTrigger = trigger;
+    openWork = item;
+    detailTitle.textContent = item.title || item.key || 'Untitled work';
+    detailMeta.textContent = (item.key || 'Unknown work item') + ' · ' +
+      (item.kind === 'pull' ? 'Pull request' : 'Issue');
+    detailReason.textContent = item.reason || 'Assigned to you';
+    const href = safeUrl(item.url);
+    openGitea.hidden = !href;
+    if (href) openGitea.href = href;
+    else openGitea.removeAttribute?.('href');
+    detail.hidden = false;
+    closeDetail?.focus?.();
+  };
   const updateCounts = () => {
     ['all','attention','filed','authored','issue','pull','review','update'].forEach(filter => {
       const count = filter === 'all' ? items.length : items.filter(item => matches(item, filter)).length;
@@ -46,15 +76,14 @@ function createProgressiveMyWork({
     if (stopped || !list) return;
     const visible = visibleItems();
     list.innerHTML = deferredQueues[active] ?
-      '<div class="muted">' + deferredQueues[active] + ' is still loading…</div>' : visible.length ? visible.map(item => {
-      const href = safeUrl(item.url);
+      '<div class="muted">' + deferredQueues[active] + ' is still loading…</div>' : visible.length ? visible.map((item, index) => {
       const title = escapeHtml(item.title || item.key || 'Untitled work');
       const context = escapeHtml(item.key || '');
       const reason = escapeHtml(item.reason || 'Assigned to you');
       return '<article class="my-work-card progressive-my-work-card">' +
-        (href ? '<a class="my-work-card-main" href="' + escapeHtml(href) + '">' : '<div class="my-work-card-main">') +
+        '<button class="my-work-card-main" type="button" data-progressive-work-index="' + index + '">' +
         '<strong>' + title + '</strong><span class="small">' + context + ' · ' + reason + '</span>' +
-        (href ? '</a>' : '</div>') + '</article>';
+        '</button></article>';
     }).join('') : '<div class="muted">No work in this queue.</div>';
     filters.forEach(button => button.setAttribute('aria-pressed', String(button.dataset.workFilter === active)));
   };
@@ -63,6 +92,23 @@ function createProgressiveMyWork({
     button.addEventListener('click', listener);
     listeners.push([button, listener]);
   });
+  const openListener = event => {
+    const trigger = event.target?.closest?.('[data-progressive-work-index]');
+    if (!trigger) return;
+    const item = visibleItems()[Number(trigger.dataset.progressiveWorkIndex)];
+    if (!item) return;
+    event.preventDefault?.();
+    openProgressiveDetail(item, trigger);
+  };
+  const closeListener = () => closeProgressiveDetail();
+  const keyListener = event => {
+    if (event.key !== 'Escape' || detail?.hidden) return;
+    event.preventDefault?.();
+    closeProgressiveDetail();
+  };
+  list?.addEventListener?.('click', openListener);
+  closeDetail?.addEventListener?.('click', closeListener);
+  lifecycleTarget.addEventListener?.('keydown', keyListener);
 
   const applySnapshot = snapshot => {
     if (stopped) return false;
@@ -102,6 +148,13 @@ function createProgressiveMyWork({
     login() { return confirmedLogin; },
     handoff() {
       const state = { selectedFilter:selectedByUser ? active : null };
+      if (openWork) {
+        state.openWork = {
+          kind:openWork.kind, key:openWork.key, number:openWork.number,
+          repository:openWork.repository,
+        };
+        openWork = null;
+      }
       if (liveSnapshot) {
         state.liveSnapshot = liveSnapshot;
         liveSnapshot = null;
@@ -142,6 +195,9 @@ function createProgressiveMyWork({
       stopped = true;
       poller?.stop();
       listeners.forEach(([button, listener]) => button.removeEventListener?.('click', listener));
+      list?.removeEventListener?.('click', openListener);
+      closeDetail?.removeEventListener?.('click', closeListener);
+      lifecycleTarget.removeEventListener?.('keydown', keyListener);
       lifecycleListeners.forEach(([eventName, listener]) =>
         lifecycleTarget.removeEventListener?.(eventName, listener));
     },