Merge branch 'main' into icons

web_src/js/components/ActivityHeatmap.vue

@@ -5,7 +5,7 @@ import {onMounted, shallowRef} from 'vue';
 import type {Value as HeatmapValue, Locale as HeatmapLocale} from '@silverwind/vue3-calendar-heatmap';
 
 defineProps<{
-  values?: HeatmapValue[];
+  values: HeatmapValue[];
   locale: {
     textTotalContributions: string;
     heatMapLocale: Partial<HeatmapLocale>;
@@ -28,7 +28,7 @@ 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');
+  const legend = document.querySelector<HTMLElement>('.vch__external-legend-wrapper')!;
   legend.setAttribute('viewBox', '12 0 80 10');
   legend.style.marginRight = '-12px';
 });

web_src/js/components/ContextPopup.vue

@@ -11,15 +11,17 @@ const props = defineProps<{
 }>();
 
 const loading = shallowRef(false);
-const issue = shallowRef<Issue>(null);
+const issue = shallowRef<Issue | null>(null);
 const renderedLabels = shallowRef('');
 const errorMessage = shallowRef('');
 
 const createdAt = computed(() => {
+  if (!issue?.value) return '';
   return new Date(issue.value.created_at).toLocaleDateString(undefined, {year: 'numeric', month: 'short', day: 'numeric'});
 });
 
 const body = computed(() => {
+  if (!issue?.value) return '';
   const body = issue.value.body.replace(/\n+/g, ' ');
   return body.length > 85 ? `${body.substring(0, 85)}…` : body;
 });

web_src/js/components/DashboardRepoList.vue

