1 files changed, 6 insertions, 40 deletions
diff --git a/web_src/js/components/ViewFileTree.vue b/web_src/js/components/ViewFileTree.vue
index c692142792..d560824159 100644
--- a/web_src/js/components/ViewFileTree.vue
+++ b/web_src/js/components/ViewFileTree.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import ViewFileTreeItem from './ViewFileTreeItem.vue';
 import {onMounted, ref} from 'vue';
-import {pathEscapeSegments} from '../utils/url.ts';
-import {GET} from '../modules/fetch.ts';
-import {createElementFromHTML} from '../utils/dom.ts';
+import {createViewFileTreeStore} from './ViewFileTreeStore.ts';
 
 const elRoot = ref<HTMLElement | null>(null);
 
@@ -13,52 +11,20 @@ const props = defineProps({
   currentRefNameSubURL: {type: String, required: true},
 });
 
-const files = ref([]);
-const selectedItem = ref('');
-
-async function 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('<div class="global-svg-icon-pool tw-hidden"></div>');
-    svgContainer.innerHTML = poolSvgs.join('');
-    document.body.append(svgContainer);
-  }
-  return json.fileTreeNodes ?? null;
-}
-
-async function loadViewContent(url: string) {
-  url = url.includes('?') ? url.replace('?', '?only_content=true') : `${url}?only_content=true`;
-  const response = await GET(url);
-  document.querySelector('.repo-view-content').innerHTML = await response.text();
-}
-
-async function navigateTreeView(treePath: string) {
-  const url = `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
-  window.history.pushState({treePath, url}, null, url);
-  selectedItem.value = treePath;
-  await loadViewContent(url);
-}
-
+const store = createViewFileTreeStore(props);
 onMounted(async () => {
-  selectedItem.value = props.treePath;
-  files.value = await loadChildren('', props.treePath);
+  store.rootFiles = await store.loadChildren('', props.treePath);
   elRoot.value.closest('.is-loading')?.classList?.remove('is-loading');
   window.addEventListener('popstate', (e) => {
-    selectedItem.value = e.state?.treePath || '';
-    if (e.state?.url) loadViewContent(e.state.url);
+    store.selectedItem = e.state?.treePath || '';
+    if (e.state?.url) store.loadViewContent(e.state.url);
   });
 });
 </script>
 
 <template>
   <div class="view-file-tree-items" ref="elRoot">
-    <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
-    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :navigate-view-content="navigateTreeView" :load-children="loadChildren"/>
+    <ViewFileTreeItem v-for="item in store.rootFiles" :key="item.name" :item="item" :store="store"/>
   </div>
 </template>