From a3494184c8e4629dee628cae03b8451d909931f9 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 27 May 2024 22:45:05 -0500
Subject: [PATCH] Fix navbar links not rendering active when thread is open

---
 src/components/Item.vue |  8 +++---
 src/components/Nav.vue  |  2 +-
 src/main.ts             | 60 +++++++++++++++++++++++++++++++++++++----
 3 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/src/components/Item.vue b/src/components/Item.vue
index 53c6c86..ca0b1b4 100644
--- a/src/components/Item.vue
+++ b/src/components/Item.vue
@@ -239,9 +239,11 @@ function deleteItem() {
 function openThread(e: MouseEvent | TouchEvent, index: number) {
     e.preventDefault();
     if (!dragged.value) {
-        router.push(
-            isSelected(index) ? props.baseUrl :
-            `${props.baseUrl}/${props.item.source}/${props.item.sourceItem}/${index}`);
+        if (isSelected(index)) {
+            emits("deselect");
+        } else {
+            router.push(`${props.baseUrl}/${props.item.source}/${props.item.sourceItem}/${index}`);
+        }
     }
 }
 
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index e313d13..e8ae8d5 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -17,7 +17,7 @@
                 <RouterLink :to="`source/${contact.source}/${contact.id}/${contact.thread}`" class="flex items-center text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group relative" active-class="bg-gray-100 dark:bg-gray-700">
                     <Avatar :image="contact.image" :name="contact.name" :status="contact.status ?? 'unknown'" />
                     <span v-if="contact.count > 0" class="absolute bg-gray-800 bottom-0 right-0 h-4 w-4 text-center rounded-full">{{ Math.min(contact.count, 9) }}</span>
-                    <FontAwesomeIcon v-else :icon="faThumbTack" class="star absolute drop-shadow-2xl	 bottom-0 right-0 h-4 w-4 text-center rounded-full" />
+                    <FontAwesomeIcon v-else :icon="faThumbTack" class="star absolute drop-shadow-2xl bottom-0 right-0 h-4 w-4 text-center rounded-full" />
                 </RouterLink>
             </li>
         </ul>
diff --git a/src/main.ts b/src/main.ts
index fe04a90..634958d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,11 +11,61 @@ import Unsorted from "./components/pages/Unsorted.vue";
 
 const routes: RouteRecordRaw[] = [
     { path: '/', component: Todo, name: 'home' },
-    { path: '/todo/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Todo, name: 'todo' },
-    { path: '/snoozed/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Snoozed, name: 'snoozed' },
-    { path: '/low/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: LowPriority, name: 'low' },
-    { path: '/source/:source(\\d+)/:sourceItem(\\d+)?/:thread(\\d+)?/:event(\\d+)?', component: Source, name: 'source' },
-    { path: '/unsorted/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Unsorted, name: 'unsorted' },
+    {
+        path: '/todo',
+        component: Todo,
+        name: 'todo',
+        children: [
+            {
+                path: ':source(\\d+)/:sourceItem(\\d+)/:thread(\\d+)',
+                component: Todo
+            }
+        ]
+    },
+    {
+        path: '/snoozed',
+        component: Snoozed,
+        name: 'snoozed',
+        children: [
+            {
+                path: ':source(\\d+)/:sourceItem(\\d+)/:thread(\\d+)',
+                component: Snoozed
+            }
+        ]
+    },
+    {
+        path: '/low',
+        component: LowPriority,
+        name: 'low',
+        children: [
+            {
+                path: ':source(\\d+)/:sourceItem(\\d+)/:thread(\\d+)',
+                component: LowPriority
+            }
+        ]
+    },
+    {
+        path: '/source/:source(\\d+)',
+        component: Source,
+        name: 'source',
+        children: [
+            {
+                path: ':sourceItem(\\d+)/:thread(\\d+)/:event(\\d+)?',
+                component: Source
+            }
+        ]
+    },
+    {
+        path: '/unsorted',
+        component: Unsorted,
+        name: 'unsorted',
+        children: [
+            {
+                path: ':source(\\d+)/:sourceItem(\\d+)/:thread(\\d+)',
+                component: Unsorted
+            }
+        ]
+    }
 ];
 
 const router = createRouter({