Update tab title when navigating file tree

routers/web/repo/view_file.go

@@ -172,7 +172,7 @@ func prepareFileView(ctx *context.Context, entry *git.TreeEntry) {
 
 	blob := entry.Blob()
 
-	ctx.Data["Title"] = ctx.Tr("repo.file.title", ctx.Repo.Repository.Name+"/"+path.Base(ctx.Repo.TreePath), ctx.Repo.RefFullName.ShortName())
+	ctx.Data["Title"] = ctx.Tr("repo.file.title", ctx.Repo.Repository.Name+"/"+ctx.Repo.TreePath, ctx.Repo.RefFullName.ShortName())
 	ctx.Data["FileIsSymlink"] = entry.IsLink()
 	ctx.Data["FileTreePath"] = ctx.Repo.TreePath
 	ctx.Data["RawFileLink"] = ctx.Repo.RepoLink + "/raw/" + ctx.Repo.RefTypeNameSubURL() + "/" + util.PathEscapeSegments(ctx.Repo.TreePath)

routers/web/repo/view_home.go

@@ -7,7 +7,6 @@ import (
 	"errors"
 	"fmt"
 	"net/http"
-	"path"
 	"strconv"
 	"strings"
 	"time"
@@ -146,7 +145,7 @@ func prepareToRenderDirectory(ctx *context.Context) {
 
 	if ctx.Repo.TreePath != "" {
 		ctx.Data["HideRepoInfo"] = true
-		ctx.Data["Title"] = ctx.Tr("repo.file.title", ctx.Repo.Repository.Name+"/"+path.Base(ctx.Repo.TreePath), ctx.Repo.RefFullName.ShortName())
+		ctx.Data["Title"] = ctx.Tr("repo.file.title", ctx.Repo.Repository.Name+"/"+ctx.Repo.TreePath, ctx.Repo.RefFullName.ShortName())
 	}
 
 	subfolder, readmeFile, err := findReadmeFileInEntries(ctx, ctx.Repo.TreePath, entries, true)

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);