qdadm 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/layout/AppLayout.vue

@@ -23,6 +23,7 @@ import Button from 'primevue/button'
 import Breadcrumb from 'primevue/breadcrumb'
 import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
 import SidebarBox from './SidebarBox.vue'
+import Zone from './Zone.vue'
 import qdadmLogo from '../../assets/logo.svg'
 import { version as qdadmVersion } from '../../../package.json'
 
@@ -204,10 +205,10 @@ const userSubtitle = computed<string>(() => {
   return userData?.email || userData?.role || ''
 })
 
-function handleLogout(): void {
+async function handleLogout(): Promise<void> {
   logout()
+  await router.push({ name: 'login' })
   signals?.emit('auth:logout', { reason: 'user' })
-  router.push({ name: 'login' })
 }
 
 /**
@@ -332,7 +333,11 @@ const showBreadcrumb = computed<boolean>(() => {
 
       <SidebarBox v-if="features.poweredBy" id="powered-by">
         <template #icon>
-          <img :src="qdadmLogo" alt="qdadm" />
+          <div class="footer-logo-wrapper">
+            <img :src="qdadmLogo" alt="qdadm" />
+            <!-- Notification badge overlay on logo -->
+            <Zone name="_app:notification-badge" />
+          </div>
         </template>
         <template #subtitle-content>
           <span class="sidebar-box-subtitle">
@@ -340,6 +345,9 @@ const showBreadcrumb = computed<boolean>(() => {
           </span>
         </template>
       </SidebarBox>
+
+      <!-- Always-visible notification status (hidden when collapsed) -->
+      <Zone name="_app:notification-status" class="sidebar-notification-status" />
     </aside>
 
     <!-- Main content -->
@@ -394,6 +402,9 @@ const showBreadcrumb = computed<boolean>(() => {
       </div>
     </main>
 
+    <!-- Notification panel (rendered outside sidebar, follows sidebar position) -->
+    <Zone name="_app:notifications" />
+
     <!-- Unsaved Changes Dialog (auto-rendered when a form registers guardDialog) -->
     <UnsavedChangesDialog
       v-if="guardDialog"
@@ -652,6 +663,19 @@ const showBreadcrumb = computed<boolean>(() => {
   height: 100%;
 }
 
+.footer-logo-wrapper {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer-logo-wrapper > :deep(.qdadm-zone) {
+  display: contents;
+}
+
 .powered-by-link {
   color: var(--p-surface-300, #cbd5e1);
   text-decoration: none;
@@ -988,3 +1012,15 @@ const showBreadcrumb = computed<boolean>(() => {
   }
 }
 </style>
+
+<style>
+/* Non-scoped: logo alpha blink triggered by notification badge alert state */
+.footer-logo-wrapper:has(.notification-badge-zone--alert) {
+  animation: logo-alpha-blink 1s ease-in-out infinite;
+}
+
+@keyframes logo-alpha-blink {
+  0%, 100% { opacity: 1; filter: none; }
+  50% { opacity: 0.4; filter: brightness(1.2) sepia(1) hue-rotate(-30deg) saturate(3); }
+}
+</style>

package/src/components/layout/BaseLayout.vue

@@ -84,6 +84,9 @@ provide('qdadmNavlinksOverride', navlinksOverride)
         :name="LAYOUT_ZONES.FOOTER"
         :default-component="DefaultFooter"
       />
+
+      <!-- Always-visible notification status (hidden when collapsed) -->
+      <Zone name="_app:notification-status" class="sidebar-notification-status" />
     </aside>
 
     <!-- Main content area -->
@@ -113,6 +116,9 @@ provide('qdadmNavlinksOverride', navlinksOverride)
 
     <!-- Toast is now provided by Kernel at root level -->
 
+    <!-- Notification panel (rendered outside sidebar, follows sidebar position) -->
+    <Zone name="_app:notifications" />
+
     <!-- Confirm dialog (global) -->
     <ConfirmDialog />
 

package/src/components/layout/defaults/DefaultFooter.vue

@@ -9,6 +9,7 @@
  * when no blocks are registered.
  */
 import { inject } from 'vue'
+import Zone from '../Zone.vue'
 import qdadmLogo from '../../../assets/logo.svg'
 import { version as qdadmVersion } from '../../../../package.json'
 
@@ -21,18 +22,24 @@ const features = inject<Features>('qdadmFeatures', { poweredBy: true })
 </script>
 
 <template>
-  <a
-    v-if="features.poweredBy"
-    href="https://github.com/quazardous/qdadm"
-    target="_blank"
-    rel="noopener noreferrer"
-    class="default-footer"
-  >
-    <img :src="qdadmLogo" alt="qdadm" class="footer-logo" />
-    <span class="footer-text">
-      powered by <strong>qdadm</strong> v{{ qdadmVersion }}
-    </span>
-  </a>
+  <div class="default-footer-wrapper">
+    <a
+      v-if="features.poweredBy"
+      href="https://github.com/quazardous/qdadm"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="default-footer"
+    >
+      <div class="footer-logo-wrapper">
+        <img :src="qdadmLogo" alt="qdadm" class="footer-logo" />
+        <!-- Notification badge overlay on logo -->
+        <Zone name="_app:notification-badge" />
+      </div>
+      <span class="footer-text">
+        powered by <strong>qdadm</strong> v{{ qdadmVersion }}
+      </span>
+    </a>
+  </div>
 </template>
 
 <style scoped>
@@ -52,6 +59,15 @@ const features = inject<Features>('qdadmFeatures', { poweredBy: true })
   opacity: 1;
 }
 
