From facb60b299c797c71399a8b52f0ea47b10dab2da Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Fri, 21 Mar 2025 05:53:43 +0000
Subject: [PATCH 1/4] Mark parent directory as viewed when all files are viewed
 (fixes #25644)

---
 web_src/js/components/DiffFileTreeItem.vue | 17 +++++++++++------
 web_src/js/utils/filetree.ts               |  4 ++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 5ee0e5bcaa181..bb937dd90e1d9 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,15 +1,19 @@
 <script lang="ts" setup>
 import {SvgIcon, type SvgName} from '../svg.ts';
 import {diffTreeStore} from '../modules/stores.ts';
-import {ref} from 'vue';
+import {computed, ref} from 'vue';
+import {fileIsViewed} from '../utils/filetree.ts';
 import type {Item, File, FileStatus} from '../utils/filetree.ts';
 
-defineProps<{
+const props = defineProps<{
   item: Item,
 }>();
 
 const store = diffTreeStore();
-const collapsed = ref(false);
+const isViewed = computed(() => {
+  return fileIsViewed(props.item);
+});
+const collapsed = ref(isViewed.value);
 
 function getIconForDiffStatus(pType: FileStatus) {
   const diffTypes: Record<FileStatus, { name: SvgName, classes: Array<string> }> = {
@@ -35,7 +39,7 @@ function fileIcon(file: File) {
   <!--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"-->
   <a
     v-if="item.isFile" class="item-file"
-    :class="{ 'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed }"
+    :class="{ 'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': isViewed }"
     :title="item.name" :href="'#diff-' + item.file.NameHash"
   >
     <!-- file -->
@@ -48,7 +52,7 @@ function fileIcon(file: File) {
   </a>
 
   <template v-else-if="item.isFile === false">
-    <div class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
+    <div class="item-directory" :class="{ 'viewed': isViewed }" :title="item.name" @click.stop="collapsed = !collapsed">
       <!-- directory -->
       <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
       <SvgIcon
@@ -88,7 +92,8 @@ a:hover {
   border-radius: 4px;
 }
 
-.item-file.viewed {
+.item-file.viewed,
+.item-directory.viewed {
   color: var(--color-text-light-3);
 }
 
diff --git a/web_src/js/utils/filetree.ts b/web_src/js/utils/filetree.ts
index 35f9f58189faa..5e30724d42c24 100644
--- a/web_src/js/utils/filetree.ts
+++ b/web_src/js/utils/filetree.ts
@@ -83,3 +83,7 @@ export function mergeChildIfOnlyOneDir(nodes: Item[]): void {
     }
   }
 }
+
+export function fileIsViewed(item: Item): boolean {
+  return item.isFile ? item.file.IsViewed : (item as DirItem).children.every(fileIsViewed);
+}

From 1df14bf6588f0ad932ff16dc27c5e9dee50f9d13 Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Wed, 26 Mar 2025 16:10:07 +0800
Subject: [PATCH 2/4] Update DiffFileTreeItem.vue

---
 web_src/js/components/DiffFileTreeItem.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index bb937dd90e1d9..29c9921cb5d59 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -13,6 +13,11 @@ const store = diffTreeStore();
 const isViewed = computed(() => {
   return fileIsViewed(props.item);
 });
+/**
+ * Behavior:
+ * - Viewed folders collapse on initial load (based on `isViewed` state)
+ * - Manual expand/collapse via clicks remains enabled
+ */
 const collapsed = ref(isViewed.value);
 
 function getIconForDiffStatus(pType: FileStatus) {

From c3baa0b50c3a13781e7ea858d7e9e3c080a63d2e Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Thu, 27 Mar 2025 01:30:23 +0000
Subject: [PATCH 3/4] fix

---
 web_src/js/components/DiffFileTreeItem.vue | 42 ++++++++++++++++++----
 web_src/js/utils/filetree.ts               |  6 +---
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 29c9921cb5d59..6864d4a0e26a8 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,18 +1,46 @@
 <script lang="ts" setup>
 import {SvgIcon, type SvgName} from '../svg.ts';
 import {diffTreeStore} from '../modules/stores.ts';
-import {computed, ref} from 'vue';
-import {fileIsViewed} from '../utils/filetree.ts';
-import type {Item, File, FileStatus} from '../utils/filetree.ts';
+import {computed, nextTick, ref, watch} from 'vue';
+import type {Item, DirItem, File, FileStatus} from '../utils/filetree.ts';
 
 const props = defineProps<{
   item: Item,
+  setViewed?:(val: boolean) => void,
 }>();
 
-const store = diffTreeStore();
+const count = ref(0);
+let pendingUpdate = 0;
+let pendingTimer: Promise<void> | undefined;
+
+const setCount = (isViewed: boolean) => {
+  pendingUpdate += (isViewed ? 1 : -1);
+
+  if (pendingTimer === undefined) {
+    pendingTimer = nextTick(() => {
+      count.value = Math.max(0, count.value + pendingUpdate);
+      pendingUpdate = 0;
+      pendingTimer = undefined;
+    });
+  }
+};
+
 const isViewed = computed(() => {
-  return fileIsViewed(props.item);
+  return props.item.isFile ? props.item.file.IsViewed : (props.item as DirItem).children.length === count.value;
 });
+
+watch(
+  () => isViewed.value,
+  (newVal) => {
+    if (props.setViewed) {
+      props.setViewed(newVal);
+    }
+  },
+  {immediate: true, flush: 'post'},
+);
+
+const store = diffTreeStore();
+
 /**
  * Behavior:
  * - Viewed folders collapse on initial load (based on `isViewed` state)
@@ -64,11 +92,11 @@ function fileIcon(file: File) {
         class="text primary"
         :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"
       />
-      <span class="gt-ellipsis">{{ item.name }}</span>
+      <span class="gt-ellipsis">{{ item.name }} {{ count }}</span>
     </div>
 
     <div v-show="!collapsed" class="sub-items">
-      <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem"/>
+      <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" :setViewed="setCount"/>
     </div>
   </template>
 </template>
diff --git a/web_src/js/utils/filetree.ts b/web_src/js/utils/filetree.ts
index 5e30724d42c24..15849d94cf33e 100644
--- a/web_src/js/utils/filetree.ts
+++ b/web_src/js/utils/filetree.ts
@@ -10,7 +10,7 @@ export type File = {
   IsSubmodule: boolean;
 }
 
-type DirItem = {
+export type DirItem = {
     isFile: false;
     name: string;
     path: string;
@@ -83,7 +83,3 @@ export function mergeChildIfOnlyOneDir(nodes: Item[]): void {
     }
   }
 }
-
-export function fileIsViewed(item: Item): boolean {
-  return item.isFile ? item.file.IsViewed : (item as DirItem).children.every(fileIsViewed);
-}

From 934440792f6ffe4f87257f6c59e11a8440d6ac1f Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Thu, 27 Mar 2025 01:49:21 +0000
Subject: [PATCH 4/4] fix

---
 web_src/js/components/DiffFileTreeItem.vue | 47 +++++++++++++++++-----
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 6864d4a0e26a8..afe1af7506bfa 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -4,15 +4,28 @@ import {diffTreeStore} from '../modules/stores.ts';
 import {computed, nextTick, ref, watch} from 'vue';
 import type {Item, DirItem, File, FileStatus} from '../utils/filetree.ts';
 
+// ------------------------------------------------------------
+// Component Props
+// ------------------------------------------------------------
 const props = defineProps<{
   item: Item,
   setViewed?:(val: boolean) => void,
 }>();
 
+// ------------------------------------------------------------
+// Reactive State & Refs
+// ------------------------------------------------------------
+const store = diffTreeStore();
 const count = ref(0);
 let pendingUpdate = 0;
 let pendingTimer: Promise<void> | undefined;
-
+// ------------------------------------------------------------
+// Batch Update Mechanism
+// ------------------------------------------------------------
+/**
+ * Handles batched updates to count value
+ * Prevents multiple updates within the same tick
+ */
 const setCount = (isViewed: boolean) => {
   pendingUpdate += (isViewed ? 1 : -1);
 
@@ -25,10 +38,24 @@ const setCount = (isViewed: boolean) => {
   }
 };
 
+// ------------------------------------------------------------
+// Computed Properties
+// ------------------------------------------------------------
+/**
+ * Determines viewed state based on item type:
+ * - Files: Directly use IsViewed property
+ * - Directories: Compare children count with viewed count
+ */
 const isViewed = computed(() => {
   return props.item.isFile ? props.item.file.IsViewed : (props.item as DirItem).children.length === count.value;
 });
-
+// ------------------------------------------------------------
+// Watchers & Side Effects
+// ------------------------------------------------------------
+/**
+ * Propagate viewed state changes to parent component
+ * Using post flush to ensure DOM updates are complete
+ */
 watch(
   () => isViewed.value,
   (newVal) => {
@@ -39,12 +66,14 @@ watch(
   {immediate: true, flush: 'post'},
 );
 
-const store = diffTreeStore();
-
+// ------------------------------------------------------------
+// Collapse Behavior Documentation
+// ------------------------------------------------------------
 /**
- * Behavior:
- * - Viewed folders collapse on initial load (based on `isViewed` state)
- * - Manual expand/collapse via clicks remains enabled
+ * Collapse behavior rules:
+ * - Viewed folders start collapsed initially
+ * - Manual expand/collapse takes precedence over automatic behavior
+ * - State persists after manual interaction
  */
 const collapsed = ref(isViewed.value);
 
@@ -92,11 +121,11 @@ function fileIcon(file: File) {
         class="text primary"
         :name="collapsed ? 'octicon-file-directory-fill' : 'octicon-file-directory-open-fill'"
       />
-      <span class="gt-ellipsis">{{ item.name }} {{ count }}</span>
+      <span class="gt-ellipsis">{{ item.name }}</span>
     </div>
 
     <div v-show="!collapsed" class="sub-items">
-      <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" :setViewed="setCount"/>
+      <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" :set-viewed="setCount"/>
     </div>
   </template>
 </template>