feat: wire QuickCaptureBar/FAB into App.vue, add Settings route
This commit is contained in:
parent
426b4207eb
commit
728134321f
2 changed files with 33 additions and 5 deletions
|
|
@ -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' },
|
||||
|
|
@ -45,10 +60,21 @@ const navLinks = [
|
|||
]
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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 },
|
||||
],
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue