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).
127 lines
3.0 KiB
Vue
127 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
const { open: openPalette } = useCommandPalette()
|
|
const { open: openNotifications, unreadCount } = useNotifications()
|
|
const { env } = useEnv()
|
|
|
|
const ENVS = {
|
|
prod: { label: 'PROD', fg: 'var(--text)', bg: 'rgba(244,243,238,0.08)', border: 'rgba(244,243,238,0.15)' },
|
|
staging: { label: 'STAGING', fg: '#FFC872', bg: 'rgba(232,154,31,0.16)', border: 'rgba(232,154,31,0.36)' },
|
|
dev: { label: 'DEV', fg: '#D4AAFF', bg: 'rgba(159,98,212,0.18)', border: 'rgba(159,98,212,0.36)' },
|
|
} as const
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<span class="env" :style="{ color: ENVS[env].fg, background: ENVS[env].bg, borderColor: ENVS[env].border }">
|
|
<span class="env-dot" />
|
|
{{ ENVS[env].label }}
|
|
</span>
|
|
|
|
<button class="palette" @click="openPalette">
|
|
<UiIcon name="search" :size="13" stroke="var(--text-mute)" />
|
|
<span class="palette-hint">Search tenants, users, tickets… or execute action</span>
|
|
<span class="kbd">⌘K</span>
|
|
</button>
|
|
|
|
<div class="right">
|
|
<button class="icon-btn" title="Notifications" @click="openNotifications">
|
|
<UiIcon name="bell" :size="14" />
|
|
<span v-if="unreadCount > 0" class="icon-btn-dot" />
|
|
</button>
|
|
|
|
<UserMenu />
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
header {
|
|
height: 52px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 16px;
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.env {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border: 1px solid;
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.16em;
|
|
}
|
|
.env-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.7; }
|
|
|
|
.palette {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 540px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
cursor: text;
|
|
color: var(--text-mute);
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.palette-hint { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
.kbd {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
color: var(--text-mute);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon-btn {
|
|
position: relative;
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 5px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
.icon-btn-dot {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 7px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: var(--bad);
|
|
border: 1.5px solid var(--bg);
|
|
}
|
|
</style>
|