feat: notifications (#17701)

* feat: notifications

* UI works

* chore: pr feedback

* initial fetch and clear notification upon logging out

* fix: merge

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -8,6 +8,7 @@
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
   import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
+  import NotificationPanel from '$lib/components/shared-components/navigation-bar/notification-panel.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import { AppRoute } from '$lib/constants';
   import { authManager } from '$lib/stores/auth-manager.svelte';
@@ -18,13 +19,14 @@
   import { userInteraction } from '$lib/stores/user.svelte';
   import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
   import { Button, IconButton } from '@immich/ui';
-  import { mdiHelpCircleOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
+  import { mdiBellBadge, mdiBellOutline, mdiHelpCircleOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import ThemeButton from '../theme-button.svelte';
   import UserAvatar from '../user-avatar.svelte';
   import AccountInfoPanel from './account-info-panel.svelte';
+  import { notificationManager } from '$lib/stores/notification-manager.svelte';
 
   interface Props {
     showUploadButton?: boolean;
@@ -36,7 +38,9 @@
   let shouldShowAccountInfo = $state(false);
   let shouldShowAccountInfoPanel = $state(false);
   let shouldShowHelpPanel = $state(false);
+  let shouldShowNotificationPanel = $state(false);
   let innerWidth: number = $state(0);
+  const hasUnreadNotifications = $derived(notificationManager.notifications.length > 0);
 
   let info: ServerAboutResponseDto | undefined = $state();
 
@@ -146,6 +150,27 @@
           />
         </div>
 
+        <div
+          use:clickOutside={{
+            onOutclick: () => (shouldShowNotificationPanel = false),
+            onEscape: () => (shouldShowNotificationPanel = false),
+          }}
+        >
+          <IconButton
+            shape="round"
+            color={hasUnreadNotifications ? 'primary' : 'secondary'}
+            variant="ghost"
+            size="medium"
+            icon={hasUnreadNotifications ? mdiBellBadge : mdiBellOutline}
+            onclick={() => (shouldShowNotificationPanel = !shouldShowNotificationPanel)}
+            aria-label={$t('notifications')}
+          />
+
+          {#if shouldShowNotificationPanel}
+            <NotificationPanel />
+          {/if}
+        </div>
+
         <div
           use:clickOutside={{
             onOutclick: () => (shouldShowAccountInfoPanel = false),