@@ -111,9 +111,9 @@ export default defineComponent({
   },
 
   mounted() {
-    const el = document.querySelector('#dashboard-repo-list');
+    const el = document.querySelector('#dashboard-repo-list')!;
     this.changeReposFilter(this.reposFilter);
-    fomanticQuery(el.querySelector('.ui.dropdown')).dropdown();
+    fomanticQuery(el.querySelector('.ui.dropdown')!).dropdown();
 
     this.textArchivedFilterTitles = {
       'archived': this.textShowOnlyArchived,

web_src/js/components/DiffCommitSelector.vue

@@ -23,7 +23,7 @@ type CommitListResult = {
 export default defineComponent({
   components: {SvgIcon},
   data: () => {
-    const el = document.querySelector('#diff-commit-select');
+    const el = document.querySelector('#diff-commit-select')!;
     return {
       menuVisible: false,
       isLoading: false,
@@ -35,7 +35,7 @@ export default defineComponent({
       mergeBase: el.getAttribute('data-merge-base'),
       commits: [] as Array<Commit>,
       hoverActivated: false,
-      lastReviewCommitSha: '',
+      lastReviewCommitSha: '' as string | null,
       uniqueIdMenu: generateElemId('diff-commit-selector-menu-'),
       uniqueIdShowAll: generateElemId('diff-commit-selector-show-all-'),
     };
@@ -165,7 +165,7 @@ export default defineComponent({
     },
     /** Called when user clicks on since last review */
     changesSinceLastReviewClick() {
-      window.location.assign(`${this.issueLink}/files/${this.lastReviewCommitSha}..${this.commits.at(-1).id}${this.queryParams}`);
+      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) {
@@ -193,7 +193,7 @@ export default defineComponent({
         // 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;
+        let beforeCommitID: string | null = null;
         if (firstSelected === 0) {
           beforeCommitID = this.mergeBase;
         } else {
@@ -204,7 +204,7 @@ export default defineComponent({
         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) {
+        } 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 {

web_src/js/components/DiffFileTree.vue

@@ -12,14 +12,14 @@ 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);
+  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);
+  document.querySelector('.diff-toggle-file-tree-button')!.removeEventListener('click', toggleVisibility);
   window.removeEventListener('hashchange', hashChangeListener);
 });
 
@@ -33,7 +33,7 @@ function expandSelectedFile() {
   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);
+    if (folded) setFileFolding(box, box.querySelector('.fold-file')!, false);
   }
 }
 
@@ -48,10 +48,10 @@ function updateVisibility(visible: boolean) {
 }
 
 function updateState(visible: boolean) {
-  const btn = document.querySelector('.diff-toggle-file-tree-button');
+  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');
+  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);

web_src/js/components/RepoActionView.vue

@@ -402,7 +402,7 @@ export default defineComponent({
         }
 
         // auto-scroll to the last log line of the last step
-        let autoScrollJobStepElement: HTMLElement;
+        let autoScrollJobStepElement: HTMLElement | undefined;
         for (let stepIndex = 0; stepIndex < this.currentJob.steps.length; stepIndex++) {
           if (!autoScrollStepIndexes.get(stepIndex)) continue;
           autoScrollJobStepElement = this.getJobStepLogsContainer(stepIndex);
@@ -468,7 +468,7 @@ export default defineComponent({
       }
       const logLine = this.elStepsContainer().querySelector(selectedLogStep);
       if (!logLine) return;
-      logLine.querySelector<HTMLAnchorElement>('.line-num').click();
+      logLine.querySelector<HTMLAnchorElement>('.line-num')!.click();
     },
   },
 });

web_src/js/components/RepoActivityTopAuthors.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // @ts-expect-error - module exports no types
 import {VueBarGraph} from 'vue-bar-graph';
-import {computed, onMounted, shallowRef, useTemplateRef} from 'vue';
+import {computed, onMounted, shallowRef, useTemplateRef, type ShallowRef} from 'vue';
 
 const colors = shallowRef({
   barColor: 'green',
@@ -41,8 +41,8 @@ const graphWidth = computed(() => {
   return activityTopAuthors.length * 40;
 });
 
-const styleElement = useTemplateRef('styleElement');
-const altStyleElement = useTemplateRef('altStyleElement');
+const styleElement = useTemplateRef('styleElement') as Readonly<ShallowRef<HTMLDivElement>>;
+const altStyleElement = useTemplateRef('altStyleElement') as Readonly<ShallowRef<HTMLDivElement>>;
 
 onMounted(() => {
   const refStyle = window.getComputedStyle(styleElement.value);

web_src/js/components/RepoBranchTagSelector.vue

@@ -20,7 +20,10 @@ type TabLoadingStates = Record<SelectedTab, '' | 'loading' | 'done'>
 export default defineComponent({
   components: {SvgIcon},
   props: {
-    elRoot: HTMLElement,
+    elRoot: {
+      type: HTMLElement,
+      required: true,
+    },
   },
   data() {
     const shouldShowTabBranches = this.elRoot.getAttribute('data-show-tab-branches') === 'true';
@@ -33,28 +36,28 @@ export default defineComponent({
       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'),
+      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'),
+      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'),
+      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'),
+      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',
@@ -92,7 +95,7 @@ export default defineComponent({
       }).length;
     },
     createNewRefFormActionUrl() {
-      return `${this.currentRepoLink}/branches/_new/${this.currentRefType}/${pathEscapeSegments(this.currentRefShortName)}`;
+      return `${this.currentRepoLink}/branches/_new/${this.currentRefType}/${pathEscapeSegments(this.currentRefShortName!)}`;
     },
   },
   watch: {

web_src/js/components/RepoContributors.vue

@@ -174,7 +174,7 @@ export default defineComponent({
         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) {
+          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;
@@ -238,8 +238,8 @@ export default defineComponent({
     },
 
     updateOtherCharts({chart}: {chart: Chart}, reset: boolean = false) {
-      const minVal = Number(chart.options.scales.x.min);
-      const maxVal = Number(chart.options.scales.x.max);
+      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;
@@ -302,8 +302,8 @@ export default defineComponent({
         },
         scales: {
           x: {
-            min: this.xAxisMin,
-            max: this.xAxisMax,
+            min: this.xAxisMin ?? undefined,
+            max: this.xAxisMax ?? undefined,
             type: 'time',
             grid: {
               display: false,
@@ -334,7 +334,7 @@ export default defineComponent({
     <div class="ui header tw-flex tw-items-center tw-justify-between">
       <div>
         <relative-time
-          v-if="xAxisMin > 0"
+          v-if="xAxisMin && xAxisMin > 0"
           format="datetime"
           year="numeric"
           month="short"
@@ -346,7 +346,7 @@ export default defineComponent({
         </relative-time>
         {{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "-" }}
         <relative-time
-          v-if="xAxisMax > 0"
+          v-if="xAxisMax && xAxisMax > 0"
           format="datetime"
           year="numeric"
           month="short"

web_src/js/components/RepoFileSearch.vue

@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import {ref, computed, watch, nextTick, useTemplateRef, onMounted, onUnmounted, type ShallowRef} from 'vue';
+import {generateElemId} from '../utils/dom.ts';
+import {GET} from '../modules/fetch.ts';
+import {filterRepoFilesWeighted} from '../features/repo-findfile.ts';
+import {pathEscapeSegments} from '../utils/url.ts';
+import {SvgIcon} from '../svg.ts';
+import {throttle} from 'throttle-debounce';
+
+const props = defineProps({
+  repoLink: { type: String, required: true },
+  currentRefNameSubURL: { type: String, required: true },
+  treeListUrl: { type: String, required: true },
+  noResultsText: { type: String, required: true },
+  placeholder: { type: String, required: true },
+});
+
+const refElemInput = useTemplateRef('searchInput') as Readonly<ShallowRef<HTMLInputElement>>;
+const refElemPopup = useTemplateRef('searchPopup') as Readonly<ShallowRef<HTMLDivElement>>;
+
+const searchQuery = ref('');
+const allFiles = ref<string[]>([]);
+const selectedIndex = ref(0);
+const isLoadingFileList = ref(false);
+const hasLoadedFileList = ref(false);
+
+const showPopup = computed(() => searchQuery.value.length > 0);
+
+const filteredFiles = computed(() => {
+  if (!searchQuery.value) return [];
+  return filterRepoFilesWeighted(allFiles.value, searchQuery.value);
+});
+
+const applySearchQuery = throttle(300, () => {
+  searchQuery.value = refElemInput.value.value;
+  selectedIndex.value = 0;
+});
+
+const handleSearchInput = () => {
+  loadFileListForSearch();
+  applySearchQuery();
+};
+
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    clearSearch();
+    return;
+  }
+  if (!searchQuery.value || filteredFiles.value.length === 0) return;
+
+  const handleSelectedItem = (idx: number) => {
+    e.preventDefault();
+    selectedIndex.value = idx;
+    const el = refElemPopup.value.querySelector(`.file-search-results > :nth-child(${idx+1} of .item)`);
+    el?.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+  };
+
+  if (e.key === 'ArrowDown') {
+    handleSelectedItem(Math.min(selectedIndex.value + 1, filteredFiles.value.length - 1));
+  } else if (e.key === 'ArrowUp') {
+    handleSelectedItem(Math.max(selectedIndex.value - 1, 0))
+  } else if (e.key === 'Enter') {
+    e.preventDefault();
+    const selectedFile = filteredFiles.value[selectedIndex.value];
+    if (selectedFile) {
+      handleSearchResultClick(selectedFile.matchResult.join(''));
+    }
+  }
+};
+
+const clearSearch = () => {
+  searchQuery.value = '';
+  refElemInput.value.value = '';
+};
+
+
+const handleClickOutside = (e: MouseEvent) => {
+  if (!searchQuery.value) return;
+
+  const target = e.target as HTMLElement;
+  const clickInside = refElemInput.value.contains(target) || refElemPopup.value.contains(target);
+  if (!clickInside) clearSearch();
+};
+
+const loadFileListForSearch = async () => {
+  if (hasLoadedFileList.value || isLoadingFileList.value) return;
+
+  isLoadingFileList.value = true;
+  try {
+    const response = await GET(props.treeListUrl);
+    allFiles.value = await response.json();
+    hasLoadedFileList.value = true;
+  } finally {
+    isLoadingFileList.value = false;
+  }
+};
+
+function handleSearchResultClick(filePath: string) {
+  clearSearch();
+  window.location.href = `${props.repoLink}/src/${pathEscapeSegments(props.currentRefNameSubURL)}/${pathEscapeSegments(filePath)}`;
+}
+
+const updatePosition = () => {
+  if (!showPopup.value) return;
+
+  const rectInput = refElemInput.value.getBoundingClientRect();
+  const rectPopup = refElemPopup.value.getBoundingClientRect();
+  const docElem = document.documentElement;
+  const style = refElemPopup.value.style;
+  style.top = `${docElem.scrollTop + rectInput.bottom + 4}px`;
+  if (rectInput.x + rectPopup.width < docElem.clientWidth) {
+    // enough space to align left with the input
+    style.left = `${docElem.scrollLeft + rectInput.x}px`;
+  } else {
+    // no enough space, align right from the viewport right edge minus page margin
+    const leftPos = docElem.scrollLeft + docElem.getBoundingClientRect().width - rectPopup.width;
+    style.left = `calc(${leftPos}px - var(--page-margin-x))`;
+  }
+};
+
+onMounted(() => {
+  const searchPopupId = generateElemId('file-search-popup-');
+  refElemPopup.value.setAttribute('id', searchPopupId);
+  refElemInput.value.setAttribute('aria-controls', searchPopupId);
+  document.addEventListener('click', handleClickOutside);
+  window.addEventListener('resize', updatePosition);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+  window.removeEventListener('resize', updatePosition);
+});
+
+// Position search results below the input
+watch([searchQuery, filteredFiles], async () => {
+  if (searchQuery.value) {
+    await nextTick();
+    updatePosition();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <div class="ui small input">
+      <input
+        ref="searchInput" :placeholder="placeholder" autocomplete="off"
+        role="combobox" aria-autocomplete="list" :aria-expanded="searchQuery ? 'true' : 'false'"
+        @input="handleSearchInput" @keydown="handleKeyDown"
+      >
+    </div>
+
+    <Teleport to="body">
+      <div v-show="showPopup" ref="searchPopup" class="file-search-popup">
+        <!-- always create the popup by v-show above to avoid null ref, only create the popup content if the popup should be displayed to save memory -->
+        <template v-if="showPopup">
+          <div v-if="filteredFiles.length" role="listbox" class="file-search-results flex-items-block">
+            <div
+              v-for="(result, idx) in filteredFiles" :key="result.matchResult.join('')"
+              :class="['item', { 'selected': idx === selectedIndex }]"
+              role="option" :aria-selected="idx === selectedIndex" @click="handleSearchResultClick(result.matchResult.join(''))"
+              @mouseenter="selectedIndex = idx" :title="result.matchResult.join('')"
+            >
+              <SvgIcon name="octicon-file" class="file-icon"/>
+              <span class="full-path">
+                <span v-for="(part, index) in result.matchResult" :key="index">{{ part }}</span>
+              </span>
+            </div>
+          </div>
+          <div v-else-if="isLoadingFileList">
+            <div class="is-loading"/>
+          </div>
+          <div v-else class="tw-p-4">
+            {{ props.noResultsText }}
+          </div>
+        </template>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.file-search-popup {
+  position: absolute;
+  background: var(--color-box-body);
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  width: max-content;
+  max-height: min(calc(100vw - 20px), 300px);
+  max-width: min(calc(100vw - 40px), 600px);
+  overflow-y: auto;
+}
+
+.file-search-popup .is-loading {
+  width: 200px;
+  height: 200px;
+}
+
+.file-search-results .item {
+  align-items: flex-start;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-bottom: 1px solid var(--color-secondary);
+}
+
+.file-search-results .item:last-child {
+  border-bottom: none;
+}
+
+.file-search-results .item:hover,
+.file-search-results .item.selected {
+  background-color: var(--color-hover);
+}
+
+.file-search-results .item .file-icon {
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.file-search-results .item .full-path {
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+
+.file-search-results .item .full-path :nth-child(even) {
+  color: var(--color-red);
+  font-weight: var(--font-weight-semibold);
+}
+</style>

web_src/js/components/ViewFileTree.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import ViewFileTreeItem from './ViewFileTreeItem.vue';
-import {onMounted, useTemplateRef} from 'vue';
+import {onMounted, useTemplateRef, type ShallowRef} from 'vue';
 import {createViewFileTreeStore} from './ViewFileTreeStore.ts';
 
-const elRoot = useTemplateRef('elRoot');
+const elRoot = useTemplateRef('elRoot') as Readonly<ShallowRef<HTMLDivElement>>;;
 
 const props = defineProps({
   repoLink: {type: String, required: true},
@@ -24,7 +24,7 @@ onMounted(async () => {
 
 <template>
   <div class="view-file-tree-items" ref="elRoot">
-    <ViewFileTreeItem v-for="item in store.rootFiles" :key="item.name" :item="item" :store="store"/>
+    <ViewFileTreeItem v-for="item in store.rootFiles" :key="item.entryName" :item="item" :store="store"/>
   </div>
 </template>
 

web_src/js/components/ViewFileTreeItem.vue

@@ -4,7 +4,7 @@ import {isPlainClick} from '../utils/dom.ts';
 import {shallowRef} from 'vue';
 import {type createViewFileTreeStore} from './ViewFileTreeStore.ts';
 
-type Item = {
+export type Item = {
   entryName: string;
   entryMode: 'blob' | 'exec' | 'tree' | 'commit' | 'symlink' | 'unknown';
   entryIcon: string;

web_src/js/components/ViewFileTreeStore.ts

@@ -3,10 +3,11 @@ import {GET} from '../modules/fetch.ts';
 import {pathEscapeSegments} from '../utils/url.ts';
 import {createElementFromHTML} from '../utils/dom.ts';
 import {html} from '../utils/html.ts';
+import type {Item} from './ViewFileTreeItem.vue';
 
 export function createViewFileTreeStore(props: {repoLink: string, treePath: string, currentRefNameSubURL: string}) {
   const store = reactive({
-    rootFiles: [],
+    rootFiles: [] as Array<Item>,
     selectedItem: props.treePath,
 
     async loadChildren(treePath: string, subPath: string = '') {
@@ -17,7 +18,7 @@ export function createViewFileTreeStore(props: {repoLink: string, treePath: stri
         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>`);
+        const svgContainer = createElementFromHTML(html`<div class="global-svg-icon-pool svg-icon-container"></div>`);
         svgContainer.innerHTML = poolSvgs.join('');
         document.body.append(svgContainer);
       }
@@ -28,7 +29,7 @@ export function createViewFileTreeStore(props: {repoLink: string, treePath: stri
       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');
+      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
@@ -39,7 +40,7 @@ export function createViewFileTreeStore(props: {repoLink: string, treePath: stri
 
     async navigateTreeView(treePath: string) {
       const url = store.buildTreePathWebUrl(treePath);
-      window.history.pushState({treePath, url}, null, url);
+      window.history.pushState({treePath, url}, '', url);
       store.selectedItem = treePath;
       await store.loadViewContent(url);
     },