From 348d1d0f322ca57c459acd902f54821d687ca804 Mon Sep 17 00:00:00 2001
From: Anbraten <6918444+anbraten@users.noreply.github.com>
Date: Mon, 28 Oct 2024 21:15:05 +0100
Subject: [PATCH 01/13] Migrate vue components to setup (#32329)

Migrated a handful Vue components to the `setup` syntax using
composition api as it has better Typescript support and is becoming the
new default in the Vue ecosystem.

- [x] ActionRunStatus.vue
- [x] ActivityHeatmap.vue
- [x] ContextPopup.vue
- [x] DiffFileList.vue
- [x] DiffFileTree.vue
- [x] DiffFileTreeItem.vue
- [x] PullRequestMergeForm.vue
- [x] RepoActivityTopAuthors.vue
- [x] RepoCodeFrequency.vue
- [x] RepoRecentCommits.vue
- [x] ScopedAccessTokenSelector.vue

Left some larger components untouched for now to not go to crazy in this
single PR:
- [ ] DiffCommitSelector.vue
- [ ] RepoActionView.vue
- [ ] RepoContributors.vue
- [ ] DashboardRepoList.vue
- [ ] RepoBranchTagSelector.vue
---
 web_src/js/components/ActionRunStatus.vue     |  34 +--
 web_src/js/components/ActivityHeatmap.vue     |  96 ++++---
 web_src/js/components/ContextPopup.vue        | 156 ++++++------
 web_src/js/components/DiffFileList.vue        |  68 ++---
 web_src/js/components/DiffFileTree.vue        | 238 +++++++++---------
 web_src/js/components/DiffFileTreeItem.vue    |  58 +++--
 .../js/components/PullRequestMergeForm.vue    | 150 +++++------
 .../js/components/RepoActivityTopAuthors.vue  | 106 ++++----
 web_src/js/components/RepoCodeFrequency.vue   | 205 ++++++++-------
 web_src/js/components/RepoRecentCommits.vue   | 169 +++++++------
 .../components/ScopedAccessTokenSelector.vue  | 116 ++++-----
 web_src/js/features/repo-common.ts            |   9 +
 web_src/js/index.ts                           |   3 +-
 web_src/js/types.ts                           |  10 +
 web_src/js/utils/time.ts                      |   4 +-
 15 files changed, 708 insertions(+), 714 deletions(-)

diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index 5181c2c475937..558b881dfe07a 100644
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -2,31 +2,21 @@
     Please also update the template file above if this vue is modified.
     action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
 -->
-<script lang="ts">
+<script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 
-export default {
-  components: {SvgIcon},
-  props: {
-    status: {
-      type: String,
-      required: true,
-    },
-    size: {
-      type: Number,
-      default: 16,
-    },
-    className: {
-      type: String,
-      default: '',
-    },
-    localeStatus: {
-      type: String,
-      default: '',
-    },
-  },
-};
+withDefaults(defineProps<{
+  status: '',
+  size?: number,
+  className?: string,
+  localeStatus?: string,
+}>(), {
+  size: 16,
+  className: undefined,
+  localeStatus: undefined,
+});
 </script>
+
 <template>
   <span class="tw-flex tw-items-center" :data-tooltip-content="localeStatus" v-if="status">
     <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index 2d84a718e413e..eaa9b0ffb13b3 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -1,58 +1,56 @@
-<script lang="ts">
+<script lang="ts" setup>
 // TODO: Switch to upstream after https://github.com/razorness/vue3-calendar-heatmap/pull/34 is merged
 import {CalendarHeatmap} from '@silverwind/vue3-calendar-heatmap';
+import {onMounted, ref} from 'vue';
+import type {Value as HeatmapValue, Locale as HeatmapLocale} from '@silverwind/vue3-calendar-heatmap';
 
-export default {
-  components: {CalendarHeatmap},
-  props: {
-    values: {
-      type: Array,
-      default: () => [],
-    },
-    locale: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  data: () => ({
-    colorRange: [
-      'var(--color-secondary-alpha-60)',
-      'var(--color-secondary-alpha-60)',
-      'var(--color-primary-light-4)',
-      'var(--color-primary-light-2)',
-      'var(--color-primary)',
-      'var(--color-primary-dark-2)',
-      'var(--color-primary-dark-4)',
-    ],
-    endDate: new Date(),
-  }),
-  mounted() {
-    // work around issue with first legend color being rendered twice and legend cut off
-    const legend = document.querySelector('.vch__external-legend-wrapper');
-    legend.setAttribute('viewBox', '12 0 80 10');
-    legend.style.marginRight = '-12px';
-  },
-  methods: {
-    handleDayClick(e) {
-      // Reset filter if same date is clicked
-      const params = new URLSearchParams(document.location.search);
-      const queryDate = params.get('date');
-      // Timezone has to be stripped because toISOString() converts to UTC
-      const clickedDate = new Date(e.date - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10);
+defineProps<{
+  values?: HeatmapValue[];
+  locale: {
+    textTotalContributions: string;
+    heatMapLocale: Partial<HeatmapLocale>;
+    noDataText: string;
+    tooltipUnit: string;
+  };
+}>();
 
-      if (queryDate && queryDate === clickedDate) {
-        params.delete('date');
-      } else {
-        params.set('date', clickedDate);
-      }
+const colorRange = [
+  'var(--color-secondary-alpha-60)',
+  'var(--color-secondary-alpha-60)',
+  'var(--color-primary-light-4)',
+  'var(--color-primary-light-2)',
+  'var(--color-primary)',
+  'var(--color-primary-dark-2)',
+  'var(--color-primary-dark-4)',
+];
 
-      params.delete('page');
+const endDate = ref(new Date());
 
-      const newSearch = params.toString();
-      window.location.search = newSearch.length ? `?${newSearch}` : '';
-    },
-  },
-};
+onMounted(() => {
+  // work around issue with first legend color being rendered twice and legend cut off
+  const legend = document.querySelector<HTMLElement>('.vch__external-legend-wrapper');
+  legend.setAttribute('viewBox', '12 0 80 10');
+  legend.style.marginRight = '-12px';
+});
+
+function handleDayClick(e: Event & {date: Date}) {
+  // Reset filter if same date is clicked
+  const params = new URLSearchParams(document.location.search);
+  const queryDate = params.get('date');
+  // Timezone has to be stripped because toISOString() converts to UTC
+  const clickedDate = new Date(e.date.getTime() - (e.date.getTimezoneOffset() * 60000)).toISOString().substring(0, 10);
+
+  if (queryDate && queryDate === clickedDate) {
+    params.delete('date');
+  } else {
+    params.set('date', clickedDate);
+  }
+
+  params.delete('page');
+
+  const newSearch = params.toString();
+  window.location.search = newSearch.length ? `?${newSearch}` : '';
+}
 </script>
 <template>
   <div class="total-contributions">
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 29634128935da..9fb03dcb7d60c 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -1,100 +1,96 @@
-<script lang="ts">
+<script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
+import {computed, onMounted, ref} from 'vue';
+import type {Issue} from '../types';
 
 const {appSubUrl, i18n} = window.config;
 
-export default {
-  components: {SvgIcon},
-  data: () => ({
-    loading: false,
-    issue: null,
-    renderedLabels: '',
-    i18nErrorOccurred: i18n.error_occurred,
-    i18nErrorMessage: null,
-  }),
-  computed: {
-    createdAt() {
-      return new Date(this.issue.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
-    },
+const loading = ref(false);
+const issue = ref(null);
+const renderedLabels = ref('');
+const i18nErrorOccurred = i18n.error_occurred;
+const i18nErrorMessage = ref(null);
 
-    body() {
-      const body = this.issue.body.replace(/\n+/g, ' ');
-      if (body.length > 85) {
-        return `${body.substring(0, 85)}…`;
-      }
-      return body;
-    },
+const createdAt = computed(() => new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'}));
+const body = computed(() => {
+  const body = issue.value.body.replace(/\n+/g, ' ');
+  if (body.length > 85) {
+    return `${body.substring(0, 85)}…`;
+  }
+  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
+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-issue-closed'; // Closed Issue
-    },
+      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
+}
 
-    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) => {
-      const data = e.detail;
-      if (!this.loading && this.issue === null) {
-        this.load(data);
-      }
-    });
-  },
-  methods: {
-    async load(data) {
-      this.loading = true;
-      this.i18nErrorMessage = null;
+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
+}
 
-      try {
-        const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo
-        const respJson = await response.json();
-        if (!response.ok) {
-          this.i18nErrorMessage = respJson.message ?? i18n.network_error;
-          return;
-        }
-        this.issue = respJson.convertedIssue;
-        this.renderedLabels = respJson.renderedLabels;
-      } catch {
-        this.i18nErrorMessage = i18n.network_error;
-      } finally {
-        this.loading = false;
-      }
-    },
-  },
-};
+const root = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  root.value.addEventListener('ce-load-context-popup', (e: CustomEvent) => {
+    const data = e.detail;
+    if (!loading.value && issue.value === null) {
+      load(data);
+    }
+  });
+});
+
+async function load(data) {
+  loading.value = true;
+  i18nErrorMessage.value = null;
+
+  try {
+    const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo
+    const respJson = await response.json();
+    if (!response.ok) {
+      i18nErrorMessage.value = respJson.message ?? i18n.network_error;
+      return;
+    }
+    issue.value = respJson.convertedIssue;
+    renderedLabels.value = respJson.renderedLabels;
+  } catch {
+    i18nErrorMessage.value = i18n.network_error;
+  } finally {
+    loading.value = false;
+  }
+}
 </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="getIssueIcon(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/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 677afd72a3f4c..2888c53d2ec3b 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -1,40 +1,42 @@
-<script lang="ts">
+<script lang="ts" setup>
+import {onMounted, onUnmounted} from 'vue';
 import {loadMoreFiles} from '../features/repo-diff.ts';
 import {diffTreeStore} from '../modules/stores.ts';
 
-export default {
-  data: () => {
-    return {store: diffTreeStore()};
-  },
-  mounted() {
-    document.querySelector('#show-file-list-btn').addEventListener('click', this.toggleFileList);
-  },
-  unmounted() {
-    document.querySelector('#show-file-list-btn').removeEventListener('click', this.toggleFileList);
-  },
-  methods: {
-    toggleFileList() {
-      this.store.fileListIsVisible = !this.store.fileListIsVisible;
-    },
-    diffTypeToString(pType) {
-      const diffTypes = {
-        1: 'add',
-        2: 'modify',
-        3: 'del',
-        4: 'rename',
-        5: 'copy',
-      };
-      return diffTypes[pType];
-    },
-    diffStatsWidth(adds, dels) {
-      return `${adds / (adds + dels) * 100}%`;
-    },
-    loadMoreData() {
-      loadMoreFiles(this.store.linkLoadMore);
-    },
-  },
-};
+const store = diffTreeStore();
+
+onMounted(() => {
+  document.querySelector('#show-file-list-btn').addEventListener('click', toggleFileList);
+});
+
+onUnmounted(() => {
+  document.querySelector('#show-file-list-btn').removeEventListener('click', toggleFileList);
+});
+
+function toggleFileList() {
+  store.fileListIsVisible = !store.fileListIsVisible;
+}
+
+function diffTypeToString(pType) {
+  const diffTypes = {
+    1: 'add',
+    2: 'modify',
+    3: 'del',
+    4: 'rename',
+    5: 'copy',
+  };
+  return diffTypes[pType];
+}
+
+function diffStatsWidth(adds, dels) {
+  return `${adds / (adds + dels) * 100}%`;
+}
+
+function loadMoreData() {
+  loadMoreFiles(store.linkLoadMore);
+}
 </script>
+
 <template>
   <ol class="diff-stats tw-m-0" ref="root" v-if="store.fileListIsVisible">
     <li v-for="file in store.files" :key="file.NameHash">
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index 2262e3e643036..9eabc65ae9ce7 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -1,130 +1,137 @@
-<script lang="ts">
+<script lang="ts" setup>
 import DiffFileTreeItem from './DiffFileTreeItem.vue';
 import {loadMoreFiles} from '../features/repo-diff.ts';
 import {toggleElem} from '../utils/dom.ts';
 import {diffTreeStore} from '../modules/stores.ts';
 import {setFileFolding} from '../features/file-fold.ts';
+import {computed, onMounted, onUnmounted} from 'vue';
 
 const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
 