+.default-footer-wrapper {
+  position: relative;
+}
+
+.footer-logo-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
 .footer-logo {
   width: 1.25rem;
   height: 1.25rem;

package/src/index.ts

@@ -22,6 +22,7 @@ export type {
   SecurityConfig,
   SSEConfig,
   DebugBarConfig,
+  NotificationsConfig,
   HomeRoute,
   KernelOptions,
 } from './kernel/Kernel'
@@ -387,6 +388,11 @@ export * from './utils/index'
 // ════════════════════════════════════════════════════════════════════════════
 export * from './toast/index'
 
+// ════════════════════════════════════════════════════════════════════════════
+// NOTIFICATIONS (optional notification panel)
+// ════════════════════════════════════════════════════════════════════════════
+export * from './notifications/index'
+
 // ════════════════════════════════════════════════════════════════════════════
 // DEBUG - NOT exported here to enable tree-shaking.
 // Import from 'qdadm/debug' separately when needed:

package/src/kernel/Kernel.ts

@@ -66,6 +66,8 @@ import { StackHydrator } from '../chain/StackHydrator.js'
 import type { EntityManager } from '../entity/EntityManager'
 import type { RoleProvider } from '../security/RolesProvider'
 import type { EntityAuthAdapter } from '../entity/auth/EntityAuthAdapter'
+import { NotificationModule } from '../notifications/NotificationModule'
+import { createNotificationStore, NOTIFICATION_KEY, type NotificationStore } from '../notifications/NotificationStore'
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Types
@@ -178,6 +180,14 @@ export interface DebugBarConfig {
   [key: string]: unknown
 }
 
+/**
+ * Notifications configuration
+ */
+export interface NotificationsConfig {
+  enabled?: boolean
+  maxNotifications?: number
+}
+
 /**
  * Home route configuration
  */
@@ -215,6 +225,7 @@ export interface KernelOptions {
   eventRouter?: RoutesConfig
   sse?: SSEConfig
   debugBar?: DebugBarConfig
+  notifications?: NotificationsConfig
   toast?: Record<string, unknown>
   debug?: boolean
   onAuthExpired?: (payload: unknown) => void
@@ -282,6 +293,7 @@ export class Kernel {
   moduleLoader: ModuleLoader | null = null
   activeStack: ActiveStack | null = null
   stackHydrator: StackHydrator | null = null
+  notificationStore: NotificationStore | null = null
 
   /** Pending provides from modules (applied after vueApp creation) */
   _pendingProvides: Map<string | symbol, unknown> = new Map()
@@ -322,6 +334,13 @@ export class Kernel {
       }
     }
 
+    // Auto-inject NotificationModule if notifications config is provided
+    if (options.notifications?.enabled) {
+      const notificationModule = new NotificationModule()
+      options.moduleDefs = options.moduleDefs || []
+      options.moduleDefs.push(notificationModule)
+    }
+
     this.options = options
   }
 
@@ -1262,6 +1281,14 @@ export class Kernel {
       app.provide('qdadmPermissionRegistry', this.permissionRegistry)
     }
 
+    // Create and provide notification store if notifications are enabled
+    if (this.options.notifications?.enabled) {
+      this.notificationStore = createNotificationStore({
+        maxNotifications: this.options.notifications.maxNotifications,
+      })
+      app.provide(NOTIFICATION_KEY, this.notificationStore)
+    }
+
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const qdadmOptions: any = {
       orchestrator: this.orchestrator,
@@ -1349,6 +1376,13 @@ export class Kernel {
     return this.sseBridge
   }
 
+  /**
+   * Get the NotificationStore instance
+   */
+  getNotificationStore(): NotificationStore | null {
+    return this.notificationStore
+  }
+
   /**
    * Shorthand accessor for SSE bridge
    */

package/src/kernel/KernelContext.ts

@@ -119,6 +119,14 @@ export interface BlockConfig {
   props?: Record<string, unknown>
   id?: string
   operation?: 'add' | 'replace' | 'extend' | 'wrap'
+  /** Block ID to replace (required if operation='replace') */
+  replaces?: string
+  /** Block ID to insert before (for operation='extend') */
+  before?: string
+  /** Block ID to insert after (for operation='extend') */
+  after?: string
+  /** Block ID to wrap (required if operation='wrap') */
+  wraps?: string
 }
 
 /**

package/src/notifications/NotificationBadge.vue

@@ -0,0 +1,31 @@
+<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>
+.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