feat: preview global search results in dashboard (#197)

frontend/index.html

@@ -176,6 +176,14 @@ textarea { resize: vertical; min-height: 120px; }
 .find-work-detail { min-width:0; display:grid; gap:10px; padding:10px; border-radius:10px; background:#0b1526; }
 .find-work-description { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
 .find-work-detail a { display:flex; align-items:center; justify-content:center; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
+.search-preview { position:fixed; inset:0; z-index:60; display:none; justify-content:flex-end; background:rgba(5,12,21,.72); backdrop-filter:blur(4px); }
+.search-preview.open { display:flex; }
+.search-preview-panel { box-sizing:border-box; width:min(560px,100%); height:100dvh; overflow:auto; display:grid; align-content:start; gap:12px; padding:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); background:#0b1526; border-left:1px solid #2a496e; overflow-wrap:anywhere; }
+.search-preview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
+.search-preview-header button, .search-preview-actions button, .search-preview-actions a { min-height:44px; }
+.search-preview-body { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
+.search-preview-actions { position:sticky; bottom:0; display:grid; gap:8px; padding:10px 0; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:#0b1526; }
+.search-preview-actions a { display:flex; align-items:center; justify-content:center; border:1px solid #60a5fa; border-radius:10px; font-weight:700; }
 @media(max-width:320px) { .find-work-panel { padding:12px; overflow-x:hidden; } .find-work-card { min-width:0; } .my-work-actions { width:100%; } .my-work-actions button { flex:1 1 100%; } }
 .create-issue-sheet { position:fixed; inset:0; z-index:57; display:none; justify-content:flex-end; background:rgba(5,12,21,.72); backdrop-filter:blur(4px); }
 .create-issue-sheet.open { display:flex; }
@@ -221,6 +229,7 @@ textarea { resize: vertical; min-height: 120px; }
   .review-sheet-panel { width:100%; border-left:0; padding:14px; }
   .update-sheet-panel { width:100%; border-left:0; padding:14px; }
   .issue-sheet-panel { width:100%; border-left:0; padding:14px; }
+  .search-preview-panel { width:100%; border-left:0; padding:14px; padding-bottom:calc(14px + env(safe-area-inset-bottom)); overflow-x:hidden; }
   .create-issue-panel { width:100%; border-left:0; padding:14px; }
   .pull-sheet-panel { width:100%; border-left:0; padding:14px; }
 }
@@ -339,6 +348,25 @@ textarea { resize: vertical; min-height: 120px; }
   <div id="cmd-results" class="stack" role="listbox" aria-label="Commands and work search results" style="margin-top:8px;max-height:min(65vh,520px);overflow-y:auto;"></div>
 </div>
 
+<div class="search-preview" id="search-preview" role="dialog" aria-modal="true" aria-labelledby="search-preview-title">
+  <section class="search-preview-panel">
+    <div class="search-preview-header">
+      <div>
+        <div class="small" id="search-preview-key"></div>
+        <h3 id="search-preview-title">Work preview</h3>
+      </div>
+      <button id="close-search-preview" type="button">Back to search</button>
+    </div>
+    <div id="search-preview-status" class="small" aria-live="polite">Choose a search result.</div>
+    <div id="search-preview-meta" class="row"></div>
+    <p id="search-preview-body" class="search-preview-body"></p>
+    <div class="search-preview-actions">
+      <button id="claim-search-result" type="button" hidden>Assign to me</button>
+      <a id="open-search-result-gitea" href="#" target="_blank" rel="noopener noreferrer">Open in Gitea</a>
+    </div>
+  </section>
+</div>
+
 <div id="whiteboard-modal">
   <div class="modal">
     <div class="modal-actions">
@@ -600,6 +628,7 @@ textarea { resize: vertical; min-height: 120px; }
 
 <script src="static/markdown.js"></script>
 <script src="static/commands.js"></script>
+<script src="static/search-preview.js"></script>
 <script src="static/widgets.js"></script>
 <script src="static/my-work.js"></script>
 <script src="static/pick-work.js"></script>
@@ -1784,17 +1813,95 @@ textarea { resize: vertical; min-height: 120px; }
     try {
       const url = new URL(value);
       return ['http:', 'https:'].includes(url.protocol) ? url.href : '';
-    } catch (_) { return ''; }
+    } catch (_) { return '';
+    }
+  }
+  let searchPreviewDetail = null;
+  function searchPreviewPath(item) {
+    const repository = String(item.repository || '').split('/').map(encodeURIComponent).join('/');
+    return 'api/v1/repos/' + repository + '/issues/' + encodeURIComponent(item.number) +
+      '/preview?kind=' + encodeURIComponent(item.kind);
+  }
+  function renderSearchPreview(state) {
+    const sheet = qs('#search-preview');
+    const status = qs('#search-preview-status');
+    const claimButton = qs('#claim-search-result');
+    if (state.status === 'closed') {
+      sheet.classList.remove('open');
+      return;
+    }
+    sheet.classList.add('open');
+    claimButton.hidden = true;
+    claimButton.disabled = false;
+    if (state.status === 'loading') {
+      searchPreviewDetail = null;
+      qs('#search-preview-key').textContent = state.item.repository + ' #' + state.item.number;
+      qs('#search-preview-title').textContent = state.item.title || 'Work preview';
+      qs('#search-preview-meta').textContent = '';
+      qs('#search-preview-body').textContent = '';
+      qs('#open-search-result-gitea').href = safeSearchUrl(state.item.url) || '#';
+      status.textContent = 'Loading preview…';
+      return;
+    }
+    if (state.status === 'error') {
+      status.textContent = state.error?.message || 'Preview unavailable. Open this result in Gitea or retry.';
+      return;
+    }
+    const detail = state.detail;
+    if (!detail) return;
+    searchPreviewDetail = detail;
+    qs('#search-preview-key').textContent = detail.repository + ' #' + detail.number;
+    qs('#search-preview-title').textContent = detail.title || 'Untitled work item';
+    qs('#search-preview-meta').textContent =
+      (detail.kind === 'pull' ? 'Pull request' : 'Issue') + ' · ' + (detail.state || 'unknown') +
+      (detail.author ? ' · by ' + detail.author : '') +
+      (detail.labels?.length ? ' · ' + detail.labels.join(', ') : '') +
+      (detail.assignees?.length ? ' · assigned to ' + detail.assignees.join(', ') : '');
+    qs('#search-preview-body').textContent = detail.body || 'No description provided.';
+    qs('#open-search-result-gitea').href = safeSearchUrl(detail.url) || '#';
+    claimButton.hidden = !(detail.claimable || (detail.assigned_to_me && detail.kind === 'issue'));
+    claimButton.textContent = detail.assigned_to_me ? 'Open in My Work' : 'Assign to me';
+    claimButton.disabled = state.status === 'claiming';
+    status.textContent = state.status === 'claiming' ? 'Assigning this issue to you…' :
+      (state.status === 'claimed' ? 'Assignment confirmed. Opening My Work…' :
+      (detail.claimable ? 'This issue is open and unassigned.' :
+      (detail.assigned_to_me ? 'This issue is already in My Work.' : 'Read-only preview.')));
+  }
+  const searchPreview = createSearchPreview({
+    fetchJson: item => fetchReviewJson(searchPreviewPath(item), { headers:{ Accept:'application/json' } }),
+    claim: detail => fetchReviewJson(
+      'api/v1/repos/' + detail.repository.split('/').map(encodeURIComponent).join('/') +
+      '/issues/' + encodeURIComponent(detail.number) + '/claim',
+      { method:'PATCH', headers:{ Accept:'application/json' } }
+    ),
+    onState: renderSearchPreview,
+  });
+  function closeSearchPreview() {
+    searchPreview.close();
+    qs('#cmd-palette').classList.add('open');
+    qs('#cmd-input').setAttribute('aria-expanded', 'true');
+    renderCommands(qs('#cmd-input').value);
+    qs('#cmd-input').focus();
+  }
+  async function openPreviewIssueInMyWork(detail) {
+    await load();
+    const item = lastMyWork.find(candidate =>
+      candidate.kind === 'issue' && candidate.key === detail.repository + '#' + detail.number
+    );
+    if (!item) return false;
+    searchPreview.close();
+    await openIssueSheet(item, qs('#find-work'));
+    return true;
   }
   function runCommandItem(item) {
-    if (item.command) item.command.run();
-    else {
-      const url = safeSearchUrl(item.result.url);
-      if (url) window.location.assign(url);
+    if (item.command) {
+      item.command.run();
+      qs('#cmd-input').value = '';
+    } else {
+      searchPreview.open(item.result).catch(() => {});
     }
     qs('#cmd-palette').classList.remove('open');
     qs('#cmd-input').setAttribute('aria-expanded', 'false');
-    qs('#cmd-input').value = '';
   }
   function renderCommands(filter) {
     const el = qs('#cmd-results');
@@ -1851,6 +1958,11 @@ textarea { resize: vertical; min-height: 120px; }
       qs('#cmd-input').setAttribute('aria-expanded', 'false');
       return;
     }
+    if (e.key === 'Escape' && qs('#search-preview').classList.contains('open')) {
+      e.preventDefault();
+      closeSearchPreview();
+      return;
+    }
     if (e.key === 'Escape' && findingWork) {
       e.preventDefault();
       closeFindWorkSheet();
@@ -1880,6 +1992,21 @@ textarea { resize: vertical; min-height: 120px; }
       } else openCommandPalette();
     }
   });
+  qs('#close-search-preview').addEventListener('click', closeSearchPreview);
+  qs('#claim-search-result').addEventListener('click', async () => {
+    if (!searchPreviewDetail || (!searchPreviewDetail.claimable && !searchPreviewDetail.assigned_to_me)) return;
+    try {
+      const claimed = searchPreviewDetail;
+      if (claimed.claimable) await searchPreview.claim(claimed);
+      const opened = await openPreviewIssueInMyWork(claimed);
+      if (!opened) {
+        qs('#search-preview-status').textContent =
+          'Assignment confirmed. Refresh My Work to open the issue.';
+      }
+    } catch (error) {
+      qs('#search-preview-status').textContent = error.message + ' Retry assignment.';
+    }
+  });
   qs('#close-whiteboard').addEventListener('click', () => closeModal('whiteboard-modal'));
   qs('#find-work').addEventListener('click', openFindWorkSheet);
   qs('#close-find-work').addEventListener('click', closeFindWorkSheet);

frontend/search-preview.js

@@ -0,0 +1,48 @@
+(function (root, factory) {
+  const createSearchPreview = factory();
+  if (typeof module === 'object' && module.exports) module.exports = createSearchPreview;
+  if (root) root.createSearchPreview = createSearchPreview;
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  return function createSearchPreview({ fetchJson, claim, onState }) {
+    let generation = 0;
+    let current = null;
+    let claimRequest = null;
+
+    return {
+      open(item) {
+        generation += 1;
+        const requestGeneration = generation;
+        current = { ...item };
+        onState({ status: 'loading', item: current });
+        return fetchJson(current).then(detail => {
+          if (requestGeneration === generation) {
+            onState({ status: 'ready', item: current, detail });
+          }
+          return detail;
+        }).catch(error => {
+          if (requestGeneration === generation) {
+            onState({ status: 'error', item: current, error });
+          }
+          throw error;
+        });
+      },
+      close() {
+        generation += 1;
+        current = null;
+        onState({ status: 'closed' });
+      },
+      claim(detail) {
+        if (claimRequest) return claimRequest;
+        onState({ status: 'claiming', item: current, detail });
+        claimRequest = claim(detail).then(result => {
+          onState({ status: 'claimed', item: current, detail, result });
+          return result;
+        }).catch(error => {
+          onState({ status: 'ready', item: current, detail, error });
+          throw error;
+        }).finally(() => { claimRequest = null; });
+        return claimRequest;
+      },
+    };
+  };
+});