feat: add issue suggestions

web_src/js/features/comp/TextExpander.js

@@ -1,5 +1,41 @@
-import {matchEmoji, matchMention} from '../../utils/match.js';
+import {matchEmoji, matchMention, matchIssue} from '../../utils/match.js';
 import {emojiString} from '../emoji.js';
+import {getIssueIcon, getIssueColor} from '../issue.js'
+import {parseIssueHref} from '../../utils.js'
+import {svg} from '../../svg.js'
+import {createElementFromHTML} from '../../utils/dom.js';
+import {debounce} from 'perfect-debounce';
+
+const debouncedSuggestIssues = debounce((key, text) => new Promise(
+  async (resolve, reject) => {
+  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 = document.createElement('li');
+    li.setAttribute('role', 'option');
+    li.setAttribute('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.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});
+}), 100)
 
 export function initTextExpander(expander) {
   expander?.addEventListener('text-expander-change', ({detail: {key, provide, text}}) => {
@@ -49,12 +85,14 @@ export function initTextExpander(expander) {
       }
 
       provide({matched: true, fragment: ul});
+    } else if (key === '#') {
+      provide(debouncedSuggestIssues(key, text));
     }
   });
   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}`;
     }
   });

web_src/js/features/issue.js

@@ -0,0 +1,30 @@
+export function getIssueIcon(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) {
+    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
+  }

web_src/js/utils/match.js

@@ -1,4 +1,6 @@
 import emojis from '../../../assets/emoji.json';
+import {GET} from '../modules/fetch.js';
+
 
 const maxMatches = 6;
 
@@ -41,3 +43,13 @@ export function matchMention(queryText) {
 
   return sortAndReduce(results);
 }
+
+export async function matchIssue(owner, repo, issueIndexStr, query) {
+  const res = await GET(`${window.config.appSubUrl}/${owner}/${repo}/issues/suggestions?q=${encodeURIComponent(query)}`);
+
+  const issues = await res.json();
+  const issueIndex = parseInt(issueIndexStr);
+
+  // filter out issue with same id
+  return issues.filter((i) => i.id !== issueIndex);
+}