refactor: lock session (#25366)

refafctor: lock session

web/src/lib/managers/event-manager.svelte.ts

@@ -65,6 +65,8 @@ export type Events = {
   // confirmed permanently deleted from server
   UserAdminDeleted: [{ id: string }];
 
+  SessionLocked: [];
+
   SystemConfigUpdate: [SystemConfigDto];
 
   LibraryCreate: [LibraryResponseDto];

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

@@ -1,8 +1,38 @@
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
-import { changePassword, resetPinCode, type ChangePasswordDto, type PinCodeResetDto } from '@immich/sdk';
-import { toastManager } from '@immich/ui';
+import {
+  changePassword,
+  lockAuthSession,
+  resetPinCode,
+  type ChangePasswordDto,
+  type PinCodeResetDto,
+} from '@immich/sdk';
+import { toastManager, type ActionItem } from '@immich/ui';
+import { mdiLockOutline } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getUserActions = ($t: MessageFormatter) => {
+  const LockSession: ActionItem = {
+    title: $t('lock'),
+    color: 'primary',
+    icon: mdiLockOutline,
+    onAction: () => handleLockSession(),
+  };
+
+  return { LockSession };
+};
+
+const handleLockSession = async () => {
+  const $t = await getFormatter();
+
+  try {
+    await lockAuthSession();
+    eventManager.emit('SessionLocked');
+  } catch (error) {
+    handleError(error, $t('errors.something_went_wrong'));
+  }
+};
 
 export const handleResetPinCode = async (dto: PinCodeResetDto) => {
   const $t = await getFormatter();

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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
@@ -14,10 +15,10 @@
   import { AssetAction } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { Route } from '$lib/route';
+  import { getUserActions } from '$lib/services/user.service';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { AssetVisibility, lockAuthSession } from '@immich/sdk';
-  import { Button } from '@immich/ui';
-  import { mdiDotsVertical, mdiLockOutline } from '@mdi/js';
+  import { AssetVisibility } from '@immich/sdk';
+  import { mdiDotsVertical } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
 
@@ -44,19 +45,21 @@
     timelineManager.removeAssets(assetIds);
   };
 
-  const handleLock = async () => {
-    await lockAuthSession();
+  const { LockSession } = $derived(getUserActions($t));
+
+  const onSessionLocked = async () => {
     await goto(Route.photos());
   };
 </script>
 
-<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  {#snippet buttons()}
-    <Button size="small" variant="ghost" color="primary" leadingIcon={mdiLockOutline} onclick={handleLock}>
-      {$t('lock')}
-    </Button>
-  {/snippet}
+<OnEvents {onSessionLocked} />
 
+<UserPageLayout
+  title={data.meta.title}
+  actions={[LockSession]}
+  hideNavbar={assetInteraction.selectionActive}
+  scrollbar={false}
+>
   <Timeline
     enableRouting={true}
     bind:timelineManager