Merge branch 'main' into lunny/issue_dev

web_src/css/repo/home.css

@@ -20,7 +20,7 @@
   grid-row: 2;
   padding-left: 1em;
 }
-.repo-home-sidebar-bottom > :first-child {
+.repo-home-sidebar-bottom .flex-list > :first-child {
   border-top: 1px solid var(--color-secondary); /* same to .flex-list > .flex-item + .flex-item */
 }
 
@@ -43,7 +43,7 @@
     grid-row: 3;
     padding-left: 0;
   }
-  .repo-home-sidebar-bottom > :first-child {
+  .repo-home-sidebar-bottom .flex-list > :first-child {
     border-top: 0;
   }
 }

web_src/js/components/RepoActionView.vue

@@ -16,8 +16,27 @@ type LogLine = {
   message: string;
 };
 
-const LogLinePrefixGroup = '::group::';
-const LogLinePrefixEndGroup = '::endgroup::';
+const LogLinePrefixesGroup = ['::group::', '##[group]'];
+const LogLinePrefixesEndGroup = ['::endgroup::', '##[endgroup]'];
+
+type LogLineCommand = {
+  name: 'group' | 'endgroup',
+  prefix: string,
+}
+
+function parseLineCommand(line: LogLine): LogLineCommand | null {
+  for (const prefix of LogLinePrefixesGroup) {
+    if (line.message.startsWith(prefix)) {
+      return {name: 'group', prefix};
+    }
+  }
+  for (const prefix of LogLinePrefixesEndGroup) {
+    if (line.message.startsWith(prefix)) {
+      return {name: 'endgroup', prefix};
+    }
+  }
+  return null;
+}
 
 const sfc = {
   name: 'RepoActionView',
@@ -129,13 +148,13 @@ const sfc = {
       return el._stepLogsActiveContainer ?? el;
     },
     // begin a log group
-    beginLogGroup(stepIndex: number, startTime: number, line: LogLine) {
+    beginLogGroup(stepIndex: number, startTime: number, line: LogLine, cmd: LogLineCommand) {
       const el = this.$refs.logs[stepIndex];
       const elJobLogGroupSummary = createElementFromAttrs('summary', {class: 'job-log-group-summary'},
         this.createLogLine(stepIndex, startTime, {
           index: line.index,
           timestamp: line.timestamp,
-          message: line.message.substring(LogLinePrefixGroup.length),
+          message: line.message.substring(cmd.prefix.length),
         }),
       );
       const elJobLogList = createElementFromAttrs('div', {class: 'job-log-list'});
@@ -147,13 +166,13 @@ const sfc = {
       el._stepLogsActiveContainer = elJobLogList;
     },
     // end a log group
-    endLogGroup(stepIndex: number, startTime: number, line: LogLine) {
+    endLogGroup(stepIndex: number, startTime: number, line: LogLine, cmd: LogLineCommand) {
       const el = this.$refs.logs[stepIndex];
       el._stepLogsActiveContainer = null;
       el.append(this.createLogLine(stepIndex, startTime, {
         index: line.index,
         timestamp: line.timestamp,
-        message: line.message.substring(LogLinePrefixEndGroup.length),
+        message: line.message.substring(cmd.prefix.length),
       }));
     },
 
@@ -201,11 +220,12 @@ const sfc = {
     appendLogs(stepIndex: number, startTime: number, logLines: LogLine[]) {
       for (const line of logLines) {
         const el = this.getLogsContainer(stepIndex);
-        if (line.message.startsWith(LogLinePrefixGroup)) {
-          this.beginLogGroup(stepIndex, startTime, line);
+        const cmd = parseLineCommand(line);
+        if (cmd?.name === 'group') {
+          this.beginLogGroup(stepIndex, startTime, line, cmd);
           continue;
-        } else if (line.message.startsWith(LogLinePrefixEndGroup)) {
-          this.endLogGroup(stepIndex, startTime, line);
+        } else if (cmd?.name === 'endgroup') {
+          this.endLogGroup(stepIndex, startTime, line, cmd);
           continue;
         }
         el.append(this.createLogLine(stepIndex, startTime, line));
@@ -393,7 +413,7 @@ export function initRepositoryActionView() {
         <button class="ui basic small compact button red" @click="cancelRun()" v-else-if="run.canCancel">
           {{ locale.cancel }}
         </button>
-        <button class="ui basic small compact button tw-mr-0 tw-whitespace-nowrap link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
+        <button class="ui basic small compact button link-action" :data-url="`${run.link}/rerun`" v-else-if="run.canRerun">
           {{ locale.rerun_all }}
         </button>
       </div>
@@ -539,6 +559,11 @@ export function initRepositoryActionView() {
   overflow-wrap: anywhere;
 }
 
+.action-info-summary .ui.button {
+  margin: 0;
+  white-space: nowrap;
+}
+
 .action-commit-summary {
   display: flex;
   flex-wrap: wrap;

web_src/js/features/codeeditor.ts

@@ -1,11 +1,30 @@
 import tinycolor from 'tinycolor2';
 import {basename, extname, isObject, isDarkTheme} from '../utils.ts';
 import {onInputDebounce} from '../utils/dom.ts';
+import type MonacoNamespace from 'monaco-editor';
 
-const languagesByFilename = {};
-const languagesByExt = {};
+type Monaco = typeof MonacoNamespace;
+type IStandaloneCodeEditor = MonacoNamespace.editor.IStandaloneCodeEditor;
+type IEditorOptions = MonacoNamespace.editor.IEditorOptions;
+type IGlobalEditorOptions = MonacoNamespace.editor.IGlobalEditorOptions;
+type ITextModelUpdateOptions = MonacoNamespace.editor.ITextModelUpdateOptions;
+type MonacoOpts = IEditorOptions & IGlobalEditorOptions & ITextModelUpdateOptions;
 
-const baseOptions = {
+type EditorConfig = {
+  indent_style?: 'tab' | 'space',
+  indent_size?: string | number, // backend emits this as string
+  tab_width?: string | number, // backend emits this as string
+  end_of_line?: 'lf' | 'cr' | 'crlf',
+  charset?: 'latin1' | 'utf-8' | 'utf-8-bom' | 'utf-16be' | 'utf-16le',
+  trim_trailing_whitespace?: boolean,
+  insert_final_newline?: boolean,
+  root?: boolean,
+}
+
+const languagesByFilename: Record<string, string> = {};
+const languagesByExt: Record<string, string> = {};
+
+const baseOptions: MonacoOpts = {
   fontFamily: 'var(--fonts-monospace)',
   fontSize: 14, // https://github.com/microsoft/monaco-editor/issues/2242
   guides: {bracketPairs: false, indentation: false},
@@ -15,21 +34,23 @@ const baseOptions = {
   overviewRulerLanes: 0,
   renderLineHighlight: 'all',
   renderLineHighlightOnlyWhenFocus: true,
-  rulers: false,
+  rulers: [],
   scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
   scrollBeyondLastLine: false,
   automaticLayout: true,
 };
 
-function getEditorconfig(input: HTMLInputElement) {
+function getEditorconfig(input: HTMLInputElement): EditorConfig | null {
+  const json = input.getAttribute('data-editorconfig');
+  if (!json) return null;
   try {
-    return JSON.parse(input.getAttribute('data-editorconfig'));
+    return JSON.parse(json);
   } catch {
     return null;
   }
 }
 
-function initLanguages(monaco) {
+function initLanguages(monaco: Monaco): void {
   for (const {filenames, extensions, id} of monaco.languages.getLanguages()) {
     for (const filename of filenames || []) {
       languagesByFilename[filename] = id;
@@ -40,35 +61,26 @@ function initLanguages(monaco) {
   }
 }
 
-function getLanguage(filename) {
+function getLanguage(filename: string): string {
   return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext';
 }
 
-function updateEditor(monaco, editor, filename, lineWrapExts) {
+function updateEditor(monaco: Monaco, editor: IStandaloneCodeEditor, filename: string, lineWrapExts: string[]): void {
   editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
   const model = editor.getModel();
+  if (!model) return;
   const language = model.getLanguageId();
   const newLanguage = getLanguage(filename);
   if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
 }
 
 // export editor for customization - https://github.com/go-gitea/gitea/issues/10409
-function exportEditor(editor) {
+function exportEditor(editor: IStandaloneCodeEditor): void {
   if (!window.codeEditors) window.codeEditors = [];
   if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
 }
 
-export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, editorOpts: Record<string, any>) {
-  const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
-
-  initLanguages(monaco);
-  let {language, ...other} = editorOpts;
-  if (!language) language = getLanguage(filename);
-
-  const container = document.createElement('div');
-  container.className = 'monaco-editor-container';
-  textarea.parentNode.append(container);
-
+function updateTheme(monaco: Monaco): void {
   // https://github.com/microsoft/monaco-editor/issues/2427
   // also, monaco can only parse 6-digit hex colors, so we convert the colors to that format
   const styles = window.getComputedStyle(document.documentElement);
@@ -80,6 +92,7 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
     rules: [
       {
         background: getColor('--color-code-bg'),
+        token: '',
       },
     ],
     colors: {
@@ -101,6 +114,26 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
       'focusBorder': '#0000', // prevent blue border
     },
   });
+}
+
+type CreateMonacoOpts = MonacoOpts & {language?: string};
+
+export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, opts: CreateMonacoOpts): Promise<{monaco: Monaco, editor: IStandaloneCodeEditor}> {
+  const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
+
+  initLanguages(monaco);
+  let {language, ...other} = opts;
+  if (!language) language = getLanguage(filename);
+
+  const container = document.createElement('div');
+  container.className = 'monaco-editor-container';
+  if (!textarea.parentNode) throw new Error('Parent node absent');
+  textarea.parentNode.append(container);
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    updateTheme(monaco);
+  });
+  updateTheme(monaco);
 
   const editor = monaco.editor.create(container, {
     value: textarea.value,
@@ -114,8 +147,12 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
   ]);
 
   const model = editor.getModel();
+  if (!model) throw new Error('Unable to get editor model');
   model.onDidChangeContent(() => {
-    textarea.value = editor.getValue({preserveBOM: true});
+    textarea.value = editor.getValue({
+      preserveBOM: true,
+      lineEnding: '',
+    });
     textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure
   });
 
@@ -127,13 +164,13 @@ export async function createMonaco(textarea: HTMLTextAreaElement, filename: stri
   return {monaco, editor};
 }
 
-function getFileBasedOptions(filename: string, lineWrapExts: string[]) {
+function getFileBasedOptions(filename: string, lineWrapExts: string[]): MonacoOpts {
   return {
     wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
   };
 }
 
-function togglePreviewDisplay(previewable: boolean) {
+function togglePreviewDisplay(previewable: boolean): void {
   const previewTab = document.querySelector<HTMLElement>('a[data-tab="preview"]');
   if (!previewTab) return;
 
@@ -145,19 +182,19 @@ function togglePreviewDisplay(previewable: boolean) {
     // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
     if (previewTab.classList.contains('active')) {
       const writeTab = document.querySelector<HTMLElement>('a[data-tab="write"]');
-      writeTab.click();
+      writeTab?.click();
     }
   }
 }
 
-export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput: HTMLInputElement) {
+export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput: HTMLInputElement): Promise<IStandaloneCodeEditor> {
   const filename = basename(filenameInput.value);
   const previewableExts = new Set((textarea.getAttribute('data-previewable-extensions') || '').split(','));
   const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(',');
-  const previewable = previewableExts.has(extname(filename));
+  const isPreviewable = previewableExts.has(extname(filename));
   const editorConfig = getEditorconfig(filenameInput);
 
-  togglePreviewDisplay(previewable);
+  togglePreviewDisplay(isPreviewable);
 
   const {monaco, editor} = await createMonaco(textarea, filename, {
     ...baseOptions,
@@ -175,14 +212,22 @@ export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameIn
   return editor;
 }
 
-function getEditorConfigOptions(ec: Record<string, any>): Record<string, any> {
-  if (!isObject(ec)) return {};
+function getEditorConfigOptions(ec: EditorConfig | null): MonacoOpts {
+  if (!ec || !isObject(ec)) return {};
 
-  const opts: Record<string, any> = {};
+  const opts: MonacoOpts = {};
   opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
-  if ('indent_size' in ec) opts.indentSize = Number(ec.indent_size);
-  if ('tab_width' in ec) opts.tabSize = Number(ec.tab_width) || opts.indentSize;
-  if ('max_line_length' in ec) opts.rulers = [Number(ec.max_line_length)];
+
+  if ('indent_size' in ec) {
+    opts.indentSize = Number(ec.indent_size);
+  }
+  if ('tab_width' in ec) {
+    opts.tabSize = Number(ec.tab_width) || Number(ec.indent_size);
+  }
+  if ('max_line_length' in ec) {
+    opts.rulers = [Number(ec.max_line_length)];
+  }
+
   opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
   opts.insertSpaces = ec.indent_style === 'space';
   opts.useTabStops = ec.indent_style === 'tab';

web_src/js/features/repo-issue-list.ts

@@ -1,17 +1,17 @@
-import $ from 'jquery';
 import {updateIssuesMeta} from './repo-common.ts';
-import {toggleElem, hideElem, isElemHidden} from '../utils/dom.ts';
+import {toggleElem, hideElem, isElemHidden, queryElems} from '../utils/dom.ts';
 import {htmlEscape} from 'escape-goat';
 import {confirmModal} from './comp/ConfirmModal.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {createSortable} from '../modules/sortable.ts';
 import {DELETE, POST} from '../modules/fetch.ts';
 import {parseDom} from '../utils.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 function initRepoIssueListCheckboxes() {
-  const issueSelectAll = document.querySelector('.issue-checkbox-all');
+  const issueSelectAll = document.querySelector<HTMLInputElement>('.issue-checkbox-all');
   if (!issueSelectAll) return; // logged out state
-  const issueCheckboxes = document.querySelectorAll('.issue-checkbox');
+  const issueCheckboxes = document.querySelectorAll<HTMLInputElement>('.issue-checkbox');
 
   const syncIssueSelectionState = () => {
     const checkedCheckboxes = Array.from(issueCheckboxes).filter((el) => el.checked);
@@ -29,8 +29,8 @@ function initRepoIssueListCheckboxes() {
       issueSelectAll.indeterminate = false;
     }
     // if any issue is selected, show the action panel, otherwise show the filter panel
-    toggleElem($('#issue-filters'), !anyChecked);
-    toggleElem($('#issue-actions'), anyChecked);
+    toggleElem('#issue-filters', !anyChecked);
+    toggleElem('#issue-actions', anyChecked);
     // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
     const panels = document.querySelectorAll('#issue-filters, #issue-actions');
     const visiblePanel = Array.from(panels).find((el) => !isElemHidden(el));
@@ -49,56 +49,55 @@ function initRepoIssueListCheckboxes() {
     syncIssueSelectionState();
   });
 
-  $('.issue-action').on('click', async function (e) {
-    e.preventDefault();
+  queryElems(document, '.issue-action', (el) => el.addEventListener('click',
+    async (e: MouseEvent) => {
+      e.preventDefault();
 
-    const url = this.getAttribute('data-url');
-    let action = this.getAttribute('data-action');
-    let elementId = this.getAttribute('data-element-id');
-    let issueIDs = [];
-    for (const el of document.querySelectorAll('.issue-checkbox:checked')) {
-      issueIDs.push(el.getAttribute('data-issue-id'));
-    }
-    issueIDs = issueIDs.join(',');
-    if (!issueIDs) return;
-
-    // for assignee
-    if (elementId === '0' && url.endsWith('/assignee')) {
-      elementId = '';
-      action = 'clear';
-    }
-
-    // for toggle
-    if (action === 'toggle' && e.altKey) {
-      action = 'toggle-alt';
-    }
-
-    // for delete
-    if (action === 'delete') {
-      const confirmText = e.target.getAttribute('data-action-delete-confirm');
-      if (!await confirmModal({content: confirmText, confirmButtonColor: 'red'})) {
-        return;
+      const url = el.getAttribute('data-url');
+      let action = el.getAttribute('data-action');
+      let elementId = el.getAttribute('data-element-id');
+      const issueIDList: string[] = [];
+      for (const el of document.querySelectorAll('.issue-checkbox:checked')) {
+        issueIDList.push(el.getAttribute('data-issue-id'));
       }
-    }
+      const issueIDs = issueIDList.join(',');
+      if (!issueIDs) return;
 
-    try {
-      await updateIssuesMeta(url, action, issueIDs, elementId);
-      window.location.reload();
-    } catch (err) {
-      showErrorToast(err.responseJSON?.error ?? err.message);
-    }
-  });
+      // for assignee
+      if (elementId === '0' && url.endsWith('/assignee')) {
+        elementId = '';
+        action = 'clear';
+      }
+
+      // for toggle
+      if (action === 'toggle' && e.altKey) {
+        action = 'toggle-alt';
+      }
+
+      // for delete
+      if (action === 'delete') {
+        const confirmText = el.getAttribute('data-action-delete-confirm');
+        if (!await confirmModal({content: confirmText, confirmButtonColor: 'red'})) {
+          return;
+        }
+      }
+
+      try {
+        await updateIssuesMeta(url, action, issueIDs, elementId);
+        window.location.reload();
+      } catch (err) {
+        showErrorToast(err.responseJSON?.error ?? err.message);
+      }
+    },
+  ));
 }
 
-function initRepoIssueListAuthorDropdown() {
-  const $searchDropdown = $('.user-remote-search');
-  if (!$searchDropdown.length) return;
-
-  let searchUrl = $searchDropdown[0].getAttribute('data-search-url');
-  const actionJumpUrl = $searchDropdown[0].getAttribute('data-action-jump-url');
-  const selectedUserId = $searchDropdown[0].getAttribute('data-selected-user-id');
+function initDropdownUserRemoteSearch(el: Element) {
+  let searchUrl = el.getAttribute('data-search-url');
+  const actionJumpUrl = el.getAttribute('data-action-jump-url');
+  const selectedUserId = el.getAttribute('data-selected-user-id');
   if (!searchUrl.includes('?')) searchUrl += '?';
-
+  const $searchDropdown = fomanticQuery(el);
   $searchDropdown.dropdown('setting', {
     fullTextSearch: true,
     selectOnKeydown: false,
@@ -111,14 +110,14 @@ function initRepoIssueListAuthorDropdown() {
         for (const item of resp.results) {
           let html = `<img class="ui avatar tw-align-middle" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
           if (item.full_name) html += `<span class="search-fullname tw-ml-2">${htmlEscape(item.full_name)}</span>`;
-          processedResults.push({value: item.user_id, name: html});
+          processedResults.push({value: item.username, name: html});
         }
         resp.results = processedResults;
         return resp;
       },
     },
     action: (_text, value) => {
-      window.location.href = actionJumpUrl.replace('{user_id}', encodeURIComponent(value));
+      window.location.href = actionJumpUrl.replace('{username}', encodeURIComponent(value));
     },
     onShow: () => {
       $searchDropdown.dropdown('filter', ' '); // trigger a search on first show
@@ -160,7 +159,7 @@ function initRepoIssueListAuthorDropdown() {
 function initPinRemoveButton() {
   for (const button of document.querySelectorAll('.issue-card-unpin')) {
     button.addEventListener('click', async (event) => {
-      const el = event.currentTarget;
+      const el = event.currentTarget as HTMLElement;
       const id = Number(el.getAttribute('data-issue-id'));
 
       // Send the unpin request
@@ -205,10 +204,8 @@ async function initIssuePinSort() {
 }
 
 function initArchivedLabelFilter() {
-  const archivedLabelEl = document.querySelector('#archived-filter-checkbox');
-  if (!archivedLabelEl) {
-    return;
-  }
+  const archivedLabelEl = document.querySelector<HTMLInputElement>('#archived-filter-checkbox');
+  if (!archivedLabelEl) return;
 
   const url = new URL(window.location.href);
   const archivedLabels = document.querySelectorAll('[data-is-archived]');
@@ -219,7 +216,7 @@ function initArchivedLabelFilter() {
   }
   const selectedLabels = (url.searchParams.get('labels') || '')
     .split(',')
-    .map((id) => id < 0 ? `${~id + 1}` : id); // selectedLabels contains -ve ids, which are excluded so convert any -ve value id to +ve
+    .map((id) => parseInt(id) < 0 ? `${~id + 1}` : id); // selectedLabels contains -ve ids, which are excluded so convert any -ve value id to +ve
 
   const archivedElToggle = () => {
     for (const label of archivedLabels) {
@@ -241,9 +238,9 @@ function initArchivedLabelFilter() {
 }
 
 export function initRepoIssueList() {
-  if (!document.querySelectorAll('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list').length) return;
+  if (!document.querySelector('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list')) return;
   initRepoIssueListCheckboxes();
-  initRepoIssueListAuthorDropdown();
+  queryElems(document, '.ui.dropdown.user-remote-search', (el) => initDropdownUserRemoteSearch(el));
   initIssuePinSort();
   initArchivedLabelFilter();
 }

web_src/js/features/repo-issue.ts

@@ -8,6 +8,7 @@ import {parseIssuePageInfo, toAbsoluteUrl} from '../utils.ts';
 import {GET, POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
 
 const {appSubUrl} = window.config;
 
@@ -31,34 +32,35 @@ export function initRepoIssueSidebarList() {
   if (crossRepoSearch === 'true') {
     issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${issuePageInfo.repoId}&type=${issuePageInfo.issueDependencySearchType}`;
   }
-  $('#new-dependency-drop-list')
-    .dropdown({
-      apiSettings: {
-        url: issueSearchUrl,
-        onResponse(response) {
-          const filteredResponse = {success: true, results: []};
-          const currIssueId = $('#new-dependency-drop-list').data('issue-id');
-          // Parse the response from the api to work with our dropdown
-          $.each(response, (_i, issue) => {
-            // Don't list current issue in the dependency list.
-            if (issue.id === currIssueId) {
-              return;
-            }
-            filteredResponse.results.push({
-              name: `<div class="gt-ellipsis">#${issue.number} ${htmlEscape(issue.title)}</div>
+  fomanticQuery('#new-dependency-drop-list').dropdown({
+    fullTextSearch: true,
+    apiSettings: {
+      url: issueSearchUrl,
+      onResponse(response) {
+        const filteredResponse = {success: true, results: []};
+        const currIssueId = $('#new-dependency-drop-list').data('issue-id');
+        // Parse the response from the api to work with our dropdown
+        $.each(response, (_i, issue) => {
+          // Don't list current issue in the dependency list.
+          if (issue.id === currIssueId) {
+            return;
+          }
+          filteredResponse.results.push({
+            name: `<div class="gt-ellipsis">#${issue.number} ${htmlEscape(issue.title)}</div>
 <div class="text small tw-break-anywhere">${htmlEscape(issue.repository.full_name)}</div>`,
-              value: issue.id,
-            });
+            value: issue.id,
           });
-          return filteredResponse;
-        },
-        cache: false,
+        });
+        return filteredResponse;
       },
+      cache: false,
+    },
+  });
+}
 
-      fullTextSearch: true,
-    });
-
-  $('.menu a.label-filter-item').each(function () {
+export function initRepoIssueLabelFilter() {
+  // the "label-filter" is used in 2 templates: projects/view, issue/filter_list (issue list page including the milestone page)
+  $('.ui.dropdown.label-filter a.label-filter-item').each(function () {
     $(this).on('click', function (e) {
       if (e.altKey) {
         e.preventDefault();
@@ -66,11 +68,9 @@ export function initRepoIssueSidebarList() {
       }
     });
   });
-
-  // FIXME: it is wrong place to init ".ui.dropdown.label-filter"
-  $('.menu .ui.dropdown.label-filter').on('keydown', (e) => {
+  $('.ui.dropdown.label-filter').on('keydown', (e) => {
     if (e.altKey && e.key === 'Enter') {
-      const selectedItem = document.querySelector('.menu .ui.dropdown.label-filter .menu .item.selected');
+      const selectedItem = document.querySelector('.ui.dropdown.label-filter .menu .item.selected');
       if (selectedItem) {
         excludeLabel(selectedItem);
       }

web_src/js/index.ts

@@ -29,7 +29,7 @@ import {
   initRepoIssueWipTitle,
   initRepoPullRequestMergeInstruction,
   initRepoPullRequestAllowMaintainerEdit,
-  initRepoPullRequestReview, initRepoIssueSidebarList,
+  initRepoPullRequestReview, initRepoIssueSidebarList, initRepoIssueLabelFilter,
 } from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
 import {initRepoTopicBar} from './features/repo-home.ts';
@@ -181,6 +181,7 @@ onDomReady(() => {
     initRepoGraphGit,
     initRepoIssueContentHistory,
     initRepoIssueList,
+    initRepoIssueLabelFilter,
     initRepoIssueSidebarList,
     initRepoIssueReferenceRepositorySearch,
     initRepoIssueWipTitle,

web_src/js/modules/fomantic/dropdown.test.ts

@@ -0,0 +1,56 @@
+import {createElementFromHTML} from '../../utils/dom.ts';
+import {hideScopedEmptyDividers} from './dropdown.ts';
+
+test('hideScopedEmptyDividers-simple', () => {
+  const container = createElementFromHTML(`<div>
+<div class="divider"></div>
+<div class="item">a</div>
+<div class="divider"></div>
+<div class="divider"></div>
+<div class="divider"></div>
+<div class="item">b</div>
+<div class="divider"></div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="divider hidden transition"></div>
+<div class="item">a</div>
+<div class="divider hidden transition"></div>
+<div class="divider hidden transition"></div>
+<div class="divider"></div>
+<div class="item">b</div>
+<div class="divider hidden transition"></div>
+`);
+});
+
+test('hideScopedEmptyDividers-hidden1', () => {
+  const container = createElementFromHTML(`<div>
+<div class="item">a</div>
+<div class="divider" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="item">a</div>
+<div class="divider hidden transition" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+`);
+});
+
+test('hideScopedEmptyDividers-hidden2', () => {
+  const container = createElementFromHTML(`<div>
+<div class="item" data-scope="">a</div>
+<div class="divider" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+<div class="divider" data-scope=""></div>
+<div class="item" data-scope="">c</div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="item" data-scope="">a</div>
+<div class="divider hidden transition" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+<div class="divider hidden transition" data-scope=""></div>
+<div class="item" data-scope="">c</div>
+`);
+});

web_src/js/modules/fomantic/dropdown.ts

@@ -59,6 +59,12 @@ function updateSelectionLabel(label: HTMLElement) {
   }
 }
 
+function processMenuItems($dropdown, dropdownCall) {
+  const hideEmptyDividers = dropdownCall('setting', 'hideDividers') === 'empty';
+  const itemsMenu = $dropdown[0].querySelector('.scrolling.menu') || $dropdown[0].querySelector('.menu');
+  if (hideEmptyDividers) hideScopedEmptyDividers(itemsMenu);
+}
+
 // delegate the dropdown's template functions and callback functions to add aria attributes.
 function delegateOne($dropdown: any) {
   const dropdownCall = fomanticDropdownFn.bind($dropdown);
@@ -72,6 +78,18 @@ function delegateOne($dropdown: any) {
   // * If the "dropdown icon" is clicked again when the menu is visible, Fomantic calls "blurSearch", so hide the menu
   dropdownCall('internal', 'blurSearch', function () { oldBlurSearch.call(this); dropdownCall('hide') });
 
+  const oldFilterItems = dropdownCall('internal', 'filterItems');
+  dropdownCall('internal', 'filterItems', function (...args: any[]) {
+    oldFilterItems.call(this, ...args);
+    processMenuItems($dropdown, dropdownCall);
+  });
+
+  const oldShow = dropdownCall('internal', 'show');
+  dropdownCall('internal', 'show', function (...args: any[]) {
+    oldShow.call(this, ...args);
+    processMenuItems($dropdown, dropdownCall);
+  });
+
   // the "template" functions are used for dynamic creation (eg: AJAX)
   const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()};
   const dropdownTemplatesMenuOld = dropdownTemplates.menu;
@@ -271,3 +289,65 @@ function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HT
     ignoreClickPreEvents = ignoreClickPreVisible = 0;
   }, true);
 }
+
+// Although Fomantic Dropdown supports "hideDividers", it doesn't really work with our "scoped dividers"
+// At the moment, "label dropdown items" use scopes, a sample case is:
+// * a-label
+// * divider
+// * scope/1
+// * scope/2
+// * divider
+// * z-label
+// when the "scope/*" are filtered out, we'd like to see "a-label" and "z-label" without the divider.
+export function hideScopedEmptyDividers(container: Element) {
+  const visibleItems: Element[] = [];
+  const curScopeVisibleItems: Element[] = [];
+  let curScope: string = '', lastVisibleScope: string = '';
+  const isScopedDivider = (item: Element) => item.matches('.divider') && item.hasAttribute('data-scope');
+  const hideDivider = (item: Element) => item.classList.add('hidden', 'transition'); // dropdown has its own classes to hide items
+
+  const handleScopeSwitch = (itemScope: string) => {
+    if (curScopeVisibleItems.length === 1 && isScopedDivider(curScopeVisibleItems[0])) {
+      hideDivider(curScopeVisibleItems[0]);
+    } else if (curScopeVisibleItems.length) {
+      if (isScopedDivider(curScopeVisibleItems[0]) && lastVisibleScope === curScope) {
+        hideDivider(curScopeVisibleItems[0]);
+        curScopeVisibleItems.shift();
+      }
+      visibleItems.push(...curScopeVisibleItems);
+      lastVisibleScope = curScope;
+    }
+    curScope = itemScope;
+    curScopeVisibleItems.length = 0;
+  };
+
+  // hide the scope dividers if the scope items are empty
+  for (const item of container.children) {
+    const itemScope = item.getAttribute('data-scope') || '';
+    if (itemScope !== curScope) {
+      handleScopeSwitch(itemScope);
+    }
+    if (!item.classList.contains('filtered') && !item.classList.contains('tw-hidden')) {
+      curScopeVisibleItems.push(item as HTMLElement);
+    }
+  }
+  handleScopeSwitch('');
+
+  // hide all leading and trailing dividers
+  while (visibleItems.length) {
+    if (!visibleItems[0].matches('.divider')) break;
+    hideDivider(visibleItems[0]);
+    visibleItems.shift();
+  }
+  while (visibleItems.length) {
+    if (!visibleItems[visibleItems.length - 1].matches('.divider')) break;
+    hideDivider(visibleItems[visibleItems.length - 1]);
+    visibleItems.pop();
+  }
+  // hide all duplicate dividers, hide current divider if next sibling is still divider
+  // no need to update "visibleItems" array since this is the last loop
+  for (const item of visibleItems) {
+    if (!item.matches('.divider')) continue;
+    if (item.nextElementSibling?.matches('.divider')) hideDivider(item);
+  }
+}

web_src/js/webcomponents/overflow-menu.ts

@@ -12,7 +12,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   mutationObserver: MutationObserver;
   lastWidth: number;
 
-  updateItems = throttle(100, () => { // eslint-disable-line unicorn/consistent-function-scoping -- https://github.com/sindresorhus/eslint-plugin-unicorn/issues/2088
+  updateItems = throttle(100, () => {
     if (!this.tippyContent) {
       const div = document.createElement('div');
       div.classList.add('tippy-target');