From 419f26107d9f47104f4ecb1b73806e5738c17d4b Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 26 Jun 2026 22:25:12 -0400
Subject: [PATCH] Tab + search the Settings index (match System Settings)

The settings index showed all 6 groups stacked (still a long scroll). Switch it
to the same pattern as System Settings: a left group-tab nav showing one group's
cards at a time, plus a search box that flattens to matching cards across all
groups. Same group data, no routes changed.

Frontend-only. Build + naming green, verified.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/views/settings/SettingsIndex.vue | 105 +++++++++++++++---
 1 file changed, 92 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/settings/SettingsIndex.vue b/frontend/src/views/settings/SettingsIndex.vue
index b48acb2..ae82557 100644
--- a/frontend/src/views/settings/SettingsIndex.vue
+++ b/frontend/src/views/settings/SettingsIndex.vue
@@ -2,11 +2,41 @@
   <div class="settings-page">
     <h1>Settings</h1>
 
-    <section v-for="group in groups" :key="group.title" class="settings-group">
-      <h2 class="group-title">{{ group.title }}</h2>
+    <div class="settings-search">
+      <input v-model="search" type="text" class="search-input"
+             placeholder="Search settings (vendors, vlans, plugins...)" />
+    </div>
+
+    <!-- Search results: flat grid of matches across all groups -->
+    <div v-if="search.trim()" class="settings-grid">
+      <router-link
+        v-for="card in searchResults"
+        :key="card.to"
+        :to="card.to"
+        class="settings-card"
+      >
+        <div class="card-icon"><component :is="card.icon" :size="28" /></div>
+        <h3>{{ card.title }}</h3>
+        <p>{{ card.description }}</p>
+      </router-link>
+      <p v-if="!searchResults.length" class="no-results">No matching settings</p>
+    </div>
+
+    <!-- Normal: group tabs on the left, that group's cards on the right -->
+    <div v-else class="settings-layout">
+      <nav class="settings-tabs">
+        <button
+          v-for="group in groups"
+          :key="group.title"
+          class="settings-tab"
+          :class="{ active: activeGroup === group.title }"
+          @click="activeGroup = group.title"
+        >{{ group.title }}</button>
+      </nav>
+
       <div class="settings-grid">
         <router-link
-          v-for="card in group.cards"
+          v-for="card in activeCards"
           :key="card.to"
           :to="card.to"
           class="settings-card"
@@ -16,11 +46,12 @@
           <p>{{ card.description }}</p>
         </router-link>
       </div>
-    </section>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { ref, computed } from 'vue'
 import { Factory, MapPin, Tag, Package, Droplets, Monitor, MonitorSmartphone, Laptop, Cog, Building, Globe, Link, Settings, FileText, Users, Puzzle } from 'lucide-vue-next'
 
 // Settings grouped by purpose so the index stays scannable as it grows.
@@ -72,6 +103,21 @@ const groups = [
     ],
   },
 ]
+
+const search = ref('')
+const activeGroup = ref(groups[0].title)
+
+const activeCards = computed(() =>
+  groups.find(g => g.title === activeGroup.value)?.cards || [])
+
+// Flat search across every card's title + description.
+const searchResults = computed(() => {
+  const term = search.value.trim().toLowerCase()
+  if (!term) return []
+  return groups.flatMap(g => g.cards).filter(c =>
+    c.title.toLowerCase().includes(term) ||
+    c.description.toLowerCase().includes(term))
+})
 </script>
 
 <style scoped>
@@ -79,21 +125,54 @@ const groups = [
   margin-bottom: 1.5rem;
 }
 
-.settings-group {
-  margin-bottom: 2rem;
+.settings-search {
+  margin-bottom: 1rem;
+}
+.search-input {
+  width: 100%;
+  max-width: 420px;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-card);
+  color: var(--text);
 }
 
-.group-title {
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.settings-layout {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+
+.settings-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 200px;
+  position: sticky;
+  top: 1rem;
+}
+.settings-tab {
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font-size: 0.95rem;
+}
+.settings-tab:hover { background: var(--bg); }
+.settings-tab.active { background: var(--primary); color: #fff; }
+
+.no-results {
   color: var(--text-light);
-  margin: 0 0 0.75rem 0;
-  padding-bottom: 0.5rem;
-  border-bottom: 1px solid var(--border);
+  font-size: 0.9rem;
 }
 
 .settings-grid {
+  flex: 1;
+  min-width: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 1rem;