fix error

Author: kerwin612

templates/repo/home.tmpl

@@ -58,31 +58,28 @@
 			</div>
 		{{end}}
 		{{template "repo/sub_menu" .}}
-    {{if $showTree}}
+		{{if $showTree}}
 		<div class="tree-container">
 			<div id="view-file-tree" class="file-tree tree-left tw-hidden not-mobile"></div>
-			<script>
-				const viewTreeVisible = localStorage?.getItem('view_file_tree_visible') !== 'false';
-				if (viewTreeVisible) document.getElementById('view-file-tree').classList.remove('tw-hidden');
-			</script>
 			<div class="tree-right">
 		{{end}}
 		<div class="repo-button-row" data-is-homepage="{{$isHomepage}}">
 			<div class="repo-button-row-left">
-        {{if $showTree}}
-        <button class="view-toggle-file-tree-button not-mobile btn interact-fg" data-show-text="{{ctx.Locale.Tr "repo.view.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.view.hide_file_tree"}}">
-          {{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
-          {{svg "octicon-sidebar-collapse" 20 "icon tw-hidden"}}
-          {{svg "octicon-sidebar-expand" 20 "icon tw-hidden"}}
-        </button>
-        <script>
-          // Default to true if unset
-          const viewTreeBtn = document.querySelector('.view-toggle-file-tree-button');
-          const viewTreeIcon = `.octicon-sidebar-${viewTreeVisible ? 'expand' : 'collapse'}`;
-          viewTreeBtn.querySelector(viewTreeIcon).classList.remove('tw-hidden');
-          viewTreeBtn.setAttribute('data-tooltip-content', viewTreeBtn.getAttribute(viewTreeVisible ? 'data-hide-text' : 'data-show-text'));
-        </script>
-        {{end}}
+				{{if $showTree}}
+				<button class="view-toggle-file-tree-button ui compact basic button icon not-mobile" data-show-text="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}" data-hide-text="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
+					{{/* the icon meaning is reversed here, "octicon-sidebar-collapse" means show the file tree */}}
+					{{svg "octicon-sidebar-collapse" 20 "icon tw-hidden"}}
+					{{svg "octicon-sidebar-expand" 20 "icon tw-hidden"}}
+				</button>
+				<script>
+					// Default to false
+					const viewTreeVisible = false;
+					const viewTreeBtn = document.querySelector('.view-toggle-file-tree-button');
+					const viewTreeIcon = `.octicon-sidebar-${viewTreeVisible ? 'expand' : 'collapse'}`;
+					viewTreeBtn.querySelector(viewTreeIcon).classList.remove('tw-hidden');
+					viewTreeBtn.setAttribute('data-tooltip-content', viewTreeBtn.getAttribute(viewTreeVisible ? 'data-hide-text' : 'data-show-text'));
+				</script>
+				{{end}}
 				{{$branchDropdownCurrentRefType := "branch"}}
 				{{$branchDropdownCurrentRefShortName := .BranchName}}
 				{{if .IsViewTag}}

web_src/js/components/DiffFileTree.vue

@@ -146,11 +146,11 @@ function getIconForDiffType(pType) {
 
 <template>
   <FileTree
+    v-if="store.fileTreeIsVisible"
     id="diff-file-tree"
     :is-loading="false"
     :files="fileTree"
     :collapsed="false"
-    :visible="store.fileTreeIsVisible"
     :selected="store.selectedItem"
     :file-class-getter="(selected, item) => ({'selected': selected === '#tree-node-' + item.file.NameHash, 'viewed': item.file.IsViewed})"
     :file-url-getter="item => '#tree-node-' + item.file.NameHash"

web_src/js/components/FileTree.vue

@@ -1,45 +1,25 @@
 <script lang="ts" setup>
 import {SvgIcon} from '../svg.ts';
 import FileTreeItem from './FileTreeItem.vue';
-// import {toggleElem} from '../utils/dom.ts';
-// import {setFileFolding} from '../features/file-fold.ts';
 
 defineProps<{
   id: string,
   files: any[],
-  visible: boolean,
   selected: string,
   isLoading: boolean,
   collapsed: boolean,
   fileUrlGetter: any,
   fileClassGetter?: any,
   loadChildren?: any
 }>();
-
-// function expandSelectedFile() {
-//   // expand file if the selected file is folded
-//   if (props.selected) {
-//     const box = document.querySelector(props.selected);
-//     const folded = box?.getAttribute('data-folded') === 'true';
-//     if (folded) setFileFolding(box, box.querySelector('.fold-file'), false);
-//   }
-// }
-
-// function toggleVisibility() {
-//   updateState(!props.visible);
-// }
-
-// function updateState(visible) {
-//   toggleElem(document.querySelector(`#${props.id}`), visible);
-// }
 </script>
 
 <template>
-  <div v-if="visible" class="file-tree-items">
-    <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
-    <SvgIcon v-if="isLoading" name="octicon-sync" class="job-status-rotate"/>
+  <div v-if="isLoading" class="file-tree-loading">
+    <SvgIcon name="octicon-sync" class="job-status-rotate"/>
+  </div>
+  <div v-else class="file-tree-items">
     <FileTreeItem
-      v-else
       v-for="item in files"
       :key="item.name"
       :item="item"
@@ -58,10 +38,15 @@ defineProps<{
 </template>
 
 <style scoped>
+.file-tree-loading {
+  margin-top: 8px;
+  text-align: center;
+}
 .file-tree-items {
   display: flex;
   flex-direction: column;
   gap: 1px;
+  margin-top: 8px;
   margin-right: .5rem;
 }
 </style>

web_src/js/components/ViewFileTree.vue

@@ -13,8 +13,8 @@ const store = viewTreeStore();
 const isLoading = ref(false);
 
 onMounted(async () => {
-  // Default to true if unset
-  updateVisibility(localStorage.getItem(LOCAL_STORAGE_KEY) !== 'false');
+  // Default to false
+  updateVisibility(false);
   document.querySelector('.view-toggle-file-tree-button').addEventListener('click', toggleVisibility);
 
   hashChangeListener();
@@ -24,8 +24,6 @@ onMounted(async () => {
   const files = await loadChildren();
   store.files = files;
   isLoading.value = false;
-
-  window.localStorage.setItem(`${LOCAL_STORAGE_KEY}-/`, files);
 });
 
 onUnmounted(() => {
@@ -81,11 +79,11 @@ async function loadChildren(item?) {
 
 <template>
   <FileTree
+    v-if="store.fileTreeIsVisible"
     id="view-file-tree"
     :is-loading="isLoading"
     :files="store.files"
     :collapsed="true"
-    :visible="store.fileTreeIsVisible"
     :selected="store.selectedItem"
     :file-url-getter="item => item.file.html_url"
     :load-children="loadChildren"