@quazardous/qdadm 1.19.3

package/src/notifications/NotificationBadge.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * NotificationBadge - Clickable overlay for the sidebar footer logo
+ *
+ * Always rendered as a transparent click zone over the logo.
+ * When there are alerts, the parent layout applies an opacity blink
+ * on the logo wrapper via :has(.notification-badge-zone--alert).
+ *
+ * Click toggles the notification panel open/close.
+ */
+import { useNotifications } from './NotificationStore'
+
+const store = useNotifications()
+</script>
+
+<template>
+  <div
+    class="notification-badge-zone"
+    :class="{ 'notification-badge-zone--alert': store.hasAlert.value || store.unreadCount.value > 0 }"
+    @click.stop.prevent="store.toggle()"
+  />
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+.notification-badge-zone {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+</style>

package/src/notifications/NotificationListener.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * NotificationListener - Captures toast signals to notification store
+ *
+ * Replaces ToastListener when NotificationModule is active.
+ * Intercepts toast:* signals and:
+ * - Always captures to NotificationStore
+ * - If data.forceToast === true, also shows a classic PrimeVue toast
+ */
+import { onMounted, onUnmounted, inject } from 'vue'
+import { useToast } from 'primevue/usetoast'
+import type { SignalBus } from '../kernel/SignalBus'
+import { useNotifications } from './NotificationStore'
+import type { NotificationSeverity } from './NotificationStore'
+
+interface ToastEventData {
+  summary?: string
+  detail?: string
+  life?: number
+  emitter?: string
+  forceToast?: boolean
+}
+
+const toast = useToast()
+const signals = inject<SignalBus | null>('qdadmSignals', null)
+const store = useNotifications()
+
+let unsubscribe: (() => void) | null = null
+
+onMounted(() => {
+  if (!signals) {
+    console.warn('[NotificationListener] No signals bus injected')
+    return
+  }
+
+  unsubscribe = signals.on('toast:*', (event) => {
+    const data = event.data as ToastEventData | undefined
+    const severity = event.name.split(':')[1] as NotificationSeverity
+
+    // Always capture to notification store
+    store.addNotification({
+      severity,
+      summary: data?.summary || '',
+      detail: data?.detail,
+      emitter: data?.emitter,
+    })
+
+    // If forceToast is set, also show classic PrimeVue toast
+    if (data?.forceToast) {
+      toast.add({
+        severity,
+        summary: data?.summary,
+        detail: data?.detail,
+        life: data?.life ?? 3000,
+      })
+    }
+  })
+})
+
+onUnmounted(() => {
+  if (unsubscribe) {
+    unsubscribe()
+    unsubscribe = null
+  }
+})
+</script>
+
+<template>
+  <!-- Invisible listener component -->
+  <span style="display: none" />
+</template>

package/src/notifications/NotificationModule.ts

@@ -0,0 +1,76 @@
+/**
+ * NotificationModule - Optional notification panel system
+ *
+ * When loaded, this module:
+ * - Replaces the default ToastListener with NotificationListener
+ *   (captures toasts to notification store instead of ephemeral PrimeVue toasts)
+ * - Registers NotificationBadge for the sidebar footer logo overlay
+ * - Registers NotificationPanel zone for the panel component
+ *
+ * Without this module, classic toast behavior is unchanged (ToastBridgeModule).
+ * With this module, toasts are captured. Use `forceToast: true` in signal data
+ * to also show a classic PrimeVue toast.
+ *
+ * @example
+ * // In kernel config
+ * const kernel = new Kernel({
+ *   notifications: { enabled: true, maxNotifications: 100 }
+ * })
+ */
+
+import { Module } from '../kernel/Module'
+import type { KernelContext } from '../kernel/KernelContext'
+import { TOAST_ZONE } from '../toast/ToastBridgeModule'
+import NotificationListener from './NotificationListener.vue'
+import NotificationBadge from './NotificationBadge.vue'
+import NotificationPanel from './NotificationPanel.vue'
+
+/**
+ * Zone names for notification components
+ */
+export const NOTIFICATION_ZONE = '_app:notifications'
+export const NOTIFICATION_BADGE_ZONE = '_app:notification-badge'
+export const NOTIFICATION_STATUS_ZONE = '_app:notification-status'
+
+export class NotificationModule extends Module {
+  static override moduleName = 'notifications'
+  static override requires: string[] = []
+  static override priority = 5 // Before toast-bridge (10) to intercept first
+
+  static override styles = () => import('./styles.scss')
+
+  async connect(ctx: KernelContext): Promise<void> {
+    // Define notification zones
+    ctx.zone(NOTIFICATION_ZONE)
+    ctx.zone(NOTIFICATION_BADGE_ZONE)
+    ctx.zone(NOTIFICATION_STATUS_ZONE)
+
+    // Replace the toast-listener block in the toast zone with our NotificationListener.
+    // This intercepts toast signals and captures them to the notification store.
+    // The toast zone is defined by ToastBridgeModule - we replace its listener block.
+    ctx.zone(TOAST_ZONE) // Ensure the zone exists
+    ctx.block(TOAST_ZONE, {
+      id: 'toast-listener',
+      component: NotificationListener,
+      weight: 0,
+      operation: 'replace',
+      replaces: 'toast-listener',
+    })
+
+    // Register badge component for sidebar footer overlay
+    ctx.block(NOTIFICATION_BADGE_ZONE, {
+      id: 'notification-badge',
+      component: NotificationBadge,
+      weight: 0,
+    })
+
+    // Register panel component
+    ctx.block(NOTIFICATION_ZONE, {
+      id: 'notification-panel',
+      component: NotificationPanel,
+      weight: 0,
+    })
+  }
+}
+
+export default NotificationModule

package/src/notifications/NotificationPanel.vue

@@ -0,0 +1,478 @@
+<script setup lang="ts">
+/**
+ * NotificationPanel - Notification panel anchored to the sidebar
+ *
+ * Position:
+ * - Desktop: Fixed, left edge aligned to sidebar right edge, bottom of screen
+ * - Collapsed sidebar: Follows collapsed width
+ * - Mobile: Full width overlay at bottom of screen
+ *
+ * Features:
+ * - Inline action bar (mark read, clear, close) at top right
+ * - Status items section (custom module items)
+ * - Notification list (most recent first)
+ * - Empty state
+ */
+import { RouterLink } from 'vue-router'
+import { useNotifications } from './NotificationStore'
+import type { NotificationSeverity } from './NotificationStore'
+
+const store = useNotifications()
+
+const severityIcons: Record<NotificationSeverity, string> = {
+  success: 'pi pi-check-circle',
+  info: 'pi pi-info-circle',
+  warn: 'pi pi-exclamation-triangle',
+  error: 'pi pi-times-circle',
+}
+
+const statusIcons: Record<string, string> = {
+  nominal: 'pi pi-check',
+  warn: 'pi pi-exclamation-triangle',
+  error: 'pi pi-times-circle',
+}
+
+function formatTime(timestamp: number): string {
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+
+  if (diffMins < 1) return 'just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+
+  const diffHours = Math.floor(diffMins / 60)
+  if (diffHours < 24) return `${diffHours}h ago`
+
+  return date.toLocaleDateString()
+}
+</script>
+
+<template>
+  <Transition name="notification-panel">
+    <div
+      v-if="store.isOpen.value"
+      class="notification-panel"
+    >
+      <!-- Inline toolbar -->
+      <div class="notification-toolbar">
+        <button
+          v-if="store.unreadCount.value > 0"
+          class="notification-toolbar-btn"
+          title="Mark all read"
+          @click="store.markAllRead()"
+        >
+          <i class="pi pi-check-circle" />
+        </button>
+        <button
+          v-if="store.notifications.value.length > 0"
+          class="notification-toolbar-btn"
+          title="Clear all"
+          @click="store.clearNotifications()"
+        >
+          <i class="pi pi-trash" />
+        </button>
+        <button
+          class="notification-toolbar-btn notification-toolbar-close"
+          title="Close"
+          @click="store.close()"
+        >
+          <i class="pi pi-times" />
+        </button>
+      </div>
+
+      <!-- Status items -->
+      <div
+        v-if="store.statusItems.value.length > 0"
+        class="notification-panel-status"
+      >
+        <component
+          v-for="item in store.statusItems.value"
+          :key="item.id"
+          :is="item.to ? RouterLink : 'div'"
+          :to="item.to || undefined"
+          class="notification-status-item"
+          :class="[
+            `notification-status-item--${item.severity}`,
+            { 'notification-status-item--link': !!item.to }
+          ]"
+          @click="item.to ? store.close() : undefined"
+        >
+          <i :class="item.icon || statusIcons[item.severity]" />
+          <span class="notification-status-label">{{ item.label }}</span>
+          <i v-if="item.to" class="pi pi-chevron-right notification-status-arrow" />
+          <span v-else-if="item.count != null" class="notification-status-count">{{ item.count }}</span>
+        </component>
+      </div>
+
+      <!-- Notification list -->
+      <div class="notification-panel-list">
+        <div
+          v-for="notif in store.notifications.value"
+          :key="notif.id"
+          class="notification-item"
+          :class="{
+            'notification-item--unread': !notif.read,
+            [`notification-item--${notif.severity}`]: true,
+          }"
+          @click="store.markRead(notif.id)"
+        >
+          <div class="notification-item-icon">
+            <i :class="severityIcons[notif.severity]" />
+          </div>
+          <div class="notification-item-content">
+            <div class="notification-item-summary">{{ notif.summary }}</div>
+            <div v-if="notif.detail" class="notification-item-detail">{{ notif.detail }}</div>
+            <div class="notification-item-meta">
+              <span class="notification-item-time">{{ formatTime(notif.timestamp) }}</span>
+              <span v-if="notif.emitter" class="notification-item-emitter">{{ notif.emitter }}</span>
+            </div>
+          </div>
+          <button
+            class="notification-item-dismiss"
+            title="Dismiss"
+            @click.stop="store.removeNotification(notif.id)"
+          >
+            <i class="pi pi-times" />
+          </button>
+        </div>
+
+        <!-- Empty state -->
+        <div
+          v-if="store.notifications.value.length === 0 && store.statusItems.value.length === 0"
+          class="notification-panel-empty"
+        >
+          <i class="pi pi-bell" />
+          <span>No notifications</span>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+/*
+ * Only keep styles here that REQUIRE scoping (:deep, dynamic binding, component-specific overrides).
+ * Generic/reusable styles belong in src/styles/ partials (see _forms.scss, _cards.scss, etc.).
+ */
+.notification-panel {
+  position: fixed;
+  left: calc(var(--fad-sidebar-width, 15rem) + 0.375rem);
+  bottom: 0.5rem;
+  width: 22rem;
+  min-height: 6.6rem;
+  max-height: 50vh;
+  background: var(--p-surface-0, #ffffff);
+  border: 1px solid var(--p-surface-200, #e2e8f0);
+  border-radius: 2px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  z-index: 200;
+  overflow: hidden;
+}
+
+/* Collapsed sidebar */
+:root:has(.sidebar--collapsed) .notification-panel {
+  left: calc(var(--fad-sidebar-width-collapsed, 2.5rem) + 0.375rem);
+}
+
+/* Inline toolbar - floats top-right inside the panel */
+.notification-toolbar {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 0.25rem;
+  z-index: 1;
+}
+
+.notification-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border: none;
+  background: none;
+  border-radius: 2px;
+  color: var(--p-surface-400, #94a3b8);
+  cursor: pointer;
+  font-size: 0.6875rem;
+  transition: color 0.1s, background 0.1s;
+}
+
+.notification-toolbar-btn:hover {
+  background: var(--p-surface-100, #f1f5f9);
+  color: var(--p-surface-600, #475569);
+}
+
+.notification-toolbar-close:hover {
+  color: var(--p-surface-700, #334155);
+}
+
+/* Status items */
+.notification-panel-status {
+  padding: 0.5rem 0.625rem;
+  padding-right: 2.5rem;
+  border-bottom: 1px solid var(--p-surface-100, #f1f5f9);
+  flex-shrink: 0;
+}
+
+.notification-status-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.1875rem 0;
+  font-size: 0.75rem;
+  color: var(--p-surface-600, #475569);
+}
+
+.notification-status-item i {
+  font-size: 0.6875rem;
+}
+
+.notification-status-item--nominal i {
+  color: var(--p-green-500, #22c55e);
+}
+
+.notification-status-item--warn i {
+  color: var(--p-orange-500, #f97316);
+}
+
+.notification-status-item--error i {
+  color: var(--p-red-500, #ef4444);
+}
+
+.notification-status-label {
+  flex: 1;
+}
+
+.notification-status-count {
+  font-weight: 600;
+  font-size: 0.6875rem;
+}
+
+.notification-status-item--link {
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: 2px;
+  padding: 0.1875rem 0.375rem;
+  margin: 0 -0.375rem;
+  transition: background 0.1s;
+}
+
+.notification-status-item--link:hover {
+  background: var(--p-surface-50, #f8fafc);
+}
+
+.notification-status-arrow {
+  font-size: 0.5625rem;
+  opacity: 0;
+  transition: opacity 0.1s;
+  color: var(--p-surface-400, #94a3b8);
+}
+
+.notification-status-item--link:hover .notification-status-arrow {
+  opacity: 1;
+}
+
+/* Notification list */
+.notification-panel-list {
+  flex: 1;
+  overflow-y: auto;
+  max-height: calc(50vh - 3rem);
+}
+
+/* Individual notification */
+.notification-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  border-bottom: 1px solid var(--p-surface-50, #f8fafc);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.notification-item:first-child {
+  padding-right: 2.5rem;
+}
+
+.notification-item:hover {
+  background: var(--p-surface-50, #f8fafc);
+}
+
+.notification-item:last-child {
+  border-bottom: none;
+}
+
+.notification-item--unread {
+  background: var(--p-blue-50, #eff6ff);
+}
+
+.notification-item--unread:hover {
+  background: var(--p-blue-100, #dbeafe);
+}
+
+.notification-item-icon {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.0625rem;
+}
+
+.notification-item-icon i {
+  font-size: 0.75rem;
+}
+
+.notification-item--success .notification-item-icon i {
+  color: var(--p-green-500, #22c55e);
+}
+
+.notification-item--info .notification-item-icon i {
+  color: var(--p-blue-500, #3b82f6);
+}
+
+.notification-item--warn .notification-item-icon i {
+  color: var(--p-orange-500, #f97316);
+}
+
+.notification-item--error .notification-item-icon i {
+  color: var(--p-red-500, #ef4444);
+}
+
+.notification-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.notification-item-summary {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--p-surface-700, #334155);
+  line-height: 1.3;
+}
+
+.notification-item-detail {
+  font-size: 0.6875rem;
+  color: var(--p-surface-500, #64748b);
+  margin-top: 0.0625rem;
+  line-height: 1.3;
+}
+
+.notification-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: 0.125rem;
+  font-size: 0.625rem;
+  color: var(--p-surface-400, #94a3b8);
+}
+
+.notification-item-emitter::before {
+  content: '\00b7';
+  margin-right: 0.375rem;
+}
+
+.notification-item-dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: none;
+  background: none;
+  border-radius: 2px;
+  color: var(--p-surface-400, #94a3b8);
+  cursor: pointer;
+  font-size: 0.5625rem;
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.notification-item:hover .notification-item-dismiss {
+  opacity: 1;
+}
+
+.notification-item-dismiss:hover {
+  background: var(--p-surface-200, #e2e8f0);
+  color: var(--p-surface-600, #475569);
+}
+
+/* Empty state */
+.notification-panel-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 1rem;
+  color: var(--p-surface-300, #cbd5e1);
+  gap: 0.375rem;
+}
+
+.notification-panel-empty i {
+  font-size: 1.25rem;
+}
+
+.notification-panel-empty span {
+  font-size: 0.75rem;
+}
+
+/* Transition */
+.notification-panel-enter-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.notification-panel-leave-active {
+  transition: opacity 0.1s ease, transform 0.1s ease;
+}
+
+.notification-panel-enter-from,
+.notification-panel-leave-to {
+  opacity: 0;
+  transform: translateY(0.5rem);
+}
+
+/* Mobile: full width bottom overlay */
+@media (max-width: 767px) {
+  .notification-panel {
+    left: 0 !important;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-height: 60vh;
+    border-radius: 2px 2px 0 0;
+    border-bottom: none;
+  }
+}
+
+/* Dark mode */
+.dark-mode .notification-panel {
+  background: var(--p-surface-800, #1e293b);
+  border-color: var(--p-surface-700, #334155);
+}
+
+.dark-mode .notification-toolbar-btn:hover {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-surface-300, #cbd5e1);
+}
+
+.dark-mode .notification-item--unread {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.dark-mode .notification-item:hover {
+  background: var(--p-surface-700, #334155);
+}
+
+.dark-mode .notification-item--unread:hover {
+  background: rgba(59, 130, 246, 0.15);
+}
+</style>