update title when changing file via file tree

templates/repo/view_file_tree.tmpl

@@ -10,6 +10,7 @@
 {{/* TODO: Dynamically move components such as refSelector and createPR here */}}
 <div id="view-file-tree" class="tw-overflow-auto tw-h-full is-loading"
 	data-repo-link="{{.RepoLink}}"
+	data-repo-name="{{.Repository.Name}}"
 	data-tree-path="{{$.TreePath}}"
 	data-current-ref-name-sub-url="{{.RefTypeNameSubURL}}"
 ></div>

web_src/js/components/ViewFileTree.vue

@@ -7,6 +7,7 @@ const elRoot = useTemplateRef('elRoot');
 
 const props = defineProps({
   repoLink: {type: String, required: true},
+  repoName: {type: String, required: true},
   treePath: {type: String, required: true},
   currentRefNameSubURL: {type: String, required: true},
 });

web_src/js/components/ViewFileTreeStore.ts

@@ -4,7 +4,7 @@ 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}) {
+export function createViewFileTreeStore(props: {repoLink: string, repoName: string, treePath: string, currentRefNameSubURL: string}) {
   const store = reactive({
     rootFiles: [],
     selectedItem: props.treePath,
@@ -32,14 +32,23 @@ export function createViewFileTreeStore(props: {repoLink: string, treePath: stri
 
     async navigateTreeView(treePath: string) {
       const url = store.buildTreePathWebUrl(treePath);
+      const title = store.buildTitle(store.selectedItem, treePath);
       window.history.pushState({treePath, url}, null, url);
       store.selectedItem = treePath;
       await store.loadViewContent(url);
+      document.title = title;
     },
 
     buildTreePathWebUrl(treePath: string) {
       return `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
     },
+
+    buildTitle(oldTreePath: string, treePath: string) {
+      // the title always starts with "<repoName>/<treePath>"
+      const oldPrefixLength = props.repoName.length + 1 + oldTreePath.length;
+      const titleSuffix = document.title.substring(oldPrefixLength);
+      return `${props.repoName}/${treePath}${titleSuffix}`;
+    },
   });
   return store;
 }

web_src/js/features/repo-view-file-tree.ts

@@ -31,6 +31,7 @@ export async function initRepoViewFileTree() {
   const fileTree = sidebar.querySelector('#view-file-tree');
   createApp(ViewFileTree, {
     repoLink: fileTree.getAttribute('data-repo-link'),
+    repoName: fileTree.getAttribute('data-repo-name'),
     treePath: fileTree.getAttribute('data-tree-path'),
     currentRefNameSubURL: fileTree.getAttribute('data-current-ref-name-sub-url'),
   }).mount(fileTree);