From 13c7749c4b2ac0613cb9845f733c09971d4e11df Mon Sep 17 00:00:00 2001
From: Jordan Goulder <jordan@jordangoulder.com>
Date: Fri, 24 Jan 2025 22:52:27 -0500
Subject: [PATCH] Current file coloring

---
 src/components/DiskExplorer.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/DiskExplorer.vue b/src/components/DiskExplorer.vue
index c547d67..663f5bc 100644
--- a/src/components/DiskExplorer.vue
+++ b/src/components/DiskExplorer.vue
@@ -88,9 +88,12 @@ function loadFile(name: string, firstCluster: number, size: number) {
       </ul>
       <ul class="files">
         <li v-for="(file, index) in files" :key="index">
-          <a href="" @click.prevent="loadFile(file.name, file.firstCuster, file.size)">{{
-            file.name
-          }}</a>
+          <a
+            :class="{ current: file.name === currentFileName }"
+            href=""
+            @click.prevent="loadFile(file.name, file.firstCuster, file.size)"
+            >{{ file.name }}</a
+          >
         </li>
       </ul>
     </div>
@@ -121,8 +124,10 @@ div.file-list {
 }
 
 .directories a {
-  color: cornflowerblue;
+  color: #4080ff;
   text-decoration: none;
+  padding: 0 0.5em;
+  display: block;
 }
 
 .directories a:hover {
@@ -130,12 +135,20 @@ div.file-list {
 }
 
 .files a {
-  color: white;
+  color: #e0e0e0;
   text-decoration: none;
+  display: block;
+  padding: 0 0.5em;
+}
+
+.files a.current,
+.files a.current:hover {
+  background: #4080ff80;
 }
 
 .files a:hover {
   text-decoration: underline;
+  background: #4080ff40;
 }
 
 ul {