gitea source for verification 2026-05-22

web_src/js/bootstrap.test.ts

@@ -0,0 +1,12 @@
+import {showGlobalErrorMessage} from './bootstrap.ts';
+
+test('showGlobalErrorMessage', () => {
+  document.body.innerHTML = '<div class="page-content"></div>';
+  showGlobalErrorMessage('test msg 1');
+  showGlobalErrorMessage('test msg 2');
+  showGlobalErrorMessage('test msg 1'); // duplicated
+
+  expect(document.body.innerHTML).toContain('>test msg 1 (2)<');
+  expect(document.body.innerHTML).toContain('>test msg 2<');
+  expect(document.querySelectorAll('.js-global-error').length).toEqual(2);
+});

web_src/js/bootstrap.ts

@@ -0,0 +1,92 @@
+// DO NOT IMPORT window.config HERE!
+// to make sure the error handler always works, we should never import `window.config`, because
+// some user's custom template breaks it.
+import type {Intent} from './types.ts';
+import {html} from './utils/html.ts';
+
+// This sets up the URL prefix used in webpack's chunk loading.
+// This file must be imported before any lazy-loading is being attempted.
+__webpack_public_path__ = `${window.config?.assetUrlPrefix ?? '/assets'}/`;
+
+function shouldIgnoreError(err: Error) {
+  const ignorePatterns = [
+    '/assets/js/monaco.', // https://github.com/go-gitea/gitea/issues/30861 , https://github.com/microsoft/monaco-editor/issues/4496
+  ];
+  for (const pattern of ignorePatterns) {
+    if (err.stack?.includes(pattern)) return true;
+  }
+  return false;
+}
+
+export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error') {
+  const msgContainer = document.querySelector('.page-content') ?? document.body;
+  if (!msgContainer) {
+    alert(`${msgType}: ${msg}`);
+    return;
+  }
+  const msgCompact = msg.replace(/\W/g, '').trim(); // compact the message to a data attribute to avoid too many duplicated messages
+  let msgDiv = msgContainer.querySelector<HTMLDivElement>(`.js-global-error[data-global-error-msg-compact="${msgCompact}"]`);
+  if (!msgDiv) {
+    const el = document.createElement('div');
+    el.innerHTML = html`<div class="ui container js-global-error tw-my-[--page-spacing]"><div class="ui ${msgType} message tw-text-center tw-whitespace-pre-line"></div></div>`;
+    msgDiv = el.childNodes[0] as HTMLDivElement;
+  }
+  // merge duplicated messages into "the message (count)" format
+  const msgCount = Number(msgDiv.getAttribute(`data-global-error-msg-count`)) + 1;
+  msgDiv.setAttribute(`data-global-error-msg-compact`, msgCompact);
+  msgDiv.setAttribute(`data-global-error-msg-count`, msgCount.toString());
+  msgDiv.querySelector('.ui.message').textContent = msg + (msgCount > 1 ? ` (${msgCount})` : '');
+  msgContainer.prepend(msgDiv);
+}
+
+function processWindowErrorEvent({error, reason, message, type, filename, lineno, colno}: ErrorEvent & PromiseRejectionEvent) {
+  const err = error ?? reason;
+  const assetBaseUrl = String(new URL(__webpack_public_path__, window.location.origin));
+  const {runModeIsProd} = window.config ?? {};
+
+  // `error` and `reason` are not guaranteed to be errors. If the value is falsy, it is likely a
+  // non-critical event from the browser. We log them but don't show them to users. Examples:
+  // - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+  // - https://github.com/mozilla-mobile/firefox-ios/issues/10817
+  // - https://github.com/go-gitea/gitea/issues/20240
+  if (!err) {
+    if (message) console.error(new Error(message));
+    if (runModeIsProd) return;
+  }
+
+  if (err instanceof Error) {
+    // If the error stack trace does not include the base URL of our script assets, it likely came
+    // from a browser extension or inline script. Do not show such errors in production.
+    if (!err.stack?.includes(assetBaseUrl) && runModeIsProd) return;
+    // Ignore some known errors that are unable to fix
+    if (shouldIgnoreError(err)) return;
+  }
+
+  let msg = err?.message ?? message;
+  if (lineno) msg += ` (${filename} @ ${lineno}:${colno})`;
+  const dot = msg.endsWith('.') ? '' : '.';
+  const renderedType = type === 'unhandledrejection' ? 'promise rejection' : type;
+  showGlobalErrorMessage(`JavaScript ${renderedType}: ${msg}${dot} Open browser console to see more details.`);
+}
+
+function initGlobalErrorHandler() {
+  if (window._globalHandlerErrors?._inited) {
+    showGlobalErrorMessage(`The global error handler has been initialized, do not initialize it again`);
+    return;
+  }
+  if (!window.config) {
+    showGlobalErrorMessage(`Gitea JavaScript code couldn't run correctly, please check your custom templates`);
+  }
+  // we added an event handler for window error at the very beginning of <script> of page head the
+  // handler calls `_globalHandlerErrors.push` (array method) to record all errors occur before
+  // this init then in this init, we can collect all error events and show them.
+  for (const e of window._globalHandlerErrors || []) {
+    processWindowErrorEvent(e);
+  }
+  // then, change _globalHandlerErrors to an object with push method, to process further error
+  // events directly
+  // @ts-expect-error -- this should be refactored to not use a fake array
+  window._globalHandlerErrors = {_inited: true, push: (e: ErrorEvent & PromiseRejectionEvent) => processWindowErrorEvent(e)};
+}
+
+initGlobalErrorHandler();

web_src/js/components/ActionRunStatus.vue

@@ -0,0 +1,30 @@
+<!-- This vue should be kept the same as templates/repo/actions/status.tmpl
+    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" setup>
+import {SvgIcon} from '../svg.ts';
+
+withDefaults(defineProps<{
+  status: 'success' | 'skipped' | 'waiting' | 'blocked' | 'running' | 'failure' | 'cancelled' | 'unknown',
+  size?: number,
+  className?: string,
+  localeStatus?: string,
+}>(), {
+  size: 16,
+  className: '',
+  localeStatus: undefined,
+});
+</script>
+
+<template>
+  <span :data-tooltip-content="localeStatus ?? status" v-if="status">
+    <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class="className" v-if="status === 'success'"/>
+    <SvgIcon name="octicon-skip" class="text grey" :size="size" :class="className" v-else-if="status === 'skipped'"/>
+    <SvgIcon name="octicon-stop" class="text grey" :size="size" :class="className" v-else-if="status === 'cancelled'"/>
+    <SvgIcon name="octicon-circle" class="text grey" :size="size" :class="className" v-else-if="status === 'waiting'"/>
+    <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class="className" v-else-if="status === 'blocked'"/>
+    <SvgIcon name="gitea-running" class="text yellow" :size="size" :class="'rotate-clockwise ' + className" v-else-if="status === 'running'"/>
+    <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/><!-- failure, unknown -->
+  </span>
+</template>

web_src/js/components/ActivityHeatmap.vue

@@ -0,0 +1,69 @@
+<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, shallowRef} from 'vue';
+import type {Value as HeatmapValue, Locale as HeatmapLocale} from '@silverwind/vue3-calendar-heatmap';
+
+defineProps<{
+  values?: HeatmapValue[];
+  locale: {
+    textTotalContributions: string;
+    heatMapLocale: Partial<HeatmapLocale>;
+    noDataText: string;
+    tooltipUnit: string;
+  };
+}>();
+
+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)',
+];
+
+const endDate = shallowRef(new Date());
+
+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">
+    {{ locale.textTotalContributions }}
+  </div>
+  <calendar-heatmap
+    :locale="locale.heatMapLocale"
+    :no-data-text="locale.noDataText"
+    :tooltip-unit="locale.tooltipUnit"
+    :end-date="endDate"
+    :values="values"
+    :range-color="colorRange"
+    @day-click="handleDayClick($event)"
+    :tippy-props="{theme: 'tooltip'}"
+  />
+</template>

web_src/js/components/ContextPopup.vue

@@ -0,0 +1,67 @@
+<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, shallowRef} from 'vue';
+
+const props = defineProps<{
+  repoLink: string,
+  loadIssueInfoUrl: string,
+}>();
+
+const loading = shallowRef(false);
+const issue = shallowRef(null);
+const renderedLabels = shallowRef('');
+const errorMessage = shallowRef(null);
+
+const createdAt = computed(() => {
+  return 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, ' ');
+  return body.length > 85 ? `${body.substring(0, 85)}…` : body;
+});
+
+onMounted(async () => {
+  loading.value = true;
+  errorMessage.value = null;
+  try {
+    const resp = await GET(props.loadIssueInfoUrl);
+    if (!resp.ok) {
+      errorMessage.value = resp.status ? resp.statusText : 'Unknown network error';
+      return;
+    }
+    const respJson = await resp.json();
+    issue.value = respJson.convertedIssue;
+    renderedLabels.value = respJson.renderedLabels;
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="tw-p-4">
+    <div v-if="loading" class="tw-h-12 tw-w-12 is-loading"/>
+    <div v-else-if="issue" class="tw-flex tw-flex-col tw-gap-2">
+      <div class="tw-text-12">
+        <a :href="repoLink" class="muted">{{ issue.repository.full_name }}</a>
+        on {{ createdAt }}
+      </div>
+      <div class="flex-text-block">
+        <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>
+        </span>
+      </div>
+      <div v-if="body">{{ body }}</div>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-if="issue.labels.length" v-html="renderedLabels"/>
+    </div>
+    <div v-else>
+      {{ errorMessage }}
+    </div>
+  </div>
+</template>

web_src/js/components/DashboardRepoList.vue

@@ -0,0 +1,580 @@
+<script lang="ts">
+import {nextTick, defineComponent} from 'vue';
+import {SvgIcon} from '../svg.ts';
+import {GET} from '../modules/fetch.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+
+const {appSubUrl, assetUrlPrefix, pageData} = window.config;
+
+type CommitStatus = 'pending' | 'success' | 'error' | 'failure' | 'warning' | 'skipped';
+
+type CommitStatusMap = {
+  [status in CommitStatus]: {
+    name: string,
+    color: string,
+  };
+};
+
+// make sure this matches templates/repo/commit_status.tmpl
+const commitStatus: CommitStatusMap = {
+  pending: {name: 'octicon-dot-fill', color: 'yellow'},
+  success: {name: 'octicon-check', color: 'green'},
+  error: {name: 'gitea-exclamation', color: 'red'},
+  failure: {name: 'octicon-x', color: 'red'},
+  warning: {name: 'gitea-exclamation', color: 'yellow'},
+  skipped: {name: 'octicon-skip', color: 'grey'},
+};
+
+export default defineComponent({
+  components: {SvgIcon},
+  data() {
+    const params = new URLSearchParams(window.location.search);
+    const tab = params.get('repo-search-tab') || 'repos';
+    const reposFilter = params.get('repo-search-filter') || 'all';
+    const privateFilter = params.get('repo-search-private') || 'both';
+    const archivedFilter = params.get('repo-search-archived') || 'unarchived';
+    const searchQuery = params.get('repo-search-query') || '';
+    const page = Number(params.get('repo-search-page')) || 1;
+
+    return {
+      tab,
+      repos: [],
+      reposTotalCount: null,
+      reposFilter,
+      archivedFilter,
+      privateFilter,
+      page,
+      finalPage: 1,
+      searchQuery,
+      isLoading: false,
+      staticPrefix: assetUrlPrefix,
+      counts: {},
+      repoTypes: {
+        all: {
+          searchMode: '',
+        },
+        forks: {
+          searchMode: 'fork',
+        },
+        mirrors: {
+          searchMode: 'mirror',
+        },
+        sources: {
+          searchMode: 'source',
+        },
+        collaborative: {
+          searchMode: 'collaborative',
+        },
+      },
+      textArchivedFilterTitles: {},
+      textPrivateFilterTitles: {},
+
+      organizations: [],
+      isOrganization: true,
+      canCreateOrganization: false,
+      organizationsTotalCount: 0,
+      organizationId: 0,
+
+      subUrl: appSubUrl,
+      ...pageData.dashboardRepoList,
+      activeIndex: -1, // don't select anything at load, first cursor down will select
+    };
+  },
+
+  computed: {
+    showMoreReposLink() {
+      return this.repos.length > 0 && this.repos.length < this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`];
+    },
+    searchURL() {
+      return `${this.subUrl}/repo/search?sort=updated&order=desc&uid=${this.uid}&team_id=${this.teamId}&q=${this.searchQuery
+      }&page=${this.page}&limit=${this.searchLimit}&mode=${this.repoTypes[this.reposFilter].searchMode
+      }${this.archivedFilter === 'archived' ? '&archived=true' : ''}${this.archivedFilter === 'unarchived' ? '&archived=false' : ''
+      }${this.privateFilter === 'private' ? '&is_private=true' : ''}${this.privateFilter === 'public' ? '&is_private=false' : ''
+      }`;
+    },
+    repoTypeCount() {
+      return this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`];
+    },
+    checkboxArchivedFilterTitle() {
+      return this.textArchivedFilterTitles[this.archivedFilter];
+    },
+    checkboxArchivedFilterProps() {
+      return {checked: this.archivedFilter === 'archived', indeterminate: this.archivedFilter === 'both'};
+    },
+    checkboxPrivateFilterTitle() {
+      return this.textPrivateFilterTitles[this.privateFilter];
+    },
+    checkboxPrivateFilterProps() {
+      return {checked: this.privateFilter === 'private', indeterminate: this.privateFilter === 'both'};
+    },
+  },
+
+  mounted() {
+    const el = document.querySelector('#dashboard-repo-list');
+    this.changeReposFilter(this.reposFilter);
+    fomanticQuery(el.querySelector('.ui.dropdown')).dropdown();
+
+    this.textArchivedFilterTitles = {
+      'archived': this.textShowOnlyArchived,
+      'unarchived': this.textShowOnlyUnarchived,
+      'both': this.textShowBothArchivedUnarchived,
+    };
+
+    this.textPrivateFilterTitles = {
+      'private': this.textShowOnlyPrivate,
+      'public': this.textShowOnlyPublic,
+      'both': this.textShowBothPrivatePublic,
+    };
+  },
+
+  methods: {
+    changeTab(tab: string) {
+      this.tab = tab;
+      this.updateHistory();
+    },
+
+    changeReposFilter(filter: string) {
+      this.reposFilter = filter;
+      this.repos = [];
+      this.page = 1;
+      this.counts[`${filter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
+      this.searchRepos();
+    },
+
+    updateHistory() {
+      const params = new URLSearchParams(window.location.search);
+
+      if (this.tab === 'repos') {
+        params.delete('repo-search-tab');
+      } else {
+        params.set('repo-search-tab', this.tab);
+      }
+
+      if (this.reposFilter === 'all') {
+        params.delete('repo-search-filter');
+      } else {
+        params.set('repo-search-filter', this.reposFilter);
+      }
+
+      if (this.privateFilter === 'both') {
+        params.delete('repo-search-private');
+      } else {
+        params.set('repo-search-private', this.privateFilter);
+      }
+
+      if (this.archivedFilter === 'unarchived') {
+        params.delete('repo-search-archived');
+      } else {
+        params.set('repo-search-archived', this.archivedFilter);
+      }
+
+      if (this.searchQuery === '') {
+        params.delete('repo-search-query');
+      } else {
+        params.set('repo-search-query', this.searchQuery);
+      }
+
+      if (this.page === 1) {
+        params.delete('repo-search-page');
+      } else {
+        params.set('repo-search-page', `${this.page}`);
+      }
+
+      const queryString = params.toString();
+      if (queryString) {
+        window.history.replaceState({}, '', `?${queryString}`);
+      } else {
+        window.history.replaceState({}, '', window.location.pathname);
+      }
+    },
+
+    toggleArchivedFilter() {
+      if (this.archivedFilter === 'unarchived') {
+        this.archivedFilter = 'archived';
+      } else if (this.archivedFilter === 'archived') {
+        this.archivedFilter = 'both';
+      } else { // including both
+        this.archivedFilter = 'unarchived';
+      }
+      this.page = 1;
+      this.repos = [];
+      this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
+      this.searchRepos();
+    },
+
+    togglePrivateFilter() {
+      if (this.privateFilter === 'both') {
+        this.privateFilter = 'public';
+      } else if (this.privateFilter === 'public') {
+        this.privateFilter = 'private';
+      } else { // including private
+        this.privateFilter = 'both';
+      }
+      this.page = 1;
+      this.repos = [];
+      this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
+      this.searchRepos();
+    },
+
+    async changePage(page: number) {
+      if (this.isLoading) return;
+
+      this.page = page;
+      if (this.page > this.finalPage) {
+        this.page = this.finalPage;
+      }
+      if (this.page < 1) {
+        this.page = 1;
+      }
+      this.repos = [];
+      this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = 0;
+      await this.searchRepos();
+    },
+
+    async searchRepos() {
+      this.isLoading = true;
+
+      const searchedMode = this.repoTypes[this.reposFilter].searchMode;
+      const searchedURL = this.searchURL;
+      const searchedQuery = this.searchQuery;
+
+      let response, json;
+      try {
+        const firstLoad = this.reposTotalCount === null;
+        if (!this.reposTotalCount) {
+          const totalCountSearchURL = `${this.subUrl}/repo/search?count_only=1&uid=${this.uid}&team_id=${this.teamId}&q=&page=1&mode=`;
+          response = await GET(totalCountSearchURL);
+          this.reposTotalCount = parseInt(response.headers.get('X-Total-Count') ?? '0');
+        }
+        if (firstLoad && this.reposTotalCount) {
+          nextTick(() => {
+            // MDN: If there's no focused element, this is the Document.body or Document.documentElement.
+            if ((document.activeElement === document.body || document.activeElement === document.documentElement)) {
+              this.$refs.search.focus({preventScroll: true});
+            }
+          });
+        }
+        response = await GET(searchedURL);
+        json = await response.json();
+      } catch {
+        if (searchedURL === this.searchURL) {
+          this.isLoading = false;
+        }
+        return;
+      }
+
+      if (searchedURL === this.searchURL) {
+        this.repos = json.data.map((webSearchRepo: any) => {
+          return {
+            ...webSearchRepo.repository,
+            latest_commit_status_state: webSearchRepo.latest_commit_status?.State, // if latest_commit_status is null, it means there is no commit status
+            latest_commit_status_state_link: webSearchRepo.latest_commit_status?.TargetURL,
+            locale_latest_commit_status_state: webSearchRepo.locale_latest_commit_status,
+          };
+        });
+        const count = Number(response.headers.get('X-Total-Count'));
+        if (searchedQuery === '' && searchedMode === '' && this.archivedFilter === 'both') {
+          this.reposTotalCount = count;
+        }
+        this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`] = count;
+        this.finalPage = Math.ceil(count / this.searchLimit);
+        this.updateHistory();
+        this.isLoading = false;
+      }
+    },
+
+    repoIcon(repo: any) {
+      if (repo.fork) {
+        return 'octicon-repo-forked';
+      } else if (repo.mirror) {
+        return 'octicon-mirror';
+      } else if (repo.template) {
+        return `octicon-repo-template`;
+      } else if (repo.private) {
+        return 'octicon-lock';
+      } else if (repo.internal) {
+        return 'octicon-repo';
+      }
+      return 'octicon-repo';
+    },
+
+    statusIcon(status: CommitStatus) {
+      return commitStatus[status].name;
+    },
+
+    statusColor(status: CommitStatus) {
+      return commitStatus[status].color;
+    },
+
+    async reposFilterKeyControl(e: KeyboardEvent) {
+      switch (e.key) {
+        case 'Enter':
+          document.querySelector<HTMLAnchorElement>('.repo-owner-name-list li.active a')?.click();
+          break;
+        case 'ArrowUp':
+          if (this.activeIndex > 0) {
+            this.activeIndex--;
+          } else if (this.page > 1) {
+            await this.changePage(this.page - 1);
+            this.activeIndex = this.searchLimit - 1;
+          }
+          break;
+        case 'ArrowDown':
+          if (this.activeIndex < this.repos.length - 1) {
+            this.activeIndex++;
+          } else if (this.page < this.finalPage) {
+            this.activeIndex = 0;
+            await this.changePage(this.page + 1);
+          }
+          break;
+        case 'ArrowRight':
+          if (this.page < this.finalPage) {
+            await this.changePage(this.page + 1);
+          }
+          break;
+        case 'ArrowLeft':
+          if (this.page > 1) {
+            await this.changePage(this.page - 1);
+          }
+          break;
+      }
+      if (this.activeIndex === -1 || this.activeIndex > this.repos.length - 1) {
+        this.activeIndex = 0;
+      }
+    },
+  },
+});
+</script>
+<template>
+  <div>
+    <div v-if="!isOrganization" class="ui two item menu">
+      <a :class="{item: true, active: tab === 'repos'}" @click="changeTab('repos')">{{ textRepository }}</a>
+      <a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textOrganization }}</a>
+    </div>
+    <div v-show="tab === 'repos'" class="ui tab active list dashboard-repos">
+      <h4 class="ui top attached header tw-flex tw-items-center">
+        <div class="tw-flex-1 tw-flex tw-items-center">
+          {{ textMyRepos }}
+          <span v-if="reposTotalCount" class="ui grey label tw-ml-2">{{ reposTotalCount }}</span>
+        </div>
+        <a class="tw-flex tw-items-center muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo">
+          <svg-icon name="octicon-plus"/>
+        </a>
+      </h4>
+      <div v-if="!reposTotalCount" class="ui attached segment">
+        <div v-if="!isLoading" class="empty-repo-or-org">
+          <svg-icon name="octicon-git-branch" :size="24"/>
+          <p>{{ textNoRepo }}</p>
+        </div>
+        <!-- using the loading indicator here will cause more (unnecessary) page flickers, so at the moment, not use the loading indicator -->
+        <!-- <div v-else class="is-loading loading-icon-2px tw-min-h-16"/> -->
+      </div>
+      <div v-else class="ui attached segment repos-search">
+        <div class="ui small fluid action left icon input">
+          <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
+          <i class="icon loading-icon-3px" :class="{'is-loading': isLoading}"><svg-icon name="octicon-search" :size="16"/></i>
+          <div class="ui dropdown icon button" :title="textFilter">
+            <svg-icon name="octicon-filter" :size="16"/>
+            <div class="menu">
+              <a class="item" @click="toggleArchivedFilter()">
+                <div class="ui checkbox" ref="checkboxArchivedFilter" :title="checkboxArchivedFilterTitle">
+                  <!--the "tw-pointer-events-none" is necessary to prevent the checkbox from handling user's input,
+                      otherwise if the "input" handles click event for intermediate status, it breaks the internal state-->
+                  <input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxArchivedFilterProps">
+                  <label>
+                    <svg-icon name="octicon-archive" :size="16" class="tw-mr-1"/>
+                    {{ textShowArchived }}
+                  </label>
+                </div>
+              </a>
+              <a class="item" @click="togglePrivateFilter()">
+                <div class="ui checkbox" ref="checkboxPrivateFilter" :title="checkboxPrivateFilterTitle">
+                  <input type="checkbox" class="tw-pointer-events-none" v-bind.prop="checkboxPrivateFilterProps">
+                  <label>
+                    <svg-icon name="octicon-lock" :size="16" class="tw-mr-1"/>
+                    {{ textShowPrivate }}
+                  </label>
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+        <overflow-menu class="ui secondary pointing tabular borderless menu repos-filter">
+          <div class="overflow-menu-items tw-justify-center">
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'all'}" @click="changeReposFilter('all')">
+              {{ textAll }}
+              <div v-show="reposFilter === 'all'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'sources'}" @click="changeReposFilter('sources')">
+              {{ textSources }}
+              <div v-show="reposFilter === 'sources'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'forks'}" @click="changeReposFilter('forks')">
+              {{ textForks }}
+              <div v-show="reposFilter === 'forks'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'mirrors'}" @click="changeReposFilter('mirrors')" v-if="isMirrorsEnabled">
+              {{ textMirrors }}
+              <div v-show="reposFilter === 'mirrors'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+            <a class="item" tabindex="0" :class="{active: reposFilter === 'collaborative'}" @click="changeReposFilter('collaborative')">
+              {{ textCollaborative }}
+              <div v-show="reposFilter === 'collaborative'" class="ui circular mini grey label">{{ repoTypeCount }}</div>
+            </a>
+          </div>
+        </overflow-menu>
+      </div>
+      <div v-if="repos.length" class="ui attached table segment tw-rounded-b">
+        <ul class="repo-owner-name-list">
+          <li class="tw-flex tw-items-center tw-py-2" v-for="(repo, index) in repos" :class="{'active': index === activeIndex}" :key="repo.id">
+            <a class="repo-list-link muted" :href="repo.link">
+              <svg-icon :name="repoIcon(repo)" :size="16" class="repo-list-icon"/>
+              <div class="text truncate">{{ repo.full_name }}</div>
+              <div v-if="repo.archived">
+                <svg-icon name="octicon-archive" :size="16"/>
+              </div>
+            </a>
+            <a class="tw-flex tw-items-center" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link || null" :data-tooltip-content="repo.locale_latest_commit_status_state">
+              <!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
+              <svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class="'tw-ml-2 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/>
+            </a>
+          </li>
+        </ul>
+        <div v-if="showMoreReposLink" class="tw-text-center">
+          <div class="divider tw-my-0"/>
+          <div class="ui borderless pagination menu narrow tw-my-2">
+            <a
+              class="item navigation tw-py-1" :class="{'disabled': page === 1}"
+              @click="changePage(1)" :title="textFirstPage"
+            >
+              <svg-icon name="gitea-double-chevron-left" :size="16" class="tw-mr-1"/>
+            </a>
+            <a
+              class="item navigation tw-py-1" :class="{'disabled': page === 1}"
+              @click="changePage(page - 1)" :title="textPreviousPage"
+            >
+              <svg-icon name="octicon-chevron-left" :size="16" class="tw-mr-1"/>
+            </a>
+            <a class="active item tw-py-1">{{ page }}</a>
+            <a
+              class="item navigation" :class="{'disabled': page === finalPage}"
+              @click="changePage(page + 1)" :title="textNextPage"
+            >
+              <svg-icon name="octicon-chevron-right" :size="16" class="tw-ml-1"/>
+            </a>
+            <a
+              class="item navigation tw-py-1" :class="{'disabled': page === finalPage}"
+              @click="changePage(finalPage)" :title="textLastPage"
+            >
+              <svg-icon name="gitea-double-chevron-right" :size="16" class="tw-ml-1"/>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs">
+      <h4 class="ui top attached header tw-flex tw-items-center">
+        <div class="tw-flex-1 tw-flex tw-items-center">
+          {{ textMyOrgs }}
+          <span class="ui grey label tw-ml-2">{{ organizationsTotalCount }}</span>
+        </div>
+        <a class="tw-flex tw-items-center muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg">
+          <svg-icon name="octicon-plus"/>
+        </a>
+      </h4>
+      <div v-if="!organizations.length" class="ui attached segment">
+        <div class="empty-repo-or-org">
+          <svg-icon name="octicon-organization" :size="24"/>
+          <p>{{ textNoOrg }}</p>
+        </div>
+      </div>
+      <div v-else class="ui attached table segment tw-rounded-b">
+        <ul class="repo-owner-name-list">
+          <li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name">
+            <a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
+              <svg-icon name="octicon-organization" :size="16" class="repo-list-icon"/>
+              <div class="text truncate">{{ org.full_name ? `${org.full_name} (${org.name})` : org.name }}</div>
+              <div><!-- div to prevent underline of label on hover -->
+                <span class="ui tiny basic label" v-if="org.org_visibility !== 'public'">
+                  {{ org.org_visibility === 'limited' ? textOrgVisibilityLimited: textOrgVisibilityPrivate }}
+                </span>
+              </div>
+            </a>
+            <div class="text light grey tw-flex tw-items-center tw-ml-2">
+              {{ org.num_repos }}
+              <svg-icon name="octicon-repo" :size="16" class="tw-ml-1 tw-mt-0.5"/>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+
+ul li {
+  padding: 0 10px;
+}
+
+ul li:not(:last-child) {
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.repos-search {
+  padding-bottom: 0 !important;
+}
+
+.repos-filter {
+  margin-top: 0 !important;
+  border-bottom-width: 0 !important;
+}
+
+.repos-filter .item {
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+}
+
+.repo-list-link {
+  min-width: 0; /* for text truncation */
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 0.5rem;
+}
+
+.repo-list-link .svg {
+  color: var(--color-text-light-2);
+}
+
+.repo-list-icon {
+  min-width: 16px;
+  margin-right: 2px;
+}
+
+/* octicon-mirror has no padding inside the SVG */
+.repo-list-icon.octicon-mirror {
+  width: 14px;
+  min-width: 14px;
+  margin-left: 1px;
+  margin-right: 3px;
+}
+
+.repo-owner-name-list li.active {
+  background: var(--color-hover);
+}
+
+.empty-repo-or-org {
+  margin-top: 1em;
+  text-align: center;
+  color: var(--color-placeholder-text);
+}
+
+.empty-repo-or-org p {
+  margin: 1em auto;
+}
+</style>

web_src/js/components/DiffCommitSelector.vue

@@ -0,0 +1,333 @@
+<script lang="ts">
+import {defineComponent} from 'vue';
+import {SvgIcon} from '../svg.ts';
+import {GET} from '../modules/fetch.ts';
+import {generateElemId} from '../utils/dom.ts';
+
+type Commit = {
+  id: string,
+  hovered: boolean,
+  selected: boolean,
+  summary: string,
+  committer_or_author_name: string,
+  time: string,
+  short_sha: string,
+}
+
+type CommitListResult = {
+  commits: Array<Commit>,
+  last_review_commit_sha: string,
+  locale: Record<string, string>,
+}
+
+export default defineComponent({
+  components: {SvgIcon},
+  data: () => {
+    const el = document.querySelector('#diff-commit-select');
+    return {
+      menuVisible: false,
+      isLoading: false,
+      queryParams: el.getAttribute('data-queryparams'),
+      issueLink: el.getAttribute('data-issuelink'),
+      locale: {
+        filter_changes_by_commit: el.getAttribute('data-filter_changes_by_commit'),
+      } as Record<string, string>,
+      mergeBase: el.getAttribute('data-merge-base'),
+      commits: [] as Array<Commit>,
+      hoverActivated: false,
+      lastReviewCommitSha: '',
+      uniqueIdMenu: generateElemId('diff-commit-selector-menu-'),
+      uniqueIdShowAll: generateElemId('diff-commit-selector-show-all-'),
+    };
+  },
+  computed: {
+    commitsSinceLastReview() {
+      if (this.lastReviewCommitSha) {
+        return this.commits.length - this.commits.findIndex((x) => x.id === this.lastReviewCommitSha) - 1;
+      }
+      return 0;
+    },
+  },
+  mounted() {
+    document.body.addEventListener('click', this.onBodyClick);
+    this.$el.addEventListener('keydown', this.onKeyDown);
+    this.$el.addEventListener('keyup', this.onKeyUp);
+  },
+  unmounted() {
+    document.body.removeEventListener('click', this.onBodyClick);
+    this.$el.removeEventListener('keydown', this.onKeyDown);
+    this.$el.removeEventListener('keyup', this.onKeyUp);
+  },
+  methods: {
+    onBodyClick(event: MouseEvent) {
+      // close this menu on click outside of this element when the dropdown is currently visible opened
+      if (this.$el.contains(event.target)) return;
+      if (this.menuVisible) {
+        this.toggleMenu();
+      }
+    },
+    onKeyDown(event: KeyboardEvent) {
+      if (!this.menuVisible) return;
+      const item = document.activeElement as HTMLElement;
+      if (!this.$el.contains(item)) return;
+      switch (event.key) {
+        case 'ArrowDown': // select next element
+          event.preventDefault();
+          this.focusElem(item.nextElementSibling as HTMLElement, item);
+          break;
+        case 'ArrowUp': // select previous element
+          event.preventDefault();
+          this.focusElem(item.previousElementSibling as HTMLElement, item);
+          break;
+        case 'Escape': // close menu
+          event.preventDefault();
+          item.tabIndex = -1;
+          this.toggleMenu();
+          break;
+      }
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        const item = document.activeElement; // try to highlight the selected commits
+        const commitIdx = item?.matches('.item') ? item.getAttribute('data-commit-idx') : null;
+        if (commitIdx) this.highlight(this.commits[Number(commitIdx)]);
+      }
+    },
+    onKeyUp(event: KeyboardEvent) {
+      if (!this.menuVisible) return;
+      const item = document.activeElement;
+      if (!this.$el.contains(item)) return;
+      if (event.key === 'Shift' && this.hoverActivated) {
+        // shift is not pressed anymore -> deactivate hovering and reset hovered and selected
+        this.hoverActivated = false;
+        for (const commit of this.commits) {
+          commit.hovered = false;
+          commit.selected = false;
+        }
+      }
+    },
+    highlight(commit: Commit) {
+      if (!this.hoverActivated) return;
+      const indexSelected = this.commits.findIndex((x) => x.selected);
+      const indexCurrentElem = this.commits.findIndex((x) => x.id === commit.id);
+      for (const [idx, commit] of this.commits.entries()) {
+        commit.hovered = Math.min(indexSelected, indexCurrentElem) <= idx && idx <= Math.max(indexSelected, indexCurrentElem);
+      }
+    },
+    /** Focus given element */
+    focusElem(elem: HTMLElement, prevElem: HTMLElement) {
+      if (elem) {
+        elem.tabIndex = 0;
+        if (prevElem) prevElem.tabIndex = -1;
+        elem.focus();
+      }
+    },
+    /** Opens our menu, loads commits before opening */
+    async toggleMenu() {
+      this.menuVisible = !this.menuVisible;
+      // load our commits when the menu is not yet visible (it'll be toggled after loading)
+      // and we got no commits
+      if (!this.commits.length && this.menuVisible && !this.isLoading) {
+        this.isLoading = true;
+        try {
+          await this.fetchCommits();
+        } finally {
+          this.isLoading = false;
+        }
+      }
+      // set correct tabindex to allow easier navigation
+      this.$nextTick(() => {
+        if (this.menuVisible) {
+          this.focusElem(this.$refs.showAllChanges as HTMLElement, this.$refs.expandBtn as HTMLElement);
+        } else {
+          this.focusElem(this.$refs.expandBtn as HTMLElement, this.$refs.showAllChanges as HTMLElement);
+        }
+      });
+    },
+
+    /** Load the commits to show in this dropdown */
+    async fetchCommits() {
+      const resp = await GET(`${this.issueLink}/commits/list`);
+      const results = await resp.json() as CommitListResult;
+      this.commits.push(...results.commits.map((x) => {
+        x.hovered = false;
+        return x;
+      }));
+      this.commits.reverse();
+      this.lastReviewCommitSha = results.last_review_commit_sha || null;
+      if (this.lastReviewCommitSha && !this.commits.some((x) => x.id === this.lastReviewCommitSha)) {
+        // the lastReviewCommit is not available (probably due to a force push)
+        // reset the last review commit sha
+        this.lastReviewCommitSha = null;
+      }
+      Object.assign(this.locale, results.locale);
+    },
+    showAllChanges() {
+      window.location.assign(`${this.issueLink}/files${this.queryParams}`);
+    },
+    /** Called when user clicks on since last review */
+    changesSinceLastReviewClick() {
+      window.location.assign(`${this.issueLink}/files/${this.lastReviewCommitSha}..${this.commits.at(-1).id}${this.queryParams}`);
+    },
+    /** Clicking on a single commit opens this specific commit */
+    commitClicked(commitId: string, newWindow = false) {
+      const url = `${this.issueLink}/commits/${commitId}${this.queryParams}`;
+      if (newWindow) {
+        window.open(url);
+      } else {
+        window.location.assign(url);
+      }
+    },
+    /**
+     * When a commit is clicked while holding Shift, it enables range selection.
+     * - The range selection is a half-open, half-closed range, meaning it excludes the start commit but includes the end commit.
+     * - The start of the commit range is always the previous commit of the first clicked commit.
+     * - If the first commit in the list is clicked, the mergeBase will be used as the start of the range instead.
+     * - The second Shift-click defines the end of the range.
+     * - Once both are selected, the diff view for the selected commit range will open.
+     */
+    commitClickedShift(commit: Commit) {
+      this.hoverActivated = !this.hoverActivated;
+      commit.selected = true;
+      // Second click -> determine our range and open links accordingly
+      if (!this.hoverActivated) {
+        // since at least one commit is selected, we can determine the range
+        // find all selected commits and generate a link
+        const firstSelected = this.commits.findIndex((x) => x.selected);
+        const lastSelected = this.commits.findLastIndex((x) => x.selected);
+        let beforeCommitID: string;
+        if (firstSelected === 0) {
+          beforeCommitID = this.mergeBase;
+        } else {
+          beforeCommitID = this.commits[firstSelected - 1].id;
+        }
+        const afterCommitID = this.commits[lastSelected].id;
+
+        if (firstSelected === lastSelected) {
+          // if the start and end are the same, we show this single commit
+          window.location.assign(`${this.issueLink}/commits/${afterCommitID}${this.queryParams}`);
+        } else if (beforeCommitID === this.mergeBase && afterCommitID === this.commits.at(-1).id) {
+          // if the first commit is selected and the last commit is selected, we show all commits
+          window.location.assign(`${this.issueLink}/files${this.queryParams}`);
+        } else {
+          window.location.assign(`${this.issueLink}/files/${beforeCommitID}..${afterCommitID}${this.queryParams}`);
+        }
+      }
+    },
+  },
+});
+</script>
+<template>
+  <div class="ui scrolling dropdown custom diff-commit-selector">
+    <button
+      ref="expandBtn"
+      class="ui tiny basic button"
+      @click.stop="toggleMenu()"
+      :data-tooltip-content="locale.filter_changes_by_commit"
+      aria-haspopup="true"
+      :aria-label="locale.filter_changes_by_commit"
+      :aria-controls="uniqueIdMenu"
+      :aria-activedescendant="uniqueIdShowAll"
+    >
+      <svg-icon name="octicon-git-commit"/>
+    </button>
+    <!-- this dropdown is not managed by Fomantic UI, so it needs some classes like "transition" explicitly -->
+    <div class="left menu transition" :id="uniqueIdMenu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
+      <div class="loading-indicator is-loading" v-if="isLoading"/>
+      <div v-if="!isLoading" class="item" :id="uniqueIdShowAll" ref="showAllChanges" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
+        <div class="gt-ellipsis">
+          {{ locale.show_all_commits }}
+        </div>
+        <div class="gt-ellipsis text light-2 tw-mb-0">
+          {{ locale.stats_num_commits }}
+        </div>
+      </div>
+      <!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review -->
+      <div
+        v-if="lastReviewCommitSha != null"
+        class="item" role="menuitem"
+        :class="{disabled: !commitsSinceLastReview}"
+        @keydown.enter="changesSinceLastReviewClick()"
+        @click="changesSinceLastReviewClick()"
+      >
+        <div class="gt-ellipsis">
+          {{ locale.show_changes_since_your_last_review }}
+        </div>
+        <div class="gt-ellipsis text light-2">
+          {{ commitsSinceLastReview }} commits
+        </div>
+      </div>
+      <span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
+      <template v-for="(commit, idx) in commits" :key="commit.id">
+        <div
+          class="item" role="menuitem"
+          :class="{selected: commit.selected, hovered: commit.hovered}"
+          :data-commit-idx="idx"
+          @keydown.enter.exact="commitClicked(commit.id)"
+          @keydown.enter.shift.exact="commitClickedShift(commit)"
+          @mouseover.shift="highlight(commit)"
+          @click.exact="commitClicked(commit.id)"
+          @click.ctrl.exact="commitClicked(commit.id, true)"
+          @click.meta.exact="commitClicked(commit.id, true)"
+          @click.shift.exact.stop.prevent="commitClickedShift(commit)"
+        >
+          <div class="tw-flex-1 tw-flex tw-flex-col tw-gap-1">
+            <div class="gt-ellipsis commit-list-summary">
+              {{ commit.summary }}
+            </div>
+            <div class="gt-ellipsis text light-2">
+              {{ commit.committer_or_author_name }}
+              <span class="text right">
+                <!-- TODO: make this respect the PreferredTimestampTense setting -->
+                <relative-time prefix="" :datetime="commit.time" data-tooltip-content data-tooltip-interactive="true">{{ commit.time }}</relative-time>
+              </span>
+            </div>
+          </div>
+          <div class="tw-font-mono">
+            {{ commit.short_sha }}
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<style scoped>
+  .ui.dropdown.diff-commit-selector .menu {
+    margin-top: 0.25em;
+    overflow-x: hidden;
+    max-height: 450px;
+  }
+
+  .ui.dropdown.diff-commit-selector .menu .loading-indicator {
+    height: 200px;
+    width: 350px;
+  }
+
+  .ui.dropdown.diff-commit-selector .menu > .item,
+  .ui.dropdown.diff-commit-selector .menu > .info {
+    display: flex;
+    flex-direction: row;
+    line-height: 1.4;
+    gap: 0.25em;
+    padding: 7px 14px !important;
+  }
+
+  .ui.dropdown.diff-commit-selector .menu > .item:not(:first-child),
+  .ui.dropdown.diff-commit-selector .menu > .info:not(:first-child) {
+    border-top: 1px solid var(--color-secondary) !important;
+  }
+
+  .ui.dropdown.diff-commit-selector .menu > .item:focus {
+    background: var(--color-active);
+  }
+
+  .ui.dropdown.diff-commit-selector .menu > .item.hovered {
+    background-color: var(--color-small-accent);
+  }
+
+  .ui.dropdown.diff-commit-selector .menu > .item.selected {
+    background-color: var(--color-accent);
+  }
+
+  .ui.dropdown.diff-commit-selector .menu .commit-list-summary {
+    max-width: min(380px, 96vw);
+  }
+</style>

web_src/js/components/DiffFileTree.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import DiffFileTreeItem from './DiffFileTreeItem.vue';
+import {toggleElem} from '../utils/dom.ts';
+import {diffTreeStore} from '../modules/diff-file.ts';
+import {setFileFolding} from '../features/file-fold.ts';
+import {onMounted, onUnmounted} from 'vue';
+
+const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
+
+const store = diffTreeStore();
+
+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: boolean) {
+  store.fileTreeIsVisible = visible;
+  localStorage.setItem(LOCAL_STORAGE_KEY, store.fileTreeIsVisible.toString());
+  updateState(store.fileTreeIsVisible);
+}
+
+function updateState(visible: boolean) {
+  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);
+}
+</script>
+
+<template>
+  <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
+  <div v-if="store.fileTreeIsVisible" class="diff-file-tree-items">
+    <DiffFileTreeItem v-for="item in store.diffFileTree.TreeRoot.Children" :key="item.FullName" :item="item"/>
+  </div>
+</template>
+
+<style scoped>
+.diff-file-tree-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-right: .5rem;
+}
+</style>

web_src/js/components/DiffFileTreeItem.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import {SvgIcon, type SvgName} from '../svg.ts';
+import {shallowRef} from 'vue';
+import {type DiffStatus, type DiffTreeEntry, diffTreeStore} from '../modules/diff-file.ts';
+
+const props = defineProps<{
+  item: DiffTreeEntry,
+}>();
+
+const store = diffTreeStore();
+const collapsed = shallowRef(props.item.IsViewed);
+
+function getIconForDiffStatus(pType: DiffStatus) {
+  const diffTypes: Record<DiffStatus, { name: SvgName, classes: Array<string> }> = {
+    '': {name: 'octicon-blocked', classes: ['text', 'red']}, // unknown case
+    'added': {name: 'octicon-diff-added', classes: ['text', 'green']},
+    'modified': {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
+    'deleted': {name: 'octicon-diff-removed', classes: ['text', 'red']},
+    'renamed': {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
+    'copied': {name: 'octicon-diff-renamed', classes: ['text', 'green']},
+    'typechange': {name: 'octicon-diff-modified', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
+  };
+  return diffTypes[pType] ?? diffTypes[''];
+}
+</script>
+
+<template>
+  <template v-if="item.EntryMode === 'tree'">
+    <div class="item-directory" :class="{ 'viewed': item.IsViewed }" :title="item.DisplayName" @click.stop="collapsed = !collapsed">
+      <!-- directory -->
+      <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span class="tw-contents" v-html="collapsed ? store.folderIcon : store.folderOpenIcon"/>
+      <span class="gt-ellipsis">{{ item.DisplayName }}</span>
+    </div>
+
+    <div v-show="!collapsed" class="sub-items">
+      <DiffFileTreeItem v-for="childItem in item.Children" :key="childItem.DisplayName" :item="childItem"/>
+    </div>
+  </template>
+  <a
+    v-else
+    class="item-file" :class="{ 'selected': store.selectedItem === '#diff-' + item.NameHash, 'viewed': item.IsViewed }"
+    :title="item.DisplayName" :href="'#diff-' + item.NameHash"
+  >
+    <!-- file -->
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span class="tw-contents" v-html="item.FileIcon"/>
+    <span class="gt-ellipsis tw-flex-1">{{ item.DisplayName }}</span>
+    <SvgIcon
+      :name="getIconForDiffStatus(item.DiffStatus).name"
+      :class="getIconForDiffStatus(item.DiffStatus).classes"
+    />
+  </a>
+</template>
+
+<style scoped>
+a,
+a:hover {
+  text-decoration: none;
+  color: var(--color-text);
+}
+
+.sub-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-left: 13px;
+  border-left: 1px solid var(--color-secondary);
+}
+
+.sub-items .item-file {
+  padding-left: 18px;
+}
+
+.item-file.selected {
+  color: var(--color-text);
+  background: var(--color-active);
+  border-radius: 4px;
+}
+
+.item-file.viewed,
+.item-directory.viewed {
+  color: var(--color-text-light-3);
+}
+
+.item-directory {
+  user-select: none;
+}
+
+.item-file,
+.item-directory {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  padding: 6px;
+}
+
+.item-file:hover,
+.item-directory:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+  border-radius: 4px;
+  cursor: pointer;
+}
+</style>

web_src/js/components/PullRequestMergeForm.vue

@@ -0,0 +1,252 @@
+<script lang="ts" setup>
+import {computed, onMounted, onUnmounted, shallowRef, watch} from 'vue';
+import {SvgIcon} from '../svg.ts';
+import {toggleElem} from '../utils/dom.ts';
+
+const {csrfToken, pageData} = window.config;
+
+const mergeForm = pageData.pullRequestMergeForm;
+
+const mergeTitleFieldValue = shallowRef('');
+const mergeMessageFieldValue = shallowRef('');
+const deleteBranchAfterMerge = shallowRef(false);
+const autoMergeWhenSucceed = shallowRef(false);
+
+const mergeStyle = shallowRef('');
+const mergeStyleDetail = shallowRef({
+  hideMergeMessageTexts: false,
+  textDoMerge: '',
+  mergeTitleFieldText: '',
+  mergeMessageFieldText: '',
+  hideAutoMerge: false,
+});
+
+const mergeStyleAllowedCount = shallowRef(0);
+
+const showMergeStyleMenu = shallowRef(false);
+const showActionForm = shallowRef(false);
+
+const mergeButtonStyleClass = computed(() => {
+  if (mergeForm.allOverridableChecksOk) return 'primary';
+  return autoMergeWhenSucceed.value ? 'primary' : 'red';
+});
+
+const forceMerge = computed(() => {
+  return mergeForm.canMergeNow && !mergeForm.allOverridableChecksOk;
+});
+
+watch(mergeStyle, (val) => {
+  mergeStyleDetail.value = mergeForm.mergeStyles.find((e: any) => 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.mergeStyles.reduce((v: any, msd: any) => v + (msd.allowed ? 1 : 0), 0);
+
+  let mergeStyle = mergeForm.mergeStyles.find((e: any) => e.allowed && e.name === mergeForm.defaultMergeStyle)?.name;
+  if (!mergeStyle) mergeStyle = mergeForm.mergeStyles.find((e: any) => e.allowed)?.name;
+  switchMergeStyle(mergeStyle, !mergeForm.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.defaultDeleteBranchAfterMerge;
+  mergeTitleFieldValue.value = mergeStyleDetail.value.mergeTitleFieldText;
+  mergeMessageFieldValue.value = mergeStyleDetail.value.mergeMessageFieldText;
+}
+
+function switchMergeStyle(name: string, autoMerge = false) {
+  mergeStyle.value = name;
+  autoMergeWhenSucceed.value = autoMerge;
+}
+
+function clearMergeMessage() {
+  mergeMessageFieldValue.value = mergeForm.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
+  if the user is a writer and can't do a merge now (canMergeNow==false), then only show the Auto Merge for them
+  How to test the UI manually:
+  * Method 1: manually set some variables in pull.tmpl, eg: {{$notAllOverridableChecksOk = true}} {{$canMergeNow = false}}
+  * Method 2: make a protected branch, then set state=pending/success :
+    curl -X POST ${root_url}/api/v1/repos/${owner}/${repo}/statuses/${sha} \
+      -H "accept: application/json" -H "authorization: Basic $base64_auth" -H "Content-Type: application/json" \
+      -d '{"context": "test/context", "description": "description", "state": "${state}", "target_url": "http://localhost"}'
+  -->
+  <div>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <div v-if="mergeForm.hasPendingPullRequestMerge" v-html="mergeForm.hasPendingPullRequestMergeTip" class="ui info message"/>
+
+    <!-- another similar form is in pull.tmpl (manual merge)-->
+    <form class="ui form form-fetch-action" v-if="showActionForm" :action="mergeForm.baseLink+'/merge'" method="post">
+      <input type="hidden" name="_csrf" :value="csrfToken">
+      <input type="hidden" name="head_commit_id" v-model="mergeForm.pullHeadCommitID">
+      <input type="hidden" name="merge_when_checks_succeed" v-model="autoMergeWhenSucceed">
+      <input type="hidden" name="force_merge" v-model="forceMerge">
+
+      <template v-if="!mergeStyleDetail.hideMergeMessageTexts">
+        <div class="field">
+          <input type="text" name="merge_title_field" v-model="mergeTitleFieldValue">
+        </div>
+        <div class="field">
+          <textarea name="merge_message_field" rows="5" :placeholder="mergeForm.mergeMessageFieldPlaceHolder" v-model="mergeMessageFieldValue"/>
+          <template v-if="mergeMessageFieldValue !== mergeForm.defaultMergeMessage">
+            <button @click.prevent="clearMergeMessage" class="btn tw-mt-1 tw-p-1 interact-fg" :data-tooltip-content="mergeForm.textClearMergeMessageHint">
+              {{ mergeForm.textClearMergeMessage }}
+            </button>
+          </template>
+        </div>
+      </template>
+
+      <div class="field" v-if="mergeStyle === 'manually-merged'">
+        <input type="text" name="merge_commit_id" :placeholder="mergeForm.textMergeCommitId">
+      </div>
+
+      <button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle">
+        {{ mergeStyleDetail.textDoMerge }}
+        <template v-if="autoMergeWhenSucceed">
+          {{ mergeForm.textAutoMergeButtonWhenSucceed }}
+        </template>
+      </button>
+
+      <button class="ui button merge-cancel" @click="toggleActionForm(false)">
+        {{ mergeForm.textCancel }}
+      </button>
+
+      <div class="ui checkbox tw-ml-1" v-if="mergeForm.isPullBranchDeletable">
+        <input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
+        <label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
+      </div>
+    </form>
+
+    <div v-if="!showActionForm" class="tw-flex">
+      <!-- the merge button -->
+      <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? '' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
+        <button class="ui button">
+          <svg-icon name="octicon-git-merge"/>
+          <span class="button-text">
+            {{ mergeStyleDetail.textDoMerge }}
+            <template v-if="autoMergeWhenSucceed">
+              {{ mergeForm.textAutoMergeButtonWhenSucceed }}
+            </template>
+          </span>
+        </button>
+        <div class="ui dropdown icon button" @click.stop="showMergeStyleMenu = !showMergeStyleMenu">
+          <svg-icon name="octicon-triangle-down" :size="14"/>
+          <div class="menu" :class="{'show':showMergeStyleMenu}">
+            <template v-for="msd in mergeForm.mergeStyles">
+              <!-- if can merge now, show one action "merge now", and an action "auto merge when succeed" -->
+              <div class="item" v-if="msd.allowed && mergeForm.canMergeNow" :key="msd.name" @click.stop="switchMergeStyle(msd.name)">
+                <div class="action-text">
+                  {{ msd.textDoMerge }}
+                </div>
+                <div v-if="!msd.hideAutoMerge" class="auto-merge-small" @click.stop="switchMergeStyle(msd.name, true)">
+                  <svg-icon name="octicon-clock" :size="14"/>
+                  <div class="auto-merge-tip">
+                    {{ mergeForm.textAutoMergeWhenSucceed }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- if can NOT merge now, only show one action "auto merge when succeed" -->
+              <div class="item" v-if="msd.allowed && !mergeForm.canMergeNow && !msd.hideAutoMerge" :key="msd.name" @click.stop="switchMergeStyle(msd.name, true)">
+                <div class="action-text">
+                  {{ msd.textDoMerge }} {{ mergeForm.textAutoMergeButtonWhenSucceed }}
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <!-- the cancel auto merge button -->
+      <form v-if="mergeForm.hasPendingPullRequestMerge" :action="mergeForm.baseLink+'/cancel_auto_merge'" method="post" class="tw-ml-4">
+        <input type="hidden" name="_csrf" :value="csrfToken">
+        <button class="ui button">
+          {{ mergeForm.textAutoMergeCancelSchedule }}
+        </button>
+      </form>
+    </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 {
+  display: block;
+}
+.ui.checkbox label {
+  cursor: pointer;
+}
+
+/* make the dropdown list left-aligned */
+.ui.merge-button {
+  position: relative;
+}
+.ui.merge-button .ui.dropdown {
+  position: static;
+}
+.ui.merge-button > .ui.dropdown:last-child > .menu:not(.left) {
+  left: 0;
+  right: auto;
+}
+.ui.merge-button .ui.dropdown .menu > .item {
+  display: flex;
+  align-items: stretch;
+  padding: 0 !important; /* polluted by semantic.css: .ui.dropdown .menu > .item { !important } */
+}
+
+/* merge style list item */
+.action-text {
+  padding: 0.8rem;
+  flex: 1
+}
+
+.auto-merge-small {
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.auto-merge-small .auto-merge-tip {
+  display: none;
+  left: 38px;
+  top: -1px;
+  bottom: -1px;
+  position: absolute;
+  align-items: center;
+  color: var(--color-info-text);
+  background-color: var(--color-info-bg);
+  border: 1px solid var(--color-info-border);
+  border-left: none;
+  padding-right: 1rem;
+}
+
+.auto-merge-small:hover {
+  color: var(--color-info-text);
+  background-color: var(--color-info-bg);
+  border: 1px solid var(--color-info-border);
+}
+
+.auto-merge-small:hover .auto-merge-tip {
+  display: flex;
+}
+
+</style>

web_src/js/components/RepoActivityTopAuthors.vue

@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+// @ts-expect-error - module exports no types
+import {VueBarGraph} from 'vue-bar-graph';
+import {computed, onMounted, shallowRef, useTemplateRef} from 'vue';
+
+const colors = shallowRef({
+  barColor: 'green',
+  textColor: 'black',
+  textAltColor: 'white',
+});
+
+type ActivityAuthorData = {
+  avatar_link: string;
+  commits: number;
+  home_link: string;
+  login: string;
+  name: string;
+}
+
+const activityTopAuthors: Array<ActivityAuthorData> = window.config.pageData.repoActivityTopAuthors || [];
+
+const graphPoints = computed(() => {
+  return activityTopAuthors.map((item) => {
+    return {
+      value: item.commits,
+      label: item.name,
+    };
+  });
+});
+
+const graphAuthors = computed(() => {
+  return activityTopAuthors.map((item, idx: number) => {
+    return {
+      position: idx + 1,
+      ...item,
+    };
+  });
+});
+
+const graphWidth = computed(() => {
+  return activityTopAuthors.length * 40;
+});
+
+const styleElement = useTemplateRef('styleElement');
+const altStyleElement = useTemplateRef('altStyleElement');
+
+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 tw-w-0 tw-h-0" ref="styleElement"/>
+    <div class="activity-bar-graph-alt tw-w-0 tw-h-0" ref="altStyleElement"/>
+    <vue-bar-graph
+      :points="graphPoints"
+      :show-x-axis="true"
+      :show-y-axis="false"
+      :show-values="true"
+      :width="graphWidth"
+      :bar-color="colors.barColor"
+      :text-color="colors.textColor"
+      :text-alt-color="colors.textAltColor"
+      :height="100"
+      :label-height="20"
+    >
+      <template #label="opt">
+        <g v-for="(author, idx) in graphAuthors" :key="author.position">
+          <a
+            v-if="opt.bar.index === idx && author.home_link"
+            :href="author.home_link"
+          >
+            <image
+              :x="`${opt.bar.midPoint - 10}px`"
+              :y="`${opt.bar.yLabel}px`"
+              height="20"
+              width="20"
+              :href="author.avatar_link"
+            />
+          </a>
+          <image
+            v-else-if="opt.bar.index === idx"
+            :x="`${opt.bar.midPoint - 10}px`"
+            :y="`${opt.bar.yLabel}px`"
+            height="20"
+            width="20"
+            :href="author.avatar_link"
+          />
+        </g>
+      </template>
+      <template #title="opt">
+        <tspan v-for="(author, idx) in graphAuthors" :key="author.position">
+          <tspan v-if="opt.bar.index === idx">
+            {{ author.name }}
+          </tspan>
+        </tspan>
+      </template>
+    </vue-bar-graph>
+  </div>
+</template>

web_src/js/components/RepoBranchTagSelector.vue

@@ -0,0 +1,289 @@
+<script lang="ts">
+import {defineComponent, nextTick} from 'vue';
+import {SvgIcon} from '../svg.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {GET} from '../modules/fetch.ts';
+import {pathEscapeSegments} from '../utils/url.ts';
+import type {GitRefType} from '../types.ts';
+
+type ListItem = {
+  selected: boolean;
+  refShortName: string;
+  refType: GitRefType;
+  rssFeedLink: string;
+};
+
+type SelectedTab = 'branches' | 'tags';
+
+type TabLoadingStates = Record<SelectedTab, '' | 'loading' | 'done'>
+
+export default defineComponent({
+  components: {SvgIcon},
+  props: {
+    elRoot: HTMLElement,
+  },
+  data() {
+    const shouldShowTabBranches = this.elRoot.getAttribute('data-show-tab-branches') === 'true';
+    return {
+      csrfToken: window.config.csrfToken,
+      allItems: [] as ListItem[],
+      selectedTab: (shouldShowTabBranches ? 'branches' : 'tags') as SelectedTab,
+      searchTerm: '',
+      menuVisible: false,
+      activeItemIndex: 0,
+      tabLoadingStates: {} as TabLoadingStates,
+
+      textReleaseCompare: this.elRoot.getAttribute('data-text-release-compare'),
+      textBranches: this.elRoot.getAttribute('data-text-branches'),
+      textTags: this.elRoot.getAttribute('data-text-tags'),
+      textFilterBranch: this.elRoot.getAttribute('data-text-filter-branch'),
+      textFilterTag: this.elRoot.getAttribute('data-text-filter-tag'),
+      textDefaultBranchLabel: this.elRoot.getAttribute('data-text-default-branch-label'),
+      textCreateTag: this.elRoot.getAttribute('data-text-create-tag'),
+      textCreateBranch: this.elRoot.getAttribute('data-text-create-branch'),
+      textCreateRefFrom: this.elRoot.getAttribute('data-text-create-ref-from'),
+      textNoResults: this.elRoot.getAttribute('data-text-no-results'),
+      textViewAllBranches: this.elRoot.getAttribute('data-text-view-all-branches'),
+      textViewAllTags: this.elRoot.getAttribute('data-text-view-all-tags'),
+
+      currentRepoDefaultBranch: this.elRoot.getAttribute('data-current-repo-default-branch'),
+      currentRepoLink: this.elRoot.getAttribute('data-current-repo-link'),
+      currentTreePath: this.elRoot.getAttribute('data-current-tree-path'),
+      currentRefType: this.elRoot.getAttribute('data-current-ref-type') as GitRefType,
+      currentRefShortName: this.elRoot.getAttribute('data-current-ref-short-name'),
+
+      refLinkTemplate: this.elRoot.getAttribute('data-ref-link-template'),
+      refFormActionTemplate: this.elRoot.getAttribute('data-ref-form-action-template'),
+      dropdownFixedText: this.elRoot.getAttribute('data-dropdown-fixed-text'),
+      showTabBranches: shouldShowTabBranches,
+      showTabTags: this.elRoot.getAttribute('data-show-tab-tags') === 'true',
+      allowCreateNewRef: this.elRoot.getAttribute('data-allow-create-new-ref') === 'true',
+      showViewAllRefsEntry: this.elRoot.getAttribute('data-show-view-all-refs-entry') === 'true',
+      enableFeed: this.elRoot.getAttribute('data-enable-feed') === 'true',
+    };
+  },
+  computed: {
+    searchFieldPlaceholder() {
+      return this.selectedTab === 'branches' ? this.textFilterBranch : this.textFilterTag;
+    },
+    filteredItems(): ListItem[] {
+      const searchTermLower = this.searchTerm.toLowerCase();
+      const items = this.allItems.filter((item: ListItem) => {
+        const typeMatched = (this.selectedTab === 'branches' && item.refType === 'branch') || (this.selectedTab === 'tags' && item.refType === 'tag');
+        if (!typeMatched) return false;
+        if (!this.searchTerm) return true; // match all
+        return item.refShortName.toLowerCase().includes(searchTermLower);
+      });
+
+      // TODO: fix this anti-pattern: side-effects-in-computed-properties
+      this.activeItemIndex = !items.length && this.showCreateNewRef ? 0 : -1; // eslint-disable-line vue/no-side-effects-in-computed-properties
+      return items;
+    },
+    showNoResults() {
+      if (this.tabLoadingStates[this.selectedTab] !== 'done') return false;
+      return !this.filteredItems.length && !this.showCreateNewRef;
+    },
+    showCreateNewRef() {
+      if (!this.allowCreateNewRef || !this.searchTerm) {
+        return false;
+      }
+      return !this.allItems.filter((item: ListItem) => {
+        return item.refShortName === this.searchTerm; // FIXME: not quite right here, it mixes "branch" and "tag" names
+      }).length;
+    },
+    createNewRefFormActionUrl() {
+      return `${this.currentRepoLink}/branches/_new/${this.currentRefType}/${pathEscapeSegments(this.currentRefShortName)}`;
+    },
+  },
+  watch: {
+    menuVisible(visible: boolean) {
+      if (!visible) return;
+      this.focusSearchField();
+      this.loadTabItems();
+    },
+  },
+  beforeMount() {
+    document.body.addEventListener('click', (e) => {
+      if (this.$el.contains(e.target)) return;
+      if (this.menuVisible) this.menuVisible = false;
+    });
+  },
+
+  mounted() {
+    if (this.refFormActionTemplate) {
+      // if the selector is used in a form and needs to change the form action,
+      // make a mock item and select it to update the form action
+      const item: ListItem = {selected: true, refType: this.currentRefType, refShortName: this.currentRefShortName, rssFeedLink: ''};
+      this.selectItem(item);
+    }
+  },
+
+  methods: {
+    selectItem(item: ListItem) {
+      this.menuVisible = false;
+      if (this.refFormActionTemplate) {
+        this.currentRefType = item.refType;
+        this.currentRefShortName = item.refShortName;
+        let actionLink = this.refFormActionTemplate;
+        actionLink = actionLink.replace('{RepoLink}', this.currentRepoLink);
+        actionLink = actionLink.replace('{RefType}', pathEscapeSegments(item.refType));
+        actionLink = actionLink.replace('{RefShortName}', pathEscapeSegments(item.refShortName));
+        this.$el.closest('form').action = actionLink;
+      } else {
+        let link = this.refLinkTemplate;
+        link = link.replace('{RepoLink}', this.currentRepoLink);
+        link = link.replace('{RefType}', pathEscapeSegments(item.refType));
+        link = link.replace('{RefShortName}', pathEscapeSegments(item.refShortName));
+        link = link.replace('{TreePath}', pathEscapeSegments(this.currentTreePath));
+        window.location.href = link;
+      }
+    },
+    createNewRef() {
+      (this.$refs.createNewRefForm as HTMLFormElement)?.submit();
+    },
+    focusSearchField() {
+      nextTick(() => {
+        (this.$refs.searchField as HTMLInputElement).focus();
+      });
+    },
+    getSelectedIndexInFiltered() {
+      for (let i = 0; i < this.filteredItems.length; ++i) {
+        if (this.filteredItems[i].selected) return i;
+      }
+      return -1;
+    },
+    getActiveItem() {
+      const el = this.$refs[`listItem${this.activeItemIndex}`];
+      // @ts-expect-error - el is unknown type
+      return (el && el.length) ? el[0] : null;
+    },
+    keydown(e: KeyboardEvent) {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+
+        if (this.activeItemIndex === -1) {
+          this.activeItemIndex = this.getSelectedIndexInFiltered();
+        }
+        const nextIndex = e.key === 'ArrowDown' ? this.activeItemIndex + 1 : this.activeItemIndex - 1;
+        if (nextIndex < 0) {
+          return;
+        }
+        if (nextIndex + (this.showCreateNewRef ? 0 : 1) > this.filteredItems.length) {
+          return;
+        }
+        this.activeItemIndex = nextIndex;
+        this.getActiveItem().scrollIntoView({block: 'nearest'});
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        this.getActiveItem()?.click();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        this.menuVisible = false;
+      }
+    },
+    handleTabSwitch(selectedTab: SelectedTab) {
+      this.selectedTab = selectedTab;
+      this.focusSearchField();
+      this.loadTabItems();
+    },
+    async loadTabItems() {
+      const tab = this.selectedTab;
+      if (this.tabLoadingStates[tab] === 'loading' || this.tabLoadingStates[tab] === 'done') return;
+
+      const refType = this.selectedTab === 'branches' ? 'branch' : 'tag';
+      this.tabLoadingStates[tab] = 'loading';
+      try {
+        const url = refType === 'branch' ? `${this.currentRepoLink}/branches/list` : `${this.currentRepoLink}/tags/list`;
+        const resp = await GET(url);
+        const {results} = await resp.json();
+        for (const refShortName of results) {
+          const item: ListItem = {
+            refType,
+            refShortName,
+            selected: refType === this.currentRefType && refShortName === this.currentRefShortName,
+            rssFeedLink: `${this.currentRepoLink}/rss/${refType}/${pathEscapeSegments(refShortName)}`,
+          };
+          this.allItems.push(item);
+        }
+        this.tabLoadingStates[tab] = 'done';
+      } catch (e) {
+        this.tabLoadingStates[tab] = '';
+        showErrorToast(`Network error when fetching items for ${tab}, error: ${e}`);
+        console.error(e);
+      }
+    },
+  },
+});
+</script>
+<template>
+  <div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
+    <div tabindex="0" class="ui compact button branch-dropdown-button" @click="menuVisible = !menuVisible">
+      <span class="flex-text-block gt-ellipsis">
+        <template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>
+        <template v-else>
+          <svg-icon v-if="currentRefType === 'tag'" name="octicon-tag"/>
+          <svg-icon v-else-if="currentRefType === 'branch'" name="octicon-git-branch"/>
+          <svg-icon v-else name="octicon-git-commit"/>
+          <strong ref="dropdownRefName" class="tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
+        </template>
+      </span>
+      <svg-icon name="octicon-triangle-down" :size="14" class="dropdown icon"/>
+    </div>
+    <div class="menu transition" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak>
+      <div class="ui icon search input">
+        <i class="icon"><svg-icon name="octicon-filter" :size="16"/></i>
+        <input name="search" ref="searchField" autocomplete="off" v-model="searchTerm" @keydown="keydown($event)" :placeholder="searchFieldPlaceholder">
+      </div>
+      <div v-if="showTabBranches" class="branch-tag-tab">
+        <a class="branch-tag-item muted" :class="{active: selectedTab === 'branches'}" href="#" @click="handleTabSwitch('branches')">
+          <svg-icon name="octicon-git-branch" :size="16" class="tw-mr-1"/>{{ textBranches }}
+        </a>
+        <a v-if="showTabTags" class="branch-tag-item muted" :class="{active: selectedTab === 'tags'}" href="#" @click="handleTabSwitch('tags')">
+          <svg-icon name="octicon-tag" :size="16" class="tw-mr-1"/>{{ textTags }}
+        </a>
+      </div>
+      <div class="branch-tag-divider"/>
+      <div class="scrolling menu" ref="scrollContainer">
+        <svg-icon name="octicon-rss" symbol-id="svg-symbol-octicon-rss"/>
+        <div class="loading-indicator is-loading" v-if="tabLoadingStates[selectedTab] === 'loading'"/>
+        <div v-for="(item, index) in filteredItems" :key="item.refShortName" class="item" :class="{selected: item.selected, active: activeItemIndex === index}" @click="selectItem(item)" :ref="'listItem' + index">
+          {{ item.refShortName }}
+          <div class="ui label" v-if="item.refType === 'branch' && item.refShortName === currentRepoDefaultBranch">
+            {{ textDefaultBranchLabel }}
+          </div>
+          <a v-if="enableFeed && selectedTab === 'branches'" role="button" class="rss-icon" target="_blank" @click.stop :href="item.rssFeedLink">
+            <!-- creating a lot of Vue component is pretty slow, so we use a static SVG here -->
+            <svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg>
+          </a>
+        </div>
+        <div class="item" v-if="showCreateNewRef" :class="{active: activeItemIndex === filteredItems.length}" :ref="'listItem' + filteredItems.length" @click="createNewRef()">
+          <div v-if="selectedTab === 'tags'">
+            <svg-icon name="octicon-tag" class="tw-mr-1"/>
+            <span v-text="textCreateTag.replace('%s', searchTerm)"/>
+          </div>
+          <div v-else>
+            <svg-icon name="octicon-git-branch" class="tw-mr-1"/>
+            <span v-text="textCreateBranch.replace('%s', searchTerm)"/>
+          </div>
+          <div class="text small">
+            {{ textCreateRefFrom.replace('%s', currentRefShortName) }}
+          </div>
+          <form ref="createNewRefForm" method="post" :action="createNewRefFormActionUrl">
+            <input type="hidden" name="_csrf" :value="csrfToken">
+            <input type="hidden" name="new_branch_name" :value="searchTerm">
+            <input type="hidden" name="create_tag" :value="String(selectedTab === 'tags')">
+            <input type="hidden" name="current_path" :value="currentTreePath">
+          </form>
+        </div>
+      </div>
+      <div class="message" v-if="showNoResults">
+        {{ textNoResults }}
+      </div>
+      <template v-if="showViewAllRefsEntry">
+        <div class="divider tw-m-0"/>
+        <a v-if="selectedTab === 'branches'" class="item" :href="currentRepoLink + '/branches'">{{ textViewAllBranches }}</a>
+        <a v-if="selectedTab === 'tags'" class="item" :href="currentRepoLink + '/tags'">{{ textViewAllTags }}</a>
+      </template>
+    </div>
+  </div>
+</template>

web_src/js/components/RepoCodeFrequency.vue

@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import {SvgIcon} from '../svg.ts';
+import {
+  Chart,
+  Legend,
+  LinearScale,
+  TimeScale,
+  PointElement,
+  LineElement,
+  Filler,
+  type ChartOptions,
+  type ChartData,
+} from 'chart.js';
+import {GET} from '../modules/fetch.ts';
+import {Line as ChartLine} from 'vue-chartjs';
+import {
+  startDaysBetween,
+  firstStartDateAfterDate,
+  fillEmptyStartDaysWithZeroes,
+  type DayData,
+  type DayDataObject,
+} 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, shallowRef} from 'vue';
+
+const {pageData} = window.config;
+
+Chart.defaults.color = chartJsColors.text;
+Chart.defaults.borderColor = chartJsColors.border;
+
+Chart.register(
+  TimeScale,
+  LinearScale,
+  Legend,
+  PointElement,
+  LineElement,
+  Filler,
+);
+
+defineProps<{
+  locale: {
+    loadingTitle: string;
+    loadingTitleFailed: string;
+    loadingInfo: string;
+  };
+}>();
+
+const isLoading = shallowRef(false);
+const errorText = shallowRef('');
+const repoLink = pageData.repoLink;
+const data = shallowRef<DayData[]>([]);
+
+onMounted(() => {
+  fetchGraphData();
+});
+
+async function fetchGraphData() {
+  isLoading.value = true;
+  try {
+    let response: Response;
+    do {
+      response = await GET(`${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) {
+      const dayDataObject: DayDataObject = await response.json();
+      const weekValues = Object.values(dayDataObject);
+      const start = weekValues[0].week;
+      const end = firstStartDateAfterDate(new Date());
+      const startDays = startDaysBetween(start, end);
+      data.value = fillEmptyStartDaysWithZeroes(startDays, dayDataObject);
+      errorText.value = '';
+    } else {
+      errorText.value = response.statusText;
+    }
+  } catch (err) {
+    errorText.value = err.message;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function toGraphData(data: Array<Record<string, any>>): ChartData<'line'> {
+  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,
+      },
+    ],
+  };
+}
+
+const options: ChartOptions<'line'> = {
+  responsive: true,
+  maintainAspectRatio: false,
+  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">
+      {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: `Code frequency over the history of ${repoLink.slice(1)}` }}
+    </div>
+    <div class="tw-flex ui segment main-graph">
+      <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
+        <div v-if="isLoading">
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
+          {{ locale.loadingInfo }}
+        </div>
+        <div v-else class="text red">
+          <SvgIcon name="octicon-x-circle-fill"/>
+          {{ errorText }}
+        </div>
+      </div>
+      <ChartLine
+        v-memo="data" v-if="data.length !== 0"
+        :data="toGraphData(data)" :options="options"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.main-graph {
+  height: 440px;
+}
+</style>

web_src/js/components/RepoContributors.vue

@@ -0,0 +1,462 @@
+<script lang="ts">
+import {defineComponent, type PropType} from 'vue';
+import {SvgIcon} from '../svg.ts';
+import dayjs from 'dayjs';
+import {
+  Chart,
+  Title,
+  BarElement,
+  LinearScale,
+  TimeScale,
+  PointElement,
+  LineElement,
+  Filler,
+  type ChartOptions,
+  type ChartData,
+  type Plugin,
+} from 'chart.js';
+import {GET} from '../modules/fetch.ts';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import {Line as ChartLine} from 'vue-chartjs';
+import {
+  startDaysBetween,
+  firstStartDateAfterDate,
+  fillEmptyStartDaysWithZeroes,
+} 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 {fomanticQuery} from '../modules/fomantic/base.ts';
+import {pathEscapeSegments} from '../utils/url.ts';
+
+const customEventListener: Plugin = {
+  id: 'customEventListener',
+  afterEvent: (chart, args, opts) => {
+    // event will be replayed from chart.update when reset zoom,
+    // so we need to check whether args.replay is true to avoid call loops
+    if (args.event.type === 'dblclick' && opts.chartType === 'main' && !args.replay) {
+      chart.resetZoom();
+      opts.instance.updateOtherCharts(args.event, true);
+    }
+  },
+};
+
+Chart.defaults.color = chartJsColors.text;
+Chart.defaults.borderColor = chartJsColors.border;
+
+Chart.register(
+  TimeScale,
+  LinearScale,
+  BarElement,
+  Title,
+  PointElement,
+  LineElement,
+  Filler,
+  zoomPlugin,
+  customEventListener,
+);
+
+type ContributorsData = {
+  total: {
+    weeks: Record<string, any>,
+  },
+  [other: string]: Record<string, Record<string, any>>,
+}
+
+export default defineComponent({
+  components: {ChartLine, SvgIcon},
+  props: {
+    locale: {
+      type: Object as PropType<Record<string, any>>,
+      required: true,
+    },
+    repoLink: {
+      type: String,
+      required: true,
+    },
+    repoDefaultBranchName: {
+      type: String,
+      required: true,
+    },
+  },
+  data: () => ({
+    isLoading: false,
+    errorText: '',
+    totalStats: {} as Record<string, any>,
+    sortedContributors: {} as Record<string, any>,
+    type: 'commits',
+    contributorsStats: {} as Record<string, any>,
+    xAxisStart: null as number | null,
+    xAxisEnd: null as number | null,
+    xAxisMin: null as number | null,
+    xAxisMax: null as number | null,
+  }),
+  mounted() {
+    this.fetchGraphData();
+
+    fomanticQuery('#repo-contributors').dropdown({
+      onChange: (val: string) => {
+        this.xAxisMin = this.xAxisStart;
+        this.xAxisMax = this.xAxisEnd;
+        this.type = val;
+        this.sortContributors();
+      },
+    });
+  },
+  methods: {
+    sortContributors() {
+      const contributors: Record<string, any> = this.filterContributorWeeksByDateRange();
+      const criteria = `total_${this.type}`;
+      this.sortedContributors = Object.values(contributors)
+        .filter((contributor) => contributor[criteria] !== 0)
+        .sort((a, b) => a[criteria] > b[criteria] ? -1 : a[criteria] === b[criteria] ? 0 : 1)
+        .slice(0, 100);
+    },
+
+    getContributorSearchQuery(contributorEmail: string) {
+      const min = dayjs(this.xAxisMin).format('YYYY-MM-DD');
+      const max = dayjs(this.xAxisMax).format('YYYY-MM-DD');
+      const params = new URLSearchParams({
+        'q': `after:${min}, before:${max}, author:${contributorEmail}`,
+      });
+      return `${this.repoLink}/commits/branch/${pathEscapeSegments(this.repoDefaultBranchName)}/search?${params.toString()}`;
+    },
+
+    async fetchGraphData() {
+      this.isLoading = true;
+      try {
+        let response: Response;
+        do {
+          response = await GET(`${this.repoLink}/activity/contributors/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() as ContributorsData;
+          const {total, ...other} = data;
+          // below line might be deleted if we are sure go produces map always sorted by keys
+          total.weeks = Object.fromEntries(Object.entries(total.weeks).sort());
+
+          const weekValues = Object.values(total.weeks);
+          this.xAxisStart = weekValues[0].week;
+          this.xAxisEnd = firstStartDateAfterDate(new Date());
+          const startDays = startDaysBetween(this.xAxisStart, this.xAxisEnd);
+          total.weeks = fillEmptyStartDaysWithZeroes(startDays, total.weeks);
+          this.xAxisMin = this.xAxisStart;
+          this.xAxisMax = this.xAxisEnd;
+          this.contributorsStats = {};
+          for (const [email, user] of Object.entries(other)) {
+            user.weeks = fillEmptyStartDaysWithZeroes(startDays, user.weeks);
+            this.contributorsStats[email] = user;
+          }
+          this.sortContributors();
+          this.totalStats = total;
+          this.errorText = '';
+        } else {
+          this.errorText = response.statusText;
+        }
+      } catch (err) {
+        this.errorText = err.message;
+      } finally {
+        this.isLoading = false;
+      }
+    },
+
+    filterContributorWeeksByDateRange() {
+      const filteredData: Record<string, any> = {};
+      const data = this.contributorsStats;
+      for (const key of Object.keys(data)) {
+        const user = data[key];
+        user.total_commits = 0;
+        user.total_additions = 0;
+        user.total_deletions = 0;
+        user.max_contribution_type = 0;
+        const filteredWeeks = user.weeks.filter((week: Record<string, number>) => {
+          const oneWeek = 7 * 24 * 60 * 60 * 1000;
+          if (week.week >= this.xAxisMin - oneWeek && week.week <= this.xAxisMax + oneWeek) {
+            user.total_commits += week.commits;
+            user.total_additions += week.additions;
+            user.total_deletions += week.deletions;
+            if (week[this.type] > user.max_contribution_type) {
+              user.max_contribution_type = week[this.type];
+            }
+            return true;
+          }
+          return false;
+        });
+        // this line is required. See https://github.com/sahinakkaya/gitea/pull/3#discussion_r1396495722
+        // for details.
+        user.max_contribution_type += 1;
+
+        filteredData[key] = {...user, weeks: filteredWeeks, email: key};
+      }
+
+      return filteredData;
+    },
+
+    maxMainGraph() {
+      // This method calculates maximum value for Y value of the main graph. If the number
+      // of maximum contributions for selected contribution type is 15.955 it is probably
+      // better to round it up to 20.000.This method is responsible for doing that.
+      // Normally, chartjs handles this automatically, but it will resize the graph when you
+      // zoom, pan etc. I think resizing the graph makes it harder to compare things visually.
+      const maxValue = Math.max(
+        ...this.totalStats.weeks.map((o: Record<string, any>) => o[this.type]),
+      );
+      const [coefficient, exp] = maxValue.toExponential().split('e').map(Number);
+      if (coefficient % 1 === 0) return maxValue;
+      return (1 - (coefficient % 1)) * 10 ** exp + maxValue;
+    },
+
+    maxContributorGraph() {
+      // Similar to maxMainGraph method this method calculates maximum value for Y value
+      // for contributors' graph. If I let chartjs do this for me, it will choose different
+      // maxY value for each contributors' graph which again makes it harder to compare.
+      const maxValue = Math.max(
+        ...this.sortedContributors.map((c: Record<string, any>) => c.max_contribution_type),
+      );
+      const [coefficient, exp] = maxValue.toExponential().split('e').map(Number);
+      if (coefficient % 1 === 0) return maxValue;
+      return (1 - (coefficient % 1)) * 10 ** exp + maxValue;
+    },
+
+    toGraphData(data: Array<Record<string, any>>): ChartData<'line'> {
+      return {
+        datasets: [
+          {
+            data: data.map((i) => ({x: i.week, y: i[this.type]})),
+            pointRadius: 0,
+            pointHitRadius: 0,
+            fill: 'start',
+            backgroundColor: chartJsColors[this.type],
+            borderWidth: 0,
+            tension: 0.3,
+          },
+        ],
+      };
+    },
+
+    updateOtherCharts({chart}: {chart: Chart}, reset: boolean = false) {
+      const minVal = Number(chart.options.scales.x.min);
+      const maxVal = Number(chart.options.scales.x.max);
+      if (reset) {
+        this.xAxisMin = this.xAxisStart;
+        this.xAxisMax = this.xAxisEnd;
+        this.sortContributors();
+      } else if (minVal) {
+        this.xAxisMin = minVal;
+        this.xAxisMax = maxVal;
+        this.sortContributors();
+      }
+    },
+
+    getOptions(type: string): ChartOptions<'line'> {
+      return {
+        responsive: true,
+        maintainAspectRatio: false,
+        animation: false,
+        events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove', 'dblclick'],
+        plugins: {
+          title: {
+            display: type === 'main',
+            text: 'drag: zoom, shift+drag: pan, double click: reset zoom',
+            position: 'top',
+            align: 'center',
+          },
+          // @ts-expect-error: bug in chart.js types
+          customEventListener: {
+            chartType: type,
+            instance: this,
+          },
+          zoom: {
+            pan: {
+              enabled: true,
+              modifierKey: 'shift',
+              mode: 'x',
+              threshold: 20,
+              onPanComplete: this.updateOtherCharts,
+            },
+            limits: {
+              x: {
+                // Check https://www.chartjs.org/chartjs-plugin-zoom/latest/guide/options.html#scale-limits
+                // to know what each option means
+                min: 'original',
+                max: 'original',
+
+                // number of milliseconds in 2 weeks. Minimum x range will be 2 weeks when you zoom on the graph
+                minRange: 2 * 7 * 24 * 60 * 60 * 1000,
+              },
+            },
+            zoom: {
+              drag: {
+                enabled: type === 'main',
+              },
+              pinch: {
+                enabled: type === 'main',
+              },
+              mode: 'x',
+              onZoomComplete: this.updateOtherCharts,
+            },
+          },
+        },
+        scales: {
+          x: {
+            min: this.xAxisMin,
+            max: this.xAxisMax,
+            type: 'time',
+            grid: {
+              display: false,
+            },
+            time: {
+              minUnit: 'month',
+            },
+            ticks: {
+              maxRotation: 0,
+              maxTicksLimit: type === 'main' ? 12 : 6,
+            },
+          },
+          y: {
+            min: 0,
+            max: type === 'main' ? this.maxMainGraph() : this.maxContributorGraph(),
+            ticks: {
+              maxTicksLimit: type === 'main' ? 6 : 4,
+            },
+          },
+        },
+      };
+    },
+  },
+});
+</script>
+<template>
+  <div>
+    <div class="ui header tw-flex tw-items-center tw-justify-between">
+      <div>
+        <relative-time
+          v-if="xAxisMin > 0"
+          format="datetime"
+          year="numeric"
+          month="short"
+          day="numeric"
+          weekday=""
+          :datetime="new Date(xAxisMin)"
+        >
+          {{ new Date(xAxisMin) }}
+        </relative-time>
+        {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "-" }}
+        <relative-time
+          v-if="xAxisMax > 0"
+          format="datetime"
+          year="numeric"
+          month="short"
+          day="numeric"
+          weekday=""
+          :datetime="new Date(xAxisMax)"
+        >
+          {{ new Date(xAxisMax) }}
+        </relative-time>
+      </div>
+      <div>
+        <!-- Contribution type -->
+        <div class="ui floating dropdown jump" id="repo-contributors">
+          <div class="ui basic compact button">
+            <span class="not-mobile">{{ locale.filterLabel }}</span> <strong>{{ locale.contributionType[type] }}</strong>
+            <svg-icon name="octicon-triangle-down" :size="14"/>
+          </div>
+          <div class="left menu">
+            <div :class="['item', {'selected': type === 'commits'}]" data-value="commits">
+              {{ locale.contributionType.commits }}
+            </div>
+            <div :class="['item', {'selected': type === 'additions'}]" data-value="additions">
+              {{ locale.contributionType.additions }}
+            </div>
+            <div :class="['item', {'selected': type === 'deletions'}]" data-value="deletions">
+              {{ locale.contributionType.deletions }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tw-flex ui segment main-graph">
+      <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
+        <div v-if="isLoading">
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
+          {{ locale.loadingInfo }}
+        </div>
+        <div v-else class="text red">
+          <SvgIcon name="octicon-x-circle-fill"/>
+          {{ errorText }}
+        </div>
+      </div>
+      <ChartLine
+        v-memo="[totalStats.weeks, type]" v-if="Object.keys(totalStats).length !== 0"
+        :data="toGraphData(totalStats.weeks)" :options="getOptions('main')"
+      />
+    </div>
+    <div class="contributor-grid">
+      <div
+        v-for="(contributor, index) in sortedContributors"
+        :key="index"
+        v-memo="[sortedContributors, type]"
+      >
+        <div class="ui top attached header tw-flex tw-flex-1">
+          <b class="ui right">#{{ index + 1 }}</b>
+          <a :href="contributor.home_link">
+            <img loading="lazy" class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link" alt="">
+          </a>
+          <div class="tw-ml-2">
+            <a v-if="contributor.home_link !== ''" :href="contributor.home_link"><h4>{{ contributor.name }}</h4></a>
+            <h4 v-else class="contributor-name">
+              {{ contributor.name }}
+            </h4>
+            <p class="tw-text-12 tw-flex tw-gap-1">
+              <strong v-if="contributor.total_commits">
+                <a class="silenced" :href="getContributorSearchQuery(contributor.email)">
+                  {{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}
+                </a>
+              </strong>
+              <strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
+              <strong v-if="contributor.total_deletions" class="text red">
+                {{ contributor.total_deletions.toLocaleString() }}--</strong>
+            </p>
+          </div>
+        </div>
+        <div class="ui attached segment">
+          <div>
+            <ChartLine
+              :data="toGraphData(contributor.weeks)"
+              :options="getOptions('contributor')"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.main-graph {
+  height: 260px;
+  padding-top: 2px;
+}
+
+.contributor-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.contributor-grid > * {
+  min-width: 0;
+}
+
+@media (max-width: 991.98px) {
+  .contributor-grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.contributor-name {
+  margin-bottom: 0;
+}
+</style>

web_src/js/components/RepoRecentCommits.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import {SvgIcon} from '../svg.ts';
+import {
+  Chart,
+  Tooltip,
+  BarElement,
+  LinearScale,
+  TimeScale,
+  type ChartOptions,
+  type ChartData,
+} from 'chart.js';
+import {GET} from '../modules/fetch.ts';
+import {Bar} from 'vue-chartjs';
+import {
+  startDaysBetween,
+  firstStartDateAfterDate,
+  fillEmptyStartDaysWithZeroes,
+  type DayData,
+  type DayDataObject,
+} 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, shallowRef} from 'vue';
+
+const {pageData} = window.config;
+
+Chart.defaults.color = chartJsColors.text;
+Chart.defaults.borderColor = chartJsColors.border;
+
+Chart.register(
+  TimeScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+);
+
+defineProps<{
+  locale: {
+    loadingTitle: string;
+    loadingTitleFailed: string;
+    loadingInfo: string;
+  };
+}>();
+
+const isLoading = shallowRef(false);
+const errorText = shallowRef('');
+const repoLink = pageData.repoLink;
+const data = ref<DayData[]>([]);
+
+onMounted(() => {
+  fetchGraphData();
+});
+
+async function fetchGraphData() {
+  isLoading.value = true;
+  try {
+    let response: Response;
+    do {
+      response = await GET(`${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 dayDataObj: DayDataObject = await response.json();
+      const start = Object.values(dayDataObj)[0].week;
+      const end = firstStartDateAfterDate(new Date());
+      const startDays = startDaysBetween(start, end);
+      data.value = fillEmptyStartDaysWithZeroes(startDays, dayDataObj).slice(-52);
+      errorText.value = '';
+    } else {
+      errorText.value = response.statusText;
+    }
+  } catch (err) {
+    errorText.value = err.message;
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function toGraphData(data: DayData[]): ChartData<'bar'> {
+  return {
+    datasets: [
+      {
+        // @ts-expect-error -- bar chart expects one-dimensional data, but apparently x/y still works
+        data: data.map((i) => ({x: i.week, y: i.commits})),
+        label: 'Commits',
+        backgroundColor: chartJsColors['commits'],
+        borderWidth: 0,
+        tension: 0.3,
+      },
+    ],
+  };
+}
+
+const options: ChartOptions<'bar'> = {
+  responsive: true,
+  maintainAspectRatio: false,
+  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">
+      {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
+    </div>
+    <div class="tw-flex ui segment main-graph">
+      <div v-if="isLoading || errorText !== ''" class="tw-m-auto">
+        <div v-if="isLoading">
+          <SvgIcon name="gitea-running" class="tw-mr-2 rotate-clockwise"/>
+          {{ locale.loadingInfo }}
+        </div>
+        <div v-else class="text red">
+          <SvgIcon name="octicon-x-circle-fill"/>
+          {{ errorText }}
+        </div>
+      </div>
+      <Bar
+        v-memo="data" v-if="data.length !== 0"
+        :data="toGraphData(data)" :options="options"
+      />
+    </div>
+  </div>
+</template>
+<style scoped>
+.main-graph {
+  height: 250px;
+}
+</style>

web_src/js/components/ViewFileTree.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import ViewFileTreeItem from './ViewFileTreeItem.vue';
+import {onMounted, useTemplateRef} from 'vue';
+import {createViewFileTreeStore} from './ViewFileTreeStore.ts';
+
+const elRoot = useTemplateRef('elRoot');
+
+const props = defineProps({
+  repoLink: {type: String, required: true},
+  treePath: {type: String, required: true},
+  currentRefNameSubURL: {type: String, required: true},
+});
+
+const store = createViewFileTreeStore(props);
+onMounted(async () => {
+  store.rootFiles = await store.loadChildren('', props.treePath);
+  elRoot.value.closest('.is-loading')?.classList?.remove('is-loading');
+  window.addEventListener('popstate', (e) => {
+    store.selectedItem = e.state?.treePath || '';
+    if (e.state?.url) store.loadViewContent(e.state.url);
+  });
+});
+</script>
+
+<template>
+  <div class="view-file-tree-items" ref="elRoot">
+    <ViewFileTreeItem v-for="item in store.rootFiles" :key="item.name" :item="item" :store="store"/>
+  </div>
+</template>
+
+<style scoped>
+.view-file-tree-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-right: .5rem;
+}
+</style>

web_src/js/components/ViewFileTreeItem.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import {SvgIcon} from '../svg.ts';
+import {isPlainClick} from '../utils/dom.ts';
+import {shallowRef} from 'vue';
+import {type createViewFileTreeStore} from './ViewFileTreeStore.ts';
+
+type Item = {
+  entryName: string;
+  entryMode: 'blob' | 'exec' | 'tree' | 'commit' | 'symlink' | 'unknown';
+  entryIcon: string;
+  entryIconOpen: string;
+  fullPath: string;
+  submoduleUrl?: string;
+  children?: Item[];
+};
+
+const props = defineProps<{
+  item: Item,
+  store: ReturnType<typeof createViewFileTreeStore>
+}>();
+
+const store = props.store;
+const isLoading = shallowRef(false);
+const children = shallowRef(props.item.children);
+const collapsed = shallowRef(!props.item.children);
+
+const doLoadChildren = async () => {
+  collapsed.value = !collapsed.value;
+  if (!collapsed.value) {
+    isLoading.value = true;
+    try {
+      children.value = await store.loadChildren(props.item.fullPath);
+    } finally {
+      isLoading.value = false;
+    }
+  }
+};
+
+const onItemClick = (e: MouseEvent) => {
+  // only handle the click event with page partial reloading if the user didn't press any special key
+  // let browsers handle special keys like "Ctrl+Click"
+  if (!isPlainClick(e)) return;
+  e.preventDefault();
+  if (props.item.entryMode === 'tree') doLoadChildren();
+  store.navigateTreeView(props.item.fullPath);
+};
+
+</script>
+
+<template>
+  <a
+    class="tree-item silenced"
+    :class="{
+      'selected': store.selectedItem === item.fullPath,
+      'type-submodule': item.entryMode === 'commit',
+      'type-directory': item.entryMode === 'tree',
+      'type-symlink': item.entryMode === 'symlink',
+      'type-file': item.entryMode === 'blob' || item.entryMode === 'exec',
+    }"
+    :title="item.entryName"
+    :href="store.buildTreePathWebUrl(item.fullPath)"
+    @click.stop="onItemClick"
+  >
+    <div v-if="item.entryMode === 'tree'" class="item-toggle">
+      <SvgIcon v-if="isLoading" name="gitea-running" class="rotate-clockwise"/>
+      <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop.prevent="doLoadChildren"/>
+    </div>
+    <div class="item-content">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span class="tw-contents" v-html="(!collapsed && item.entryIconOpen) ? item.entryIconOpen : item.entryIcon"/>
+      <span class="gt-ellipsis">{{ item.entryName }}</span>
+    </div>
+  </a>
+
+  <div v-if="children?.length" v-show="!collapsed" class="sub-items">
+    <ViewFileTreeItem v-for="childItem in children" :key="childItem.entryName" :item="childItem" :store="store"/>
+  </div>
+</template>
+
+<style scoped>
+.sub-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin-left: 14px;
+  border-left: 1px solid var(--color-secondary);
+}
+
+.tree-item.selected {
+  color: var(--color-text);
+  background: var(--color-active);
+  border-radius: 4px;
+}
+
+.tree-item.type-directory {
+  user-select: none;
+}
+
+.tree-item {
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  grid-template-areas: "toggle content";
+  gap: 0.25em;
+  padding: 6px;
+}
+
+.tree-item:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.item-toggle {
+  grid-area: toggle;
+  display: flex;
+  align-items: center;
+}
+
+.item-content {
+  grid-area: content;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+</style>

web_src/js/components/ViewFileTreeStore.ts

@@ -0,0 +1,52 @@
+import {reactive} from 'vue';
+import {GET} from '../modules/fetch.ts';
+import {pathEscapeSegments} from '../utils/url.ts';
+import {createElementFromHTML} from '../utils/dom.ts';
+import {html} from '../utils/html.ts';
+
+export function createViewFileTreeStore(props: {repoLink: string, treePath: string, currentRefNameSubURL: string}) {
+  const store = reactive({
+    rootFiles: [],
+    selectedItem: props.treePath,
+
+    async loadChildren(treePath: string, subPath: string = '') {
+      const response = await GET(`${props.repoLink}/tree-view/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}?sub_path=${encodeURIComponent(subPath)}`);
+      const json = await response.json();
+      const poolSvgs = [];
+      for (const [svgId, svgContent] of Object.entries(json.renderedIconPool ?? {})) {
+        if (!document.querySelector(`.global-svg-icon-pool #${svgId}`)) poolSvgs.push(svgContent);
+      }
+      if (poolSvgs.length) {
+        const svgContainer = createElementFromHTML(html`<div class="global-svg-icon-pool tw-hidden"></div>`);
+        svgContainer.innerHTML = poolSvgs.join('');
+        document.body.append(svgContainer);
+      }
+      return json.fileTreeNodes ?? null;
+    },
+
+    async loadViewContent(url: string) {
+      const u = new URL(url, window.origin);
+      u.searchParams.set('only_content', 'true');
+      const response = await GET(u.href);
+      const elViewContent = document.querySelector('.repo-view-content');
+      elViewContent.innerHTML = await response.text();
+      const elViewContentData = elViewContent.querySelector('.repo-view-content-data');
+      if (!elViewContentData) return; // if error occurs, there is no such element
+      const t1 = elViewContentData.getAttribute('data-document-title');
+      const t2 = elViewContentData.getAttribute('data-document-title-common');
+      document.title = `${t1} - ${t2}`; // follow the format in head.tmpl: <head><title>...</title></head>
+    },
+
+    async navigateTreeView(treePath: string) {
+      const url = store.buildTreePathWebUrl(treePath);
+      window.history.pushState({treePath, url}, null, url);
+      store.selectedItem = treePath;
+      await store.loadViewContent(url);
+    },
+
+    buildTreePathWebUrl(treePath: string) {
+      return `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
+    },
+  });
+  return store;
+}

web_src/js/features/admin/common.ts

@@ -0,0 +1,289 @@
+import {checkAppUrl} from '../common-page.ts';
+import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
+import {POST} from '../../modules/fetch.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+
+const {appSubUrl} = window.config;
+
+function onSecurityProtocolChange(): void {
+  if (Number(document.querySelector<HTMLInputElement>('#security_protocol')?.value) > 0) {
+    showElem('.has-tls');
+  } else {
+    hideElem('.has-tls');
+  }
+}
+
+export function initAdminCommon(): void {
+  if (!document.querySelector('.page-content.admin')) return;
+
+  // check whether appUrl(ROOT_URL) is correct, if not, show an error message
+  checkAppUrl();
+
+  initAdminUser();
+  initAdminAuthentication();
+  initAdminNotice();
+}
+
+function initAdminUser() {
+  const pageContent = document.querySelector('.page-content.admin.edit.user, .page-content.admin.new.user');
+  if (!pageContent) return;
+
+  document.querySelector<HTMLInputElement>('#login_type')?.addEventListener('change', function () {
+    if (this.value?.startsWith('0')) {
+      document.querySelector<HTMLInputElement>('#user_name')?.removeAttribute('disabled');
+      document.querySelector<HTMLInputElement>('#login_name')?.removeAttribute('required');
+      hideElem('.non-local');
+      showElem('.local');
+      document.querySelector<HTMLInputElement>('#user_name')?.focus();
+
+      if (this.getAttribute('data-password') === 'required') {
+        document.querySelector('#password')?.setAttribute('required', 'required');
+      }
+    } else {
+      if (document.querySelector<HTMLDivElement>('.admin.edit.user')) {
+        document.querySelector<HTMLInputElement>('#user_name')?.setAttribute('disabled', 'disabled');
+      }
+      document.querySelector<HTMLInputElement>('#login_name')?.setAttribute('required', 'required');
+      showElem('.non-local');
+      hideElem('.local');
+      document.querySelector<HTMLInputElement>('#login_name')?.focus();
+
+      document.querySelector<HTMLInputElement>('#password')?.removeAttribute('required');
+    }
+  });
+}
+
+function initAdminAuthentication() {
+  const pageContent = document.querySelector('.page-content.admin.authentication');
+  if (!pageContent) return;
+
+  const isNewPage = pageContent.classList.contains('new');
+  const isEditPage = pageContent.classList.contains('edit');
+  if (!isNewPage && !isEditPage) return;
+
+  function onUsePagedSearchChange() {
+    const searchPageSizeElements = document.querySelectorAll<HTMLDivElement>('.search-page-size');
+    if (document.querySelector<HTMLInputElement>('#use_paged_search').checked) {
+      showElem('.search-page-size');
+      for (const el of searchPageSizeElements) {
+        el.querySelector('input')?.setAttribute('required', 'required');
+      }
+    } else {
+      hideElem('.search-page-size');
+      for (const el of searchPageSizeElements) {
+        el.querySelector('input')?.removeAttribute('required');
+      }
+    }
+  }
+
+  function onOAuth2Change(applyDefaultValues: boolean) {
+    hideElem('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url');
+    for (const input of document.querySelectorAll<HTMLInputElement>('.open_id_connect_auto_discovery_url input[required]')) {
+      input.removeAttribute('required');
+    }
+
+    const provider = document.querySelector<HTMLInputElement>('#oauth2_provider').value;
+    switch (provider) {
+      case 'openidConnect':
+        document.querySelector<HTMLInputElement>('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
+        showElem('.open_id_connect_auto_discovery_url');
+        break;
+      default: {
+        const elProviderCustomUrlSettings = document.querySelector<HTMLInputElement>(`#${provider}_customURLSettings`);
+        if (!elProviderCustomUrlSettings) break; // some providers do not have custom URL settings
+        const couldChangeCustomURLs = elProviderCustomUrlSettings.getAttribute('data-available') === 'true';
+        const mustProvideCustomURLs = elProviderCustomUrlSettings.getAttribute('data-required') === 'true';
+        if (couldChangeCustomURLs) {
+          showElem('.oauth2_use_custom_url'); // show the checkbox
+        }
+        if (mustProvideCustomURLs) {
+          document.querySelector<HTMLInputElement>('#oauth2_use_custom_url').checked = true; // make the checkbox checked
+        }
+        break;
+      }
+    }
+
+    const supportSshPublicKey = document.querySelector<HTMLInputElement>(`#${provider}_SupportSSHPublicKey`)?.value === 'true';
+    toggleElem('.field.oauth2_ssh_public_key_claim_name', supportSshPublicKey);
+    onOAuth2UseCustomURLChange(applyDefaultValues);
+  }
+
+  function onOAuth2UseCustomURLChange(applyDefaultValues: boolean) {
+    const provider = document.querySelector<HTMLInputElement>('#oauth2_provider').value;
+    hideElem('.oauth2_use_custom_url_field');
+    for (const input of document.querySelectorAll<HTMLInputElement>('.oauth2_use_custom_url_field input[required]')) {
+      input.removeAttribute('required');
+    }
+
+    const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
+    if (elProviderCustomUrlSettings && document.querySelector<HTMLInputElement>('#oauth2_use_custom_url').checked) {
+      for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
+        if (applyDefaultValues) {
+          document.querySelector<HTMLInputElement>(`#oauth2_${custom}`).value = document.querySelector<HTMLInputElement>(`#${provider}_${custom}`).value;
+        }
+        const customInput = document.querySelector(`#${provider}_${custom}`);
+        if (customInput && customInput.getAttribute('data-available') === 'true') {
+          for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
+            input.setAttribute('required', 'required');
+          }
+          showElem(`.oauth2_${custom}`);
+        }
+      }
+    }
+  }
+
+  function onEnableLdapGroupsChange() {
+    const checked = document.querySelector<HTMLInputElement>('.js-ldap-group-toggle')?.checked;
+    toggleElem(document.querySelector('#ldap-group-options'), checked);
+  }
+
+  const elAuthType = document.querySelector<HTMLInputElement>('#auth_type');
+
+  // New authentication
+  if (isNewPage) {
+    const onAuthTypeChange = function () {
+      hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
+
+      for (const input of document.querySelectorAll<HTMLInputElement>('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]')) {
+        input.removeAttribute('required');
+      }
+
+      document.querySelector<HTMLDivElement>('.binddnrequired')?.classList.remove('required');
+
+      const authType = elAuthType.value;
+      switch (authType) {
+        case '2': // LDAP
+          showElem('.ldap');
+          for (const input of document.querySelectorAll<HTMLInputElement>('.binddnrequired input, .ldap div.required:not(.dldap) input')) {
+            input.setAttribute('required', 'required');
+          }
+          document.querySelector('.binddnrequired')?.classList.add('required');
+          break;
+        case '3': // SMTP
+          showElem('.smtp');
+          showElem('.has-tls');
+          for (const input of document.querySelectorAll<HTMLInputElement>('.smtp div.required input, .has-tls')) {
+            input.setAttribute('required', 'required');
+          }
+          break;
+        case '4': // PAM
+          showElem('.pam');
+          for (const input of document.querySelectorAll<HTMLInputElement>('.pam input')) {
+            input.setAttribute('required', 'required');
+          }
+          break;
+        case '5': // LDAP
+          showElem('.dldap');
+          for (const input of document.querySelectorAll<HTMLInputElement>('.dldap div.required:not(.ldap) input')) {
+            input.setAttribute('required', 'required');
+          }
+          break;
+        case '6': // OAuth2
+          showElem('.oauth2');
+          for (const input of document.querySelectorAll<HTMLInputElement>('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input')) {
+            input.setAttribute('required', 'required');
+          }
+          onOAuth2Change(true);
+          break;
+        case '7': // SSPI
+          showElem('.sspi');
+          for (const input of document.querySelectorAll<HTMLInputElement>('.sspi div.required input')) {
+            input.setAttribute('required', 'required');
+          }
+          break;
+      }
+      if (authType === '2' || authType === '5') {
+        onSecurityProtocolChange();
+        onEnableLdapGroupsChange();
+      }
+      if (authType === '2') {
+        onUsePagedSearchChange();
+      }
+    };
+    elAuthType.addEventListener('change', onAuthTypeChange);
+    onAuthTypeChange();
+
+    document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
+    document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
+    document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
+    document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
+
+    document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
+  }
+  // Edit authentication
+  if (isEditPage) {
+    const authType = elAuthType.value;
+    if (authType === '2' || authType === '5') {
+      document.querySelector<HTMLInputElement>('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
+      document.querySelector('.js-ldap-group-toggle').addEventListener('change', onEnableLdapGroupsChange);
+      onEnableLdapGroupsChange();
+      if (authType === '2') {
+        document.querySelector<HTMLInputElement>('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
+      }
+    } else if (authType === '6') {
+      document.querySelector<HTMLInputElement>('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
+      document.querySelector<HTMLInputElement>('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
+      onOAuth2Change(false);
+    }
+  }
+
+  const elAuthName = document.querySelector<HTMLInputElement>('#auth_name');
+  const onAuthNameChange = function () {
+    // appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
+    document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(elAuthName.value)}/callback`;
+  };
+  elAuthName.addEventListener('input', onAuthNameChange);
+  onAuthNameChange();
+}
+
+function initAdminNotice() {
+  const pageContent = document.querySelector('.page-content.admin.notice');
+  if (!pageContent) return;
+
+  const detailModal = document.querySelector<HTMLDivElement>('#detail-modal');
+
+  // Attach view detail modals
+  queryElems(pageContent, '.view-detail', (el) => el.addEventListener('click', (e) => {
+    e.preventDefault();
+    const elNoticeDesc = el.closest('tr').querySelector('.notice-description');
+    const elModalDesc = detailModal.querySelector('.content pre');
+    elModalDesc.textContent = elNoticeDesc.textContent;
+    fomanticQuery(detailModal).modal('show');
+  }));
+
+  // Select actions
+  const checkboxes = document.querySelectorAll<HTMLInputElement>('.select.table .ui.checkbox input');
+
+  queryElems(pageContent, '.select.action', (el) => el.addEventListener('click', () => {
+    switch (el.getAttribute('data-action')) {
+      case 'select-all':
+        for (const checkbox of checkboxes) {
+          checkbox.checked = true;
+        }
+        break;
+      case 'deselect-all':
+        for (const checkbox of checkboxes) {
+          checkbox.checked = false;
+        }
+        break;
+      case 'inverse':
+        for (const checkbox of checkboxes) {
+          checkbox.checked = !checkbox.checked;
+        }
+        break;
+    }
+  }));
+
+  document.querySelector<HTMLButtonElement>('#delete-selection')?.addEventListener('click', async function (e) {
+    e.preventDefault();
+    this.classList.add('is-loading', 'disabled');
+    const data = new FormData();
+    for (const checkbox of checkboxes) {
+      if (checkbox.checked) {
+        data.append('ids[]', checkbox.closest('.ui.checkbox').getAttribute('data-id'));
+      }
+    }
+    await POST(this.getAttribute('data-link'), {data});
+    window.location.href = this.getAttribute('data-redirect');
+  });
+}

web_src/js/features/admin/config.ts

@@ -0,0 +1,24 @@
+import {showTemporaryTooltip} from '../../modules/tippy.ts';
+import {POST} from '../../modules/fetch.ts';
+
+const {appSubUrl} = window.config;
+
+export function initAdminConfigs(): void {
+  const elAdminConfig = document.querySelector<HTMLDivElement>('.page-content.admin.config');
+  if (!elAdminConfig) return;
+
+  for (const el of elAdminConfig.querySelectorAll<HTMLInputElement>('input[type="checkbox"][data-config-dyn-key]')) {
+    el.addEventListener('change', async () => {
+      try {
+        const resp = await POST(`${appSubUrl}/-/admin/config`, {
+          data: new URLSearchParams({key: el.getAttribute('data-config-dyn-key'), value: String(el.checked)}),
+        });
+        const json: Record<string, any> = await resp.json();
+        if (json.errorMessage) throw new Error(json.errorMessage);
+      } catch (ex) {
+        showTemporaryTooltip(el, ex.toString());
+        el.checked = !el.checked;
+      }
+    });
+  }
+}

web_src/js/features/admin/selfcheck.ts

@@ -0,0 +1,31 @@
+import {toggleElem} from '../../utils/dom.ts';
+import {POST} from '../../modules/fetch.ts';
+
+const {appSubUrl} = window.config;
+
+export async function initAdminSelfCheck() {
+  const elCheckByFrontend = document.querySelector('#self-check-by-frontend');
+  if (!elCheckByFrontend) return;
+
+  const elContent = document.querySelector<HTMLDivElement>('.page-content.admin .admin-setting-content');
+
+  // send frontend self-check request
+  const resp = await POST(`${appSubUrl}/-/admin/self_check`, {
+    data: new URLSearchParams({
+      location_origin: window.location.origin,
+      now: String(Date.now()), // TODO: check time difference between server and client
+    }),
+  });
+  const json: Record<string, any> = await resp.json();
+  toggleElem(elCheckByFrontend, Boolean(json.problems?.length));
+  for (const problem of json.problems ?? []) {
+    const elProblem = document.createElement('div');
+    elProblem.classList.add('ui', 'warning', 'message');
+    elProblem.textContent = problem;
+    elCheckByFrontend.append(elProblem);
+  }
+
+  // only show the "no problem" if there is no visible "self-check-problem"
+  const hasProblem = Boolean(elContent.querySelectorAll('.self-check-problem:not(.tw-hidden)').length);
+  toggleElem(elContent.querySelector('.self-check-no-problem'), !hasProblem);
+}

web_src/js/features/admin/users.ts

@@ -0,0 +1,39 @@
+export function initAdminUserListSearchForm(): void {
+  const searchForm = window.config.pageData.adminUserListSearchForm;
+  if (!searchForm) return;
+
+  const form = document.querySelector<HTMLFormElement>('#user-list-search-form');
+  if (!form) return;
+
+  for (const button of form.querySelectorAll(`button[name=sort][value="${searchForm.SortType}"]`)) {
+    button.classList.add('active');
+  }
+
+  if (searchForm.StatusFilterMap) {
+    for (const [k, v] of Object.entries(searchForm.StatusFilterMap)) {
+      if (!v) continue;
+      for (const input of form.querySelectorAll<HTMLInputElement>(`input[name="status_filter[${k}]"][value="${v}"]`)) {
+        input.checked = true;
+      }
+    }
+  }
+
+  for (const radio of form.querySelectorAll<HTMLInputElement>('input[type=radio]')) {
+    radio.addEventListener('click', () => {
+      form.submit();
+    });
+  }
+
+  const resetButtons = form.querySelectorAll<HTMLAnchorElement>('.j-reset-status-filter');
+  for (const button of resetButtons) {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      for (const input of form.querySelectorAll<HTMLInputElement>('input[type=radio]')) {
+        if (input.name.startsWith('status_filter[')) {
+          input.checked = false;
+        }
+      }
+      form.submit();
+    });
+  }
+}

web_src/js/features/captcha.ts

@@ -0,0 +1,58 @@
+import {isDarkTheme} from '../utils.ts';
+
+export async function initCaptcha() {
+  const captchaEl = document.querySelector('#captcha');
+  if (!captchaEl) return;
+
+  const siteKey = captchaEl.getAttribute('data-sitekey');
+  const isDark = isDarkTheme();
+
+  const params = {
+    sitekey: siteKey,
+    theme: isDark ? 'dark' : 'light',
+  };
+
+  switch (captchaEl.getAttribute('data-captcha-type')) {
+    case 'g-recaptcha': {
+      if (window.grecaptcha) {
+        window.grecaptcha.ready(() => {
+          window.grecaptcha.render(captchaEl, params);
+        });
+      }
+      break;
+    }
+    case 'cf-turnstile': {
+      if (window.turnstile) {
+        window.turnstile.render(captchaEl, params);
+      }
+      break;
+    }
+    case 'h-captcha': {
+      if (window.hcaptcha) {
+        window.hcaptcha.render(captchaEl, params);
+      }
+      break;
+    }
+    case 'm-captcha': {
+      const mCaptcha = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@mcaptcha/vanilla-glue');
+
+      // FIXME: the mCaptcha code is not right, it's a miracle that the wrong code could run
+      // * the "vanilla-glue" has some problems with es6 module.
+      // * the INPUT_NAME is a "const", it should not be changed.
+      // * the "mCaptcha.default" is actually the "Widget".
+
+      // @ts-expect-error TS2540: Cannot assign to 'INPUT_NAME' because it is a read-only property.
+      mCaptcha.INPUT_NAME = 'm-captcha-response';
+      const instanceURL = captchaEl.getAttribute('data-instance-url');
+
+      new mCaptcha.default({
+        siteKey: {
+          instanceUrl: new URL(instanceURL),
+          key: siteKey,
+        },
+      });
+      break;
+    }
+    default:
+  }
+}

web_src/js/features/citation.ts

@@ -0,0 +1,73 @@
+import {getCurrentLocale} from '../utils.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+
+const {pageData} = window.config;
+
+async function initInputCitationValue(citationCopyApa: HTMLButtonElement, citationCopyBibtex: HTMLButtonElement) {
+  const [{Cite, plugins}] = await Promise.all([
+    // @ts-expect-error: module exports no types
+    import(/* webpackChunkName: "citation-js-core" */'@citation-js/core'),
+    // @ts-expect-error: module exports no types
+    import(/* webpackChunkName: "citation-js-formats" */'@citation-js/plugin-software-formats'),
+    // @ts-expect-error: module exports no types
+    import(/* webpackChunkName: "citation-js-bibtex" */'@citation-js/plugin-bibtex'),
+    // @ts-expect-error: module exports no types
+    import(/* webpackChunkName: "citation-js-csl" */'@citation-js/plugin-csl'),
+  ]);
+  const {citationFileContent} = pageData;
+  const config = plugins.config.get('@bibtex');
+  config.constants.fieldTypes.doi = ['field', 'literal'];
+  config.constants.fieldTypes.version = ['field', 'literal'];
+  const citationFormatter = new Cite(citationFileContent);
+  const lang = getCurrentLocale() || 'en-US';
+  const apaOutput = citationFormatter.format('bibliography', {template: 'apa', lang});
+  const bibtexOutput = citationFormatter.format('bibtex', {lang});
+  citationCopyBibtex.setAttribute('data-text', bibtexOutput);
+  citationCopyApa.setAttribute('data-text', apaOutput);
+}
+
+export async function initCitationFileCopyContent() {
+  const defaultCitationFormat = 'apa'; // apa or bibtex
+
+  if (!pageData.citationFileContent) return;
+
+  const citationCopyApa = document.querySelector<HTMLButtonElement>('#citation-copy-apa');
+  const citationCopyBibtex = document.querySelector<HTMLButtonElement>('#citation-copy-bibtex');
+  const inputContent = document.querySelector<HTMLInputElement>('#citation-copy-content');
+
+  if ((!citationCopyApa && !citationCopyBibtex) || !inputContent) return;
+
+  const updateUi = () => {
+    const isBibtex = (localStorage.getItem('citation-copy-format') || defaultCitationFormat) === 'bibtex';
+    const copyContent = (isBibtex ? citationCopyBibtex : citationCopyApa).getAttribute('data-text');
+    inputContent.value = copyContent;
+    citationCopyBibtex.classList.toggle('primary', isBibtex);
+    citationCopyApa.classList.toggle('primary', !isBibtex);
+  };
+
+  document.querySelector('#cite-repo-button')?.addEventListener('click', async () => {
+    try {
+      await initInputCitationValue(citationCopyApa, citationCopyBibtex);
+    } catch (e) {
+      console.error(`initCitationFileCopyContent error: ${e}`, e);
+      return;
+    }
+    updateUi();
+
+    citationCopyApa.addEventListener('click', () => {
+      localStorage.setItem('citation-copy-format', 'apa');
+      updateUi();
+    });
+
+    citationCopyBibtex.addEventListener('click', () => {
+      localStorage.setItem('citation-copy-format', 'bibtex');
+      updateUi();
+    });
+
+    inputContent.addEventListener('click', () => {
+      inputContent.select();
+    });
+
+    fomanticQuery('#cite-repo-modal').modal('show');
+  });
+}

web_src/js/features/clipboard.ts

@@ -0,0 +1,33 @@
+import {showTemporaryTooltip} from '../modules/tippy.ts';
+import {toAbsoluteUrl} from '../utils.ts';
+import {clippie} from 'clippie';
+import type {DOMEvent} from '../utils/dom.ts';
+
+const {copy_success, copy_error} = window.config.i18n;
+
+// Enable clipboard copy from HTML attributes. These properties are supported:
+// - data-clipboard-text: Direct text to copy
+// - data-clipboard-target: Holds a selector for a <input> or <textarea> whose content is copied
+// - data-clipboard-text-type: When set to 'url' will convert relative to absolute urls
+export function initGlobalCopyToClipboardListener() {
+  document.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
+    const target = e.target.closest('[data-clipboard-text], [data-clipboard-target]');
+    if (!target) return;
+
+    e.preventDefault();
+
+    let text = target.getAttribute('data-clipboard-text');
+    if (!text) {
+      text = document.querySelector<HTMLInputElement>(target.getAttribute('data-clipboard-target'))?.value;
+    }
+
+    if (text && target.getAttribute('data-clipboard-text-type') === 'url') {
+      text = toAbsoluteUrl(text);
+    }
+
+    if (text) {
+      const success = await clippie(text);
+      showTemporaryTooltip(target, success ? copy_success : copy_error);
+    }
+  });
+}

web_src/js/features/code-frequency.ts

@@ -0,0 +1,21 @@
+import {createApp} from 'vue';
+
+export async function initRepoCodeFrequency() {
+  const el = document.querySelector('#repo-code-frequency-chart');
+  if (!el) return;
+
+  const {default: RepoCodeFrequency} = await import(/* webpackChunkName: "code-frequency-graph" */'../components/RepoCodeFrequency.vue');
+  try {
+    const View = createApp(RepoCodeFrequency, {
+      locale: {
+        loadingTitle: el.getAttribute('data-locale-loading-title'),
+        loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'),
+        loadingInfo: el.getAttribute('data-locale-loading-info'),
+      },
+    });
+    View.mount(el);
+  } catch (err) {
+    console.error('RepoCodeFrequency failed to load', err);
+    el.textContent = el.getAttribute('data-locale-component-failed-to-load');
+  }
+}

web_src/js/features/codeeditor.ts

@@ -0,0 +1,242 @@
+import tinycolor from 'tinycolor2';
+import {basename, extname, isObject, isDarkTheme} from '../utils.ts';
+import {onInputDebounce} from '../utils/dom.ts';
+import type MonacoNamespace from 'monaco-editor';
+
+type Monaco = typeof MonacoNamespace;
+type IStandaloneCodeEditor = MonacoNamespace.editor.IStandaloneCodeEditor;
+type IEditorOptions = MonacoNamespace.editor.IEditorOptions;
+type IGlobalEditorOptions = MonacoNamespace.editor.IGlobalEditorOptions;
+type ITextModelUpdateOptions = MonacoNamespace.editor.ITextModelUpdateOptions;
+type MonacoOpts = IEditorOptions & IGlobalEditorOptions & ITextModelUpdateOptions;
+
+type EditorConfig = {
+  indent_style?: 'tab' | 'space',
+  indent_size?: string | number, // backend emits this as string
+  tab_width?: string | number, // backend emits this as string
+  end_of_line?: 'lf' | 'cr' | 'crlf',
+  charset?: 'latin1' | 'utf-8' | 'utf-8-bom' | 'utf-16be' | 'utf-16le',
+  trim_trailing_whitespace?: boolean,
+  insert_final_newline?: boolean,
+  root?: boolean,
+};
+
+const languagesByFilename: Record<string, string> = {};
+const languagesByExt: Record<string, string> = {};
+
+const baseOptions: MonacoOpts = {
+  fontFamily: 'var(--fonts-monospace)',
+  fontSize: 14, // https://github.com/microsoft/monaco-editor/issues/2242
+  guides: {bracketPairs: false, indentation: false},
+  links: false,
+  minimap: {enabled: false},
+  occurrencesHighlight: 'off',
+  overviewRulerLanes: 0,
+  renderLineHighlight: 'all',
+  renderLineHighlightOnlyWhenFocus: true,
+  rulers: [],
+  scrollbar: {horizontalScrollbarSize: 6, verticalScrollbarSize: 6},
+  scrollBeyondLastLine: false,
+  automaticLayout: true,
+};
+
+function getEditorconfig(input: HTMLInputElement): EditorConfig | null {
+  const json = input.getAttribute('data-editorconfig');
+  if (!json) return null;
+  try {
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+
+function initLanguages(monaco: Monaco): void {
+  for (const {filenames, extensions, id} of monaco.languages.getLanguages()) {
+    for (const filename of filenames || []) {
+      languagesByFilename[filename] = id;
+    }
+    for (const extension of extensions || []) {
+      languagesByExt[extension] = id;
+    }
+    if (id === 'typescript') {
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        // this is needed to suppress error annotations in tsx regarding missing --jsx flag.
+        jsx: monaco.languages.typescript.JsxEmit.Preserve,
+      });
+    }
+  }
+}
+
+function getLanguage(filename: string): string {
+  return languagesByFilename[filename] || languagesByExt[extname(filename)] || 'plaintext';
+}
+
+function updateEditor(monaco: Monaco, editor: IStandaloneCodeEditor, filename: string, lineWrapExts: string[]): void {
+  editor.updateOptions(getFileBasedOptions(filename, lineWrapExts));
+  const model = editor.getModel();
+  if (!model) return;
+  const language = model.getLanguageId();
+  const newLanguage = getLanguage(filename);
+  if (language !== newLanguage) monaco.editor.setModelLanguage(model, newLanguage);
+  // TODO: Need to update the model uri with the new filename, but there is no easy way currently, see
+  // https://github.com/microsoft/monaco-editor/discussions/3751
+}
+
+// export editor for customization - https://github.com/go-gitea/gitea/issues/10409
+function exportEditor(editor: IStandaloneCodeEditor): void {
+  if (!window.codeEditors) window.codeEditors = [];
+  if (!window.codeEditors.includes(editor)) window.codeEditors.push(editor);
+}
+
+function updateTheme(monaco: Monaco): void {
+  // https://github.com/microsoft/monaco-editor/issues/2427
+  // also, monaco can only parse 6-digit hex colors, so we convert the colors to that format
+  const styles = window.getComputedStyle(document.documentElement);
+  const getColor = (name: string) => tinycolor(styles.getPropertyValue(name).trim()).toString('hex6');
+
+  monaco.editor.defineTheme('gitea', {
+    base: isDarkTheme() ? 'vs-dark' : 'vs',
+    inherit: true,
+    rules: [
+      {
+        background: getColor('--color-code-bg'),
+        token: '',
+      },
+    ],
+    colors: {
+      'editor.background': getColor('--color-code-bg'),
+      'editor.foreground': getColor('--color-text'),
+      'editor.inactiveSelectionBackground': getColor('--color-primary-light-4'),
+      'editor.lineHighlightBackground': getColor('--color-editor-line-highlight'),
+      'editor.selectionBackground': getColor('--color-primary-light-3'),
+      'editor.selectionForeground': getColor('--color-primary-light-3'),
+      'editorLineNumber.background': getColor('--color-code-bg'),
+      'editorLineNumber.foreground': getColor('--color-secondary-dark-6'),
+      'editorWidget.background': getColor('--color-body'),
+      'editorWidget.border': getColor('--color-secondary'),
+      'input.background': getColor('--color-input-background'),
+      'input.border': getColor('--color-input-border'),
+      'input.foreground': getColor('--color-input-text'),
+      'scrollbar.shadow': getColor('--color-shadow-opaque'),
+      'progressBar.background': getColor('--color-primary'),
+      'focusBorder': '#0000', // prevent blue border
+    },
+  });
+}
+
+type CreateMonacoOpts = MonacoOpts & {language?: string};
+
+export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, opts: CreateMonacoOpts): Promise<{monaco: Monaco, editor: IStandaloneCodeEditor}> {
+  const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
+
+  initLanguages(monaco);
+  let {language, ...other} = opts;
+  if (!language) language = getLanguage(filename);
+
+  const container = document.createElement('div');
+  container.className = 'monaco-editor-container';
+  if (!textarea.parentNode) throw new Error('Parent node absent');
+  textarea.parentNode.append(container);
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    updateTheme(monaco);
+  });
+  updateTheme(monaco);
+
+  const model = monaco.editor.createModel(textarea.value, language, monaco.Uri.file(filename));
+
+  const editor = monaco.editor.create(container, {
+    model,
+    theme: 'gitea',
+    ...other,
+  });
+
+  monaco.editor.addKeybindingRules([
+    {keybinding: monaco.KeyCode.Enter, command: null}, // disable enter from accepting code completion
+  ]);
+
+  model.onDidChangeContent(() => {
+    textarea.value = editor.getValue({
+      preserveBOM: true,
+      lineEnding: '',
+    });
+    textarea.dispatchEvent(new Event('change')); // seems to be needed for jquery-are-you-sure
+  });
+
+  exportEditor(editor);
+
+  const loading = document.querySelector('.editor-loading');
+  if (loading) loading.remove();
+
+  return {monaco, editor};
+}
+
+function getFileBasedOptions(filename: string, lineWrapExts: string[]): MonacoOpts {
+  return {
+    wordWrap: (lineWrapExts || []).includes(extname(filename)) ? 'on' : 'off',
+  };
+}
+
+function togglePreviewDisplay(previewable: boolean): void {
+  const previewTab = document.querySelector<HTMLElement>('a[data-tab="preview"]');
+  if (!previewTab) return;
+
+  if (previewable) {
+    previewTab.style.display = '';
+  } else {
+    previewTab.style.display = 'none';
+    // If the "preview" tab was active, user changes the filename to a non-previewable one,
+    // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
+    if (previewTab.classList.contains('active')) {
+      const writeTab = document.querySelector<HTMLElement>('a[data-tab="write"]');
+      writeTab?.click();
+    }
+  }
+}
+
+export async function createCodeEditor(textarea: HTMLTextAreaElement, filenameInput: HTMLInputElement): Promise<IStandaloneCodeEditor> {
+  const filename = basename(filenameInput.value);
+  const previewableExts = new Set((textarea.getAttribute('data-previewable-extensions') || '').split(','));
+  const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(',');
+  const isPreviewable = previewableExts.has(extname(filename));
+  const editorConfig = getEditorconfig(filenameInput);
+
+  togglePreviewDisplay(isPreviewable);
+
+  const {monaco, editor} = await createMonaco(textarea, filename, {
+    ...baseOptions,
+    ...getFileBasedOptions(filenameInput.value, lineWrapExts),
+    ...getEditorConfigOptions(editorConfig),
+  });
+
+  filenameInput.addEventListener('input', onInputDebounce(() => {
+    const filename = filenameInput.value;
+    const previewable = previewableExts.has(extname(filename));
+    togglePreviewDisplay(previewable);
+    updateEditor(monaco, editor, filename, lineWrapExts);
+  }));
+
+  return editor;
+}
+
+function getEditorConfigOptions(ec: EditorConfig | null): MonacoOpts {
+  if (!ec || !isObject(ec)) return {};
+
+  const opts: MonacoOpts = {};
+  opts.detectIndentation = !('indent_style' in ec) || !('indent_size' in ec);
+
+  if ('indent_size' in ec) {
+    opts.indentSize = Number(ec.indent_size);
+  }
+  if ('tab_width' in ec) {
+    opts.tabSize = Number(ec.tab_width) || Number(ec.indent_size);
+  }
+  if ('max_line_length' in ec) {
+    opts.rulers = [Number(ec.max_line_length)];
+  }
+
+  opts.trimAutoWhitespace = ec.trim_trailing_whitespace === true;
+  opts.insertSpaces = ec.indent_style === 'space';
+  opts.useTabStops = ec.indent_style === 'tab';
+  return opts;
+}

web_src/js/features/colorpicker.ts

@@ -0,0 +1,75 @@
+import {createTippy} from '../modules/tippy.ts';
+import type {DOMEvent} from '../utils/dom.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+
+export async function initColorPickers() {
+  let imported = false;
+  registerGlobalInitFunc('initColorPicker', async (el) => {
+    if (!imported) {
+      await Promise.all([
+        import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'),
+        import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
+      ]);
+      imported = true;
+    }
+    initPicker(el);
+  });
+}
+
+function updateSquare(el: HTMLElement, newValue: string): void {
+  el.style.color = /#[0-9a-f]{6}/i.test(newValue) ? newValue : 'transparent';
+}
+
+function updatePicker(el: HTMLElement, newValue: string): void {
+  el.setAttribute('color', newValue);
+}
+
+function initPicker(el: HTMLElement): void {
+  const input = el.querySelector('input');
+
+  const square = document.createElement('div');
+  square.classList.add('preview-square');
+  updateSquare(square, input.value);
+  el.append(square);
+
+  const picker = document.createElement('hex-color-picker');
+  picker.addEventListener('color-changed', (e) => {
+    input.value = e.detail.value;
+    input.focus();
+    updateSquare(square, e.detail.value);
+  });
+
+  input.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
+    updateSquare(square, e.target.value);
+    updatePicker(picker, e.target.value);
+  });
+
+  createTippy(input, {
+    trigger: 'focus click',
+    theme: 'bare',
+    hideOnClick: true,
+    content: picker,
+    placement: 'bottom-start',
+    interactive: true,
+    onShow() {
+      updatePicker(picker, input.value);
+    },
+  });
+
+  // init random color & precolors
+  const setSelectedColor = (color: string) => {
+    input.value = color;
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    updateSquare(square, color);
+  };
+  el.querySelector('.generate-random-color').addEventListener('click', () => {
+    const newValue = `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;
+    setSelectedColor(newValue);
+  });
+  for (const colorEl of el.querySelectorAll<HTMLElement>('.precolors .color')) {
+    colorEl.addEventListener('click', (e: DOMEvent<MouseEvent, HTMLAnchorElement>) => {
+      const newValue = e.target.getAttribute('data-color-hex');
+      setSelectedColor(newValue);
+    });
+  }
+}

web_src/js/features/common-button.test.ts

@@ -0,0 +1,25 @@
+import {assignElementProperty, type ElementWithAssignableProperties} from './common-button.ts';
+
+test('assignElementProperty', () => {
+  const elForm = document.createElement('form');
+  assignElementProperty(elForm, 'action', '/test-link');
+  expect(elForm.action).contains('/test-link'); // the DOM always returns absolute URL
+  expect(elForm.getAttribute('action')).eq('/test-link');
+  assignElementProperty(elForm, 'text-content', 'dummy');
+  expect(elForm.textContent).toBe('dummy');
+
+  // mock a form with its property "action" overwritten by an input element
+  const elFormWithAction = new class implements ElementWithAssignableProperties {
+    action = document.createElement('input'); // now "form.action" is not string, but an input element
+    _attrs: Record<string, string> = {};
+    setAttribute(name: string, value: string) { this._attrs[name] = value }
+    getAttribute(name: string): string | null { return this._attrs[name] }
+  }();
+  assignElementProperty(elFormWithAction, 'action', '/bar');
+  expect(elFormWithAction.getAttribute('action')).eq('/bar');
+
+  const elInput = document.createElement('input');
+  expect(elInput.readOnly).toBe(false);
+  assignElementProperty(elInput, 'read-only', 'true');
+  expect(elInput.readOnly).toBe(true);
+});

web_src/js/features/common-button.ts

@@ -0,0 +1,196 @@
+import {POST} from '../modules/fetch.ts';
+import {addDelegatedEventListener, hideElem, isElemVisible, showElem, toggleElem} from '../utils/dom.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {camelize} from 'vue';
+
+export function initGlobalButtonClickOnEnter(): void {
+  addDelegatedEventListener(document, 'keypress', 'div.ui.button, span.ui.button', (el, e: KeyboardEvent) => {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault();
+      el.click();
+    }
+  });
+}
+
+export function initGlobalDeleteButton(): void {
+  // ".delete-button" shows a confirmation modal defined by `data-modal-id` attribute.
+  // Some model/form elements will be filled by `data-id` / `data-name` / `data-data-xxx` attributes.
+  // If there is a form defined by `data-form`, then the form will be submitted as-is (without any modification).
+  // If there is no form, then the data will be posted to `data-url`.
+  // TODO: do not use this method in new code. `show-modal` / `link-action(data-modal-confirm)` does far better than this.
+  // FIXME: all legacy `delete-button` should be refactored to use `show-modal` or `link-action`
+  for (const btn of document.querySelectorAll<HTMLElement>('.delete-button')) {
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+
+      // eslint-disable-next-line github/no-dataset -- code depends on the camel-casing
+      const dataObj = btn.dataset;
+
+      const modalId = btn.getAttribute('data-modal-id');
+      const modal = document.querySelector(`.delete.modal${modalId ? `#${modalId}` : ''}`);
+
+      // set the modal "display name" by `data-name`
+      const modalNameEl = modal.querySelector('.name');
+      if (modalNameEl) modalNameEl.textContent = btn.getAttribute('data-name');
+
+      // fill the modal elements with data-xxx attributes: `data-data-organization-name="..."` => `<span class="dataOrganizationName">...</span>`
+      for (const [key, value] of Object.entries(dataObj)) {
+        if (key.startsWith('data')) {
+          const textEl = modal.querySelector(`.${key}`);
+          if (textEl) textEl.textContent = value;
+        }
+      }
+
+      fomanticQuery(modal).modal({
+        closable: false,
+        onApprove: () => {
+          // if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
+          if (btn.getAttribute('data-type') === 'form') {
+            const formSelector = btn.getAttribute('data-form');
+            const form = document.querySelector<HTMLFormElement>(formSelector);
+            if (!form) throw new Error(`no form named ${formSelector} found`);
+            modal.classList.add('is-loading'); // the form is not in the modal, so also add loading indicator to the modal
+            form.classList.add('is-loading');
+            form.submit();
+            return false; // prevent modal from closing automatically
+          }
+
+          // prepare an AJAX form by data attributes
+          const postData = new FormData();
+          for (const [key, value] of Object.entries(dataObj)) {
+            if (key.startsWith('data')) { // for data-data-xxx (HTML) -> dataXxx (form)
+              postData.append(key.slice(4), value);
+            }
+            if (key === 'id') { // for data-id="..."
+              postData.append('id', value);
+            }
+          }
+          (async () => {
+            const response = await POST(btn.getAttribute('data-url'), {data: postData});
+            if (response.ok) {
+              const data = await response.json();
+              window.location.href = data.redirect;
+            }
+          })();
+          modal.classList.add('is-loading'); // the request is in progress, so also add loading indicator to the modal
+          return false; // prevent modal from closing automatically
+        },
+      }).modal('show');
+    });
+  }
+}
+
+function onShowPanelClick(el: HTMLElement, e: MouseEvent) {
+  // a '.show-panel' element can show a panel, by `data-panel="selector"`
+  // if it has "toggle" class, it toggles the panel
+  e.preventDefault();
+  const sel = el.getAttribute('data-panel');
+  const elems = el.classList.contains('toggle') ? toggleElem(sel) : showElem(sel);
+  for (const elem of elems) {
+    if (isElemVisible(elem as HTMLElement)) {
+      elem.querySelector<HTMLElement>('[autofocus]')?.focus();
+    }
+  }
+}
+
+function onHidePanelClick(el: HTMLElement, e: MouseEvent) {
+  // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
+  e.preventDefault();
+  let sel = el.getAttribute('data-panel');
+  if (sel) {
+    hideElem(sel);
+    return;
+  }
+  sel = el.getAttribute('data-panel-closest');
+  if (sel) {
+    hideElem((el.parentNode as HTMLElement).closest(sel));
+    return;
+  }
+  throw new Error('no panel to hide'); // should never happen, otherwise there is a bug in code
+}
+
+export type ElementWithAssignableProperties = {
+  getAttribute: (name: string) => string | null;
+  setAttribute: (name: string, value: string) => void;
+} & Record<string, any>;
+
+export function assignElementProperty(el: ElementWithAssignableProperties, kebabName: string, val: string) {
+  const camelizedName = camelize(kebabName);
+  const old = el[camelizedName];
+  if (typeof old === 'boolean') {
+    el[camelizedName] = val === 'true';
+  } else if (typeof old === 'number') {
+    el[camelizedName] = parseFloat(val);
+  } else if (typeof old === 'string') {
+    el[camelizedName] = val;
+  } else if (old?.nodeName) {
+    // "form" has an edge case: its "<input name=action>" element overwrites the "action" property, we can only set attribute
+    el.setAttribute(kebabName, val);
+  } else {
+    // in the future, we could introduce a better typing system like `data-modal-form.action:string="..."`
+    throw new Error(`cannot assign element property "${camelizedName}" by value "${val}"`);
+  }
+}
+
+function onShowModalClick(el: HTMLElement, e: MouseEvent) {
+  // A ".show-modal" button will show a modal dialog defined by its "data-modal" attribute.
+  // Each "data-modal-{target}" attribute will be filled to target element's value or text-content.
+  // * First, try to query '#target'
+  // * Then, try to query '[name=target]'
+  // * Then, try to query '.target'
+  // * Then, try to query 'target' as HTML tag
+  // If there is a ".{prop-name}" part like "data-modal-form.action", the "form" element's "action" property will be set, the "prop-name" will be camel-cased to "propName".
+  e.preventDefault();
+  const modalSelector = el.getAttribute('data-modal');
+  const elModal = document.querySelector(modalSelector);
+  if (!elModal) throw new Error('no modal for this action');
+
+  const modalAttrPrefix = 'data-modal-';
+  for (const attrib of el.attributes) {
+    if (!attrib.name.startsWith(modalAttrPrefix)) {
+      continue;
+    }
+
+    const attrTargetCombo = attrib.name.substring(modalAttrPrefix.length);
+    const [attrTargetName, attrTargetProp] = attrTargetCombo.split('.');
+    // try to find target by: "#target" -> "[name=target]" -> ".target" -> "<target> tag", and then try the modal itself
+    const attrTarget = elModal.querySelector(`#${attrTargetName}`) ||
+      elModal.querySelector(`[name=${attrTargetName}]`) ||
+      elModal.querySelector(`.${attrTargetName}`) ||
+      elModal.querySelector(`${attrTargetName}`) ||
+      (elModal.matches(`${attrTargetName}`) || elModal.matches(`#${attrTargetName}`) || elModal.matches(`.${attrTargetName}`) ? elModal : null);
+    if (!attrTarget) {
+      if (!window.config.runModeIsProd) throw new Error(`attr target "${attrTargetCombo}" not found for modal`);
+      continue;
+    }
+
+    if (attrTargetProp) {
+      assignElementProperty(attrTarget, attrTargetProp, attrib.value);
+    } else if (attrTarget.matches('input, textarea')) {
+      (attrTarget as HTMLInputElement | HTMLTextAreaElement).value = attrib.value; // FIXME: add more supports like checkbox
+    } else {
+      attrTarget.textContent = attrib.value; // FIXME: it should be more strict here, only handle div/span/p
+    }
+  }
+
+  fomanticQuery(elModal).modal('show');
+}
+
+export function initGlobalButtons(): void {
+  // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
+  // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
+  // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
+  addDelegatedEventListener(document, 'click', 'form button.ui.cancel.button', (_ /* el */, e) => e.preventDefault());
+
+  // Ideally these "button" events should be handled by registerGlobalEventFunc
+  // Refactoring would involve too many changes, so at the moment, just use the global event listener.
+  addDelegatedEventListener(document, 'click', '.show-panel, .hide-panel, .show-modal', (el, e: MouseEvent) => {
+    if (el.classList.contains('show-panel')) {
+      onShowPanelClick(el, e);
+    } else if (el.classList.contains('hide-panel')) {
+      onHidePanelClick(el, e);
+    } else if (el.classList.contains('show-modal')) {
+      onShowModalClick(el, e);
+    }
+  });
+}

web_src/js/features/common-fetch-action.ts

@@ -0,0 +1,159 @@
+import {request} from '../modules/fetch.ts';
+import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
+import {addDelegatedEventListener, createElementFromHTML, submitEventSubmitter} from '../utils/dom.ts';
+import {confirmModal, createConfirmModal} from './comp/ConfirmModal.ts';
+import type {RequestOpts} from '../types.ts';
+import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+
+const {appSubUrl} = window.config;
+
+// fetchActionDoRedirect does real redirection to bypass the browser's limitations of "location"
+// more details are in the backend's fetch-redirect handler
+function fetchActionDoRedirect(redirect: string) {
+  const form = document.createElement('form');
+  const input = document.createElement('input');
+  form.method = 'post';
+  form.action = `${appSubUrl}/-/fetch-redirect`;
+  input.type = 'hidden';
+  input.name = 'redirect';
+  input.value = redirect;
+  form.append(input);
+  document.body.append(form);
+  form.submit();
+}
+
+async function fetchActionDoRequest(actionElem: HTMLElement, url: string, opt: RequestOpts) {
+  const showErrorForResponse = (code: number, message: string) => {
+    showErrorToast(`Error ${code || 'request'}: ${message}`);
+  };
+
+  let respStatus = 0;
+  let respText = '';
+  try {
+    hideToastsAll();
+    const resp = await request(url, opt);
+    respStatus = resp.status;
+    respText = await resp.text();
+    const respJson = JSON.parse(respText);
+    if (respStatus === 200) {
+      let {redirect} = respJson;
+      redirect = redirect || actionElem.getAttribute('data-redirect');
+      ignoreAreYouSure(actionElem); // ignore the areYouSure check before reloading
+      if (redirect) {
+        fetchActionDoRedirect(redirect);
+      } else {
+        window.location.reload();
+      }
+      return;
+    }
+
+    if (respStatus >= 400 && respStatus < 500 && respJson?.errorMessage) {
+      // the code was quite messy, sometimes the backend uses "err", sometimes it uses "error", and even "user_error"
+      // but at the moment, as a new approach, we only use "errorMessage" here, backend can use JSONError() to respond.
+      showErrorToast(respJson.errorMessage, {useHtmlBody: respJson.renderFormat === 'html'});
+    } else {
+      showErrorForResponse(respStatus, respText);
+    }
+  } catch (e) {
+    if (e.name === 'SyntaxError') {
+      showErrorForResponse(respStatus, (respText || '').substring(0, 100));
+    } else if (e.name !== 'AbortError') {
+      console.error('fetchActionDoRequest error', e);
+      showErrorForResponse(respStatus, `${e}`);
+    }
+  }
+  actionElem.classList.remove('is-loading', 'loading-icon-2px');
+}
+
+async function onFormFetchActionSubmit(formEl: HTMLFormElement, e: SubmitEvent) {
+  e.preventDefault();
+  await submitFormFetchAction(formEl, submitEventSubmitter(e));
+}
+
+export async function submitFormFetchAction(formEl: HTMLFormElement, formSubmitter?: HTMLElement) {
+  if (formEl.classList.contains('is-loading')) return;
+
+  formEl.classList.add('is-loading');
+  if (formEl.clientHeight < 50) {
+    formEl.classList.add('loading-icon-2px');
+  }
+
+  const formMethod = formEl.getAttribute('method') || 'get';
+  const formActionUrl = formEl.getAttribute('action') || window.location.href;
+  const formData = new FormData(formEl);
+  const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')];
+  if (submitterName) {
+    formData.append(submitterName, submitterValue || '');
+  }
+
+  let reqUrl = formActionUrl;
+  const reqOpt = {
+    method: formMethod.toUpperCase(),
+    body: null as FormData | null,
+  };
+  if (formMethod.toLowerCase() === 'get') {
+    const params = new URLSearchParams();
+    for (const [key, value] of formData) {
+      params.append(key, value.toString());
+    }
+    const pos = reqUrl.indexOf('?');
+    if (pos !== -1) {
+      reqUrl = reqUrl.slice(0, pos);
+    }
+    reqUrl += `?${params.toString()}`;
+  } else {
+    reqOpt.body = formData;
+  }
+
+  await fetchActionDoRequest(formEl, reqUrl, reqOpt);
+}
+
+async function onLinkActionClick(el: HTMLElement, e: Event) {
+  // A "link-action" can post AJAX request to its "data-url"
+  // Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading.
+  // If the "link-action" has "data-modal-confirm" attribute, a "confirm modal dialog" will be shown before taking action.
+  // Attribute "data-modal-confirm" can be a modal element by "#the-modal-id", or a string content for the modal dialog.
+  e.preventDefault();
+  const url = el.getAttribute('data-url');
+  const doRequest = async () => {
+    if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but "A" doesn't have the "disabled" attribute
+    await fetchActionDoRequest(el, url, {method: el.getAttribute('data-link-action-method') || 'POST'});
+    if ('disabled' in el) el.disabled = false;
+  };
+
+  let elModal: HTMLElement | null = null;
+  const dataModalConfirm = el.getAttribute('data-modal-confirm') || '';
+  if (dataModalConfirm.startsWith('#')) {
+    // eslint-disable-next-line unicorn/prefer-query-selector
+    elModal = document.getElementById(dataModalConfirm.substring(1));
+    if (elModal) {
+      elModal = createElementFromHTML(elModal.outerHTML);
+      elModal.removeAttribute('id');
+    }
+  }
+  if (!elModal) {
+    const modalConfirmContent = dataModalConfirm || el.getAttribute('data-modal-confirm-content') || '';
+    if (modalConfirmContent) {
+      const isRisky = el.classList.contains('red') || el.classList.contains('negative');
+      elModal = createConfirmModal({
+        header: el.getAttribute('data-modal-confirm-header') || '',
+        content: modalConfirmContent,
+        confirmButtonColor: isRisky ? 'red' : 'primary',
+      });
+    }
+  }
+
+  if (!elModal) {
+    await doRequest();
+    return;
+  }
+
+  if (await confirmModal(elModal)) {
+    await doRequest();
+  }
+}
+
+export function initGlobalFetchAction() {
+  addDelegatedEventListener(document, 'submit', '.form-fetch-action', onFormFetchActionSubmit);
+  addDelegatedEventListener(document, 'click', '.link-action', onLinkActionClick);
+}

web_src/js/features/common-form.ts

@@ -0,0 +1,35 @@
+import {applyAreYouSure, initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.ts';
+import {queryElems, type DOMEvent} from '../utils/dom.ts';
+import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
+
+export function initGlobalFormDirtyLeaveConfirm() {
+  initAreYouSure(window.jQuery);
+  // Warn users that try to leave a page after entering data into a form.
+  // Except on sign-in pages, and for forms marked as 'ignore-dirty'.
+  if (!document.querySelector('.page-content.user.signin')) {
+    applyAreYouSure('form:not(.ignore-dirty)');
+  }
+}
+
+export function initGlobalEnterQuickSubmit() {
+  document.addEventListener('keydown', (e: DOMEvent<KeyboardEvent>) => {
+    if (e.key !== 'Enter') return;
+    const hasCtrlOrMeta = ((e.ctrlKey || e.metaKey) && !e.altKey);
+    if (hasCtrlOrMeta && e.target.matches('textarea')) {
+      if (handleGlobalEnterQuickSubmit(e.target as HTMLElement)) {
+        e.preventDefault();
+      }
+    } else if (e.target.matches('input') && !e.target.closest('form')) {
+      // input in a normal form could handle Enter key by default, so we only handle the input outside a form
+      // eslint-disable-next-line unicorn/no-lonely-if
+      if (handleGlobalEnterQuickSubmit(e.target as HTMLElement)) {
+        e.preventDefault();
+      }
+    }
+  });
+}
+
+export function initGlobalComboMarkdownEditor() {
+  queryElems<HTMLElement>(document, '.combo-markdown-editor:not(.custom-init)', (el) => initComboMarkdownEditor(el));
+}

web_src/js/features/common-issue-list.test.ts

@@ -0,0 +1,16 @@
+import {parseIssueListQuickGotoLink} from './common-issue-list.ts';
+
+test('parseIssueListQuickGotoLink', () => {
+  expect(parseIssueListQuickGotoLink('/link', '')).toEqual('');
+  expect(parseIssueListQuickGotoLink('/link', 'abc')).toEqual('');
+  expect(parseIssueListQuickGotoLink('/link', '123')).toEqual('/link/issues/123');
+  expect(parseIssueListQuickGotoLink('/link', '#123')).toEqual('/link/issues/123');
+  expect(parseIssueListQuickGotoLink('/link', 'owner/repo#123')).toEqual('');
+
+  expect(parseIssueListQuickGotoLink('', '')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', 'abc')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', '123')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', '#123')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', 'owner/repo#')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', 'owner/repo#123')).toEqual('/owner/repo/issues/123');
+});

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

@@ -0,0 +1,67 @@
+import {isElemVisible, onInputDebounce, submitEventSubmitter, toggleElem} from '../utils/dom.ts';
+import {GET} from '../modules/fetch.ts';
+
+const {appSubUrl} = window.config;
+const reIssueIndex = /^(\d+)$/; // eg: "123"
+const reIssueSharpIndex = /^#(\d+)$/; // eg: "#123"
+const reIssueOwnerRepoIndex = /^([-.\w]+)\/([-.\w]+)#(\d+)$/;  // eg: "{owner}/{repo}#{index}"
+
+// if the searchText can be parsed to an "issue goto link", return the link, otherwise return empty string
+export function parseIssueListQuickGotoLink(repoLink: string, searchText: string) {
+  searchText = searchText.trim();
+  let targetUrl = '';
+  if (repoLink) {
+    // try to parse it in current repo
+    if (reIssueIndex.test(searchText)) {
+      targetUrl = `${repoLink}/issues/${searchText}`;
+    } else if (reIssueSharpIndex.test(searchText)) {
+      targetUrl = `${repoLink}/issues/${searchText.substring(1)}`;
+    }
+  } else {
+    // try to parse it for a global search (eg: "owner/repo#123")
+    const [_, owner, repo, index] = reIssueOwnerRepoIndex.exec(searchText) || [];
+    if (owner) {
+      targetUrl = `${appSubUrl}/${owner}/${repo}/issues/${index}`;
+    }
+  }
+  return targetUrl;
+}
+
+export function initCommonIssueListQuickGoto() {
+  const goto = document.querySelector<HTMLElement>('#issue-list-quick-goto');
+  if (!goto) return;
+
+  const form = goto.closest('form');
+  const input = form.querySelector<HTMLInputElement>('input[name=q]');
+  const repoLink = goto.getAttribute('data-repo-link');
+
+  form.addEventListener('submit', (e) => {
+    // if there is no goto button, or the form is submitted by non-quick-goto elements, submit the form directly
+    let doQuickGoto = isElemVisible(goto);
+    const submitter = submitEventSubmitter(e);
+    if (submitter !== form && submitter !== input && submitter !== goto) doQuickGoto = false;
+    if (!doQuickGoto) return;
+
+    // if there is a goto button, use its link
+    e.preventDefault();
+    window.location.href = goto.getAttribute('data-issue-goto-link');
+  });
+
+  const onInput = async () => {
+    const searchText = input.value;
+    // try to check whether the parsed goto link is valid
+    let targetUrl = parseIssueListQuickGotoLink(repoLink, searchText);
+    if (targetUrl) {
+      const res = await GET(`${targetUrl}/info`); // backend: GetIssueInfo, it only checks whether the issue exists by status code
+      if (res.status !== 200) targetUrl = '';
+    }
+    // if the input value has changed, then ignore the result
+    if (input.value !== searchText) return;
+
+    toggleElem(goto, Boolean(targetUrl));
+    goto.setAttribute('data-issue-goto-link', targetUrl);
+  };
+
+  input.addEventListener('input', onInputDebounce(onInput));
+  onInput();
+}

web_src/js/features/common-organization.ts

@@ -0,0 +1,16 @@
+import {initCompLabelEdit} from './comp/LabelEdit.ts';
+import {toggleElem} from '../utils/dom.ts';
+
+export function initCommonOrganization() {
+  if (!document.querySelectorAll('.organization').length) {
+    return;
+  }
+
+  document.querySelector<HTMLInputElement>('.organization.settings.options #org_name')?.addEventListener('input', function () {
+    const nameChanged = this.value.toLowerCase() !== this.getAttribute('data-org-name').toLowerCase();
+    toggleElem('#org-name-change-prompt', nameChanged);
+  });
+
+  // Labels
+  initCompLabelEdit('.page-content.organization.settings.labels');
+}

web_src/js/features/common-page.ts

@@ -0,0 +1,130 @@
+import {GET} from '../modules/fetch.ts';
+import {showGlobalErrorMessage} from '../bootstrap.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {queryElems} from '../utils/dom.ts';
+import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
+import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
+import {initCompSearchRepoBox} from './comp/SearchRepoBox.ts';
+
+const {appUrl} = window.config;
+
+export function initHeadNavbarContentToggle() {
+  const navbar = document.querySelector('#navbar');
+  const btn = document.querySelector('#navbar-expand-toggle');
+  if (!navbar || !btn) return;
+
+  btn.addEventListener('click', () => {
+    const isExpanded = btn.classList.contains('active');
+    navbar.classList.toggle('navbar-menu-open', !isExpanded);
+    btn.classList.toggle('active', !isExpanded);
+  });
+}
+
+export function initFootLanguageMenu() {
+  document.querySelector('.ui.dropdown .menu.language-menu')?.addEventListener('click', async (e) => {
+    const item = (e.target as HTMLElement).closest('.item');
+    if (!item) return;
+    e.preventDefault();
+    await GET(item.getAttribute('data-url'));
+    window.location.reload();
+  });
+}
+
+export function initGlobalDropdown() {
+  // do not init "custom" dropdowns, "custom" dropdowns are managed by their own code.
+  registerGlobalSelectorFunc('.ui.dropdown:not(.custom)', (el) => {
+    const $dropdown = fomanticQuery(el);
+    if ($dropdown.data('module-dropdown')) return; // do not re-init if other code has already initialized it.
+
+    $dropdown.dropdown('setting', {hideDividers: 'empty'});
+
+    if (el.classList.contains('jump')) {
+      // The "jump" means this dropdown is mainly used for "menu" purpose,
+      // clicking an item will jump to somewhere else or trigger an action/function.
+      // When a dropdown is used for non-refresh actions with tippy,
+      // it must have this "jump" class to hide the tippy when dropdown is closed.
+      $dropdown.dropdown('setting', {
+        action: 'hide',
+        onShow() {
+          // hide associated tooltip while dropdown is open
+          this._tippy?.hide();
+          this._tippy?.disable();
+        },
+        onHide() {
+          this._tippy?.enable();
+          // eslint-disable-next-line unicorn/no-this-assignment
+          const elDropdown = this;
+
+          // hide all tippy elements of items after a while. eg: use Enter to click "Copy Link" in the Issue Context Menu
+          setTimeout(() => {
+            const $dropdown = fomanticQuery(elDropdown);
+            if ($dropdown.dropdown('is hidden')) {
+              queryElems(elDropdown, '.menu > .item', (el) => el._tippy?.hide());
+            }
+          }, 2000);
+        },
+      });
+    }
+
+    // Special popup-directions, prevent Fomantic from guessing the popup direction.
+    // With default "direction: auto", if the viewport height is small, Fomantic would show the popup upward,
+    //   if the dropdown is at the beginning of the page, then the top part would be clipped by the window view.
+    //   eg: Issue List "Sort" dropdown
+    // But we can not set "direction: downward" for all dropdowns, because there is a bug in dropdown menu positioning when calculating the "left" position,
+    //   which would make some dropdown popups slightly shift out of the right viewport edge in some cases.
+    //   eg: the "Create New Repo" menu on the navbar.
+    if (el.classList.contains('upward')) $dropdown.dropdown('setting', 'direction', 'upward');
+    if (el.classList.contains('downward')) $dropdown.dropdown('setting', 'direction', 'downward');
+  });
+}
+
+export function initGlobalComponent() {
+  fomanticQuery('.ui.menu.tabular:not(.custom) .item').tab();
+  registerGlobalInitFunc('initAvatarUploader', initAvatarUploaderWithCropper);
+  registerGlobalInitFunc('initSearchRepoBox', initCompSearchRepoBox);
+}
+
+// for performance considerations, it only uses performant syntax
+function attachInputDirAuto(el: Partial<HTMLInputElement | HTMLTextAreaElement>) {
+  if (el.type !== 'hidden' &&
+    el.type !== 'checkbox' &&
+    el.type !== 'radio' &&
+    el.type !== 'range' &&
+    el.type !== 'color') {
+    el.dir = 'auto';
+  }
+}
+
+export function initGlobalInput() {
+  registerGlobalSelectorFunc('input, textarea', attachInputDirAuto);
+  registerGlobalInitFunc('initInputAutoFocusEnd', (el: HTMLInputElement) => {
+    el.focus(); // expects only one such element on one page. If there are many, then the last one gets the focus.
+    el.setSelectionRange(el.value.length, el.value.length);
+  });
+}
+
+/**
+ * Too many users set their ROOT_URL to wrong value, and it causes a lot of problems:
+ *   * Cross-origin API request without correct cookie
+ *   * Incorrect href in <a>
+ *   * ...
+ * So we check whether current URL starts with AppUrl(ROOT_URL).
+ * If they don't match, show a warning to users.
+ */
+export function checkAppUrl() {
+  const curUrl = window.location.href;
+  // some users visit "https://domain/gitea" while appUrl is "https://domain/gitea/", there should be no warning
+  if (curUrl.startsWith(appUrl) || `${curUrl}/` === appUrl) {
+    return;
+  }
+  showGlobalErrorMessage(`Your ROOT_URL in app.ini is "${appUrl}", it's unlikely matching the site you are visiting.
+Mismatched ROOT_URL config causes wrong URL links for web UI/mail content/webhook notification/OAuth2 sign-in.`, 'warning');
+}
+
+export function checkAppUrlScheme() {
+  const curUrl = window.location.href;
+  // some users visit "http://domain" while appUrl is "https://domain", COOKIE_SECURE makes it impossible to sign in
+  if (curUrl.startsWith('http:') && appUrl.startsWith('https:')) {
+    showGlobalErrorMessage(`This instance is configured to run under HTTPS (by ROOT_URL config), you are accessing by HTTP. Mismatched scheme might cause problems for sign-in/sign-up.`, 'warning');
+  }
+}

web_src/js/features/comp/ComboMarkdownEditor.ts

@@ -0,0 +1,425 @@
+import '@github/markdown-toolbar-element';
+import '@github/text-expander-element';
+import {attachTribute} from '../tribute.ts';
+import {hideElem, showElem, autosize, isElemVisible, generateElemId} from '../../utils/dom.ts';
+import {
+  EventUploadStateChanged,
+  initEasyMDEPaste,
+  initTextareaEvents,
+  triggerUploadStateChanged,
+} from './EditorUpload.ts';
+import {handleGlobalEnterQuickSubmit} from './QuickSubmit.ts';
+import {renderPreviewPanelContent} from '../repo-editor.ts';
+import {easyMDEToolbarActions} from './EasyMDEToolbarActions.ts';
+import {initTextExpander} from './TextExpander.ts';
+import {showErrorToast} from '../../modules/toast.ts';
+import {POST} from '../../modules/fetch.ts';
+import {
+  EventEditorContentChanged,
+  initTextareaMarkdown,
+  textareaInsertText,
+  triggerEditorContentChanged,
+} from './EditorMarkdown.ts';
+import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.ts';
+import {createTippy} from '../../modules/tippy.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import type EasyMDE from 'easymde';
+
+/**
+ * validate if the given textarea is non-empty.
+ * @param {HTMLTextAreaElement} textarea - The textarea element to be validated.
+ * @returns {boolean} returns true if validation succeeded.
+ */
+export function validateTextareaNonEmpty(textarea: HTMLTextAreaElement) {
+  // When using EasyMDE, the original edit area HTML element is hidden, breaking HTML5 input validation.
+  // The workaround (https://github.com/sparksuite/simplemde-markdown-editor/issues/324) doesn't work with contenteditable, so we just show an alert.
+  if (!textarea.value) {
+    if (isElemVisible(textarea)) {
+      textarea.required = true;
+      const form = textarea.closest('form');
+      form?.reportValidity();
+    } else {
+      // The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places.
+      showErrorToast('Require non-empty content');
+    }
+    return false;
+  }
+  return true;
+}
+
+type Heights = {
+  minHeight?: string,
+  height?: string,
+  maxHeight?: string,
+};
+
+type ComboMarkdownEditorOptions = {
+  editorHeights?: Heights,
+  easyMDEOptions?: EasyMDE.Options,
+};
+
+type ComboMarkdownEditorTextarea = HTMLTextAreaElement & {_giteaComboMarkdownEditor: any};
+type ComboMarkdownEditorContainer = HTMLElement & {_giteaComboMarkdownEditor?: any};
+
+export class ComboMarkdownEditor {
+  static EventEditorContentChanged = EventEditorContentChanged;
+  static EventUploadStateChanged = EventUploadStateChanged;
+
+  public container: HTMLElement;
+
+  options: ComboMarkdownEditorOptions;
+
+  tabEditor: HTMLElement;
+  tabPreviewer: HTMLElement;
+
+  supportEasyMDE: boolean;
+  easyMDE: any;
+  easyMDEToolbarActions: any;
+  easyMDEToolbarDefault: any;
+
+  textarea: ComboMarkdownEditorTextarea;
+  textareaMarkdownToolbar: HTMLElement;
+  textareaAutosize: any;
+
+  dropzone: HTMLElement;
+  attachedDropzoneInst: any;
+
+  previewMode: string;
+  previewUrl: string;
+  previewContext: string;
+
+  constructor(container: ComboMarkdownEditorContainer, options:ComboMarkdownEditorOptions = {}) {
+    if (container._giteaComboMarkdownEditor) throw new Error('ComboMarkdownEditor already initialized');
+    container._giteaComboMarkdownEditor = this;
+    this.options = options;
+    this.container = container;
+  }
+
+  async init() {
+    this.prepareEasyMDEToolbarActions();
+    this.setupContainer();
+    this.setupTab();
+    await this.setupDropzone(); // textarea depends on dropzone
+    this.setupTextarea();
+
+    await this.switchToUserPreference();
+  }
+
+  applyEditorHeights(el: HTMLElement, heights: Heights) {
+    if (!heights) return;
+    if (heights.minHeight) el.style.minHeight = heights.minHeight;
+    if (heights.height) el.style.height = heights.height;
+    if (heights.maxHeight) el.style.maxHeight = heights.maxHeight;
+  }
+
+  setupContainer() {
+    this.supportEasyMDE = this.container.getAttribute('data-support-easy-mde') === 'true';
+    this.previewMode = this.container.getAttribute('data-content-mode');
+    this.previewUrl = this.container.getAttribute('data-preview-url');
+    this.previewContext = this.container.getAttribute('data-preview-context');
+    initTextExpander(this.container.querySelector('text-expander'));
+  }
+
+  setupTextarea() {
+    this.textarea = this.container.querySelector('.markdown-text-editor');
+    this.textarea._giteaComboMarkdownEditor = this;
+    this.textarea.id = generateElemId(`_combo_markdown_editor_`);
+    this.textarea.addEventListener('input', () => triggerEditorContentChanged(this.container));
+    this.applyEditorHeights(this.textarea, this.options.editorHeights);
+
+    if (this.textarea.getAttribute('data-disable-autosize') !== 'true') {
+      this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130});
+    }
+
+    this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
+    this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
+    for (const el of this.textareaMarkdownToolbar.querySelectorAll('.markdown-toolbar-button')) {
+      // upstream bug: The role code is never executed in base MarkdownButtonElement https://github.com/github/markdown-toolbar-element/issues/70
+      el.setAttribute('role', 'button');
+      // the editor usually is in a form, so the buttons should have "type=button", avoiding conflicting with the form's submit.
+      if (el.nodeName === 'BUTTON' && !el.getAttribute('type')) el.setAttribute('type', 'button');
+    }
+
+    const monospaceButton = this.container.querySelector('.markdown-switch-monospace');
+    const monospaceEnabled = localStorage?.getItem('markdown-editor-monospace') === 'true';
+    const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text');
+    monospaceButton.setAttribute('data-tooltip-content', monospaceText);
+    monospaceButton.setAttribute('aria-checked', String(monospaceEnabled));
+    monospaceButton.addEventListener('click', (e) => {
+      e.preventDefault();
+      const enabled = localStorage?.getItem('markdown-editor-monospace') !== 'true';
+      localStorage.setItem('markdown-editor-monospace', String(enabled));
+      this.textarea.classList.toggle('tw-font-mono', enabled);
+      const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text');
+      monospaceButton.setAttribute('data-tooltip-content', text);
+      monospaceButton.setAttribute('aria-checked', String(enabled));
+    });
+
+    if (this.supportEasyMDE) {
+      const easymdeButton = this.container.querySelector('.markdown-switch-easymde');
+      easymdeButton.addEventListener('click', async (e) => {
+        e.preventDefault();
+        this.userPreferredEditor = 'easymde';
+        await this.switchToEasyMDE();
+      });
+    }
+
+    this.initMarkdownButtonTableAdd();
+
+    initTextareaMarkdown(this.textarea);
+    initTextareaEvents(this.textarea, this.dropzone);
+  }
+
+  async setupDropzone() {
+    const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
+    if (!dropzoneParentContainer) return;
+    this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone');
+    if (!this.dropzone) return;
+
+    this.attachedDropzoneInst = await initDropzone(this.dropzone);
+    // dropzone events
+    // * "processing" means a file is being uploaded
+    // * "queuecomplete" means all files have been uploaded
+    this.attachedDropzoneInst.on('processing', () => triggerUploadStateChanged(this.container));
+    this.attachedDropzoneInst.on('queuecomplete', () => triggerUploadStateChanged(this.container));
+  }
+
+  dropzoneGetFiles() {
+    if (!this.dropzone) return null;
+    return Array.from(this.dropzone.querySelectorAll<HTMLInputElement>('.files [name=files]'), (el) => el.value);
+  }
+
+  dropzoneReloadFiles() {
+    if (!this.dropzone) return;
+    this.attachedDropzoneInst.emit(DropzoneCustomEventReloadFiles);
+  }
+
+  dropzoneSubmitReload() {
+    if (!this.dropzone) return;
+    this.attachedDropzoneInst.emit('submit');
+    this.attachedDropzoneInst.emit(DropzoneCustomEventReloadFiles);
+  }
+
+  isUploading() {
+    if (!this.dropzone) return false;
+    return this.attachedDropzoneInst.getQueuedFiles().length || this.attachedDropzoneInst.getUploadingFiles().length;
+  }
+
+  setupTab() {
+    const tabs = this.container.querySelectorAll<HTMLElement>('.tabular.menu > .item');
+    if (!tabs.length) return;
+
+    // Fomantic Tab requires the "data-tab" to be globally unique.
+    // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
+    const tabIdSuffix = generateElemId();
+    this.tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer');
+    this.tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
+    this.tabEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
+    this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
+
+    const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
+    const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
+    panelEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
+    panelPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
+
+    this.tabEditor.addEventListener('click', () => {
+      requestAnimationFrame(() => {
+        this.focus();
+      });
+    });
+
+    fomanticQuery(tabs).tab();
+
+    this.tabPreviewer.addEventListener('click', async () => {
+      const formData = new FormData();
+      formData.append('mode', this.previewMode);
+      formData.append('context', this.previewContext);
+      formData.append('text', this.value());
+      const response = await POST(this.previewUrl, {data: formData});
+      const data = await response.text();
+      renderPreviewPanelContent(panelPreviewer, data);
+    });
+  }
+
+  generateMarkdownTable(rows: number, cols: number): string {
+    const tableLines = [];
+    tableLines.push(
+      `| ${'Header '.repeat(cols).trim().split(' ').join(' | ')} |`,
+      `| ${'--- '.repeat(cols).trim().split(' ').join(' | ')} |`,
+    );
+    for (let i = 0; i < rows; i++) {
+      tableLines.push(`| ${'Cell '.repeat(cols).trim().split(' ').join(' | ')} |`);
+    }
+    return tableLines.join('\n');
+  }
+
+  initMarkdownButtonTableAdd() {
+    const addTableButton = this.container.querySelector('.markdown-button-table-add');
+    const addTablePanel = this.container.querySelector('.markdown-add-table-panel');
+    // here the tippy can't attach to the button because the button already owns a tippy for tooltip
+    const addTablePanelTippy = createTippy(addTablePanel, {
+      content: addTablePanel,
+      trigger: 'manual',
+      placement: 'bottom',
+      hideOnClick: true,
+      interactive: true,
+      getReferenceClientRect: () => addTableButton.getBoundingClientRect(),
+    });
+    addTableButton.addEventListener('click', () => addTablePanelTippy.show());
+
+    addTablePanel.querySelector('.ui.button.primary').addEventListener('click', () => {
+      let rows = parseInt(addTablePanel.querySelector<HTMLInputElement>('[name=rows]').value);
+      let cols = parseInt(addTablePanel.querySelector<HTMLInputElement>('[name=cols]').value);
+      rows = Math.max(1, Math.min(100, rows));
+      cols = Math.max(1, Math.min(100, cols));
+      textareaInsertText(this.textarea, `\n${this.generateMarkdownTable(rows, cols)}\n\n`);
+      addTablePanelTippy.hide();
+    });
+  }
+
+  switchTabToEditor() {
+    this.tabEditor.click();
+  }
+
+  prepareEasyMDEToolbarActions() {
+    this.easyMDEToolbarDefault = [
+      'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3',
+      'heading-bigger', 'heading-smaller', '|', 'code', 'quote', '|', 'gitea-checkbox-empty',
+      'gitea-checkbox-checked', '|', 'unordered-list', 'ordered-list', '|', 'link', 'image',
+      'table', 'horizontal-rule', '|', 'gitea-switch-to-textarea',
+    ];
+  }
+
+  parseEasyMDEToolbar(easyMde: typeof EasyMDE, actions: any) {
+    this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(easyMde, this);
+    const processed = [];
+    for (const action of actions) {
+      const actionButton = this.easyMDEToolbarActions[action];
+      if (!actionButton) throw new Error(`Unknown EasyMDE toolbar action ${action}`);
+      processed.push(actionButton);
+    }
+    return processed;
+  }
+
+  async switchToUserPreference() {
+    if (this.userPreferredEditor === 'easymde' && this.supportEasyMDE) {
+      await this.switchToEasyMDE();
+    } else {
+      this.switchToTextarea();
+    }
+  }
+
+  switchToTextarea() {
+    if (!this.easyMDE) return;
+    showElem(this.textareaMarkdownToolbar);
+    if (this.easyMDE) {
+      this.easyMDE.toTextArea();
+      this.easyMDE = null;
+    }
+  }
+
+  async switchToEasyMDE() {
+    if (this.easyMDE) return;
+    // EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles.
+    const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde');
+    const easyMDEOpt: EasyMDE.Options = {
+      autoDownloadFontAwesome: false,
+      element: this.textarea,
+      forceSync: true,
+      renderingConfig: {singleLineBreaks: false},
+      indentWithTabs: false,
+      tabSize: 4,
+      spellChecker: false,
+      inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable
+      nativeSpellcheck: true,
+      ...this.options.easyMDEOptions,
+    };
+    easyMDEOpt.toolbar = this.parseEasyMDEToolbar(EasyMDE, easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault);
+
+    this.easyMDE = new EasyMDE(easyMDEOpt);
+    this.easyMDE.codemirror.on('change', () => triggerEditorContentChanged(this.container));
+    this.easyMDE.codemirror.setOption('extraKeys', {
+      'Cmd-Enter': (cm: any) => handleGlobalEnterQuickSubmit(cm.getTextArea()),
+      'Ctrl-Enter': (cm: any) => handleGlobalEnterQuickSubmit(cm.getTextArea()),
+      Enter: (cm: any) => {
+        const tributeContainer = document.querySelector<HTMLElement>('.tribute-container');
+        if (!tributeContainer || tributeContainer.style.display === 'none') {
+          cm.execCommand('newlineAndIndent');
+        }
+      },
+      Up: (cm: any) => {
+        const tributeContainer = document.querySelector<HTMLElement>('.tribute-container');
+        if (!tributeContainer || tributeContainer.style.display === 'none') {
+          return cm.execCommand('goLineUp');
+        }
+      },
+      Down: (cm: any) => {
+        const tributeContainer = document.querySelector<HTMLElement>('.tribute-container');
+        if (!tributeContainer || tributeContainer.style.display === 'none') {
+          return cm.execCommand('goLineDown');
+        }
+      },
+    });
+    this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll'), this.options.editorHeights);
+    await attachTribute(this.easyMDE.codemirror.getInputField());
+    if (this.dropzone) {
+      initEasyMDEPaste(this.easyMDE, this.dropzone);
+    }
+    hideElem(this.textareaMarkdownToolbar);
+  }
+
+  value(v: any = undefined) {
+    if (v === undefined) {
+      if (this.easyMDE) {
+        return this.easyMDE.value();
+      }
+      return this.textarea.value;
+    }
+
+    if (this.easyMDE) {
+      this.easyMDE.value(v);
+    } else {
+      this.textarea.value = v;
+    }
+    this.textareaAutosize?.resizeToFit();
+  }
+
+  focus() {
+    if (this.easyMDE) {
+      this.easyMDE.codemirror.focus();
+    } else {
+      this.textarea.focus();
+    }
+  }
+
+  moveCursorToEnd() {
+    this.textarea.focus();
+    this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
+    if (this.easyMDE) {
+      this.easyMDE.codemirror.focus();
+      this.easyMDE.codemirror.setCursor(this.easyMDE.codemirror.lineCount(), 0);
+    }
+  }
+
+  get userPreferredEditor() {
+    return window.localStorage.getItem(`markdown-editor-${this.previewMode ?? 'default'}`);
+  }
+  set userPreferredEditor(s) {
+    window.localStorage.setItem(`markdown-editor-${this.previewMode ?? 'default'}`, s);
+  }
+}
+
+export function getComboMarkdownEditor(el: any) {
+  if (!el) return null;
+  if (el.length) el = el[0];
+  return el._giteaComboMarkdownEditor;
+}
+
+export async function initComboMarkdownEditor(container: HTMLElement, options:ComboMarkdownEditorOptions = {}) {
+  if (!container) {
+    throw new Error('initComboMarkdownEditor: container is null');
+  }
+  const editor = new ComboMarkdownEditor(container, options);
+  await editor.init();
+  return editor;
+}

web_src/js/features/comp/ConfirmModal.ts

@@ -0,0 +1,42 @@
+import {svg} from '../../svg.ts';
+import {html, htmlRaw} from '../../utils/html.ts';
+import {createElementFromHTML} from '../../utils/dom.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+
+const {i18n} = window.config;
+
+type ConfirmModalOptions = {
+  header?: string;
+  content?: string;
+  confirmButtonColor?: 'primary' | 'red' | 'green' | 'blue';
+};
+
+export function createConfirmModal({header = '', content = '', confirmButtonColor = 'primary'}:ConfirmModalOptions = {}): HTMLElement {
+  const headerHtml = header ? html`<div class="header">${header}</div>` : '';
+  return createElementFromHTML(html`
+    <div class="ui g-modal-confirm modal">
+      ${htmlRaw(headerHtml)}
+      <div class="content">${content}</div>
+      <div class="actions">
+        <button class="ui cancel button">${htmlRaw(svg('octicon-x'))} ${i18n.modal_cancel}</button>
+        <button class="ui ${confirmButtonColor} ok button">${htmlRaw(svg('octicon-check'))} ${i18n.modal_confirm}</button>
+      </div>
+    </div>
+  `.trim());
+}
+
+export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<boolean> {
+  if (!(modal instanceof HTMLElement)) modal = createConfirmModal(modal);
+  return new Promise((resolve) => {
+    const $modal = fomanticQuery(modal);
+    $modal.modal({
+      onApprove() {
+        resolve(true);
+      },
+      onHidden() {
+        $modal.remove();
+        resolve(false);
+      },
+    }).modal('show');
+  });
+}

web_src/js/features/comp/Cropper.ts

@@ -0,0 +1,47 @@
+import {showElem, type DOMEvent} from '../../utils/dom.ts';
+
+type CropperOpts = {
+  container: HTMLElement,
+  imageSource: HTMLImageElement,
+  fileInput: HTMLInputElement,
+};
+
+async function initCompCropper({container, fileInput, imageSource}: CropperOpts) {
+  const {default: Cropper} = await import(/* webpackChunkName: "cropperjs" */'cropperjs');
+  let currentFileName = '';
+  let currentFileLastModified = 0;
+  const cropper = new Cropper(imageSource, {
+    aspectRatio: 1,
+    viewMode: 2,
+    autoCrop: false,
+    crop() {
+      const canvas = cropper.getCroppedCanvas();
+      canvas.toBlob((blob) => {
+        const croppedFileName = currentFileName.replace(/\.[^.]{3,4}$/, '.png');
+        const croppedFile = new File([blob], croppedFileName, {type: 'image/png', lastModified: currentFileLastModified});
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(croppedFile);
+        fileInput.files = dataTransfer.files;
+      });
+    },
+  });
+
+  fileInput.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files?.length > 0) {
+      currentFileName = files[0].name;
+      currentFileLastModified = files[0].lastModified;
+      const fileURL = URL.createObjectURL(files[0]);
+      imageSource.src = fileURL;
+      cropper.replace(fileURL);
+      showElem(container);
+    }
+  });
+}
+
+export async function initAvatarUploaderWithCropper(fileInput: HTMLInputElement) {
+  const panel = fileInput.nextElementSibling as HTMLElement;
+  if (!panel?.matches('.cropper-panel')) throw new Error('Missing cropper panel for avatar uploader');
+  const imageSource = panel.querySelector<HTMLImageElement>('.cropper-source');
+  await initCompCropper({container: panel, fileInput, imageSource});
+}

web_src/js/features/comp/EasyMDEToolbarActions.ts

@@ -0,0 +1,154 @@
+import {svg} from '../../svg.ts';
+import type EasyMDE from 'easymde';
+import type {ComboMarkdownEditor} from './ComboMarkdownEditor.ts';
+
+export function easyMDEToolbarActions(easyMde: typeof EasyMDE, editor: ComboMarkdownEditor): Record<string, Partial<EasyMDE.ToolbarIcon | string>> {
+  const actions: Record<string, Partial<EasyMDE.ToolbarIcon> | string> = {
+    '|': '|',
+    'heading-1': {
+      action: easyMde.toggleHeading1,
+      icon: svg('octicon-heading'),
+      title: 'Heading 1',
+    },
+    'heading-2': {
+      action: easyMde.toggleHeading2,
+      icon: svg('octicon-heading'),
+      title: 'Heading 2',
+    },
+    'heading-3': {
+      action: easyMde.toggleHeading3,
+      icon: svg('octicon-heading'),
+      title: 'Heading 3',
+    },
+    'heading-smaller': {
+      action: easyMde.toggleHeadingSmaller,
+      icon: svg('octicon-heading'),
+      title: 'Decrease Heading',
+    },
+    'heading-bigger': {
+      action: easyMde.toggleHeadingBigger,
+      icon: svg('octicon-heading'),
+      title: 'Increase Heading',
+    },
+    'bold': {
+      action: easyMde.toggleBold,
+      icon: svg('octicon-bold'),
+      title: 'Bold',
+    },
+    'italic': {
+      action: easyMde.toggleItalic,
+      icon: svg('octicon-italic'),
+      title: 'Italic',
+    },
+    'strikethrough': {
+      action: easyMde.toggleStrikethrough,
+      icon: svg('octicon-strikethrough'),
+      title: 'Strikethrough',
+    },
+    'quote': {
+      action: easyMde.toggleBlockquote,
+      icon: svg('octicon-quote'),
+      title: 'Quote',
+    },
+    'code': {
+      action: easyMde.toggleCodeBlock,
+      icon: svg('octicon-code'),
+      title: 'Code',
+    },
+    'link': {
+      action: easyMde.drawLink,
+      icon: svg('octicon-link'),
+      title: 'Link',
+    },
+    'unordered-list': {
+      action: easyMde.toggleUnorderedList,
+      icon: svg('octicon-list-unordered'),
+      title: 'Unordered List',
+    },
+    'ordered-list': {
+      action: easyMde.toggleOrderedList,
+      icon: svg('octicon-list-ordered'),
+      title: 'Ordered List',
+    },
+    'image': {
+      action: easyMde.drawImage,
+      icon: svg('octicon-image'),
+      title: 'Image',
+    },
+    'table': {
+      action: easyMde.drawTable,
+      icon: svg('octicon-table'),
+      title: 'Table',
+    },
+    'horizontal-rule': {
+      action: easyMde.drawHorizontalRule,
+      icon: svg('octicon-horizontal-rule'),
+      title: 'Horizontal Rule',
+    },
+    'preview': {
+      action: easyMde.togglePreview,
+      icon: svg('octicon-eye'),
+      title: 'Preview',
+    },
+    'fullscreen': {
+      action: easyMde.toggleFullScreen,
+      icon: svg('octicon-screen-full'),
+      title: 'Fullscreen',
+    },
+    'side-by-side': {
+      action: easyMde.toggleSideBySide,
+      icon: svg('octicon-columns'),
+      title: 'Side by Side',
+    },
+
+    // gitea's custom actions
+    'gitea-checkbox-empty': {
+      action(e) {
+        const cm = e.codemirror;
+        cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
+        cm.focus();
+      },
+      icon: svg('gitea-empty-checkbox'),
+      title: 'Add Checkbox (empty)',
+    },
+    'gitea-checkbox-checked': {
+      action(e) {
+        const cm = e.codemirror;
+        cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
+        cm.focus();
+      },
+      icon: svg('octicon-checkbox'),
+      title: 'Add Checkbox (checked)',
+    },
+    'gitea-switch-to-textarea': {
+      action: () => {
+        editor.userPreferredEditor = 'textarea';
+        editor.switchToTextarea();
+      },
+      icon: svg('octicon-arrow-switch'),
+      title: 'Revert to simple textarea',
+    },
+    'gitea-code-inline': {
+      action(e) {
+        const cm = e.codemirror;
+        const selection = cm.getSelection();
+        cm.replaceSelection(`\`${selection}\``);
+        if (!selection) {
+          const cursorPos = cm.getCursor();
+          cm.setCursor(cursorPos.line, cursorPos.ch - 1);
+        }
+        cm.focus();
+      },
+      icon: svg('octicon-chevron-right'),
+      title: 'Add Inline Code',
+    },
+  };
+
+  for (const [key, value] of Object.entries(actions)) {
+    if (typeof value !== 'string') {
+      value.name = key;
+    }
+  }
+
+  return actions;
+}

web_src/js/features/comp/EditorMarkdown.test.ts

@@ -0,0 +1,203 @@
+import {initTextareaMarkdown, markdownHandleIndention, textareaSplitLines} from './EditorMarkdown.ts';
+
+test('textareaSplitLines', () => {
+  let ret = textareaSplitLines('a\nbc\nd', 0);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 0, posLineIndex: 0, inlinePos: 0});
+
+  ret = textareaSplitLines('a\nbc\nd', 1);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 0, posLineIndex: 0, inlinePos: 1});
+
+  ret = textareaSplitLines('a\nbc\nd', 2);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 2, posLineIndex: 1, inlinePos: 0});
+
+  ret = textareaSplitLines('a\nbc\nd', 3);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 2, posLineIndex: 1, inlinePos: 1});
+
+  ret = textareaSplitLines('a\nbc\nd', 4);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 2, posLineIndex: 1, inlinePos: 2});
+
+  ret = textareaSplitLines('a\nbc\nd', 5);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 5, posLineIndex: 2, inlinePos: 0});
+
+  ret = textareaSplitLines('a\nbc\nd', 6);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 5, posLineIndex: 2, inlinePos: 1});
+});
+
+test('markdownHandleIndention', () => {
+  const testInput = (input: string, expected?: string) => {
+    const inputPos = input.indexOf('|');
+    input = input.replace('|', '');
+    const ret = markdownHandleIndention({value: input, selStart: inputPos, selEnd: inputPos});
+    if (expected === null) {
+      expect(ret).toEqual({handled: false});
+    } else {
+      const expectedPos = expected.indexOf('|');
+      expected = expected.replace('|', '');
+      expect(ret).toEqual({
+        handled: true,
+        valueSelection: {value: expected, selStart: expectedPos, selEnd: expectedPos},
+      });
+    }
+  };
+
+  testInput(`
+  a|b
+`, `
+  a
+  |b
+`);
+
+  testInput(`
+1. a
+2. |
+`, `
+1. a
+|
+`);
+
+  testInput(`
+|1. a
+`, null); // let browser handle it
+
+  testInput(`
+1. a
+1. b|c
+`, `
+1. a
+2. b
+3. |c
+`);
+
+  testInput(`
+2. a
+2. b|
+
+1. x
+1. y
+`, `
+1. a
+2. b
+3. |
+
+1. x
+1. y
+`);
+
+  testInput(`
+2. a
+2. b
+
+1. x|
+1. y
+`, `
+2. a
+2. b
+
+1. x
+2. |
+3. y
+`);
+
+  testInput(`
+1. a
+2. b|
+3. c
+`, `
+1. a
+2. b
+3. |
+4. c
+`);
+
+  testInput(`
+1. a
+  1. b
+  2. b
+  3. b
+  4. b
+1. c|
+`, `
+1. a
+  1. b
+  2. b
+  3. b
+  4. b
+2. c
+3. |
+`);
+
+  testInput(`
+1. a
+2. a
+3. a
+4. a
+5. a
+6. a
+7. a
+8. a
+9. b|c
+`, `
+1. a
+2. a
+3. a
+4. a
+5. a
+6. a
+7. a
+8. a
+9. b
+10. |c
+`);
+
+  // this is a special case, it's difficult to re-format the parent level at the moment, so leave it to the future
+  testInput(`
+1. a
+  2. b|
+3. c
+`, `
+1. a
+  1. b
+  2. |
+3. c
+`);
+});
+
+test('EditorMarkdown', () => {
+  const textarea = document.createElement('textarea');
+  initTextareaMarkdown(textarea);
+
+  type ValueWithCursor = string | {
+    value: string;
+    pos: number;
+  };
+  const testInput = (input: ValueWithCursor, result: ValueWithCursor) => {
+    const intputValue = typeof input === 'string' ? input : input.value;
+    const inputPos = typeof input === 'string' ? intputValue.length : input.pos;
+    textarea.value = intputValue;
+    textarea.setSelectionRange(inputPos, inputPos);
+
+    const e = new KeyboardEvent('keydown', {key: 'Enter', cancelable: true});
+    textarea.dispatchEvent(e);
+    if (!e.defaultPrevented) textarea.value += '\n'; // simulate default behavior
+
+    const expectedValue = typeof result === 'string' ? result : result.value;
+    const expectedPos = typeof result === 'string' ? expectedValue.length : result.pos;
+    expect(textarea.value).toEqual(expectedValue);
+    expect(textarea.selectionStart).toEqual(expectedPos);
+  };
+
+  testInput('-', '-\n');
+  testInput('1.', '1.\n');
+
+  testInput('- ', '');
+  testInput('1. ', '');
+  testInput({value: '1. \n2. ', pos: 3}, {value: '\n2. ', pos: 0});
+
+  testInput('- x', '- x\n- ');
+  testInput('1. foo', '1. foo\n2. ');
+  testInput({value: '1. a\n2. b\n3. c', pos: 4}, {value: '1. a\n2. \n3. b\n4. c', pos: 8});
+  testInput('- [ ]', '- [ ]\n- ');
+  testInput('- [ ] foo', '- [ ] foo\n- [ ] ');
+  testInput('* [x] foo', '* [x] foo\n* [ ] ');
+  testInput('1. [x] foo', '1. [x] foo\n2. [ ] ');
+});

web_src/js/features/comp/EditorMarkdown.ts

@@ -0,0 +1,202 @@
+export const EventEditorContentChanged = 'ce-editor-content-changed';
+
+export function triggerEditorContentChanged(target: HTMLElement) {
+  target.dispatchEvent(new CustomEvent(EventEditorContentChanged, {bubbles: true}));
+}
+
+export function textareaInsertText(textarea: HTMLTextAreaElement, value: string) {
+  const startPos = textarea.selectionStart;
+  const endPos = textarea.selectionEnd;
+  textarea.value = textarea.value.substring(0, startPos) + value + textarea.value.substring(endPos);
+  textarea.selectionStart = startPos;
+  textarea.selectionEnd = startPos + value.length;
+  textarea.focus();
+  triggerEditorContentChanged(textarea);
+}
+
+type TextareaValueSelection = {
+  value: string;
+  selStart: number;
+  selEnd: number;
+};
+
+function handleIndentSelection(textarea: HTMLTextAreaElement, e: KeyboardEvent) {
+  const selStart = textarea.selectionStart;
+  const selEnd = textarea.selectionEnd;
+  if (selEnd === selStart) return; // do not process when no selection
+
+  e.preventDefault();
+  const lines = textarea.value.split('\n');
+  const selectedLines = [];
+
+  let pos = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (pos > selEnd) break;
+    if (pos >= selStart) selectedLines.push(i);
+    pos += lines[i].length + 1;
+  }
+
+  for (const i of selectedLines) {
+    if (e.shiftKey) {
+      lines[i] = lines[i].replace(/^(\t| {1,2})/, '');
+    } else {
+      lines[i] = `  ${lines[i]}`;
+    }
+  }
+
+  // re-calculating the selection range
+  let newSelStart, newSelEnd;
+  pos = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (i === selectedLines[0]) {
+      newSelStart = pos;
+    }
+    if (i === selectedLines[selectedLines.length - 1]) {
+      newSelEnd = pos + lines[i].length;
+      break;
+    }
+    pos += lines[i].length + 1;
+  }
+  textarea.value = lines.join('\n');
+  textarea.setSelectionRange(newSelStart, newSelEnd);
+  triggerEditorContentChanged(textarea);
+}
+
+type MarkdownHandleIndentionResult = {
+  handled: boolean;
+  valueSelection?: TextareaValueSelection;
+};
+
+type TextLinesBuffer = {
+  lines: string[];
+  lengthBeforePosLine: number;
+  posLineIndex: number;
+  inlinePos: number
+};
+
+export function textareaSplitLines(value: string, pos: number): TextLinesBuffer {
+  const lines = value.split('\n');
+  let lengthBeforePosLine = 0, inlinePos = 0, posLineIndex = 0;
+  for (; posLineIndex < lines.length; posLineIndex++) {
+    const lineLength = lines[posLineIndex].length + 1;
+    if (lengthBeforePosLine + lineLength > pos) {
+      inlinePos = pos - lengthBeforePosLine;
+      break;
+    }
+    lengthBeforePosLine += lineLength;
+  }
+  return {lines, lengthBeforePosLine, posLineIndex, inlinePos};
+}
+
+function markdownReformatListNumbers(linesBuf: TextLinesBuffer, indention: string) {
+  const reDeeperIndention = new RegExp(`^${indention}\\s+`);
+  const reSameLevel = new RegExp(`^${indention}([0-9]+)\\.`);
+  let firstLineIdx: number;
+  for (firstLineIdx = linesBuf.posLineIndex - 1; firstLineIdx >= 0; firstLineIdx--) {
+    const line = linesBuf.lines[firstLineIdx];
+    if (!reDeeperIndention.test(line) && !reSameLevel.test(line)) break;
+  }
+  firstLineIdx++;
+  let num = 1;
+  for (let i = firstLineIdx; i < linesBuf.lines.length; i++) {
+    const oldLine = linesBuf.lines[i];
+    const sameLevel = reSameLevel.test(oldLine);
+    if (!sameLevel && !reDeeperIndention.test(oldLine)) break;
+    if (sameLevel) {
+      const newLine = `${indention}${num}.${oldLine.replace(reSameLevel, '')}`;
+      linesBuf.lines[i] = newLine;
+      num++;
+      if (linesBuf.posLineIndex === i) {
+        // need to correct the cursor inline position if the line length changes
+        linesBuf.inlinePos += newLine.length - oldLine.length;
+        linesBuf.inlinePos = Math.max(0, linesBuf.inlinePos);
+        linesBuf.inlinePos = Math.min(newLine.length, linesBuf.inlinePos);
+      }
+    }
+  }
+  recalculateLengthBeforeLine(linesBuf);
+}
+
+function recalculateLengthBeforeLine(linesBuf: TextLinesBuffer) {
+  linesBuf.lengthBeforePosLine = 0;
+  for (let i = 0; i < linesBuf.posLineIndex; i++) {
+    linesBuf.lengthBeforePosLine += linesBuf.lines[i].length + 1;
+  }
+}
+
+export function markdownHandleIndention(tvs: TextareaValueSelection): MarkdownHandleIndentionResult {
+  const unhandled: MarkdownHandleIndentionResult = {handled: false};
+  if (tvs.selEnd !== tvs.selStart) return unhandled; // do not process when there is a selection
+
+  const linesBuf = textareaSplitLines(tvs.value, tvs.selStart);
+  const line = linesBuf.lines[linesBuf.posLineIndex] ?? '';
+  if (!line) return unhandled; // if the line is empty, do nothing, let the browser handle it
+
+  // parse the indention
+  let lineContent = line;
+  const indention = /^\s*/.exec(lineContent)[0];
+  lineContent = lineContent.slice(indention.length);
+  if (linesBuf.inlinePos <= indention.length) return unhandled; // if cursor is at the indention, do nothing, let the browser handle it
+
+  // parse the prefixes: "1. ", "- ", "* ", there could also be " [ ] " or " [x] " for task lists
+  // there must be a space after the prefix because none of "1.foo" / "-foo" is a list item
+  const prefixMatch = /^([0-9]+\.|[-*])(\s\[([ x])\])?\s/.exec(lineContent);
+  let prefix = '';
+  if (prefixMatch) {
+    prefix = prefixMatch[0];
+    if (prefix.length > linesBuf.inlinePos) prefix = ''; // do not add new line if cursor is at prefix
+  }
+
+  lineContent = lineContent.slice(prefix.length);
+  if (!indention && !prefix) return unhandled; // if no indention and no prefix, do nothing, let the browser handle it
+
+  if (!lineContent) {
+    // clear current line if we only have i.e. '1. ' and the user presses enter again to finish creating a list
+    linesBuf.lines[linesBuf.posLineIndex] = '';
+    linesBuf.inlinePos = 0;
+  } else {
+    // start a new line with the same indention
+    let newPrefix = prefix;
+    if (/^\d+\./.test(prefix)) newPrefix = `1. ${newPrefix.slice(newPrefix.indexOf('.') + 2)}`;
+    newPrefix = newPrefix.replace('[x]', '[ ]');
+
+    const inlinePos = linesBuf.inlinePos;
+    linesBuf.lines[linesBuf.posLineIndex] = line.substring(0, inlinePos);
+    const newLineLeft = `${indention}${newPrefix}`;
+    const newLine = `${newLineLeft}${line.substring(inlinePos)}`;
+    linesBuf.lines.splice(linesBuf.posLineIndex + 1, 0, newLine);
+    linesBuf.posLineIndex++;
+    linesBuf.inlinePos = newLineLeft.length;
+    recalculateLengthBeforeLine(linesBuf);
+  }
+
+  markdownReformatListNumbers(linesBuf, indention);
+  const newPos = linesBuf.lengthBeforePosLine + linesBuf.inlinePos;
+  return {handled: true, valueSelection: {value: linesBuf.lines.join('\n'), selStart: newPos, selEnd: newPos}};
+}
+
+function handleNewline(textarea: HTMLTextAreaElement, e: Event) {
+  const ret = markdownHandleIndention({value: textarea.value, selStart: textarea.selectionStart, selEnd: textarea.selectionEnd});
+  if (!ret.handled) return;
+  e.preventDefault();
+  textarea.value = ret.valueSelection.value;
+  textarea.setSelectionRange(ret.valueSelection.selStart, ret.valueSelection.selEnd);
+  triggerEditorContentChanged(textarea);
+}
+
+function isTextExpanderShown(textarea: HTMLElement): boolean {
+  return Boolean(textarea.closest('text-expander')?.querySelector('.suggestions'));
+}
+
+export function initTextareaMarkdown(textarea: HTMLTextAreaElement) {
+  textarea.addEventListener('keydown', (e) => {
+    if (isTextExpanderShown(textarea)) return;
+    if (e.key === 'Tab' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      // use Tab/Shift-Tab to indent/unindent the selected lines
+      handleIndentSelection(textarea, e);
+    } else if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      // use Enter to insert a new line with the same indention and prefix
+      handleNewline(textarea, e);
+    }
+  });
+}

web_src/js/features/comp/EditorUpload.test.ts

@@ -0,0 +1,14 @@
+import {removeAttachmentLinksFromMarkdown} from './EditorUpload.ts';
+
+test('removeAttachmentLinksFromMarkdown', () => {
+  expect(removeAttachmentLinksFromMarkdown('a foo b', 'foo')).toBe('a foo b');
+  expect(removeAttachmentLinksFromMarkdown('a [x](attachments/foo) b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a ![x](attachments/foo) b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a [x](/attachments/foo) b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a ![x](/attachments/foo) b', 'foo')).toBe('a  b');
+
+  expect(removeAttachmentLinksFromMarkdown('a <img src="attachments/foo"> b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a <img width="100" src="attachments/foo"> b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a <img src="/attachments/foo"> b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a <img src="/attachments/foo" width="100"/> b', 'foo')).toBe('a  b');
+});

web_src/js/features/comp/EditorUpload.ts

@@ -0,0 +1,165 @@
+import {imageInfo} from '../../utils/image.ts';
+import {textareaInsertText, triggerEditorContentChanged} from './EditorMarkdown.ts';
+import {
+  DropzoneCustomEventRemovedFile,
+  DropzoneCustomEventUploadDone,
+  generateMarkdownLinkForAttachment,
+} from '../dropzone.ts';
+import {subscribe} from '@github/paste-markdown';
+import type CodeMirror from 'codemirror';
+import type EasyMDE from 'easymde';
+import type {DropzoneFile} from 'dropzone';
+
+let uploadIdCounter = 0;
+
+export const EventUploadStateChanged = 'ce-upload-state-changed';
+
+export function triggerUploadStateChanged(target: HTMLElement) {
+  target.dispatchEvent(new CustomEvent(EventUploadStateChanged, {bubbles: true}));
+}
+
+function uploadFile(dropzoneEl: HTMLElement, file: File) {
+  return new Promise((resolve) => {
+    const curUploadId = uploadIdCounter++;
+    (file as any)._giteaUploadId = curUploadId;
+    const dropzoneInst = dropzoneEl.dropzone;
+    const onUploadDone = ({file}: {file: any}) => {
+      if (file._giteaUploadId === curUploadId) {
+        dropzoneInst.off(DropzoneCustomEventUploadDone, onUploadDone);
+        resolve(file);
+      }
+    };
+    dropzoneInst.on(DropzoneCustomEventUploadDone, onUploadDone);
+    // FIXME: this is not entirely correct because `file` does not satisfy DropzoneFile (we have abused the Dropzone for long time)
+    dropzoneInst.addFile(file as DropzoneFile);
+  });
+}
+
+class TextareaEditor {
+  editor: HTMLTextAreaElement;
+
+  constructor(editor: HTMLTextAreaElement) {
+    this.editor = editor;
+  }
+
+  insertPlaceholder(value: string) {
+    textareaInsertText(this.editor, value);
+  }
+
+  replacePlaceholder(oldVal: string, newVal: string) {
+    const editor = this.editor;
+    const startPos = editor.selectionStart;
+    const endPos = editor.selectionEnd;
+    if (editor.value.substring(startPos, endPos) === oldVal) {
+      editor.value = editor.value.substring(0, startPos) + newVal + editor.value.substring(endPos);
+      editor.selectionEnd = startPos + newVal.length;
+    } else {
+      editor.value = editor.value.replace(oldVal, newVal);
+      editor.selectionEnd -= oldVal.length;
+      editor.selectionEnd += newVal.length;
+    }
+    editor.selectionStart = editor.selectionEnd;
+    editor.focus();
+    triggerEditorContentChanged(editor);
+  }
+}
+
+class CodeMirrorEditor {
+  editor: CodeMirror.EditorFromTextArea;
+
+  constructor(editor: CodeMirror.EditorFromTextArea) {
+    this.editor = editor;
+  }
+
+  insertPlaceholder(value: string) {
+    const editor = this.editor;
+    const startPoint = editor.getCursor('start');
+    const endPoint = editor.getCursor('end');
+    editor.replaceSelection(value);
+    endPoint.ch = startPoint.ch + value.length;
+    editor.setSelection(startPoint, endPoint);
+    editor.focus();
+    triggerEditorContentChanged(editor.getTextArea());
+  }
+
+  replacePlaceholder(oldVal: string, newVal: string) {
+    const editor = this.editor;
+    const endPoint = editor.getCursor('end');
+    if (editor.getSelection() === oldVal) {
+      editor.replaceSelection(newVal);
+    } else {
+      editor.setValue(editor.getValue().replace(oldVal, newVal));
+    }
+    endPoint.ch -= oldVal.length;
+    endPoint.ch += newVal.length;
+    editor.setSelection(endPoint, endPoint);
+    editor.focus();
+    triggerEditorContentChanged(editor.getTextArea());
+  }
+}
+
+async function handleUploadFiles(editor: CodeMirrorEditor | TextareaEditor, dropzoneEl: HTMLElement, files: Array<File> | FileList, e: Event) {
+  e.preventDefault();
+  for (const file of files) {
+    const name = file.name.slice(0, file.name.lastIndexOf('.'));
+    const {width, dppx} = await imageInfo(file);
+    const placeholder = `[${name}](uploading ...)`;
+
+    editor.insertPlaceholder(placeholder);
+    await uploadFile(dropzoneEl, file); // the "file" will get its "uuid" during the upload
+    editor.replacePlaceholder(placeholder, generateMarkdownLinkForAttachment(file, {width, dppx}));
+  }
+}
+
+export function removeAttachmentLinksFromMarkdown(text: string, fileUuid: string) {
+  text = text.replace(new RegExp(`!?\\[([^\\]]+)\\]\\(/?attachments/${fileUuid}\\)`, 'g'), '');
+  text = text.replace(new RegExp(`[<]img[^>]+src="/?attachments/${fileUuid}"[^>]*>`, 'g'), '');
+  return text;
+}
+
+function getPastedImages(e: ClipboardEvent) {
+  const images: Array<File> = [];
+  for (const item of e.clipboardData?.items ?? []) {
+    if (item.type?.startsWith('image/')) {
+      images.push(item.getAsFile());
+    }
+  }
+  return images;
+}
+
+export function initEasyMDEPaste(easyMDE: EasyMDE, dropzoneEl: HTMLElement) {
+  const editor = new CodeMirrorEditor(easyMDE.codemirror as any);
+  easyMDE.codemirror.on('paste', (_, e) => {
+    const images = getPastedImages(e);
+    if (!images.length) return;
+    handleUploadFiles(editor, dropzoneEl, images, e);
+  });
+  easyMDE.codemirror.on('drop', (_, e) => {
+    if (!e.dataTransfer.files.length) return;
+    handleUploadFiles(editor, dropzoneEl, e.dataTransfer.files, e);
+  });
+  dropzoneEl.dropzone.on(DropzoneCustomEventRemovedFile, ({fileUuid}) => {
+    const oldText = easyMDE.codemirror.getValue();
+    const newText = removeAttachmentLinksFromMarkdown(oldText, fileUuid);
+    if (oldText !== newText) easyMDE.codemirror.setValue(newText);
+  });
+}
+
+export function initTextareaEvents(textarea: HTMLTextAreaElement, dropzoneEl: HTMLElement) {
+  subscribe(textarea); // enable paste features
+  textarea.addEventListener('paste', (e: ClipboardEvent) => {
+    const images = getPastedImages(e);
+    if (images.length && dropzoneEl) {
+      handleUploadFiles(new TextareaEditor(textarea), dropzoneEl, images, e);
+    }
+  });
+  textarea.addEventListener('drop', (e: DragEvent) => {
+    if (!e.dataTransfer.files.length) return;
+    if (!dropzoneEl) return;
+    handleUploadFiles(new TextareaEditor(textarea), dropzoneEl, e.dataTransfer.files, e);
+  });
+  dropzoneEl?.dropzone.on(DropzoneCustomEventRemovedFile, ({fileUuid}: {fileUuid: string}) => {
+    const newText = removeAttachmentLinksFromMarkdown(textarea.value, fileUuid);
+    if (textarea.value !== newText) textarea.value = newText;
+  });
+}

web_src/js/features/comp/LabelEdit.ts

@@ -0,0 +1,93 @@
+import {toggleElem} from '../../utils/dom.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {submitFormFetchAction} from '../common-fetch-action.ts';
+
+function nameHasScope(name: string): boolean {
+  return /.*[^/]\/[^/].*/.test(name);
+}
+
+export function initCompLabelEdit(pageSelector: string) {
+  const pageContent = document.querySelector<HTMLElement>(pageSelector);
+  if (!pageContent) return;
+
+  // for guest view, the modal is not available, the "labels" are read-only
+  const elModal = pageContent.querySelector<HTMLElement>('#issue-label-edit-modal');
+  if (!elModal) return;
+
+  const elLabelId = elModal.querySelector<HTMLInputElement>('input[name="id"]');
+  const elNameInput = elModal.querySelector<HTMLInputElement>('.label-name-input');
+  const elExclusiveField = elModal.querySelector('.label-exclusive-input-field');
+  const elExclusiveInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-input');
+  const elExclusiveWarning = elModal.querySelector('.label-exclusive-warning');
+  const elExclusiveOrderField = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input-field');
+  const elExclusiveOrderInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input');
+  const elIsArchivedField = elModal.querySelector('.label-is-archived-input-field');
+  const elIsArchivedInput = elModal.querySelector<HTMLInputElement>('.label-is-archived-input');
+  const elDescInput = elModal.querySelector<HTMLInputElement>('.label-desc-input');
+  const elColorInput = elModal.querySelector<HTMLInputElement>('.color-picker-combo input');
+
+  const syncModalUi = () => {
+    const hasScope = nameHasScope(elNameInput.value);
+    elExclusiveField.classList.toggle('disabled', !hasScope);
+    const showExclusiveWarning = hasScope && elExclusiveInput.checked && elModal.hasAttribute('data-need-warn-exclusive');
+    toggleElem(elExclusiveWarning, showExclusiveWarning);
+    if (!hasScope) elExclusiveInput.checked = false;
+    toggleElem(elExclusiveOrderField, elExclusiveInput.checked);
+
+    if (parseInt(elExclusiveOrderInput.value) <= 0) {
+      elExclusiveOrderInput.style.color = 'var(--color-placeholder-text) !important';
+    } else {
+      elExclusiveOrderInput.style.color = null;
+    }
+  };
+
+  const showLabelEditModal = (btn:HTMLElement) => {
+    // the "btn" should contain the label's attributes by its `data-label-xxx` attributes
+    const form = elModal.querySelector<HTMLFormElement>('form');
+    elLabelId.value = btn.getAttribute('data-label-id') || '';
+    elNameInput.value = btn.getAttribute('data-label-name') || '';
+    elExclusiveOrderInput.value = btn.getAttribute('data-label-exclusive-order') || '0';
+    elIsArchivedInput.checked = btn.getAttribute('data-label-is-archived') === 'true';
+    elExclusiveInput.checked = btn.getAttribute('data-label-exclusive') === 'true';
+    elDescInput.value = btn.getAttribute('data-label-description') || '';
+    elColorInput.value = btn.getAttribute('data-label-color') || '';
+    elColorInput.dispatchEvent(new Event('input', {bubbles: true})); // trigger the color picker
+
+    // if label id exists: "edit label" mode; otherwise: "new label" mode
+    const isEdit = Boolean(elLabelId.value);
+
+    // if a label was not exclusive but has issues, then it should warn user if it will become exclusive
+    const numIssues = parseInt(btn.getAttribute('data-label-num-issues') || '0');
+    elModal.toggleAttribute('data-need-warn-exclusive', !elExclusiveInput.checked && numIssues > 0);
+    elModal.querySelector('.header').textContent = isEdit ? elModal.getAttribute('data-text-edit-label') : elModal.getAttribute('data-text-new-label');
+
+    const curPageLink = elModal.getAttribute('data-current-page-link');
+    form.action = isEdit ? `${curPageLink}/edit` : `${curPageLink}/new`;
+    toggleElem(elIsArchivedField, isEdit);
+    syncModalUi();
+    fomanticQuery(elModal).modal({
+      onApprove() {
+        if (!form.checkValidity()) {
+          form.reportValidity();
+          return false;
+        }
+        submitFormFetchAction(form);
+        return false;
+      },
+    }).modal('show');
+  };
+
+  elModal.addEventListener('input', () => syncModalUi());
+
+  // theoretically, if the modal exists, the "new label" button should also exist, just in case it doesn't, use "?."
+  const elNewLabel = pageContent.querySelector<HTMLElement>('.ui.button.new-label');
+  elNewLabel?.addEventListener('click', () => showLabelEditModal(elNewLabel));
+
+  const elEditLabelButtons = pageContent.querySelectorAll<HTMLElement>('.edit-label-button');
+  for (const btn of elEditLabelButtons) {
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      showLabelEditModal(btn);
+    });
+  }
+}

web_src/js/features/comp/QuickSubmit.ts

@@ -0,0 +1,25 @@
+import {querySingleVisibleElem} from '../../utils/dom.ts';
+
+export function handleGlobalEnterQuickSubmit(target: HTMLElement) {
+  let form = target.closest('form');
+  if (form) {
+    if (!form.checkValidity()) {
+      form.reportValidity();
+    } else {
+      // here use the event to trigger the submit event (instead of calling `submit()` method directly)
+      // otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
+      form.dispatchEvent(new SubmitEvent('submit', {bubbles: true, cancelable: true}));
+    }
+    return true;
+  }
+  form = target.closest('.ui.form');
+  if (form) {
+    // A form should only have at most one "primary" button to do quick-submit.
+    // Here we don't use a special class to mark the primary button,
+    // because there could be a lot of forms with a primary button, the quick submit should work out-of-box,
+    // but not keeps asking developers to add that special class again and again (it could be forgotten easily)
+    querySingleVisibleElem<HTMLButtonElement>(form, '.ui.primary.button')?.click();
+    return true;
+  }
+  return false;
+}

web_src/js/features/comp/ReactionSelector.ts

@@ -0,0 +1,31 @@
+import {POST} from '../../modules/fetch.ts';
+import type {DOMEvent} from '../../utils/dom.ts';
+import {registerGlobalEventFunc} from '../../modules/observer.ts';
+
+export function initCompReactionSelector() {
+  registerGlobalEventFunc('click', 'onCommentReactionButtonClick', async (target: HTMLElement, e: DOMEvent<MouseEvent>) => {
+    // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
+    e.preventDefault();
+
+    if (target.classList.contains('disabled')) return;
+
+    const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
+    const reactionContent = target.getAttribute('data-reaction-content');
+
+    const commentContainer = target.closest('.comment-container');
+
+    const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
+    const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
+    const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
+
+    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+      data: new URLSearchParams({content: reactionContent}),
+    });
+
+    const data = await res.json();
+    bottomReactions?.remove();
+    if (data.html) {
+      commentContainer.insertAdjacentHTML('beforeend', data.html);
+    }
+  });
+}

web_src/js/features/comp/SearchRepoBox.ts

@@ -0,0 +1,26 @@
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {htmlEscape} from '../../utils/html.ts';
+
+const {appSubUrl} = window.config;
+
+export function initCompSearchRepoBox(el: HTMLElement) {
+  const uid = el.getAttribute('data-uid');
+  fomanticQuery(el).search({
+    minCharacters: 2,
+    apiSettings: {
+      url: `${appSubUrl}/repo/search?q={query}&uid=${uid}`,
+      onResponse(response: any) {
+        const items = [];
+        for (const item of response.data) {
+          items.push({
+            title: htmlEscape(item.repository.full_name.split('/')[1]),
+            description: htmlEscape(item.repository.full_name),
+          });
+        }
+        return {results: items};
+      },
+    },
+    searchFields: ['full_name'],
+    showNoResults: false,
+  });
+}

web_src/js/features/comp/SearchUserBox.ts

@@ -0,0 +1,48 @@
+import {htmlEscape} from '../../utils/html.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+
+const {appSubUrl} = window.config;
+const looksLikeEmailAddressCheck = /^\S+@\S+$/;
+
+export function initCompSearchUserBox() {
+  const searchUserBox = document.querySelector('#search-user-box');
+  if (!searchUserBox) return;
+
+  const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
+  const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
+  fomanticQuery(searchUserBox).search({
+    minCharacters: 2,
+    apiSettings: {
+      url: `${appSubUrl}/user/search_candidates?q={query}`,
+      onResponse(response: any) {
+        const resultItems = [];
+        const searchQuery = searchUserBox.querySelector('input').value;
+        const searchQueryUppercase = searchQuery.toUpperCase();
+        for (const item of response.data) {
+          const resultItem = {
+            title: item.login,
+            image: item.avatar_url,
+            description: htmlEscape(item.full_name),
+          };
+          if (searchQueryUppercase === item.login.toUpperCase()) {
+            resultItems.unshift(resultItem); // add the exact match to the top
+          } else {
+            resultItems.push(resultItem);
+          }
+        }
+
+        if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
+          const resultItem = {
+            title: searchQuery,
+            description: allowEmailDescription,
+          };
+          resultItems.push(resultItem);
+        }
+
+        return {results: resultItems};
+      },
+    },
+    searchFields: ['login', 'full_name'],
+    showNoResults: false,
+  });
+}

web_src/js/features/comp/TextExpander.ts

@@ -0,0 +1,127 @@
+import {matchEmoji, matchMention, matchIssue} from '../../utils/match.ts';
+import {emojiString} from '../emoji.ts';
+import {svg} from '../../svg.ts';
+import {parseIssueHref, parseRepoOwnerPathInfo} from '../../utils.ts';
+import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
+import {getIssueColor, getIssueIcon} from '../issue.ts';
+import {debounce} from 'perfect-debounce';
+import type TextExpanderElement from '@github/text-expander-element';
+import type {TextExpanderChangeEvent, TextExpanderResult} from '@github/text-expander-element';
+
+async function fetchIssueSuggestions(key: string, text: string): Promise<TextExpanderResult> {
+  const issuePathInfo = parseIssueHref(window.location.href);
+  if (!issuePathInfo.ownerName) {
+    const repoOwnerPathInfo = parseRepoOwnerPathInfo(window.location.pathname);
+    issuePathInfo.ownerName = repoOwnerPathInfo.ownerName;
+    issuePathInfo.repoName = repoOwnerPathInfo.repoName;
+    // then no issuePathInfo.indexString here, it is only used to exclude the current issue when "matchIssue"
+  }
+  if (!issuePathInfo.ownerName) return {matched: false};
+
+  const matches = await matchIssue(issuePathInfo.ownerName, issuePathInfo.repoName, issuePathInfo.indexString, text);
+  if (!matches.length) return {matched: false};
+
+  const ul = createElementFromAttrs('ul', {class: 'suggestions'});
+  for (const issue of matches) {
+    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);
+  }
+  return {matched: true, fragment: ul};
+}
+
+export function initTextExpander(expander: TextExpanderElement) {
+  if (!expander) return;
+
+  const textarea = expander.querySelector<HTMLTextAreaElement>('textarea');
+
+  // help to fix the text-expander "multiword+promise" bug: do not show the popup when there is no "#" before current line
+  const shouldShowIssueSuggestions = () => {
+    const posVal = textarea.value.substring(0, textarea.selectionStart);
+    const lineStart = posVal.lastIndexOf('\n');
+    const keyStart = posVal.lastIndexOf('#');
+    return keyStart > lineStart;
+  };
+
+  const debouncedIssueSuggestions = debounce(async (key: string, text: string): Promise<TextExpanderResult> => {
+    // https://github.com/github/text-expander-element/issues/71
+    // Upstream bug: when using "multiword+promise", TextExpander will get wrong "key" position.
+    // To reproduce, comment out the "shouldShowIssueSuggestions" check, use the "await sleep" below,
+    // then use content "close #20\nclose #20\nclose #20" (3 lines), keep changing the last line `#20` part from the end (including removing the `#`)
+    // There will be a JS error: Uncaught (in promise) IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 28 is larger than the node's length (27).
+
+    // check the input before the request, to avoid emitting empty query to backend (still related to the upstream bug)
+    if (!shouldShowIssueSuggestions()) return {matched: false};
+    // await sleep(Math.random() * 1000); // help to reproduce the text-expander bug
+    const ret = await fetchIssueSuggestions(key, text);
+    // check the input again to avoid text-expander using incorrect position (upstream bug)
+    if (!shouldShowIssueSuggestions()) return {matched: false};
+    return ret;
+  }, 300); // to match onInputDebounce delay
+
+  expander.addEventListener('text-expander-change', (e: TextExpanderChangeEvent) => {
+    const {key, text, provide} = e.detail;
+    if (key === ':') {
+      const matches = matchEmoji(text);
+      if (!matches.length) return provide({matched: false});
+
+      const ul = document.createElement('ul');
+      ul.classList.add('suggestions');
+      for (const name of matches) {
+        const emoji = emojiString(name);
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        li.setAttribute('data-value', emoji);
+        li.textContent = `${emoji} ${name}`;
+        ul.append(li);
+      }
+
+      provide({matched: true, fragment: ul});
+    } else if (key === '@') {
+      const matches = matchMention(text);
+      if (!matches.length) return provide({matched: false});
+
+      const ul = document.createElement('ul');
+      ul.classList.add('suggestions');
+      for (const {value, name, fullname, avatar} of matches) {
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        li.setAttribute('data-value', `${key}${value}`);
+
+        const img = document.createElement('img');
+        img.src = avatar;
+        li.append(img);
+
+        const nameSpan = document.createElement('span');
+        nameSpan.classList.add('name');
+        nameSpan.textContent = name;
+        li.append(nameSpan);
+
+        if (fullname && fullname.toLowerCase() !== name) {
+          const fullnameSpan = document.createElement('span');
+          fullnameSpan.classList.add('fullname');
+          fullnameSpan.textContent = fullname;
+          li.append(fullnameSpan);
+        }
+
+        ul.append(li);
+      }
+
+      provide({matched: true, fragment: ul});
+    } else if (key === '#') {
+      provide(debouncedIssueSuggestions(key, text));
+    }
+  });
+
+  expander.addEventListener('text-expander-value', ({detail}: Record<string, any>) => {
+    if (detail?.item) {
+      // add a space after @mentions and #issue as it's likely the user wants one
+      const suffix = ['@', '#'].includes(detail.key) ? ' ' : '';
+      detail.value = `${detail.item.getAttribute('data-value')}${suffix}`;
+    }
+  });
+}

web_src/js/features/comp/WebHookEditor.ts

@@ -0,0 +1,44 @@
+import {POST} from '../../modules/fetch.ts';
+import {hideElem, showElem, toggleElem} from '../../utils/dom.ts';
+
+export function initCompWebHookEditor() {
+  if (!document.querySelectorAll('.new.webhook').length) {
+    return;
+  }
+
+  for (const input of document.querySelectorAll<HTMLInputElement>('.events.checkbox input')) {
+    input.addEventListener('change', function () {
+      if (this.checked) {
+        showElem('.events.fields');
+      }
+    });
+  }
+
+  for (const input of document.querySelectorAll<HTMLInputElement>('.non-events.checkbox input')) {
+    input.addEventListener('change', function () {
+      if (this.checked) {
+        hideElem('.events.fields');
+      }
+    });
+  }
+
+  // some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
+  const httpMethodInput = document.querySelector<HTMLInputElement>('#http_method');
+  if (httpMethodInput) {
+    const updateContentType = function () {
+      const visible = httpMethodInput.value === 'POST';
+      toggleElem(document.querySelector('#content_type').closest('.field'), visible);
+    };
+    updateContentType();
+    httpMethodInput.addEventListener('change', updateContentType);
+  }
+
+  // Test delivery
+  document.querySelector<HTMLButtonElement>('#test-delivery')?.addEventListener('click', async function () {
+    this.classList.add('is-loading', 'disabled');
+    await POST(this.getAttribute('data-link'));
+    setTimeout(() => {
+      window.location.href = this.getAttribute('data-redirect');
+    }, 5000);
+  });
+}

web_src/js/features/contributors.ts

@@ -0,0 +1,30 @@
+import {createApp} from 'vue';
+
+export async function initRepoContributors() {
+  const el = document.querySelector('#repo-contributors-chart');
+  if (!el) return;
+
+  const {default: RepoContributors} = await import(/* webpackChunkName: "contributors-graph" */'../components/RepoContributors.vue');
+  try {
+    const View = createApp(RepoContributors, {
+      repoLink: el.getAttribute('data-repo-link'),
+      repoDefaultBranchName: el.getAttribute('data-repo-default-branch-name'),
+      locale: {
+        filterLabel: el.getAttribute('data-locale-filter-label'),
+        contributionType: {
+          commits: el.getAttribute('data-locale-contribution-type-commits'),
+          additions: el.getAttribute('data-locale-contribution-type-additions'),
+          deletions: el.getAttribute('data-locale-contribution-type-deletions'),
+        },
+
+        loadingTitle: el.getAttribute('data-locale-loading-title'),
+        loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'),
+        loadingInfo: el.getAttribute('data-locale-loading-info'),
+      },
+    });
+    View.mount(el);
+  } catch (err) {
+    console.error('RepoContributors failed to load', err);
+    el.textContent = el.getAttribute('data-locale-component-failed-to-load');
+  }
+}

web_src/js/features/copycontent.ts

@@ -0,0 +1,54 @@
+import {clippie} from 'clippie';
+import {showTemporaryTooltip} from '../modules/tippy.ts';
+import {convertImage} from '../utils.ts';
+import {GET} from '../modules/fetch.ts';
+import {registerGlobalEventFunc} from '../modules/observer.ts';
+
+const {i18n} = window.config;
+
+export function initCopyContent() {
+  registerGlobalEventFunc('click', 'onCopyContentButtonClick', async (btn: HTMLElement) => {
+    if (btn.classList.contains('disabled') || btn.classList.contains('is-loading')) return;
+    const rawFileLink = btn.getAttribute('data-raw-file-link');
+
+    let content, isRasterImage = false;
+
+    // when "data-raw-link" is present, we perform a fetch. this is either because
+    // the text to copy is not in the DOM, or it is an image that should be
+    // fetched to copy in full resolution
+    if (rawFileLink) {
+      btn.classList.add('is-loading', 'loading-icon-2px');
+      try {
+        const res = await GET(rawFileLink, {credentials: 'include', redirect: 'follow'});
+        const contentType = res.headers.get('content-type');
+
+        if (contentType.startsWith('image/') && !contentType.startsWith('image/svg')) {
+          isRasterImage = true;
+          content = await res.blob();
+        } else {
+          content = await res.text();
+        }
+      } catch {
+        return showTemporaryTooltip(btn, i18n.copy_error);
+      } finally {
+        btn.classList.remove('is-loading', 'loading-icon-2px');
+      }
+    } else { // text, read from DOM
+      const lineEls = document.querySelectorAll('.file-view .lines-code');
+      content = Array.from(lineEls, (el) => el.textContent).join('');
+    }
+
+    // try copy original first, if that fails, and it's an image, convert it to png
+    const success = await clippie(content);
+    if (success) {
+      showTemporaryTooltip(btn, i18n.copy_success);
+    } else {
+      if (isRasterImage) {
+        const success = await clippie(await convertImage(content as Blob, 'image/png'));
+        showTemporaryTooltip(btn, success ? i18n.copy_success : i18n.copy_error);
+      } else {
+        showTemporaryTooltip(btn, i18n.copy_error);
+      }
+    }
+  });
+}

web_src/js/features/dashboard.ts

@@ -0,0 +1,9 @@
+import {createApp} from 'vue';
+import DashboardRepoList from '../components/DashboardRepoList.vue';
+
+export function initDashboardRepoList() {
+  const el = document.querySelector('#dashboard-repo-list');
+  if (el) {
+    createApp(DashboardRepoList).mount(el);
+  }
+}

web_src/js/features/dropzone.ts

@@ -0,0 +1,165 @@
+import {svg} from '../svg.ts';
+import {html} from '../utils/html.ts';
+import {clippie} from 'clippie';
+import {showTemporaryTooltip} from '../modules/tippy.ts';
+import {GET, POST} from '../modules/fetch.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {createElementFromHTML, createElementFromAttrs} from '../utils/dom.ts';
+import {isImageFile, isVideoFile} from '../utils.ts';
+import type {DropzoneFile, DropzoneOptions} from 'dropzone/index.js';
+
+const {csrfToken, i18n} = window.config;
+
+type CustomDropzoneFile = DropzoneFile & {uuid: string};
+
+// dropzone has its owner event dispatcher (emitter)
+export const DropzoneCustomEventReloadFiles = 'dropzone-custom-reload-files';
+export const DropzoneCustomEventRemovedFile = 'dropzone-custom-removed-file';
+export const DropzoneCustomEventUploadDone = 'dropzone-custom-upload-done';
+
+async function createDropzone(el: HTMLElement, opts: DropzoneOptions) {
+  const [{default: Dropzone}] = await Promise.all([
+    import(/* webpackChunkName: "dropzone" */'dropzone'),
+    import(/* webpackChunkName: "dropzone" */'dropzone/dist/dropzone.css'),
+  ]);
+  return new Dropzone(el, opts);
+}
+
+export function generateMarkdownLinkForAttachment(file: Partial<CustomDropzoneFile>, {width, dppx}: {width?: number, dppx?: number} = {}) {
+  let fileMarkdown = `[${file.name}](/attachments/${file.uuid})`;
+  if (isImageFile(file)) {
+    fileMarkdown = `!${fileMarkdown}`;
+    if (width > 0 && dppx > 1) {
+      // Scale down images from HiDPI monitors. This uses the <img> tag because it's the only
+      // method to change image size in Markdown that is supported by all implementations.
+      // Make the image link relative to the repo path, then the final URL is "/sub-path/owner/repo/attachments/{uuid}"
+      fileMarkdown = html`<img width="${Math.round(width / dppx)}" alt="${file.name}" src="attachments/${file.uuid}">`;
+    } else {
+      // Markdown always renders the image with a relative path, so the final URL is "/sub-path/owner/repo/attachments/{uuid}"
+      // TODO: it should also use relative path for consistency, because absolute is ambiguous for "/sub-path/attachments" or "/attachments"
+      fileMarkdown = `![${file.name}](/attachments/${file.uuid})`;
+    }
+  } else if (isVideoFile(file)) {
+    fileMarkdown = html`<video src="attachments/${file.uuid}" title="${file.name}" controls></video>`;
+  }
+  return fileMarkdown;
+}
+
+function addCopyLink(file: Partial<CustomDropzoneFile>) {
+  // Create a "Copy Link" element, to conveniently copy the image or file link as Markdown to the clipboard
+  // The "<a>" element has a hardcoded cursor: pointer because the default is overridden by .dropzone
+  const copyLinkEl = createElementFromHTML(`
+<div class="tw-text-center">
+  <a href="#" class="tw-cursor-pointer">${svg('octicon-copy', 14)} Copy link</a>
+</div>`);
+  copyLinkEl.addEventListener('click', async (e) => {
+    e.preventDefault();
+    const success = await clippie(generateMarkdownLinkForAttachment(file));
+    showTemporaryTooltip(e.target as Element, success ? i18n.copy_success : i18n.copy_error);
+  });
+  file.previewTemplate.append(copyLinkEl);
+}
+
+type FileUuidDict = Record<string, {submitted: boolean}>;
+
+/**
+ * @param {HTMLElement} dropzoneEl
+ */
+export async function initDropzone(dropzoneEl: HTMLElement) {
+  const listAttachmentsUrl = dropzoneEl.closest('[data-attachment-url]')?.getAttribute('data-attachment-url');
+  const removeAttachmentUrl = dropzoneEl.getAttribute('data-remove-url');
+  const attachmentBaseLinkUrl = dropzoneEl.getAttribute('data-link-url');
+
+  let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
+  let fileUuidDict: FileUuidDict = {}; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone
+  const opts: Record<string, any> = {
+    url: dropzoneEl.getAttribute('data-upload-url'),
+    headers: {'X-Csrf-Token': csrfToken},
+    acceptedFiles: ['*/*', ''].includes(dropzoneEl.getAttribute('data-accepts')) ? null : dropzoneEl.getAttribute('data-accepts'),
+    addRemoveLinks: true,
+    dictDefaultMessage: dropzoneEl.getAttribute('data-default-message'),
+    dictInvalidFileType: dropzoneEl.getAttribute('data-invalid-input-type'),
+    dictFileTooBig: dropzoneEl.getAttribute('data-file-too-big'),
+    dictRemoveFile: dropzoneEl.getAttribute('data-remove-file'),
+    timeout: 0,
+    thumbnailMethod: 'contain',
+    thumbnailWidth: 480,
+    thumbnailHeight: 480,
+  };
+  if (dropzoneEl.hasAttribute('data-max-file')) opts.maxFiles = Number(dropzoneEl.getAttribute('data-max-file'));
+  if (dropzoneEl.hasAttribute('data-max-size')) opts.maxFilesize = Number(dropzoneEl.getAttribute('data-max-size'));
+
+  // there is a bug in dropzone: if a non-image file is uploaded, then it tries to request the file from server by something like:
+  // "http://localhost:3000/owner/repo/issues/[object%20Event]"
+  // the reason is that the preview "callback(dataURL)" is assign to "img.onerror" then "thumbnail" uses the error object as the dataURL and generates '<img src="[object Event]">'
+  const dzInst = await createDropzone(dropzoneEl, opts);
+  dzInst.on('success', (file: CustomDropzoneFile, resp: any) => {
+    file.uuid = resp.uuid;
+    fileUuidDict[file.uuid] = {submitted: false};
+    const input = createElementFromAttrs('input', {name: 'files', type: 'hidden', id: `dropzone-file-${resp.uuid}`, value: resp.uuid});
+    dropzoneEl.querySelector('.files').append(input);
+    addCopyLink(file);
+    dzInst.emit(DropzoneCustomEventUploadDone, {file});
+  });
+
+  dzInst.on('removedfile', async (file: CustomDropzoneFile) => {
+    if (disableRemovedfileEvent) return;
+
+    dzInst.emit(DropzoneCustomEventRemovedFile, {fileUuid: file.uuid});
+    document.querySelector(`#dropzone-file-${file.uuid}`)?.remove();
+    // when the uploaded file number reaches the limit, there is no uuid in the dict, and it doesn't need to be removed from server
+    if (removeAttachmentUrl && fileUuidDict[file.uuid] && !fileUuidDict[file.uuid].submitted) {
+      await POST(removeAttachmentUrl, {data: new URLSearchParams({file: file.uuid})});
+    }
+  });
+
+  dzInst.on('submit', () => {
+    for (const fileUuid of Object.keys(fileUuidDict)) {
+      fileUuidDict[fileUuid].submitted = true;
+    }
+  });
+
+  dzInst.on(DropzoneCustomEventReloadFiles, async () => {
+    try {
+      const resp = await GET(listAttachmentsUrl);
+      const respData = await resp.json();
+      // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
+      disableRemovedfileEvent = true;
+      dzInst.removeAllFiles(true);
+      disableRemovedfileEvent = false;
+
+      dropzoneEl.querySelector('.files').innerHTML = '';
+      for (const el of dropzoneEl.querySelectorAll('.dz-preview')) el.remove();
+      fileUuidDict = {};
+      for (const attachment of respData) {
+        const file = {name: attachment.name, uuid: attachment.uuid, size: attachment.size};
+        dzInst.emit('addedfile', file);
+        dzInst.emit('complete', file);
+        if (isImageFile(file.name)) {
+          const imgSrc = `${attachmentBaseLinkUrl}/${file.uuid}`;
+          dzInst.emit('thumbnail', file, imgSrc);
+        }
+        addCopyLink(file); // it is from server response, so no "type"
+        fileUuidDict[file.uuid] = {submitted: true};
+        const input = createElementFromAttrs('input', {name: 'files', type: 'hidden', id: `dropzone-file-${file.uuid}`, value: file.uuid});
+        dropzoneEl.querySelector('.files').append(input);
+      }
+      if (!dropzoneEl.querySelector('.dz-preview')) {
+        dropzoneEl.classList.remove('dz-started');
+      }
+    } catch (error) {
+      // TODO: if listing the existing attachments failed, it should stop from operating the content or attachments,
+      //  otherwise the attachments might be lost.
+      showErrorToast(`Failed to load attachments: ${error}`);
+      console.error(error);
+    }
+  });
+
+  dzInst.on('error', (file, message) => {
+    showErrorToast(`Dropzone upload error: ${message}`);
+    dzInst.removeFile(file);
+  });
+
+  if (listAttachmentsUrl) dzInst.emit(DropzoneCustomEventReloadFiles);
+  return dzInst;
+}

web_src/js/features/emoji.ts

@@ -0,0 +1,38 @@
+import emojis from '../../../assets/emoji.json' with {type: 'json'};
+import {html} from '../utils/html.ts';
+
+const {assetUrlPrefix, customEmojis} = window.config;
+
+const tempMap = {...customEmojis};
+for (const {emoji, aliases} of emojis) {
+  for (const alias of aliases || []) {
+    tempMap[alias] = emoji;
+  }
+}
+
+export const emojiKeys = Object.keys(tempMap).sort((a, b) => {
+  if (a === '+1' || a === '-1') return -1;
+  if (b === '+1' || b === '-1') return 1;
+  return a.localeCompare(b);
+});
+
+const emojiMap: Record<string, string> = {};
+for (const key of emojiKeys) {
+  emojiMap[key] = tempMap[key];
+}
+
+// retrieve HTML for given emoji name
+export function emojiHTML(name: string) {
+  let inner;
+  if (Object.hasOwn(customEmojis, name)) {
+    inner = html`<img alt=":${name}:" src="${assetUrlPrefix}/img/emoji/${name}.png">`;
+  } else {
+    inner = emojiString(name);
+  }
+  return html`<span class="emoji" title=":${name}:">${inner}</span>`;
+}
+
+// retrieve string for given emoji name
+export function emojiString(name: string) {
+  return emojiMap[name] || `:${name}:`;
+}

web_src/js/features/eventsource.sharedworker.ts

@@ -0,0 +1,147 @@
+class Source {
+  url: string;
+  eventSource: EventSource;
+  listening: Record<string, boolean>;
+  clients: Array<MessagePort>;
+
+  constructor(url: string) {
+    this.url = url;
+    this.eventSource = new EventSource(url);
+    this.listening = {};
+    this.clients = [];
+    this.listen('open');
+    this.listen('close');
+    this.listen('logout');
+    this.listen('notification-count');
+    this.listen('stopwatches');
+    this.listen('error');
+  }
+
+  register(port: MessagePort) {
+    if (this.clients.includes(port)) return;
+
+    this.clients.push(port);
+
+    port.postMessage({
+      type: 'status',
+      message: `registered to ${this.url}`,
+    });
+  }
+
+  deregister(port: MessagePort) {
+    const portIdx = this.clients.indexOf(port);
+    if (portIdx < 0) {
+      return this.clients.length;
+    }
+    this.clients.splice(portIdx, 1);
+    return this.clients.length;
+  }
+
+  close() {
+    if (!this.eventSource) return;
+
+    this.eventSource.close();
+    this.eventSource = null;
+  }
+
+  listen(eventType: string) {
+    if (this.listening[eventType]) return;
+    this.listening[eventType] = true;
+    this.eventSource.addEventListener(eventType, (event) => {
+      this.notifyClients({
+        type: eventType,
+        data: event.data,
+      });
+    });
+  }
+
+  notifyClients(event: {type: string, data: any}) {
+    for (const client of this.clients) {
+      client.postMessage(event);
+    }
+  }
+
+  status(port: MessagePort) {
+    port.postMessage({
+      type: 'status',
+      message: `url: ${this.url} readyState: ${this.eventSource.readyState}`,
+    });
+  }
+}
+
+const sourcesByUrl: Map<string, Source | null> = new Map();
+const sourcesByPort: Map<MessagePort, Source | null> = new Map();
+
+// @ts-expect-error: typescript bug?
+self.addEventListener('connect', (e: MessageEvent) => {
+  for (const port of e.ports) {
+    port.addEventListener('message', (event) => {
+      if (!self.EventSource) {
+        // some browsers (like PaleMoon, Firefox<53) don't support EventSource in SharedWorkerGlobalScope.
+        // this event handler needs EventSource when doing "new Source(url)", so just post a message back to the caller,
+        // in case the caller would like to use a fallback method to do its work.
+        port.postMessage({type: 'no-event-source'});
+        return;
+      }
+      if (event.data.type === 'start') {
+        const url = event.data.url;
+        if (sourcesByUrl.get(url)) {
+          // we have a Source registered to this url
+          const source = sourcesByUrl.get(url);
+          source.register(port);
+          sourcesByPort.set(port, source);
+          return;
+        }
+        let source = sourcesByPort.get(port);
+        if (source) {
+          if (source.eventSource && source.url === url) return;
+
+          // How this has happened I don't understand...
+          // deregister from that source
+          const count = source.deregister(port);
+          // Clean-up
+          if (count === 0) {
+            source.close();
+            sourcesByUrl.set(source.url, null);
+          }
+        }
+        // Create a new Source
+        source = new Source(url);
+        source.register(port);
+        sourcesByUrl.set(url, source);
+        sourcesByPort.set(port, source);
+      } else if (event.data.type === 'listen') {
+        const source = sourcesByPort.get(port);
+        source.listen(event.data.eventType);
+      } else if (event.data.type === 'close') {
+        const source = sourcesByPort.get(port);
+
+        if (!source) return;
+
+        const count = source.deregister(port);
+        if (count === 0) {
+          source.close();
+          sourcesByUrl.set(source.url, null);
+          sourcesByPort.set(port, null);
+        }
+      } else if (event.data.type === 'status') {
+        const source = sourcesByPort.get(port);
+        if (!source) {
+          port.postMessage({
+            type: 'status',
+            message: 'not connected',
+          });
+          return;
+        }
+        source.status(port);
+      } else {
+        // just send it back
+        port.postMessage({
+          type: 'error',
+          message: `received but don't know how to handle: ${event.data}`,
+        });
+      }
+    });
+    port.start();
+  }
+});

web_src/js/features/file-fold.ts

@@ -0,0 +1,19 @@
+import {svg} from '../svg.ts';
+
+// Hides the file if newFold is true, and shows it otherwise. The actual hiding is performed using CSS.
+//
+// The fold arrow is the icon displayed on the upper left of the file box, especially intended for components having the 'fold-file' class.
+// The file content box is the box that should be hidden or shown, especially intended for components having the 'file-content' class.
+//
+export function setFileFolding(fileContentBox: Element, foldArrow: HTMLElement, newFold: boolean) {
+  foldArrow.innerHTML = svg(`octicon-chevron-${newFold ? 'right' : 'down'}`, 18);
+  fileContentBox.setAttribute('data-folded', String(newFold));
+  if (newFold && fileContentBox.getBoundingClientRect().top < 0) {
+    fileContentBox.scrollIntoView();
+  }
+}
+
+// Like `setFileFolding`, except that it automatically inverts the current file folding state.
+export function invertFileFolding(fileContentBox:HTMLElement, foldArrow: HTMLElement) {
+  setFileFolding(fileContentBox, foldArrow, fileContentBox.getAttribute('data-folded') !== 'true');
+}

web_src/js/features/file-view.ts

@@ -0,0 +1,76 @@
+import type {FileRenderPlugin} from '../render/plugin.ts';
+import {newRenderPlugin3DViewer} from '../render/plugins/3d-viewer.ts';
+import {newRenderPluginPdfViewer} from '../render/plugins/pdf-viewer.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+import {createElementFromHTML, showElem, toggleElemClass} from '../utils/dom.ts';
+import {html} from '../utils/html.ts';
+import {basename} from '../utils.ts';
+
+const plugins: FileRenderPlugin[] = [];
+
+function initPluginsOnce(): void {
+  if (plugins.length) return;
+  plugins.push(newRenderPlugin3DViewer(), newRenderPluginPdfViewer());
+}
+
+function findFileRenderPlugin(filename: string, mimeType: string): FileRenderPlugin | null {
+  return plugins.find((plugin) => plugin.canHandle(filename, mimeType)) || null;
+}
+
+function showRenderRawFileButton(elFileView: HTMLElement, renderContainer: HTMLElement | null): void {
+  const toggleButtons = elFileView.querySelector('.file-view-toggle-buttons');
+  showElem(toggleButtons);
+  const displayingRendered = Boolean(renderContainer);
+  toggleElemClass(toggleButtons.querySelectorAll('.file-view-toggle-source'), 'active', !displayingRendered); // it may not exist
+  toggleElemClass(toggleButtons.querySelector('.file-view-toggle-rendered'), 'active', displayingRendered);
+  // TODO: if there is only one button, hide it?
+}
+
+async function renderRawFileToContainer(container: HTMLElement, rawFileLink: string, mimeType: string) {
+  const elViewRawPrompt = container.querySelector('.file-view-raw-prompt');
+  if (!rawFileLink || !elViewRawPrompt) throw new Error('unexpected file view container');
+
+  let rendered = false, errorMsg = '';
+  try {
+    const plugin = findFileRenderPlugin(basename(rawFileLink), mimeType);
+    if (plugin) {
+      container.classList.add('is-loading');
+      container.setAttribute('data-render-name', plugin.name); // not used yet
+      await plugin.render(container, rawFileLink);
+      rendered = true;
+    }
+  } catch (e) {
+    errorMsg = `${e}`;
+  } finally {
+    container.classList.remove('is-loading');
+  }
+
+  if (rendered) {
+    elViewRawPrompt.remove();
+    return;
+  }
+
+  // remove all children from the container, and only show the raw file link
+  container.replaceChildren(elViewRawPrompt);
+
+  if (errorMsg) {
+    const elErrorMessage = createElementFromHTML(html`<div class="ui error message">${errorMsg}</div>`);
+    elViewRawPrompt.insertAdjacentElement('afterbegin', elErrorMessage);
+  }
+}
+
+export function initRepoFileView(): void {
+  registerGlobalInitFunc('initRepoFileView', async (elFileView: HTMLElement) => {
+    initPluginsOnce();
+    const rawFileLink = elFileView.getAttribute('data-raw-file-link');
+    const mimeType = elFileView.getAttribute('data-mime-type') || ''; // not used yet
+    // TODO: we should also provide the prefetched file head bytes to let the plugin decide whether to render or not
+    const plugin = findFileRenderPlugin(basename(rawFileLink), mimeType);
+    if (!plugin) return;
+
+    const renderContainer = elFileView.querySelector<HTMLElement>('.file-view-render-container');
+    showRenderRawFileButton(elFileView, renderContainer);
+    // maybe in the future multiple plugins can render the same file, so we should not assume only one plugin will render it
+    if (renderContainer) await renderRawFileToContainer(renderContainer, rawFileLink, mimeType);
+  });
+}

web_src/js/features/heatmap.ts

@@ -0,0 +1,42 @@
+import {createApp} from 'vue';
+import ActivityHeatmap from '../components/ActivityHeatmap.vue';
+import {translateMonth, translateDay} from '../utils.ts';
+
+export function initHeatmap() {
+  const el = document.querySelector('#user-heatmap');
+  if (!el) return;
+
+  try {
+    const heatmap: Record<string, number> = {};
+    for (const {contributions, timestamp} of JSON.parse(el.getAttribute('data-heatmap-data'))) {
+      // Convert to user timezone and sum contributions by date
+      const dateStr = new Date(timestamp * 1000).toDateString();
+      heatmap[dateStr] = (heatmap[dateStr] || 0) + contributions;
+    }
+
+    const values = Object.keys(heatmap).map((v) => {
+      return {date: new Date(v), count: heatmap[v]};
+    });
+
+    // last heatmap tooltip localization attempt https://github.com/go-gitea/gitea/pull/24131/commits/a83761cbbae3c2e3b4bced71e680f44432073ac8
+    const locale = {
+      heatMapLocale: {
+        months: new Array(12).fill(undefined).map((_, idx) => translateMonth(idx)),
+        days: new Array(7).fill(undefined).map((_, idx) => translateDay(idx)),
+        on: ' - ', // no correct locale support for it, because in many languages the sentence is not "something on someday"
+        more: el.getAttribute('data-locale-more'),
+        less: el.getAttribute('data-locale-less'),
+      },
+      tooltipUnit: 'contributions',
+      textTotalContributions: el.getAttribute('data-locale-total-contributions'),
+      noDataText: el.getAttribute('data-locale-no-contributions'),
+    };
+
+    const View = createApp(ActivityHeatmap, {values, locale});
+    View.mount(el);
+    el.classList.remove('is-loading');
+  } catch (err) {
+    console.error('Heatmap failed to load', err);
+    el.textContent = 'Heatmap failed to load';
+  }
+}

web_src/js/features/imagediff.ts

@@ -0,0 +1,286 @@
+import {GET} from '../modules/fetch.ts';
+import {hideElem, loadElem, queryElemChildren, queryElems} from '../utils/dom.ts';
+import {parseDom} from '../utils.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+
+function getDefaultSvgBoundsIfUndefined(text: string, src: string) {
+  const defaultSize = 300;
+  const maxSize = 99999;
+
+  const svgDoc = parseDom(text, 'image/svg+xml');
+  const svg = (svgDoc.documentElement as unknown) as SVGSVGElement;
+  const width = svg?.width?.baseVal;
+  const height = svg?.height?.baseVal;
+  if (width === undefined || height === undefined) {
+    return null; // in case some svg is invalid or doesn't have the width/height
+  }
+  if (width.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE || height.unitType === SVGLength.SVG_LENGTHTYPE_PERCENTAGE) {
+    const img = new Image();
+    img.src = src;
+    if (img.width > 1 && img.width < maxSize && img.height > 1 && img.height < maxSize) {
+      return {
+        width: img.width,
+        height: img.height,
+      };
+    }
+    if (svg.hasAttribute('viewBox')) {
+      const viewBox = svg.viewBox.baseVal;
+      return {
+        width: defaultSize,
+        height: defaultSize * viewBox.width / viewBox.height,
+      };
+    }
+    return {
+      width: defaultSize,
+      height: defaultSize,
+    };
+  }
+  return null;
+}
+
+function createContext(imageAfter: HTMLImageElement, imageBefore: HTMLImageElement) {
+  const sizeAfter = {
+    width: imageAfter?.width || 0,
+    height: imageAfter?.height || 0,
+  };
+  const sizeBefore = {
+    width: imageBefore?.width || 0,
+    height: imageBefore?.height || 0,
+  };
+  const maxSize = {
+    width: Math.max(sizeBefore.width, sizeAfter.width),
+    height: Math.max(sizeBefore.height, sizeAfter.height),
+  };
+
+  return {
+    imageAfter,
+    imageBefore,
+    sizeAfter,
+    sizeBefore,
+    maxSize,
+    ratio: [
+      Math.floor(maxSize.width - sizeAfter.width) / 2,
+      Math.floor(maxSize.height - sizeAfter.height) / 2,
+      Math.floor(maxSize.width - sizeBefore.width) / 2,
+      Math.floor(maxSize.height - sizeBefore.height) / 2,
+    ],
+  };
+}
+
+class ImageDiff {
+  containerEl: HTMLElement;
+  diffContainerWidth: number;
+
+  async init(containerEl: HTMLElement) {
+    this.containerEl = containerEl;
+    containerEl.setAttribute('data-image-diff-loaded', 'true');
+
+    fomanticQuery(containerEl).find('.ui.menu.tabular .item').tab();
+
+    // the container may be hidden by "viewed" checkbox, so use the parent's width for reference
+    this.diffContainerWidth = Math.max(containerEl.closest('.diff-file-box').clientWidth - 300, 100);
+
+    const imageInfos = [{
+      path: containerEl.getAttribute('data-path-after'),
+      mime: containerEl.getAttribute('data-mime-after'),
+      images: containerEl.querySelectorAll<HTMLImageElement>('img.image-after'), // matches 3 <img>
+      boundsInfo: containerEl.querySelector('.bounds-info-after'),
+    }, {
+      path: containerEl.getAttribute('data-path-before'),
+      mime: containerEl.getAttribute('data-mime-before'),
+      images: containerEl.querySelectorAll<HTMLImageElement>('img.image-before'), // matches 3 <img>
+      boundsInfo: containerEl.querySelector('.bounds-info-before'),
+    }];
+
+    await Promise.all(imageInfos.map(async (info) => {
+      const [success] = await Promise.all(Array.from(info.images, (img) => {
+        return loadElem(img, info.path);
+      }));
+      // only the first images is associated with boundsInfo
+      if (!success && info.boundsInfo) info.boundsInfo.textContent = '(image error)';
+      if (info.mime === 'image/svg+xml') {
+        const resp = await GET(info.path);
+        const text = await resp.text();
+        const bounds = getDefaultSvgBoundsIfUndefined(text, info.path);
+        if (bounds) {
+          for (const el of info.images) {
+            el.setAttribute('width', String(bounds.width));
+            el.setAttribute('height', String(bounds.height));
+          }
+          hideElem(info.boundsInfo);
+        }
+      }
+    }));
+
+    const imagesAfter = imageInfos[0].images;
+    const imagesBefore = imageInfos[1].images;
+
+    this.initSideBySide(createContext(imagesAfter[0], imagesBefore[0]));
+    if (imagesAfter.length > 0 && imagesBefore.length > 0) {
+      this.initSwipe(createContext(imagesAfter[1], imagesBefore[1]));
+      this.initOverlay(createContext(imagesAfter[2], imagesBefore[2]));
+    }
+    queryElemChildren(containerEl, '.image-diff-tabs', (el) => el.classList.remove('is-loading'));
+  }
+
+  initSideBySide(sizes: Record<string, any>) {
+    let factor = 1;
+    if (sizes.maxSize.width > (this.diffContainerWidth - 24) / 2) {
+      factor = (this.diffContainerWidth - 24) / 2 / sizes.maxSize.width;
+    }
+
+    const widthChanged = sizes.imageAfter && sizes.imageBefore && sizes.imageAfter.naturalWidth !== sizes.imageBefore.naturalWidth;
+    const heightChanged = sizes.imageAfter && sizes.imageBefore && sizes.imageAfter.naturalHeight !== sizes.imageBefore.naturalHeight;
+    if (sizes.imageAfter) {
+      const boundsInfoAfterWidth = this.containerEl.querySelector('.bounds-info-after .bounds-info-width');
+      if (boundsInfoAfterWidth) {
+        boundsInfoAfterWidth.textContent = `${sizes.imageAfter.naturalWidth}px`;
+        boundsInfoAfterWidth.classList.toggle('green', widthChanged);
+      }
+      const boundsInfoAfterHeight = this.containerEl.querySelector('.bounds-info-after .bounds-info-height');
+      if (boundsInfoAfterHeight) {
+        boundsInfoAfterHeight.textContent = `${sizes.imageAfter.naturalHeight}px`;
+        boundsInfoAfterHeight.classList.toggle('green', heightChanged);
+      }
+    }
+
+    if (sizes.imageBefore) {
+      const boundsInfoBeforeWidth = this.containerEl.querySelector('.bounds-info-before .bounds-info-width');
+      if (boundsInfoBeforeWidth) {
+        boundsInfoBeforeWidth.textContent = `${sizes.imageBefore.naturalWidth}px`;
+        boundsInfoBeforeWidth.classList.toggle('red', widthChanged);
+      }
+      const boundsInfoBeforeHeight = this.containerEl.querySelector('.bounds-info-before .bounds-info-height');
+      if (boundsInfoBeforeHeight) {
+        boundsInfoBeforeHeight.textContent = `${sizes.imageBefore.naturalHeight}px`;
+        boundsInfoBeforeHeight.classList.toggle('red', heightChanged);
+      }
+    }
+
+    if (sizes.imageAfter) {
+      const container = sizes.imageAfter.parentNode;
+      sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`;
+      sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`;
+      container.style.margin = '10px auto';
+      container.style.width = `${sizes.sizeAfter.width * factor + 2}px`;
+      container.style.height = `${sizes.sizeAfter.height * factor + 2}px`;
+    }
+
+    if (sizes.imageBefore) {
+      const container = sizes.imageBefore.parentNode;
+      sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`;
+      sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`;
+      container.style.margin = '10px auto';
+      container.style.width = `${sizes.sizeBefore.width * factor + 2}px`;
+      container.style.height = `${sizes.sizeBefore.height * factor + 2}px`;
+    }
+  }
+
+  initSwipe(sizes: Record<string, any>) {
+    let factor = 1;
+    if (sizes.maxSize.width > this.diffContainerWidth - 12) {
+      factor = (this.diffContainerWidth - 12) / sizes.maxSize.width;
+    }
+
+    if (sizes.imageAfter) {
+      const imgParent = sizes.imageAfter.parentNode;
+      const swipeFrame = imgParent.parentNode;
+      sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`;
+      sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`;
+      imgParent.style.margin = `0px ${sizes.ratio[0] * factor}px`;
+      imgParent.style.width = `${sizes.sizeAfter.width * factor + 2}px`;
+      imgParent.style.height = `${sizes.sizeAfter.height * factor + 2}px`;
+      swipeFrame.style.padding = `${sizes.ratio[1] * factor}px 0 0 0`;
+      swipeFrame.style.width = `${sizes.maxSize.width * factor + 2}px`;
+    }
+
+    if (sizes.imageBefore) {
+      const imgParent = sizes.imageBefore.parentNode;
+      const swipeFrame = imgParent.parentNode;
+      sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`;
+      sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`;
+      imgParent.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`;
+      imgParent.style.width = `${sizes.sizeBefore.width * factor + 2}px`;
+      imgParent.style.height = `${sizes.sizeBefore.height * factor + 2}px`;
+      swipeFrame.style.width = `${sizes.maxSize.width * factor + 2}px`;
+      swipeFrame.style.height = `${sizes.maxSize.height * factor + 2}px`;
+    }
+
+    // extra height for inner "position: absolute" elements
+    const swipe = this.containerEl.querySelector<HTMLElement>('.diff-swipe');
+    if (swipe) {
+      swipe.style.width = `${sizes.maxSize.width * factor + 2}px`;
+      swipe.style.height = `${sizes.maxSize.height * factor + 30}px`;
+    }
+
+    this.containerEl.querySelector('.swipe-bar').addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      this.initSwipeEventListeners(e.currentTarget as HTMLElement);
+    });
+  }
+
+  initSwipeEventListeners(swipeBar: HTMLElement) {
+    const swipeFrame = swipeBar.parentNode as HTMLElement;
+    const width = swipeFrame.clientWidth;
+    const onSwipeMouseMove = (e: MouseEvent) => {
+      e.preventDefault();
+      const rect = swipeFrame.getBoundingClientRect();
+      const value = Math.max(0, Math.min(e.clientX - rect.left, width));
+      swipeBar.style.left = `${value}px`;
+      this.containerEl.querySelector<HTMLElement>('.swipe-container').style.width = `${swipeFrame.clientWidth - value}px`;
+    };
+    const removeEventListeners = () => {
+      document.removeEventListener('mousemove', onSwipeMouseMove);
+      document.removeEventListener('mouseup', removeEventListeners);
+    };
+    document.addEventListener('mousemove', onSwipeMouseMove);
+    document.addEventListener('mouseup', removeEventListeners);
+  }
+
+  initOverlay(sizes: Record<string, any>) {
+    let factor = 1;
+    if (sizes.maxSize.width > this.diffContainerWidth - 12) {
+      factor = (this.diffContainerWidth - 12) / sizes.maxSize.width;
+    }
+
+    if (sizes.imageAfter) {
+      const container = sizes.imageAfter.parentNode;
+      sizes.imageAfter.style.width = `${sizes.sizeAfter.width * factor}px`;
+      sizes.imageAfter.style.height = `${sizes.sizeAfter.height * factor}px`;
+      container.style.margin = `${sizes.ratio[1] * factor}px ${sizes.ratio[0] * factor}px`;
+      container.style.width = `${sizes.sizeAfter.width * factor + 2}px`;
+      container.style.height = `${sizes.sizeAfter.height * factor + 2}px`;
+    }
+
+    if (sizes.imageBefore) {
+      const container = sizes.imageBefore.parentNode;
+      const overlayFrame = container.parentNode;
+      sizes.imageBefore.style.width = `${sizes.sizeBefore.width * factor}px`;
+      sizes.imageBefore.style.height = `${sizes.sizeBefore.height * factor}px`;
+      container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`;
+      container.style.width = `${sizes.sizeBefore.width * factor + 2}px`;
+      container.style.height = `${sizes.sizeBefore.height * factor + 2}px`;
+
+      // some inner elements are `position: absolute`, so the container's height must be large enough
+      overlayFrame.style.width = `${sizes.maxSize.width * factor + 2}px`;
+      overlayFrame.style.height = `${sizes.maxSize.height * factor + 2}px`;
+    }
+
+    const rangeInput = this.containerEl.querySelector<HTMLInputElement>('input[type="range"]');
+
+    function updateOpacity() {
+      if (sizes.imageAfter) {
+        sizes.imageAfter.parentNode.style.opacity = `${Number(rangeInput.value) / 100}`;
+      }
+    }
+
+    rangeInput?.addEventListener('input', updateOpacity);
+    updateOpacity();
+  }
+}
+
+export function initImageDiff() {
+  for (const el of queryElems<HTMLImageElement>(document, '.image-diff:not([data-image-diff-loaded])')) {
+    (new ImageDiff()).init(el); // it is async, but we don't need to await for it
+  }
+}

web_src/js/features/install.ts

@@ -0,0 +1,121 @@
+import {hideElem, showElem} from '../utils/dom.ts';
+import {GET} from '../modules/fetch.ts';
+
+export function initInstall() {
+  const page = document.querySelector('.page-content.install');
+  if (!page) {
+    return;
+  }
+  if (page.classList.contains('post-install')) {
+    initPostInstall();
+  } else {
+    initPreInstall();
+  }
+}
+
+function initPreInstall() {
+  const defaultDbUser = 'gitea';
+  const defaultDbName = 'gitea';
+
+  const defaultDbHosts: Record<string, string> = {
+    mysql: '127.0.0.1:3306',
+    postgres: '127.0.0.1:5432',
+    mssql: '127.0.0.1:1433',
+  };
+
+  const dbHost = document.querySelector<HTMLInputElement>('#db_host');
+  const dbUser = document.querySelector<HTMLInputElement>('#db_user');
+  const dbName = document.querySelector<HTMLInputElement>('#db_name');
+
+  // Database type change detection.
+  document.querySelector<HTMLInputElement>('#db_type').addEventListener('change', function () {
+    const dbType = this.value;
+    hideElem('div[data-db-setting-for]');
+    showElem(`div[data-db-setting-for=${dbType}]`);
+
+    if (dbType !== 'sqlite3') {
+      // for most remote database servers
+      showElem('div[data-db-setting-for=common-host]');
+      const lastDbHost = dbHost.value;
+      const isDbHostDefault = !lastDbHost || Object.values(defaultDbHosts).includes(lastDbHost);
+      if (isDbHostDefault) {
+        dbHost.value = defaultDbHosts[dbType] ?? '';
+      }
+      if (!dbUser.value && !dbName.value) {
+        dbUser.value = defaultDbUser;
+        dbName.value = defaultDbName;
+      }
+    } // else: for SQLite3, the default path is always prepared by backend code (setting)
+  });
+  document.querySelector('#db_type').dispatchEvent(new Event('change'));
+
+  const appUrl = document.querySelector<HTMLInputElement>('#app_url');
+  if (appUrl.value.includes('://localhost')) {
+    appUrl.value = window.location.href;
+  }
+
+  const domain = document.querySelector<HTMLInputElement>('#domain');
+  if (domain.value.trim() === 'localhost') {
+    domain.value = window.location.hostname;
+  }
+
+  // TODO: better handling of exclusive relations.
+  document.querySelector<HTMLInputElement>('#offline-mode input').addEventListener('change', function () {
+    if (this.checked) {
+      document.querySelector<HTMLInputElement>('#disable-gravatar input').checked = true;
+      document.querySelector<HTMLInputElement>('#federated-avatar-lookup input').checked = false;
+    }
+  });
+  document.querySelector<HTMLInputElement>('#disable-gravatar input').addEventListener('change', function () {
+    if (this.checked) {
+      document.querySelector<HTMLInputElement>('#federated-avatar-lookup input').checked = false;
+    } else {
+      document.querySelector<HTMLInputElement>('#offline-mode input').checked = false;
+    }
+  });
+  document.querySelector<HTMLInputElement>('#federated-avatar-lookup input').addEventListener('change', function () {
+    if (this.checked) {
+      document.querySelector<HTMLInputElement>('#disable-gravatar input').checked = false;
+      document.querySelector<HTMLInputElement>('#offline-mode input').checked = false;
+    }
+  });
+  document.querySelector<HTMLInputElement>('#enable-openid-signin input').addEventListener('change', function () {
+    if (this.checked) {
+      if (!document.querySelector<HTMLInputElement>('#disable-registration input').checked) {
+        document.querySelector<HTMLInputElement>('#enable-openid-signup input').checked = true;
+      }
+    } else {
+      document.querySelector<HTMLInputElement>('#enable-openid-signup input').checked = false;
+    }
+  });
+  document.querySelector<HTMLInputElement>('#disable-registration input').addEventListener('change', function () {
+    if (this.checked) {
+      document.querySelector<HTMLInputElement>('#enable-captcha input').checked = false;
+      document.querySelector<HTMLInputElement>('#enable-openid-signup input').checked = false;
+    } else {
+      document.querySelector<HTMLInputElement>('#enable-openid-signup input').checked = true;
+    }
+  });
+  document.querySelector<HTMLInputElement>('#enable-captcha input').addEventListener('change', function () {
+    if (this.checked) {
+      document.querySelector<HTMLInputElement>('#disable-registration input').checked = false;
+    }
+  });
+}
+
+function initPostInstall() {
+  const el = document.querySelector('#goto-after-install');
+  if (!el) return;
+
+  const targetUrl = el.getAttribute('href');
+  let tid = setInterval(async () => {
+    try {
+      const resp = await GET(targetUrl);
+      if (tid && resp.status === 200) {
+        clearInterval(tid);
+        tid = null;
+        window.location.href = targetUrl;
+      }
+    } catch {}
+  }, 1000);
+}

web_src/js/features/issue.ts

@@ -0,0 +1,41 @@
+import type {Issue} from '../types.ts';
+
+// the getIssueIcon/getIssueColor logic should be kept the same as "templates/shared/issueicon.tmpl"
+
+export function getIssueIcon(issue: Issue) {
+  if (issue.pull_request) {
+    if (issue.state === 'open') {
+      if (issue.pull_request.draft) {
+        return 'octicon-git-pull-request-draft'; // WIP PR
+      }
+      return 'octicon-git-pull-request'; // Open PR
+    } else if (issue.pull_request.merged) {
+      return 'octicon-git-merge'; // Merged PR
+    }
+    return 'octicon-git-pull-request-closed'; // Closed PR
+  }
+
+  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.state === 'open') {
+      if (issue.pull_request.draft) {
+        return 'grey'; // WIP PR
+      }
+      return 'green'; // Open PR
+    } else if (issue.pull_request.merged) {
+      return 'purple'; // Merged PR
+    }
+    return 'red'; // Closed PR
+  }
+
+  if (issue.state === 'open') {
+    return 'green'; // Open Issue
+  }
+  return 'red'; // Closed Issue
+}

web_src/js/features/notification.ts

@@ -0,0 +1,166 @@
+import {GET} from '../modules/fetch.ts';
+import {toggleElem, createElementFromHTML} from '../utils/dom.ts';
+import {logoutFromWorker} from '../modules/worker.ts';
+
+const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
+let notificationSequenceNumber = 0;
+
+async function receiveUpdateCount(event: MessageEvent<{type: string, data: string}>) {
+  try {
+    const data = JSON.parse(event.data.data);
+    for (const count of document.querySelectorAll('.notification_count')) {
+      count.classList.toggle('tw-hidden', data.Count === 0);
+      count.textContent = `${data.Count}`;
+    }
+    await updateNotificationTable();
+  } catch (error) {
+    console.error(error, event);
+  }
+}
+
+export function initNotificationCount() {
+  if (!document.querySelector('.notification_count')) return;
+
+  let usingPeriodicPoller = false;
+  const startPeriodicPoller = (timeout: number, lastCount?: number) => {
+    if (timeout <= 0 || !Number.isFinite(timeout)) return;
+    usingPeriodicPoller = true;
+    lastCount = lastCount ?? getCurrentCount();
+    setTimeout(async () => {
+      await updateNotificationCountWithCallback(startPeriodicPoller, timeout, lastCount);
+    }, timeout);
+  };
+
+  if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
+    // Try to connect to the event source via the shared worker first
+    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
+    worker.addEventListener('error', (event) => {
+      console.error('worker error', event);
+    });
+    worker.port.addEventListener('messageerror', () => {
+      console.error('unable to deserialize message');
+    });
+    worker.port.postMessage({
+      type: 'start',
+      url: `${window.location.origin}${appSubUrl}/user/events`,
+    });
+    worker.port.addEventListener('message', (event: MessageEvent<{type: string, data: string}>) => {
+      if (!event.data || !event.data.type) {
+        console.error('unknown worker message event', event);
+        return;
+      }
+      if (event.data.type === 'notification-count') {
+        receiveUpdateCount(event); // no await
+      } else if (event.data.type === 'no-event-source') {
+        // browser doesn't support EventSource, falling back to periodic poller
+        if (!usingPeriodicPoller) startPeriodicPoller(notificationSettings.MinTimeout);
+      } else if (event.data.type === 'error') {
+        console.error('worker port event error', event.data);
+      } else if (event.data.type === 'logout') {
+        if (event.data.data !== 'here') {
+          return;
+        }
+        worker.port.postMessage({
+          type: 'close',
+        });
+        worker.port.close();
+        logoutFromWorker();
+      } else if (event.data.type === 'close') {
+        worker.port.postMessage({
+          type: 'close',
+        });
+        worker.port.close();
+      }
+    });
+    worker.port.addEventListener('error', (e) => {
+      console.error('worker port error', e);
+    });
+    worker.port.start();
+    window.addEventListener('beforeunload', () => {
+      worker.port.postMessage({
+        type: 'close',
+      });
+      worker.port.close();
+    });
+
+    return;
+  }
+
+  startPeriodicPoller(notificationSettings.MinTimeout);
+}
+
+function getCurrentCount() {
+  return Number(document.querySelector('.notification_count').textContent ?? '0');
+}
+
+async function updateNotificationCountWithCallback(callback: (timeout: number, newCount: number) => void, timeout: number, lastCount: number) {
+  const currentCount = getCurrentCount();
+  if (lastCount !== currentCount) {
+    callback(notificationSettings.MinTimeout, currentCount);
+    return;
+  }
+
+  const newCount = await updateNotificationCount();
+  let needsUpdate = false;
+
+  if (lastCount !== newCount) {
+    needsUpdate = true;
+    timeout = notificationSettings.MinTimeout;
+  } else if (timeout < notificationSettings.MaxTimeout) {
+    timeout += notificationSettings.TimeoutStep;
+  }
+
+  callback(timeout, newCount);
+  if (needsUpdate) {
+    await updateNotificationTable();
+  }
+}
+
+async function updateNotificationTable() {
+  let notificationDiv = document.querySelector('#notification_div');
+  if (notificationDiv) {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      params.set('div-only', 'true');
+      params.set('sequence-number', String(++notificationSequenceNumber));
+      const response = await GET(`${appSubUrl}/notifications?${params.toString()}`);
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch notification table');
+      }
+
+      const data = await response.text();
+      const el = createElementFromHTML(data);
+      if (parseInt(el.getAttribute('data-sequence-number')) === notificationSequenceNumber) {
+        notificationDiv.outerHTML = data;
+        notificationDiv = document.querySelector('#notification_div');
+        window.htmx.process(notificationDiv); // when using htmx, we must always remember to process the new content changed by us
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+async function updateNotificationCount(): Promise<number> {
+  try {
+    const response = await GET(`${appSubUrl}/notifications/new`);
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch notification count');
+    }
+
+    const data = await response.json();
+
+    toggleElem('.notification_count', data.new !== 0);
+
+    for (const el of document.querySelectorAll('.notification_count')) {
+      el.textContent = `${data.new}`;
+    }
+
+    return data.new as number;
+  } catch (error) {
+    console.error(error);
+    return 0;
+  }
+}

web_src/js/features/oauth2-settings.ts

@@ -0,0 +1,9 @@
+import type {DOMEvent} from '../utils/dom.ts';
+
+export function initOAuth2SettingsDisableCheckbox() {
+  for (const el of document.querySelectorAll<HTMLInputElement>('.disable-setting')) {
+    el.addEventListener('change', (e: DOMEvent<Event, HTMLInputElement>) => {
+      document.querySelector(e.target.getAttribute('data-target')).classList.toggle('disabled', e.target.checked);
+    });
+  }
+}

web_src/js/features/org-team.ts

@@ -0,0 +1,17 @@
+import {queryElems, toggleElem} from '../utils/dom.ts';
+
+function initOrgTeamSettings() {
+  // on the page "page-content organization new team"
+  const pageContent = document.querySelector('.page-content.organization.new.team');
+  if (!pageContent) return;
+  queryElems(pageContent, 'input[name=permission]', (el) => el.addEventListener('change', () => {
+    // Change team access mode
+    const val = pageContent.querySelector<HTMLInputElement>('input[name=permission]:checked')?.value;
+    toggleElem(pageContent.querySelectorAll('.team-units'), val !== 'admin');
+  }));
+}
+
+export function initOrgTeam() {
+  if (!document.querySelector('.page-content.organization')) return;
+  initOrgTeamSettings();
+}

web_src/js/features/pull-view-file.ts

@@ -0,0 +1,85 @@
+import {diffTreeStore, diffTreeStoreSetViewed} from '../modules/diff-file.ts';
+import {setFileFolding} from './file-fold.ts';
+import {POST} from '../modules/fetch.ts';
+
+const {pageData} = window.config;
+const prReview = pageData.prReview || {};
+const viewedStyleClass = 'viewed-file-checked-form';
+const viewedCheckboxSelector = '.viewed-file-form'; // Selector under which all "Viewed" checkbox forms can be found
+const expandFilesBtnSelector = '#expand-files-btn';
+const collapseFilesBtnSelector = '#collapse-files-btn';
+
+// Refreshes the summary of viewed files if present
+// The data used will be window.config.pageData.prReview.numberOf{Viewed}Files
+function refreshViewedFilesSummary() {
+  const viewedFilesProgress = document.querySelector('#viewed-files-summary');
+  viewedFilesProgress?.setAttribute('value', prReview.numberOfViewedFiles);
+  const summaryLabel = document.querySelector('#viewed-files-summary-label');
+  if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template')
+    .replace('%[1]d', prReview.numberOfViewedFiles)
+    .replace('%[2]d', prReview.numberOfFiles);
+}
+
+// Initializes a listener for all children of the given html element
+// (for example 'document' in the most basic case)
+// to watch for changes of viewed-file checkboxes
+export function initViewedCheckboxListenerFor() {
+  for (const form of document.querySelectorAll(`${viewedCheckboxSelector}:not([data-has-viewed-checkbox-listener="true"])`)) {
+    // To prevent double addition of listeners
+    form.setAttribute('data-has-viewed-checkbox-listener', String(true));
+
+    // The checkbox consists of a div containing the real checkbox with its label and the CSRF token,
+    // hence the actual checkbox first has to be found
+    const checkbox = form.querySelector<HTMLInputElement>('input[type=checkbox]');
+    checkbox.addEventListener('input', function() {
+      // Mark the file as viewed visually - will especially change the background
+      if (this.checked) {
+        form.classList.add(viewedStyleClass);
+        checkbox.setAttribute('checked', '');
+        prReview.numberOfViewedFiles++;
+      } else {
+        form.classList.remove(viewedStyleClass);
+        checkbox.removeAttribute('checked');
+        prReview.numberOfViewedFiles--;
+      }
+
+      // Update viewed-files summary and remove "has changed" label if present
+      refreshViewedFilesSummary();
+      const hasChangedLabel = form.parentNode.querySelector('.changed-since-last-review');
+      hasChangedLabel?.remove();
+
+      const fileName = checkbox.getAttribute('name');
+
+      // check if the file is in our diffTreeStore and if we find it -> change the IsViewed status
+      diffTreeStoreSetViewed(diffTreeStore(), fileName, this.checked);
+
+      // Unfortunately, actual forms cause too many problems, hence another approach is needed
+      const files: Record<string, boolean> = {};
+      files[fileName] = this.checked;
+      const data: Record<string, any> = {files};
+      const headCommitSHA = form.getAttribute('data-headcommit');
+      if (headCommitSHA) data.headCommitSHA = headCommitSHA;
+      POST(form.getAttribute('data-link'), {data});
+
+      // Fold the file accordingly
+      const parentBox = form.closest('.diff-file-header');
+      setFileFolding(parentBox.closest('.file-content'), parentBox.querySelector('.fold-file'), this.checked);
+    });
+  }
+}
+
+export function initExpandAndCollapseFilesButton() {
+  // expand btn
+  document.querySelector(expandFilesBtnSelector)?.addEventListener('click', () => {
+    for (const box of document.querySelectorAll<HTMLElement>('.file-content[data-folded="true"]')) {
+      setFileFolding(box, box.querySelector('.fold-file'), false);
+    }
+  });
+  // collapse btn, need to exclude the div of “show more”
+  document.querySelector(collapseFilesBtnSelector)?.addEventListener('click', () => {
+    for (const box of document.querySelectorAll<HTMLElement>('.file-content:not([data-folded="true"])')) {
+      if (box.getAttribute('id') === 'diff-incomplete') continue;
+      setFileFolding(box, box.querySelector('.fold-file'), true);
+    }
+  });
+}

web_src/js/features/recent-commits.ts

@@ -0,0 +1,21 @@
+import {createApp} from 'vue';
+
+export async function initRepoRecentCommits() {
+  const el = document.querySelector('#repo-recent-commits-chart');
+  if (!el) return;
+
+  const {default: RepoRecentCommits} = await import(/* webpackChunkName: "recent-commits-graph" */'../components/RepoRecentCommits.vue');
+  try {
+    const View = createApp(RepoRecentCommits, {
+      locale: {
+        loadingTitle: el.getAttribute('data-locale-loading-title'),
+        loadingTitleFailed: el.getAttribute('data-locale-loading-title-failed'),
+        loadingInfo: el.getAttribute('data-locale-loading-info'),
+      },
+    });
+    View.mount(el);
+  } catch (err) {
+    console.error('RepoRecentCommits failed to load', err);
+    el.textContent = el.getAttribute('data-locale-component-failed-to-load');
+  }
+}

web_src/js/features/repo-actions.ts

@@ -0,0 +1,48 @@
+import {createApp} from 'vue';
+import RepoActionView from '../components/RepoActionView.vue';
+
+export function initRepositoryActionView() {
+  const el = document.querySelector('#repo-action-view');
+  if (!el) return;
+
+  // TODO: the parent element's full height doesn't work well now,
+  // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
+  const parentFullHeight = document.querySelector<HTMLElement>('body > div.full.height');
+  if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
+
+  const view = createApp(RepoActionView, {
+    runIndex: el.getAttribute('data-run-index'),
+    jobIndex: el.getAttribute('data-job-index'),
+    actionsURL: el.getAttribute('data-actions-url'),
+    locale: {
+      approve: el.getAttribute('data-locale-approve'),
+      cancel: el.getAttribute('data-locale-cancel'),
+      rerun: el.getAttribute('data-locale-rerun'),
+      rerun_all: el.getAttribute('data-locale-rerun-all'),
+      scheduled: el.getAttribute('data-locale-runs-scheduled'),
+      commit: el.getAttribute('data-locale-runs-commit'),
+      pushedBy: el.getAttribute('data-locale-runs-pushed-by'),
+      artifactsTitle: el.getAttribute('data-locale-artifacts-title'),
+      areYouSure: el.getAttribute('data-locale-are-you-sure'),
+      artifactExpired: el.getAttribute('data-locale-artifact-expired'),
+      confirmDeleteArtifact: el.getAttribute('data-locale-confirm-delete-artifact'),
+      showTimeStamps: el.getAttribute('data-locale-show-timestamps'),
+      showLogSeconds: el.getAttribute('data-locale-show-log-seconds'),
+      showFullScreen: el.getAttribute('data-locale-show-full-screen'),
+      downloadLogs: el.getAttribute('data-locale-download-logs'),
+      status: {
+        unknown: el.getAttribute('data-locale-status-unknown'),
+        waiting: el.getAttribute('data-locale-status-waiting'),
+        running: el.getAttribute('data-locale-status-running'),
+        success: el.getAttribute('data-locale-status-success'),
+        failure: el.getAttribute('data-locale-status-failure'),
+        cancelled: el.getAttribute('data-locale-status-cancelled'),
+        skipped: el.getAttribute('data-locale-status-skipped'),
+        blocked: el.getAttribute('data-locale-status-blocked'),
+      },
+      logsAlwaysAutoScroll: el.getAttribute('data-locale-logs-always-auto-scroll'),
+      logsAlwaysExpandRunning: el.getAttribute('data-locale-logs-always-expand-running'),
+    },
+  });
+  view.mount(el);
+}

web_src/js/features/repo-branch.ts

@@ -0,0 +1,42 @@
+import {toggleElem} from '../utils/dom.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+
+export function initRepoBranchButton() {
+  initRepoCreateBranchButton();
+  initRepoRenameBranchButton();
+}
+
+function initRepoCreateBranchButton() {
+  // 2 pages share this code, one is the branch list page, the other is the commit view page: create branch/tag from current commit (dirty code)
+  for (const el of document.querySelectorAll('.show-create-branch-modal')) {
+    el.addEventListener('click', () => {
+      const modalFormName = el.getAttribute('data-modal-form') || '#create-branch-form';
+      const modalForm = document.querySelector<HTMLFormElement>(modalFormName);
+      if (!modalForm) return;
+      modalForm.action = `${modalForm.getAttribute('data-base-action')}${el.getAttribute('data-branch-from-urlcomponent')}`;
+
+      const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
+      document.querySelector(fromSpanName).textContent = el.getAttribute('data-branch-from');
+
+      fomanticQuery(el.getAttribute('data-modal')).modal('show');
+    });
+  }
+}
+
+function initRepoRenameBranchButton() {
+  for (const el of document.querySelectorAll('.show-rename-branch-modal')) {
+    el.addEventListener('click', () => {
+      const target = el.getAttribute('data-modal');
+      const modal = document.querySelector(target);
+      const oldBranchName = el.getAttribute('data-old-branch-name');
+      modal.querySelector<HTMLInputElement>('input[name=from]').value = oldBranchName;
+
+      // display the warning that the branch which is chosen is the default branch
+      const warn = modal.querySelector('.default-branch-warning');
+      toggleElem(warn, el.getAttribute('data-is-default-branch') === 'true');
+
+      const text = modal.querySelector('[data-rename-branch-to]');
+      text.textContent = text.getAttribute('data-rename-branch-to').replace('%s', oldBranchName);
+    });
+  }
+}

web_src/js/features/repo-code.ts

@@ -0,0 +1,148 @@
+import {svg} from '../svg.ts';
+import {createTippy} from '../modules/tippy.ts';
+import {toAbsoluteUrl} from '../utils.ts';
+import {addDelegatedEventListener} from '../utils/dom.ts';
+
+function changeHash(hash: string) {
+  if (window.history.pushState) {
+    window.history.pushState(null, null, hash);
+  } else {
+    window.location.hash = hash;
+  }
+}
+
+// it selects the code lines defined by range: `L1-L3` (3 lines) or `L2` (singe line)
+function selectRange(range: string): Element {
+  for (const el of document.querySelectorAll('.code-view tr.active')) el.classList.remove('active');
+  const elLineNums = document.querySelectorAll(`.code-view td.lines-num span[data-line-number]`);
+
+  const refInNewIssue = document.querySelector('a.ref-in-new-issue');
+  const copyPermalink = document.querySelector('a.copy-line-permalink');
+  const viewGitBlame = document.querySelector('a.view_git_blame');
+
+  const updateIssueHref = function (anchor: string) {
+    if (!refInNewIssue) return;
+    const urlIssueNew = refInNewIssue.getAttribute('data-url-issue-new');
+    const urlParamBodyLink = refInNewIssue.getAttribute('data-url-param-body-link');
+    const issueContent = `${toAbsoluteUrl(urlParamBodyLink)}#${anchor}`; // the default content for issue body
+    refInNewIssue.setAttribute('href', `${urlIssueNew}?body=${encodeURIComponent(issueContent)}`);
+  };
+
+  const updateViewGitBlameFragment = function (anchor: string) {
+    if (!viewGitBlame) return;
+    let href = viewGitBlame.getAttribute('href');
+    href = `${href.replace(/#L\d+$|#L\d+-L\d+$/, '')}`;
+    if (anchor.length !== 0) {
+      href = `${href}#${anchor}`;
+    }
+    viewGitBlame.setAttribute('href', href);
+  };
+
+  const updateCopyPermalinkUrl = function (anchor: string) {
+    if (!copyPermalink) return;
+    let link = copyPermalink.getAttribute('data-url');
+    link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
+    copyPermalink.setAttribute('data-clipboard-text', link);
+    copyPermalink.setAttribute('data-clipboard-text-type', 'url');
+  };
+
+  const rangeFields = range ? range.split('-') : [];
+  const start = rangeFields[0] ?? '';
+  if (!start) return null;
+  const stop = rangeFields[1] || start;
+
+  // format is i.e. 'L14-L26'
+  let startLineNum = parseInt(start.substring(1));
+  let stopLineNum = parseInt(stop.substring(1));
+  if (startLineNum > stopLineNum) {
+    const tmp = startLineNum;
+    startLineNum = stopLineNum;
+    stopLineNum = tmp;
+    range = `${stop}-${start}`;
+  }
+
+  const first = elLineNums[startLineNum - 1] ?? null;
+  for (let i = startLineNum - 1; i <= stopLineNum - 1 && i < elLineNums.length; i++) {
+    elLineNums[i].closest('tr').classList.add('active');
+  }
+  changeHash(`#${range}`);
+  updateIssueHref(range);
+  updateViewGitBlameFragment(range);
+  updateCopyPermalinkUrl(range);
+  return first;
+}
+
+function showLineButton() {
+  const menu = document.querySelector('.code-line-menu');
+  if (!menu) return;
+
+  // remove all other line buttons
+  for (const el of document.querySelectorAll('.code-line-button')) {
+    el.remove();
+  }
+
+  // find active row and add button
+  const tr = document.querySelector('.code-view tr.active');
+  if (!tr) return;
+
+  const td = tr.querySelector('td.lines-num');
+  const btn = document.createElement('button');
+  btn.classList.add('code-line-button', 'ui', 'basic', 'button');
+  btn.innerHTML = svg('octicon-kebab-horizontal');
+  td.prepend(btn);
+
+  // put a copy of the menu back into DOM for the next click
+  btn.closest('.code-view').append(menu.cloneNode(true));
+
+  createTippy(btn, {
+    theme: 'menu',
+    trigger: 'click',
+    hideOnClick: true,
+    content: menu,
+    placement: 'right-start',
+    interactive: true,
+    onShow: (tippy) => {
+      tippy.popper.addEventListener('click', () => {
+        tippy.hide();
+      }, {once: true});
+    },
+  });
+}
+
+export function initRepoCodeView() {
+  // When viewing a file or blame, there is always a ".file-view" element,
+  // but the ".code-view" class is only present when viewing the "code" of a file; it is not present when viewing a PDF file.
+  // Since the ".file-view" will be dynamically reloaded when navigating via the left file tree (eg: view a PDF file, then view a source code file, etc.)
+  // the "code-view" related event listeners should always be added when the current page contains ".file-view" element.
+  if (!document.querySelector('.repo-view-container .file-view')) return;
+
+  // "file code view" and "blame" pages need this "line number button" feature
+  let selRangeStart: string;
+  addDelegatedEventListener(document, 'click', '.code-view .lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
+    if (!selRangeStart || !e.shiftKey) {
+      selRangeStart = el.getAttribute('id');
+      selectRange(selRangeStart);
+    } else {
+      const selRangeStop = el.getAttribute('id');
+      selectRange(`${selRangeStart}-${selRangeStop}`);
+    }
+    window.getSelection().removeAllRanges();
+    showLineButton();
+  });
+
+  // apply the selected range from the URL hash
+  const onHashChange = () => {
+    if (!window.location.hash) return;
+    if (!document.querySelector('.code-view .lines-num')) return;
+    const range = window.location.hash.substring(1);
+    const first = selectRange(range);
+    if (first) {
+      // set scrollRestoration to 'manual' when there is a hash in the URL, so that the scroll position will not be remembered after refreshing
+      if (window.history.scrollRestoration !== 'manual') window.history.scrollRestoration = 'manual';
+      first.scrollIntoView({block: 'start'});
+      showLineButton();
+    }
+  };
+  onHashChange();
+  window.addEventListener('hashchange', onHashChange);
+}

web_src/js/features/repo-commit.ts

@@ -0,0 +1,26 @@
+import {createTippy} from '../modules/tippy.ts';
+import {toggleElem} from '../utils/dom.ts';
+import {registerGlobalEventFunc, registerGlobalInitFunc} from '../modules/observer.ts';
+
+export function initRepoEllipsisButton() {
+  registerGlobalEventFunc('click', 'onRepoEllipsisButtonClick', async (el: HTMLInputElement, e: Event) => {
+    e.preventDefault();
+    const expanded = el.getAttribute('aria-expanded') === 'true';
+    toggleElem(el.parentElement.querySelector('.commit-body'));
+    el.setAttribute('aria-expanded', String(!expanded));
+  });
+}
+
+export function initCommitStatuses() {
+  registerGlobalInitFunc('initCommitStatuses', (el: HTMLElement) => {
+    const nextEl = el.nextElementSibling;
+    if (!nextEl.matches('.tippy-target')) throw new Error('Expected next element to be a tippy target');
+    createTippy(el, {
+      content: nextEl,
+      placement: 'bottom-start',
+      interactive: true,
+      role: 'dialog',
+      theme: 'box-with-header',
+    });
+  });
+}

web_src/js/features/repo-common.test.ts

@@ -0,0 +1,22 @@
+import {sanitizeRepoName, substituteRepoOpenWithUrl} from './repo-common.ts';
+
+test('substituteRepoOpenWithUrl', () => {
+  // For example: "x-github-client://openRepo/https://github.com/go-gitea/gitea"
+  expect(substituteRepoOpenWithUrl('proto://a/{url}', 'https://gitea')).toEqual('proto://a/https://gitea');
+  expect(substituteRepoOpenWithUrl('proto://a?link={url}', 'https://gitea')).toEqual('proto://a?link=https%3A%2F%2Fgitea');
+});
+
+test('sanitizeRepoName', () => {
+  expect(sanitizeRepoName(' a b ')).toEqual('a-b');
+  expect(sanitizeRepoName('a-b_c.git ')).toEqual('a-b_c');
+  expect(sanitizeRepoName('/x.git/')).toEqual('-x.git-');
+  expect(sanitizeRepoName('.profile')).toEqual('.profile');
+  expect(sanitizeRepoName('.profile.')).toEqual('.profile');
+  expect(sanitizeRepoName('.pro..file')).toEqual('.pro.file');
+
+  expect(sanitizeRepoName('foo.rss.atom.git.wiki')).toEqual('foo');
+
+  expect(sanitizeRepoName('.')).toEqual('');
+  expect(sanitizeRepoName('..')).toEqual('');
+  expect(sanitizeRepoName('-')).toEqual('');
+});

web_src/js/features/repo-common.ts

@@ -0,0 +1,177 @@
+import {queryElems, type DOMEvent} 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';
+import {toOriginUrl} from '../utils/url.ts';
+import {createTippy} from '../modules/tippy.ts';
+
+async function onDownloadArchive(e: DOMEvent<MouseEvent>) {
+  e.preventDefault();
+  // there are many places using the "archive-link", eg: the dropdown on the repo code page, the release list
+  const el = e.target.closest<HTMLAnchorElement>('a.archive-link[href]');
+  const targetLoading = el.closest('.ui.dropdown') ?? el;
+  targetLoading.classList.add('is-loading', 'loading-icon-2px');
+  try {
+    for (let tryCount = 0; ;tryCount++) {
+      const response = await POST(el.href);
+      if (!response.ok) throw new Error(`Invalid server response: ${response.status}`);
+
+      const data = await response.json();
+      if (data.complete) break;
+      await sleep(Math.min((tryCount + 1) * 750, 2000));
+    }
+    window.location.href = el.href; // the archive is ready, start real downloading
+  } catch (e) {
+    console.error(e);
+    showErrorToast(`Failed to download the archive: ${e}`, {duration: 2500});
+  } finally {
+    targetLoading.classList.remove('is-loading', 'loading-icon-2px');
+  }
+}
+
+export function initRepoArchiveLinks() {
+  queryElems(document, '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 substituteRepoOpenWithUrl(tmpl: string, url: string): string {
+  const pos = tmpl.indexOf('{url}');
+  if (pos === -1) return tmpl;
+  const posQuestionMark = tmpl.indexOf('?');
+  const needEncode = posQuestionMark >= 0 && posQuestionMark < pos;
+  return tmpl.replace('{url}', needEncode ? encodeURIComponent(url) : url);
+}
+
+function initCloneSchemeUrlSelection(parent: Element) {
+  const elCloneUrlInput = parent.querySelector<HTMLInputElement>('.repo-clone-url');
+
+  const tabHttps = parent.querySelector('.repo-clone-https');
+  const tabSsh = parent.querySelector('.repo-clone-ssh');
+  const tabTea = parent.querySelector('.repo-clone-tea');
+  const updateClonePanelUi = function() {
+    let scheme = localStorage.getItem('repo-clone-protocol');
+    if (!['https', 'ssh', 'tea'].includes(scheme)) {
+      scheme = 'https';
+    }
+
+    // Fallbacks if the scheme preference is not available in the tabs, for example: empty repo page, there are only HTTPS and SSH
+    if (scheme === 'tea' && !tabTea) {
+      scheme = 'https';
+    }
+    if (scheme === 'https' && !tabHttps) {
+      scheme = 'ssh';
+    } else if (scheme === 'ssh' && !tabSsh) {
+      scheme = 'https';
+    }
+
+    const isHttps = scheme === 'https';
+    const isSsh = scheme === 'ssh';
+    const isTea = scheme === 'tea';
+
+    if (tabHttps) {
+      tabHttps.textContent = window.origin.split(':')[0].toUpperCase(); // show "HTTP" or "HTTPS"
+      tabHttps.classList.toggle('active', isHttps);
+    }
+    if (tabSsh) {
+      tabSsh.classList.toggle('active', isSsh);
+    }
+    if (tabTea) {
+      tabTea.classList.toggle('active', isTea);
+    }
+
+    let tab: Element;
+    if (isHttps) {
+      tab = tabHttps;
+    } else if (isSsh) {
+      tab = tabSsh;
+    } else if (isTea) {
+      tab = tabTea;
+    }
+
+    if (!tab) return;
+    const link = toOriginUrl(tab.getAttribute('data-link'));
+
+    for (const el of document.querySelectorAll('.js-clone-url')) {
+      if (el.nodeName === 'INPUT') {
+        (el as HTMLInputElement).value = link;
+      } else {
+        el.textContent = link;
+      }
+    }
+    for (const el of parent.querySelectorAll<HTMLAnchorElement>('.js-clone-url-editor')) {
+      el.href = substituteRepoOpenWithUrl(el.getAttribute('data-href-template'), link);
+    }
+  };
+
+  updateClonePanelUi();
+  // tabSsh or tabHttps might not both exist, eg: guest view, or one is disabled by the server
+  tabHttps?.addEventListener('click', () => {
+    localStorage.setItem('repo-clone-protocol', 'https');
+    updateClonePanelUi();
+  });
+  tabSsh?.addEventListener('click', () => {
+    localStorage.setItem('repo-clone-protocol', 'ssh');
+    updateClonePanelUi();
+  });
+  tabTea?.addEventListener('click', () => {
+    localStorage.setItem('repo-clone-protocol', 'tea');
+    updateClonePanelUi();
+  });
+  elCloneUrlInput.addEventListener('focus', () => {
+    elCloneUrlInput.select();
+  });
+}
+
+function initClonePanelButton(btn: HTMLButtonElement) {
+  const elPanel = btn.nextElementSibling;
+  // "init" must be before the "createTippy" otherwise the "tippy-target" will be removed from the document
+  initCloneSchemeUrlSelection(elPanel);
+  createTippy(btn, {
+    content: elPanel,
+    trigger: 'click',
+    placement: 'bottom-end',
+    interactive: true,
+    hideOnClick: true,
+    arrow: false,
+  });
+}
+
+export function initRepoCloneButtons() {
+  queryElems(document, '.js-btn-clone-panel', initClonePanelButton);
+  queryElems(document, '.clone-buttons-combo', initCloneSchemeUrlSelection);
+}
+
+export async function updateIssuesMeta(url: string, action: string, issue_ids: string, id: string) {
+  try {
+    const response = await POST(url, {data: new URLSearchParams({action, issue_ids, id})});
+    if (!response.ok) {
+      throw new Error('Failed to update issues meta');
+    }
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+export function sanitizeRepoName(name: string): string {
+  name = name.trim().replace(/[^-.\w]/g, '-');
+  for (let lastName = ''; lastName !== name;) {
+    lastName = name;
+    name = name.replace(/\.+$/g, '');
+    name = name.replace(/\.{2,}/g, '.');
+    for (const ext of ['.git', '.wiki', '.rss', '.atom']) {
+      if (name.endsWith(ext)) {
+        name = name.substring(0, name.length - ext.length);
+      }
+    }
+  }
+  if (['.', '..', '-'].includes(name)) name = '';
+  return name;
+}

web_src/js/features/repo-diff-commit.ts

@@ -0,0 +1,53 @@
+import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
+import {GET} from '../modules/fetch.ts';
+
+async function loadBranchesAndTags(area: Element, loadingButton: Element) {
+  loadingButton.classList.add('disabled');
+  try {
+    const res = await GET(loadingButton.getAttribute('data-fetch-url'));
+    const data = await res.json();
+    hideElem(loadingButton);
+    addTags(area, data.tags);
+    addBranches(area, data.branches, data.default_branch);
+    showElem(area.querySelectorAll('.branch-and-tag-detail'));
+  } finally {
+    loadingButton.classList.remove('disabled');
+  }
+}
+
+function addTags(area: Element, tags: Array<Record<string, any>>) {
+  const tagArea = area.querySelector('.tag-area');
+  toggleElem(tagArea.parentElement, tags.length > 0);
+  for (const tag of tags) {
+    addLink(tagArea, tag.web_link, tag.name);
+  }
+}
+
+function addBranches(area: Element, branches: Array<Record<string, any>>, defaultBranch: string) {
+  const defaultBranchTooltip = area.getAttribute('data-text-default-branch-tooltip');
+  const branchArea = area.querySelector('.branch-area');
+  toggleElem(branchArea.parentElement, branches.length > 0);
+  for (const branch of branches) {
+    const tooltip = defaultBranch === branch.name ? defaultBranchTooltip : null;
+    addLink(branchArea, branch.web_link, branch.name, tooltip);
+  }
+}
+
+function addLink(parent: Element, href: string, text: string, tooltip?: string) {
+  const link = document.createElement('a');
+  link.classList.add('muted', 'tw-px-1');
+  link.href = href;
+  link.textContent = text;
+  if (tooltip) {
+    link.classList.add('tw-border', 'tw-border-secondary', 'tw-rounded');
+    link.setAttribute('data-tooltip-content', tooltip);
+  }
+  parent.append(link);
+}
+
+export function initRepoDiffCommitBranchesAndTags() {
+  for (const area of document.querySelectorAll('.branch-and-tag-area')) {
+    const btn = area.querySelector('.load-branches-and-tags');
+    btn.addEventListener('click', () => loadBranchesAndTags(area, btn));
+  }
+}

web_src/js/features/repo-diff-commitselect.ts

@@ -0,0 +1,10 @@
+import {createApp} from 'vue';
+import DiffCommitSelector from '../components/DiffCommitSelector.vue';
+
+export function initDiffCommitSelect() {
+  const el = document.querySelector('#diff-commit-select');
+  if (!el) return;
+
+  const commitSelect = createApp(DiffCommitSelector);
+  commitSelect.mount(el);
+}

web_src/js/features/repo-diff-filetree.ts

@@ -0,0 +1,10 @@
+import {createApp} from 'vue';
+import DiffFileTree from '../components/DiffFileTree.vue';
+
+export function initDiffFileTree() {
+  const el = document.querySelector('#diff-file-tree');
+  if (!el) return;
+
+  const fileTreeView = createApp(DiffFileTree);
+  fileTreeView.mount(el);
+}

web_src/js/features/repo-diff.ts

@@ -0,0 +1,267 @@
+import {initRepoIssueContentHistory} from './repo-issue-content.ts';
+import {initDiffFileTree} from './repo-diff-filetree.ts';
+import {initDiffCommitSelect} from './repo-diff-commitselect.ts';
+import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.ts';
+import {initViewedCheckboxListenerFor, initExpandAndCollapseFilesButton} from './pull-view-file.ts';
+import {initImageDiff} from './imagediff.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {submitEventSubmitter, queryElemSiblings, hideElem, showElem, animateOnce, addDelegatedEventListener, createElementFromHTML, queryElems} from '../utils/dom.ts';
+import {POST, GET} from '../modules/fetch.ts';
+import {createTippy} from '../modules/tippy.ts';
+import {invertFileFolding} from './file-fold.ts';
+import {parseDom} from '../utils.ts';
+import {registerGlobalSelectorFunc} from '../modules/observer.ts';
+
+function initRepoDiffFileBox(el: HTMLElement) {
+  // switch between "rendered" and "source", for image and CSV files
+  queryElems(el, '.file-view-toggle', (btn) => btn.addEventListener('click', () => {
+    queryElemSiblings(btn, '.file-view-toggle', (el) => el.classList.remove('active'));
+    btn.classList.add('active');
+
+    const target = document.querySelector(btn.getAttribute('data-toggle-selector'));
+    if (!target) throw new Error('Target element not found');
+
+    hideElem(queryElemSiblings(target));
+    showElem(target);
+  }));
+}
+
+function initRepoDiffConversationForm() {
+  // FIXME: there could be various different form in a conversation-holder (for example: reply form, edit form).
+  // This listener is for "reply form" only, it should clearly distinguish different forms in the future.
+  addDelegatedEventListener<HTMLFormElement, SubmitEvent>(document, 'submit', '.conversation-holder form', async (form, e) => {
+    e.preventDefault();
+    const textArea = form.querySelector<HTMLTextAreaElement>('textarea');
+    if (!validateTextareaNonEmpty(textArea)) return;
+    if (form.classList.contains('is-loading')) return;
+
+    try {
+      form.classList.add('is-loading');
+      const formData = new FormData(form);
+
+      // if the form is submitted by a button, append the button's name and value to the form data
+      const submitter = submitEventSubmitter(e);
+      const isSubmittedByButton = (submitter?.nodeName === 'BUTTON') || (submitter?.nodeName === 'INPUT' && submitter.type === 'submit');
+      if (isSubmittedByButton && submitter.name) {
+        formData.append(submitter.name, submitter.value);
+      }
+
+      // on the diff page, the form is inside a "tr" and need to get the line-type ahead
+      // but on the conversation page, there is no parent "tr"
+      const trLineType = form.closest('tr')?.getAttribute('data-line-type');
+      const response = await POST(form.getAttribute('action'), {data: formData});
+      const newConversationHolder = createElementFromHTML(await response.text());
+      const path = newConversationHolder.getAttribute('data-path');
+      const side = newConversationHolder.getAttribute('data-side');
+      const idx = newConversationHolder.getAttribute('data-idx');
+
+      form.closest('.conversation-holder').replaceWith(newConversationHolder);
+      form = null; // prevent further usage of the form because it should have been replaced
+
+      if (trLineType) {
+        // if there is a line-type for the "tr", it means the form is on the diff page
+        // then hide the "add-code-comment" [+] button for current code line by adding "tw-invisible" because the conversation has been added
+        let selector;
+        if (trLineType === 'same') {
+          selector = `[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`;
+        } else {
+          selector = `[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`;
+        }
+        for (const el of document.querySelectorAll(selector)) {
+          el.classList.add('tw-invisible');
+        }
+      }
+
+      // the default behavior is to add a pending review, so if no submitter, it also means "pending_review"
+      if (!submitter || submitter?.matches('button[name="pending_review"]')) {
+        const reviewBox = document.querySelector('#review-box');
+        const counter = reviewBox?.querySelector('.review-comments-counter');
+        if (!counter) return;
+        const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1;
+        counter.setAttribute('data-pending-comment-number', String(num));
+        counter.textContent = String(num);
+        animateOnce(reviewBox, 'pulse-1p5-200');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      showErrorToast(`Submit form failed: ${error}`);
+    } finally {
+      form?.classList.remove('is-loading');
+    }
+  });
+
+  addDelegatedEventListener(document, 'click', '.resolve-conversation', async (el, e) => {
+    e.preventDefault();
+    const comment_id = el.getAttribute('data-comment-id');
+    const origin = el.getAttribute('data-origin');
+    const action = el.getAttribute('data-action');
+    const url = el.getAttribute('data-update-url');
+
+    try {
+      const response = await POST(url, {data: new URLSearchParams({origin, action, comment_id})});
+      const data = await response.text();
+
+      const elConversationHolder = el.closest('.conversation-holder');
+      if (elConversationHolder) {
+        const elNewConversation = createElementFromHTML(data);
+        elConversationHolder.replaceWith(elNewConversation);
+      } else {
+        window.location.reload();
+      }
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  });
+}
+
+function initRepoDiffConversationNav() {
+  // Previous/Next code review conversation
+  addDelegatedEventListener(document, 'click', '.previous-conversation, .next-conversation', (el, e) => {
+    e.preventDefault();
+    const isPrevious = el.matches('.previous-conversation');
+    const elCurConversation = el.closest('.comment-code-cloud');
+    const elAllConversations = document.querySelectorAll('.comment-code-cloud:not(.tw-hidden)');
+    const index = Array.from(elAllConversations).indexOf(elCurConversation);
+    const previousIndex = index > 0 ? index - 1 : elAllConversations.length - 1;
+    const nextIndex = index < elAllConversations.length - 1 ? index + 1 : 0;
+    const navIndex = isPrevious ? previousIndex : nextIndex;
+    const elNavConversation = elAllConversations[navIndex];
+    const anchor = elNavConversation.querySelector('.comment').id;
+    window.location.href = `#${anchor}`;
+  });
+}
+
+function initDiffHeaderPopup() {
+  for (const btn of document.querySelectorAll('.diff-header-popup-btn:not([data-header-popup-initialized])')) {
+    btn.setAttribute('data-header-popup-initialized', '');
+    const popup = btn.nextElementSibling;
+    if (!popup?.matches('.tippy-target')) throw new Error('Popup element not found');
+    createTippy(btn, {
+      content: popup,
+      theme: 'menu',
+      placement: 'bottom-end',
+      trigger: 'click',
+      interactive: true,
+      hideOnClick: true,
+    });
+  }
+}
+
+// Will be called when the show more (files) button has been pressed
+function onShowMoreFiles() {
+  // TODO: replace these calls with the "observer.ts" methods
+  initRepoIssueContentHistory();
+  initViewedCheckboxListenerFor();
+  initImageDiff();
+  initDiffHeaderPopup();
+}
+
+async function loadMoreFiles(btn: Element): Promise<boolean> {
+  if (btn.classList.contains('disabled')) {
+    return false;
+  }
+
+  btn.classList.add('disabled');
+  const url = btn.getAttribute('data-href');
+  try {
+    const response = await GET(url);
+    const resp = await response.text();
+    const respDoc = parseDom(resp, 'text/html');
+    const respFileBoxes = respDoc.querySelector('#diff-file-boxes');
+    // the response is a full HTML page, we need to extract the relevant contents:
+    // * append the newly loaded file list items to the existing list
+    document.querySelector('#diff-incomplete').replaceWith(...Array.from(respFileBoxes.children));
+    onShowMoreFiles();
+    return true;
+  } catch (error) {
+    console.error('Error:', error);
+    showErrorToast('An error occurred while loading more files.');
+  } finally {
+    btn.classList.remove('disabled');
+  }
+  return false;
+}
+
+function initRepoDiffShowMore() {
+  addDelegatedEventListener(document, 'click', 'a#diff-show-more-files', (el, e) => {
+    e.preventDefault();
+    loadMoreFiles(el);
+  });
+
+  addDelegatedEventListener(document, 'click', 'a.diff-load-button', async (el, e) => {
+    e.preventDefault();
+    if (el.classList.contains('disabled')) return;
+
+    el.classList.add('disabled');
+    const url = el.getAttribute('data-href');
+
+    try {
+      const response = await GET(url);
+      const resp = await response.text();
+      const respDoc = parseDom(resp, 'text/html');
+      const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body');
+      const respFileBodyChildren = Array.from(respFileBody.children); // respFileBody.children will be empty after replaceWith
+      el.parentElement.replaceWith(...respFileBodyChildren);
+      for (const el of respFileBodyChildren) window.htmx.process(el);
+      // FIXME: calling onShowMoreFiles is not quite right here.
+      // But since onShowMoreFiles mixes "init diff box" and "init diff body" together,
+      // so it still needs to call it to make the "ImageDiff" and something similar work.
+      onShowMoreFiles();
+    } catch (error) {
+      console.error('Error:', error);
+    } finally {
+      el.classList.remove('disabled');
+    }
+  });
+}
+
+async function loadUntilFound() {
+  const hashTargetSelector = window.location.hash;
+  if (!hashTargetSelector.startsWith('#diff-') && !hashTargetSelector.startsWith('#issuecomment-')) {
+    return;
+  }
+
+  while (true) {
+    // use getElementById to avoid querySelector throws an error when the hash is invalid
+    // eslint-disable-next-line unicorn/prefer-query-selector
+    const targetElement = document.getElementById(hashTargetSelector.substring(1));
+    if (targetElement) {
+      targetElement.scrollIntoView();
+      return;
+    }
+
+    // the button will be refreshed after each "load more", so query it every time
+    const showMoreButton = document.querySelector('#diff-show-more-files');
+    if (!showMoreButton) {
+      return; // nothing more to load
+    }
+
+    // Load more files, await ensures we don't block progress
+    const ok = await loadMoreFiles(showMoreButton);
+    if (!ok) return; // failed to load more files
+  }
+}
+
+function initRepoDiffHashChangeListener() {
+  window.addEventListener('hashchange', loadUntilFound);
+  loadUntilFound();
+}
+
+export function initRepoDiffView() {
+  initRepoDiffConversationForm(); // such form appears on the "conversation" page and "diff" page
+
+  if (!document.querySelector('#diff-file-boxes')) return;
+  initRepoDiffConversationNav(); // "previous" and "next" buttons only appear on "diff" page
+  initDiffFileTree();
+  initDiffCommitSelect();
+  initRepoDiffShowMore();
+  initDiffHeaderPopup();
+  initViewedCheckboxListenerFor();
+  initExpandAndCollapseFilesButton();
+  initRepoDiffHashChangeListener();
+
+  registerGlobalSelectorFunc('#diff-file-boxes .diff-file-box', initRepoDiffFileBox);
+  addDelegatedEventListener(document, 'click', '.fold-file', (el) => {
+    invertFileFolding(el.closest('.file-content'), el);
+  });
+}

web_src/js/features/repo-editor.ts

@@ -0,0 +1,201 @@
+import {html, htmlRaw} from '../utils/html.ts';
+import {createCodeEditor} from './codeeditor.ts';
+import {hideElem, queryElems, showElem, createElementFromHTML} from '../utils/dom.ts';
+import {POST} from '../modules/fetch.ts';
+import {initDropzone} from './dropzone.ts';
+import {confirmModal} from './comp/ConfirmModal.ts';
+import {applyAreYouSure, ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {submitFormFetchAction} from './common-fetch-action.ts';
+
+function initEditPreviewTab(elForm: HTMLFormElement) {
+  const elTabMenu = elForm.querySelector('.repo-editor-menu');
+  fomanticQuery(elTabMenu.querySelectorAll('.item')).tab();
+
+  const elPreviewTab = elTabMenu.querySelector('a[data-tab="preview"]');
+  const elPreviewPanel = elForm.querySelector('.tab[data-tab="preview"]');
+  if (!elPreviewTab || !elPreviewPanel) return;
+
+  elPreviewTab.addEventListener('click', async () => {
+    const elTreePath = elForm.querySelector<HTMLInputElement>('input#tree_path');
+    const previewUrl = elPreviewTab.getAttribute('data-preview-url');
+    const previewContextRef = elPreviewTab.getAttribute('data-preview-context-ref');
+    let previewContext = `${previewContextRef}/${elTreePath.value}`;
+    previewContext = previewContext.substring(0, previewContext.lastIndexOf('/'));
+    const formData = new FormData();
+    formData.append('mode', 'file');
+    formData.append('context', previewContext);
+    formData.append('text', elForm.querySelector<HTMLTextAreaElement>('.tab[data-tab="write"] textarea').value);
+    formData.append('file_path', elTreePath.value);
+    const response = await POST(previewUrl, {data: formData});
+    const data = await response.text();
+    renderPreviewPanelContent(elPreviewPanel, data);
+  });
+}
+
+export function initRepoEditor() {
+  const dropzoneUpload = document.querySelector<HTMLElement>('.page-content.repository.editor.upload .dropzone');
+  if (dropzoneUpload) initDropzone(dropzoneUpload);
+
+  for (const el of queryElems<HTMLInputElement>(document, '.js-quick-pull-choice-option')) {
+    el.addEventListener('input', () => {
+      if (el.value === 'commit-to-new-branch') {
+        showElem('.quick-pull-branch-name');
+        document.querySelector<HTMLInputElement>('.quick-pull-branch-name input').required = true;
+      } else {
+        hideElem('.quick-pull-branch-name');
+        document.querySelector<HTMLInputElement>('.quick-pull-branch-name input').required = false;
+      }
+      document.querySelector('#commit-button').textContent = el.getAttribute('data-button-text');
+    });
+  }
+
+  const filenameInput = document.querySelector<HTMLInputElement>('#file-name');
+  if (!filenameInput) return;
+  function joinTreePath() {
+    const parts = [];
+    for (const el of document.querySelectorAll('.breadcrumb span.section')) {
+      const link = el.querySelector('a');
+      parts.push(link ? link.textContent : el.textContent);
+    }
+    if (filenameInput.value) {
+      parts.push(filenameInput.value);
+    }
+    document.querySelector<HTMLInputElement>('#tree_path').value = parts.join('/');
+  }
+  filenameInput.addEventListener('input', function () {
+    const parts = filenameInput.value.split('/');
+    const links = Array.from(document.querySelectorAll('.breadcrumb span.section'));
+    const dividers = Array.from(document.querySelectorAll('.breadcrumb .breadcrumb-divider'));
+    let warningDiv = document.querySelector<HTMLDivElement>('.ui.warning.message.flash-message.flash-warning.space-related');
+    let containSpace = false;
+    if (parts.length > 1) {
+      for (let i = 0; i < parts.length; ++i) {
+        const value = parts[i];
+        const trimValue = value.trim();
+        if (trimValue === '..') {
+          // remove previous tree path
+          if (links.length > 0) {
+            const link = links.pop();
+            const divider = dividers.pop();
+            link.remove();
+            divider.remove();
+          }
+          continue;
+        }
+        if (i < parts.length - 1) {
+          if (trimValue.length) {
+            const linkElement = createElementFromHTML(
+              html`<span class="section"><a href="#">${value}</a></span>`,
+            );
+            const dividerElement = createElementFromHTML(
+              html`<div class="breadcrumb-divider">/</div>`,
+            );
+            links.push(linkElement);
+            dividers.push(dividerElement);
+            filenameInput.before(linkElement);
+            filenameInput.before(dividerElement);
+          }
+        } else {
+          filenameInput.value = value;
+        }
+        this.setSelectionRange(0, 0);
+        containSpace = containSpace || (trimValue !== value && trimValue !== '');
+      }
+    }
+    containSpace = containSpace || Array.from(links).some((link) => {
+      const value = link.querySelector('a').textContent;
+      return value.trim() !== value;
+    });
+    containSpace = containSpace || parts[parts.length - 1].trim() !== parts[parts.length - 1];
+    if (containSpace) {
+      if (!warningDiv) {
+        warningDiv = document.createElement('div');
+        warningDiv.classList.add('ui', 'warning', 'message', 'flash-message', 'flash-warning', 'space-related');
+        warningDiv.innerHTML = html`<p>File path contains leading or trailing whitespace.</p>`;
+        // Add display 'block' because display is set to 'none' in formantic\build\semantic.css
+        warningDiv.style.display = 'block';
+        const inputContainer = document.querySelector('.repo-editor-header');
+        inputContainer.insertAdjacentElement('beforebegin', warningDiv);
+      }
+      showElem(warningDiv);
+    } else if (warningDiv) {
+      hideElem(warningDiv);
+    }
+    joinTreePath();
+  });
+  filenameInput.addEventListener('keydown', function (e) {
+    const sections = queryElems(document, '.breadcrumb span.section');
+    const dividers = queryElems(document, '.breadcrumb .breadcrumb-divider');
+    // Jump back to last directory once the filename is empty
+    if (e.code === 'Backspace' && filenameInput.selectionStart === 0 && sections.length > 0) {
+      e.preventDefault();
+      const lastSection = sections[sections.length - 1];
+      const lastDivider = dividers.length ? dividers[dividers.length - 1] : null;
+      const value = lastSection.querySelector('a').textContent;
+      filenameInput.value = value + filenameInput.value;
+      this.setSelectionRange(value.length, value.length);
+      lastDivider?.remove();
+      lastSection.remove();
+      joinTreePath();
+    }
+  });
+
+  const elForm = document.querySelector<HTMLFormElement>('.repository.editor .edit.form');
+
+  // on the upload page, there is no editor(textarea)
+  const editArea = document.querySelector<HTMLTextAreaElement>('.page-content.repository.editor textarea#edit_area');
+  if (!editArea) return;
+
+  // Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
+  // to enable or disable the commit button
+  const commitButton = document.querySelector<HTMLButtonElement>('#commit-button');
+  const dirtyFileClass = 'dirty-file';
+
+  const syncCommitButtonState = () => {
+    const dirty = elForm.classList.contains(dirtyFileClass);
+    commitButton.disabled = !dirty;
+  };
+  // Registering a custom listener for the file path and the file content
+  // FIXME: it is not quite right here (old bug), it causes double-init, the global areYouSure "dirty" class will also be added
+  applyAreYouSure(elForm, {
+    silent: true,
+    dirtyClass: dirtyFileClass,
+    fieldSelector: ':input:not(.commit-form-wrapper :input)',
+    change: syncCommitButtonState,
+  });
+  syncCommitButtonState(); // disable the "commit" button when no content changes
+
+  initEditPreviewTab(elForm);
+
+  (async () => {
+    const editor = await createCodeEditor(editArea, filenameInput);
+
+    // Update the editor from query params, if available,
+    // only after the dirtyFileClass initialization
+    const params = new URLSearchParams(window.location.search);
+    const value = params.get('value');
+    if (value) {
+      editor.setValue(value);
+    }
+
+    commitButton.addEventListener('click', async (e) => {
+      // A modal which asks if an empty file should be committed
+      if (!editArea.value) {
+        e.preventDefault();
+        if (await confirmModal({
+          header: elForm.getAttribute('data-text-empty-confirm-header'),
+          content: elForm.getAttribute('data-text-empty-confirm-content'),
+        })) {
+          ignoreAreYouSure(elForm);
+          submitFormFetchAction(elForm);
+        }
+      }
+    });
+  })();
+}
+
+export function renderPreviewPanelContent(previewPanel: Element, htmlContent: string) {
+  // the content is from the server, so it is safe to use innerHTML
+  previewPanel.innerHTML = html`<div class="render-content markup">${htmlRaw(htmlContent)}</div>`;
+}

web_src/js/features/repo-findfile.test.ts

@@ -0,0 +1,34 @@
+import {strSubMatch, calcMatchedWeight, filterRepoFilesWeighted} from './repo-findfile.ts';
+
+describe('Repo Find Files', () => {
+  test('strSubMatch', () => {
+    expect(strSubMatch('abc', '')).toEqual(['abc']);
+    expect(strSubMatch('abc', 'a')).toEqual(['', 'a', 'bc']);
+    expect(strSubMatch('abc', 'b')).toEqual(['a', 'b', 'c']);
+    expect(strSubMatch('abc', 'c')).toEqual(['ab', 'c']);
+    expect(strSubMatch('abc', 'ac')).toEqual(['', 'a', 'b', 'c']);
+    expect(strSubMatch('abc', 'z')).toEqual(['abc']);
+    expect(strSubMatch('abc', 'az')).toEqual(['abc']);
+
+    expect(strSubMatch('ABc', 'ac')).toEqual(['', 'A', 'B', 'c']);
+    expect(strSubMatch('abC', 'ac')).toEqual(['', 'a', 'b', 'C']);
+
+    expect(strSubMatch('aabbcc', 'abc')).toEqual(['', 'a', 'a', 'b', 'b', 'c', 'c']);
+    expect(strSubMatch('the/directory', 'hedir')).toEqual(['t', 'he', '/', 'dir', 'ectory']);
+  });
+
+  test('calcMatchedWeight', () => {
+    expect(calcMatchedWeight(['a', 'b', 'c', 'd']) < calcMatchedWeight(['a', 'bc', 'c'])).toBeTruthy();
+  });
+
+  test('filterRepoFilesWeighted', () => {
+    // the first matched result should always be the "word.txt"
+    let res = filterRepoFilesWeighted(['word.txt', 'we-got-result.dat'], 'word');
+    expect(res).toHaveLength(2);
+    expect(res[0].matchResult).toEqual(['', 'word', '.txt']);
+
+    res = filterRepoFilesWeighted(['we-got-result.dat', 'word.txt'], 'word');
+    expect(res).toHaveLength(2);
+    expect(res[0].matchResult).toEqual(['', 'word', '.txt']);
+  });
+});

web_src/js/features/repo-findfile.ts

@@ -0,0 +1,120 @@
+import {svg} from '../svg.ts';
+import {toggleElem} from '../utils/dom.ts';
+import {pathEscapeSegments} from '../utils/url.ts';
+import {GET} from '../modules/fetch.ts';
+
+const threshold = 50;
+let files: Array<string> = [];
+let repoFindFileInput: HTMLInputElement;
+let repoFindFileTableBody: HTMLElement;
+let repoFindFileNoResult: HTMLElement;
+
+// return the case-insensitive sub-match result as an array:  [unmatched, matched, unmatched, matched, ...]
+// res[even] is unmatched, res[odd] is matched, see unit tests for examples
+// argument subLower must be a lower-cased string.
+export function strSubMatch(full: string, subLower: string) {
+  const res = [''];
+  let i = 0, j = 0;
+  const fullLower = full.toLowerCase();
+  while (i < subLower.length && j < fullLower.length) {
+    if (subLower[i] === fullLower[j]) {
+      if (res.length % 2 !== 0) res.push('');
+      res[res.length - 1] += full[j];
+      j++;
+      i++;
+    } else {
+      if (res.length % 2 === 0) res.push('');
+      res[res.length - 1] += full[j];
+      j++;
+    }
+  }
+  if (i !== subLower.length) {
+    // if the sub string doesn't match the full, only return the full as unmatched.
+    return [full];
+  }
+  if (j < full.length) {
+    // append remaining chars from full to result as unmatched
+    if (res.length % 2 === 0) res.push('');
+    res[res.length - 1] += full.substring(j);
+  }
+  return res;
+}
+
+export function calcMatchedWeight(matchResult: Array<any>) {
+  let weight = 0;
+  for (let i = 0; i < matchResult.length; i++) {
+    if (i % 2 === 1) { // matches are on odd indices, see strSubMatch
+      // use a function f(x+x) > f(x) + f(x) to make the longer matched string has higher weight.
+      weight += matchResult[i].length * matchResult[i].length;
+    }
+  }
+  return weight;
+}
+
+export function filterRepoFilesWeighted(files: Array<string>, filter: string) {
+  let filterResult = [];
+  if (filter) {
+    const filterLower = filter.toLowerCase();
+    // TODO: for large repo, this loop could be slow, maybe there could be one more limit:
+    // ... && filterResult.length < threshold * 20,  wait for more feedbacks
+    for (const file of files) {
+      const res = strSubMatch(file, filterLower);
+      if (res.length > 1) { // length==1 means unmatched, >1 means having matched sub strings
+        filterResult.push({matchResult: res, matchWeight: calcMatchedWeight(res)});
+      }
+    }
+    filterResult.sort((a, b) => b.matchWeight - a.matchWeight);
+    filterResult = filterResult.slice(0, threshold);
+  } else {
+    for (let i = 0; i < files.length && i < threshold; i++) {
+      filterResult.push({matchResult: [files[i]], matchWeight: 0});
+    }
+  }
+  return filterResult;
+}
+
+function filterRepoFiles(filter: string) {
+  const treeLink = repoFindFileInput.getAttribute('data-url-tree-link');
+  repoFindFileTableBody.innerHTML = '';
+
+  const filterResult = filterRepoFilesWeighted(files, filter);
+
+  toggleElem(repoFindFileNoResult, !filterResult.length);
+  for (const r of filterResult) {
+    const row = document.createElement('tr');
+    const cell = document.createElement('td');
+    const a = document.createElement('a');
+    a.setAttribute('href', `${treeLink}/${pathEscapeSegments(r.matchResult.join(''))}`);
+    a.innerHTML = svg('octicon-file', 16, 'tw-mr-2');
+    row.append(cell);
+    cell.append(a);
+    for (const [index, part] of r.matchResult.entries()) {
+      const span = document.createElement('span');
+      // safely escape by using textContent
+      span.textContent = part;
+      span.title = span.textContent;
+      // if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz']
+      // the matchResult[odd] is matched and highlighted to red.
+      if (index % 2 === 1) span.classList.add('ui', 'text', 'red');
+      a.append(span);
+    }
+    repoFindFileTableBody.append(row);
+  }
+}
+
+async function loadRepoFiles() {
+  const response = await GET(repoFindFileInput.getAttribute('data-url-data-link'));
+  files = await response.json();
+  filterRepoFiles(repoFindFileInput.value);
+}
+
+export function initFindFileInRepo() {
+  repoFindFileInput = document.querySelector('#repo-file-find-input');
+  if (!repoFindFileInput) return;
+
+  repoFindFileTableBody = document.querySelector('#repo-find-file-table tbody');
+  repoFindFileNoResult = document.querySelector('#repo-find-file-no-result');
+  repoFindFileInput.addEventListener('input', () => filterRepoFiles(repoFindFileInput.value));
+
+  loadRepoFiles();
+}

web_src/js/features/repo-graph.ts

@@ -0,0 +1,85 @@
+import {toggleElemClass} from '../utils/dom.ts';
+import {GET} from '../modules/fetch.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+
+export function initRepoGraphGit() {
+  const graphContainer = document.querySelector<HTMLElement>('#git-graph-container');
+  if (!graphContainer) return;
+
+  const elColorMonochrome = document.querySelector<HTMLElement>('#flow-color-monochrome');
+  const elColorColored = document.querySelector<HTMLElement>('#flow-color-colored');
+  const toggleColorMode = (mode: 'monochrome' | 'colored') => {
+    toggleElemClass(graphContainer, 'monochrome', mode === 'monochrome');
+    toggleElemClass(graphContainer, 'colored', mode === 'colored');
+
+    toggleElemClass(elColorMonochrome, 'active', mode === 'monochrome');
+    toggleElemClass(elColorColored, 'active', mode === 'colored');
+
+    const params = new URLSearchParams(window.location.search);
+    params.set('mode', mode);
+    window.history.replaceState(null, '', `?${params.toString()}`);
+    for (const link of document.querySelectorAll('#git-graph-body .pagination a')) {
+      const href = link.getAttribute('href');
+      if (!href) continue;
+      const url = new URL(href, window.location.href);
+      const params = url.searchParams;
+      params.set('mode', mode);
+      url.search = `?${params.toString()}`;
+      link.setAttribute('href', url.href);
+    }
+  };
+  elColorMonochrome.addEventListener('click', () => toggleColorMode('monochrome'));
+  elColorColored.addEventListener('click', () => toggleColorMode('colored'));
+
+  const elGraphBody = document.querySelector<HTMLElement>('#git-graph-body');
+  const url = new URL(window.location.href);
+  const params = url.searchParams;
+  const loadGitGraph = async () => {
+    const queryString = params.toString();
+    const ajaxUrl = new URL(url);
+    ajaxUrl.searchParams.set('div-only', 'true');
+    window.history.replaceState(null, '', queryString ? `?${queryString}` : window.location.pathname);
+
+    elGraphBody.classList.add('is-loading');
+    try {
+      const resp = await GET(ajaxUrl.toString());
+      elGraphBody.innerHTML = await resp.text();
+    } finally {
+      elGraphBody.classList.remove('is-loading');
+    }
+  };
+
+  const dropdownSelected = params.getAll('branch');
+  if (params.has('hide-pr-refs') && params.get('hide-pr-refs') === 'true') {
+    dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
+  }
+
+  const $dropdown = fomanticQuery('#flow-select-refs-dropdown');
+  $dropdown.dropdown({clearable: true});
+  $dropdown.dropdown('set selected', dropdownSelected);
+  // must add the callback after setting the selected items, otherwise each "selected" item will trigger the callback
+  $dropdown.dropdown('setting', {
+    onRemove(toRemove: string) {
+      if (toRemove === '...flow-hide-pr-refs') {
+        params.delete('hide-pr-refs');
+      } else {
+        const branches = params.getAll('branch');
+        params.delete('branch');
+        for (const branch of branches) {
+          if (branch !== toRemove) {
+            params.append('branch', branch);
+          }
+        }
+      }
+      loadGitGraph();
+    },
+    onAdd(toAdd: string) {
+      if (toAdd === '...flow-hide-pr-refs') {
+        params.set('hide-pr-refs', 'true');
+      } else {
+        params.append('branch', toAdd);
+      }
+      loadGitGraph();
+    },
+  });
+}

web_src/js/features/repo-home.ts

@@ -0,0 +1,148 @@
+import {stripTags} from '../utils.ts';
+import {hideElem, queryElemChildren, showElem, type DOMEvent} from '../utils/dom.ts';
+import {POST} from '../modules/fetch.ts';
+import {showErrorToast, type Toast} from '../modules/toast.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+
+const {appSubUrl} = window.config;
+
+export function initRepoTopicBar() {
+  const mgrBtn = document.querySelector<HTMLButtonElement>('#manage_topic');
+  if (!mgrBtn) return;
+
+  const editDiv = document.querySelector('#topic_edit');
+  const viewDiv = document.querySelector('#repo-topics');
+  const topicDropdown = editDiv.querySelector('.ui.dropdown');
+  let lastErrorToast: Toast;
+
+  mgrBtn.addEventListener('click', () => {
+    hideElem([viewDiv, mgrBtn]);
+    showElem(editDiv);
+    topicDropdown.querySelector<HTMLInputElement>('input.search').focus();
+  });
+
+  document.querySelector('#cancel_topic_edit').addEventListener('click', () => {
+    lastErrorToast?.hideToast();
+    hideElem(editDiv);
+    showElem([viewDiv, mgrBtn]);
+    mgrBtn.focus();
+  });
+
+  document.querySelector<HTMLButtonElement>('#save_topic').addEventListener('click', async (e: DOMEvent<MouseEvent, HTMLButtonElement>) => {
+    lastErrorToast?.hideToast();
+    const topics = editDiv.querySelector<HTMLInputElement>('input[name=topics]').value;
+
+    const data = new FormData();
+    data.append('topics', topics);
+
+    const response = await POST(e.target.getAttribute('data-link'), {data});
+
+    if (response.ok) {
+      const responseData = await response.json();
+      if (responseData.status === 'ok') {
+        queryElemChildren(viewDiv, '.repo-topic', (el) => el.remove());
+        if (topics.length) {
+          const topicArray = topics.split(',');
+          topicArray.sort();
+          for (const topic of topicArray) {
+            // TODO: sort items in topicDropdown, or items in edit div will have different order to the items in view div
+            // !!!! it SHOULD and MUST match the code in "home_sidebar_top.tmpl" !!!!
+            const link = document.createElement('a');
+            link.classList.add('repo-topic', 'ui', 'large', 'label', 'gt-ellipsis');
+            link.href = `${appSubUrl}/explore/repos?q=${encodeURIComponent(topic)}&topic=1`;
+            link.textContent = topic;
+            viewDiv.append(link);
+          }
+        }
+        hideElem(editDiv);
+        showElem([viewDiv, mgrBtn]);
+      }
+    } else if (response.status === 422) {
+      // how to test: input topic like " invalid topic " (with spaces), and select it from the list, then "Save"
+      const responseData = await response.json();
+      lastErrorToast = showErrorToast(responseData.message, {duration: 5000});
+      if (responseData.invalidTopics && responseData.invalidTopics.length > 0) {
+        const {invalidTopics} = responseData;
+        const topicLabels = queryElemChildren(topicDropdown, 'a.ui.label');
+        for (const [index, value] of topics.split(',').entries()) {
+          if (invalidTopics.includes(value)) {
+            topicLabels[index].classList.remove('green');
+            topicLabels[index].classList.add('red');
+          }
+        }
+      }
+    }
+  });
+
+  fomanticQuery(topicDropdown).dropdown({
+    allowAdditions: true,
+    forceSelection: false,
+    fullTextSearch: 'exact',
+    fields: {name: 'description', value: 'data-value'},
+    saveRemoteData: false,
+    label: {
+      transition: 'horizontal flip',
+      duration: 200,
+      variation: false,
+    },
+    apiSettings: {
+      url: `${appSubUrl}/explore/topics/search?q={query}`,
+      throttle: 500,
+      cache: false,
+      onResponse(this: any, res: any) {
+        const formattedResponse = {
+          success: false,
+          results: [] as Array<Record<string, any>>,
+        };
+        const query = stripTags(this.urlData.query.trim());
+        let found_query = false;
+        const current_topics = [];
+        for (const el of queryElemChildren(topicDropdown, 'a.ui.label.visible')) {
+          current_topics.push(el.getAttribute('data-value'));
+        }
+
+        if (res.topics) {
+          let found = false;
+          for (const {topic_name} of res.topics) {
+            // skip currently added tags
+            if (current_topics.includes(topic_name)) {
+              continue;
+            }
+
+            if (topic_name.toLowerCase() === query.toLowerCase()) {
+              found_query = true;
+            }
+            formattedResponse.results.push({description: topic_name, 'data-value': topic_name});
+            found = true;
+          }
+          formattedResponse.success = found;
+        }
+
+        if (query.length > 0 && !found_query) {
+          formattedResponse.success = true;
+          formattedResponse.results.unshift({description: query, 'data-value': query});
+        } else if (query.length > 0 && found_query) {
+          formattedResponse.results.sort((a, b) => {
+            if (a.description.toLowerCase() === query.toLowerCase()) return -1;
+            if (b.description.toLowerCase() === query.toLowerCase()) return 1;
+            if (a.description > b.description) return -1;
+            if (a.description < b.description) return 1;
+            return 0;
+          });
+        }
+
+        return formattedResponse;
+      },
+    },
+    onLabelCreate(value: string) {
+      value = value.toLowerCase().trim();
+      this.attr('data-value', value).contents().first().replaceWith(value);
+      return fomanticQuery(this);
+    },
+    onAdd(addedValue: string, _addedText: any, $addedChoice: any) {
+      addedValue = addedValue.toLowerCase().trim();
+      $addedChoice[0].setAttribute('data-value', addedValue);
+      $addedChoice[0].setAttribute('data-text', addedValue);
+    },
+  });
+}

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

@@ -0,0 +1,156 @@
+import {svg} from '../svg.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {GET, POST} from '../modules/fetch.ts';
+import {createElementFromHTML, showElem} from '../utils/dom.ts';
+import {parseIssuePageInfo} from '../utils.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+
+let i18nTextEdited: string;
+let i18nTextOptions: string;
+let i18nTextDeleteFromHistory: string;
+let i18nTextDeleteFromHistoryConfirm: string;
+
+function showContentHistoryDetail(issueBaseUrl: string, commentId: string, historyId: string, itemTitleHtml: string) {
+  const elDetailDialog = createElementFromHTML(`
+<div class="ui modal content-history-detail-dialog">
+  ${svg('octicon-x', 16, 'close icon inside')}
+  <div class="header tw-flex tw-items-center tw-justify-between">
+    <div>${itemTitleHtml}</div>
+    <div class="ui dropdown dialog-header-options tw-mr-8 tw-hidden">
+      ${i18nTextOptions}
+      ${svg('octicon-triangle-down', 14, 'dropdown icon')}
+      <div class="menu">
+        <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
+      </div>
+    </div>
+  </div>
+  <div class="comment-diff-data is-loading"></div>
+</div>`);
+  document.body.append(elDetailDialog);
+  const elOptionsDropdown = elDetailDialog.querySelector('.ui.dropdown.dialog-header-options');
+  const $fomanticDialog = fomanticQuery(elDetailDialog);
+  const $fomanticDropdownOptions = fomanticQuery(elOptionsDropdown);
+  $fomanticDropdownOptions.dropdown({
+    showOnFocus: false,
+    allowReselection: true,
+    async onChange(_value: string, _text: string, $item: any) {
+      const optionItem = $item.data('option-item');
+      if (optionItem === 'delete') {
+        if (window.confirm(i18nTextDeleteFromHistoryConfirm)) {
+          try {
+            const params = new URLSearchParams();
+            params.append('comment_id', commentId);
+            params.append('history_id', historyId);
+
+            const response = await POST(`${issueBaseUrl}/content-history/soft-delete?${params.toString()}`);
+            const resp = await response.json();
+
+            if (resp.ok) {
+              $fomanticDialog.modal('hide');
+            } else {
+              showErrorToast(resp.message);
+            }
+          } catch (error) {
+            console.error('Error:', error);
+            showErrorToast('An error occurred while deleting the history.');
+          }
+        }
+      } else { // required by eslint
+        showErrorToast(`unknown option item: ${optionItem}`);
+      }
+    },
+    onHide() {
+      $fomanticDropdownOptions.dropdown('clear', true);
+    },
+  });
+  $fomanticDialog.modal({
+    async onShow() {
+      try {
+        const params = new URLSearchParams();
+        params.append('comment_id', commentId);
+        params.append('history_id', historyId);
+
+        const url = `${issueBaseUrl}/content-history/detail?${params.toString()}`;
+        const response = await GET(url);
+        const resp = await response.json();
+
+        const commentDiffData = elDetailDialog.querySelector('.comment-diff-data');
+        commentDiffData.classList.remove('is-loading');
+        commentDiffData.innerHTML = resp.diffHtml;
+        // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
+        if (resp.canSoftDelete) {
+          showElem(elOptionsDropdown);
+        }
+      } catch (error) {
+        console.error('Error:', error);
+      }
+    },
+    onHidden() {
+      $fomanticDialog.remove();
+    },
+  }).modal('show');
+}
+
+function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {
+  const elHeaderLeft = elCommentItem.querySelector('.comment-header-left');
+  const menuHtml = `
+  <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
+    &bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
+    <div class="menu">
+    </div>
+  </div>`;
+
+  elHeaderLeft.querySelector(`.ui.dropdown.content-history-menu`)?.remove(); // remove the old one if exists
+  elHeaderLeft.append(createElementFromHTML(menuHtml));
+
+  const elDropdown = elHeaderLeft.querySelector('.ui.dropdown.content-history-menu');
+  const $fomanticDropdown = fomanticQuery(elDropdown);
+  $fomanticDropdown.dropdown({
+    action: 'hide',
+    apiSettings: {
+      cache: false,
+      url: `${issueBaseUrl}/content-history/list?comment_id=${commentId}`,
+    },
+    saveRemoteData: false,
+    onHide() {
+      $fomanticDropdown.dropdown('change values', null);
+    },
+    onChange(value: string, itemHtml: string, $item: any) {
+      if (value && !$item.find('[data-history-is-deleted=1]').length) {
+        showContentHistoryDetail(issueBaseUrl, commentId, value, itemHtml);
+      }
+    },
+  });
+}
+
+export async function initRepoIssueContentHistory() {
+  const issuePageInfo = parseIssuePageInfo();
+  if (!issuePageInfo.issueNumber) return;
+
+  const elIssueDescription = document.querySelector('.repository.issue .timeline-item.comment.first'); // issue(PR) main content
+  const elComments = document.querySelectorAll('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
+  if (!elIssueDescription && !elComments.length) return;
+
+  const issueBaseUrl = `${issuePageInfo.repoLink}/issues/${issuePageInfo.issueNumber}`;
+
+  try {
+    const response = await GET(`${issueBaseUrl}/content-history/overview`);
+    const resp = await response.json();
+
+    i18nTextEdited = resp.i18n.textEdited;
+    i18nTextDeleteFromHistory = resp.i18n.textDeleteFromHistory;
+    i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm;
+    i18nTextOptions = resp.i18n.textOptions;
+
+    if (resp.editedHistoryCountMap[0] && elIssueDescription) {
+      showContentHistoryMenu(issueBaseUrl, elIssueDescription, '0');
+    }
+    for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) {
+      if (commentId === '0') continue;
+      const elIssueComment = document.querySelector(`#issuecomment-${commentId}`);
+      if (elIssueComment) showContentHistoryMenu(issueBaseUrl, elIssueComment, commentId);
+    }
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}

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

@@ -0,0 +1,159 @@
+import {handleReply} from './repo-issue.ts';
+import {getComboMarkdownEditor, initComboMarkdownEditor, ComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
+import {POST} from '../modules/fetch.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {hideElem, querySingleVisibleElem, showElem, type DOMEvent} from '../utils/dom.ts';
+import {triggerUploadStateChanged} from './comp/EditorUpload.ts';
+import {convertHtmlToMarkdown} from '../markup/html2markdown.ts';
+import {applyAreYouSure, reinitializeAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+
+async function tryOnEditContent(e: DOMEvent<MouseEvent>) {
+  const clickTarget = e.target.closest('.edit-content');
+  if (!clickTarget) return;
+
+  e.preventDefault();
+  const commentContent = clickTarget.closest('.comment-header').nextElementSibling;
+  const editContentZone = commentContent.querySelector('.edit-content-zone');
+  let renderContent = commentContent.querySelector('.render-content');
+  const rawContent = commentContent.querySelector('.raw-content');
+
+  let comboMarkdownEditor : ComboMarkdownEditor;
+
+  const cancelAndReset = (e: Event) => {
+    e.preventDefault();
+    showElem(renderContent);
+    hideElem(editContentZone);
+    comboMarkdownEditor.dropzoneReloadFiles();
+  };
+
+  const saveAndRefresh = async (e: Event) => {
+    e.preventDefault();
+    // we are already in a form, do not bubble up to the document otherwise there will be other "form submit handlers"
+    // at the moment, the form submit event conflicts with initRepoDiffConversationForm (global '.conversation-holder form' event handler)
+    e.stopPropagation();
+    renderContent.classList.add('is-loading');
+    showElem(renderContent);
+    hideElem(editContentZone);
+    try {
+      const params = new URLSearchParams({
+        content: comboMarkdownEditor.value(),
+        context: editContentZone.getAttribute('data-context'),
+        content_version: editContentZone.getAttribute('data-content-version'),
+      });
+      for (const file of comboMarkdownEditor.dropzoneGetFiles() ?? []) {
+        params.append('files[]', file);
+      }
+
+      const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params});
+      const data = await response.json();
+      if (!response.ok) {
+        showErrorToast(data?.errorMessage ?? window.config.i18n.error_occurred);
+        return;
+      }
+
+      reinitializeAreYouSure(editContentZone.querySelector('form')); // the form is no longer dirty
+      editContentZone.setAttribute('data-content-version', data.contentVersion);
+
+      // replace the render content with new one, to trigger re-initialization of all features
+      const newRenderContent = renderContent.cloneNode(false) as HTMLElement;
+      newRenderContent.innerHTML = data.content;
+      renderContent.replaceWith(newRenderContent);
+      renderContent = newRenderContent;
+
+      rawContent.textContent = comboMarkdownEditor.value();
+
+      if (!commentContent.querySelector('.dropzone-attachments')) {
+        if (data.attachments !== '') {
+          commentContent.insertAdjacentHTML('beforeend', data.attachments);
+        }
+      } else if (data.attachments === '') {
+        commentContent.querySelector('.dropzone-attachments').remove();
+      } else {
+        commentContent.querySelector('.dropzone-attachments').outerHTML = data.attachments;
+      }
+      comboMarkdownEditor.dropzoneSubmitReload();
+    } catch (error) {
+      showErrorToast(`Failed to save the content: ${error}`);
+      console.error(error);
+    } finally {
+      renderContent.classList.remove('is-loading');
+    }
+  };
+
+  // Show write/preview tab and copy raw content as needed
+  showElem(editContentZone);
+  hideElem(renderContent);
+
+  comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
+  if (!comboMarkdownEditor) {
+    editContentZone.innerHTML = document.querySelector('#issue-comment-editor-template').innerHTML;
+    const form = editContentZone.querySelector('form');
+    applyAreYouSure(form);
+    const saveButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.primary.button');
+    const cancelButton = querySingleVisibleElem<HTMLButtonElement>(editContentZone, '.ui.cancel.button');
+    comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
+    const syncUiState = () => saveButton.disabled = comboMarkdownEditor.isUploading();
+    comboMarkdownEditor.container.addEventListener(ComboMarkdownEditor.EventUploadStateChanged, syncUiState);
+    cancelButton.addEventListener('click', cancelAndReset);
+    form.addEventListener('submit', saveAndRefresh);
+  }
+
+  // FIXME: ideally here should reload content and attachment list from backend for existing editor, to avoid losing data
+  if (!comboMarkdownEditor.value()) {
+    comboMarkdownEditor.value(rawContent.textContent);
+  }
+  comboMarkdownEditor.switchTabToEditor();
+  comboMarkdownEditor.focus();
+  triggerUploadStateChanged(comboMarkdownEditor.container);
+}
+
+function extractSelectedMarkdown(container: HTMLElement) {
+  const selection = window.getSelection();
+  if (!selection.rangeCount) return '';
+  const range = selection.getRangeAt(0);
+  if (!container.contains(range.commonAncestorContainer)) return '';
+
+  // todo: if commonAncestorContainer parent has "[data-markdown-original-content]" attribute, use the parent's markdown content
+  // otherwise, use the selected HTML content and respect all "[data-markdown-original-content]/[data-markdown-generated-content]" attributes
+  const contents = selection.getRangeAt(0).cloneContents();
+  const el = document.createElement('div');
+  el.append(contents);
+  return convertHtmlToMarkdown(el);
+}
+
+async function tryOnQuoteReply(e: Event) {
+  const clickTarget = (e.target as HTMLElement).closest('.quote-reply');
+  if (!clickTarget) return;
+
+  e.preventDefault();
+  const contentToQuoteId = clickTarget.getAttribute('data-target');
+  const targetRawToQuote = document.querySelector<HTMLElement>(`#${contentToQuoteId}.raw-content`);
+  const targetMarkupToQuote = targetRawToQuote.parentElement.querySelector<HTMLElement>('.render-content.markup');
+  let contentToQuote = extractSelectedMarkdown(targetMarkupToQuote);
+  if (!contentToQuote) contentToQuote = targetRawToQuote.textContent;
+  const quotedContent = `${contentToQuote.replace(/^/mg, '> ')}\n\n`;
+
+  let editor;
+  if (clickTarget.classList.contains('quote-reply-diff')) {
+    const replyBtn = clickTarget.closest('.comment-code-cloud').querySelector<HTMLElement>('button.comment-form-reply');
+    editor = await handleReply(replyBtn);
+  } else {
+    // for normal issue/comment page
+    editor = getComboMarkdownEditor(document.querySelector('#comment-form .combo-markdown-editor'));
+  }
+
+  if (editor.value()) {
+    editor.value(`${editor.value()}\n\n${quotedContent}`);
+  } else {
+    editor.value(quotedContent);
+  }
+  editor.focus();
+  editor.moveCursorToEnd();
+}
+
+export function initRepoIssueCommentEdit() {
+  document.addEventListener('click', (e) => {
+    tryOnEditContent(e); // Edit issue or comment content
+    tryOnQuoteReply(e); // Quote reply to the comment editor
+  });
+}

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

@@ -0,0 +1,235 @@
+import {updateIssuesMeta} from './repo-common.ts';
+import {toggleElem, queryElems, isElemVisible} from '../utils/dom.ts';
+import {html} from '../utils/html.ts';
+import {confirmModal} from './comp/ConfirmModal.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {createSortable} from '../modules/sortable.ts';
+import {DELETE, POST} from '../modules/fetch.ts';
+import {parseDom} from '../utils.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import type {SortableEvent} from 'sortablejs';
+
+function initRepoIssueListCheckboxes() {
+  const issueSelectAll = document.querySelector<HTMLInputElement>('.issue-checkbox-all');
+  if (!issueSelectAll) return; // logged out state
+  const issueCheckboxes = document.querySelectorAll<HTMLInputElement>('.issue-checkbox');
+
+  const syncIssueSelectionState = () => {
+    const checkedCheckboxes = Array.from(issueCheckboxes).filter((el) => el.checked);
+    const anyChecked = Boolean(checkedCheckboxes.length);
+    const allChecked = anyChecked && checkedCheckboxes.length === issueCheckboxes.length;
+
+    if (allChecked) {
+      issueSelectAll.checked = true;
+      issueSelectAll.indeterminate = false;
+    } else if (anyChecked) {
+      issueSelectAll.checked = false;
+      issueSelectAll.indeterminate = true;
+    } else {
+      issueSelectAll.checked = false;
+      issueSelectAll.indeterminate = false;
+    }
+    // if any issue is selected, show the action panel, otherwise show the filter panel
+    toggleElem('#issue-filters', !anyChecked);
+    toggleElem('#issue-actions', anyChecked);
+    // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
+    const panels = document.querySelectorAll<HTMLElement>('#issue-filters, #issue-actions');
+    const visiblePanel = Array.from(panels).find((el) => isElemVisible(el));
+    const toolbarLeft = visiblePanel.querySelector('.issue-list-toolbar-left');
+    toolbarLeft.prepend(issueSelectAll);
+  };
+
+  for (const el of issueCheckboxes) {
+    el.addEventListener('change', syncIssueSelectionState);
+  }
+
+  issueSelectAll.addEventListener('change', () => {
+    for (const el of issueCheckboxes) {
+      el.checked = issueSelectAll.checked;
+    }
+    syncIssueSelectionState();
+  });
+
+  queryElems(document, '.issue-action', (el) => el.addEventListener('click',
+    async (e: MouseEvent) => {
+      e.preventDefault();
+
+      const url = el.getAttribute('data-url');
+      let action = el.getAttribute('data-action');
+      let elementId = el.getAttribute('data-element-id');
+      const issueIDList: string[] = [];
+      for (const el of document.querySelectorAll('.issue-checkbox:checked')) {
+        issueIDList.push(el.getAttribute('data-issue-id'));
+      }
+      const issueIDs = issueIDList.join(',');
+      if (!issueIDs) return;
+
+      // for assignee
+      if (elementId === '0' && url.endsWith('/assignee')) {
+        elementId = '';
+        action = 'clear';
+      }
+
+      // for toggle
+      if (action === 'toggle' && e.altKey) {
+        action = 'toggle-alt';
+      }
+
+      // for delete
+      if (action === 'delete') {
+        const confirmText = el.getAttribute('data-action-delete-confirm');
+        if (!await confirmModal({content: confirmText, confirmButtonColor: 'red'})) {
+          return;
+        }
+      }
+
+      try {
+        await updateIssuesMeta(url, action, issueIDs, elementId);
+        window.location.reload();
+      } catch (err) {
+        showErrorToast(err.responseJSON?.error ?? err.message);
+      }
+    },
+  ));
+}
+
+function initDropdownUserRemoteSearch(el: Element) {
+  let searchUrl = el.getAttribute('data-search-url');
+  const actionJumpUrl = el.getAttribute('data-action-jump-url');
+  let selectedUsername = el.getAttribute('data-selected-username') || '';
+  const $searchDropdown = fomanticQuery(el);
+  const elMenu = el.querySelector('.menu');
+  const elSearchInput = el.querySelector<HTMLInputElement>('.ui.search input');
+  const elItemFromInput = el.querySelector('.menu > .item-from-input');
+
+  $searchDropdown.dropdown('setting', {
+    fullTextSearch: true,
+    selectOnKeydown: false,
+    action: (_text: string, value: string) => {
+      window.location.href = actionJumpUrl.replace('{username}', encodeURIComponent(value));
+    },
+  });
+
+  const selectUsername = (username: string) => {
+    queryElems(elMenu, '.item.active, .item.selected', (el) => el.classList.remove('active', 'selected'));
+    elMenu.querySelector(`.item[data-value="${CSS.escape(username)}"]`)?.classList.add('selected');
+  };
+
+  type ProcessedResult = {value: string, name: string};
+  const processedResults: ProcessedResult[] = []; // to be used by dropdown to generate menu items
+  const syncItemFromInput = () => {
+    const inputVal = elSearchInput.value.trim();
+    elItemFromInput.setAttribute('data-value', inputVal);
+    elItemFromInput.textContent = inputVal;
+    const showItemFromInput = !processedResults.length && inputVal !== '';
+    toggleElem(elItemFromInput, showItemFromInput);
+    selectUsername(showItemFromInput ? inputVal : selectedUsername);
+  };
+
+  elSearchInput.value = selectedUsername;
+  if (!searchUrl) {
+    elSearchInput.addEventListener('input', syncItemFromInput);
+  } else {
+    if (!searchUrl.includes('?')) searchUrl += '?';
+    $searchDropdown.dropdown('setting', 'apiSettings', {
+      cache: false,
+      url: `${searchUrl}&q={query}`,
+      onResponse(resp: any) {
+        // the content is provided by backend IssuePosters handler
+        processedResults.length = 0;
+        for (const item of resp.results) {
+          let nameHtml = html`<img class="ui avatar tw-align-middle" src="${item.avatar_link}" aria-hidden="true" alt width="20" height="20"><span class="gt-ellipsis">${item.username}</span>`;
+          if (item.full_name) nameHtml += html`<span class="search-fullname tw-ml-2">${item.full_name}</span>`;
+          if (selectedUsername.toLowerCase() === item.username.toLowerCase()) selectedUsername = item.username;
+          processedResults.push({value: item.username, name: nameHtml});
+        }
+        resp.results = processedResults;
+        return resp;
+      },
+    });
+    $searchDropdown.dropdown('setting', 'onShow', () => $searchDropdown.dropdown('filter', ' ')); // trigger a search on first show
+  }
+
+  // we want to generate the dropdown menu items by ourselves, replace its internal setup functions
+  const dropdownSetup = {...$searchDropdown.dropdown('internal', 'setup')};
+  const dropdownTemplates = $searchDropdown.dropdown('setting', 'templates');
+  $searchDropdown.dropdown('internal', 'setup', dropdownSetup);
+  dropdownSetup.menu = function (values: any) {
+    // remove old dynamic items
+    for (const el of elMenu.querySelectorAll(':scope > .dynamic-item')) {
+      el.remove();
+    }
+
+    const newMenuHtml = dropdownTemplates.menu(values, $searchDropdown.dropdown('setting', 'fields'), true /* html */, $searchDropdown.dropdown('setting', 'className'));
+    if (newMenuHtml) {
+      const newMenuItems = parseDom(newMenuHtml, 'text/html').querySelectorAll('body > div');
+      for (const newMenuItem of newMenuItems) {
+        newMenuItem.classList.add('dynamic-item');
+      }
+      const div = document.createElement('div');
+      div.classList.add('divider', 'dynamic-item');
+      elMenu.append(div, ...newMenuItems);
+    }
+    $searchDropdown.dropdown('refresh');
+    // defer our selection to the next tick, because dropdown will set the selection item after this `menu` function
+    setTimeout(() => syncItemFromInput(), 0);
+  };
+}
+
+function initPinRemoveButton() {
+  for (const button of document.querySelectorAll('.issue-card-unpin')) {
+    button.addEventListener('click', async (event) => {
+      const el = event.currentTarget as HTMLElement;
+      const id = Number(el.getAttribute('data-issue-id'));
+
+      // Send the unpin request
+      const response = await DELETE(el.getAttribute('data-unpin-url'));
+      if (response.ok) {
+        // Delete the tooltip
+        el._tippy.destroy();
+        // Remove the Card
+        el.closest(`div.issue-card[data-issue-id="${id}"]`).remove();
+      }
+    });
+  }
+}
+
+async function pinMoveEnd(e: SortableEvent) {
+  const url = e.item.getAttribute('data-move-url');
+  const id = Number(e.item.getAttribute('data-issue-id'));
+  await POST(url, {data: {id, position: e.newIndex + 1}});
+}
+
+async function initIssuePinSort() {
+  const pinDiv = document.querySelector('#issue-pins');
+
+  if (pinDiv === null) return;
+
+  // If the User is not a Repo Admin, we don't need to proceed
+  if (!pinDiv.hasAttribute('data-is-repo-admin')) return;
+
+  initPinRemoveButton();
+
+  // If only one issue pinned, we don't need to make this Sortable
+  if (pinDiv.children.length < 2) return;
+
+  createSortable(pinDiv, {
+    group: 'shared',
+    onEnd: (e) => {
+      (async () => {
+        await pinMoveEnd(e);
+      })();
+    },
+  });
+}
+
+export function initRepoIssueList() {
+  if (document.querySelector('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list')) {
+    initRepoIssueListCheckboxes();
+    queryElems(document, '.ui.dropdown.user-remote-search', (el) => initDropdownUserRemoteSearch(el));
+    initIssuePinSort();
+  } else if (document.querySelector('.page-content.dashboard.issues')) {
+    // user or org home: issue list, pull request list
+    queryElems(document, '.ui.dropdown.user-remote-search', (el) => initDropdownUserRemoteSearch(el));
+  }
+}

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

@@ -0,0 +1,133 @@
+import {createApp} from 'vue';
+import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
+import {GET, POST} from '../modules/fetch.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {createElementFromHTML} from '../utils/dom.ts';
+
+function initRepoPullRequestUpdate(el: HTMLElement) {
+  const prUpdateButtonContainer = el.querySelector('#update-pr-branch-with-base');
+  if (!prUpdateButtonContainer) return;
+
+  const prUpdateButton = prUpdateButtonContainer.querySelector<HTMLButtonElement>(':scope > button');
+  const prUpdateDropdown = prUpdateButtonContainer.querySelector(':scope > .ui.dropdown');
+  prUpdateButton.addEventListener('click', async function (e) {
+    e.preventDefault();
+    const redirect = this.getAttribute('data-redirect');
+    this.classList.add('is-loading');
+    let response: Response;
+    try {
+      response = await POST(this.getAttribute('data-do'));
+    } catch (error) {
+      console.error(error);
+    } finally {
+      this.classList.remove('is-loading');
+    }
+    let data: Record<string, any>;
+    try {
+      data = await response?.json(); // the response is probably not a JSON
+    } catch (error) {
+      console.error(error);
+    }
+    if (data?.redirect) {
+      window.location.href = data.redirect;
+    } else if (redirect) {
+      window.location.href = redirect;
+    } else {
+      window.location.reload();
+    }
+  });
+
+  fomanticQuery(prUpdateDropdown).dropdown({
+    onChange(_text: string, _value: string, $choice: any) {
+      const choiceEl = $choice[0];
+      const url = choiceEl.getAttribute('data-do');
+      if (url) {
+        const buttonText = prUpdateButton.querySelector('.button-text');
+        if (buttonText) {
+          buttonText.textContent = choiceEl.textContent;
+        }
+        prUpdateButton.setAttribute('data-do', url);
+      }
+    },
+  });
+}
+
+function initRepoPullRequestCommitStatus(el: HTMLElement) {
+  for (const btn of el.querySelectorAll('.commit-status-hide-checks')) {
+    const panel = btn.closest('.commit-status-panel');
+    const list = panel.querySelector<HTMLElement>('.commit-status-list');
+    btn.addEventListener('click', () => {
+      list.style.maxHeight = list.style.maxHeight ? '' : '0px'; // toggle
+      btn.textContent = btn.getAttribute(list.style.maxHeight ? 'data-show-all' : 'data-hide-all');
+    });
+  }
+}
+
+function initRepoPullRequestMergeForm(box: HTMLElement) {
+  const el = box.querySelector('#pull-request-merge-form');
+  if (!el) return;
+
+  const view = createApp(PullRequestMergeForm);
+  view.mount(el);
+}
+
+function executeScripts(elem: HTMLElement) {
+  for (const oldScript of elem.querySelectorAll('script')) {
+    // TODO: that's the only way to load the data for the merge form. In the future
+    //  we need to completely decouple the page data and embedded script
+    // eslint-disable-next-line github/no-dynamic-script-tag
+    const newScript = document.createElement('script');
+    for (const attr of oldScript.attributes) {
+      if (attr.name === 'type' && attr.value === 'module') continue;
+      newScript.setAttribute(attr.name, attr.value);
+    }
+    newScript.text = oldScript.text;
+    document.body.append(newScript);
+  }
+}
+
+export function initRepoPullMergeBox(el: HTMLElement) {
+  initRepoPullRequestCommitStatus(el);
+  initRepoPullRequestUpdate(el);
+  initRepoPullRequestMergeForm(el);
+
+  const reloadingIntervalValue = el.getAttribute('data-pull-merge-box-reloading-interval');
+  if (!reloadingIntervalValue) return;
+
+  const reloadingInterval = parseInt(reloadingIntervalValue);
+  const pullLink = el.getAttribute('data-pull-link');
+  let timerId: number;
+
+  let reloadMergeBox: () => Promise<void>;
+  const stopReloading = () => {
+    if (!timerId) return;
+    clearTimeout(timerId);
+    timerId = null;
+  };
+  const startReloading = () => {
+    if (timerId) return;
+    setTimeout(reloadMergeBox, reloadingInterval);
+  };
+  const onVisibilityChange = () => {
+    if (document.hidden) {
+      stopReloading();
+    } else {
+      startReloading();
+    }
+  };
+  reloadMergeBox = async () => {
+    const resp = await GET(`${pullLink}/merge_box`);
+    stopReloading();
+    if (!resp.ok) {
+      startReloading();
+      return;
+    }
+    document.removeEventListener('visibilitychange', onVisibilityChange);
+    const newElem = createElementFromHTML(await resp.text());
+    executeScripts(newElem);
+    el.replaceWith(newElem);
+  };
+
+  document.addEventListener('visibilitychange', onVisibilityChange);
+  startReloading();
+}

web_src/js/features/repo-issue-sidebar-combolist.ts

@@ -0,0 +1,156 @@
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {POST} from '../modules/fetch.ts';
+import {addDelegatedEventListener, queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
+
+// if there are draft comments, confirm before reloading, to avoid losing comments
+function issueSidebarReloadConfirmDraftComment() {
+  const commentTextareas = [
+    document.querySelector<HTMLTextAreaElement>('.edit-content-zone:not(.tw-hidden) textarea'),
+    document.querySelector<HTMLTextAreaElement>('#comment-form textarea'),
+  ];
+  for (const textarea of commentTextareas) {
+    // Most users won't feel too sad if they lose a comment with 10 chars, they can re-type these in seconds.
+    // But if they have typed more (like 50) chars and the comment is lost, they will be very unhappy.
+    if (textarea && textarea.value.trim().length > 10) {
+      textarea.parentElement.scrollIntoView();
+      if (!window.confirm('Page will be reloaded, but there are draft comments. Continuing to reload will discard the comments. Continue?')) {
+        return;
+      }
+      break;
+    }
+  }
+  window.location.reload();
+}
+
+export class IssueSidebarComboList {
+  updateUrl: string;
+  updateAlgo: string;
+  selectionMode: string;
+  elDropdown: HTMLElement;
+  elList: HTMLElement;
+  elComboValue: HTMLInputElement;
+  initialValues: string[];
+  container: HTMLElement;
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+    this.updateUrl = container.getAttribute('data-update-url');
+    this.updateAlgo = container.getAttribute('data-update-algo');
+    this.selectionMode = container.getAttribute('data-selection-mode');
+    if (!['single', 'multiple'].includes(this.selectionMode)) throw new Error(`Invalid data-update-on: ${this.selectionMode}`);
+    if (!['diff', 'all'].includes(this.updateAlgo)) throw new Error(`Invalid data-update-algo: ${this.updateAlgo}`);
+    this.elDropdown = container.querySelector<HTMLElement>(':scope > .ui.dropdown');
+    this.elList = container.querySelector<HTMLElement>(':scope > .ui.list');
+    this.elComboValue = container.querySelector<HTMLInputElement>(':scope > .combo-value');
+  }
+
+  collectCheckedValues() {
+    return Array.from(this.elDropdown.querySelectorAll('.menu > .item.checked'), (el) => el.getAttribute('data-value'));
+  }
+
+  updateUiList(changedValues: Array<string>) {
+    const elEmptyTip = this.elList.querySelector('.item.empty-list');
+    queryElemChildren(this.elList, '.item:not(.empty-list)', (el) => el.remove());
+    for (const value of changedValues) {
+      const el = this.elDropdown.querySelector<HTMLElement>(`.menu > .item[data-value="${CSS.escape(value)}"]`);
+      if (!el) continue;
+      const listItem = el.cloneNode(true) as HTMLElement;
+      queryElems(listItem, '.item-check-mark, .item-secondary-info', (el) => el.remove());
+      this.elList.append(listItem);
+    }
+    const hasItems = Boolean(this.elList.querySelector('.item:not(.empty-list)'));
+    toggleElem(elEmptyTip, !hasItems);
+  }
+
+  async updateToBackend(changedValues: Array<string>) {
+    if (this.updateAlgo === 'diff') {
+      for (const value of this.initialValues) {
+        if (!changedValues.includes(value)) {
+          await POST(this.updateUrl, {data: new URLSearchParams({action: 'detach', id: value})});
+        }
+      }
+      for (const value of changedValues) {
+        if (!this.initialValues.includes(value)) {
+          await POST(this.updateUrl, {data: new URLSearchParams({action: 'attach', id: value})});
+        }
+      }
+    } else {
+      await POST(this.updateUrl, {data: new URLSearchParams({id: changedValues.join(',')})});
+    }
+    issueSidebarReloadConfirmDraftComment();
+  }
+
+  async doUpdate() {
+    const changedValues = this.collectCheckedValues();
+    if (this.initialValues.join(',') === changedValues.join(',')) return;
+    this.updateUiList(changedValues);
+    if (this.updateUrl) await this.updateToBackend(changedValues);
+    this.initialValues = changedValues;
+  }
+
+  async onChange() {
+    if (this.selectionMode === 'single') {
+      await this.doUpdate();
+      fomanticQuery(this.elDropdown).dropdown('hide');
+    }
+  }
+
+  async onItemClick(elItem: HTMLElement, e: Event) {
+    e.preventDefault();
+    if (elItem.hasAttribute('data-can-change') && elItem.getAttribute('data-can-change') !== 'true') return;
+
+    if (elItem.matches('.clear-selection')) {
+      queryElems(this.elDropdown, '.menu > .item', (el) => el.classList.remove('checked'));
+      this.elComboValue.value = '';
+      this.onChange();
+      return;
+    }
+
+    const scope = elItem.getAttribute('data-scope');
+    if (scope) {
+      // scoped items could only be checked one at a time
+      const elSelected = this.elDropdown.querySelector<HTMLElement>(`.menu > .item.checked[data-scope="${CSS.escape(scope)}"]`);
+      if (elSelected === elItem) {
+        elItem.classList.toggle('checked');
+      } else {
+        queryElems(this.elDropdown, `.menu > .item[data-scope="${CSS.escape(scope)}"]`, (el) => el.classList.remove('checked'));
+        elItem.classList.toggle('checked', true);
+      }
+    } else {
+      if (this.selectionMode === 'multiple') {
+        elItem.classList.toggle('checked');
+      } else {
+        queryElems(this.elDropdown, `.menu > .item.checked`, (el) => el.classList.remove('checked'));
+        elItem.classList.toggle('checked', true);
+      }
+    }
+    this.elComboValue.value = this.collectCheckedValues().join(',');
+    this.onChange();
+  }
+
+  async onHide() {
+    if (this.selectionMode === 'multiple') this.doUpdate();
+  }
+
+  init() {
+    // init the checked items from initial value
+    if (this.elComboValue.value && this.elComboValue.value !== '0' && !queryElems(this.elDropdown, `.menu > .item.checked`).length) {
+      const values = this.elComboValue.value.split(',');
+      for (const value of values) {
+        const elItem = this.elDropdown.querySelector<HTMLElement>(`.menu > .item[data-value="${CSS.escape(value)}"]`);
+        elItem?.classList.add('checked');
+      }
+      this.updateUiList(values);
+    }
+    this.initialValues = this.collectCheckedValues();
+
+    addDelegatedEventListener(this.elDropdown, 'click', '.item', (el, e) => this.onItemClick(el, e));
+
+    fomanticQuery(this.elDropdown).dropdown('setting', {
+      action: 'nothing', // do not hide the menu if user presses Enter
+      fullTextSearch: 'exact',
+      hideDividers: 'empty',
+      onHide: () => this.onHide(),
+    });
+  }
+}

web_src/js/features/repo-issue-sidebar.md

@@ -0,0 +1,34 @@
+A sidebar combo (dropdown+list) is like this:
+
+```html
+<div class="issue-sidebar-combo" data-selection-mode="..." data-update-url="...">
+  <input class="combo-value" name="..." type="hidden" value="...">
+  <div class="ui dropdown">
+    <div class="menu">
+      <div class="item clear-selection">clear</div>
+      <div class="item" data-value="..." data-scope="...">
+        <span class="item-check-mark">...</span>
+        ...
+      </div>
+    </div>
+  </div>
+  <div class="ui list">
+    <span class="item empty-list">no item</span>
+    <span class="item">...</span>
+  </div>
+</div>
+```
+
+When the selected items change, the `combo-value` input will be updated.
+If there is `data-update-url`, it also calls backend to attach/detach the changed items.
+
+Also, the changed items will be synchronized to the `ui list` items.
+
+The items with the same data-scope only allow one selected at a time.
+
+The dropdown selection could work in 2 modes:
+* single: only one item could be selected, it updates immediately when the item is selected.
+* multiple: multiple items could be selected, it defers the update until the dropdown is hidden.
+
+When using "scrolling menu", the items must be in the same level,
+otherwise keyboard (ArrowUp/ArrowDown/Enter) won't work.

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

@@ -0,0 +1,52 @@
+import {POST} from '../modules/fetch.ts';
+import {queryElems, toggleElem} from '../utils/dom.ts';
+import {IssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
+
+function initBranchSelector() {
+  // TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl"
+  const elSelectBranch = document.querySelector('.ui.dropdown.select-branch.branch-selector-dropdown');
+  if (!elSelectBranch) return;
+
+  const urlUpdateIssueRef = elSelectBranch.getAttribute('data-url-update-issueref');
+  const elBranchMenu = elSelectBranch.querySelector('.reference-list-menu');
+  queryElems(elBranchMenu, '.item:not(.no-select)', (el) => el.addEventListener('click', async function (e) {
+    e.preventDefault();
+    const selectedValue = this.getAttribute('data-id'); // eg: "refs/heads/my-branch"
+    const selectedText = this.getAttribute('data-name'); // eg: "my-branch"
+    if (urlUpdateIssueRef) {
+      // for existing issue, send request to update issue ref, and reload page
+      try {
+        await POST(urlUpdateIssueRef, {data: new URLSearchParams({ref: selectedValue})});
+        window.location.reload();
+      } catch (error) {
+        console.error(error);
+      }
+    } else {
+      // for new issue, only update UI&form, do not send request/reload
+      const selectedHiddenSelector = this.getAttribute('data-id-selector');
+      document.querySelector<HTMLInputElement>(selectedHiddenSelector).value = selectedValue;
+      elSelectBranch.querySelector('.text-branch-name').textContent = selectedText;
+    }
+  }));
+}
+
+function initRepoIssueDue() {
+  const form = document.querySelector<HTMLFormElement>('.issue-due-form');
+  if (!form) return;
+  const deadline = form.querySelector<HTMLInputElement>('input[name=deadline]');
+  document.querySelector('.issue-due-edit')?.addEventListener('click', () => {
+    toggleElem(form);
+  });
+  document.querySelector('.issue-due-remove')?.addEventListener('click', () => {
+    deadline.value = '';
+    form.dispatchEvent(new Event('submit', {cancelable: true, bubbles: true}));
+  });
+}
+
+export function initRepoIssueSidebar() {
+  initBranchSelector();
+  initRepoIssueDue();
+
+  // init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions
+  queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
+}

web_src/js/features/repo-issue.ts

@@ -0,0 +1,580 @@
+import {html, htmlEscape} from '../utils/html.ts';
+import {createTippy, showTemporaryTooltip} from '../modules/tippy.ts';
+import {
+  addDelegatedEventListener,
+  createElementFromHTML,
+  hideElem,
+  queryElems,
+  showElem,
+  toggleElem,
+  type DOMEvent,
+} from '../utils/dom.ts';
+import {setFileFolding} from './file-fold.ts';
+import {ComboMarkdownEditor, getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
+import {parseIssuePageInfo, toAbsoluteUrl} from '../utils.ts';
+import {GET, POST} from '../modules/fetch.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+
+const {appSubUrl} = window.config;
+
+export function initRepoIssueSidebarDependency() {
+  const elDropdown = document.querySelector('#new-dependency-drop-list');
+  if (!elDropdown) return;
+
+  const issuePageInfo = parseIssuePageInfo();
+  const crossRepoSearch = elDropdown.getAttribute('data-issue-cross-repo-search');
+  let issueSearchUrl = `${issuePageInfo.repoLink}/issues/search?q={query}&type=${issuePageInfo.issueDependencySearchType}`;
+  if (crossRepoSearch === 'true') {
+    issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${issuePageInfo.repoId}&type=${issuePageInfo.issueDependencySearchType}`;
+  }
+  fomanticQuery(elDropdown).dropdown({
+    fullTextSearch: true,
+    apiSettings: {
+      cache: false,
+      rawResponse: true,
+      url: issueSearchUrl,
+      onResponse(response: any) {
+        const filteredResponse = {success: true, results: [] as Array<Record<string, any>>};
+        const currIssueId = elDropdown.getAttribute('data-issue-id');
+        // Parse the response from the api to work with our dropdown
+        for (const issue of response) {
+          // Don't list current issue in the dependency list.
+          if (String(issue.id) === currIssueId) continue;
+          filteredResponse.results.push({
+            value: issue.id,
+            name: html`<div class="gt-ellipsis">#${issue.number} ${issue.title}</div><div class="text small tw-break-anywhere">${issue.repository.full_name}</div>`,
+          });
+        }
+        return filteredResponse;
+      },
+    },
+  });
+}
+
+function initRepoIssueLabelFilter(elDropdown: HTMLElement) {
+  const url = new URL(window.location.href);
+  const showArchivedLabels = url.searchParams.get('archived_labels') === 'true';
+  const queryLabels = url.searchParams.get('labels') || '';
+  const selectedLabelIds = new Set<string>();
+  for (const id of queryLabels ? queryLabels.split(',') : []) {
+    selectedLabelIds.add(`${Math.abs(parseInt(id))}`); // "labels" contains negative ids, which are excluded
+  }
+
+  const excludeLabel = (e: MouseEvent | KeyboardEvent, item: Element) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const labelId = item.getAttribute('data-label-id');
+    let labelIds: string[] = queryLabels ? queryLabels.split(',') : [];
+    labelIds = labelIds.filter((id) => Math.abs(parseInt(id)) !== Math.abs(parseInt(labelId)));
+    labelIds.push(`-${labelId}`);
+    url.searchParams.set('labels', labelIds.join(','));
+    window.location.assign(url);
+  };
+
+  // alt(or option) + click to exclude label
+  queryElems(elDropdown, '.label-filter-query-item', (el) => {
+    el.addEventListener('click', (e: MouseEvent) => {
+      if (e.altKey) excludeLabel(e, el);
+    });
+  });
+  // alt(or option) + enter to exclude selected label
+  elDropdown.addEventListener('keydown', (e: KeyboardEvent) => {
+    if (e.altKey && e.key === 'Enter') {
+      const selectedItem = elDropdown.querySelector('.label-filter-query-item.selected');
+      if (selectedItem) excludeLabel(e, selectedItem);
+    }
+  });
+  // no "labels" query parameter means "all issues"
+  elDropdown.querySelector('.label-filter-query-default').classList.toggle('selected', queryLabels === '');
+  // "labels=0" query parameter means "issues without label"
+  elDropdown.querySelector('.label-filter-query-not-set').classList.toggle('selected', queryLabels === '0');
+
+  // prepare to process "archived" labels
+  const elShowArchivedLabel = elDropdown.querySelector('.label-filter-archived-toggle');
+  if (!elShowArchivedLabel) return;
+  const elShowArchivedInput = elShowArchivedLabel.querySelector<HTMLInputElement>('input');
+  elShowArchivedInput.checked = showArchivedLabels;
+  const archivedLabels = elDropdown.querySelectorAll('.item[data-is-archived]');
+  // if no archived labels, hide the toggle and return
+  if (!archivedLabels.length) {
+    hideElem(elShowArchivedLabel);
+    return;
+  }
+
+  // show the archived labels if the toggle is checked or the label is selected
+  for (const label of archivedLabels) {
+    toggleElem(label, showArchivedLabels || selectedLabelIds.has(label.getAttribute('data-label-id')));
+  }
+  // update the url when the toggle is changed and reload
+  elShowArchivedInput.addEventListener('input', () => {
+    if (elShowArchivedInput.checked) {
+      url.searchParams.set('archived_labels', 'true');
+    } else {
+      url.searchParams.delete('archived_labels');
+    }
+    window.location.assign(url);
+  });
+}
+
+export function initRepoIssueFilterItemLabel() {
+  // the "label-filter" is used in 2 templates: projects/view, issue/filter_list (issue list page including the milestone page)
+  queryElems(document, '.ui.dropdown.label-filter', initRepoIssueLabelFilter);
+}
+
+export function initRepoIssueCommentDelete() {
+  // Delete comment
+  document.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
+    if (!e.target.matches('.delete-comment')) return;
+    e.preventDefault();
+
+    const deleteButton = e.target;
+    if (window.confirm(deleteButton.getAttribute('data-locale'))) {
+      try {
+        const response = await POST(deleteButton.getAttribute('data-url'));
+        if (!response.ok) throw new Error('Failed to delete comment');
+
+        const conversationHolder = deleteButton.closest('.conversation-holder');
+        const parentTimelineItem = deleteButton.closest('.timeline-item');
+        const parentTimelineGroup = deleteButton.closest('.timeline-item-group');
+
+        // Check if this was a pending comment.
+        if (conversationHolder?.querySelector('.pending-label')) {
+          const counter = document.querySelector('#review-box .review-comments-counter');
+          let num = parseInt(counter?.getAttribute('data-pending-comment-number')) - 1 || 0;
+          num = Math.max(num, 0);
+          counter.setAttribute('data-pending-comment-number', String(num));
+          counter.textContent = String(num);
+        }
+
+        document.querySelector(`#${deleteButton.getAttribute('data-comment-id')}`)?.remove();
+
+        if (conversationHolder && !conversationHolder.querySelector('.comment')) {
+          const path = conversationHolder.getAttribute('data-path');
+          const side = conversationHolder.getAttribute('data-side');
+          const idx = conversationHolder.getAttribute('data-idx');
+          const lineType = conversationHolder.closest('tr')?.getAttribute('data-line-type');
+
+          // the conversation holder could appear either on the "Conversation" page, or the "Files Changed" page
+          // on the Conversation page, there is no parent "tr", so no need to do anything for "add-code-comment"
+          if (lineType) {
+            if (lineType === 'same') {
+              document.querySelector(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).classList.remove('tw-invisible');
+            } else {
+              document.querySelector(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).classList.remove('tw-invisible');
+            }
+          }
+          conversationHolder.remove();
+        }
+
+        // Check if there is no review content, move the time avatar upward to avoid overlapping the content below.
+        if (!parentTimelineGroup?.querySelector('.timeline-item.comment') && !parentTimelineItem?.querySelector('.conversation-holder')) {
+          const timelineAvatar = parentTimelineGroup?.querySelector('.timeline-avatar');
+          timelineAvatar?.classList.remove('timeline-avatar-offset');
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  });
+}
+
+export function initRepoIssueCodeCommentCancel() {
+  // Cancel inline code comment
+  document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
+    if (!e.target.matches('.cancel-code-comment')) return;
+
+    const form = e.target.closest('form');
+    if (form?.classList.contains('comment-form')) {
+      hideElem(form);
+      showElem(form.closest('.comment-code-cloud')?.querySelectorAll('button.comment-form-reply'));
+    } else {
+      form.closest('.comment-code-cloud')?.remove();
+    }
+  });
+}
+
+export function initRepoPullRequestAllowMaintainerEdit() {
+  const wrapper = document.querySelector('#allow-edits-from-maintainers');
+  if (!wrapper) return;
+  const checkbox = wrapper.querySelector<HTMLInputElement>('input[type="checkbox"]');
+  checkbox.addEventListener('input', async () => {
+    const url = `${wrapper.getAttribute('data-url')}/set_allow_maintainer_edit`;
+    wrapper.classList.add('is-loading');
+    try {
+      const resp = await POST(url, {data: new URLSearchParams({
+        allow_maintainer_edit: String(checkbox.checked),
+      })});
+      if (!resp.ok) {
+        throw new Error('Failed to update maintainer edit permission');
+      }
+      const data = await resp.json();
+      checkbox.checked = data.allow_maintainer_edit;
+    } catch (error) {
+      checkbox.checked = !checkbox.checked;
+      console.error(error);
+      showTemporaryTooltip(wrapper, wrapper.getAttribute('data-prompt-error'));
+    } finally {
+      wrapper.classList.remove('is-loading');
+    }
+  });
+}
+
+export function initRepoIssueComments() {
+  if (!document.querySelector('.repository.view.issue .timeline')) return;
+
+  document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
+    const urlTarget = document.querySelector(':target');
+    if (!urlTarget) return;
+
+    const urlTargetId = urlTarget.id;
+    if (!urlTargetId) return;
+
+    if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return;
+
+    if (!e.target.closest(`#${urlTargetId}`)) {
+      // if the user clicks outside the comment, remove the hash from the url
+      // use empty hash and state to avoid scrolling
+      window.location.hash = ' ';
+      window.history.pushState(null, null, ' ');
+    }
+  });
+}
+
+export async function handleReply(el: HTMLElement) {
+  const form = el.closest('.comment-code-cloud').querySelector('.comment-form');
+  const textarea = form.querySelector('textarea');
+
+  hideElem(el);
+  showElem(form);
+  const editor = getComboMarkdownEditor(textarea) ?? await initComboMarkdownEditor(form.querySelector('.combo-markdown-editor'));
+  editor.focus();
+  return editor;
+}
+
+export function initRepoPullRequestReview() {
+  if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) {
+    const commentDiv = document.querySelector(window.location.hash);
+    if (commentDiv) {
+      // get the name of the parent id
+      const groupID = commentDiv.closest('div[id^="code-comments-"]')?.getAttribute('id');
+      if (groupID && groupID.startsWith('code-comments-')) {
+        const id = groupID.slice(14);
+        const ancestorDiffBox = commentDiv.closest<HTMLElement>('.diff-file-box');
+
+        hideElem(`#show-outdated-${id}`);
+        showElem(`#code-comments-${id}, #code-preview-${id}, #hide-outdated-${id}`);
+        // if the comment box is folded, expand it
+        if (ancestorDiffBox?.getAttribute('data-folded') === 'true') {
+          setFileFolding(ancestorDiffBox, ancestorDiffBox.querySelector('.fold-file'), false);
+        }
+      }
+      // set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing
+      if (window.history.scrollRestoration !== 'manual') window.history.scrollRestoration = 'manual';
+      // wait for a while because some elements (eg: image, editor, etc.) may change the viewport's height.
+      setTimeout(() => commentDiv.scrollIntoView({block: 'start'}), 100);
+    }
+  }
+
+  addDelegatedEventListener(document, 'click', '.show-outdated', (el, e) => {
+    e.preventDefault();
+    const id = el.getAttribute('data-comment');
+    hideElem(el);
+    showElem(`#code-comments-${id}`);
+    showElem(`#code-preview-${id}`);
+    showElem(`#hide-outdated-${id}`);
+  });
+
+  addDelegatedEventListener(document, 'click', '.hide-outdated', (el, e) => {
+    e.preventDefault();
+    const id = el.getAttribute('data-comment');
+    hideElem(el);
+    hideElem(`#code-comments-${id}`);
+    hideElem(`#code-preview-${id}`);
+    showElem(`#show-outdated-${id}`);
+  });
+
+  addDelegatedEventListener(document, 'click', 'button.comment-form-reply', (el, e) => {
+    e.preventDefault();
+    handleReply(el);
+  });
+
+  // The following part is only for diff views
+  if (!document.querySelector('.repository.pull.diff')) return;
+
+  const elReviewBtn = document.querySelector('.js-btn-review');
+  const elReviewPanel = document.querySelector('.review-box-panel.tippy-target');
+  if (elReviewBtn && elReviewPanel) {
+    const tippy = createTippy(elReviewBtn, {
+      content: elReviewPanel,
+      theme: 'default',
+      placement: 'bottom',
+      trigger: 'click',
+      maxWidth: 'none',
+      interactive: true,
+      hideOnClick: true,
+    });
+    elReviewPanel.querySelector('.close').addEventListener('click', () => tippy.hide());
+  }
+
+  addDelegatedEventListener(document, 'click', '.add-code-comment', async (el, e) => {
+    e.preventDefault();
+
+    const isSplit = el.closest('.code-diff')?.classList.contains('code-diff-split');
+    const side = el.getAttribute('data-side');
+    const idx = el.getAttribute('data-idx');
+    const path = el.closest('[data-path]')?.getAttribute('data-path');
+    const tr = el.closest('tr');
+    const lineType = tr.getAttribute('data-line-type');
+
+    let ntr = tr.nextElementSibling;
+    if (!ntr?.classList.contains('add-comment')) {
+      ntr = createElementFromHTML(`
+        <tr class="add-comment" data-line-type="${lineType}">
+          ${isSplit ? `
+            <td class="add-comment-left" colspan="4"></td>
+            <td class="add-comment-right" colspan="4"></td>
+          ` : `
+            <td class="add-comment-left add-comment-right" colspan="5"></td>
+          `}
+        </tr>`);
+      tr.after(ntr);
+    }
+    const td = ntr.querySelector(`.add-comment-${side}`);
+    const commentCloud = td.querySelector('.comment-code-cloud');
+    if (!commentCloud && !ntr.querySelector('button[name="pending_review"]')) {
+      const response = await GET(el.closest('[data-new-comment-url]')?.getAttribute('data-new-comment-url'));
+      td.innerHTML = await response.text();
+      td.querySelector<HTMLInputElement>("input[name='line']").value = idx;
+      td.querySelector<HTMLInputElement>("input[name='side']").value = (side === 'left' ? 'previous' : 'proposed');
+      td.querySelector<HTMLInputElement>("input[name='path']").value = path;
+      const editor = await initComboMarkdownEditor(td.querySelector<HTMLElement>('.combo-markdown-editor'));
+      editor.focus();
+    }
+  });
+}
+
+export function initRepoIssueReferenceIssue() {
+  const elDropdown = document.querySelector('.issue_reference_repository_search');
+  if (!elDropdown) return;
+  const form = elDropdown.closest('form');
+  fomanticQuery(elDropdown).dropdown({
+    fullTextSearch: true,
+    apiSettings: {
+      cache: false,
+      rawResponse: true,
+      url: `${appSubUrl}/repo/search?q={query}&limit=20`,
+      onResponse(response: any) {
+        const filteredResponse = {success: true, results: [] as Array<Record<string, any>>};
+        for (const repo of response.data) {
+          filteredResponse.results.push({
+            name: htmlEscape(repo.repository.full_name),
+            value: repo.repository.full_name,
+          });
+        }
+        return filteredResponse;
+      },
+    },
+    onChange(_value: string, _text: string, _$choice: any) {
+      form.setAttribute('action', `${appSubUrl}/${_text}/issues/new`);
+    },
+  });
+
+  // Reference issue
+  addDelegatedEventListener(document, 'click', '.reference-issue', (el, e) => {
+    e.preventDefault();
+    const target = el.getAttribute('data-target');
+    const content = document.querySelector(`#${target}`)?.textContent ?? '';
+    const poster = el.getAttribute('data-poster-username');
+    const reference = toAbsoluteUrl(el.getAttribute('data-reference'));
+    const modalSelector = el.getAttribute('data-modal');
+    const modal = document.querySelector(modalSelector);
+    const textarea = modal.querySelector<HTMLTextAreaElement>('textarea[name="content"]');
+    textarea.value = `${content}\n\n_Originally posted by @${poster} in ${reference}_`;
+    fomanticQuery(modal).modal('show');
+  });
+}
+
+export function initRepoIssueWipNewTitle() {
+  // Toggle WIP for new PR
+  queryElems(document, '.title_wip_desc > a', (el) => el.addEventListener('click', (e) => {
+    e.preventDefault();
+    const wipPrefixes = JSON.parse(el.closest('.title_wip_desc').getAttribute('data-wip-prefixes'));
+    const titleInput = document.querySelector<HTMLInputElement>('#issue_title');
+    const titleValue = titleInput.value;
+    for (const prefix of wipPrefixes) {
+      if (titleValue.startsWith(prefix.toUpperCase())) {
+        return;
+      }
+    }
+    titleInput.value = `${wipPrefixes[0]} ${titleValue}`;
+  }));
+}
+
+export function initRepoIssueWipToggle() {
+  // Toggle WIP for existing PR
+  registerGlobalInitFunc('initPullRequestWipToggle', (toggleWip) => toggleWip.addEventListener('click', async (e) => {
+    e.preventDefault();
+    const title = toggleWip.getAttribute('data-title');
+    const wipPrefix = toggleWip.getAttribute('data-wip-prefix');
+    const updateUrl = toggleWip.getAttribute('data-update-url');
+
+    const params = new URLSearchParams();
+    params.append('title', title?.startsWith(wipPrefix) ? title.slice(wipPrefix.length).trim() : `${wipPrefix.trim()} ${title}`);
+    const response = await POST(updateUrl, {data: params});
+    if (!response.ok) {
+      showErrorToast(`Failed to toggle 'work in progress' status`);
+      return;
+    }
+    window.location.reload();
+  }));
+}
+
+export function initRepoIssueTitleEdit() {
+  const issueTitleDisplay = document.querySelector('#issue-title-display');
+  const issueTitleEditor = document.querySelector<HTMLFormElement>('#issue-title-editor');
+  if (!issueTitleEditor) return;
+
+  const issueTitleInput = issueTitleEditor.querySelector('input');
+  const oldTitle = issueTitleInput.getAttribute('data-old-title');
+  issueTitleDisplay.querySelector('#issue-title-edit-show').addEventListener('click', () => {
+    hideElem(issueTitleDisplay);
+    hideElem('#pull-desc-display');
+    showElem(issueTitleEditor);
+    showElem('#pull-desc-editor');
+    if (!issueTitleInput.value.trim()) {
+      issueTitleInput.value = oldTitle;
+    }
+    issueTitleInput.focus();
+  });
+  issueTitleEditor.querySelector('.ui.cancel.button').addEventListener('click', () => {
+    hideElem(issueTitleEditor);
+    hideElem('#pull-desc-editor');
+    showElem(issueTitleDisplay);
+    showElem('#pull-desc-display');
+  });
+
+  const pullDescEditor = document.querySelector('#pull-desc-editor'); // it may not exist for a merged PR
+  const prTargetUpdateUrl = pullDescEditor?.getAttribute('data-target-update-url');
+
+  const editSaveButton = issueTitleEditor.querySelector('.ui.primary.button');
+  issueTitleEditor.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const newTitle = issueTitleInput.value.trim();
+    try {
+      if (newTitle && newTitle !== oldTitle) {
+        const resp = await POST(editSaveButton.getAttribute('data-update-url'), {data: new URLSearchParams({title: newTitle})});
+        if (!resp.ok) {
+          throw new Error(`Failed to update issue title: ${resp.statusText}`);
+        }
+      }
+      if (prTargetUpdateUrl) {
+        const newTargetBranch = document.querySelector('#pull-target-branch').getAttribute('data-branch');
+        const oldTargetBranch = document.querySelector('#branch_target').textContent;
+        if (newTargetBranch !== oldTargetBranch) {
+          const resp = await POST(prTargetUpdateUrl, {data: new URLSearchParams({target_branch: newTargetBranch})});
+          if (!resp.ok) {
+            throw new Error(`Failed to update PR target branch: ${resp.statusText}`);
+          }
+        }
+      }
+      ignoreAreYouSure(issueTitleEditor);
+      window.location.reload();
+    } catch (error) {
+      console.error(error);
+      showErrorToast(error.message);
+    }
+  });
+}
+
+export function initRepoIssueBranchSelect() {
+  document.querySelector<HTMLElement>('#branch-select')?.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
+    const el = e.target.closest('.item[data-branch]');
+    if (!el) return;
+    const pullTargetBranch = document.querySelector('#pull-target-branch');
+    const baseName = pullTargetBranch.getAttribute('data-basename');
+    const branchNameNew = el.getAttribute('data-branch');
+    const branchNameOld = pullTargetBranch.getAttribute('data-branch');
+    pullTargetBranch.textContent = pullTargetBranch.textContent.replace(`${baseName}:${branchNameOld}`, `${baseName}:${branchNameNew}`);
+    pullTargetBranch.setAttribute('data-branch', branchNameNew);
+  });
+}
+
+async function initSingleCommentEditor(commentForm: HTMLFormElement) {
+  // pages:
+  // * normal new issue/pr page: no status-button, no comment-button (there is only a normal submit button which can submit empty content)
+  // * issue/pr view page: with comment form, has status-button and comment-button
+  const editor = await initComboMarkdownEditor(commentForm.querySelector('.combo-markdown-editor'));
+  const statusButton = document.querySelector<HTMLButtonElement>('#status-button');
+  const commentButton = document.querySelector<HTMLButtonElement>('#comment-button');
+  const syncUiState = () => {
+    const editorText = editor.value().trim(), isUploading = editor.isUploading();
+    if (statusButton) {
+      statusButton.textContent = statusButton.getAttribute(editorText ? 'data-status-and-comment' : 'data-status');
+      statusButton.disabled = isUploading;
+    }
+    if (commentButton) {
+      commentButton.disabled = !editorText || isUploading;
+    }
+  };
+  editor.container.addEventListener(ComboMarkdownEditor.EventUploadStateChanged, syncUiState);
+  editor.container.addEventListener(ComboMarkdownEditor.EventEditorContentChanged, syncUiState);
+  syncUiState();
+}
+
+function initIssueTemplateCommentEditors(commentForm: HTMLFormElement) {
+  // pages:
+  // * new issue with issue template
+  const comboFields = commentForm.querySelectorAll<HTMLElement>('.combo-editor-dropzone');
+
+  const initCombo = async (elCombo: HTMLElement) => {
+    const fieldTextarea = elCombo.querySelector<HTMLTextAreaElement>('.form-field-real');
+    const dropzoneContainer = elCombo.querySelector<HTMLElement>('.form-field-dropzone');
+    const markdownEditor = elCombo.querySelector<HTMLElement>('.combo-markdown-editor');
+
+    const editor = await initComboMarkdownEditor(markdownEditor);
+    editor.container.addEventListener(ComboMarkdownEditor.EventEditorContentChanged, () => fieldTextarea.value = editor.value());
+
+    fieldTextarea.addEventListener('focus', async () => {
+      // deactivate all markdown editors
+      showElem(commentForm.querySelectorAll('.combo-editor-dropzone .form-field-real'));
+      hideElem(commentForm.querySelectorAll('.combo-editor-dropzone .combo-markdown-editor'));
+      queryElems(commentForm, '.combo-editor-dropzone .form-field-dropzone', (dropzoneContainer) => {
+        // if "form-field-dropzone" exists, then "dropzone" must also exist
+        const dropzone = dropzoneContainer.querySelector<HTMLElement>('.dropzone').dropzone;
+        const hasUploadedFiles = dropzone.files.length !== 0;
+        toggleElem(dropzoneContainer, hasUploadedFiles);
+      });
+
+      // activate this markdown editor
+      hideElem(fieldTextarea);
+      showElem(markdownEditor);
+      showElem(dropzoneContainer);
+
+      await editor.switchToUserPreference();
+      editor.focus();
+    });
+  };
+
+  for (const el of comboFields) {
+    initCombo(el);
+  }
+}
+
+export function initRepoCommentFormAndSidebar() {
+  const commentForm = document.querySelector<HTMLFormElement>('.comment.form');
+  if (!commentForm) return;
+
+  if (commentForm.querySelector('.field.combo-editor-dropzone')) {
+    // at the moment, if a form has multiple combo-markdown-editors, it must be an issue template form
+    initIssueTemplateCommentEditors(commentForm);
+  } else if (commentForm.querySelector('.combo-markdown-editor')) {
+    // it's quite unclear about the "comment form" elements, sometimes it's for issue comment, sometimes it's for file editor/uploader message
+    initSingleCommentEditor(commentForm);
+  }
+
+  initRepoIssueSidebar();
+}

web_src/js/features/repo-legacy.ts

@@ -0,0 +1,76 @@
+import {registerGlobalInitFunc} from '../modules/observer.ts';
+import {
+  initRepoCommentFormAndSidebar,
+  initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete,
+  initRepoIssueComments, initRepoIssueReferenceIssue,
+  initRepoIssueTitleEdit, initRepoIssueWipNewTitle, initRepoIssueWipToggle,
+} from './repo-issue.ts';
+import {initUnicodeEscapeButton} from './repo-unicode-escape.ts';
+import {initRepoCloneButtons} from './repo-common.ts';
+import {initCitationFileCopyContent} from './citation.ts';
+import {initCompLabelEdit} from './comp/LabelEdit.ts';
+import {initCompReactionSelector} from './comp/ReactionSelector.ts';
+import {initRepoSettings} from './repo-settings.ts';
+import {hideElem, queryElemChildren, queryElems, showElem} from '../utils/dom.ts';
+import {initRepoIssueCommentEdit} from './repo-issue-edit.ts';
+import {initRepoMilestone} from './repo-milestone.ts';
+import {initRepoNew} from './repo-new.ts';
+import {createApp} from 'vue';
+import RepoBranchTagSelector from '../components/RepoBranchTagSelector.vue';
+import {initRepoPullMergeBox} from './repo-issue-pull.ts';
+
+function initRepoBranchTagSelector() {
+  registerGlobalInitFunc('initRepoBranchTagSelector', async (elRoot: HTMLInputElement) => {
+    createApp(RepoBranchTagSelector, {elRoot}).mount(elRoot);
+  });
+}
+
+export function initBranchSelectorTabs() {
+  const elSelectBranches = document.querySelectorAll('.ui.dropdown.select-branch');
+  for (const elSelectBranch of elSelectBranches) {
+    queryElems(elSelectBranch, '.reference.column', (el) => el.addEventListener('click', () => {
+      hideElem(elSelectBranch.querySelectorAll('.scrolling.reference-list-menu'));
+      showElem(el.getAttribute('data-target'));
+      queryElemChildren(el.parentNode, '.branch-tag-item', (el) => el.classList.remove('active'));
+      el.classList.add('active');
+    }));
+  }
+}
+
+export function initRepository() {
+  const pageContent = document.querySelector('.page-content.repository');
+  if (!pageContent) return;
+
+  initRepoBranchTagSelector();
+  initRepoCommentFormAndSidebar();
+
+  // Labels
+  initCompLabelEdit('.page-content.repository.labels');
+  initRepoMilestone();
+  initRepoNew();
+
+  initRepoCloneButtons();
+  initCitationFileCopyContent();
+  initRepoSettings();
+  initRepoIssueWipNewTitle();
+
+  // Issues
+  if (pageContent.matches('.page-content.repository.view.issue')) {
+    initRepoIssueCommentEdit();
+
+    initRepoIssueBranchSelect();
+    initRepoIssueTitleEdit();
+    initRepoIssueWipToggle();
+    initRepoIssueComments();
+
+    initRepoIssueReferenceIssue();
+
+    initRepoIssueCommentDelete();
+    initRepoIssueCodeCommentCancel();
+    initCompReactionSelector();
+
+    registerGlobalInitFunc('initRepoPullMergeBox', initRepoPullMergeBox);
+  }
+
+  initUnicodeEscapeButton();
+}

web_src/js/features/repo-migrate.ts

@@ -0,0 +1,61 @@
+import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts';
+import {GET, POST} from '../modules/fetch.ts';
+
+export function initRepoMigrationStatusChecker() {
+  const repoMigrating = document.querySelector('#repo_migrating');
+  if (!repoMigrating) return;
+
+  document.querySelector<HTMLButtonElement>('#repo_migrating_retry')?.addEventListener('click', doMigrationRetry);
+
+  const repoLink = repoMigrating.getAttribute('data-migrating-repo-link');
+
+  // returns true if the refresh still needs to be called after a while
+  const refresh = async () => {
+    const res = await GET(`${repoLink}/-/migrate/status`);
+    if (res.status !== 200) return true; // continue to refresh if network error occurs
+
+    const data = await res.json();
+
+    // for all status
+    if (data.message) {
+      document.querySelector('#repo_migrating_progress_message').textContent = data.message;
+    }
+
+    // TaskStatusFinished
+    if (data.status === 4) {
+      window.location.reload();
+      return false;
+    }
+
+    // TaskStatusFailed
+    if (data.status === 3) {
+      hideElem('#repo_migrating_progress');
+      hideElem('#repo_migrating');
+      showElem('#repo_migrating_retry');
+      showElem('#repo_migrating_failed');
+      showElem('#repo_migrating_failed_image');
+      document.querySelector('#repo_migrating_failed_error').textContent = data.message;
+      return false;
+    }
+
+    return true; // continue to refresh
+  };
+
+  const syncTaskStatus = async () => {
+    let doNextRefresh = true;
+    try {
+      doNextRefresh = await refresh();
+    } finally {
+      if (doNextRefresh) {
+        setTimeout(syncTaskStatus, 2000);
+      }
+    }
+  };
+
+  syncTaskStatus(); // no await
+}
+
+async function doMigrationRetry(e: DOMEvent<MouseEvent>) {
+  await POST(e.target.getAttribute('data-migrating-task-retry-url'));
+  window.location.reload();
+}

web_src/js/features/repo-migration.ts

@@ -0,0 +1,80 @@
+import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
+import {sanitizeRepoName} from './repo-common.ts';
+
+const service = document.querySelector<HTMLInputElement>('#service_type');
+const user = document.querySelector<HTMLInputElement>('#auth_username');
+const pass = document.querySelector<HTMLInputElement>('#auth_password');
+const token = document.querySelector<HTMLInputElement>('#auth_token');
+const mirror = document.querySelector<HTMLInputElement>('#mirror');
+const lfs = document.querySelector<HTMLInputElement>('#lfs');
+const lfsSettings = document.querySelector<HTMLElement>('#lfs_settings');
+const lfsEndpoint = document.querySelector<HTMLElement>('#lfs_endpoint');
+const items = document.querySelectorAll<HTMLInputElement>('#migrate_items input[type=checkbox]');
+
+export function initRepoMigration() {
+  checkAuth();
+  setLFSSettingsVisibility();
+
+  user?.addEventListener('input', () => {checkItems(false)});
+  pass?.addEventListener('input', () => {checkItems(false)});
+  token?.addEventListener('input', () => {checkItems(true)});
+  mirror?.addEventListener('change', () => {checkItems(true)});
+  document.querySelector('#lfs_settings_show')?.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    showElem(lfsEndpoint);
+  });
+  lfs?.addEventListener('change', setLFSSettingsVisibility);
+
+  const elCloneAddr = document.querySelector<HTMLInputElement>('#clone_addr');
+  const elRepoName = document.querySelector<HTMLInputElement>('#repo_name');
+  if (elCloneAddr && elRepoName) {
+    let repoNameChanged = false;
+    elRepoName.addEventListener('input', () => {repoNameChanged = true});
+    elCloneAddr.addEventListener('input', () => {
+      if (repoNameChanged) return;
+      let repoNameFromUrl = elCloneAddr.value.split(/[?#]/)[0];
+      const parts = /^(.*\/)?((.+?)\/?)$/.exec(repoNameFromUrl);
+      if (!parts || parts.length < 4) {
+        elRepoName.value = '';
+        return;
+      }
+      repoNameFromUrl = parts[3].split(/[?#]/)[0];
+      elRepoName.value = sanitizeRepoName(repoNameFromUrl);
+    });
+  }
+}
+
+function checkAuth() {
+  if (!service) return;
+  const serviceType = Number(service.value);
+
+  checkItems(serviceType !== 1);
+}
+
+function checkItems(tokenAuth: boolean) {
+  let enableItems = false;
+  if (tokenAuth) {
+    enableItems = token?.value !== '';
+  } else {
+    enableItems = user?.value !== '' || pass?.value !== '';
+  }
+  if (enableItems && Number(service?.value) > 1) {
+    if (mirror?.checked) {
+      for (const item of items) {
+        item.disabled = item.name !== 'wiki';
+      }
+      return;
+    }
+    for (const item of items) item.disabled = false;
+  } else {
+    for (const item of items) item.disabled = true;
+  }
+}
+
+function setLFSSettingsVisibility() {
+  if (!lfs) return;
+  const visible = lfs.checked;
+  toggleElem(lfsSettings, visible);
+  hideElem(lfsEndpoint);
+}

web_src/js/features/repo-milestone.ts

@@ -0,0 +1,9 @@
+export function initRepoMilestone() {
+  const page = document.querySelector('.repository.new.milestone');
+  if (!page) return;
+
+  const deadline = page.querySelector<HTMLInputElement>('form input[name=deadline]');
+  document.querySelector('#milestone-clear-deadline').addEventListener('click', () => {
+    deadline.value = '';
+  });
+}

web_src/js/features/repo-new.ts

@@ -0,0 +1,99 @@
+import {hideElem, querySingleVisibleElem, showElem, toggleElem} from '../utils/dom.ts';
+import {htmlEscape} from '../utils/html.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {sanitizeRepoName} from './repo-common.ts';
+
+const {appSubUrl} = window.config;
+
+function initRepoNewTemplateSearch(form: HTMLFormElement) {
+  const elSubmitButton = querySingleVisibleElem<HTMLInputElement>(form, '.ui.primary.button');
+  const elCreateRepoErrorMessage = form.querySelector('#create-repo-error-message');
+  const elRepoOwnerDropdown = form.querySelector('#repo_owner_dropdown');
+  const elRepoTemplateDropdown = form.querySelector<HTMLInputElement>('#repo_template_search');
+  const inputRepoTemplate = form.querySelector<HTMLInputElement>('#repo_template');
+  const elTemplateUnits = form.querySelector('#template_units');
+  const elNonTemplate = form.querySelector('#non_template');
+  const checkTemplate = function () {
+    const hasSelectedTemplate = inputRepoTemplate.value !== '' && inputRepoTemplate.value !== '0';
+    toggleElem(elTemplateUnits, hasSelectedTemplate);
+    toggleElem(elNonTemplate, !hasSelectedTemplate);
+  };
+  inputRepoTemplate.addEventListener('change', checkTemplate);
+  checkTemplate();
+
+  const $repoOwnerDropdown = fomanticQuery(elRepoOwnerDropdown);
+  const $repoTemplateDropdown = fomanticQuery(elRepoTemplateDropdown);
+  const onChangeOwner = function () {
+    const ownerId = $repoOwnerDropdown.dropdown('get value');
+    const $ownerItem = $repoOwnerDropdown.dropdown('get item', ownerId);
+    hideElem(elCreateRepoErrorMessage);
+    elSubmitButton.disabled = false;
+    if ($ownerItem?.length) {
+      const elOwnerItem = $ownerItem[0];
+      elCreateRepoErrorMessage.textContent = elOwnerItem.getAttribute('data-create-repo-disallowed-prompt') ?? '';
+      const hasError = Boolean(elCreateRepoErrorMessage.textContent);
+      toggleElem(elCreateRepoErrorMessage, hasError);
+      elSubmitButton.disabled = hasError;
+    }
+    $repoTemplateDropdown.dropdown('setting', {
+      apiSettings: {
+        url: `${appSubUrl}/repo/search?q={query}&template=true&priority_owner_id=${ownerId}`,
+        onResponse(response: any) {
+          const results = [];
+          results.push({name: '', value: ''}); // empty item means not using template
+          for (const tmplRepo of response.data) {
+            results.push({
+              name: htmlEscape(tmplRepo.repository.full_name),
+              value: String(tmplRepo.repository.id),
+            });
+          }
+          $repoTemplateDropdown.fomanticExt.onResponseKeepSelectedItem($repoTemplateDropdown, inputRepoTemplate.value);
+          return {results};
+        },
+        cache: false,
+      },
+    });
+  };
+  $repoOwnerDropdown.dropdown('setting', 'onChange', onChangeOwner);
+  onChangeOwner();
+}
+
+export function initRepoNew() {
+  const pageContent = document.querySelector('.page-content.repository.new-repo');
+  if (!pageContent) return;
+
+  const form = document.querySelector<HTMLFormElement>('.new-repo-form');
+  const inputGitIgnores = form.querySelector<HTMLInputElement>('input[name="gitignores"]');
+  const inputLicense = form.querySelector<HTMLInputElement>('input[name="license"]');
+  const inputAutoInit = form.querySelector<HTMLInputElement>('input[name="auto_init"]');
+  const updateUiAutoInit = () => {
+    inputAutoInit.checked = Boolean(inputGitIgnores.value || inputLicense.value);
+  };
+  inputGitIgnores.addEventListener('change', updateUiAutoInit);
+  inputLicense.addEventListener('change', updateUiAutoInit);
+  updateUiAutoInit();
+
+  const inputRepoName = form.querySelector<HTMLInputElement>('input[name="repo_name"]');
+  const inputPrivate = form.querySelector<HTMLInputElement>('input[name="private"]');
+  const updateUiRepoName = () => {
+    const helps = form.querySelectorAll(`.help[data-help-for-repo-name]`);
+    hideElem(helps);
+    let help = form.querySelector(`.help[data-help-for-repo-name="${CSS.escape(inputRepoName.value)}"]`);
+    if (!help) help = form.querySelector(`.help[data-help-for-repo-name=""]`);
+    showElem(help);
+    const repoNamePreferPrivate: Record<string, boolean> = {'.profile': false, '.profile-private': true};
+    const preferPrivate = repoNamePreferPrivate[inputRepoName.value];
+    // inputPrivate might be disabled because site admin "force private"
+    if (preferPrivate !== undefined && !inputPrivate.closest('.disabled, [disabled]')) {
+      inputPrivate.checked = preferPrivate;
+    }
+  };
+  inputRepoName.addEventListener('input', updateUiRepoName);
+  inputRepoName.addEventListener('change', () => {
+    inputRepoName.value = sanitizeRepoName(inputRepoName.value);
+    updateUiRepoName();
+  });
+  updateUiRepoName();
+
+  initRepoNewTemplateSearch(form);
+}

web_src/js/features/repo-projects.ts

@@ -0,0 +1,167 @@
+import {contrastColor} from '../utils/color.ts';
+import {createSortable} from '../modules/sortable.ts';
+import {POST, request} from '../modules/fetch.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
+import type {SortableEvent} from 'sortablejs';
+import {toggleFullScreen} from '../utils.ts';
+
+function updateIssueCount(card: HTMLElement): void {
+  const parent = card.parentElement;
+  const count = parent.querySelectorAll('.issue-card').length;
+  parent.querySelector('.project-column-issue-count').textContent = String(count);
+}
+
+async function moveIssue({item, from, to, oldIndex}: SortableEvent): Promise<void> {
+  const columnCards = to.querySelectorAll('.issue-card');
+  updateIssueCount(from);
+  updateIssueCount(to);
+
+  const columnSorting = {
+    issues: Array.from(columnCards, (card, i) => ({
+      issueID: parseInt(card.getAttribute('data-issue')),
+      sorting: i,
+    })),
+  };
+
+  try {
+    await POST(`${to.getAttribute('data-url')}/move`, {
+      data: columnSorting,
+    });
+  } catch (error) {
+    console.error(error);
+    from.insertBefore(item, from.children[oldIndex]);
+  }
+}
+
+async function initRepoProjectSortable(): Promise<void> {
+  // the HTML layout is: #project-board.board > .project-column .cards > .issue-card
+  const mainBoard = document.querySelector('#project-board');
+  let boardColumns = mainBoard.querySelectorAll<HTMLElement>('.project-column');
+  createSortable(mainBoard, {
+    group: 'project-column',
+    draggable: '.project-column',
+    handle: '.project-column-header',
+    delayOnTouchOnly: true,
+    delay: 500,
+    onSort: async () => { // eslint-disable-line @typescript-eslint/no-misused-promises
+      boardColumns = mainBoard.querySelectorAll<HTMLElement>('.project-column');
+
+      const columnSorting = {
+        columns: Array.from(boardColumns, (column, i) => ({
+          columnID: parseInt(column.getAttribute('data-id')),
+          sorting: i,
+        })),
+      };
+
+      try {
+        await POST(mainBoard.getAttribute('data-url'), {
+          data: columnSorting,
+        });
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  });
+
+  for (const boardColumn of boardColumns) {
+    const boardCardList = boardColumn.querySelector('.cards');
+    createSortable(boardCardList, {
+      group: 'shared',
+      onAdd: moveIssue, // eslint-disable-line @typescript-eslint/no-misused-promises
+      onUpdate: moveIssue, // eslint-disable-line @typescript-eslint/no-misused-promises
+      delayOnTouchOnly: true,
+      delay: 500,
+    });
+  }
+}
+
+function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
+  const elModal = document.querySelector<HTMLElement>('.ui.modal#project-column-modal-edit');
+  const elForm = elModal.querySelector<HTMLFormElement>('form');
+
+  const elColumnId = elForm.querySelector<HTMLInputElement>('input[name="id"]');
+  const elColumnTitle = elForm.querySelector<HTMLInputElement>('input[name="title"]');
+  const elColumnColor = elForm.querySelector<HTMLInputElement>('input[name="color"]');
+
+  const attrDataColumnId = 'data-modal-project-column-id';
+  const attrDataColumnTitle = 'data-modal-project-column-title-input';
+  const attrDataColumnColor = 'data-modal-project-column-color-input';
+
+  // the "new" button is not in project board, so need to query from document
+  queryElems(document, '.show-project-column-modal-edit', (el) => {
+    el.addEventListener('click', () => {
+      elColumnId.value = el.getAttribute(attrDataColumnId);
+      elColumnTitle.value = el.getAttribute(attrDataColumnTitle);
+      elColumnColor.value = el.getAttribute(attrDataColumnColor);
+      elColumnColor.dispatchEvent(new Event('input', {bubbles: true})); // trigger the color picker
+    });
+  });
+
+  elForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const columnId = elColumnId.value;
+    const actionBaseLink = elForm.getAttribute('data-action-base-link');
+
+    const formData = new FormData(elForm);
+    const formLink = columnId ? `${actionBaseLink}/${columnId}` : `${actionBaseLink}/columns/new`;
+    const formMethod = columnId ? 'PUT' : 'POST';
+
+    try {
+      elForm.classList.add('is-loading');
+      await request(formLink, {method: formMethod, data: formData});
+      if (!columnId) {
+        window.location.reload(); // newly added column, need to reload the page
+        return;
+      }
+
+      // update the newly saved column title and color in the project board (to avoid reload)
+      const elEditButton = writableProjectBoard.querySelector<HTMLButtonElement>(`.show-project-column-modal-edit[${attrDataColumnId}="${columnId}"]`);
+      elEditButton.setAttribute(attrDataColumnTitle, elColumnTitle.value);
+      elEditButton.setAttribute(attrDataColumnColor, elColumnColor.value);
+
+      const elBoardColumn = writableProjectBoard.querySelector<HTMLElement>(`.project-column[data-id="${columnId}"]`);
+      const elBoardColumnTitle = elBoardColumn.querySelector<HTMLElement>(`.project-column-title-text`);
+      elBoardColumnTitle.textContent = elColumnTitle.value;
+      if (elColumnColor.value) {
+        const textColor = contrastColor(elColumnColor.value);
+        elBoardColumn.style.setProperty('background', elColumnColor.value, 'important');
+        elBoardColumn.style.setProperty('color', textColor, 'important');
+        queryElemChildren<HTMLElement>(elBoardColumn, '.divider', (divider) => divider.style.color = textColor);
+      } else {
+        elBoardColumn.style.removeProperty('background');
+        elBoardColumn.style.removeProperty('color');
+        queryElemChildren<HTMLElement>(elBoardColumn, '.divider', (divider) => divider.style.removeProperty('color'));
+      }
+
+      fomanticQuery(elModal).modal('hide');
+    } finally {
+      elForm.classList.remove('is-loading');
+    }
+  });
+}
+
+function initRepoProjectToggleFullScreen(): void {
+  const enterFullscreenBtn = document.querySelector('.screen-full');
+  const exitFullscreenBtn = document.querySelector('.screen-normal');
+  if (!enterFullscreenBtn || !exitFullscreenBtn) return;
+
+  const toggleFullscreenState = (isFullScreen: boolean) => {
+    toggleFullScreen('.projects-view', isFullScreen);
+    toggleElem(enterFullscreenBtn, !isFullScreen);
+    toggleElem(exitFullscreenBtn, isFullScreen);
+  };
+
+  enterFullscreenBtn.addEventListener('click', () => toggleFullscreenState(true));
+  exitFullscreenBtn.addEventListener('click', () => toggleFullscreenState(false));
+}
+
+export function initRepoProject(): void {
+  initRepoProjectToggleFullScreen();
+
+  const writableProjectBoard = document.querySelector('#project-board[data-project-borad-writable="true"]');
+  if (!writableProjectBoard) return;
+
+  initRepoProjectSortable(); // no await
+  initRepoProjectColumnEdit(writableProjectBoard);
+}

web_src/js/features/repo-release.ts

@@ -0,0 +1,48 @@
+import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts';
+
+export function initRepoRelease() {
+  document.addEventListener('click', (e: DOMEvent<MouseEvent>) => {
+    if (e.target.matches('.remove-rel-attach')) {
+      const uuid = e.target.getAttribute('data-uuid');
+      const id = e.target.getAttribute('data-id');
+      document.querySelector<HTMLInputElement>(`input[name='attachment-del-${uuid}']`).value = 'true';
+      hideElem(`#attachment-${id}`);
+    }
+  });
+}
+
+export function initRepoReleaseNew() {
+  if (!document.querySelector('.repository.new.release')) return;
+
+  initTagNameEditor();
+}
+
+function initTagNameEditor() {
+  const el = document.querySelector('#tag-name-editor');
+  if (!el) return;
+
+  const existingTags = JSON.parse(el.getAttribute('data-existing-tags'));
+  if (!Array.isArray(existingTags)) return;
+
+  const defaultTagHelperText = el.getAttribute('data-tag-helper');
+  const newTagHelperText = el.getAttribute('data-tag-helper-new');
+  const existingTagHelperText = el.getAttribute('data-tag-helper-existing');
+
+  const tagNameInput = document.querySelector<HTMLInputElement>('#tag-name');
+  const hideTargetInput = function(tagNameInput: HTMLInputElement) {
+    const value = tagNameInput.value;
+    const tagHelper = document.querySelector('#tag-helper');
+    if (existingTags.includes(value)) {
+      // If the tag already exists, hide the target branch selector.
+      hideElem('#tag-target-selector');
+      tagHelper.textContent = existingTagHelperText;
+    } else {
+      showElem('#tag-target-selector');
+      tagHelper.textContent = value ? newTagHelperText : defaultTagHelperText;
+    }
+  };
+  hideTargetInput(tagNameInput); // update on page load because the input may have a value
+  tagNameInput.addEventListener('input', (e) => {
+    hideTargetInput(e.target as HTMLInputElement);
+  });
+}

web_src/js/features/repo-search.ts

@@ -0,0 +1,25 @@
+import type {DOMEvent} from '../utils/dom.ts';
+
+export function initRepositorySearch() {
+  const repositorySearchForm = document.querySelector<HTMLFormElement>('#repo-search-form');
+  if (!repositorySearchForm) return;
+
+  repositorySearchForm.addEventListener('change', (e: DOMEvent<Event, HTMLInputElement>) => {
+    e.preventDefault();
+
+    const params = new URLSearchParams();
+    for (const [key, value] of new FormData(repositorySearchForm).entries()) {
+      params.set(key, value.toString());
+    }
+    if (e.target.name === 'clear-filter') {
+      params.delete('archived');
+      params.delete('fork');
+      params.delete('mirror');
+      params.delete('template');
+      params.delete('private');
+    }
+
+    params.delete('clear-filter');
+    window.location.search = params.toString();
+  });
+}