-export default {
-  components: {DiffFileTreeItem},
-  data: () => {
-    return {store: diffTreeStore()};
-  },
-  computed: {
-    fileTree() {
-      const result = [];
-      for (const file of this.store.files) {
-        // Split file into directories
-        const splits = file.Name.split('/');
-        let index = 0;
-        let parent = null;
-        let isFile = false;
-        for (const split of splits) {
-          index += 1;
-          // reached the end
-          if (index === splits.length) {
-            isFile = true;
-          }
-          let newParent = {
-            name: split,
-            children: [],
-            isFile,
-          };
-
-          if (isFile === true) {
-            newParent.file = file;
-          }
-
-          if (parent) {
-            // check if the folder already exists
-            const existingFolder = parent.children.find(
-              (x) => x.name === split,
-            );
-            if (existingFolder) {
-              newParent = existingFolder;
-            } else {
-              parent.children.push(newParent);
-            }
-          } else {
-            const existingFolder = result.find((x) => x.name === split);
-            if (existingFolder) {
-              newParent = existingFolder;
-            } else {
-              result.push(newParent);
-            }
-          }
-          parent = newParent;
-        }
+const store = diffTreeStore();
+
+const fileTree = computed(() => {
+  const result = [];
+  for (const file of store.files) {
+    // Split file into directories
+    const splits = file.Name.split('/');
+    let index = 0;
+    let parent = null;
+    let isFile = false;
+    for (const split of splits) {
+      index += 1;
+      // reached the end
+      if (index === splits.length) {
+        isFile = true;
       }
-      const mergeChildIfOnlyOneDir = (entries) => {
-        for (const entry of entries) {
-          if (entry.children) {
-            mergeChildIfOnlyOneDir(entry.children);
-          }
-          if (entry.children.length === 1 && entry.children[0].isFile === false) {
-            // Merge it to the parent
-            entry.name = `${entry.name}/${entry.children[0].name}`;
-            entry.children = entry.children[0].children;
-          }
-        }
+      let newParent = {
+        name: split,
+        children: [],
+        isFile,
+      } as {
+        name: string,
+        children: any[],
+        isFile: boolean,
+        file?: any,
       };
-      // Merge folders with just a folder as children in order to
-      // reduce the depth of our tree.
-      mergeChildIfOnlyOneDir(result);
-      return result;
-    },
-  },
-  mounted() {
-    // Default to true if unset
-    this.store.fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) !== 'false';
-    document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
-
-    this.hashChangeListener = () => {
-      this.store.selectedItem = window.location.hash;
-      this.expandSelectedFile();
-    };
-    this.hashChangeListener();
-    window.addEventListener('hashchange', this.hashChangeListener);
-  },
-  unmounted() {
-    document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility);
-    window.removeEventListener('hashchange', this.hashChangeListener);
-  },
-  methods: {
-    expandSelectedFile() {
-      // expand file if the selected file is folded
-      if (this.store.selectedItem) {
-        const box = document.querySelector(this.store.selectedItem);
-        const folded = box?.getAttribute('data-folded') === 'true';
-        if (folded) setFileFolding(box, box.querySelector('.fold-file'), false);
+
+      if (isFile === true) {
+        newParent.file = file;
+      }
+
+      if (parent) {
+        // check if the folder already exists
+        const existingFolder = parent.children.find(
+          (x) => x.name === split,
+        );
+        if (existingFolder) {
+          newParent = existingFolder;
+        } else {
+          parent.children.push(newParent);
+        }
+      } else {
+        const existingFolder = result.find((x) => x.name === split);
+        if (existingFolder) {
+          newParent = existingFolder;
+        } else {
+          result.push(newParent);
+        }
+      }
+      parent = newParent;
+    }
+  }
+  const mergeChildIfOnlyOneDir = (entries) => {
+    for (const entry of entries) {
+      if (entry.children) {
+        mergeChildIfOnlyOneDir(entry.children);
       }
-    },
-    toggleVisibility() {
-      this.updateVisibility(!this.store.fileTreeIsVisible);
-    },
-    updateVisibility(visible) {
-      this.store.fileTreeIsVisible = visible;
-      localStorage.setItem(LOCAL_STORAGE_KEY, this.store.fileTreeIsVisible);
-      this.updateState(this.store.fileTreeIsVisible);
-    },
-    updateState(visible) {
-      const btn = document.querySelector('.diff-toggle-file-tree-button');
-      const [toShow, toHide] = btn.querySelectorAll('.icon');
-      const tree = document.querySelector('#diff-file-tree');
-      const newTooltip = btn.getAttribute(visible ? 'data-hide-text' : 'data-show-text');
-      btn.setAttribute('data-tooltip-content', newTooltip);
-      toggleElem(tree, visible);
-      toggleElem(toShow, !visible);
-      toggleElem(toHide, visible);
-    },
-    loadMoreData() {
-      loadMoreFiles(this.store.linkLoadMore);
-    },
-  },
-};
+      if (entry.children.length === 1 && entry.children[0].isFile === false) {
+        // Merge it to the parent
+        entry.name = `${entry.name}/${entry.children[0].name}`;
+        entry.children = entry.children[0].children;
+      }
+    }
+  };
+  // Merge folders with just a folder as children in order to
+  // reduce the depth of our tree.
+  mergeChildIfOnlyOneDir(result);
+  return result;
+});
+
+onMounted(() => {
+  // Default to true if unset
+  store.fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) !== 'false';
+  document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', toggleVisibility);
+
+  hashChangeListener();
+  window.addEventListener('hashchange', hashChangeListener);
+});
+
+onUnmounted(() => {
+  document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', toggleVisibility);
+  window.removeEventListener('hashchange', hashChangeListener);
+});
+
+function hashChangeListener() {
+  store.selectedItem = window.location.hash;
+  expandSelectedFile();
+}
+
+function expandSelectedFile() {
+  // expand file if the selected file is folded
+  if (store.selectedItem) {
+    const box = document.querySelector(store.selectedItem);
+    const folded = box?.getAttribute('data-folded') === 'true';
+    if (folded) setFileFolding(box, box.querySelector('.fold-file'), false);
+  }
+}
+
+function toggleVisibility() {
+  updateVisibility(!store.fileTreeIsVisible);
+}
+
+function updateVisibility(visible) {
+  store.fileTreeIsVisible = visible;
+  localStorage.setItem(LOCAL_STORAGE_KEY, store.fileTreeIsVisible);
+  updateState(store.fileTreeIsVisible);
+}
+
+function updateState(visible) {
+  const btn = document.querySelector('.diff-toggle-file-tree-button');
+  const [toShow, toHide] = btn.querySelectorAll('.icon');
+  const tree = document.querySelector('#diff-file-tree');
+  const newTooltip = btn.getAttribute(visible ? 'data-hide-text' : 'data-show-text');
+  btn.setAttribute('data-tooltip-content', newTooltip);
+  toggleElem(tree, visible);
+  toggleElem(toShow, !visible);
+  toggleElem(toHide, visible);
+}
+
+function loadMoreData() {
+  loadMoreFiles(store.linkLoadMore);
+}
 </script>
+
 <template>
   <div v-if="store.fileTreeIsVisible" class="diff-file-tree-items">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
