add ui

Author: anbraten

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}) => {

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) {