1 files changed, 44 insertions, 47 deletions

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 12cafd8f1b..f15f093ff8 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,66 +1,62 @@
 <script lang="ts" setup>
-import {SvgIcon} from '../svg.ts';
-import {diffTreeStore} from '../modules/stores.ts';
-import {ref} from 'vue';
+import {SvgIcon, type SvgName} from '../svg.ts';
+import {shallowRef} from 'vue';
+import {type DiffStatus, type DiffTreeEntry, diffTreeStore} from '../modules/diff-file.ts';
 
-type File = {
-  Name: string;
-  NameHash: string;
-  Type: number;
-  IsViewed: boolean;
-}
-
-type Item = {
-  name: string;
-  isFile: boolean;
-  file?: File;
-  children?: Item[];
-};
-
-defineProps<{
-  item: Item,
+const props = defineProps<{
+  item: DiffTreeEntry,
 }>();
 
 const store = diffTreeStore();
-const collapsed = ref(false);
+const collapsed = shallowRef(props.item.IsViewed);
 
-function getIconForDiffType(pType) {
-  const diffTypes = {
-    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: DiffStatus) {
+  const diffTypes: Record<DiffStatus, { name: SvgName, classes: Array<string> }> = {
+    '': {name: 'octicon-blocked', classes: ['text', 'red']}, // unknown case
+    '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[pType];
+  return diffTypes[pType] ?? diffTypes[''];
 }
 </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"-->
+  <template v-if="item.EntryMode === 'tree'">
+    <div class="item-directory" :class="{ 'viewed': item.IsViewed }" :title="item.DisplayName" @click.stop="collapsed = !collapsed">
+      <!-- directory -->
+      <SvgIcon :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"/>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span class="tw-contents" v-html="collapsed ? store.folderIcon : store.folderOpenIcon"/>
+      <span class="gt-ellipsis">{{ item.DisplayName }}</span>
+    </div>
+
+    <div v-show="!collapsed" class="sub-items">
+      <DiffFileTreeItem v-for="childItem in item.Children" :key="childItem.DisplayName" :item="childItem"/>
+    </div>
+  </template>
   <a
-    v-if="item.isFile" class="item-file"
-    :class="{'selected': store.selectedItem === '#diff-' + item.file.NameHash, 'viewed': item.file.IsViewed}"
-    :title="item.name" :href="'#diff-' + item.file.NameHash"
+    v-else
+    class="item-file" :class="{ 'selected': store.selectedItem === '#diff-' + item.NameHash, 'viewed': item.IsViewed }"
+    :title="item.DisplayName" :href="'#diff-' + item.NameHash"
   >
     <!-- file -->
-    <SvgIcon name="octicon-file"/>
-    <span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
-    <SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).classes"/>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span class="tw-contents" v-html="item.FileIcon"/>
+    <span class="gt-ellipsis tw-flex-1">{{ item.DisplayName }}</span>
+    <SvgIcon
+      :name="getIconForDiffStatus(item.DiffStatus).name"
+      :class="getIconForDiffStatus(item.DiffStatus).classes"
+    />
   </a>
-  <div v-else 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'"/>
-    <span class="gt-ellipsis">{{ item.name }}</span>
-  </div>
-
-  <div v-if="item.children?.length" v-show="!collapsed" class="sub-items">
-    <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem"/>
-  </div>
 </template>
+
 <style scoped>
-a, a:hover {
+a,
+a:hover {
   text-decoration: none;
   color: var(--color-text);
 }
@@ -83,7 +79,8 @@ a, a:hover {
   border-radius: 4px;
 }
 
-.item-file.viewed {
+.item-file.viewed,
+.item-directory.viewed {
   color: var(--color-text-light-3);
 }