@@ -134,6 +141,7 @@ export default {
     </div>
   </div>
 </template>
+
 <style scoped>
 .diff-file-tree-items {
   display: flex;
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index d5293af519399..84431ff372dd5 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,33 +1,41 @@
-<script lang="ts">
+<script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {diffTreeStore} from '../modules/stores.ts';
+import {ref} from 'vue';
 
-export default {
-  components: {SvgIcon},
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: () => ({
-    store: diffTreeStore(),
-    collapsed: false,
-  }),
-  methods: {
-    getIconForDiffType(pType) {
-      const diffTypes = {
-        1: {name: 'octicon-diff-added', classes: ['text', 'green']},
-        2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
-        3: {name: 'octicon-diff-removed', classes: ['text', 'red']},
-        4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
-        5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
-      };
-      return diffTypes[pType];
-    },
-  },
+type File = {
+  Name: string;
+  NameHash: string;
+  Type: number;
+  IsViewed: boolean;
+}
+
+type Item = {
+  name: string;
+  isFile: boolean;
+  file?: File;
+  children?: Item[];
 };
+
+defineProps<{
+  item: Item,
+}>();
+
+const store = diffTreeStore();
+const collapsed = ref(false);
+
+function getIconForDiffType(pType) {
+  const diffTypes = {
+    1: {name: 'octicon-diff-added', classes: ['text', 'green']},
+    2: {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
+    3: {name: 'octicon-diff-removed', classes: ['text', 'red']},
+    4: {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
+    5: {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
+  };
+  return diffTypes[pType];
+}
 </script>
+
 <template>
   <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
   <a
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index fc9541b6a699f..e8bcee70db181 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -1,84 +1,83 @@
-<script lang="ts">
+<script lang="ts" setup>
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue';
 import {SvgIcon} from '../svg.ts';
 import {toggleElem} from '../utils/dom.ts';
 
 const {csrfToken, pageData} = window.config;
 
-export default {
-  components: {SvgIcon},
-  data: () => ({
-    csrfToken,
-    mergeForm: pageData.pullRequestMergeForm,
-
-    mergeTitleFieldValue: '',
-    mergeMessageFieldValue: '',
-    deleteBranchAfterMerge: false,
-    autoMergeWhenSucceed: false,
-
-    mergeStyle: '',
-    mergeStyleDetail: { // dummy only, these values will come from one of the mergeForm.mergeStyles
-      hideMergeMessageTexts: false,
-      textDoMerge: '',
-      mergeTitleFieldText: '',
-      mergeMessageFieldText: '',
-      hideAutoMerge: false,
-    },
-    mergeStyleAllowedCount: 0,
-
-    showMergeStyleMenu: false,
-    showActionForm: false,
-  }),
-  computed: {
-    mergeButtonStyleClass() {
-      if (this.mergeForm.allOverridableChecksOk) return 'primary';
-      return this.autoMergeWhenSucceed ? 'primary' : 'red';
-    },
-    forceMerge() {
-      return this.mergeForm.canMergeNow && !this.mergeForm.allOverridableChecksOk;
-    },
-  },
-  watch: {
-    mergeStyle(val) {
-      this.mergeStyleDetail = this.mergeForm.mergeStyles.find((e) => e.name === val);
-      for (const elem of document.querySelectorAll('[data-pull-merge-style]')) {
-        toggleElem(elem, elem.getAttribute('data-pull-merge-style') === val);
-      }
-    },
-  },
-  created() {
-    this.mergeStyleAllowedCount = this.mergeForm.mergeStyles.reduce((v, msd) => v + (msd.allowed ? 1 : 0), 0);
-
-    let mergeStyle = this.mergeForm.mergeStyles.find((e) => e.allowed && e.name === this.mergeForm.defaultMergeStyle)?.name;
-    if (!mergeStyle) mergeStyle = this.mergeForm.mergeStyles.find((e) => e.allowed)?.name;
-    this.switchMergeStyle(mergeStyle, !this.mergeForm.canMergeNow);
-  },
-  mounted() {
-    document.addEventListener('mouseup', this.hideMergeStyleMenu);
-  },
-  unmounted() {
-    document.removeEventListener('mouseup', this.hideMergeStyleMenu);
-  },
-  methods: {
-    hideMergeStyleMenu() {
-      this.showMergeStyleMenu = false;
-    },
-    toggleActionForm(show) {
-      this.showActionForm = show;
-      if (!show) return;
-      this.deleteBranchAfterMerge = this.mergeForm.defaultDeleteBranchAfterMerge;
-      this.mergeTitleFieldValue = this.mergeStyleDetail.mergeTitleFieldText;
-      this.mergeMessageFieldValue = this.mergeStyleDetail.mergeMessageFieldText;
-    },
-    switchMergeStyle(name, autoMerge = false) {
-      this.mergeStyle = name;
-      this.autoMergeWhenSucceed = autoMerge;
-    },
-    clearMergeMessage() {
-      this.mergeMessageFieldValue = this.mergeForm.defaultMergeMessage;
-    },
-  },
-};
+const mergeForm = ref(pageData.pullRequestMergeForm);
+
+const mergeTitleFieldValue = ref('');
+const mergeMessageFieldValue = ref('');
+const deleteBranchAfterMerge = ref(false);
+const autoMergeWhenSucceed = ref(false);
+
+const mergeStyle = ref('');
+const mergeStyleDetail = ref({
+  hideMergeMessageTexts: false,
+  textDoMerge: '',
+  mergeTitleFieldText: '',
+  mergeMessageFieldText: '',
+  hideAutoMerge: false,
+});
+
+const mergeStyleAllowedCount = ref(0);
+
+const showMergeStyleMenu = ref(false);
+const showActionForm = ref(false);
+
+const mergeButtonStyleClass = computed(() => {
+  if (mergeForm.value.allOverridableChecksOk) return 'primary';
+  return autoMergeWhenSucceed.value ? 'primary' : 'red';
+});
+
+const forceMerge = computed(() => {
+  return mergeForm.value.canMergeNow && !mergeForm.value.allOverridableChecksOk;
+});
+
+watch(mergeStyle, (val) => {
+  mergeStyleDetail.value = mergeForm.value.mergeStyles.find((e) => e.name === val);
+  for (const elem of document.querySelectorAll('[data-pull-merge-style]')) {
+    toggleElem(elem, elem.getAttribute('data-pull-merge-style') === val);
+  }
+});
+
+onMounted(() => {
+  mergeStyleAllowedCount.value = mergeForm.value.mergeStyles.reduce((v, msd) => v + (msd.allowed ? 1 : 0), 0);
+
+  let mergeStyle = mergeForm.value.mergeStyles.find((e) => e.allowed && e.name === mergeForm.value.defaultMergeStyle)?.name;
+  if (!mergeStyle) mergeStyle = mergeForm.value.mergeStyles.find((e) => e.allowed)?.name;
+  switchMergeStyle(mergeStyle, !mergeForm.value.canMergeNow);
+
+  document.addEventListener('mouseup', hideMergeStyleMenu);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('mouseup', hideMergeStyleMenu);
+});
+
+function hideMergeStyleMenu() {
+  showMergeStyleMenu.value = false;
+}
+
+function toggleActionForm(show: boolean) {
+  showActionForm.value = show;
+  if (!show) return;
+  deleteBranchAfterMerge.value = mergeForm.value.defaultDeleteBranchAfterMerge;
+  mergeTitleFieldValue.value = mergeStyleDetail.value.mergeTitleFieldText;
+  mergeMessageFieldValue.value = mergeStyleDetail.value.mergeMessageFieldText;
+}
+
+function switchMergeStyle(name, autoMerge = false) {
+  mergeStyle.value = name;
+  autoMergeWhenSucceed.value = autoMerge;
+}
+
+function clearMergeMessage() {
+  mergeMessageFieldValue.value = mergeForm.value.defaultMergeMessage;
+}
 </script>
+
 <template>
   <!--
   if this component is shown, either the user is an admin (can do a merge without checks), or they are a writer who has the permission to do a merge
@@ -186,6 +185,7 @@ export default {
     </div>
   </div>
 </template>
+
 <style scoped>
 /* to keep UI the same, at the moment we are still using some Fomantic UI styles, but we do not use their scripts, so we need to fine tune some styles */
 .ui.dropdown .menu.show {
diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue
index c03795abbaa6d..054bf6126eca3 100644
--- a/web_src/js/components/RepoActivityTopAuthors.vue
+++ b/web_src/js/components/RepoActivityTopAuthors.vue
@@ -1,68 +1,62 @@
-<script lang="ts">
+<script lang="ts" setup>
 import {VueBarGraph} from 'vue-bar-graph';
-import {createApp} from 'vue';
+import {computed, onMounted, ref} from 'vue';
 
-const sfc = {
-  components: {VueBarGraph},
-  data: () => ({
-    colors: {
-      barColor: 'green',
-      textColor: 'black',
-      textAltColor: 'white',
-    },
+const colors = ref({
+  barColor: 'green',
+  textColor: 'black',
+  textAltColor: 'white',
+});
 
-    // possible keys:
-    // * avatar_link: (...)
-    // * commits: (...)
-    // * home_link: (...)
-    // * login: (...)
-    // * name: (...)
-    activityTopAuthors: window.config.pageData.repoActivityTopAuthors || [],
-  }),
-  computed: {
-    graphPoints() {
-      return this.activityTopAuthors.map((item) => {
-        return {
-          value: item.commits,
-          label: item.name,
-        };
-      });
-    },
-    graphAuthors() {
-      return this.activityTopAuthors.map((item, idx) => {
-        return {
-          position: idx + 1,
-          ...item,
-        };
-      });
-    },
-    graphWidth() {
-      return this.activityTopAuthors.length * 40;
-    },
-  },
-  mounted() {
-    const refStyle = window.getComputedStyle(this.$refs.style);
-    const refAltStyle = window.getComputedStyle(this.$refs.altStyle);
+// possible keys:
+// * avatar_link: (...)
+// * commits: (...)
+// * home_link: (...)
+// * login: (...)
+// * name: (...)
+const activityTopAuthors = window.config.pageData.repoActivityTopAuthors || [];
 
-    this.colors.barColor = refStyle.backgroundColor;
-    this.colors.textColor = refStyle.color;
-    this.colors.textAltColor = refAltStyle.color;
-  },
-};
+const graphPoints = computed(() => {
+  return activityTopAuthors.value.map((item) => {
+    return {
+      value: item.commits,
+      label: item.name,
+    };
+  });
+});
 
-export function initRepoActivityTopAuthorsChart() {
-  const el = document.querySelector('#repo-activity-top-authors-chart');
-  if (el) {
-    createApp(sfc).mount(el);
-  }
-}
+const graphAuthors = computed(() => {
+  return activityTopAuthors.value.map((item, idx) => {
+    return {
+      position: idx + 1,
+      ...item,
+    };
+  });
+});
 
-export default sfc; // activate the IDE's Vue plugin
+const graphWidth = computed(() => {
+  return activityTopAuthors.value.length * 40;
+});
+
+const styleElement = ref<HTMLElement | null>(null);
+const altStyleElement = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  const refStyle = window.getComputedStyle(styleElement.value);
+  const refAltStyle = window.getComputedStyle(altStyleElement.value);
+
+  colors.value = {
+    barColor: refStyle.backgroundColor,
+    textColor: refStyle.color,
+    textAltColor: refAltStyle.color,
+  };
+});
 </script>
+
 <template>
   <div>
-    <div class="activity-bar-graph" ref="style" style="width: 0; height: 0;"/>
-    <div class="activity-bar-graph-alt" ref="altStyle" style="width: 0; height: 0;"/>
+    <div class="activity-bar-graph" ref="styleElement" style="width: 0; height: 0;"/>
+    <div class="activity-bar-graph-alt" ref="altStyleElement" style="width: 0; height: 0;"/>
     <vue-bar-graph
       :points="graphPoints"
       :show-x-axis="true"
diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue
index c30b32405d5ed..eaff8ae0af080 100644
--- a/web_src/js/components/RepoCodeFrequency.vue
+++ b/web_src/js/components/RepoCodeFrequency.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {
   Chart,
@@ -15,10 +15,12 @@ import {
   startDaysBetween,
   firstStartDateAfterDate,
   fillEmptyStartDaysWithZeroes,
+  type DayData,
 } from '../utils/time.ts';
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
+import {onMounted, ref} from 'vue';
 
 const {pageData} = window.config;
 
@@ -34,114 +36,110 @@ Chart.register(
   Filler,
 );
 
-export default {
-  components: {ChartLine, SvgIcon},
-  props: {
-    locale: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: () => ({
-    isLoading: false,
-    errorText: '',
-    repoLink: pageData.repoLink || [],
-    data: [],
-  }),
-  mounted() {
-    this.fetchGraphData();
-  },
-  methods: {
-    async fetchGraphData() {
-      this.isLoading = true;
-      try {
-        let response;
-        do {
-          response = await GET(`${this.repoLink}/activity/code-frequency/data`);
-          if (response.status === 202) {
-            await sleep(1000); // wait for 1 second before retrying
-          }
-        } while (response.status === 202);
-        if (response.ok) {
-          this.data = await response.json();
-          const weekValues = Object.values(this.data);
-          const start = weekValues[0].week;
-          const end = firstStartDateAfterDate(new Date());
-          const startDays = startDaysBetween(start, end);
-          this.data = fillEmptyStartDaysWithZeroes(startDays, this.data);
-          this.errorText = '';
-        } else {
-          this.errorText = response.statusText;
-        }
-      } catch (err) {
-        this.errorText = err.message;
-      } finally {
-        this.isLoading = false;
+defineProps<{
+  locale: {
+    loadingTitle: string;
+    loadingTitleFailed: string;
+    loadingInfo: string;
+  };
+}>();
+
+const isLoading = ref(false);
+const errorText = ref('');
+const repoLink = ref(pageData.repoLink || []);
+const data = ref<DayData[]>([]);
+
+onMounted(() => {
+  fetchGraphData();
+});
+
+async function fetchGraphData() {
+  isLoading.value = true;
+  try {
+    let response: Response;
+    do {
+      response = await GET(`${repoLink.value}/activity/code-frequency/data`);
+      if (response.status === 202) {
+        await sleep(1000); // wait for 1 second before retrying
       }
-    },
+    } while (response.status === 202);
+    if (response.ok) {
+      data.value = await response.json();
+      const weekValues = Object.values(data.value);
+      const start = weekValues[0].week;
+      const end = firstStartDateAfterDate(new Date());
+      const startDays = startDaysBetween(start, end);
+      data.value = fillEmptyStartDaysWithZeroes(startDays, data.value);
+      errorText.value = '';
+    } else {
+      errorText.value = response.statusText;
+    }
+  } catch (err) {
+    errorText.value = err.message;
+  } finally {
+    isLoading.value = false;
+  }
+}
 
-    toGraphData(data) {
-      return {
-        datasets: [
-          {
-            data: data.map((i) => ({x: i.week, y: i.additions})),
-            pointRadius: 0,
-            pointHitRadius: 0,
-            fill: true,
-            label: 'Additions',
-            backgroundColor: chartJsColors['additions'],
-            borderWidth: 0,
-            tension: 0.3,
-          },
-          {
-            data: data.map((i) => ({x: i.week, y: -i.deletions})),
-            pointRadius: 0,
-            pointHitRadius: 0,
-            fill: true,
-            label: 'Deletions',
-            backgroundColor: chartJsColors['deletions'],
-            borderWidth: 0,
-            tension: 0.3,
-          },
-        ],
-      };
-    },
+function toGraphData(data) {
+  return {
+    datasets: [
+      {
+        data: data.map((i) => ({x: i.week, y: i.additions})),
+        pointRadius: 0,
+        pointHitRadius: 0,
+        fill: true,
+        label: 'Additions',
+        backgroundColor: chartJsColors['additions'],
+        borderWidth: 0,
+        tension: 0.3,
+      },
+      {
+        data: data.map((i) => ({x: i.week, y: -i.deletions})),
+        pointRadius: 0,
+        pointHitRadius: 0,
+        fill: true,
+        label: 'Deletions',
+        backgroundColor: chartJsColors['deletions'],
+        borderWidth: 0,
+        tension: 0.3,
+      },
+    ],
+  };
+}
 
-    getOptions() {
-      return {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: true,
-        plugins: {
-          legend: {
-            display: true,
-          },
-        },
-        scales: {
-          x: {
-            type: 'time',
-            grid: {
-              display: false,
-            },
-            time: {
-              minUnit: 'month',
-            },
-            ticks: {
-              maxRotation: 0,
-              maxTicksLimit: 12,
-            },
-          },
-          y: {
-            ticks: {
-              maxTicksLimit: 6,
-            },
-          },
-        },
-      };
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: true,
+  plugins: {
+    legend: {
+      display: true,
+    },
+  },
+  scales: {
+    x: {
+      type: 'time',
+      grid: {
+        display: false,
+      },
+      time: {
+        minUnit: 'month',
+      },
+      ticks: {
+        maxRotation: 0,
+        maxTicksLimit: 12,
+      },
+    },
+    y: {
+      ticks: {
+        maxTicksLimit: 6,
+      },
     },
   },
 };
 </script>
+
 <template>
   <div>
     <div class="ui header tw-flex tw-items-center tw-justify-between">
@@ -160,11 +158,12 @@ export default {
       </div>
       <ChartLine
         v-memo="data" v-if="data.length !== 0"
-        :data="toGraphData(data)" :options="getOptions()"
+        :data="toGraphData(data)" :options="options"
       />
     </div>
   </div>
 </template>
+
 <style scoped>
 .main-graph {
   height: 440px;
diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue
index c3515caba3007..8d2a14cd2cdf9 100644
--- a/web_src/js/components/RepoRecentCommits.vue
+++ b/web_src/js/components/RepoRecentCommits.vue
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {
   Chart,
@@ -6,6 +6,7 @@ import {
   BarElement,
   LinearScale,
   TimeScale,
+  type ChartOptions,
 } from 'chart.js';
 import {GET} from '../modules/fetch.ts';
 import {Bar} from 'vue-chartjs';
@@ -13,10 +14,12 @@ import {
   startDaysBetween,
   firstStartDateAfterDate,
   fillEmptyStartDaysWithZeroes,
+  type DayData,
 } from '../utils/time.ts';
 import {chartJsColors} from '../utils/color.ts';
 import {sleep} from '../utils.ts';
 import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
+import {onMounted, ref} from 'vue';
 
 const {pageData} = window.config;
 
@@ -30,95 +33,91 @@ Chart.register(
   Tooltip,
 );
 
-export default {
-  components: {Bar, SvgIcon},
-  props: {
-    locale: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: () => ({
-    isLoading: false,
-    errorText: '',
-    repoLink: pageData.repoLink || [],
-    data: [],
-  }),
-  mounted() {
-    this.fetchGraphData();
-  },
-  methods: {
-    async fetchGraphData() {
-      this.isLoading = true;
-      try {
-        let response;
-        do {
-          response = await GET(`${this.repoLink}/activity/recent-commits/data`);
-          if (response.status === 202) {
-            await sleep(1000); // wait for 1 second before retrying
-          }
-        } while (response.status === 202);
-        if (response.ok) {
-          const data = await response.json();
-          const start = Object.values(data)[0].week;
-          const end = firstStartDateAfterDate(new Date());
-          const startDays = startDaysBetween(start, end);
-          this.data = fillEmptyStartDaysWithZeroes(startDays, data).slice(-52);
-          this.errorText = '';
-        } else {
-          this.errorText = response.statusText;
-        }
-      } catch (err) {
-        this.errorText = err.message;
-      } finally {
-        this.isLoading = false;
+defineProps<{
+  locale: {
+    loadingTitle: string;
+    loadingTitleFailed: string;
+    loadingInfo: string;
+  };
+}>();
+
+const isLoading = ref(false);
+const errorText = ref('');
+const repoLink = ref(pageData.repoLink || []);
+const data = ref<DayData[]>([]);
+
+onMounted(() => {
+  fetchGraphData();
+});
+
+async function fetchGraphData() {
+  isLoading.value = true;
+  try {
+    let response: Response;
+    do {
+      response = await GET(`${repoLink.value}/activity/recent-commits/data`);
+      if (response.status === 202) {
+        await sleep(1000); // wait for 1 second before retrying
       }
-    },
+    } while (response.status === 202);
+    if (response.ok) {
+      const data = await response.json();
+      const start = Object.values(data)[0].week;
+      const end = firstStartDateAfterDate(new Date());
+      const startDays = startDaysBetween(start, end);
+      data.value = fillEmptyStartDaysWithZeroes(startDays, data).slice(-52);
+      errorText.value = '';
+    } else {
+      errorText.value = response.statusText;
+    }
+  } catch (err) {
+    errorText.value = err.message;
+  } finally {
+    isLoading.value = false;
+  }
+}
 
-    toGraphData(data) {
-      return {
-        datasets: [
-          {
-            data: data.map((i) => ({x: i.week, y: i.commits})),
-            label: 'Commits',
-            backgroundColor: chartJsColors['commits'],
-            borderWidth: 0,
-            tension: 0.3,
-          },
-        ],
-      };
-    },
+function toGraphData(data) {
+  return {
+    datasets: [
+      {
+        data: data.map((i) => ({x: i.week, y: i.commits})),
+        label: 'Commits',
+        backgroundColor: chartJsColors['commits'],
+        borderWidth: 0,
+        tension: 0.3,
+      },
+    ],
+  };
+}
 
-    getOptions() {
-      return {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: true,
-        scales: {
-          x: {
-            type: 'time',
-            grid: {
-              display: false,
-            },
-            time: {
-              minUnit: 'week',
-            },
-            ticks: {
-              maxRotation: 0,
-              maxTicksLimit: 52,
-            },
-          },
-          y: {
-            ticks: {
-              maxTicksLimit: 6,
-            },
-          },
-        },
-      };
+const options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: true,
+  scales: {
+    x: {
+      type: 'time',
+      grid: {
+        display: false,
+      },
+      time: {
+        minUnit: 'week',
+      },
+      ticks: {
+        maxRotation: 0,
+        maxTicksLimit: 52,
+      },
+    },
+    y: {
+      ticks: {
+        maxTicksLimit: 6,
+      },
     },
   },
-};
+} satisfies ChartOptions;
 </script>
+
 <template>
   <div>
     <div class="ui header tw-flex tw-items-center tw-justify-between">
@@ -137,7 +136,7 @@ export default {
       </div>
       <Bar
         v-memo="data" v-if="data.length !== 0"
-        :data="toGraphData(data)" :options="getOptions()"
+        :data="toGraphData(data)" :options="options"
       />
     </div>
   </div>
diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index 896c1dbff4b0a..63214d0bf5164 100644
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/web_src/js/components/ScopedAccessTokenSelector.vue
@@ -1,78 +1,60 @@
-<script lang="ts">
+<script lang="ts" setup>
+import {computed, onMounted, onUnmounted} from 'vue';
 import {hideElem, showElem} from '../utils/dom.ts';
 
-const sfc = {
-  props: {
-    isAdmin: {
-      type: Boolean,
-      required: true,
-    },
-    noAccessLabel: {
-      type: String,
-      required: true,
-    },
-    readLabel: {
-      type: String,
-      required: true,
-    },
-    writeLabel: {
-      type: String,
-      required: true,
-    },
-  },
+const props = defineProps<{
+  isAdmin: boolean;
+  noAccessLabel: string;
+  readLabel: string;
+  writeLabel: string;
+}>();
 
-  computed: {
-    categories() {
-      const categories = [
-        'activitypub',
-      ];
-      if (this.isAdmin) {
-        categories.push('admin');
-      }
-      categories.push(
-        'issue',
-        'misc',
-        'notification',
-        'organization',
-        'package',
-        'repository',
-        'user');
-      return categories;
-    },
-  },
+const categories = computed(() => {
+  const categories = [
+    'activitypub',
+  ];
+  if (props.isAdmin) {
+    categories.push('admin');
+  }
+  categories.push(
+    'issue',
+    'misc',
+    'notification',
+    'organization',
+    'package',
+    'repository',
+    'user');
+  return categories;
+});
 
-  mounted() {
-    document.querySelector('#scoped-access-submit').addEventListener('click', this.onClickSubmit);
-  },
+onMounted(() => {
+  document.querySelector('#scoped-access-submit').addEventListener('click', onClickSubmit);
+});
 
-  unmounted() {
-    document.querySelector('#scoped-access-submit').removeEventListener('click', this.onClickSubmit);
-  },
+onUnmounted(() => {
+  document.querySelector('#scoped-access-submit').removeEventListener('click', onClickSubmit);
+});
 
-  methods: {
-    onClickSubmit(e) {
-      e.preventDefault();
+function onClickSubmit(e) {
+  e.preventDefault();
 
-      const warningEl = document.querySelector('#scoped-access-warning');
-      // check that at least one scope has been selected
-      for (const el of document.querySelectorAll('.access-token-select')) {
-        if (el.value) {
-          // Hide the error if it was visible from previous attempt.
-          hideElem(warningEl);
-          // Submit the form.
-          document.querySelector('#scoped-access-form').submit();
-          // Don't show the warning.
-          return;
-        }
-      }
-      // no scopes selected, show validation error
-      showElem(warningEl);
-    },
-  },
-};
-
-export default sfc;
+  const warningEl = document.querySelector('#scoped-access-warning');
+  // check that at least one scope has been selected
+  for (const el of document.querySelectorAll<HTMLInputElement>('.access-token-select')) {
+    if (el.value) {
+      // Hide the error if it was visible from previous attempt.
+      hideElem(warningEl);
+      // Submit the form.
+      document.querySelector<HTMLFormElement>('#scoped-access-form').submit();
+      // Don't show the warning.
+      return;
+    }
+  }
+  // no scopes selected, show validation error
+  showElem(warningEl);
+}
 </script>
+
 <template>
   <div v-for="category in categories" :key="category" class="field tw-pl-1 tw-pb-1 access-token-category">
     <label class="category-label" :for="'access-token-scope-' + category">
diff --git a/web_src/js/features/repo-common.ts b/web_src/js/features/repo-common.ts
index ac63ef2145217..de967ffba033d 100644
--- a/web_src/js/features/repo-common.ts
+++ b/web_src/js/features/repo-common.ts
@@ -3,6 +3,8 @@ import {hideElem, queryElems, showElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
 import {sleep} from '../utils.ts';
+import RepoActivityTopAuthors from '../components/RepoActivityTopAuthors.vue';
+import {createApp} from 'vue';
 
 async function onDownloadArchive(e) {
   e.preventDefault();
@@ -32,6 +34,13 @@ export function initRepoArchiveLinks() {
   queryElems('a.archive-link[href]', (el) => el.addEventListener('click', onDownloadArchive));
 }
 
+export function initRepoActivityTopAuthorsChart() {
+  const el = document.querySelector('#repo-activity-top-authors-chart');
+  if (el) {
+    createApp(RepoActivityTopAuthors).mount(el);
+  }
+}
+
 export function initRepoCloneLink() {
   const $repoCloneSsh = $('#repo-clone-ssh');
   const $repoCloneHttps = $('#repo-clone-https');
diff --git a/web_src/js/index.ts b/web_src/js/index.ts
index 13dfe1f3efe1c..f63d199488604 100644
--- a/web_src/js/index.ts
+++ b/web_src/js/index.ts
@@ -2,7 +2,6 @@
 import './bootstrap.ts';
 import './htmx.ts';
 
-import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue';
 import {initDashboardRepoList} from './components/DashboardRepoList.vue';
 
 import {initGlobalCopyToClipboardListener} from './features/clipboard.ts';
@@ -42,7 +41,7 @@ import {initRepoTemplateSearch} from './features/repo-template.ts';
 import {initRepoCodeView} from './features/repo-code.ts';
 import {initSshKeyFormParser} from './features/sshkey-helper.ts';
 import {initUserSettings} from './features/user-settings.ts';
-import {initRepoArchiveLinks} from './features/repo-common.ts';
+import {initRepoActivityTopAuthorsChart, initRepoArchiveLinks} from './features/repo-common.ts';
 import {initRepoMigrationStatusChecker} from './features/repo-migrate.ts';
 import {
   initRepoSettingGitHook,
diff --git a/web_src/js/types.ts b/web_src/js/types.ts
index f3ac305162b24..c38c8bda96f0c 100644
--- a/web_src/js/types.ts
+++ b/web_src/js/types.ts
@@ -36,3 +36,13 @@ export type IssueData = {
   type: string,
   index: string,
 }
+
+export type Issue = {
+  id: number;
+  title: string;
+  state: 'open' | 'closed';
+  pull_request?: {
+    draft: boolean;
+    merged: boolean;
+  };
+};
diff --git a/web_src/js/utils/time.ts b/web_src/js/utils/time.ts
index 5251386230f1b..c661155442674 100644
--- a/web_src/js/utils/time.ts
+++ b/web_src/js/utils/time.ts
@@ -42,14 +42,14 @@ export function firstStartDateAfterDate(inputDate: Date): number {
   return resultDate.valueOf();
 }
 
-type DayData = {
+export type DayData = {
   week: number,
   additions: number,
   deletions: number,
   commits: number,
 }
 
-export function fillEmptyStartDaysWithZeroes(startDays: number[], data: DayData): DayData[] {
+export function fillEmptyStartDaysWithZeroes(startDays: number[], data: DayData[]): DayData[] {
   const result = {};
 
   for (const startDay of startDays) {

From b7fb20e73e63b8edc9b90c52073e248bef428fcc Mon Sep 17 00:00:00 2001
From: Anbraten <6918444+anbraten@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:20:49 +0100
Subject: [PATCH 02/13] Suggestions for issues (#32327)

closes #16872
---
 package-lock.json                         | 23 ++++--
 package.json                              |  3 +-
 routers/web/repo/issue_suggestions.go     | 93 +++++++++++++++++++++++
 routers/web/web.go                        |  1 +
 templates/shared/combomarkdowneditor.tmpl |  2 +-
 web_src/js/components/ContextPopup.vue    | 33 +-------
 web_src/js/features/comp/TextExpander.ts  | 44 ++++++++++-
 web_src/js/features/issue.ts              | 32 ++++++++
 web_src/js/utils/match.ts                 | 19 ++++-
 9 files changed, 202 insertions(+), 48 deletions(-)
 create mode 100644 routers/web/repo/issue_suggestions.go
 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/routers/web/repo/issue_suggestions.go b/routers/web/repo/issue_suggestions.go
new file mode 100644
index 0000000000000..361da0ee60953
--- /dev/null
+++ b/routers/web/repo/issue_suggestions.go
@@ -0,0 +1,93 @@
+// Copyright 2024 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package repo
+
+import (
+	"net/http"
+
+	"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"
+)
+
+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")
+
+	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,
+			PageSize: 5,
+		},
+		Keyword:  keyword,
+		RepoIDs:  []int64{ctx.Repo.Repository.ID},
+		IsPull:   isPull,
+		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..83d116babd769 100644
--- a/routers/web/web.go
+++ b/routers/web/web.go
@@ -1178,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/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/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 9fb03dcb7d60c..8c56af858e33f 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
+import {getIssueColor, getIssueIcon} from '../features/issue.ts';
 import {computed, onMounted, ref} from 'vue';
-import type {Issue} from '../types';
 
 const {appSubUrl, i18n} = window.config;
 
@@ -21,37 +21,6 @@ const body = computed(() => {
   return body;
 });
 
-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
-}
-
-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
-}
-
 const root = ref<HTMLElement | null>(null);
 
 onMounted(() => {
diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index 5afe025d38790..6ac4c4bf32c19 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -1,5 +1,41 @@
-import {matchEmoji, matchMention} from '../../utils/match.ts';
+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';
+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}`,
+      class: '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}`;
     }
   });
diff --git a/web_src/js/features/issue.ts b/web_src/js/features/issue.ts
new file mode 100644
index 0000000000000..a56015a2a25bc
--- /dev/null
+++ b/web_src/js/features/issue.ts
@@ -0,0 +1,32 @@
+import type {Issue} from '../types.ts';
+
+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 0ce7e2b1a2a81..2c7271f16eee5 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -1,8 +1,10 @@
 import emojis from '../../../assets/emoji.json';
+import type {Issue} from '../features/issue.ts';
+import {GET} 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 +29,12 @@ export function matchEmoji(queryText: string): string[] {
   return sortAndReduce(results);
 }
 
-export function matchMention(queryText: string): string[] {
+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();
+  const results = new Map<MentionSuggestion, number>();
   for (const obj of window.config.mentionValues ?? []) {
     const index = obj.key.toLowerCase().indexOf(query);
     if (index === -1) continue;
@@ -41,3 +44,13 @@ export function matchMention(queryText: string): string[] {
 
   return sortAndReduce(results);
 }
+
+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 issues: Issue[] = await res.json();
+  const issueIndex = parseInt(issueIndexStr);
+
+  // filter out issue with same id
+  return issues.filter((i) => i.id !== issueIndex);
+}

From 5d43801b72790ce5862aefdc4520edb06bb4cbba Mon Sep 17 00:00:00 2001
From: 6543 <6543@obermui.de>
Date: Tue, 29 Oct 2024 15:43:47 +0100
Subject: [PATCH 03/13] Optimize branch protection rule loading (#32280)

before if it was nonglob each load would try to glob it and the check
that is not glob ... now we only do that once and no future loading will
trigger it


---
*Sponsored by Kithara Software GmbH*
---
 models/git/protected_branch.go                | 22 +++++++++-----
 ..._test.go => protected_branch_list_test.go} | 29 +++++++++++++++++++
 2 files changed, 43 insertions(+), 8 deletions(-)
 rename models/git/{protected_banch_list_test.go => protected_branch_list_test.go} (79%)

diff --git a/models/git/protected_branch.go b/models/git/protected_branch.go
index 0033a42d4e39f..37d933a982610 100644
--- a/models/git/protected_branch.go
+++ b/models/git/protected_branch.go
@@ -84,14 +84,20 @@ func IsRuleNameSpecial(ruleName string) bool {
 }
 
 func (protectBranch *ProtectedBranch) loadGlob() {
-	if protectBranch.globRule == nil {
-		var err error
-		protectBranch.globRule, err = glob.Compile(protectBranch.RuleName, '/')
-		if err != nil {
-			log.Warn("Invalid glob rule for ProtectedBranch[%d]: %s %v", protectBranch.ID, protectBranch.RuleName, err)
-			protectBranch.globRule = glob.MustCompile(glob.QuoteMeta(protectBranch.RuleName), '/')
-		}
-		protectBranch.isPlainName = !IsRuleNameSpecial(protectBranch.RuleName)
+	if protectBranch.isPlainName || protectBranch.globRule != nil {
+		return
+	}
+	// detect if it is not glob
+	if !IsRuleNameSpecial(protectBranch.RuleName) {
+		protectBranch.isPlainName = true
+		return
+	}
+	// now we load the glob
+	var err error
+	protectBranch.globRule, err = glob.Compile(protectBranch.RuleName, '/')
+	if err != nil {
+		log.Warn("Invalid glob rule for ProtectedBranch[%d]: %s %v", protectBranch.ID, protectBranch.RuleName, err)
+		protectBranch.globRule = glob.MustCompile(glob.QuoteMeta(protectBranch.RuleName), '/')
 	}
 }
 
diff --git a/models/git/protected_banch_list_test.go b/models/git/protected_branch_list_test.go
similarity index 79%
rename from models/git/protected_banch_list_test.go
rename to models/git/protected_branch_list_test.go
index 4bb3136d580bf..94a48f37e6a5b 100644
--- a/models/git/protected_banch_list_test.go
+++ b/models/git/protected_branch_list_test.go
@@ -74,3 +74,32 @@ func TestBranchRuleMatchPriority(t *testing.T) {
 		}
 	}
 }
+
+func TestBranchRuleSort(t *testing.T) {
+	in := []*ProtectedBranch{{
+		RuleName:    "b",
+		CreatedUnix: 1,
+	}, {
+		RuleName:    "b/*",
+		CreatedUnix: 3,
+	}, {
+		RuleName:    "a/*",
+		CreatedUnix: 2,
+	}, {
+		RuleName:    "c",
+		CreatedUnix: 0,
+	}, {
+		RuleName:    "a",
+		CreatedUnix: 4,
+	}}
+	expect := []string{"c", "b", "a", "a/*", "b/*"}
+
+	pbr := ProtectedBranchRules(in)
+	pbr.sort()
+
+	var got []string
+	for i := range pbr {
+		got = append(got, pbr[i].RuleName)
+	}
+	assert.Equal(t, expect, got)
+}

From feca8802b85dd75090c533ebdb92835d3d529f17 Mon Sep 17 00:00:00 2001
From: Lunny Xiao <xiaolunwen@gmail.com>
Date: Tue, 29 Oct 2024 09:27:03 -0700
Subject: [PATCH 04/13] Fix clean tmp dir (#32360)

Try to fix #31792

Credit to @jeroenlaylo
Copied from
https://github.com/go-gitea/gitea/issues/31792#issuecomment-2311920520

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 modules/git/repo_index.go | 36 +++++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/modules/git/repo_index.go b/modules/git/repo_index.go
index 839057009872e..f45b6e61919f6 100644
--- a/modules/git/repo_index.go
+++ b/modules/git/repo_index.go
@@ -50,25 +50,35 @@ func (repo *Repository) readTreeToIndex(id ObjectID, indexFilename ...string) er
 }
 
 // ReadTreeToTemporaryIndex reads a treeish to a temporary index file
-func (repo *Repository) ReadTreeToTemporaryIndex(treeish string) (filename, tmpDir string, cancel context.CancelFunc, err error) {
+func (repo *Repository) ReadTreeToTemporaryIndex(treeish string) (tmpIndexFilename, tmpDir string, cancel context.CancelFunc, err error) {
+	defer func() {
+		// if error happens and there is a cancel function, do clean up
+		if err != nil && cancel != nil {
+			cancel()
+			cancel = nil
+		}
+	}()
+
+	removeDirFn := func(dir string) func() { // it can't use the return value "tmpDir" directly because it is empty when error occurs
+		return func() {
+			if err := util.RemoveAll(dir); err != nil {
+				log.Error("failed to remove tmp index dir: %v", err)
+			}
+		}
+	}
+
 	tmpDir, err = os.MkdirTemp("", "index")
 	if err != nil {
-		return filename, tmpDir, cancel, err
+		return "", "", nil, err
 	}
 
-	filename = filepath.Join(tmpDir, ".tmp-index")
-	cancel = func() {
-		err := util.RemoveAll(tmpDir)
-		if err != nil {
-			log.Error("failed to remove tmp index file: %v", err)
-		}
-	}
-	err = repo.ReadTreeToIndex(treeish, filename)
+	tmpIndexFilename = filepath.Join(tmpDir, ".tmp-index")
+	cancel = removeDirFn(tmpDir)
+	err = repo.ReadTreeToIndex(treeish, tmpIndexFilename)
 	if err != nil {
-		defer cancel()
-		return "", "", func() {}, err
+		return "", "", cancel, err
 	}
-	return filename, tmpDir, cancel, err
+	return tmpIndexFilename, tmpDir, cancel, err
 }
 
 // EmptyIndex empties the index

From 1cd3f698591edf4fba7880a150b05855cdf40d47 Mon Sep 17 00:00:00 2001
From: Rowan Bohde <rowan.bohde@gmail.com>
Date: Wed, 30 Oct 2024 00:12:48 -0500
Subject: [PATCH 05/13] remove unused call to $.HeadRepo in view_title template
 (#32317)

This is only populated in
[`ParseCompareInfo`](https://github.com/search?q=repo%3Ago-gitea%2Fgitea%20%20.Data%5B%22HeadRepo%22%5D&type=code)
which is called in two handlers:

*
[`CompareAndPullRequestPost`](https://github.com/go-gitea/gitea/blob/9206fbb55fd28f21720072fce6a36cc22277934c/routers/web/repo/pull.go#L1246)
- a JSON post handler that doesn't render templates
*
[`CompareDiff`](https://github.com/go-gitea/gitea/blob/9206fbb55fd28f21720072fce6a36cc22277934c/routers/web/repo/compare.go#L706)
- which can render `diff/box.tmpl` and `diff/compare.tmpl`
---
 templates/repo/issue/view_title.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index 7fa77b3f1cf33..1591c2cadfb50 100644
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -102,7 +102,7 @@
 										{{$sameBase := ne $.BaseName $.HeadUserName}}
 										{{$differentBranch := ne . $.HeadBranch}}
 										{{if or $sameBase $differentBranch}}
-											<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}{{if $.HeadRepo}}/{{$.HeadRepo}}{{end}}:{{.}}</div>
+											<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-branch="{{.}}">{{$.BaseName}}:{{.}}</div>
 										{{end}}
 									{{end}}
 								</div>

From c60e4dc1095ef90a790582cacfad27c972637bb2 Mon Sep 17 00:00:00 2001
From: Royce Remer <royceremer@gmail.com>
Date: Tue, 29 Oct 2024 22:41:55 -0700
Subject: [PATCH 06/13] Add new [lfs_client].BATCH_SIZE and
 [server].LFS_MAX_BATCH_SIZE config settings. (#32307)

This contains two backwards-compatible changes:
* in the lfs http_client, the number of lfs oids requested per batch is
loaded from lfs_client#BATCH_SIZE and defaulted to the previous value of
20
* in the lfs server/service, the max number of lfs oids allowed in a
batch api request is loaded from server#LFS_MAX_BATCH_SIZE and defaults
to 'nil' which equates to the previous behavior of 'infinite'

This fixes #32306

---------

Signed-off-by: Royce Remer <royceremer@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 custom/conf/app.example.ini |  8 ++++++++
 modules/lfs/http_client.go  |  5 ++---
 modules/setting/lfs.go      | 21 +++++++++++++++++----
 modules/setting/lfs_test.go | 16 ++++++++++++++++
 services/lfs/server.go      |  5 +++++
 5 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/custom/conf/app.example.ini b/custom/conf/app.example.ini
index 0c76bbc6cdeef..69b57a8c01257 100644
--- a/custom/conf/app.example.ini
+++ b/custom/conf/app.example.ini
@@ -324,6 +324,10 @@ RUN_USER = ; git
 ;; Maximum number of locks returned per page
 ;LFS_LOCKS_PAGING_NUM = 50
 ;;
+;; When clients make lfs batch requests, reject them if there are more pointers than this number
+;; zero means 'unlimited'
+;LFS_MAX_BATCH_SIZE = 0
+;;
 ;; Allow graceful restarts using SIGHUP to fork
 ;ALLOW_GRACEFUL_RESTARTS = true
 ;;
@@ -2638,6 +2642,10 @@ LEVEL = Info
 ;; override the azure blob base path if storage type is azureblob
 ;AZURE_BLOB_BASE_PATH = lfs/
 
+;[lfs_client]
+;; When mirroring an upstream lfs endpoint, limit the number of pointers in each batch request to this number
+;BATCH_SIZE = 20
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; settings for packages, will override storage setting
diff --git a/modules/lfs/http_client.go b/modules/lfs/http_client.go
index 4859fe61e1db9..aa9e744d72b8f 100644
--- a/modules/lfs/http_client.go
+++ b/modules/lfs/http_client.go
@@ -16,10 +16,9 @@ import (
 	"code.gitea.io/gitea/modules/json"
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/proxy"
+	"code.gitea.io/gitea/modules/setting"
 )
 
-const httpBatchSize = 20
-
 // HTTPClient is used to communicate with the LFS server
 // https://github.com/git-lfs/git-lfs/blob/main/docs/api/batch.md
 type HTTPClient struct {
@@ -30,7 +29,7 @@ type HTTPClient struct {
 
 // BatchSize returns the preferred size of batchs to process
 func (c *HTTPClient) BatchSize() int {
-	return httpBatchSize
+	return setting.LFSClient.BatchSize
 }
 
 func newHTTPClient(endpoint *url.URL, httpTransport *http.Transport) *HTTPClient {
diff --git a/modules/setting/lfs.go b/modules/setting/lfs.go
index 6bdcbed91d90f..24c49cabee93a 100644
--- a/modules/setting/lfs.go
+++ b/modules/setting/lfs.go
@@ -10,7 +10,10 @@ import (
 	"code.gitea.io/gitea/modules/generate"
 )
 
-// LFS represents the configuration for Git LFS
+// LFS represents the server-side configuration for Git LFS.
+// Ideally these options should be in a section like "[lfs_server]",
+// but they are in "[server]" section due to historical reasons.
+// Could be refactored in the future while keeping backwards compatibility.
 var LFS = struct {
 	StartServer    bool          `ini:"LFS_START_SERVER"`
 	AllowPureSSH   bool          `ini:"LFS_ALLOW_PURE_SSH"`
@@ -18,15 +21,21 @@ var LFS = struct {
 	HTTPAuthExpiry time.Duration `ini:"LFS_HTTP_AUTH_EXPIRY"`
 	MaxFileSize    int64         `ini:"LFS_MAX_FILE_SIZE"`
 	LocksPagingNum int           `ini:"LFS_LOCKS_PAGING_NUM"`
+	MaxBatchSize   int           `ini:"LFS_MAX_BATCH_SIZE"`
 
 	Storage *Storage
 }{}
 
+// LFSClient represents configuration for Gitea's LFS clients, for example: mirroring upstream Git LFS
+var LFSClient = struct {
+	BatchSize int `ini:"BATCH_SIZE"`
+}{}
+
 func loadLFSFrom(rootCfg ConfigProvider) error {
+	mustMapSetting(rootCfg, "lfs_client", &LFSClient)
+
+	mustMapSetting(rootCfg, "server", &LFS)
 	sec := rootCfg.Section("server")
-	if err := sec.MapTo(&LFS); err != nil {
-		return fmt.Errorf("failed to map LFS settings: %v", err)
-	}
 
 	lfsSec, _ := rootCfg.GetSection("lfs")
 
@@ -53,6 +62,10 @@ func loadLFSFrom(rootCfg ConfigProvider) error {
 		LFS.LocksPagingNum = 50
 	}
 
+	if LFSClient.BatchSize < 1 {
+		LFSClient.BatchSize = 20
+	}
+
 	LFS.HTTPAuthExpiry = sec.Key("LFS_HTTP_AUTH_EXPIRY").MustDuration(24 * time.Hour)
 
 	if !LFS.StartServer || !InstallLock {
diff --git a/modules/setting/lfs_test.go b/modules/setting/lfs_test.go
index 10c54fec0aa6f..f7beaaa9c797e 100644
--- a/modules/setting/lfs_test.go
+++ b/modules/setting/lfs_test.go
@@ -99,3 +99,19 @@ STORAGE_TYPE = minio
 	assert.EqualValues(t, "gitea", LFS.Storage.MinioConfig.Bucket)
 	assert.EqualValues(t, "lfs/", LFS.Storage.MinioConfig.BasePath)
 }
+
+func Test_LFSClientServerConfigs(t *testing.T) {
+	iniStr := `
+[server]
+LFS_MAX_BATCH_SIZE = 100
+[lfs_client]
+# will default to 20
+BATCH_SIZE = 0
+`
+	cfg, err := NewConfigProviderFromData(iniStr)
+	assert.NoError(t, err)
+
+	assert.NoError(t, loadLFSFrom(cfg))
+	assert.EqualValues(t, 100, LFS.MaxBatchSize)
+	assert.EqualValues(t, 20, LFSClient.BatchSize)
+}
diff --git a/services/lfs/server.go b/services/lfs/server.go
index 751dac64a02f9..6932f839c7c43 100644
--- a/services/lfs/server.go
+++ b/services/lfs/server.go
@@ -179,6 +179,11 @@ func BatchHandler(ctx *context.Context) {
 		return
 	}
 
+	if setting.LFS.MaxBatchSize != 0 && len(br.Objects) > setting.LFS.MaxBatchSize {
+		writeStatus(ctx, http.StatusRequestEntityTooLarge)
+		return
+	}
+
 	contentStore := lfs_module.NewContentStore()
 
 	var responseObjects []*lfs_module.ObjectResponse

From f938dbc9b54873add4418b7d211c87b0b4a6d8f7 Mon Sep 17 00:00:00 2001
From: cloudchamb3r <jizon0123@protonmail.com>
Date: Wed, 30 Oct 2024 15:48:13 +0900
Subject: [PATCH 07/13] Fix undefined errors on Activity page (#32378)

close #32377

Co-authored-by: Giteabot <teabot@gitea.io>
---
 web_src/js/components/RepoActivityTopAuthors.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue
index 054bf6126eca3..1f5e9825ba1ea 100644
--- a/web_src/js/components/RepoActivityTopAuthors.vue
+++ b/web_src/js/components/RepoActivityTopAuthors.vue
@@ -17,7 +17,7 @@ const colors = ref({
 const activityTopAuthors = window.config.pageData.repoActivityTopAuthors || [];
 
 const graphPoints = computed(() => {
-  return activityTopAuthors.value.map((item) => {
+  return activityTopAuthors.map((item) => {
     return {
       value: item.commits,
       label: item.name,
@@ -26,7 +26,7 @@ const graphPoints = computed(() => {
 });
 
 const graphAuthors = computed(() => {
-  return activityTopAuthors.value.map((item, idx) => {
+  return activityTopAuthors.map((item, idx) => {
     return {
       position: idx + 1,
       ...item,
@@ -35,7 +35,7 @@ const graphAuthors = computed(() => {
 });
 
 const graphWidth = computed(() => {
-  return activityTopAuthors.value.length * 40;
+  return activityTopAuthors.length * 40;
 });
 
 const styleElement = ref<HTMLElement | null>(null);

From ce4d909bd693fe903761eb835f7661e476a937ca Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Wed, 30 Oct 2024 17:50:19 +0800
Subject: [PATCH 08/13] Fix absolute-date (#32375)

---
 package-lock.json                             | 16 ----------
 package.json                                  |  1 -
 .../js/webcomponents/absolute-date.test.ts    |  8 ++++-
 web_src/js/webcomponents/absolute-date.ts     | 30 +++++++++----------
 4 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a2bde7e083834..4added7ec5119 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,6 @@
         "sortablejs": "1.15.2",
         "swagger-ui-dist": "5.17.14",
         "tailwindcss": "3.4.10",
-        "temporal-polyfill": "0.2.5",
         "throttle-debounce": "5.0.2",
         "tinycolor2": "1.6.0",
         "tippy.js": "6.3.7",
@@ -14748,21 +14747,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/temporal-polyfill": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-0.2.5.tgz",
-      "integrity": "sha512-ye47xp8Cb0nDguAhrrDS1JT1SzwEV9e26sSsrWzVu+yPZ7LzceEcH0i2gci9jWfOfSCCgM3Qv5nOYShVUUFUXA==",
-      "license": "MIT",
-      "dependencies": {
-        "temporal-spec": "^0.2.4"
-      }
-    },
-    "node_modules/temporal-spec": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/temporal-spec/-/temporal-spec-0.2.4.tgz",
-      "integrity": "sha512-lDMFv4nKQrSjlkHKAlHVqKrBG4DyFfa9F74cmBZ3Iy3ed8yvWnlWSIdi4IKfSqwmazAohBNwiN64qGx4y5Q3IQ==",
-      "license": "ISC"
-    },
     "node_modules/terser": {
       "version": "5.31.6",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.6.tgz",
diff --git a/package.json b/package.json
index 73cb9d3fa54be..d33becb2304bc 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,6 @@
     "sortablejs": "1.15.2",
     "swagger-ui-dist": "5.17.14",
     "tailwindcss": "3.4.10",
-    "temporal-polyfill": "0.2.5",
     "throttle-debounce": "5.0.2",
     "tinycolor2": "1.6.0",
     "tippy.js": "6.3.7",
diff --git a/web_src/js/webcomponents/absolute-date.test.ts b/web_src/js/webcomponents/absolute-date.test.ts
index a591df7c10ec6..b7a2354e0dd62 100644
--- a/web_src/js/webcomponents/absolute-date.test.ts
+++ b/web_src/js/webcomponents/absolute-date.test.ts
@@ -7,9 +7,15 @@ test('toAbsoluteLocaleDate', () => {
     day: 'numeric',
   })).toEqual('March 15, 2024');
 
-  expect(toAbsoluteLocaleDate('2024-03-15', 'de-DE', {
+  expect(toAbsoluteLocaleDate('2024-03-15T01:02:03', 'de-DE', {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
   })).toEqual('15. März 2024');
+
+  expect(toAbsoluteLocaleDate('12345-03-15 01:02:03', '', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })).toEqual('Mar 15, 12345');
 });
diff --git a/web_src/js/webcomponents/absolute-date.ts b/web_src/js/webcomponents/absolute-date.ts
index d2be455302450..a215722511dbf 100644
--- a/web_src/js/webcomponents/absolute-date.ts
+++ b/web_src/js/webcomponents/absolute-date.ts
@@ -1,30 +1,28 @@
-import {Temporal} from 'temporal-polyfill';
-
-export function toAbsoluteLocaleDate(dateStr, lang, opts) {
-  return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts);
+export function toAbsoluteLocaleDate(date: string, lang: string, opts: Intl.DateTimeFormatOptions) {
+  return new Date(date).toLocaleString(lang || [], opts);
 }
 
 window.customElements.define('absolute-date', class extends HTMLElement {
   static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
 
+  initialized = false;
+
   update = () => {
-    const year = this.getAttribute('year') ?? '';
-    const month = this.getAttribute('month') ?? '';
-    const weekday = this.getAttribute('weekday') ?? '';
-    const day = this.getAttribute('day') ?? '';
+    const opt: Intl.DateTimeFormatOptions = {};
+    for (const attr of ['year', 'month', 'weekday', 'day']) {
+      if (this.getAttribute(attr)) opt[attr] = this.getAttribute(attr);
+    }
     const lang = this.closest('[lang]')?.getAttribute('lang') ||
       this.ownerDocument.documentElement.getAttribute('lang') || '';
 
-    // only use the first 10 characters, e.g. the `yyyy-mm-dd` part
-    const dateStr = this.getAttribute('date').substring(0, 10);
+    // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ)
+    let date = this.getAttribute('date');
+    let dateSep = date.indexOf('T');
+    dateSep = dateSep === -1 ? date.indexOf(' ') : dateSep;
+    date = dateSep === -1 ? date : date.substring(0, dateSep);
 
     if (!this.shadowRoot) this.attachShadow({mode: 'open'});
-    this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, {
-      ...(year && {year}),
-      ...(month && {month}),
-      ...(weekday && {weekday}),
-      ...(day && {day}),
-    });
+    this.shadowRoot.textContent = toAbsoluteLocaleDate(date, lang, opt);
   };
 
   attributeChangedCallback(_name, oldValue, newValue) {

From 58eb16eda74379a9d40bc986745a5443357bb18d Mon Sep 17 00:00:00 2001
From: 6543 <6543@obermui.de>
Date: Wed, 30 Oct 2024 13:33:25 +0100
Subject: [PATCH 09/13] Respect UI.ExploreDefaultSort setting again (#32357)

fix regression of https://github.com/go-gitea/gitea/pull/29430

---
*Sponsored by Kithara Software GmbH*
---
 routers/web/explore/org.go  | 3 ++-
 routers/web/explore/user.go | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/routers/web/explore/org.go b/routers/web/explore/org.go
index 7178630b64e95..7bb71acfd78e0 100644
--- a/routers/web/explore/org.go
+++ b/routers/web/explore/org.go
@@ -9,6 +9,7 @@ import (
 	"code.gitea.io/gitea/modules/container"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/structs"
+	"code.gitea.io/gitea/modules/util"
 	"code.gitea.io/gitea/services/context"
 )
 
@@ -39,7 +40,7 @@ func Organizations(ctx *context.Context) {
 	)
 	sortOrder := ctx.FormString("sort")
 	if sortOrder == "" {
-		sortOrder = "newest"
+		sortOrder = util.Iif(supportedSortOrders.Contains(setting.UI.ExploreDefaultSort), setting.UI.ExploreDefaultSort, "newest")
 		ctx.SetFormString("sort", sortOrder)
 	}
 
diff --git a/routers/web/explore/user.go b/routers/web/explore/user.go
index 5f6b8fcee6103..c009982d420ce 100644
--- a/routers/web/explore/user.go
+++ b/routers/web/explore/user.go
@@ -16,6 +16,7 @@ import (
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/sitemap"
 	"code.gitea.io/gitea/modules/structs"
+	"code.gitea.io/gitea/modules/util"
 	"code.gitea.io/gitea/services/context"
 )
 
@@ -149,7 +150,7 @@ func Users(ctx *context.Context) {
 	)
 	sortOrder := ctx.FormString("sort")
 	if sortOrder == "" {
-		sortOrder = "newest"
+		sortOrder = util.Iif(supportedSortOrders.Contains(setting.UI.ExploreDefaultSort), setting.UI.ExploreDefaultSort, "newest")
 		ctx.SetFormString("sort", sortOrder)
 	}
 

From aee9801d468997ab3cce32978416b697d9df77a7 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 31 Oct 2024 02:36:02 +0800
Subject: [PATCH 10/13] Fix toAbsoluteLocaleDate and add more tests (#32387)

---
 .../js/webcomponents/absolute-date.test.ts    | 15 ++++++++++-----
 web_src/js/webcomponents/absolute-date.ts     | 19 ++++++++++---------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/web_src/js/webcomponents/absolute-date.test.ts b/web_src/js/webcomponents/absolute-date.test.ts
index b7a2354e0dd62..a3866829a793b 100644
--- a/web_src/js/webcomponents/absolute-date.test.ts
+++ b/web_src/js/webcomponents/absolute-date.test.ts
@@ -13,9 +13,14 @@ test('toAbsoluteLocaleDate', () => {
     day: 'numeric',
   })).toEqual('15. März 2024');
 
-  expect(toAbsoluteLocaleDate('12345-03-15 01:02:03', '', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })).toEqual('Mar 15, 12345');
+  // these cases shouldn't happen
+  expect(toAbsoluteLocaleDate('2024-03-15 01:02:03', '', {})).toEqual('Invalid Date');
+  expect(toAbsoluteLocaleDate('10000-01-01', '', {})).toEqual('Invalid Date');
+
+  // test different timezone
+  const oldTZ = process.env.TZ;
+  process.env.TZ = 'America/New_York';
+  expect(new Date('2024-03-15').toLocaleString()).toEqual('3/14/2024, 8:00:00 PM');
+  expect(toAbsoluteLocaleDate('2024-03-15')).toEqual('3/15/2024, 12:00:00 AM');
+  process.env.TZ = oldTZ;
 });
diff --git a/web_src/js/webcomponents/absolute-date.ts b/web_src/js/webcomponents/absolute-date.ts
index a215722511dbf..6a053c6a55c82 100644
--- a/web_src/js/webcomponents/absolute-date.ts
+++ b/web_src/js/webcomponents/absolute-date.ts
@@ -1,5 +1,12 @@
-export function toAbsoluteLocaleDate(date: string, lang: string, opts: Intl.DateTimeFormatOptions) {
-  return new Date(date).toLocaleString(lang || [], opts);
+export function toAbsoluteLocaleDate(date: string, lang?: string, opts?: Intl.DateTimeFormatOptions) {
+  // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ) or (YYYY-MM-DD)
+  // if there is an "Invalid Date" error, there must be something wrong in code and should be fixed.
+  // TODO: there is a root problem in backend code: the date "YYYY-MM-DD" is passed to backend without timezone (eg: deadline),
+  // then backend parses it in server's timezone and stores the parsed timestamp into database.
+  // If the user's timezone is different from the server's, the date might be displayed in the wrong day.
+  const dateSep = date.indexOf('T');
+  date = dateSep === -1 ? date : date.substring(0, dateSep);
+  return new Date(`${date}T00:00:00`).toLocaleString(lang || [], opts);
 }
 
 window.customElements.define('absolute-date', class extends HTMLElement {
@@ -15,14 +22,8 @@ window.customElements.define('absolute-date', class extends HTMLElement {
     const lang = this.closest('[lang]')?.getAttribute('lang') ||
       this.ownerDocument.documentElement.getAttribute('lang') || '';
 
-    // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ)
-    let date = this.getAttribute('date');
-    let dateSep = date.indexOf('T');
-    dateSep = dateSep === -1 ? date.indexOf(' ') : dateSep;
-    date = dateSep === -1 ? date : date.substring(0, dateSep);
-
     if (!this.shadowRoot) this.attachShadow({mode: 'open'});
-    this.shadowRoot.textContent = toAbsoluteLocaleDate(date, lang, opt);
+    this.shadowRoot.textContent = toAbsoluteLocaleDate(this.getAttribute('date'), lang, opt);
   };
 
   attributeChangedCallback(_name, oldValue, newValue) {

From dd1f67491f5e2f798a537a61c082b1bf12e47635 Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Thu, 31 Oct 2024 04:05:40 +0900
Subject: [PATCH 11/13] Fix the missing menu in organization project view page
 (#32313)

#29248 didn't modify the view page.
The class name is not good enough, so this is a quick fix.

Before:
org:

![image](https://github.com/user-attachments/assets/3e26502d-66b4-4043-ab03-003ba7391487)
user:

![image](https://github.com/user-attachments/assets/9b22b90c-d63c-4228-acad-4d9fb20590ac)


After:
org:

![image](https://github.com/user-attachments/assets/21bf98a7-8a5b-4dc6-950a-88f529e36450)
user: (no change)

![image](https://github.com/user-attachments/assets/fea0dcae-3625-44e8-bb9e-4c3733da8764)

Co-authored-by: Giteabot <teabot@gitea.io>
---
 templates/org/projects/view.tmpl | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/templates/org/projects/view.tmpl b/templates/org/projects/view.tmpl
index e1ab81c4cde5a..bd74114fe2e47 100644
--- a/templates/org/projects/view.tmpl
+++ b/templates/org/projects/view.tmpl
@@ -1,9 +1,13 @@
 {{template "base/head" .}}
-<div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
-	{{template "shared/user/org_profile_avatar" .}}
-	<div class="ui container tw-mb-4">
-		{{template "user/overview/header" .}}
-	</div>
+<div role="main" aria-label="{{.Title}}" class="page-content organization repository projects view-project">
+	{{if .ContextUser.IsOrganization}}
+		{{template "org/header" .}}
+	{{else}}
+		{{template "shared/user/org_profile_avatar" .}}
+		<div class="ui container tw-mb-4">
+			{{template "user/overview/header" .}}
+		</div>
+	{{end}}
 	<div class="ui container fluid padded">
 		{{template "projects/view" .}}
 	</div>

From f4d3aaeeb9e1b11c5495e4608a3f52f316c35758 Mon Sep 17 00:00:00 2001
From: Oleksandr Redko <oleksandr.red+github@gmail.com>
Date: Wed, 30 Oct 2024 21:36:24 +0200
Subject: [PATCH 12/13] refactor: remove redundant err declarations (#32381)

---
 build/generate-emoji.go             | 4 ----
 models/git/lfs.go                   | 2 --
 models/issues/label_test.go         | 3 +--
 modules/charset/charset_test.go     | 4 +---
 modules/markup/markdown/goldmark.go | 3 +--
 routers/api/v1/repo/repo.go         | 1 -
 routers/api/v1/user/repo.go         | 1 -
 routers/web/repo/actions/view.go    | 1 -
 routers/web/repo/activity.go        | 1 -
 routers/web/repo/view.go            | 1 -
 services/issue/template.go          | 2 --
 11 files changed, 3 insertions(+), 20 deletions(-)

diff --git a/build/generate-emoji.go b/build/generate-emoji.go
index 17a9670f06a31..446ab5f440582 100644
--- a/build/generate-emoji.go
+++ b/build/generate-emoji.go
@@ -53,8 +53,6 @@ func (e Emoji) MarshalJSON() ([]byte, error) {
 }
 
 func main() {
-	var err error
-
 	flag.Parse()
 
 	// generate data
@@ -83,8 +81,6 @@ var replacer = strings.NewReplacer(
 var emojiRE = regexp.MustCompile(`\{Emoji:"([^"]*)"`)
 
 func generate() ([]byte, error) {
-	var err error
-
 	// load gemoji data
 	res, err := http.Get(gemojiURL)
 	if err != nil {
diff --git a/models/git/lfs.go b/models/git/lfs.go
index 837dc9fd312f5..bb6361050aaef 100644
--- a/models/git/lfs.go
+++ b/models/git/lfs.go
@@ -136,8 +136,6 @@ var ErrLFSObjectNotExist = db.ErrNotExist{Resource: "LFS Meta object"}
 // NewLFSMetaObject stores a given populated LFSMetaObject structure in the database
 // if it is not already present.
 func NewLFSMetaObject(ctx context.Context, repoID int64, p lfs.Pointer) (*LFSMetaObject, error) {
-	var err error
-
 	ctx, committer, err := db.TxContext(ctx)
 	if err != nil {
 		return nil, err
diff --git a/models/issues/label_test.go b/models/issues/label_test.go
index 396de809e1d81..a0cc8e6d75640 100644
--- a/models/issues/label_test.go
+++ b/models/issues/label_test.go
@@ -229,8 +229,7 @@ func TestGetLabelsByOrgID(t *testing.T) {
 	testSuccess(3, "reversealphabetically", []int64{4, 3})
 	testSuccess(3, "default", []int64{3, 4})
 
-	var err error
-	_, err = issues_model.GetLabelsByOrgID(db.DefaultContext, 0, "leastissues", db.ListOptions{})
+	_, err := issues_model.GetLabelsByOrgID(db.DefaultContext, 0, "leastissues", db.ListOptions{})
 	assert.True(t, issues_model.IsErrOrgLabelNotExist(err))
 
 	_, err = issues_model.GetLabelsByOrgID(db.DefaultContext, -1, "leastissues", db.ListOptions{})
diff --git a/modules/charset/charset_test.go b/modules/charset/charset_test.go
index 829844a9766cd..19b1303365758 100644
--- a/modules/charset/charset_test.go
+++ b/modules/charset/charset_test.go
@@ -40,14 +40,12 @@ func TestMaybeRemoveBOM(t *testing.T) {
 
 func TestToUTF8(t *testing.T) {
 	resetDefaultCharsetsOrder()
-	var res string
-	var err error
 
 	// Note: golang compiler seems so behave differently depending on the current
 	// locale, so some conversions might behave differently. For that reason, we don't
 	// depend on particular conversions but in expected behaviors.
 
-	res, err = ToUTF8([]byte{0x41, 0x42, 0x43}, ConvertOpts{})
+	res, err := ToUTF8([]byte{0x41, 0x42, 0x43}, ConvertOpts{})
 	assert.NoError(t, err)
 	assert.Equal(t, "ABC", res)
 
diff --git a/modules/markup/markdown/goldmark.go b/modules/markup/markdown/goldmark.go
index a89670eeefdc8..515a79578deae 100644
--- a/modules/markup/markdown/goldmark.go
+++ b/modules/markup/markdown/goldmark.go
@@ -213,8 +213,7 @@ func (r *HTMLRenderer) renderIcon(w util.BufWriter, source []byte, node ast.Node
 		return ast.WalkContinue, nil
 	}
 
-	var err error
-	_, err = w.WriteString(fmt.Sprintf(`<i class="icon %s"></i>`, name))
+	_, err := w.WriteString(fmt.Sprintf(`<i class="icon %s"></i>`, name))
 	if err != nil {
 		return ast.WalkStop, err
 	}
diff --git a/routers/api/v1/repo/repo.go b/routers/api/v1/repo/repo.go
index 4638e2ba5c3a7..698ba3cc949d5 100644
--- a/routers/api/v1/repo/repo.go
+++ b/routers/api/v1/repo/repo.go
@@ -202,7 +202,6 @@ func Search(ctx *context.APIContext) {
 		}
 	}
 
-	var err error
 	repos, count, err := repo_model.SearchRepository(ctx, opts)
 	if err != nil {
 		ctx.JSON(http.StatusInternalServerError, api.SearchError{
diff --git a/routers/api/v1/user/repo.go b/routers/api/v1/user/repo.go
index d0264d6b5a261..611134142311b 100644
--- a/routers/api/v1/user/repo.go
+++ b/routers/api/v1/user/repo.go
@@ -111,7 +111,6 @@ func ListMyRepos(ctx *context.APIContext) {
 		IncludeDescription: true,
 	}
 
-	var err error
 	repos, count, err := repo_model.SearchRepository(ctx, opts)
 	if err != nil {
 		ctx.Error(http.StatusInternalServerError, "SearchRepository", err)
diff --git a/routers/web/repo/actions/view.go b/routers/web/repo/actions/view.go
index 11199d69eb3b2..20e29425a39c4 100644
--- a/routers/web/repo/actions/view.go
+++ b/routers/web/repo/actions/view.go
@@ -276,7 +276,6 @@ func ViewPost(ctx *context_module.Context) {
 			if validCursor {
 				length := step.LogLength - cursor.Cursor
 				offset := task.LogIndexes[index]
-				var err error
 				logRows, err := actions.ReadLogs(ctx, task.LogInStorage, task.LogFilename, offset, length)
 				if err != nil {
 					ctx.Error(http.StatusInternalServerError, err.Error())
diff --git a/routers/web/repo/activity.go b/routers/web/repo/activity.go
index c8fa60f77a74a..4b14c28b3e635 100644
--- a/routers/web/repo/activity.go
+++ b/routers/web/repo/activity.go
@@ -94,7 +94,6 @@ func ActivityAuthors(ctx *context.Context) {
 		timeFrom = timeUntil.Add(-time.Hour * 168)
 	}
 
-	var err error
 	authors, err := activities_model.GetActivityStatsTopAuthors(ctx, ctx.Repo.Repository, timeFrom, 10)
 	if err != nil {
 		ctx.ServerError("GetActivityStatsTopAuthors", err)
diff --git a/routers/web/repo/view.go b/routers/web/repo/view.go
index 9769117609485..7d9281b397387 100644
--- a/routers/web/repo/view.go
+++ b/routers/web/repo/view.go
@@ -143,7 +143,6 @@ func findReadmeFileInEntries(ctx *context.Context, entries []*git.TreeEntry, try
 				// this should be impossible; if subTreeEntry exists so should this.
 				continue
 			}
-			var err error
 			childEntries, err := subTree.ListEntries()
 			if err != nil {
 				return "", nil, err
diff --git a/services/issue/template.go b/services/issue/template.go
index dd9d015f0fa0f..4b0f1aa987047 100644
--- a/services/issue/template.go
+++ b/services/issue/template.go
@@ -52,8 +52,6 @@ func GetTemplateConfig(gitRepo *git.Repository, path string, commit *git.Commit)
 		return GetDefaultTemplateConfig(), nil
 	}
 
-	var err error
-
 	treeEntry, err := commit.GetTreeEntryByPath(path)
 	if err != nil {
 		return GetDefaultTemplateConfig(), err

From a4a121c684fdbbad19971ff658166fd47932b192 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 31 Oct 2024 04:06:36 +0800
Subject: [PATCH 13/13] Fix suggestions for issues (#32380)

---
 routers/web/repo/issue_suggestions.go    | 27 +++++------------
 web_src/js/components/ContextPopup.vue   |  7 +++--
 web_src/js/features/comp/TextExpander.ts | 36 ++++++++--------------
 web_src/js/features/contextpopup.ts      | 10 +++----
 web_src/js/svg.ts                        |  3 +-
 web_src/js/types.ts                      | 11 +++----
 web_src/js/utils.test.ts                 | 38 ++++++++++++++----------
 web_src/js/utils.ts                      | 14 ++++++---
 web_src/js/utils/dom.test.ts             |  6 ++--
 web_src/js/utils/dom.ts                  | 12 ++++----
 web_src/js/utils/match.ts                |  6 ++--
 11 files changed, 82 insertions(+), 88 deletions(-)

diff --git a/routers/web/repo/issue_suggestions.go b/routers/web/repo/issue_suggestions.go
index 361da0ee60953..46e9f339a5a53 100644
--- a/routers/web/repo/issue_suggestions.go
+++ b/routers/web/repo/issue_suggestions.go
@@ -11,19 +11,10 @@ import (
 	"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/modules/structs"
 	"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")
@@ -61,13 +52,14 @@ func IssueSuggestions(ctx *context.Context) {
 		return
 	}
 
-	suggestions := make([]*issueSuggestion, 0, len(issues))
+	suggestions := make([]*structs.Issue, 0, len(issues))
 
 	for _, issue := range issues {
-		suggestion := &issueSuggestion{
+		suggestion := &structs.Issue{
 			ID:    issue.ID,
+			Index: issue.Index,
 			Title: issue.Title,
-			State: string(issue.State()),
+			State: issue.State(),
 		}
 
 		if issue.IsPull {
@@ -76,12 +68,9 @@ func IssueSuggestions(ctx *context.Context) {
 				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),
+				suggestion.PullRequest = &structs.PullRequestMeta{
+					HasMerged:        issue.PullRequest.HasMerged,
+					IsWorkInProgress: issue.PullRequest.IsWorkInProgress(ctx),
 				}
 			}
 		}
diff --git a/web_src/js/components/ContextPopup.vue b/web_src/js/components/ContextPopup.vue
index 8c56af858e33f..b0e8447302ffe 100644
--- a/web_src/js/components/ContextPopup.vue
+++ b/web_src/js/components/ContextPopup.vue
@@ -3,6 +3,7 @@ import {SvgIcon} from '../svg.ts';
 import {GET} from '../modules/fetch.ts';
 import {getIssueColor, getIssueIcon} from '../features/issue.ts';
 import {computed, onMounted, ref} from 'vue';
+import type {IssuePathInfo} from '../types.ts';
 
 const {appSubUrl, i18n} = window.config;
 
@@ -25,19 +26,19 @@ const root = ref<HTMLElement | null>(null);
 
 onMounted(() => {
   root.value.addEventListener('ce-load-context-popup', (e: CustomEvent) => {
-    const data = e.detail;
+    const data: IssuePathInfo = e.detail;
     if (!loading.value && issue.value === null) {
       load(data);
     }
   });
 });
 
-async function load(data) {
+async function load(issuePathInfo: IssuePathInfo) {
   loading.value = true;
   i18nErrorMessage.value = null;
 
   try {
-    const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo
+    const response = await GET(`${appSubUrl}/${issuePathInfo.ownerName}/${issuePathInfo.repoName}/issues/${issuePathInfo.indexString}/info`); // backend: GetIssueInfo
     const respJson = await response.json();
     if (!response.ok) {
       i18nErrorMessage.value = respJson.message ?? i18n.network_error;
diff --git a/web_src/js/features/comp/TextExpander.ts b/web_src/js/features/comp/TextExpander.ts
index 6ac4c4bf32c19..e0c4abed75b80 100644
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -1,39 +1,29 @@
 import {matchEmoji, matchMention, matchIssue} from '../../utils/match.ts';
 import {emojiString} from '../emoji.ts';
 import {svg} from '../../svg.ts';
-import {parseIssueHref} from '../../utils.ts';
+import {parseIssueHref, parseIssueNewHref} from '../../utils.ts';
 import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
 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);
+  let issuePathInfo = parseIssueHref(window.location.href);
+  if (!issuePathInfo.ownerName) issuePathInfo = parseIssueNewHref(window.location.href);
+  if (!issuePathInfo.ownerName) return resolve({matched: false});
+
+  const matches = await matchIssue(issuePathInfo.ownerName, issuePathInfo.repoName, issuePathInfo.indexString, text);
   if (!matches.length) return resolve({matched: false});
 
-  const ul = document.createElement('ul');
-  ul.classList.add('suggestions');
+  const ul = createElementFromAttrs('ul', {class: 'suggestions'});
   for (const issue of matches) {
-    const li = createElementFromAttrs('li', {
-      role: 'option',
-      'data-value': `${key}${issue.id}`,
-      class: '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);
-
+    const li = createElementFromAttrs(
+      'li', {role: 'option', class: 'tw-flex tw-gap-2', 'data-value': `${key}${issue.number}`},
+      createElementFromHTML(svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)])),
+      createElementFromAttrs('span', null, `#${issue.number}`),
+      createElementFromAttrs('span', null, issue.title),
+    );
     ul.append(li);
   }
-
   resolve({matched: true, fragment: ul});
 }), 100);
 
diff --git a/web_src/js/features/contextpopup.ts b/web_src/js/features/contextpopup.ts
index 5af7d176b6fb0..33eead8431c5f 100644
--- a/web_src/js/features/contextpopup.ts
+++ b/web_src/js/features/contextpopup.ts
@@ -10,12 +10,10 @@ export function initContextPopups() {
 
 export function attachRefIssueContextPopup(refIssues) {
   for (const refIssue of refIssues) {
-    if (refIssue.classList.contains('ref-external-issue')) {
-      return;
-    }
+    if (refIssue.classList.contains('ref-external-issue')) continue;
 
-    const {owner, repo, index} = parseIssueHref(refIssue.getAttribute('href'));
-    if (!owner) return;
+    const issuePathInfo = parseIssueHref(refIssue.getAttribute('href'));
+    if (!issuePathInfo.ownerName) continue;
 
     const el = document.createElement('div');
     el.classList.add('tw-p-3');
@@ -38,7 +36,7 @@ export function attachRefIssueContextPopup(refIssues) {
       role: 'dialog',
       interactiveBorder: 5,
       onShow: () => {
-        el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));
+        el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: issuePathInfo}));
       },
     });
   }
diff --git a/web_src/js/svg.ts b/web_src/js/svg.ts
index 6a4bfafc9244c..6227a85e33eea 100644
--- a/web_src/js/svg.ts
+++ b/web_src/js/svg.ts
@@ -153,7 +153,8 @@ export type SvgName = keyof typeof svgs;
 //  most of the SVG icons in assets couldn't be used directly.
 
 // retrieve an HTML string for given SVG icon name, size and additional classes
-export function svg(name: SvgName, size = 16, className = '') {
+export function svg(name: SvgName, size = 16, classNames: string|string[]): string {
+  const className = Array.isArray(classNames) ? classNames.join(' ') : classNames;
   if (!(name in svgs)) throw new Error(`Unknown SVG icon: ${name}`);
   if (size === 16 && !className) return svgs[name];
 
diff --git a/web_src/js/types.ts b/web_src/js/types.ts
index c38c8bda96f0c..9c601456bd9f1 100644
--- a/web_src/js/types.ts
+++ b/web_src/js/types.ts
@@ -30,15 +30,16 @@ export type RequestOpts = {
   data?: RequestData,
 } & RequestInit;
 
-export type IssueData = {
-  owner: string,
-  repo: string,
-  type: string,
-  index: string,
+export type IssuePathInfo = {
+  ownerName: string,
+  repoName: string,
+  pathType: string,
+  indexString?: string,
 }
 
 export type Issue = {
   id: number;
+  number: number;
   title: string;
   state: 'open' | 'closed';
   pull_request?: {
diff --git a/web_src/js/utils.test.ts b/web_src/js/utils.test.ts
index 55896706fff46..647676bf20562 100644
--- a/web_src/js/utils.test.ts
+++ b/web_src/js/utils.test.ts
@@ -1,7 +1,7 @@
 import {
   basename, extname, isObject, stripTags, parseIssueHref,
   parseUrl, translateMonth, translateDay, blobToDataURI,
-  toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64, isImageFile, isVideoFile,
+  toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64, isImageFile, isVideoFile, parseIssueNewHref,
 } from './utils.ts';
 
 test('basename', () => {
@@ -28,21 +28,27 @@ test('stripTags', () => {
 });
 
 test('parseIssueHref', () => {
-  expect(parseIssueHref('/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('/owner/repo/pulls/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
-  expect(parseIssueHref('/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('/sub/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('/sub/sub2/owner/repo/pulls/1')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
-  expect(parseIssueHref('/sub/sub2/owner/repo/issues/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('https://example.com/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('https://example.com/owner/repo/pulls/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
-  expect(parseIssueHref('https://example.com/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('https://example.com/sub/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/pulls/1')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
-  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
-  expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined});
+  expect(parseIssueHref('/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('/owner/repo/pulls/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});
+  expect(parseIssueHref('/owner/repo/issues/1#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('/sub/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('/sub/sub2/owner/repo/pulls/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});
+  expect(parseIssueHref('/sub/sub2/owner/repo/issues/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('/sub/sub2/owner/repo/issues/1#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('https://example.com/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('https://example.com/owner/repo/pulls/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});
+  expect(parseIssueHref('https://example.com/owner/repo/issues/1#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('https://example.com/sub/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/pulls/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});
+  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
+  expect(parseIssueHref('')).toEqual({ownerName: undefined, repoName: undefined, type: undefined, index: undefined});
+});
+
+test('parseIssueNewHref', () => {
+  expect(parseIssueNewHref('/owner/repo/issues/new')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues'});
+  expect(parseIssueNewHref('/owner/repo/issues/new?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues'});
+  expect(parseIssueNewHref('/sub/owner/repo/issues/new#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues'});
 });
 
 test('parseUrl', () => {
diff --git a/web_src/js/utils.ts b/web_src/js/utils.ts
index c52bf500d439b..066a7c7b5460e 100644
--- a/web_src/js/utils.ts
+++ b/web_src/js/utils.ts
@@ -1,5 +1,5 @@
 import {encode, decode} from 'uint8-to-base64';
-import type {IssueData} from './types.ts';
+import type {IssuePathInfo} from './types.ts';
 
 // transform /path/to/file.ext to file.ext
 export function basename(path: string): string {
@@ -31,10 +31,16 @@ export function stripTags(text: string): string {
   return text.replace(/<[^>]*>?/g, '');
 }
 
-export function parseIssueHref(href: string): IssueData {
+export function parseIssueHref(href: string): IssuePathInfo {
   const path = (href || '').replace(/[#?].*$/, '');
-  const [_, owner, repo, type, index] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || [];
-  return {owner, repo, type, index};
+  const [_, ownerName, repoName, pathType, indexString] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || [];
+  return {ownerName, repoName, pathType, indexString};
+}
+
+export function parseIssueNewHref(href: string): IssuePathInfo {
+  const path = (href || '').replace(/[#?].*$/, '');
+  const [_, ownerName, repoName, pathType, indexString] = /([^/]+)\/([^/]+)\/(issues|pulls)\/new/.exec(path) || [];
+  return {ownerName, repoName, pathType, indexString};
 }
 
 // parse a URL, either relative '/path' or absolute 'https://localhost/path'
diff --git a/web_src/js/utils/dom.test.ts b/web_src/js/utils/dom.test.ts
index 13df82d9b49f9..5c235795fd454 100644
--- a/web_src/js/utils/dom.test.ts
+++ b/web_src/js/utils/dom.test.ts
@@ -8,11 +8,11 @@ test('createElementFromAttrs', () => {
   const el = createElementFromAttrs('button', {
     id: 'the-id',
     class: 'cls-1 cls-2',
-    'data-foo': 'the-data',
     disabled: true,
     checked: false,
     required: null,
     tabindex: 0,
-  });
-  expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" data-foo="the-data" disabled="" tabindex="0"></button>');
+    'data-foo': 'the-data',
+  }, 'txt', createElementFromHTML('<span>inner</span>'));
+  expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" disabled="" tabindex="0" data-foo="the-data">txt<span>inner</span></button>');
 });
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index 7dd63ecbbf01a..5b118b991d564 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -298,22 +298,24 @@ export function replaceTextareaSelection(textarea: HTMLTextAreaElement, text: st
 }
 
 // Warning: Do not enter any unsanitized variables here
-export function createElementFromHTML(htmlString: string) {
+export function createElementFromHTML(htmlString: string): HTMLElement {
   const div = document.createElement('div');
   div.innerHTML = htmlString.trim();
-  return div.firstChild as Element;
+  return div.firstChild as HTMLElement;
 }
 
-export function createElementFromAttrs(tagName: string, attrs: Record<string, any>) {
+export function createElementFromAttrs(tagName: string, attrs: Record<string, any>, ...children: (Node|string)[]): HTMLElement {
   const el = document.createElement(tagName);
-  for (const [key, value] of Object.entries(attrs)) {
+  for (const [key, value] of Object.entries(attrs || {})) {
     if (value === undefined || value === null) continue;
     if (typeof value === 'boolean') {
       el.toggleAttribute(key, value);
     } else {
       el.setAttribute(key, String(value));
     }
-    // TODO: in the future we could make it also support "textContent" and "innerHTML" properties if needed
+  }
+  for (const child of children) {
+    el.append(child instanceof Node ? child : document.createTextNode(child));
   }
   return el;
 }
diff --git a/web_src/js/utils/match.ts b/web_src/js/utils/match.ts
index 2c7271f16eee5..1161ea6250b8f 100644
--- a/web_src/js/utils/match.ts
+++ b/web_src/js/utils/match.ts
@@ -1,6 +1,6 @@
 import emojis from '../../../assets/emoji.json';
-import type {Issue} from '../features/issue.ts';
 import {GET} from '../modules/fetch.ts';
+import type {Issue} from '../features/issue.ts';
 
 const maxMatches = 6;
 
@@ -49,8 +49,8 @@ export async function matchIssue(owner: string, repo: string, issueIndexStr: str
   const res = await GET(`${window.config.appSubUrl}/${owner}/${repo}/issues/suggestions?q=${encodeURIComponent(query)}`);
 
   const issues: Issue[] = await res.json();
-  const issueIndex = parseInt(issueIndexStr);
+  const issueNumber = parseInt(issueIndexStr);
 
   // filter out issue with same id
-  return issues.filter((i) => i.id !== issueIndex);
+  return issues.filter((i) => i.number !== issueNumber);
 }