diff --git a/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts b/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts index 6c2cf77e49..551f4fd230 100644 --- a/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts +++ b/web/src/lib/components/shared-components/notification/__tests__/notification-card.spec.ts @@ -15,7 +15,8 @@ describe('NotificationCard component', () => { id: 1234, message: 'Notification message', timeout: 1000, - type: NotificationType.Info + type: NotificationType.Info, + action: { type: 'discard' } } }); @@ -29,7 +30,8 @@ describe('NotificationCard component', () => { id: 1234, message: 'Notification message', timeout: 1000, - type: NotificationType.Info + type: NotificationType.Info, + action: { type: 'discard' } } }); diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte index 289f10f56e..dbff5b9e48 100644 --- a/web/src/lib/components/shared-components/notification/notification-card.svelte +++ b/web/src/lib/components/shared-components/notification/notification-card.svelte @@ -2,6 +2,7 @@ import { fade } from 'svelte/transition'; import CloseCircleOutline from 'svelte-material-icons/CloseCircleOutline.svelte'; import InformationOutline from 'svelte-material-icons/InformationOutline.svelte'; + import WindowClose from 'svelte-material-icons/WindowClose.svelte'; import { ImmichNotification, @@ -51,26 +52,42 @@ let removeNotificationTimeout: NodeJS.Timeout | undefined = undefined; onMount(() => { - removeNotificationTimeout = setTimeout(() => { - notificationController.removeNotificationById(notificationInfo.id); - }, notificationInfo.timeout); - + removeNotificationTimeout = setTimeout(discard, notificationInfo.timeout); return () => clearTimeout(removeNotificationTimeout); }); + + const discard = () => { + notificationController.removeNotificationById(notificationInfo.id); + }; + + const handleClick = () => { + const action = notificationInfo.action; + if (action.type == 'discard') { + discard(); + } else if (action.type == 'link') { + window.open(action.target); + } + };
{notificationInfo.message}
+{@html notificationInfo.message}