From 728134321f04c28ce3153ca6bfd52e508f15dea3 Mon Sep 17 00:00:00 2001
From: pyr0ball <pyroballpcs@gmail.com>
Date: Mon, 11 May 2026 09:25:49 -0700
Subject: [PATCH] feat: wire QuickCaptureBar/FAB into App.vue, add Settings
 route

---
 web/src/App.vue         | 36 +++++++++++++++++++++++++++++++-----
 web/src/router/index.ts |  2 ++
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index cd42978..688a38d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -12,11 +12,15 @@
           :to="link.to"
           class="px-3 py-1 rounded text-sm text-text-muted hover:text-text-primary hover:bg-surface-raised transition-colors"
           active-class="text-accent bg-accent-muted"
-        >
-          {{ link.label }}
-        </RouterLink>
+        >{{ link.label }}</RouterLink>
       </div>
       <div class="ml-auto flex items-center gap-3">
+        <RouterLink
+          to="/settings"
+          class="text-text-dim hover:text-text-primary transition-colors leading-none"
+          title="Settings"
+          aria-label="Settings"
+        >⚙</RouterLink>
         <button
           @click="toggleTheme"
           :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
@@ -26,14 +30,25 @@
         <StatusDot />
       </div>
     </nav>
+
+    <!-- Persistent quick-capture bar (topbar mode) -->
+    <QuickCaptureBar v-if="entryPointStyle === 'topbar'" />
+
     <RouterView />
+
+    <!-- FAB entry point (fab mode) -->
+    <QuickCaptureFab v-if="entryPointStyle === 'fab'" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
 import StatusDot from '@/components/StatusDot.vue'
+import QuickCaptureBar from '@/components/QuickCaptureBar.vue'
+import QuickCaptureFab from '@/components/QuickCaptureFab.vue'
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')
 
 const navLinks = [
   { to: '/dashboard', label: 'Dashboard' },
@@ -44,11 +59,22 @@ const navLinks = [
   { to: '/sources',   label: 'Sources' },
 ]
 
-const isDark = ref(document.documentElement.classList.contains('dark'))
+const isDark          = ref(document.documentElement.classList.contains('dark'))
+const entryPointStyle = ref<'topbar' | 'fab'>('topbar')
 
 function toggleTheme() {
   isDark.value = !isDark.value
   document.documentElement.classList.toggle('dark', isDark.value)
   localStorage.setItem('ts-theme', isDark.value ? 'dark' : 'light')
 }
+
+onMounted(async () => {
+  try {
+    const res = await fetch(`${BASE}/api/settings`)
+    if (res.ok) {
+      const data = await res.json()
+      entryPointStyle.value = data.entry_point_style ?? 'topbar'
+    }
+  } catch { /* default to topbar */ }
+})
 </script>
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 42dbafe..ba7c788 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -5,6 +5,7 @@ import DiagnoseView from '@/views/DiagnoseView.vue'
 import SourcesView from '@/views/SourcesView.vue'
 import IncidentsView from '@/views/IncidentsView.vue'
 import BundlesView from '@/views/BundlesView.vue'
+import SettingsView from '@/views/SettingsView.vue'
 
 export default createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -16,5 +17,6 @@ export default createRouter({
     { path: '/incidents', component: IncidentsView },
     { path: '/bundles', component: BundlesView },
     { path: '/sources', component: SourcesView },
+    { path: '/settings', component: SettingsView },
   ],
 })