From 7c6d15179d8340124a1e3790770dbbb2ae922c19 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Tue, 10 Mar 2026 21:54:00 -0400
Subject: [PATCH] feat: settings sidebar layout + card header style

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/SettingsView.vue | 184 +++++++++++++++++++---------
 1 file changed, 125 insertions(+), 59 deletions(-)

diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue
index 2393883..ef18451 100644
--- a/frontend/src/views/SettingsView.vue
+++ b/frontend/src/views/SettingsView.vue
@@ -28,9 +28,11 @@ const exporting = ref(false);
 const restoring = ref(false);
 const restoreFileInput = ref<HTMLInputElement | null>(null);
 
-// Tab state — persisted across navigation
-const activeTab = ref(localStorage.getItem("settings_tab") ?? "general");
-watch(activeTab, (v) => localStorage.setItem("settings_tab", v));
+// Migrate stored "admin" → "config"; unknown tabs fall back to "general"
+const VALID_TABS = new Set(["general", "account", "notifications", "integrations", "data", "config", "users", "logs"]);
+const _stored = localStorage.getItem("settings_tab") ?? "general";
+const activeTab = ref(VALID_TABS.has(_stored) ? (_stored === "admin" ? "config" : _stored) : "general");
+watch(activeTab, (v) => localStorage.setItem("settings_tab", v === "admin" ? "config" : v));
 
 // Chat retention
 const chatRetentionDays = ref(90);
