From e943ddca72ed267a8ea86239ce03780d7d6e0f5a Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 23 Oct 2024 14:24:03 +0200
Subject: [PATCH 01/12] Autocomplete issues or pull-request ids

---
 templates/shared/combomarkdowneditor.tmpl |  2 +-
 web_src/js/features/comp/TextExpander.ts  | 32 +++++++--
 web_src/js/utils/match.ts                 | 80 ++++++++++++++++++++++-
 3 files changed, 106 insertions(+), 8 deletions(-)

diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl
index a0145ab297b49..0a01dd9b1d770 100644
--- a/templates/shared/combomarkdowneditor.tmpl
+++ b/templates/shared/combomarkdowneditor.tmpl
@@ -44,7 +44,7 @@ Template Attributes:
 				<button class="markdown-toolbar-button markdown-switch-easymde" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
 			</div>
 		</markdown-toolbar>
-		<text-expander keys=": @" suffix="">
+		<text-expander keys=": @ #" multiword="#" suffix="">
 			<textarea class="markdown-text-editor"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea>
 		</text-expander>
 		<script>
diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index 5afe025d38790..eea0f76a357c2 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -1,8 +1,8 @@
-import {matchEmoji, matchMention} from '../../utils/match.ts';
+import {matchEmoji, matchMention, matchIssueOrPullRequest} from '../../utils/match.ts';
 import {emojiString} from '../emoji.ts';
 
 export function initTextExpander(expander) {
-  expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
+  expander?.addEventListener('text-expander-change', async ({detail: {key, provide, text}}) => {
     if (key === ':') {
       const matches = matchEmoji(text);
       if (!matches.length) return provide({matched: false});
@@ -48,13 +48,37 @@ export function initTextExpander(expander) {
         ul.append(li);
       }
 
+      provide({matched: true, fragment: ul});
+    } else if (key === '#') {
+      const url = window.location.href;
+      const matches = matchIssueOrPullRequest(url, text);
+      if (!matches.length) return provide({matched: false});
+
+      const ul = document.createElement('ul');
+      ul.classList.add('suggestions');
+      for (const {value, name, type} of matches) {
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        li.setAttribute('data-value', `${key}${value}`);
+
+        const icon = document.createElement('span');
+        icon.classList.add('icon', type === 'issue' ? 'issue' : 'pull-request');
+        li.append(icon);
+
+        const nameSpan = document.createElement('span');
+        nameSpan.textContent = name;
+        li.append(nameSpan);
+
+        ul.append(li);
+      }
+
       provide({matched: true, fragment: ul});
     }
   });
   expander?.addEventListener('text-expander-value', ({detail}) => {
     if (detail?.item) {
-      // add a space after @mentions as it's likely the user wants one
-      const suffix = detail.key === '@' ? ' ' : '';
+      // add a space after @mentions and #issue as it's likely the user wants one
+      const suffix = ['@', '#'].includes(detail.key) ? ' ' : '';
       detail.value = `${detail.item.getAttribute('data-value')}${suffix}`;
     }
   });
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 0ce7e2b1a2a81..164e7167124b0 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -1,8 +1,9 @@
 import emojis from '../../../assets/emoji.json';
+import { request } from '../modules/fetch.ts';
 
 const maxMatches = 6;
 
-function sortAndReduce(map: Map<string, number>) {
+function sortAndReduce<T>(map: Map<T, number>): T[] {
   const sortedMap = new Map(Array.from(map.entries()).sort((a, b) => a[1] - b[1]));
   return Array.from(sortedMap.keys()).slice(0, maxMatches);
 }
@@ -27,11 +28,12 @@ export function matchEmoji(queryText: string): string[] {
   return sortAndReduce(results);
 }
 
-export function matchMention(queryText: string): string[] {
+type Mention = {value: string; name: string; fullname: string; avatar: string};
+export function matchMention(queryText: string): Mention[] {
   const query = queryText.toLowerCase();
 
   // results is a map of weights, lower is better
-  const results = new Map();
+  const results = new Map<Mention, number>();
   for (const obj of window.config.mentionValues ?? []) {
     const index = obj.key.toLowerCase().indexOf(query);
     if (index === -1) continue;
@@ -41,3 +43,75 @@ export function matchMention(queryText: string): string[] {
 
   return sortAndReduce(results);
 }
+
+type IssueOrPullRequest = {value: string; name: string; type: 'issue' | 'pull-request'};
+export async function matchIssueOrPullRequest(url: string, queryText: string): IssueOrPullRequest[] {
+  const query = queryText.toLowerCase();
+
+  const repository = url.split('/').slice(-2).join('/');
+  const issuePullRequestId = url.split('/').slice(-1)[0];
+
+  console.log('suggestions for', {
+    repository,
+    query,
+  });
+
+  // TODO: fetch data from api
+  // const res = await request('/-/suggestions', {
+  //   method: 'GET',
+  //   data: {
+  //     repository,
+  //     query,
+  //   },
+  // });
+  // console.log(await res.json());
+
+  // results is a map of weights, lower is better
+  const results = new Map<IssueOrPullRequest, number>();
+  // for (const obj of window.config.mentionValues ?? []) {
+  //   const index = obj.key.toLowerCase().indexOf(query);
+  //   if (index === -1) continue;
+  //   const existing = results.get(obj);
+  //   results.set(obj, existing ? existing - index : index);
+  // }
+
+  results.set({
+    value: '28958',
+    name: 'Live removal of issue comments using htmx websocket',
+    type: 'pull-request',
+  }, 0);
+
+  results.set({
+    value: '32234',
+    name: 'Calculate `PublicOnly` for org membership only once',
+    type: 'pull-request',
+  }, 1);
+
+  results.set({
+    value: '32280',
+    name: 'Optimize branch protection rule loading',
+    type: 'pull-request',
+  }, 2);
+
+  results.set({
+    value: '32326',
+    name: 'Shallow Mirroring',
+    type: 'issue',
+  }, 3);
+
+  results.set({
+    value: '32248',
+    name: 'Make admins adhere to branch protection rules',
+    type: 'pull-request',
+  }, 4);
+
+  // filter out current issue/pull request
+  for (const [key] of results.entries()) {
+    if (key.value === issuePullRequestId) {
+      results.delete(key);
+      break;
+    }
+  }
+
+  return sortAndReduce(results);
+}

From 1afcb061b68af931cd8191ba0eeff741330ba53e Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 23 Oct 2024 15:11:22 +0200
Subject: [PATCH 02/12] add ui

---
 web_src/js/features/comp/TextExpander.ts | 81 ++++++++++++++++++------
 web_src/js/utils/match.ts                | 59 ++++++++++++++---
 2 files changed, 110 insertions(+), 30 deletions(-)

diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index eea0f76a357c2..bd895bc61f38f 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -1,8 +1,41 @@
-import {matchEmoji, matchMention, matchIssueOrPullRequest} from '../../utils/match.ts';
+import {matchEmoji, matchMention, matchIssue} from '../../utils/match.ts';
 import {emojiString} from '../emoji.ts';
+import {svg} from '../../svg.ts';
+
+type Issue = {state: 'open' | 'closed'; pull_request: {draft: boolean; merged: boolean} | null};
+function getIssueIcon(issue: Issue) {
+  if (issue.pull_request !== null) {
+    if (issue.state === 'open') {
+      if (issue.pull_request.draft === true) {
+        return 'octicon-git-pull-request-draft'; // WIP PR
+      }
+      return 'octicon-git-pull-request'; // Open PR
+    } else if (issue.pull_request.merged === true) {
+      return 'octicon-git-merge'; // Merged PR
+    }
+    return 'octicon-git-pull-request'; // Closed PR
+  } else if (issue.state === 'open') {
+    return 'octicon-issue-opened'; // Open Issue
+  }
+  return 'octicon-issue-closed'; // Closed Issue
+}
+
+function getIssueColor(issue: Issue) {
+  if (issue.pull_request !== null) {
+    if (issue.pull_request.draft === true) {
+      return 'grey'; // WIP PR
+    } else if (issue.pull_request.merged === true) {
+      return 'purple'; // Merged PR
+    }
+  }
+  if (issue.state === 'open') {
+    return 'green'; // Open Issue
+  }
+  return 'red'; // Closed Issue
+}
 
 export function initTextExpander(expander) {
-  expander?.addEventListener('text-expander-change', async ({detail: {key, provide, text}}) => {
+  expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
     if (key === ':') {
       const matches = matchEmoji(text);
       if (!matches.length) return provide({matched: false});
@@ -50,29 +83,37 @@ export function initTextExpander(expander) {
 
       provide({matched: true, fragment: ul});
     } else if (key === '#') {
-      const url = window.location.href;
-      const matches = matchIssueOrPullRequest(url, text);
-      if (!matches.length) return provide({matched: false});
+      provide(new Promise(async (resolve) => {
+        const url = window.location.href;
+        const matches = await matchIssue(url, text);
+        if (!matches.length) return resolve({matched: false});
 
-      const ul = document.createElement('ul');
-      ul.classList.add('suggestions');
-      for (const {value, name, type} of matches) {
-        const li = document.createElement('li');
-        li.setAttribute('role', 'option');
-        li.setAttribute('data-value', `${key}${value}`);
+        const ul = document.createElement('ul');
+        ul.classList.add('suggestions');
+        for (const {value, name, issue} of matches) {
+          const li = document.createElement('li');
+          li.classList.add('tw-flex', 'tw-gap-2');
+          li.setAttribute('role', 'option');
+          li.setAttribute('data-value', `${key}${value}`);
 
-        const icon = document.createElement('span');
-        icon.classList.add('icon', type === 'issue' ? 'issue' : 'pull-request');
-        li.append(icon);
+          const icon = document.createElement('div');
+          icon.innerHTML = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' ')).trim();
+          li.append(icon.firstChild);
 
-        const nameSpan = document.createElement('span');
-        nameSpan.textContent = name;
-        li.append(nameSpan);
+          const id = document.createElement('span');
+          id.classList.add('id');
+          id.textContent = value;
+          li.append(id);
 
-        ul.append(li);
-      }
+          const nameSpan = document.createElement('span');
+          nameSpan.textContent = name;
+          li.append(nameSpan);
 
-      provide({matched: true, fragment: ul});
+          ul.append(li);
+        }
+
+        resolve({matched: true, fragment: ul});
+      }));
     }
   });
   expander?.addEventListener('text-expander-value', ({detail}) => {
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 164e7167124b0..b06f551490086 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -44,14 +44,17 @@ export function matchMention(queryText: string): Mention[] {
   return sortAndReduce(results);
 }
 
-type IssueOrPullRequest = {value: string; name: string; type: 'issue' | 'pull-request'};
-export async function matchIssueOrPullRequest(url: string, queryText: string): IssueOrPullRequest[] {
+type Issue = {state: 'open' | 'closed'; pull_request: {draft: boolean; merged: boolean} | null};
+type IssueMention = {value: string; name: string; issue: Issue};
+export async function matchIssue(url: string, queryText: string): Promise<IssueMention[]> {
   const query = queryText.toLowerCase();
 
-  const repository = url.split('/').slice(-2).join('/');
+  // http://localhost:3000/anbraten/test/issues/1
+  // http://localhost:3000/anbraten/test/compare/main...anbraten-patch-1
+  const repository = (new URL(url)).pathname.split('/').slice(1, 3).join('/');
   const issuePullRequestId = url.split('/').slice(-1)[0];
 
-  console.log('suggestions for', {
+  console.log('suggestions for 1', {
     repository,
     query,
   });
@@ -67,7 +70,7 @@ export async function matchIssueOrPullRequest(url: string, queryText: string): I
   // console.log(await res.json());
 
   // results is a map of weights, lower is better
-  const results = new Map<IssueOrPullRequest, number>();
+  const results = new Map<IssueMention, number>();
   // for (const obj of window.config.mentionValues ?? []) {
   //   const index = obj.key.toLowerCase().indexOf(query);
   //   if (index === -1) continue;
@@ -78,33 +81,69 @@ export async function matchIssueOrPullRequest(url: string, queryText: string): I
   results.set({
     value: '28958',
     name: 'Live removal of issue comments using htmx websocket',
-    type: 'pull-request',
+    issue: {
+      state: 'open',
+      pull_request: {
+        merged: false,
+        draft: false,
+      },
+    },
   }, 0);
 
   results.set({
     value: '32234',
     name: 'Calculate `PublicOnly` for org membership only once',
-    type: 'pull-request',
+    issue: {
+      state: 'closed',
+      pull_request: {
+        merged: true,
+        draft: false,
+      },
+    },
   }, 1);
 
   results.set({
     value: '32280',
     name: 'Optimize branch protection rule loading',
-    type: 'pull-request',
+    issue: {
+      state: 'open',
+      pull_request: {
+        merged: false,
+        draft: false,
+      },
+    },
   }, 2);
 
   results.set({
     value: '32326',
     name: 'Shallow Mirroring',
-    type: 'issue',
+    issue: {
+      state: 'open',
+      pull_request: null,
+    },
   }, 3);
 
   results.set({
     value: '32248',
     name: 'Make admins adhere to branch protection rules',
-    type: 'pull-request',
+    issue: {
+      state: 'closed',
+      pull_request: {
+        merged: true,
+        draft: false,
+      },
+    },
   }, 4);
 
+  results.set({
+    value: '32249',
+    name: 'Add a way to disable branch protection rules for admins',
+    issue: {
+      state: 'closed',
+      pull_request: null,
+    },
+  }, 5);
+
   // filter out current issue/pull request
   for (const [key] of results.entries()) {
     if (key.value === issuePullRequestId) {

From 41778d5ab9e3fe9cf80cfba10ac7bd75146b101b Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 23 Oct 2024 15:51:16 +0200
Subject: [PATCH 03/12] get issues from api

---
 web_src/js/features/comp/TextExpander.ts |  14 +--
 web_src/js/utils/match.ts                | 117 +++--------------------
 2 files changed, 19 insertions(+), 112 deletions(-)

diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index bd895bc61f38f..650dbff6fa703 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -2,9 +2,9 @@ import {matchEmoji, matchMention, matchIssue} from '../../utils/match.ts';
 import {emojiString} from '../emoji.ts';
 import {svg} from '../../svg.ts';
 
-type Issue = {state: 'open' | 'closed'; pull_request: {draft: boolean; merged: boolean} | null};
+type Issue = {id: string; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
 function getIssueIcon(issue: Issue) {
-  if (issue.pull_request !== null) {
+  if (issue.pull_request) {
     if (issue.state === 'open') {
       if (issue.pull_request.draft === true) {
         return 'octicon-git-pull-request-draft'; // WIP PR
@@ -21,7 +21,7 @@ function getIssueIcon(issue: Issue) {
 }
 
 function getIssueColor(issue: Issue) {
-  if (issue.pull_request !== null) {
+  if (issue.pull_request) {
     if (issue.pull_request.draft === true) {
       return 'grey'; // WIP PR
     } else if (issue.pull_request.merged === true) {
@@ -90,11 +90,11 @@ export function initTextExpander(expander) {
 
         const ul = document.createElement('ul');
         ul.classList.add('suggestions');
-        for (const {value, name, issue} of matches) {
+        for (const issue of matches) {
           const li = document.createElement('li');
           li.classList.add('tw-flex', 'tw-gap-2');
           li.setAttribute('role', 'option');
-          li.setAttribute('data-value', `${key}${value}`);
+          li.setAttribute('data-value', `${key}${issue.id}`);
 
           const icon = document.createElement('div');
           icon.innerHTML = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' ')).trim();
@@ -102,11 +102,11 @@ export function initTextExpander(expander) {
 
           const id = document.createElement('span');
           id.classList.add('id');
-          id.textContent = value;
+          id.textContent = issue.id;
           li.append(id);
 
           const nameSpan = document.createElement('span');
-          nameSpan.textContent = name;
+          nameSpan.textContent = issue.title;
           li.append(nameSpan);
 
           ul.append(li);
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index b06f551490086..7f349059ec2b2 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -28,12 +28,12 @@ export function matchEmoji(queryText: string): string[] {
   return sortAndReduce(results);
 }
 
-type Mention = {value: string; name: string; fullname: string; avatar: string};
-export function matchMention(queryText: string): Mention[] {
+type MentionSuggestion = {value: string; name: string; fullname: string; avatar: string};
+export function matchMention(queryText: string): MentionSuggestion[] {
   const query = queryText.toLowerCase();
 
   // results is a map of weights, lower is better
-  const results = new Map<Mention, number>();
+  const results = new Map<MentionSuggestion, number>();
   for (const obj of window.config.mentionValues ?? []) {
     const index = obj.key.toLowerCase().indexOf(query);
     if (index === -1) continue;
@@ -44,113 +44,20 @@ export function matchMention(queryText: string): Mention[] {
   return sortAndReduce(results);
 }
 
-type Issue = {state: 'open' | 'closed'; pull_request: {draft: boolean; merged: boolean} | null};
-type IssueMention = {value: string; name: string; issue: Issue};
-export async function matchIssue(url: string, queryText: string): Promise<IssueMention[]> {
+type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
+export async function matchIssue(url: string, queryText: string): Promise<Issue[]> {
   const query = queryText.toLowerCase();
 
-  // http://localhost:3000/anbraten/test/issues/1
-  // http://localhost:3000/anbraten/test/compare/main...anbraten-patch-1
+  // TODO: support sub-path
   const repository = (new URL(url)).pathname.split('/').slice(1, 3).join('/');
-  const issuePullRequestId = url.split('/').slice(-1)[0];
+  const issuePullRequestId = parseInt(url.split('/').slice(-1)[0]);
 
-  console.log('suggestions for 1', {
-    repository,
-    query,
+  const res = await request(`/api/v1/repos/${repository}/issues?q=${query}`, {
+    method: 'GET',
   });
 
-  // TODO: fetch data from api
-  // const res = await request('/-/suggestions', {
-  //   method: 'GET',
-  //   data: {
-  //     repository,
-  //     query,
-  //   },
-  // });
-  // console.log(await res.json());
+  const issues: Issue[] = await res.json();
 
-  // results is a map of weights, lower is better
-  const results = new Map<IssueMention, number>();
-  // for (const obj of window.config.mentionValues ?? []) {
-  //   const index = obj.key.toLowerCase().indexOf(query);
-  //   if (index === -1) continue;
-  //   const existing = results.get(obj);
-  //   results.set(obj, existing ? existing - index : index);
-  // }
-
-  results.set({
-    value: '28958',
-    name: 'Live removal of issue comments using htmx websocket',
-    issue: {
-      state: 'open',
-      pull_request: {
-        merged: false,
-        draft: false,
-      },
-    },
-  }, 0);
-
-  results.set({
-    value: '32234',
-    name: 'Calculate `PublicOnly` for org membership only once',
-    issue: {
-      state: 'closed',
-      pull_request: {
-        merged: true,
-        draft: false,
-      },
-    },
-  }, 1);
-
-  results.set({
-    value: '32280',
-    name: 'Optimize branch protection rule loading',
-    issue: {
-      state: 'open',
-      pull_request: {
-        merged: false,
-        draft: false,
-      },
-    },
-  }, 2);
-
-  results.set({
-    value: '32326',
-    name: 'Shallow Mirroring',
-    issue: {
-      state: 'open',
-      pull_request: null,
-    },
-  }, 3);
-
-  results.set({
-    value: '32248',
-    name: 'Make admins adhere to branch protection rules',
-    issue: {
-      state: 'closed',
-      pull_request: {
-        merged: true,
-        draft: false,
-      },
-    },
-  }, 4);
-
-  results.set({
-    value: '32249',
-    name: 'Add a way to disable branch protection rules for admins',
-    issue: {
-      state: 'closed',
-      pull_request: null,
-    },
-  }, 5);
-
-  // filter out current issue/pull request
-  for (const [key] of results.entries()) {
-    if (key.value === issuePullRequestId) {
-      results.delete(key);
-      break;
-    }
-  }
-
-  return sortAndReduce(results);
+  // filter issue with same id
+  return issues.filter((i) => i.id !== issuePullRequestId);
 }

From 8957d4f12728508b998d6a9fdad195f7a54965dc Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 23 Oct 2024 15:59:04 +0200
Subject: [PATCH 04/12] enhance code

---
 web_src/js/features/comp/TextExpander.ts |  9 +++++----
 web_src/js/utils/match.ts                | 13 +++++--------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index 650dbff6fa703..25f2783603f01 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -1,8 +1,9 @@
 import {matchEmoji, matchMention, matchIssue} from '../../utils/match.ts';
 import {emojiString} from '../emoji.ts';
 import {svg} from '../../svg.ts';
+import {parseIssueHref} from '../../utils.ts';
 
-type Issue = {id: string; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
+type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
 function getIssueIcon(issue: Issue) {
   if (issue.pull_request) {
     if (issue.state === 'open') {
@@ -84,8 +85,8 @@ export function initTextExpander(expander) {
       provide({matched: true, fragment: ul});
     } else if (key === '#') {
       provide(new Promise(async (resolve) => {
-        const url = window.location.href;
-        const matches = await matchIssue(url, text);
+        const {owner, repo, index} = parseIssueHref(window.location.href);
+        const matches = await matchIssue(owner, repo, index, text);
         if (!matches.length) return resolve({matched: false});
 
         const ul = document.createElement('ul');
@@ -102,7 +103,7 @@ export function initTextExpander(expander) {
 
           const id = document.createElement('span');
           id.classList.add('id');
-          id.textContent = issue.id;
+          id.textContent = issue.id.toString();
           li.append(id);
 
           const nameSpan = document.createElement('span');
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 7f349059ec2b2..50abe50e5f5d7 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -1,5 +1,5 @@
 import emojis from '../../../assets/emoji.json';
-import { request } from '../modules/fetch.ts';
+import {request} from '../modules/fetch.ts';
 
 const maxMatches = 6;
 
@@ -45,19 +45,16 @@ export function matchMention(queryText: string): MentionSuggestion[] {
 }
 
 type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
-export async function matchIssue(url: string, queryText: string): Promise<Issue[]> {
+export async function matchIssue(owner: string, repo: string, _issueIndex: string, queryText: string): Promise<Issue[]> {
   const query = queryText.toLowerCase();
 
-  // TODO: support sub-path
-  const repository = (new URL(url)).pathname.split('/').slice(1, 3).join('/');
-  const issuePullRequestId = parseInt(url.split('/').slice(-1)[0]);
-
-  const res = await request(`/api/v1/repos/${repository}/issues?q=${query}`, {
+  const res = await request(`/api/v1/repos/${owner}/${repo}/issues?q=${query}`, {
     method: 'GET',
   });
 
   const issues: Issue[] = await res.json();
+  const issueIndex = parseInt(_issueIndex);
 
   // filter issue with same id
-  return issues.filter((i) => i.id !== issuePullRequestId);
+  return issues.filter((i) => i.id !== issueIndex);
 }

From 7371f262b78302071521dbd4e10f9a37d9569eff Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 23 Oct 2024 16:01:38 +0200
Subject: [PATCH 05/12] use utils

---
 web_src/js/features/comp/TextExpander.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index 25f2783603f01..bb6ef8cf387ba 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -2,6 +2,7 @@ import {matchEmoji, matchMention, matchIssue} from '../../utils/match.ts';
 import {emojiString} from '../emoji.ts';
 import {svg} from '../../svg.ts';
 import {parseIssueHref} from '../../utils.ts';
+import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
 
 type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
 function getIssueIcon(issue: Issue) {
@@ -92,14 +93,14 @@ export function initTextExpander(expander) {
         const ul = document.createElement('ul');
         ul.classList.add('suggestions');
         for (const issue of matches) {
-          const li = document.createElement('li');
+          const li = createElementFromAttrs('li', {
+            role: 'option',
+            'data-value': `${key}${issue.id}`,
+          });
           li.classList.add('tw-flex', 'tw-gap-2');
-          li.setAttribute('role', 'option');
-          li.setAttribute('data-value', `${key}${issue.id}`);
 
-          const icon = document.createElement('div');
-          icon.innerHTML = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' ')).trim();
-          li.append(icon.firstChild);
+          const icon = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' '));
+          li.append(createElementFromHTML(icon));
 
           const id = document.createElement('span');
           id.classList.add('id');

From 546651644fbe4fe159d4036b448493e9cae97920 Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 23 Oct 2024 17:08:48 +0200
Subject: [PATCH 06/12] improve code

---
 package-lock.json                        | 23 ++++--
 package.json                             |  3 +-
 web_src/js/components/ContextPopup.vue   | 37 ++--------
 web_src/js/features/comp/TextExpander.ts | 94 +++++++++---------------
 web_src/js/features/issue.ts             | 32 ++++++++
 web_src/js/utils/match.ts                |  8 +-
 6 files changed, 90 insertions(+), 107 deletions(-)
 create mode 100644 web_src/js/features/issue.ts

diff --git a/package-lock.json b/package-lock.json
index 3da344a23cb51..a2bde7e083834 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@citation-js/plugin-software-formats": "0.6.1",
         "@github/markdown-toolbar-element": "2.2.3",
         "@github/relative-time-element": "4.4.3",
-        "@github/text-expander-element": "2.7.1",
+        "@github/text-expander-element": "2.8.0",
         "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
         "@primer/octicons": "19.11.0",
         "@silverwind/vue3-calendar-heatmap": "2.0.6",
@@ -40,6 +40,7 @@
         "monaco-editor": "0.51.0",
         "monaco-editor-webpack-plugin": "7.1.0",
         "pdfobject": "2.3.0",
+        "perfect-debounce": "1.0.0",
         "postcss": "8.4.41",
         "postcss-loader": "8.1.1",
         "postcss-nesting": "13.0.0",
@@ -3115,13 +3116,13 @@
       "license": "MIT"
     },
     "node_modules/@github/text-expander-element": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.7.1.tgz",
-      "integrity": "sha512-CWxfYxJRkeWVCUhJveproLs6pHsPrWtK8TsjL8ByYVcSCs8CJmNzF8b7ZawrUgfai0F2jb4aIdw2FoBTykj9XA==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.8.0.tgz",
+      "integrity": "sha512-kkS2rZ/CG8HGKblpLDQ8vcK/K7l/Jsvzi/N4ovwPAsFSOImcIbJh2MgCv9tzqE3wAm/qXlscvh3Ms4Hh1vtZvw==",
       "license": "MIT",
       "dependencies": {
         "@github/combobox-nav": "^2.0.2",
-        "dom-input-range": "^1.1.6"
+        "dom-input-range": "^1.2.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
@@ -7409,9 +7410,9 @@
       }
     },
     "node_modules/dom-input-range": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/dom-input-range/-/dom-input-range-1.1.6.tgz",
-      "integrity": "sha512-4o/SkTpscD0n81BeErrrtmE58lG8vTks++92vk//ld0NmkQTb4AVJ2rexh2yor6rtBf5IMte26u+fF3EgCppPQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dom-input-range/-/dom-input-range-1.2.0.tgz",
+      "integrity": "sha512-8HVA5Oy5Vt872S7IXsjjp6/5Hqsm5YZLhurxwwQXp80T9qVsj8/mEUH3sQlFujLLUoWfxiaThHHuJ3/q1MHVuA==",
       "license": "MIT",
       "workspaces": [
         "demos"
@@ -12460,6 +12461,12 @@
       "integrity": "sha512-w/9pXDXTDs3IDmOri/w8lM/w6LHR0/F4fcBLLzH+4csSoyshQ5su0TE7k0FLHZO7aOjVLDGecqd1M89+PVpVAA==",
       "license": "MIT"
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
diff --git a/package.json b/package.json
index 27b63cb2eb7fe..73cb9d3fa54be 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "@citation-js/plugin-software-formats": "0.6.1",
     "@github/markdown-toolbar-element": "2.2.3",
     "@github/relative-time-element": "4.4.3",
-    "@github/text-expander-element": "2.7.1",
+    "@github/text-expander-element": "2.8.0",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "19.11.0",
     "@silverwind/vue3-calendar-heatmap": "2.0.6",
@@ -39,6 +39,7 @@
     "monaco-editor": "0.51.0",
     "monaco-editor-webpack-plugin": "7.1.0",
     "pdfobject": "2.3.0",
+    "perfect-debounce": "1.0.0",
     "postcss": "8.4.41",
     "postcss-loader": "8.1.1",
     "postcss-nesting": "13.0.0",
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 29634128935da..b4982a702039e 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
+import {getIssueColor, getIssueIcon} from '../features/issue.ts';
 
 const {appSubUrl, i18n} = window.config;
 
@@ -25,37 +26,6 @@ export default {
       }
       return body;
     },
-
-    icon() {
-      if (this.issue.pull_request !== null) {
-        if (this.issue.state === 'open') {
-          if (this.issue.pull_request.draft === true) {
-            return 'octicon-git-pull-request-draft'; // WIP PR
-          }
-          return 'octicon-git-pull-request'; // Open PR
-        } else if (this.issue.pull_request.merged === true) {
-          return 'octicon-git-merge'; // Merged PR
-        }
-        return 'octicon-git-pull-request'; // Closed PR
-      } else if (this.issue.state === 'open') {
-        return 'octicon-issue-opened'; // Open Issue
-      }
-      return 'octicon-issue-closed'; // Closed Issue
-    },
-
-    color() {
-      if (this.issue.pull_request !== null) {
-        if (this.issue.pull_request.draft === true) {
-          return 'grey'; // WIP PR
-        } else if (this.issue.pull_request.merged === true) {
-          return 'purple'; // Merged PR
-        }
-      }
-      if (this.issue.state === 'open') {
-        return 'green'; // Open Issue
-      }
-      return 'red'; // Closed Issue
-    },
   },
   mounted() {
     this.$refs.root.addEventListener('ce-load-context-popup', (e) => {
@@ -85,16 +55,19 @@ export default {
         this.loading = false;
       }
     },
+    getIssueColor,
+    getIssueIcon,
   },
 };
 </script>
+
 <template>
   <div ref="root">
     <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
     <div v-if="!loading && issue !== null" class="tw-flex tw-flex-col tw-gap-2">
       <div class="tw-text-12">{{ issue.repository.full_name }} on {{ createdAt }}</div>
       <div class="flex-text-block">
-        <svg-icon :name="icon" :class="['text', color]"/>
+        <svg-icon :name="getIssueColor(issue)" :class="['text', getIssueColor(issue)]"/>
         <span class="issue-title tw-font-semibold tw-break-anywhere">
           {{ issue.title }}
           <span class="index">#{{ issue.number }}</span>
diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index bb6ef8cf387ba..a936775781d40 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -3,38 +3,40 @@ import {emojiString} from '../emoji.ts';
 import {svg} from '../../svg.ts';
 import {parseIssueHref} from '../../utils.ts';
 import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
-
-type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
-function getIssueIcon(issue: Issue) {
-  if (issue.pull_request) {
-    if (issue.state === 'open') {
-      if (issue.pull_request.draft === true) {
-        return 'octicon-git-pull-request-draft'; // WIP PR
-      }
-      return 'octicon-git-pull-request'; // Open PR
-    } else if (issue.pull_request.merged === true) {
-      return 'octicon-git-merge'; // Merged PR
-    }
-    return 'octicon-git-pull-request'; // Closed PR
-  } else if (issue.state === 'open') {
-    return 'octicon-issue-opened'; // Open Issue
+import {getIssueColor, getIssueIcon} from '../issue.ts';
+import {debounce} from 'perfect-debounce';
+
+const debouncedSuggestIssues = debounce((key: string, text: string) => new Promise<{matched:boolean; fragment?: HTMLElement}>(async (resolve) => {
+  const {owner, repo, index} = parseIssueHref(window.location.href);
+  const matches = await matchIssue(owner, repo, index, text);
+  if (!matches.length) return resolve({matched: false});
+
+  const ul = document.createElement('ul');
+  ul.classList.add('suggestions');
+  for (const issue of matches) {
+    const li = createElementFromAttrs('li', {
+      role: 'option',
+      'data-value': `${key}${issue.id}`,
+    });
+    li.classList.add('tw-flex', 'tw-gap-2');
+
+    const icon = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' '));
+    li.append(createElementFromHTML(icon));
+
+    const id = document.createElement('span');
+    id.classList.add('id');
+    id.textContent = issue.id.toString();
+    li.append(id);
+
+    const nameSpan = document.createElement('span');
+    nameSpan.textContent = issue.title;
+    li.append(nameSpan);
+
+    ul.append(li);
   }
-  return 'octicon-issue-closed'; // Closed Issue
-}
 
-function getIssueColor(issue: Issue) {
-  if (issue.pull_request) {
-    if (issue.pull_request.draft === true) {
-      return 'grey'; // WIP PR
-    } else if (issue.pull_request.merged === true) {
-      return 'purple'; // Merged PR
-    }
-  }
-  if (issue.state === 'open') {
-    return 'green'; // Open Issue
-  }
-  return 'red'; // Closed Issue
-}
+  resolve({matched: true, fragment: ul});
+}), 100);
 
 export function initTextExpander(expander) {
   expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
@@ -85,37 +87,7 @@ export function initTextExpander(expander) {
 
       provide({matched: true, fragment: ul});
     } else if (key === '#') {
-      provide(new Promise(async (resolve) => {
-        const {owner, repo, index} = parseIssueHref(window.location.href);
-        const matches = await matchIssue(owner, repo, index, text);
-        if (!matches.length) return resolve({matched: false});
-
-        const ul = document.createElement('ul');
-        ul.classList.add('suggestions');
-        for (const issue of matches) {
-          const li = createElementFromAttrs('li', {
-            role: 'option',
-            'data-value': `${key}${issue.id}`,
-          });
-          li.classList.add('tw-flex', 'tw-gap-2');
-
-          const icon = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' '));
-          li.append(createElementFromHTML(icon));
-
-          const id = document.createElement('span');
-          id.classList.add('id');
-          id.textContent = issue.id.toString();
-          li.append(id);
-
-          const nameSpan = document.createElement('span');
-          nameSpan.textContent = issue.title;
-          li.append(nameSpan);
-
-          ul.append(li);
-        }
-
-        resolve({matched: true, fragment: ul});
-      }));
+      provide(debouncedSuggestIssues(key, text));
     }
   });
   expander?.addEventListener('text-expander-value', ({detail}) => {
diff --git a/web_src/js/features/issue.ts b/web_src/js/features/issue.ts
new file mode 100644
index 0000000000000..a1938a716bc5f
--- /dev/null
+++ b/web_src/js/features/issue.ts
@@ -0,0 +1,32 @@
+export type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
+
+export function getIssueIcon(issue: Issue) {
+  if (issue.pull_request) {
+    if (issue.state === 'open') {
+      if (issue.pull_request.draft === true) {
+        return 'octicon-git-pull-request-draft'; // WIP PR
+      }
+      return 'octicon-git-pull-request'; // Open PR
+    } else if (issue.pull_request.merged === true) {
+      return 'octicon-git-merge'; // Merged PR
+    }
+    return 'octicon-git-pull-request'; // Closed PR
+  } else if (issue.state === 'open') {
+    return 'octicon-issue-opened'; // Open Issue
+  }
+  return 'octicon-issue-closed'; // Closed Issue
+}
+
+export function getIssueColor(issue: Issue) {
+  if (issue.pull_request) {
+    if (issue.pull_request.draft === true) {
+      return 'grey'; // WIP PR
+    } else if (issue.pull_request.merged === true) {
+      return 'purple'; // Merged PR
+    }
+  }
+  if (issue.state === 'open') {
+    return 'green'; // Open Issue
+  }
+  return 'red'; // Closed Issue
+}
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 50abe50e5f5d7..03bb848d57ad3 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -1,5 +1,6 @@
 import emojis from '../../../assets/emoji.json';
-import {request} from '../modules/fetch.ts';
+import type {Issue} from '../features/issue.ts';
+import {GET} from '../modules/fetch.ts';
 
 const maxMatches = 6;
 
@@ -44,13 +45,10 @@ export function matchMention(queryText: string): MentionSuggestion[] {
   return sortAndReduce(results);
 }
 
-type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
 export async function matchIssue(owner: string, repo: string, _issueIndex: string, queryText: string): Promise<Issue[]> {
   const query = queryText.toLowerCase();
 
-  const res = await request(`/api/v1/repos/${owner}/${repo}/issues?q=${query}`, {
-    method: 'GET',
-  });
+  const res = await GET(`/api/v1/repos/${owner}/${repo}/issues?q=${query}`);
 
   const issues: Issue[] = await res.json();
   const issueIndex = parseInt(_issueIndex);

From ea1b18c45d3e19f018c5c43dd0f81077c8b81c75 Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 23 Oct 2024 17:11:22 +0200
Subject: [PATCH 07/12] limit results

---
 web_src/js/utils/match.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 03bb848d57ad3..5166d2acd2dd0 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -48,7 +48,7 @@ export function matchMention(queryText: string): MentionSuggestion[] {
 export async function matchIssue(owner: string, repo: string, _issueIndex: string, queryText: string): Promise<Issue[]> {
   const query = queryText.toLowerCase();
 
-  const res = await GET(`/api/v1/repos/${owner}/${repo}/issues?q=${query}`);
+  const res = await GET(`/api/v1/repos/${owner}/${repo}/issues?q=${query}&limit=5`);
 
   const issues: Issue[] = await res.json();
   const issueIndex = parseInt(_issueIndex);

From f50b4ebbf8b3e369291aad169a8ca98322cf94c7 Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Wed, 23 Oct 2024 22:58:04 +0200
Subject: [PATCH 08/12] use separate endpoint

---
 routers/web/repo/issue_suggestions.go | 78 +++++++++++++++++++++++++++
 routers/web/web.go                    |  3 +-
 web_src/js/utils/match.ts             |  2 +-
 3 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 routers/web/repo/issue_suggestions.go

diff --git a/routers/web/repo/issue_suggestions.go b/routers/web/repo/issue_suggestions.go
new file mode 100644
index 0000000000000..56f7fa616d6e7
--- /dev/null
+++ b/routers/web/repo/issue_suggestions.go
@@ -0,0 +1,78 @@
+package repo
+
+import (
+	"net/http"
+
+	"code.gitea.io/gitea/models/db"
+	issues_model "code.gitea.io/gitea/models/issues"
+	issue_indexer "code.gitea.io/gitea/modules/indexer/issues"
+	"code.gitea.io/gitea/services/context"
+)
+
+type issueSuggestion struct {
+	ID          int64  `json:"id"`
+	Title       string `json:"title"`
+	State       string `json:"state"`
+	PullRequest *struct {
+		Merged bool `json:"merged"`
+		Draft  bool `json:"draft"`
+	} `json:"pull_request,omitempty"`
+}
+
+// IssueSuggestions returns a list of issue suggestions
+func IssueSuggestions(ctx *context.Context) {
+	keyword := ctx.Req.FormValue("q")
+
+	searchOpt := &issue_indexer.SearchOptions{
+		Paginator: &db.ListOptions{
+			Page:     0,
+			PageSize: 5,
+		},
+		Keyword:  keyword,
+		RepoIDs:  []int64{ctx.Repo.Repository.ID},
+		IsPull:   nil,
+		IsClosed: nil,
+		SortBy:   issue_indexer.SortByUpdatedDesc,
+	}
+
+	ids, _, err := issue_indexer.SearchIssues(ctx, searchOpt)
+	if err != nil {
+		ctx.ServerError("SearchIssues", err)
+		return
+	}
+	issues, err := issues_model.GetIssuesByIDs(ctx, ids, true)
+	if err != nil {
+		ctx.ServerError("FindIssuesByIDs", err)
+		return
+	}
+
+	suggestions := make([]*issueSuggestion, 0, len(issues))
+
+	for _, issue := range issues {
+		suggestion := &issueSuggestion{
+			ID:    issue.ID,
+			Title: issue.Title,
+			State: string(issue.State()),
+		}
+
+		if issue.IsPull {
+			if err := issue.LoadPullRequest(ctx); err != nil {
+				ctx.ServerError("LoadPullRequest", err)
+				return
+			}
+			if issue.PullRequest != nil {
+				suggestion.PullRequest = &struct {
+					Merged bool `json:"merged"`
+					Draft  bool `json:"draft"`
+				}{
+					Merged: issue.PullRequest.HasMerged,
+					Draft:  issue.PullRequest.IsWorkInProgress(ctx),
+				}
+			}
+		}
+
+		suggestions = append(suggestions, suggestion)
+	}
+
+	ctx.JSON(http.StatusOK, suggestions)
+}
diff --git a/routers/web/web.go b/routers/web/web.go
index a6ccb7a7924e9..91211d8211561 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -1045,8 +1045,9 @@ func registerRoutes(m *web.Router) {
 		m.Group("/migrate", func() {
 			m.Get("/status", repo.MigrateStatus)
 		})
+		m.Get("/issues/suggestions", repo.IssueSuggestions)
 	}, ignSignIn, context.RepoAssignment, reqRepoCodeReader)
-	// end "/{username}/{reponame}/-": migrate
+	// end "/{username}/{reponame}/-": migrate, issue suggestions
 
 	m.Group("/{username}/{reponame}/settings", func() {
 		m.Group("", func() {
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 5166d2acd2dd0..bed9ce5eaeb5e 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -48,7 +48,7 @@ export function matchMention(queryText: string): MentionSuggestion[] {
 export async function matchIssue(owner: string, repo: string, _issueIndex: string, queryText: string): Promise<Issue[]> {
   const query = queryText.toLowerCase();
 
-  const res = await GET(`/api/v1/repos/${owner}/${repo}/issues?q=${query}&limit=5`);
+  const res = await GET(`/${owner}/${repo}/-/issues/suggestions?q=${query}`);
 
   const issues: Issue[] = await res.json();
   const issueIndex = parseInt(_issueIndex);

From 546593f09c328f2d73965386a695afbd092b0c68 Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Thu, 24 Oct 2024 17:51:39 +0200
Subject: [PATCH 09/12] review

---
 routers/web/repo/issue_suggestions.go    |  6 +++++-
 web_src/js/features/comp/TextExpander.ts |  3 +--
 web_src/js/utils/match.ts                | 10 ++++------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/routers/web/repo/issue_suggestions.go b/routers/web/repo/issue_suggestions.go
index 56f7fa616d6e7..7683ab9cac2a3 100644
--- a/routers/web/repo/issue_suggestions.go
+++ b/routers/web/repo/issue_suggestions.go
@@ -1,7 +1,11 @@
+// Copyright 2024 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
 package repo
 
 import (
 	"net/http"
+	"strings"
 
 	"code.gitea.io/gitea/models/db"
 	issues_model "code.gitea.io/gitea/models/issues"
@@ -21,7 +25,7 @@ type issueSuggestion struct {
 
 // IssueSuggestions returns a list of issue suggestions
 func IssueSuggestions(ctx *context.Context) {
-	keyword := ctx.Req.FormValue("q")
+	keyword := strings.ToLower(ctx.Req.FormValue("q"))
 
 	searchOpt := &issue_indexer.SearchOptions{
 		Paginator: &db.ListOptions{
diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index a936775781d40..6ac4c4bf32c19 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -17,14 +17,13 @@ const debouncedSuggestIssues = debounce((key: string, text: string) => new Promi
     const li = createElementFromAttrs('li', {
       role: 'option',
       'data-value': `${key}${issue.id}`,
+      class: 'tw-flex tw-gap-2',
     });
-    li.classList.add('tw-flex', 'tw-gap-2');
 
     const icon = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' '));
     li.append(createElementFromHTML(icon));
 
     const id = document.createElement('span');
-    id.classList.add('id');
     id.textContent = issue.id.toString();
     li.append(id);
 
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index bed9ce5eaeb5e..818822e31b70f 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -45,14 +45,12 @@ export function matchMention(queryText: string): MentionSuggestion[] {
   return sortAndReduce(results);
 }
 
-export async function matchIssue(owner: string, repo: string, _issueIndex: string, queryText: string): Promise<Issue[]> {
-  const query = queryText.toLowerCase();
-
-  const res = await GET(`/${owner}/${repo}/-/issues/suggestions?q=${query}`);
+export async function matchIssue(owner: string, repo: string, issueIndexStr: string, query: string): Promise<Issue[]> {
+  const res = await GET(`${window.location.origin}${window.config.appSubUrl}/${owner}/${repo}/-/issues/suggestions?q=${encodeURIComponent(query)}`);
 
   const issues: Issue[] = await res.json();
-  const issueIndex = parseInt(_issueIndex);
+  const issueIndex = parseInt(issueIndexStr);
 
-  // filter issue with same id
+  // filter out issue with same id
   return issues.filter((i) => i.id !== issueIndex);
 }

From 573f2574b2fe47568474bd89faf6491c4f1c0a5c Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Thu, 24 Oct 2024 18:13:22 +0200
Subject: [PATCH 10/12] fixes

---
 routers/web/repo/issue_suggestions.go | 3 +--
 web_src/js/utils/match.ts             | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/routers/web/repo/issue_suggestions.go b/routers/web/repo/issue_suggestions.go
index 7683ab9cac2a3..db02fd28bcd02 100644
--- a/routers/web/repo/issue_suggestions.go
+++ b/routers/web/repo/issue_suggestions.go
@@ -5,7 +5,6 @@ package repo
 
 import (
 	"net/http"
-	"strings"
 
 	"code.gitea.io/gitea/models/db"
 	issues_model "code.gitea.io/gitea/models/issues"
@@ -25,7 +24,7 @@ type issueSuggestion struct {
 
 // IssueSuggestions returns a list of issue suggestions
 func IssueSuggestions(ctx *context.Context) {
-	keyword := strings.ToLower(ctx.Req.FormValue("q"))
+	keyword := ctx.Req.FormValue("q")
 
 	searchOpt := &issue_indexer.SearchOptions{
 		Paginator: &db.ListOptions{
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 818822e31b70f..76c38cfffb414 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -46,7 +46,7 @@ export function matchMention(queryText: string): MentionSuggestion[] {
 }
 
 export async function matchIssue(owner: string, repo: string, issueIndexStr: string, query: string): Promise<Issue[]> {
-  const res = await GET(`${window.location.origin}${window.config.appSubUrl}/${owner}/${repo}/-/issues/suggestions?q=${encodeURIComponent(query)}`);
+  const res = await GET(`${window.config.appSubUrl}/${owner}/${repo}/-/issues/suggestions?q=${encodeURIComponent(query)}`);
 
   const issues: Issue[] = await res.json();
   const issueIndex = parseInt(issueIndexStr);

From 5f783c7bf299af76ce7f7d0b6088c56bea32a6c1 Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Fri, 25 Oct 2024 10:27:37 +0200
Subject: [PATCH 11/12] rename route and filter based on permissions

---
 routers/web/repo/issue_suggestions.go | 14 +++++++++++++-
 routers/web/web.go                    |  4 ++--
 web_src/js/utils/match.ts             |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/routers/web/repo/issue_suggestions.go b/routers/web/repo/issue_suggestions.go
index db02fd28bcd02..361da0ee60953 100644
--- a/routers/web/repo/issue_suggestions.go
+++ b/routers/web/repo/issue_suggestions.go
@@ -8,7 +8,9 @@ import (
 
 	"code.gitea.io/gitea/models/db"
 	issues_model "code.gitea.io/gitea/models/issues"
+	"code.gitea.io/gitea/models/unit"
 	issue_indexer "code.gitea.io/gitea/modules/indexer/issues"
+	"code.gitea.io/gitea/modules/optional"
 	"code.gitea.io/gitea/services/context"
 )
 
@@ -26,6 +28,16 @@ type issueSuggestion struct {
 func IssueSuggestions(ctx *context.Context) {
 	keyword := ctx.Req.FormValue("q")
 
+	canReadIssues := ctx.Repo.CanRead(unit.TypeIssues)
+	canReadPulls := ctx.Repo.CanRead(unit.TypePullRequests)
+
+	var isPull optional.Option[bool]
+	if canReadPulls && !canReadIssues {
+		isPull = optional.Some(true)
+	} else if canReadIssues && !canReadPulls {
+		isPull = optional.Some(false)
+	}
+
 	searchOpt := &issue_indexer.SearchOptions{
 		Paginator: &db.ListOptions{
 			Page:     0,
@@ -33,7 +45,7 @@ func IssueSuggestions(ctx *context.Context) {
 		},
 		Keyword:  keyword,
 		RepoIDs:  []int64{ctx.Repo.Repository.ID},
-		IsPull:   nil,
+		IsPull:   isPull,
 		IsClosed: nil,
 		SortBy:   issue_indexer.SortByUpdatedDesc,
 	}
diff --git a/routers/web/web.go b/routers/web/web.go
index 91211d8211561..83d116babd769 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -1045,9 +1045,8 @@ func registerRoutes(m *web.Router) {
 		m.Group("/migrate", func() {
 			m.Get("/status", repo.MigrateStatus)
 		})
-		m.Get("/issues/suggestions", repo.IssueSuggestions)
 	}, ignSignIn, context.RepoAssignment, reqRepoCodeReader)
-	// end "/{username}/{reponame}/-": migrate, issue suggestions
+	// end "/{username}/{reponame}/-": migrate
 
 	m.Group("/{username}/{reponame}/settings", func() {
 		m.Group("", func() {
@@ -1179,6 +1178,7 @@ func registerRoutes(m *web.Router) {
 				})
 			})
 		}, context.RepoRef())
+		m.Get("/issues/suggestions", repo.IssueSuggestions)
 	}, ignSignIn, context.RepoAssignment, reqRepoIssuesOrPullsReader)
 	// end "/{username}/{reponame}": view milestone, label, issue, pull, etc
 
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 76c38cfffb414..2c7271f16eee5 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -46,7 +46,7 @@ export function matchMention(queryText: string): MentionSuggestion[] {
 }
 
 export async function matchIssue(owner: string, repo: string, issueIndexStr: string, query: string): Promise<Issue[]> {
-  const res = await GET(`${window.config.appSubUrl}/${owner}/${repo}/-/issues/suggestions?q=${encodeURIComponent(query)}`);
+  const res = await GET(`${window.config.appSubUrl}/${owner}/${repo}/issues/suggestions?q=${encodeURIComponent(query)}`);
 
   const issues: Issue[] = await res.json();
   const issueIndex = parseInt(issueIndexStr);

From 91742ec26a31983f8167b7d4a21f991ebfea9b13 Mon Sep 17 00:00:00 2001
From: Anbraten <anton@ju60.de>
Date: Tue, 29 Oct 2024 07:10:17 +0100
Subject: [PATCH 12/12] reuse type

---
 web_src/js/features/issue.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/features/issue.ts b/web_src/js/features/issue.ts
index a1938a716bc5f..a56015a2a25bc 100644
--- a/web_src/js/features/issue.ts
+++ b/web_src/js/features/issue.ts
@@ -1,4 +1,4 @@
-export type Issue = {id: number; title: string; state: 'open' | 'closed'; pull_request?: {draft: boolean; merged: boolean}};
+import type {Issue} from '../types.ts';
 
 export function getIssueIcon(issue: Issue) {
   if (issue.pull_request) {