refactor(web): user setting actions (#25424)

web/src/lib/services/keyboard.service.ts

@@ -0,0 +1,14 @@
+import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
+import { modalManager, type ActionItem } from '@immich/ui';
+import { mdiKeyboard } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getKeyboardActions = ($t: MessageFormatter) => {
+  const KeyboardShortcuts: ActionItem = {
+    title: $t('show_keyboard_shortcuts'),
+    icon: mdiKeyboard,
+    onAction: () => modalManager.show(ShortcutsModal, {}),
+  };
+
+  return { KeyboardShortcuts };
+};

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

@@ -1,30 +1,21 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
-  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
+  import { getKeyboardActions } from '$lib/services/keyboard.service';
-  import { Container, IconButton, modalManager } from '@immich/ui';
+  import { Container } from '@immich/ui';
-  import { mdiKeyboard } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
-  interface Props {
+  type Props = {
     data: PageData;
-  }
+  };
 
   let { data }: Props = $props();
+
+  const { KeyboardShortcuts } = $derived(getKeyboardActions($t));
 </script>
 
-<UserPageLayout title={data.meta.title}>
+<UserPageLayout title={data.meta.title} actions={[KeyboardShortcuts]}>
-  {#snippet buttons()}
-    <IconButton
-      shape="round"
-      color="secondary"
-      variant="ghost"
-      icon={mdiKeyboard}
-      aria-label={$t('show_keyboard_shortcuts')}
-      onclick={() => modalManager.show(ShortcutsModal, {})}
-    />
-  {/snippet}
   <Container size="medium" center>
     <UserSettingsList keys={data.keys} sessions={data.sessions} />
   </Container>