Merge 09824921f69c837b8e585a9445d4bb2d7acf8d90 into 21af8150b7ba315a9f75264ab77813b0b7c697a8

options/locale/locale_en-US.ini

@@ -2593,7 +2593,6 @@ diff.commit = commit
 diff.git-notes = Notes
 diff.data_not_available = Diff Content Not Available
 diff.options_button = Diff Options
-diff.show_diff_stats = Show Stats
 diff.download_patch = Download Patch File
 diff.download_diff = Download Diff File
 diff.show_split_view = Split View

routers/web/repo/commit.go

@@ -344,18 +344,30 @@ func Diff(ctx *context.Context) {
 	ctx.Data["Reponame"] = repoName
 
 	var parentCommit *git.Commit
+	var parentCommitID string
 	if commit.ParentCount() > 0 {
 		parentCommit, err = gitRepo.GetCommit(parents[0])
 		if err != nil {
 			ctx.NotFound(err)
 			return
 		}
+		parentCommitID = parentCommit.ID.String()
 	}
 	setCompareContext(ctx, parentCommit, commit, userName, repoName)
 	ctx.Data["Title"] = commit.Summary() + " · " + base.ShortSha(commitID)
 	ctx.Data["Commit"] = commit
 	ctx.Data["Diff"] = diff
 
+	if !fileOnly {
+		diffTree, err := gitdiff.GetDiffTree(ctx, gitRepo, false, parentCommitID, commitID)
+		if err != nil {
+			ctx.ServerError("GetDiffTree", err)
+			return
+		}
+
+		ctx.Data["DiffTree"] = transformDiffTreeForUI(diffTree, nil)
+	}
+
 	statuses, _, err := git_model.GetLatestCommitStatus(ctx, ctx.Repo.Repository.ID, commitID, db.ListOptionsAll)
 	if err != nil {
 		log.Error("GetLatestCommitStatus: %v", err)

routers/web/repo/compare.go

@@ -633,6 +633,16 @@ func PrepareCompareDiff(
 	ctx.Data["Diff"] = diff
 	ctx.Data["DiffNotAvailable"] = diff.NumFiles == 0
 
+	if !fileOnly {
+		diffTree, err := gitdiff.GetDiffTree(ctx, ci.HeadGitRepo, false, beforeCommitID, headCommitID)
+		if err != nil {
+			ctx.ServerError("GetDiffTree", err)
+			return false
+		}
+
+		ctx.Data["DiffTree"] = transformDiffTreeForUI(diffTree, nil)
+	}
+
 	headCommit, err := ci.HeadGitRepo.GetCommit(headCommitID)
 	if err != nil {
 		ctx.ServerError("GetCommit", err)

routers/web/repo/pull.go

@@ -761,6 +761,7 @@ func viewPullFiles(ctx *context.Context, specifiedStartCommit, specifiedEndCommi
 
 	var methodWithError string
 	var diff *gitdiff.Diff
+	shouldGetUserSpecificDiff := false
 
 	// if we're not logged in or only a single commit (or commit range) is shown we
 	// have to load only the diff and not get the viewed information
@@ -772,6 +773,7 @@ func viewPullFiles(ctx *context.Context, specifiedStartCommit, specifiedEndCommi
 	} else {
 		diff, err = gitdiff.SyncAndGetUserSpecificDiff(ctx, ctx.Doer.ID, pull, gitRepo, diffOptions, files...)
 		methodWithError = "SyncAndGetUserSpecificDiff"
+		shouldGetUserSpecificDiff = true
 	}
 	if err != nil {
 		ctx.ServerError(methodWithError, err)
@@ -816,6 +818,27 @@ func viewPullFiles(ctx *context.Context, specifiedStartCommit, specifiedEndCommi
 		}
 	}
 
+	if !fileOnly {
+		// note: use mergeBase is set to false because we already have the merge base from the pull request info
+		diffTree, err := gitdiff.GetDiffTree(ctx, gitRepo, false, pull.MergeBase, headCommitID)
+		if err != nil {
+			ctx.ServerError("GetDiffTree", err)
+			return
+		}
+
+		filesViewedState := make(map[string]pull_model.ViewedState)
+		if shouldGetUserSpecificDiff {
+			// This sort of sucks because we already fetch this when getting the diff
+			review, err := pull_model.GetNewestReviewState(ctx, ctx.Doer.ID, issue.ID)
+			if !(err != nil || review == nil || review.UpdatedFiles == nil) {
+				// If there wasn't an error and we have a review with updated files, use that
+				filesViewedState = review.UpdatedFiles
+			}
+		}
+
+		ctx.Data["DiffFiles"] = transformDiffTreeForUI(diffTree, filesViewedState)
+	}
+
 	ctx.Data["Diff"] = diff
 	ctx.Data["DiffNotAvailable"] = diff.NumFiles == 0
 

routers/web/repo/treelist.go

@@ -6,9 +6,11 @@ package repo
 import (
 	"net/http"
 
+	pull_model "code.gitea.io/gitea/models/pull"
 	"code.gitea.io/gitea/modules/base"
 	"code.gitea.io/gitea/modules/git"
 	"code.gitea.io/gitea/services/context"
+	"code.gitea.io/gitea/services/gitdiff"
 
 	"github.com/go-enry/go-enry/v2"
 )
@@ -52,3 +54,40 @@ func isExcludedEntry(entry *git.TreeEntry) bool {
 
 	return false
 }
+
+type FileDiffFile struct {
+	Name        string
+	NameHash    string
+	IsSubmodule bool
+	IsBinary    bool
+	IsViewed    bool
+	Status      string
+}
+
+// transformDiffTreeForUI transforms a DiffTree into a slice of FileDiffFile for UI rendering
+// it also takes a map of file names to their viewed state, which is used to mark files as viewed
+func transformDiffTreeForUI(diffTree *gitdiff.DiffTree, filesViewedState map[string]pull_model.ViewedState) []FileDiffFile {
+	files := make([]FileDiffFile, 0, len(diffTree.Files))
+
+	for _, file := range diffTree.Files {
+		nameHash := git.HashFilePathForWebUI(file.HeadPath)
+		isSubmodule := file.HeadMode == git.EntryModeCommit
+		isBinary := file.HeadMode == git.EntryModeExec
+
+		isViewed := false
+		if fileViewedState, ok := filesViewedState[file.Path()]; ok {
+			isViewed = (fileViewedState == pull_model.Viewed)
+		}
+
+		files = append(files, FileDiffFile{
+			Name:        file.HeadPath,
+			NameHash:    nameHash,
+			IsSubmodule: isSubmodule,
+			IsBinary:    isBinary,
+			IsViewed:    isViewed,
+			Status:      file.Status,
+		})
+	}
+
+	return files
+}

services/gitdiff/git_diff_tree.go

@@ -34,6 +34,13 @@ type DiffTreeRecord struct {
 	BaseBlobID string
 }
 
+func (d *DiffTreeRecord) Path() string {
+	if d.HeadPath != "" {
+		return d.HeadPath
+	}
+	return d.BasePath
+}
+
 // GetDiffTree returns the list of path of the files that have changed between the two commits.
 // If useMergeBase is true, the diff will be calculated using the merge base of the two commits.
 // This is the same behavior as using a three-dot diff in git diff.

templates/repo/diff/box.tmpl

@@ -58,7 +58,8 @@
 			</div>
 		{{end}}
 		<script id="diff-data-script" type="module">
-			const diffDataFiles = [{{range $i, $file := .Diff.Files}}{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Type:{{$file.Type}},IsBin:{{$file.IsBin}},IsSubmodule:{{$file.IsSubmodule}},Addition:{{$file.Addition}},Deletion:{{$file.Deletion}},IsViewed:{{$file.IsViewed}}},{{end}}];
+			const diffDataFiles = [{{range $i, $file := .DiffFiles}}
+				{Name:"{{$file.Name}}",NameHash:"{{$file.NameHash}}",Status:{{$file.Status}},IsSubmodule:{{$file.IsSubmodule}},IsViewed:{{$file.IsViewed}}},{{end}}];
 			const diffData = {
 				isIncomplete: {{.Diff.IsIncomplete}},
 				tooManyFilesMessage: "{{ctx.Locale.Tr "repo.diff.too_many_files"}}",

templates/repo/diff/options_dropdown.tmpl

@@ -1,7 +1,6 @@
 <div class="ui dropdown tiny basic button" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.options_button"}}">
 	{{svg "octicon-kebab-horizontal"}}
 	<div class="menu">
-		<a class="item" id="show-file-list-btn">{{ctx.Locale.Tr "repo.diff.show_diff_stats"}}</a>
 		{{if .Issue.Index}}
 			<a class="item" href="{{$.RepoLink}}/pulls/{{.Issue.Index}}.patch" download="{{.Issue.Index}}.patch">{{ctx.Locale.Tr "repo.diff.download_patch"}}</a>
 			<a class="item" href="{{$.RepoLink}}/pulls/{{.Issue.Index}}.diff" download="{{.Issue.Index}}.diff">{{ctx.Locale.Tr "repo.diff.download_diff"}}</a>

web_src/js/components/DiffFileList.vue

@@ -1,60 +0,0 @@
-<script lang="ts" setup>
-import {onMounted, onUnmounted} from 'vue';
-import {loadMoreFiles} from '../features/repo-diff.ts';
-import {diffTreeStore} from '../modules/stores.ts';
-
-const store = diffTreeStore();
-
-onMounted(() => {
-  document.querySelector('#show-file-list-btn').addEventListener('click', toggleFileList);
-});
-
-onUnmounted(() => {
-  document.querySelector('#show-file-list-btn').removeEventListener('click', toggleFileList);
-});
-
-function toggleFileList() {
-  store.fileListIsVisible = !store.fileListIsVisible;
-}
-
-function diffTypeToString(pType: number) {
-  const diffTypes: Record<string, string> = {
-    '1': 'add',
-    '2': 'modify',
-    '3': 'del',
-    '4': 'rename',
-    '5': 'copy',
-  };
-  return diffTypes[String(pType)];
-}
-
-function diffStatsWidth(adds: number, dels: number) {
-  return `${adds / (adds + dels) * 100}%`;
-}
-
-function loadMoreData() {
-  loadMoreFiles(store.linkLoadMore);
-}
-</script>
-
-<template>
-  <ol class="diff-stats tw-m-0" ref="root" v-if="store.fileListIsVisible">
-    <li v-for="file in store.files" :key="file.NameHash">
-      <div class="tw-font-semibold tw-flex tw-items-center pull-right">
-        <span v-if="file.IsBin" class="tw-ml-0.5 tw-mr-2">{{ store.binaryFileMessage }}</span>
-        {{ file.IsBin ? '' : file.Addition + file.Deletion }}
-        <span v-if="!file.IsBin" class="diff-stats-bar tw-mx-2" :data-tooltip-content="store.statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
-          <div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }"/>
-        </span>
-      </div>
-      <!-- todo finish all file status, now modify, add, delete and rename -->
-      <span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)">&nbsp;</span>
-      <a class="file tw-font-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
-    </li>
-    <li v-if="store.isIncomplete" class="tw-pt-1">
-      <span class="file tw-flex tw-items-center tw-justify-between">{{ store.tooManyFilesMessage }}
-        <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
-      </span>
-    </li>
-  </ol>
-</template>

web_src/js/components/DiffFileTree.vue

@@ -1,75 +1,18 @@
 <script lang="ts" setup>
-import DiffFileTreeItem, {type Item} from './DiffFileTreeItem.vue';
-import {loadMoreFiles} from '../features/repo-diff.ts';
+import DiffFileTreeItem from './DiffFileTreeItem.vue';
 import {toggleElem} from '../utils/dom.ts';
 import {diffTreeStore} from '../modules/stores.ts';
 import {setFileFolding} from '../features/file-fold.ts';
-import {computed, onMounted, onUnmounted} from 'vue';
+import {computed, nextTick, onMounted, onUnmounted} from 'vue';
+import {pathListToTree, mergeChildIfOnlyOneDir} from './file_tree.ts';
 
 const LOCAL_STORAGE_KEY = 'diff_file_tree_visible';
 
 const store = diffTreeStore();
 
 const fileTree = computed(() => {
-  const result: Array<Item> = [];
-  for (const file of store.files) {
-    // Split file into directories
-    const splits = file.Name.split('/');
-    let index = 0;
-    let parent = null;
-    let isFile = false;
-    for (const split of splits) {
-      index += 1;
-      // reached the end
-      if (index === splits.length) {
-        isFile = true;
-      }
-      let newParent: Item = {
-        name: split,
-        children: [],
-        isFile,
-      };
-
-      if (isFile === true) {
-        newParent.file = file;
-      }
-
-      if (parent) {
-        // check if the folder already exists
-        const existingFolder = parent.children.find(
-          (x) => x.name === split,
-        );
-        if (existingFolder) {
-          newParent = existingFolder;
-        } else {
-          parent.children.push(newParent);
-        }
-      } else {
-        const existingFolder = result.find((x) => x.name === split);
-        if (existingFolder) {
-          newParent = existingFolder;
-        } else {
-          result.push(newParent);
-        }
-      }
-      parent = newParent;
-    }
-  }
-  const mergeChildIfOnlyOneDir = (entries: Array<Record<string, any>>) => {
-    for (const entry of entries) {
-      if (entry.children) {
-        mergeChildIfOnlyOneDir(entry.children);
-      }
-      if (entry.children.length === 1 && entry.children[0].isFile === false) {
-        // Merge it to the parent
-        entry.name = `${entry.name}/${entry.children[0].name}`;
-        entry.children = entry.children[0].children;
-      }
-    }
-  };
-  // Merge folders with just a folder as children in order to
-  // reduce the depth of our tree.
-  mergeChildIfOnlyOneDir(result);
+  const result = pathListToTree(store.files);
+  mergeChildIfOnlyOneDir(result); // mutation
   return result;
 });
 
@@ -78,8 +21,8 @@ onMounted(() => {
   store.fileTreeIsVisible = localStorage.getItem(LOCAL_STORAGE_KEY) !== 'false';
   document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', toggleVisibility);
 
-  hashChangeListener();
   window.addEventListener('hashchange', hashChangeListener);
+  nextTick(hashChangeListener);
 });
 
 onUnmounted(() => {
@@ -121,19 +64,12 @@ function updateState(visible: boolean) {
   toggleElem(toShow, !visible);
   toggleElem(toHide, visible);
 }
-
-function loadMoreData() {
-  loadMoreFiles(store.linkLoadMore);
-}
 </script>
 
 <template>
   <div v-if="store.fileTreeIsVisible" class="diff-file-tree-items">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
-    <div v-if="store.isIncomplete" class="tw-pt-1">
-      <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
-    </div>
   </div>
 </template>
 

web_src/js/components/DiffFileTreeItem.vue

@@ -2,21 +2,7 @@
 import {SvgIcon, type SvgName} from '../svg.ts';
 import {diffTreeStore} from '../modules/stores.ts';
 import {ref} from 'vue';
-
-type File = {
-  Name: string;
-  NameHash: string;
-  Type: number;
-  IsViewed: boolean;
-  IsSubmodule: boolean;
-}
-
-export type Item = {
-  name: string;
-  isFile: boolean;
-  file?: File;
-  children?: Item[];
-};
+import {type Item, type File, type FileStatus} from './file_tree.ts';
 
 defineProps<{
   item: Item,
@@ -25,15 +11,16 @@ defineProps<{
 const store = diffTreeStore();
 const collapsed = ref(false);
 
-function getIconForDiffType(pType: number) {
-  const diffTypes: Record<string, {name: SvgName, classes: Array<string>}> = {
-    '1': {name: 'octicon-diff-added', classes: ['text', 'green']},
-    '2': {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
-    '3': {name: 'octicon-diff-removed', classes: ['text', 'red']},
-    '4': {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
-    '5': {name: 'octicon-diff-renamed', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
+function getIconForDiffStatus(pType: FileStatus) {
+  const diffTypes: Record<FileStatus, { name: SvgName, classes: Array<string> }> = {
+    'added': {name: 'octicon-diff-added', classes: ['text', 'green']},
+    'modified': {name: 'octicon-diff-modified', classes: ['text', 'yellow']},
+    'deleted': {name: 'octicon-diff-removed', classes: ['text', 'red']},
+    'renamed': {name: 'octicon-diff-renamed', classes: ['text', 'teal']},
+    'copied': {name: 'octicon-diff-renamed', classes: ['text', 'green']},
+    'typechange': {name: 'octicon-diff-modified', classes: ['text', 'green']}, // there is no octicon for copied, so renamed should be ok
   };
-  return diffTypes[String(pType)];
+  return diffTypes[pType];
 }
 
 function fileIcon(file: File) {
@@ -54,21 +41,31 @@ function fileIcon(file: File) {
     <!-- file -->
     <SvgIcon :name="fileIcon(item.file)"/>
     <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
-    <SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).classes"/>
+    <SvgIcon
+      :name="getIconForDiffStatus(item.file.Status).name"
+      :class="getIconForDiffStatus(item.file.Status).classes"
+    />
   </a>
-  <div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
+
+  <template v-else-if="item.isFile === false">
+    <div class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
       <!-- directory -->
       <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
-    <SvgIcon class="text primary" :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"/>
+      <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="item.children?.length" v-show="!collapsed" class="sub-items">
+    <div v-show="!collapsed" class="sub-items">
       <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem"/>
     </div>
   </template>
+</template>
 <style scoped>
-a, a:hover {
+a,
+a:hover {
   text-decoration: none;
   color: var(--color-text);
 }

web_src/js/components/file_tree.ts

@@ -0,0 +1,90 @@
+export type FileStatus = 'added' | 'modified' | 'deleted' | 'renamed' | 'copied' | 'typechange';
+
+export type File = {
+  Name: string;
+  NameHash: string;
+  Status: FileStatus;
+  IsViewed: boolean;
+  IsSubmodule: boolean;
+}
+
+type DirItem = {
+    isFile: false;
+    name: string;
+    path: string;
+
+    // we disable eslint here because we have a recursive type definition
+    // eslint-disable-next-line no-use-before-define
+    children: Item[];
+}
+
+type FileItem = {
+    isFile: true;
+    name: string;
+    path: string;
+    file: File;
+}
+
+export type Item = DirItem | FileItem;
+
+export function pathListToTree(fileEntries: File[]): Item[] {
+  const pathToItem = new Map<string, DirItem>();
+
+    // init root node
+  const root: DirItem = {name: '', path: '', isFile: false, children: []};
+  pathToItem.set('', root);
+
+  for (const fileEntry of fileEntries) {
+    const [parentPath, fileName] = splitPathLast(fileEntry.Name);
+
+    let parentItem = pathToItem.get(parentPath);
+    if (!parentItem) {
+      parentItem = constructParents(pathToItem, parentPath);
+    }
+
+    const fileItem: FileItem = {name: fileName, path: fileEntry.Name, isFile: true, file: fileEntry};
+
+    parentItem.children.push(fileItem);
+  }
+
+  return root.children;
+}
+
+function constructParents(pathToItem: Map<string, DirItem>, dirPath: string): DirItem {
+  const [dirParentPath, dirName] = splitPathLast(dirPath);
+
+  let parentItem = pathToItem.get(dirParentPath);
+  if (!parentItem) {
+        // if the parent node does not exist, create it
+    parentItem = constructParents(pathToItem, dirParentPath);
+  }
+
+  const dirItem: DirItem = {name: dirName, path: dirPath, isFile: false, children: []};
+  parentItem.children.push(dirItem);
+  pathToItem.set(dirPath, dirItem);
+
+  return dirItem;
+}
+
+function splitPathLast(path: string): [string, string] {
+  const lastSlash = path.lastIndexOf('/');
+  return [path.substring(0, lastSlash), path.substring(lastSlash + 1)];
+}
+
+export function mergeChildIfOnlyOneDir(nodes: Item[]): void {
+  for (const node of nodes) {
+    if (node.isFile) {
+      continue;
+    }
+    const dir = node as DirItem;
+
+    mergeChildIfOnlyOneDir(dir.children);
+
+    if (dir.children.length === 1 && dir.children[0].isFile === false) {
+      const child = dir.children[0];
+      dir.name = `${dir.name}/${child.name}`;
+      dir.path = child.path;
+      dir.children = child.children;
+    }
+  }
+}

web_src/js/features/repo-diff-filetree.ts

@@ -1,6 +1,5 @@
 import {createApp} from 'vue';
 import DiffFileTree from '../components/DiffFileTree.vue';
-import DiffFileList from '../components/DiffFileList.vue';
 
 export function initDiffFileTree() {
   const el = document.querySelector('#diff-file-tree');
@@ -9,11 +8,3 @@ export function initDiffFileTree() {
   const fileTreeView = createApp(DiffFileTree);
   fileTreeView.mount(el);
 }
-
-export function initDiffFileList() {
-  const fileListElement = document.querySelector('#diff-file-list');
-  if (!fileListElement) return;
-
-  const fileListView = createApp(DiffFileList);
-  fileListView.mount(fileListElement);
-}

web_src/js/features/repo-diff.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import {initCompReactionSelector} from './comp/ReactionSelector.ts';
 import {initRepoIssueContentHistory} from './repo-issue-content.ts';
-import {initDiffFileTree, initDiffFileList} from './repo-diff-filetree.ts';
+import {initDiffFileTree} from './repo-diff-filetree.ts';
 import {initDiffCommitSelect} from './repo-diff-commitselect.ts';
 import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.ts';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.ts';
@@ -168,7 +168,7 @@ function onShowMoreFiles() {
   initDiffHeaderPopup();
 }
 
-export async function loadMoreFiles(url: string) {
+async function loadMoreFiles(url: string) {
   const target = document.querySelector('a#diff-show-more-files');
   if (target?.classList.contains('disabled') || pageData.diffFileInfo.isLoadingNewData) {
     return;
@@ -184,8 +184,6 @@ export async function loadMoreFiles(url: string) {
     // the response is a full HTML page, we need to extract the relevant contents:
     // 1. append the newly loaded file list items to the existing list
     $('#diff-incomplete').replaceWith($resp.find('#diff-file-boxes').children());
-    // 2. re-execute the script to append the newly loaded items to the JS variables to refresh the DiffFileTree
-    $('body').append($resp.find('script#diff-data-script'));
 
     onShowMoreFiles();
   } catch (error) {
@@ -234,17 +232,83 @@ function initRepoDiffShowMore() {
   });
 }
 
+function shouldStopLoading() {
+  const hash = window.location.hash;
+
+  if (!hash) {
+    return true; // No hash to look for
+  }
+
+  const targetElement = document.querySelector(hash);
+  if (targetElement) {
+    return true; // The element is already loaded
+  }
+
+  if (!pageData.diffFileInfo.isIncomplete) {
+    return true; // All files are already loaded
+  }
+
+  return false;
+}
+
+// This is a flag to ensure that only one loadUntilFound is running at a time
+let isLoadUntilFoundRunning = false;
+
+async function loadUntilFound() {
+  // this ensures that only one loadUntilFound is running at a time
+  if (isLoadUntilFoundRunning === true) {
+    return;
+  }
+  isLoadUntilFoundRunning = true;
+
+  try {
+    while (!shouldStopLoading()) {
+      const showMoreButton = document.querySelector('#diff-show-more-files');
+      if (!showMoreButton) {
+        console.error('Could not find the show more files button');
+        return;
+      }
+
+      const url = showMoreButton.getAttribute('data-href');
+      if (!url) {
+        console.error('Could not find the data-href attribute of the show more files button');
+        return;
+      }
+
+      // Load more files, await ensures we don't block progress
+      await loadMoreFiles(url);
+    }
+
+    if (window.location.hash) {
+      const targetElement = document.querySelector(window.location.hash);
+      if (targetElement) {
+        targetElement.scrollIntoView();
+      }
+    }
+  } finally {
+    isLoadUntilFoundRunning = false;
+  }
+}
+
+function initRepoDiffHashChangeListener() {
+  const el = document.querySelector('#diff-file-tree');
+  if (!el) return;
+
+  window.addEventListener('hashchange', loadUntilFound);
+  loadUntilFound();
+}
+
 export function initRepoDiffView() {
   initRepoDiffConversationForm();
   if (!$('#diff-file-list').length) return;
   initDiffFileTree();
-  initDiffFileList();
   initDiffCommitSelect();
   initRepoDiffShowMore();
   initDiffHeaderPopup();
   initRepoDiffFileViewToggle();
   initViewedCheckboxListenerFor();
   initExpandAndCollapseFilesButton();
+  initRepoDiffHashChangeListener();
 
   addDelegatedEventListener(document, 'click', '.fold-file', (el) => {
     invertFileFolding(el.closest('.file-content'), el);