@@ -440,24 +442,32 @@ function hostname(url: string): string {
 </script>
 
 <template>
-  <main class="settings-page">
-    <h1>Settings</h1>
-
-    <!-- Tab bar -->
-    <div class="settings-tabs" role="tablist">
-      <button
-        v-for="tab in (authStore.isAdmin
-          ? ['general', 'account', 'notifications', 'integrations', 'data', 'admin']
-          : ['general', 'account', 'notifications', 'integrations', 'data'])"
-        :key="tab"
-        role="tab"
-        :aria-selected="activeTab === tab"
-        :class="['tab-btn', { active: activeTab === tab }]"
-        @click="activeTab = tab"
-      >
-        {{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
-      </button>
-    </div>
+  <main class="settings-root">
+    <aside class="settings-sidebar" role="navigation" aria-label="Settings navigation">
+      <div class="sidebar-group">
+        <div class="sidebar-group-label">User</div>
+        <button
+          v-for="tab in ['general', 'account', 'notifications', 'integrations', 'data']"
+          :key="tab"
+          :class="['sidebar-item', { active: activeTab === tab }]"
+          @click="activeTab = tab"
+        >
+          {{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
+        </button>
+      </div>
+      <div v-if="authStore.isAdmin" class="sidebar-group">
+        <div class="sidebar-group-label">Admin</div>
+        <button
+          v-for="tab in ['config', 'users', 'logs']"
+          :key="tab"
+          :class="['sidebar-item', { active: activeTab === tab }]"
+          @click="activeTab = tab"
+        >
+          {{ tab.charAt(0).toUpperCase() + tab.slice(1) }}
+        </button>
+      </div>
+    </aside>
+    <div class="settings-content">
 
     <!-- ── General ── -->
     <div v-show="activeTab === 'general'" class="settings-grid">
@@ -831,7 +841,7 @@ function hostname(url: string): string {
     </div>
 
     <!-- ── Admin ── -->
-    <div v-if="authStore.isAdmin" v-show="activeTab === 'admin'" class="settings-grid">
+    <div v-if="authStore.isAdmin" v-show="activeTab === 'config'" class="settings-grid">
 
       <section class="settings-section full-width">
         <h2>Application URL</h2>
@@ -916,51 +926,73 @@ function hostname(url: string): string {
 
     </div>
 
+    </div><!-- end .settings-content -->
   </main>
 </template>
 
 <style scoped>
-.settings-page {
+/* Settings root layout */
+.settings-root {
+  display: flex;
+  gap: 0;
   max-width: 1100px;
   margin: 2rem auto;
   padding: 0 1.5rem;
-}
-.settings-page h1 {
-  margin: 0 0 1.25rem;
+  align-items: flex-start;
+  min-height: 0;
 }
 
-/* Tab bar */
-.settings-tabs {
-  display: flex;
-  gap: 0.25rem;
-  border-bottom: 2px solid var(--color-border);
-  margin-bottom: 1.5rem;
-  flex-wrap: wrap;
+/* Sidebar */
+.settings-sidebar {
+  width: 175px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 1.5rem;
+  padding-right: 1rem;
 }
-.tab-btn {
-  padding: 0.5rem 1rem;
-  background: none;
+.sidebar-group {
+  margin-bottom: 1rem;
+}
+.sidebar-group-label {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--color-text-muted);
+  padding: 0.25rem 0.75rem 0.2rem;
+}
+.sidebar-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 0.4rem 0.75rem;
   border: none;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -2px;
+  border-left: 2px solid transparent;
+  background: none;
   cursor: pointer;
-  font-size: 0.9rem;
-  font-family: inherit;
+  font-size: 0.875rem;
   color: var(--color-text-secondary);
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
-  white-space: nowrap;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+  font-family: inherit;
 }
-.tab-btn:hover {
+.sidebar-item:hover {
   color: var(--color-text);
   background: var(--color-bg-secondary);
 }
-.tab-btn.active {
+.sidebar-item.active {
   color: var(--color-primary);
-  border-bottom-color: var(--color-primary);
+  background: rgba(99, 102, 241, 0.08);
+  border-left-color: var(--color-primary);
   font-weight: 600;
 }
 
+/* Content panel */
+.settings-content {
+  flex: 1;
+  min-width: 0;
+}
+
 /* Two-column grid — small sections pair up, full-width sections span both */
 .settings-grid {
   display: grid;
@@ -978,8 +1010,12 @@ function hostname(url: string): string {
   grid-column: 1 / -1;
 }
 .settings-section h2 {
-  margin: 0 0 0.5rem;
-  font-size: 1.05rem;
+  margin: 0 0 0.75rem;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--color-text-muted);
 }
 .section-desc {
   margin: 0 0 1rem;
@@ -1310,24 +1346,54 @@ function hostname(url: string): string {
   margin: 0.25rem 0 0;
 }
 
-/* Responsive — collapse to 1 column on narrow screens */
-@media (max-width: 640px) {
+@media (max-width: 768px) {
+  .settings-root {
+    flex-direction: column;
+    padding: 0 1rem;
+  }
+  .settings-sidebar {
+    width: 100%;
+    position: static;
+    padding-right: 0;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--color-border);
+    margin-bottom: 1rem;
+  }
+  .sidebar-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .sidebar-group-label {
+    width: 100%;
+  }
+  .sidebar-item {
+    width: auto;
+    border-left: none;
+    border-bottom: 2px solid transparent;
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+    font-size: 0.82rem;
+    padding: 0.35rem 0.7rem;
+  }
+  .sidebar-item.active {
+    border-bottom-color: var(--color-primary);
+    background: rgba(99, 102, 241, 0.08);
+  }
   .settings-grid {
     grid-template-columns: 1fr;
   }
   .settings-section.full-width {
-    grid-column: 1;
+    grid-column: auto;
   }
-  .settings-page {
-    padding: 0 1rem;
-    margin: 1rem auto;
+  .assistant-grid {
+    grid-template-columns: 1fr;
   }
-  .settings-tabs {
-    gap: 0;
+  .smtp-grid {
+    grid-template-columns: 1fr;
   }
-  .tab-btn {
-    padding: 0.45rem 0.7rem;
-    font-size: 0.82rem;
+  .caldav-grid {
+    grid-template-columns: 1fr;
   }
 }
 </style>