refactor: help modal (#18145)

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

@@ -6,12 +6,13 @@
   import { page } from '$app/state';
   import { clickOutside } from '$lib/actions/click-outside';
   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/managers/auth-manager.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import HelpAndFeedbackModal from '$lib/modals/HelpAndFeedbackModal.svelte';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { notificationManager } from '$lib/stores/notification-manager.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
@@ -35,7 +36,6 @@
   let { showUploadButton = true, onUploadClick }: Props = $props();
 
   let shouldShowAccountInfoPanel = $state(false);
-  let shouldShowHelpPanel = $state(false);
   let shouldShowNotificationPanel = $state(false);
   let innerWidth: number = $state(0);
   const hasUnreadNotifications = $derived(notificationManager.notifications.length > 0);
@@ -49,10 +49,6 @@
 
 <svelte:window bind:innerWidth />
 
-{#if shouldShowHelpPanel && info}
-  <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} {info} />
-{/if}
-
 <nav id="dashboard-navbar" class="z-auto max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm">
   <SkipLink text={$t('skip_to_content')} />
   <div
@@ -129,18 +125,14 @@
 
         <ThemeButton padding="2" />
 
-        <div
+        <div>
-          use:clickOutside={{
-            onEscape: () => (shouldShowHelpPanel = false),
-          }}
-        >
           <IconButton
             shape="round"
             color="secondary"
             variant="ghost"
             size="medium"
             icon={mdiHelpCircleOutline}
-            onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
+            onclick={() => info && modalManager.open(HelpAndFeedbackModal, { info })}
             aria-label={$t('support_and_feedback')}
           />
         </div>

web/src/lib/modals/HelpAndFeedbackModal.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import { type ServerAboutResponseDto } from '@immich/sdk';
-  import { t } from 'svelte-i18n';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import { mdiBugOutline, mdiFaceAgent, mdiGit, mdiGithub, mdiInformationOutline } from '@mdi/js';
   import { discordPath, discordViewBox } from '$lib/assets/svg-paths';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { type ServerAboutResponseDto } from '@immich/sdk';
+  import { Modal, ModalBody } from '@immich/ui';
+  import { mdiBugOutline, mdiFaceAgent, mdiGit, mdiGithub, mdiInformationOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
 
   interface Props {
     onClose: () => void;
@@ -15,8 +14,8 @@
   let { onClose, info }: Props = $props();
 </script>
 
-<Portal>
+<Modal title={$t('support_and_feedback')} {onClose} size="small">
-  <FullScreenModal title={$t('support_and_feedback')} {onClose}>
+  <ModalBody>
     <p>{$t('official_immich_resources')}</p>
     <div class="flex flex-col sm:grid sm:grid-cols-2 gap-2 mt-5">
       <div>
@@ -130,5 +129,5 @@
         {/if}
       </div>
     {/if}
-  </FullScreenModal>
+  </ModalBody>
-</Portal>
+</Modal>