Diff improvements (#23553)

- Avoid flash of wrong tree toggle icon on page load by setting icon
based on sync state
- Avoid "pop-in" of tree on page load by leaving space based on sync
state
- Use the same border/box-shadow combo used on comment `:target` also
for file `:target`.
- Refactor `DiffFileTree.vue` to use `toggleElem` instead of hardcoded
class name.
- Left-align inline comment boxes and make them fit the same amount of
markup content on a line as GitHub.
- Fix height of `diff-file-list`

Fixes: https://github.com/go-gitea/gitea/issues/23593

<img width="1250" alt="Screenshot 2023-03-18 at 00 52 04"
src="https://user-images.githubusercontent.com/115237/226071392-6789a644-aead-4756-a77e-aba3642150a0.png">
<img width="1246" alt="Screenshot 2023-03-18 at 00 59 43"
src="https://user-images.githubusercontent.com/115237/226071443-8bcba924-458b-48bd-b2f0-0de59cb180ac.png">
<img width="1250" alt="Screenshot 2023-03-18 at 01 27 14"
src="https://user-images.githubusercontent.com/115237/226073121-ccb99f9a-d3ac-40b7-9589-43580c4a01c9.png">
<img width="1231" alt="Screenshot 2023-03-19 at 21 44 16"
src="https://user-images.githubusercontent.com/115237/226207951-81bcae1b-6b41-4e39-83a7-0f37951df6be.png">

(Yes I'm aware the border-radius in bottom corners is suboptimal, but
this would be notorously hard to fix without relying on `overflow:
hidden`).

web_src/js/components/DiffFileTreeItem.vue

@@ -1,7 +1,7 @@
 <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' : ''">
+    <div class="item" :class="item.isFile ? 'filewrapper gt-p-1 gt-ac' : ''">
       <!-- Files -->
       <SvgIcon
         v-if="item.isFile"
@@ -10,7 +10,7 @@
       />
       <a
         v-if="item.isFile"
-        class="file gt-ellipsis muted"
+        class="file gt-ellipsis"
         :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
       >{{ item.name }}</a>
       <SvgIcon
@@ -20,7 +20,7 @@
       />
 
       <!-- Directories -->
-      <div v-if="!item.isFile" class="directory gt-p-1" @click.stop="handleClick(item.isFile)">
+      <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'"
@@ -79,31 +79,31 @@ export default {
 </script>
 
 <style scoped>
-span.svg-icon.status {
+.svg-icon.status {
   float: right;
 }
 
-span.svg-icon.file {
+.svg-icon.file {
   color: var(--color-secondary-dark-7);
 }
 
-span.svg-icon.directory {
+.svg-icon.directory {
   color: var(--color-primary);
 }
 
-span.svg-icon.octicon-diff-modified {
+.svg-icon.octicon-diff-modified {
   color: var(--color-yellow);
 }
 
-span.svg-icon.octicon-diff-added {
+.svg-icon.octicon-diff-added {
   color: var(--color-green);
 }
 
-span.svg-icon.octicon-diff-removed {
+.svg-icon.octicon-diff-removed {
   color: var(--color-red);
 }
 
-span.svg-icon.octicon-diff-renamed {
+.svg-icon.octicon-diff-renamed {
   color: var(--color-teal);
 }
 
@@ -139,9 +139,11 @@ div.list {
 
 a {
   text-decoration: none;
+  color: var(--color-text);
 }
 
 a:hover {
   text-decoration: none;
+  color: var(--color-text);
 }
 </style>