From dc82c13ddc609c1c5e1d30a5f0292c3126f3224e Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 21 Jan 2026 13:13:07 -0500
Subject: [PATCH] refactor(web): user setting actions (#25424)

---
 web/src/lib/services/keyboard.service.ts      | 14 +++++++++++
 .../routes/(user)/user-settings/+page.svelte  | 23 ++++++-------------
 2 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 web/src/lib/services/keyboard.service.ts

diff --git a/web/src/lib/services/keyboard.service.ts b/web/src/lib/services/keyboard.service.ts
new file mode 100644
index 0000000000..f5c9e59b75
--- /dev/null
+++ b/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 };
+};
diff --git a/web/src/routes/(user)/user-settings/+page.svelte b/web/src/routes/(user)/user-settings/+page.svelte
index 43c214fd07..bf4f5b00f1 100644
--- a/web/src/routes/(user)/user-settings/+page.svelte
+++ b/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 { Container, IconButton, modalManager } from '@immich/ui';
-  import { mdiKeyboard } from '@mdi/js';
+  import { getKeyboardActions } from '$lib/services/keyboard.service';
+  import { Container } from '@immich/ui';
   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}>
-  {#snippet buttons()}
-    <IconButton
-      shape="round"
-      color="secondary"
-      variant="ghost"
-      icon={mdiKeyboard}
-      aria-label={$t('show_keyboard_shortcuts')}
-      onclick={() => modalManager.show(ShortcutsModal, {})}
-    />
-  {/snippet}
+<UserPageLayout title={data.meta.title} actions={[KeyboardShortcuts]}>
   <Container size="medium" center>
     <UserSettingsList keys={data.keys} sessions={data.sessions} />
   </Container>