Extend issue context popup beyond markdown content (#36908)

Extend the issue context popup beyond markdown. Any link rendered with
the `ref-issue` class now gets the popup, which covers commit titles and
issue titles everywhere they appear (repo home, commits list, blame,
branches, graph, PR commits, issue/PR pages, compare, …). For surfaces
that synthesize links without markdown autolinking (dashboard activity
feed, pulse page, commit merged-PR line), opt in by adding
`data-ref-issue-container` on a parent (or `ref-issue` on the link).

- Use `html_url` from the backend payload instead of synthesizing links
client-side
- Fetch outside the component, stateless, with a per-URL cache
- Small hover delay so passing over a link doesn't fire a request
- Drop the loading state (shifted layout)
- Make both links in the tooltip work; prevent nested tooltips
- Fix feed title `<a>` width so the tooltip only shows on link hover

Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>

web_src/js/features/ref-issue.ts

@@ -0,0 +1,75 @@
+import {parseIssueHref} from '../utils.ts';
+import {GET} from '../modules/fetch.ts';
+import {createApp} from 'vue';
+import {createTippy, getAttachedTippyInstance} from '../modules/tippy.ts';
+import {addDelegatedEventListener} from '../utils/dom.ts';
+import type {Issue} from '../types.ts';
+
+type IssueInfo = {
+  convertedIssue: Issue,
+  renderedLabels: string,
+};
+
+const issueInfoCache = new Map<string, IssueInfo>();
+
+async function getIssueInfo(url: string): Promise<IssueInfo> {
+  if (issueInfoCache.has(url)) return issueInfoCache.get(url)!;
+  const resp = await GET(url);
+  if (!resp.ok) throw new Error(resp.statusText || 'Unknown network error');
+  const data = await resp.json();
+  issueInfoCache.set(url, data);
+  return data;
+}
+
+async function showRefIssuePopup(link: HTMLAnchorElement) {
+  const [data, {default: ContextPopup}] = await Promise.all([
+    getIssueInfo(`${link.pathname}/info`),
+    import('../components/ContextPopup.vue'),
+  ]);
+  const el = document.createElement('div');
+  const app = createApp(ContextPopup, {
+    issue: data.convertedIssue,
+    renderedLabels: data.renderedLabels,
+  });
+  app.mount(el);
+  // suppress ancestor title like from .commit-summary to prevent double tooltip
+  link.title = '';
+  createTippy(link, {
+    theme: 'default',
+    content: el,
+    trigger: 'mouseenter focus',
+    placement: 'top-start',
+    interactive: true,
+    role: 'dialog',
+    interactiveBorder: 5,
+    onDestroy: () => app.unmount(),
+  }).show();
+}
+
+export function initRefIssueContextPopup() {
+  const selector = 'a[href]:not([data-ref-issue-popup]):not(.ref-external-issue)';
+  addDelegatedEventListener<HTMLAnchorElement, MouseEvent>(document, 'mouseover', selector, (link) => {
+    if (!parseIssueHref(link.getAttribute('href')!).ownerName) return;
+    if (!link.classList.contains('ref-issue') && !link.closest('[data-ref-issue-container]')) return;
+    if (getAttachedTippyInstance(link)) return;
+    link.setAttribute('data-ref-issue-popup', '');
+
+    // delay so a mouse passing over the link doesn't fire a fetch
+    let timer: ReturnType<typeof setTimeout>;
+    const cancel = () => {
+      clearTimeout(timer);
+      link.removeAttribute('data-ref-issue-popup');
+      link.removeEventListener('mouseleave', cancel);
+    };
+    timer = setTimeout(async () => {
+      link.removeEventListener('mouseleave', cancel);
+      try {
+        await showRefIssuePopup(link);
+      } catch (err) {
+        console.error('Failed to load issue info:', err);
+        link.removeAttribute('data-ref-issue-popup');
+      }
+    }, 300);
+    link.addEventListener('mouseleave', cancel);
+  });
+}