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/components/ContextPopup.vue

@@ -1,63 +1,40 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
-import {GET} from '../modules/fetch.ts';
 import {getIssueColorClass, getIssueIcon} from '../features/issue.ts';
-import {computed, onMounted, shallowRef} from 'vue';
+import {computed} from 'vue';
 import type {Issue} from '../types.ts';
 
 const props = defineProps<{
-  repoLink: string,
-  loadIssueInfoUrl: string,
+  issue?: Issue | null,
+  renderedLabels?: string,
+  errorMessage?: string,
 }>();
 
-const loading = shallowRef(false);
-const issue = shallowRef<Issue | null>(null);
-const renderedLabels = shallowRef('');
-const errorMessage = shallowRef('');
-
 const createdAt = computed(() => {
-  if (!issue?.value) return '';
-  return new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
+  if (!props.issue) return '';
+  return new Date(props.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
 });
 
 const body = computed(() => {
-  if (!issue?.value) return '';
-  const body = issue.value.body.replace(/\n+/g, ' ');
+  if (!props.issue) return '';
+  const body = props.issue.body.replace(/\n+/g, ' ');
   return body.length > 85 ? `${body.substring(0, 85)}…` : body;
 });
-
-onMounted(async () => {
-  loading.value = true;
-  errorMessage.value = '';
-  try {
-    const resp = await GET(props.loadIssueInfoUrl);
-    if (!resp.ok) {
-      errorMessage.value = resp.status ? resp.statusText : 'Unknown network error';
-      return;
-    }
-    const respJson = await resp.json();
-    issue.value = respJson.convertedIssue;
-    renderedLabels.value = respJson.renderedLabels;
-  } finally {
-    loading.value = false;
-  }
-});
 </script>
 
 <template>
   <div class="tw-p-4">
-    <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
-    <div v-else-if="issue" class="tw-flex tw-flex-col tw-gap-2">
+    <div v-if="issue" class="tw-flex tw-flex-col tw-gap-2">
       <div class="tw-text-12">
-        <a :href="repoLink" class="muted">{{ issue.repository.full_name }}</a>
+        <a :href="issue.repository.html_url" class="muted">{{ issue.repository.full_name }}</a>
         on {{ createdAt }}
       </div>
       <div class="flex-text-block">
         <svg-icon :name="getIssueIcon(issue)" :class="getIssueColorClass(issue)"/>
-        <span class="issue-title tw-font-semibold tw-break-anywhere">
+        <a :href="issue.html_url" class="issue-title tw-font-semibold tw-break-anywhere muted">
           {{ issue.title }}
           <span class="index">#{{ issue.number }}</span>
-        </span>
+        </a>
       </div>
       <div v-if="body">{{ body }}</div>
       <!-- eslint-disable-next-line vue/no-v-html -->