Fix PR file tree folders no longer collapsing (#22864)

Collapsing folders currently just throws a console error

```
index.js?v=1.19.0~dev-403-gb6b8feb3d:10 TypeError: this.$set is not a function
    at Proxy.handleClick (index.js?v=1.19.0~dev-403-gb6b8feb3d:58:7159)
    at index.js?v=1.19.0~dev-403-gb6b8feb3d:58:6466
    at index.js?v=1.19.0~dev-403-gb6b8feb3d:10:93922
    at ce (index.js?v=1.19.0~dev-403-gb6b8feb3d:10:1472)
    at Q (index.js?v=1.19.0~dev-403-gb6b8feb3d:10:1567)
    at HTMLDivElement.$e (index.js?v=1.19.0~dev-403-gb6b8feb3d:10:79198)
```

This PR fixes this and allows folders to be collapsed again.

Also:
- better cursor interaction with folders
- added some color to the diff detail stats
- remove green link color from all the file names

Screenshots:

![image](https://user-images.githubusercontent.com/9765622/218269712-2f3dda55-6d70-407f-8d34-2a5d9c8df548.png)

![image](https://user-images.githubusercontent.com/9765622/218269714-6ce8a954-daea-4ed6-9eea-8b2323db4d8f.png)

---------

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

2 files changed, 19 insertions, 2 deletions

diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index 4089e51410..40d56b2262 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -10,7 +10,7 @@
       />
       <a
         v-if="item.isFile"
-        class="file ellipsis"
+        class="file ellipsis muted"
         :href="item.isFile ? '#diff-' + item.file.NameHash : ''"
       >{{ item.name }}</a>
       <SvgIcon
@@ -63,7 +63,7 @@ export default {
       if (itemIsFile) {
         return;
       }
-      this.$set(this, 'collapsed', !this.collapsed);
+      this.collapsed = !this.collapsed;
     },
     getIconForDiffType(pType) {
       const diffTypes = {
@@ -83,6 +83,7 @@ export default {
 span.svg-icon.status {
   float: right;
 }
+
 span.svg-icon.file {
   color: var(--color-secondary-dark-7);
 }
@@ -122,6 +123,8 @@ span.svg-icon.octicon-diff-renamed {
 div.directory {
   display: grid;
   grid-template-columns: 18px 20px auto;
+  user-select: none;
+  cursor: pointer;
 }
 
 div.directory:hover {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 5d30d0d81a..39362722de 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1614,6 +1614,20 @@
       margin-right: .25rem;
     }
 
+    // Because the translations contain the <strong> we need to style with nth-of-type
+
+    .diff-detail-stats strong:nth-of-type(1) {
+      color: var(--color-yellow);
+    }
+
+    .diff-detail-stats strong:nth-of-type(2) {
+      color: var(--color-green);
+    }
+
+    .diff-detail-stats strong:nth-of-type(3) {
+      color: var(--color-red);
+    }
+
     .diff-detail-stats {
       @media (max-width: 480px) {
         font-size: 0;