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:
@@ -4,6 +4,8 @@
|
||||
// derivable from those should NOT live here. See OPERATOR-PLAN.md follow-ups
|
||||
// for the path from each fixture to a real implementation.
|
||||
|
||||
import type { IconName } from '~/components/UiIcon.vue'
|
||||
|
||||
export type ServiceStatus = 'ok' | 'warn' | 'bad'
|
||||
export interface PlatformService {
|
||||
id: string
|
||||
@@ -105,3 +107,28 @@ export const OP_AUDIT: AuditEntry[] = [
|
||||
{ id: 'op_8812', when: '10:12:08', actor: 'Mikkel Nørgaard', role: 'engineer', action: 'feature_flag.created', target: 'beta_ai_summaries', tenant: '—', ip: '10.0.4.21', tone: 'info' },
|
||||
{ id: 'op_8811', when: '09:30:00', actor: 'Anne Baslund', role: 'platform admin', action: 'tos.published', target: 'v2026.05 · all tenants', tenant: '—', ip: '10.0.4.18', tone: 'info' },
|
||||
]
|
||||
|
||||
export type NotificationKind = 'security' | 'user' | 'billing' | 'integration' | 'support' | 'signin'
|
||||
export type NotificationTone = 'warn' | 'info' | 'neutral' | 'ok' | 'bad'
|
||||
export interface NotificationItem {
|
||||
id: string
|
||||
kind: NotificationKind
|
||||
title: string
|
||||
body: string
|
||||
when: string
|
||||
icon: IconName
|
||||
tone: NotificationTone
|
||||
unread: boolean
|
||||
}
|
||||
|
||||
// Seed list mirrors the design screenshot. The real source will be an event
|
||||
// stream / Mongo collection later; for now this is the shell other features
|
||||
// can plug into. See the "notifications backend" follow-up in NEXT-STEPS.md.
|
||||
export const NOTIFICATIONS: NotificationItem[] = [
|
||||
{ id: 'n_2821', kind: 'security', icon: 'shield', tone: 'warn', when: '2 min ago', unread: true, title: 'DMARC policy weak on baslund.dk', body: 'Set the policy to at least quarantine to reduce spoofing.' },
|
||||
{ id: 'n_2820', kind: 'user', icon: 'users', tone: 'info', when: '14 min ago', unread: true, title: 'Mikkel accepted your invitation', body: 'mikkel@dezky.com joined as Admin.' },
|
||||
{ id: 'n_2819', kind: 'billing', icon: 'card', tone: 'neutral', when: '1 h ago', unread: false, title: 'Invoice INV-2026-005 paid', body: '1.940,00 DKK · Visa •••• 4242' },
|
||||
{ id: 'n_2818', kind: 'integration', icon: 'plug', tone: 'neutral', when: '3 h ago', unread: false, title: 'Notion SAML connection live', body: 'Connected via Authentik. 11 users provisioned.' },
|
||||
{ id: 'n_2817', kind: 'support', icon: 'help', tone: 'neutral', when: 'Yesterday', unread: false, title: 'Sofie replied to your ticket TKT-2832', body: 'Update on missing mobile recordings.' },
|
||||
{ id: 'n_2816', kind: 'signin', icon: 'bell', tone: 'bad', when: '2 d ago', unread: false, title: 'Failed sign-in attempts on oliver@', body: '3 attempts from 203.0.113.4 — IP added to watchlist.' },
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user