Rewrite the DiffFileTreeItem and fix misalignment (#26565)

Fix some layout / user-interaction problems and close #25650 , the code
has been simplified (+46 −108)

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/55c38812-3338-4048-9137-0cae0ef213e8)

</details>

---------

Co-authored-by: delvh <dev.lh@web.de>

2 files changed, 46 insertions, 108 deletions

diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index c4d1c614de..e02222bde0 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/web_src/js/components/DiffFileTree.vue
@@ -1,9 +1,7 @@
 <template>
   <div v-if="store.fileTreeIsVisible" class="gt-mr-3 gt-mt-3 diff-detail-box">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
-    <div class="ui list">
-      <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
-    </div>
+    <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
     <div v-if="store.isIncomplete" class="gt-pt-2">
       <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
     </div>
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 67bb677e22..d21afc42cb 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,40 +1,24 @@
 <template>
-  <div v-show="show" :title="item.name">
-    <!--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"-->
-    <div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', store.selectedItem === '#diff-' + item.file?.NameHash ? 'selected' : '']">
-      <!-- Files -->
-      <SvgIcon
-        v-if="item.isFile"
-        name="octicon-file"
-        class="svg-icon file"
-      />
-      <a
-        v-if="item.isFile"
-        :class="['file gt-ellipsis', {'viewed': item.file.IsViewed}]"
-        :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
-      >{{ item.name }}</a>
-      <SvgIcon
-        v-if="item.isFile"
-        :name="getIconForDiffType(item.file.Type)"
-        :class="['svg-icon', getIconForDiffType(item.file.Type), 'status']"
-      />
+  <!--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}"
+    :title="item.name" :href="'#diff-' + item.file.NameHash"
+  >
+    <!-- file -->
+    <SvgIcon name="octicon-file"/>
+    <span class="gt-ellipsis gt-f1">{{ item.name }}</span>
+    <SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).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="octicon-file-directory-fill"/>
+    <span class="gt-ellipsis">{{ item.name }}</span>
+  </div>
 
-      <!-- Directories -->
-      <div v-if="!item.isFile" class="directory gt-p-1 gt-ac" @click.stop="handleClick(item.isFile)">
-        <SvgIcon
-          class="svg-icon"
-          :name="collapsed ? 'octicon-chevron-right' : 'octicon-chevron-down'"
-        />
-        <SvgIcon
-          class="svg-icon directory"
-          name="octicon-file-directory-fill"
-        />
-        <span class="gt-ellipsis">{{ item.name }}</span>
-      </div>
-      <div v-show="!collapsed">
-        <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list"/>
-      </div>
-    </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>
 
@@ -49,30 +33,19 @@ export default {
       type: Object,
       required: true
     },
-    show: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
   },
   data: () => ({
     store: diffTreeStore(),
     collapsed: false,
   }),
   methods: {
-    handleClick(itemIsFile) {
-      if (itemIsFile) {
-        return;
-      }
-      this.collapsed = !this.collapsed;
-    },
     getIconForDiffType(pType) {
       const diffTypes = {
-        1: 'octicon-diff-added',
-        2: 'octicon-diff-modified',
-        3: 'octicon-diff-removed',
-        4: 'octicon-diff-renamed',
-        5: 'octicon-diff-modified', // there is no octicon for copied, so modified should be ok
+        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
       };
       return diffTypes[pType];
     },
@@ -81,75 +54,42 @@ export default {
 </script>
 
 <style scoped>
-.svg-icon.status {
-  float: right;
-}
-
-.svg-icon.file {
-  color: var(--color-secondary-dark-7);
-}
-
-.svg-icon.directory {
-  color: var(--color-primary);
-}
-
-.svg-icon.octicon-diff-modified {
-  color: var(--color-yellow);
-}
-
-.svg-icon.octicon-diff-added {
-  color: var(--color-green);
-}
-
-.svg-icon.octicon-diff-removed {
-  color: var(--color-red);
+a, a:hover {
+  text-decoration: none;
+  color: var(--color-text);
 }
 
-.svg-icon.octicon-diff-renamed {
-  color: var(--color-teal);
+.sub-items {
+  padding-left: 9px;
 }
 
-.item.filewrapper {
-  display: grid !important;
-  grid-template-columns: 20px 7fr 1fr;
-  padding-left: 18px !important;
+.item-file {
+  margin-left: 20px;
 }
 
-.item.filewrapper:hover, div.directory:hover {
-  color: var(--color-text);
-  background: var(--color-hover);
-  border-radius: 4px;
-}
-
-.item.filewrapper.selected {
+.item-file.selected {
   color: var(--color-text);
   background: var(--color-active);
   border-radius: 4px;
 }
 
-div.directory {
-  display: grid;
-  grid-template-columns: 18px 20px auto;
-  user-select: none;
-  cursor: pointer;
-}
-
-div.list {
-  padding-bottom: 0 !important;
-  padding-top: inherit !important;
+.item-file.viewed {
+  color: var(--color-text-light-3);
 }
 
-a {
-  text-decoration: none;
-  color: var(--color-text);
+.item-file,
+.item-directory {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  padding: 2px;
 }
 
-a:hover {
-  text-decoration: none;
+.item-file:hover,
+.item-directory:hover {
   color: var(--color-text);
-}
-
-a.file.viewed {
-  color: var(--color-text-light-3);
+  background: var(--color-hover);
+  border-radius: 4px;
+  cursor: pointer;
 }
 </style>