Ronni Baslund
9fac11e668
Right-anchored slide-in inbox triggered by the bell button. Backend is a follow-up — for now this is a visual + behavior shell with mock fixtures, same pattern as INCIDENT / FLAGS / OP_AUDIT. - data/fixtures.ts: new NotificationItem type + 6 seed rows from the design (DMARC, invitation, invoice, SAML, ticket reply, failed sign-in) - useNotifications composable: isOpen + items + unreadCount + markRead + markAllRead. Items deep-clone the fixture on first import so toggling unread doesn't mutate the shared seed. - NotificationDrawer component: Teleport + scrim + slide animation, header/list/footer. Each row shows tone-tinted icon tile + title + description + timestamp + left-rail unread dot. Click a row to mark read; click Mark all read or Preferences in the footer. - OpTopbar: bell now opens the drawer and only shows .icon-btn-dot when unreadCount > 0. - Layout mounts <NotificationDrawer /> alongside the other floating components. Dismissal: backdrop click, Escape, X, and route-change watcher (so Preferences → /settings closes the drawer cleanly).
80 lines
2.3 KiB
Vue
80 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
// Default operator chrome: persistent sidebar + topbar wrapping a scrollable
|
|
// content slot. Pages that should render WITHOUT chrome (the login screen)
|
|
// set `definePageMeta({ layout: 'blank' })`.
|
|
|
|
const route = useRoute()
|
|
const { toggle } = useSidebar()
|
|
const { toggle: togglePalette } = useCommandPalette()
|
|
// Touch useTweaks so the persisted theme/density hydrate on first paint.
|
|
useTweaks()
|
|
|
|
// Derive the active nav row from the route. Matches OpSidebar's `id` keys.
|
|
const currentNav = computed(() => {
|
|
const p = route.path
|
|
if (p === '/') return 'overview'
|
|
if (p.startsWith('/tenants')) return 'tenants'
|
|
if (p.startsWith('/partners')) return 'partners'
|
|
if (p.startsWith('/users')) return 'users'
|
|
if (p.startsWith('/support')) return 'support'
|
|
if (p.startsWith('/billing')) return 'billing'
|
|
if (p.startsWith('/reports')) return 'reports'
|
|
if (p.startsWith('/infrastructure')) return 'infra'
|
|
if (p.startsWith('/flags')) return 'flags'
|
|
if (p.startsWith('/audit')) return 'audit'
|
|
if (p.startsWith('/operator-team')) return 'team'
|
|
if (p.startsWith('/settings')) return 'settings'
|
|
return ''
|
|
})
|
|
|
|
// Keyboard shortcuts: ⌘[ toggles sidebar, ⌘K opens the command palette.
|
|
onMounted(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === '[') {
|
|
e.preventDefault()
|
|
toggle()
|
|
}
|
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
|
|
e.preventDefault()
|
|
togglePalette()
|
|
}
|
|
}
|
|
document.addEventListener('keydown', onKey)
|
|
onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="shell">
|
|
<ImpersonationBanner />
|
|
<div class="cols">
|
|
<OpSidebar :current="currentNav" />
|
|
<main>
|
|
<OpTopbar />
|
|
<div class="content">
|
|
<slot />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<CommandPalette />
|
|
<ImpersonationModal />
|
|
<IncidentModal />
|
|
<NotificationDrawer />
|
|
<TweaksPanel />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.cols { display: flex; flex: 1; min-height: 0; }
|
|
|
|
main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
.content { flex: 1; min-width: 0; overflow-y: auto; }
|
|
</style>
|