Organize nav menu into grouped sections with dividers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/layout/AppLayout.vue

@@ -16,8 +16,11 @@
     <v-divider />
 
     <v-list density="compact" nav>
+      <template v-for="(group, gi) in navGroups" :key="gi">
+        <v-list-subheader v-if="group.label && !rail" class="text-uppercase text-caption mt-2">{{ group.label }}</v-list-subheader>
+        <v-divider v-if="group.label && rail" class="my-1" />
         <v-list-item
-        v-for="item in navItems"
+          v-for="item in group.items"
           :key="item.route"
           :prepend-icon="item.icon"
           :title="item.title"
@@ -28,6 +31,7 @@
         >
           <v-tooltip v-if="rail" activator="parent" location="end">{{ item.title }}</v-tooltip>
         </v-list-item>
+      </template>
     </v-list>
 
     <template v-slot:append>
@@ -141,22 +145,49 @@ const { notifications, unreadCount, markAllAsRead, markAsRead } = useNotificatio
 
 const isDark = computed(() => theme.global.current.value.dark)
 
-const navItems = [
+const navGroups = [
+  {
+    label: null,
+    items: [
       { title: 'Dashboard', icon: 'mdi-view-dashboard', route: '/' },
+    ],
+  },
+  {
+    label: 'Money',
+    items: [
       { title: 'Accounts', icon: 'mdi-bank', route: '/accounts' },
       { title: 'Transactions', icon: 'mdi-swap-horizontal', route: '/transactions' },
-  { title: 'Categories', icon: 'mdi-tag-multiple', route: '/categories' },
-  { title: 'Payees', icon: 'mdi-account-group', route: '/payees' },
+      { title: 'Loans', icon: 'mdi-home-city', route: '/loans' },
+      { title: 'Investments', icon: 'mdi-finance', route: '/investments' },
+    ],
+  },
+  {
+    label: 'Planning',
+    items: [
       { title: 'Budgets', icon: 'mdi-calculator', route: '/budgets' },
       { title: 'Scheduled', icon: 'mdi-clock-outline', route: '/scheduled' },
+      { title: 'Categories', icon: 'mdi-tag-multiple', route: '/categories' },
+      { title: 'Payees', icon: 'mdi-account-group', route: '/payees' },
+    ],
+  },
+  {
+    label: 'Tools',
+    items: [
       { title: 'Reconciliation', icon: 'mdi-scale-balance', route: '/reconciliation' },
       { title: 'Imports', icon: 'mdi-file-upload', route: '/imports' },
-  { title: 'Loans', icon: 'mdi-home-city', route: '/loans' },
       { title: 'Reports', icon: 'mdi-chart-bar', route: '/reports' },
-  { title: 'Investments', icon: 'mdi-finance', route: '/investments' },
+    ],
+  },
+  {
+    label: 'System',
+    items: [
       { title: 'Settings', icon: 'mdi-cog', route: '/settings' },
+    ],
+  },
 ]
 
+const navItems = navGroups.flatMap(g => g.items)
+
 function isNavActive(navRoute: string) {
   if (route.path === navRoute) return true
   // Highlight "Transactions" when viewing account-scoped transactions