NotificationDialog

Modal dialog for viewing the full content of a notification with actions like mark as read, mark as unread, and delete.

Import​

Notification components are available via a separate entry point to make @classic-homes/notifications an optional dependency.

<script>
  import { NotificationDialog } from '@classic-homes/theme-svelte/notifications';
</script>

Note: Using notification components requires @classic-homes/notifications to be installed.

Basic Usage​

<script>
  import type { Notification } from '@classic-homes/notifications/core';

  let notification = $state<Notification | null>(null);
  let open = $state(false);
</script>

<NotificationDialog {notification} bind:open />

Props​

Prop	Type	Default	Description
notification	Notification | null	required	The notification to display
open	boolean	false	Whether the dialog is open (bindable)
onClose	() => void	-	Callback when the dialog should close
onMarkRead	(id: string) => void	-	Callback to mark notification as read
onMarkUnread	(id: string) => void	-	Callback to mark as unread
onDelete	(id: string) => void	-	Callback to delete notification

Dialog Content​

The dialog displays:

• Header: Icon, title, type badge, priority badge (if not normal), unread badge
• Body: Full message content, action link (if provided), metadata (category, timestamps)
• Footer: Action buttons (Delete, Mark Read/Unread, View action)

Actions​

Mark as Read/Unread​

The dialog shows contextual buttons based on read status:

<NotificationDialog
  {notification}
  bind:open
  onMarkRead={(id) => {
    notifications = notifications.map((n) =>
      n.id === id ? { ...n, read: true, readAt: new Date().toISOString() } : n
    );
  }}
  onMarkUnread={(id) => {
    notifications = notifications.map((n) =>
      n.id === id ? { ...n, read: false, readAt: undefined } : n
    );
  }}
/>

Delete​

<NotificationDialog
  {notification}
  bind:open
  onDelete={(id) => {
    notifications = notifications.filter((n) => n.id !== id);
    open = false;
  }}
/>

With Close Handler​

Handle dialog close events:

<script>
  function handleClose() {
    notification = null;
    open = false;
  }
</script>

<NotificationDialog {notification} bind:open onClose={handleClose} />

Examples​

Complete Implementation​

<script>
  import { toastStore } from '@classic-homes/theme-svelte';
  import { NotificationList, NotificationDialog } from '@classic-homes/theme-svelte/notifications';
  import type { Notification } from '@classic-homes/notifications/core';

  let notifications = $state<Notification[]>([...]);
  let selectedNotification = $state<Notification | null>(null);
  let dialogOpen = $state(false);

  function handleNotificationClick(notification: Notification) {
    selectedNotification = notification;
    dialogOpen = true;
  }

  function handleDialogClose() {
    dialogOpen = false;
    selectedNotification = null;
  }

  function markAsRead(id: string) {
    notifications = notifications.map(n =>
      n.id === id ? { ...n, read: true, readAt: new Date().toISOString() } : n
    );
    toastStore.success('Notification marked as read');
  }

  function markAsUnread(id: string) {
    notifications = notifications.map(n =>
      n.id === id ? { ...n, read: false, readAt: undefined } : n
    );
    toastStore.info('Notification marked as unread');
  }

  function deleteNotification(id: string) {
    notifications = notifications.filter(n => n.id !== id);
    handleDialogClose();
    toastStore.info('Notification deleted');
  }
</script>

<NotificationList {notifications} onNotificationClick={handleNotificationClick} />

<NotificationDialog
  notification={selectedNotification}
  bind:open={dialogOpen}
  onClose={handleDialogClose}
  onMarkRead={markAsRead}
  onMarkUnread={markAsUnread}
  onDelete={deleteNotification}
/>

With Action Links​

Notifications with action URLs display a primary action button:

<!-- Notification with actionUrl and actionLabel -->
<NotificationDialog
  notification={{
    ...notification,
    actionUrl: '/settings/security',
    actionLabel: 'Review Activity',
  }}
  bind:open
/>

The action link appears in both the body and footer of the dialog.

Accessibility​

The component includes accessibility features:

• Built on the Dialog component with proper ARIA attributes
• Focus trapped within the dialog when open
• Keyboard navigation support (Escape to close)
• Screen reader announcements for notification content

Related Components​

• NotificationList - Display notifications in a list
• NotificationItem - Single notification card
• Dialog - Base dialog component