feat(operator): notification drawer behind the topbar bell
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).
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
const { open: openPalette } = useCommandPalette()
|
||||
const { open: openNotifications, unreadCount } = useNotifications()
|
||||
const { env } = useEnv()
|
||||
|
||||
const ENVS = {
|
||||
@@ -23,9 +24,9 @@ const ENVS = {
|
||||
</button>
|
||||
|
||||
<div class="right">
|
||||
<button class="icon-btn" title="Notifications">
|
||||
<button class="icon-btn" title="Notifications" @click="openNotifications">
|
||||
<UiIcon name="bell" :size="14" />
|
||||
<span class="icon-btn-dot" />
|
||||
<span v-if="unreadCount > 0" class="icon-btn-dot" />
|
||||
</button>
|
||||
|
||||
<UserMenu />
|
||||
|
||||
Reference in New Issue
Block a user