Ronni Baslund
0bd4e5498e
- portal: new admin/ and partner/ surfaces with full component library (AppLauncher, Avatar, Badge, Card, Modal, Tabs, etc.), composables, layouts, partner-routing middleware, and supporting server APIs - pricing: Price schema/module with operator CRUD, pricing.vue catalog UI, Subscription extended with cycle/currency/perSeatAmount/seats snapshots for stable MRR aggregation - partner staff: User.partnerId, invite-partner-user DTO and flow, /partners/:slug/users endpoints, InvitePartnerUserModal, shared dezky-partner-staff Authentik group - /me: partner-aware endpoint returning user + partner context so portal can route between end-user and partner-admin surfaces - tenant: seats field for portfolio displays and future MRR calculations - operator: pricing page, signed-out page, useMe/useToast composables, ToastStack
56 lines
2.0 KiB
Vue
56 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
// Notification drawer. Right-side slide-out. Triggered by the topbar bell.
|
|
|
|
const drawer = useNotificationDrawer()
|
|
|
|
const TONE_COLOR: Record<string, string> = {
|
|
info: 'var(--info)',
|
|
ok: 'var(--ok)',
|
|
warn: 'var(--warn)',
|
|
bad: 'var(--bad)',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<SidePanel :open="drawer.open.value" width="sm" eyebrow="Notifications" title="Inbox" @close="drawer.hide">
|
|
<template #footer>
|
|
<UiButton variant="ghost" @click="drawer.markAllRead">Mark all read</UiButton>
|
|
<UiButton variant="secondary" @click="$router.push('/profile?tab=notifications'); drawer.hide()">Preferences</UiButton>
|
|
</template>
|
|
|
|
<div v-if="drawer.items.value.length === 0" class="empty">
|
|
<Mono dim>No notifications.</Mono>
|
|
</div>
|
|
<div v-else class="list">
|
|
<div v-for="n in drawer.items.value" :key="n.id" class="row" :class="{ unread: !n.read }">
|
|
<span class="dot" :style="{ background: TONE_COLOR[n.tone] }" />
|
|
<div class="meta">
|
|
<div class="row-head">
|
|
<div class="title">{{ n.title }}</div>
|
|
<Mono dim>{{ n.when }}</Mono>
|
|
</div>
|
|
<div class="body">{{ n.body }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SidePanel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.empty { padding: 32px 0; text-align: center; }
|
|
.list { display: flex; flex-direction: column; gap: 0; }
|
|
.row {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--border);
|
|
align-items: flex-start;
|
|
}
|
|
.row.unread { background: linear-gradient(to right, rgba(212, 255, 58, 0.06), transparent 60%); padding-left: 8px; margin-left: -8px; }
|
|
.dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 6px; flex-shrink: 0; }
|
|
.meta { flex: 1; min-width: 0; }
|
|
.row-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
|
|
.title { font-weight: 600; font-size: 13.5px; }
|
|
.body { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
|
|
</style>
|