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>

templates/repo/activity.tmpl

@@ -5,7 +5,7 @@
 		<div class="flex-container-nav">
 			{{template "repo/navbar" .}}
 		</div>
-		<div class="flex-container-main">
+		<div class="flex-container-main" data-ref-issue-container>
 			{{if .PageIsPulse}}{{template "repo/pulse" .}}{{end}}
 			{{if .PageIsContributors}}{{template "repo/contributors" .}}{{end}}
 			{{if .PageIsCodeFrequency}}{{template "repo/code_frequency" .}}{{end}}

templates/repo/commit_load_branches_and_tags.tmpl

@@ -1,7 +1,7 @@
 {{if not .PageIsWiki}}
 <div class="branch-and-tag-area" data-text-default-branch-tooltip="{{ctx.Locale.Tr "repo.commit.contained_in_default_branch"}}">
 	{{if .MergedPRIssueNumber}}
-	{{$prLink := HTMLFormat `<a href="%s/pulls/%d">#%d</a>` $.RepoLink $.MergedPRIssueNumber $.MergedPRIssueNumber}}
+	{{$prLink := HTMLFormat `<a class="ref-issue" href="%s/pulls/%d">#%d</a>` $.RepoLink $.MergedPRIssueNumber $.MergedPRIssueNumber}}
 	<div>
 		<div class="divider"></div>
 		<div>{{ctx.Locale.Tr "repo.commit.merged_in_pr" $prLink}}</div>

templates/user/dashboard/feeds.tmpl

@@ -1,4 +1,4 @@
-<div id="activity-feed" class="flex-list">
+<div id="activity-feed" class="flex-list" data-ref-issue-container>
 	{{range .Feeds}}
 		<div class="flex-item">
 			<div class="flex-item-leading">
@@ -107,7 +107,7 @@
 				{{else if .GetOpType.InActions "create_pull_request"}}
 					<span class="tw-inline-block tw-truncate issue title">{{index .GetIssueInfos 1 | ctx.RenderUtils.RenderIssueSimpleTitle}}</span>
 				{{else if .GetOpType.InActions "comment_issue" "approve_pull_request" "reject_pull_request" "comment_pull"}}
-					<a href="{{.GetCommentLink ctx}}" class="tw-inline-block tw-truncate issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
+					<a href="{{.GetCommentLink ctx}}" class="tw-inline-block tw-truncate tw-self-start issue title">{{(.GetIssueTitle ctx) | ctx.RenderUtils.RenderIssueSimpleTitle}}</a>
 					{{$comment := index .GetIssueInfos 1}}
 					{{if $comment}}
 						<div class="render-content markup truncated-markup">{{ctx.RenderUtils.MarkdownToHtml $comment}}</div>

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,
+  issue?: Issue | null,
-  loadIssueInfoUrl: string,
+  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 '';
+  if (!props.issue) return '';
-  return new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
+  return new Date(props.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
 });
 
 const body = computed(() => {
-  if (!issue?.value) return '';
+  if (!props.issue) return '';
-  const body = issue.value.body.replace(/\n+/g, ' ');
+  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-if="issue" class="tw-flex tw-flex-col tw-gap-2">
-    <div v-else-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 -->

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);
+  });
+}

web_src/js/index.ts

@@ -63,6 +63,7 @@ import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFor
 import {callInitFunctions} from './modules/init.ts';
 import {initRepoViewFileTree} from './features/repo-view-file-tree.ts';
 import {initActionsPermissionsForm} from './features/common-actions-permissions.ts';
+import {initRefIssueContextPopup} from './features/ref-issue.ts';
 import {initGlobalShortcut} from './modules/shortcut.ts';
 import {initDevtest} from './modules/devtest.ts';
 
@@ -98,6 +99,7 @@ const initPerformanceTracer = callInitFunctions([
   initImageDiff,
   initMarkupAnchors,
   initMarkupContent,
+  initRefIssueContextPopup,
   initSshKeyFormParser,
   initStopwatch,
   initTableSort,

web_src/js/markup/content.ts

@@ -5,7 +5,6 @@ import {initMarkupRenderAsciicast} from './asciicast.ts';
 import {initMarkupTasklist} from './tasklist.ts';
 import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
 import {initExternalRenderIframe} from './render-iframe.ts';
-import {initMarkupRefIssue} from './refissue.ts';
 import {toggleElemClass} from '../utils/dom.ts';
 
 // code that runs for all markup content
@@ -26,6 +25,5 @@ export function initMarkupContent(): void {
     initMarkupCodeMermaid(el);
     initMarkupCodeMath(el);
     initMarkupRenderAsciicast(el);
-    initMarkupRefIssue(el);
   });
 }

web_src/js/markup/refissue.ts

@@ -1,42 +0,0 @@
-import {queryElems} from '../utils/dom.ts';
-import {parseIssueHref} from '../utils.ts';
-import {createApp} from 'vue';
-import {createTippy, getAttachedTippyInstance} from '../modules/tippy.ts';
-
-export function initMarkupRefIssue(el: HTMLElement) {
-  queryElems(el, '.ref-issue', (el) => {
-    el.addEventListener('mouseenter', showMarkupRefIssuePopup);
-    el.addEventListener('focus', showMarkupRefIssuePopup);
-  });
-}
-
-function showMarkupRefIssuePopup(e: MouseEvent | FocusEvent) {
-  const refIssue = e.currentTarget as HTMLElement;
-  if (getAttachedTippyInstance(refIssue)) return;
-  if (refIssue.classList.contains('ref-external-issue')) return;
-
-  const issuePathInfo = parseIssueHref(refIssue.getAttribute('href')!);
-  if (!issuePathInfo.ownerName) return;
-
-  const el = document.createElement('div');
-  const onShowAsync = async () => {
-    const {default: ContextPopup} = await import('../components/ContextPopup.vue');
-    const view = createApp(ContextPopup, {
-      // backend: GetIssueInfo
-      loadIssueInfoUrl: `${window.config.appSubUrl}/${issuePathInfo.ownerName}/${issuePathInfo.repoName}/issues/${issuePathInfo.indexString}/info`,
-    });
-    view.mount(el);
-  };
-  const tippy = createTippy(refIssue, {
-    theme: 'default',
-    content: el,
-    trigger: 'mouseenter focus',
-    placement: 'top-start',
-    interactive: true,
-    role: 'dialog',
-    interactiveBorder: 5,
-    // onHide() { return false }, // help to keep the popup and debug the layout
-    onShow: () => { onShowAsync() },
-  });
-  tippy.show();
-}

web_src/js/types.ts

@@ -42,12 +42,14 @@ export type Issue = {
   body: string,
   state: 'open' | 'closed',
   created_at: string,
+  html_url: string,
   pull_request?: {
     draft: boolean;
     merged: boolean;
   },
   repository: {
     full_name: string,
+    html_url: string,
   },
   labels: Array<string>,
 };