add tree sidebar to file view

web_src/css/repo/home.css

@@ -48,6 +48,49 @@
   }
 }
 
+.repo-grid-tree-sidebar {
+  display: grid;
+  grid-template-columns: 300px auto;
+  grid-template-rows: auto auto 1fr;
+}
+
+.repo-grid-tree-sidebar .repo-home-filelist {
+  min-width: 0;
+  grid-column: 2;
+  grid-row: 1 / 4;
+}
+
+.repo-grid-tree-sidebar .repo-view-file-tree-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
+.repo-grid-tree-sidebar .view-file-tree-sidebar-top {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+
+.repo-grid-tree-sidebar .view-file-tree-sidebar-top .button {
+  padding: 6px 10px !important;
+  height: 30px;
+  flex-shrink: 0;
+  margin: 0;
+}
+
+.repo-grid-tree-sidebar .view-file-tree-sidebar-top .sidebar-ref {
+  display: flex;
+  gap: 0.25em;
+}
+
+@media (max-width: 767.98px) {
+  .repo-grid-tree-sidebar {
+    grid-template-columns: auto;
+    grid-template-rows: auto auto auto;
+  }
+}
+
 .language-stats {
   display: flex;
   gap: 2px;

web_src/js/components/ViewFileTree.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import ViewFileTreeItem from './ViewFileTreeItem.vue';
+
+defineProps<{
+  files: any,
+  selectedItem: string,
+  loadChildren: any,
+}>();
+</script>
+
+<template>
+  <div class="view-file-tree-items">
+    <!-- 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" :load-children="loadChildren"/>
+  </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,119 @@
+<script lang="ts" setup>
+import {SvgIcon} from '../svg.ts';
+import {ref} from 'vue';
+
+type Item = {
+  name: string;
+  path: string;
+  htmlUrl: string;
+  isFile: boolean;
+  children?: Item[];
+};
+
+const props = defineProps<{
+  item: Item,
+  loadChildren: any;
+  selectedItem?: string;
+}>();
+
+const isLoading = ref(false);
+const collapsed = ref(!props.item.children);
+const children = ref(props.item.children);
+
+const doLoadChildren = async () => {
+  collapsed.value = !collapsed.value;
+  if (!collapsed.value && props.loadChildren) {
+    isLoading.value = true;
+    const _children = await props.loadChildren(props.item);
+    children.value = _children;
+    isLoading.value = false;
+  }
+};
+
+const doLoadDirContent = () => {
+  doLoadChildren();
+  window.location.href = props.item.htmlUrl;
+};
+
+const doLoadFileContent = () => {
+  window.location.href = props.item.htmlUrl;
+};
+</script>
+
+<template>
+  <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
+  <div
+    v-if="item.isFile" class="item-file"
+    :class="{'selected': selectedItem === item.path}"
+    :title="item.name"
+    @click.stop="doLoadFileContent"
+  >
+    <!-- file -->
+    <SvgIcon name="octicon-file"/>
+    <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
+  </div>
+  <div
+    v-else class="item-directory"
+    :class="{'selected': selectedItem === item.path}"
+    :title="item.name"
+    @click.stop="doLoadDirContent"
+  >
+    <!-- directory -->
+    <SvgIcon v-if="isLoading" name="octicon-sync" class="job-status-rotate"/>
+    <SvgIcon v-else :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'" @click.stop="doLoadChildren"/>
+    <SvgIcon class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/>
+    <span class="gt-ellipsis">{{ item.name }}</span>
+  </div>
+
+  <div v-if="children?.length" v-show="!collapsed" class="sub-items">
+    <ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-children="loadChildren"/>
+  </div>
+</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-directory.selected, .item-file.selected {
+  color: var(--color-text);
+  background: var(--color-active);
+  border-radius: 4px;
+}
+
+.item-file.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/features/repo-view-file-tree-sidebar.ts

@@ -0,0 +1,87 @@
+import {createApp} from 'vue';
+import {toggleElem} from '../utils/dom.ts';
+import {GET, PUT} from '../modules/fetch.ts';
+import ViewFileTree from '../components/ViewFileTree.vue';
+
+async function toggleSidebar(visibility) {
+  const sidebarEl = document.querySelector('.repo-view-file-tree-sidebar');
+  const showBtnEl = document.querySelector('.show-tree-sidebar-button');
+  const refSelectorEl = document.querySelector('.repo-home-filelist .js-branch-tag-selector');
+  const newPrBtnEl = document.querySelector('.repo-home-filelist #new-pull-request');
+  const addFileEl = document.querySelector('.repo-home-filelist .add-file-dropdown');
+  const containerClassList = sidebarEl.parentElement.classList;
+  containerClassList.toggle('repo-grid-tree-sidebar', visibility);
+  containerClassList.toggle('repo-grid-filelist-only', !visibility);
+  toggleElem(sidebarEl, visibility);
+  toggleElem(showBtnEl, !visibility);
+  toggleElem(refSelectorEl, !visibility);
+  toggleElem(newPrBtnEl, !visibility);
+  if (addFileEl) {
+    toggleElem(addFileEl, !visibility);
+  }
+
+  // save to session
+  await PUT('/repo/preferences', {
+    data: {
+      show_file_view_tree_sidebar: visibility,
+    },
+  });
+}
+
+async function loadChildren(item?) {
+  const el = document.querySelector('#view-file-tree');
+  const apiBaseUrl = el.getAttribute('data-api-base-url');
+  const response = await GET(`${apiBaseUrl}/contents/${item ? item.path : ''}`);
+  const json = await response.json();
+  if (json instanceof Array) {
+    return json.map((i) => ({
+      name: i.name,
+      isFile: i.type === 'file',
+      htmlUrl: i.html_url,
+      path: i.path,
+    }));
+  }
+  return null;
+}
+
+async function loadRecursive(treePath) {
+  let root = null;
+  let parent = null;
+  let parentPath = '';
+  for (const i of (`/${treePath}`).split('/')) {
+    const path = `${parentPath}${parentPath ? '/' : ''}${i}`;
+    const result = await loadChildren({path});
+    if (root === null) {
+      root = result;
+      parent = root;
+    } else {
+      parent = parent.find((item) => item.path === path);
+      parent.children = result;
+      parent = result;
+    }
+    parentPath = path;
+  }
+  return root;
+}
+
+export async function initViewFileTreeSidebar() {
+  const sidebarElement = document.querySelector('.repo-view-file-tree-sidebar');
+  if (!sidebarElement) return;
+
+  document.querySelector('.show-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(true);
+  });
+
+  document.querySelector('.hide-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(false);
+  });
+
+  const fileTree = document.querySelector('#view-file-tree');
+  const treePath = fileTree.getAttribute('data-tree-path');
+
+  const files = await loadRecursive(treePath);
+
+  fileTree.classList.remove('center');
+  const fileTreeView = createApp(ViewFileTree, {files, selectedItem: treePath, loadChildren});
+  fileTreeView.mount(fileTree);
+}

web_src/js/index.ts

@@ -33,6 +33,7 @@ import {
 } from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
 import {initRepoTopicBar} from './features/repo-home.ts';
+import {initViewFileTreeSidebar} from './features/repo-view-file-tree-sidebar.ts';
 import {initAdminCommon} from './features/admin/common.ts';
 import {initRepoTemplateSearch} from './features/repo-template.ts';
 import {initRepoCodeView} from './features/repo-code.ts';
@@ -195,6 +196,7 @@ onDomReady(() => {
     initRepoReleaseNew,
     initRepoTemplateSearch,
     initRepoTopicBar,
+    initViewFileTreeSidebar,
     initRepoWikiForm,
     initRepository,
     initRepositoryActionView,