refactor: shortcuts modal (#18175)

web/src/routes/(user)/user-settings/+page.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { mdiKeyboard } from '@mdi/js';
-  import type { PageData } from './$types';
-  import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
   }
 
   let { data }: Props = $props();
-
-  let isShowKeyboardShortcut = $state(false);
 </script>
 
 <UserPageLayout title={data.meta.title}>
@@ -21,7 +20,7 @@
     <CircleIconButton
       icon={mdiKeyboard}
       title={$t('show_keyboard_shortcuts')}
-      onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
+      onclick={() => modalManager.show(ShortcutsModal, {})}
     />
   {/snippet}
   <section class="mx-4 flex place-content-center">
@@ -30,7 +29,3 @@
     </div>
   </section>
 </UserPageLayout>
-
-{#if isShowKeyboardShortcut}
-  <ShowShortcuts onClose={() => (isShowKeyboardShortcut = false)} />
-{/if}

web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte

@@ -7,8 +7,9 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import ShowShortcuts from '$lib/components/shared-components/show-shortcuts.svelte';
   import DuplicatesCompareControl from '$lib/components/utilities-page/duplicates/duplicates-compare-control.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { stackAssets } from '$lib/utils/asset-utils';
@@ -27,7 +28,6 @@
 
   let { data = $bindable() }: Props = $props();
 
-  let isShowKeyboardShortcut = $state(false);
   let isShowDuplicateInfo = $state(false);
 
   interface Shortcuts {
@@ -185,7 +185,7 @@
         color="secondary"
         icon={mdiKeyboard}
         title={$t('show_keyboard_shortcuts')}
-        onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
+        onclick={() => modalManager.show(ShortcutsModal, { shortcuts: duplicateShortcuts })}
         aria-label={$t('show_keyboard_shortcuts')}
       />
     </HStack>
@@ -222,9 +222,6 @@
   </div>
 </UserPageLayout>
 
-{#if isShowKeyboardShortcut}
-  <ShowShortcuts shortcuts={duplicateShortcuts} onClose={() => (isShowKeyboardShortcut = false)} />
-{/if}
 {#if isShowDuplicateInfo}
   <DuplicatesModal onClose={() => (isShowDuplicateInfo = false)} />
 {/if}