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:
Ronni Baslund
2026-05-24 17:08:14 +02:00
parent 455717ac67
commit 9fac11e668
5 changed files with 300 additions and 2 deletions
+3 -2
View File
@@ -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 />