refactor: shortcuts modal (#18175)

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -1,28 +1,29 @@
 <script lang="ts">
-  import { type ShortcutOptions, shortcuts } from '$lib/actions/shortcut';
   import { goto } from '$app/navigation';
+  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import type { Viewport } from '$lib/stores/assets-store.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
+  import { handlePromiseError } from '$lib/utils';
   import { deleteAssets } from '$lib/utils/actions';
   import { archiveAssets, cancelMultiselect } from '$lib/utils/asset-utils';
-  import { featureFlags } from '$lib/stores/server-config.store';
+  import { focusNext } from '$lib/utils/focus-util';
   import { handleError } from '$lib/utils/handle-error';
+  import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
   import { navigate } from '$lib/utils/navigation';
   import { type AssetResponseDto } from '@immich/sdk';
+  import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-  import ShowShortcuts from '../show-shortcuts.svelte';
-  import Portal from '../portal/portal.svelte';
-  import { handlePromiseError } from '$lib/utils';
   import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { debounce } from 'lodash-es';
-  import { getJustifiedLayoutFromAssets, type CommonJustifiedLayout } from '$lib/utils/layout-utils';
-  import { focusNext } from '$lib/utils/focus-util';
+  import Portal from '../portal/portal.svelte';
 
   interface Props {
     assets: AssetResponseDto[];
@@ -106,7 +107,6 @@
     };
   });
 
-  let showShortcuts = $state(false);
   let currentViewAssetIndex = 0;
   let shiftKeyIsDown = $state(false);
   let lastAssetMouseEvent: AssetResponseDto | null = $state(null);
@@ -263,6 +263,18 @@
   const focusNextAsset = () => focusNext((element) => element.dataset.thumbnailFocusContainer !== undefined, true);
   const focusPreviousAsset = () => focusNext((element) => element.dataset.thumbnailFocusContainer !== undefined, false);
 
+  let isShortcutModalOpen = false;
+
+  const handleOpenShortcutModal = async () => {
+    if (isShortcutModalOpen) {
+      return;
+    }
+
+    isShortcutModalOpen = true;
+    await modalManager.show(ShortcutsModal, {});
+    isShortcutModalOpen = false;
+  };
+
   let shortcutList = $derived(
     (() => {
       if ($isViewerOpen) {
@@ -270,7 +282,7 @@
       }
 
       const shortcuts: ShortcutOptions[] = [
-        { shortcut: { key: '?', shift: true }, onShortcut: () => (showShortcuts = !showShortcuts) },
+        { shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal },
         { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
         { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets() },
         { shortcut: { key: 'ArrowRight' }, preventDefault: false, onShortcut: focusNextAsset },
@@ -439,10 +451,6 @@
   />
 {/if}
 
-{#if showShortcuts}
-  <ShowShortcuts onClose={() => (showShortcuts = !showShortcuts)} />
-{/if}
-
 {#if assets.length > 0}
   <div
     style:position="relative"

web/src/lib/components/shared-components/show-shortcuts.svelte

@@ -1,94 +0,0 @@
-<script lang="ts">
-  import { mdiInformationOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import Icon from '../elements/icon.svelte';
-  import FullScreenModal from './full-screen-modal.svelte';
-
-  interface Shortcuts {
-    general: ExplainedShortcut[];
-    actions: ExplainedShortcut[];
-  }
-
-  interface ExplainedShortcut {
-    key: string[];
-    action: string;
-    info?: string;
-  }
-
-  interface Props {
-    onClose: () => void;
-    shortcuts?: Shortcuts;
-  }
-
-  let {
-    onClose,
-    shortcuts = {
-      general: [
-        { key: ['←', '→'], action: $t('previous_or_next_photo') },
-        { key: ['x'], action: $t('select') },
-        { key: ['Esc'], action: $t('back_close_deselect') },
-        { key: ['Ctrl', 'k'], action: $t('search_your_photos') },
-        { key: ['Ctrl', '⇧', 'k'], action: $t('open_the_search_filters') },
-      ],
-      actions: [
-        { key: ['f'], action: $t('favorite_or_unfavorite_photo') },
-        { key: ['i'], action: $t('show_or_hide_info') },
-        { key: ['s'], action: $t('stack_selected_photos') },
-        { key: ['l'], action: $t('add_to_album') },
-        { key: ['⇧', 'l'], action: $t('add_to_shared_album') },
-        { key: ['⇧', 'a'], action: $t('archive_or_unarchive_photo') },
-        { key: ['⇧', 'd'], action: $t('download') },
-        { key: ['Space'], action: $t('play_or_pause_video') },
-        { key: ['Del'], action: $t('trash_delete_asset'), info: $t('shift_to_permanent_delete') },
-      ],
-    },
-  }: Props = $props();
-</script>
-
-<FullScreenModal title={$t('keyboard_shortcuts')} width="auto" {onClose}>
-  <div class="grid grid-cols-1 gap-4 px-4 pb-4 md:grid-cols-2">
-    {#if shortcuts.general.length > 0}
-      <div class="p-4">
-        <h2>{$t('general')}</h2>
-        <div class="text-sm">
-          {#each shortcuts.general as shortcut (shortcut.key.join('-'))}
-            <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
-              <div class="flex justify-self-end">
-                {#each shortcut.key as key (key)}
-                  <p class="me-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2">
-                    {key}
-                  </p>
-                {/each}
-              </div>
-              <p class="mb-1 mt-1 flex">{shortcut.action}</p>
-            </div>
-          {/each}
-        </div>
-      </div>
-    {/if}
-    {#if shortcuts.actions.length > 0}
-      <div class="p-4">
-        <h2>{$t('actions')}</h2>
-        <div class="text-sm">
-          {#each shortcuts.actions as shortcut (shortcut.key.join('-'))}
-            <div class="grid grid-cols-[30%_70%] items-center gap-4 pt-4 text-sm">
-              <div class="flex justify-self-end">
-                {#each shortcut.key as key (key)}
-                  <p class="me-1 flex items-center justify-center justify-self-end rounded-lg bg-immich-primary/25 p-2">
-                    {key}
-                  </p>
-                {/each}
-              </div>
-              <div class="flex items-center gap-2">
-                <p class="mb-1 mt-1 flex">{shortcut.action}</p>
-                {#if shortcut.info}
-                  <Icon path={mdiInformationOutline} title={shortcut.info} />
-                {/if}
-              </div>
-            </div>
-          {/each}
-        </div>
-      </div>
-    {/if}
-  </div>
-</FullScreenModal>