refactor: use eventManager

web/src/lib/components/timeline/Timeline.svelte

@@ -54,8 +54,6 @@
     isShowDeleteConfirmation?: boolean;
     onSelect?: (asset: TimelineAsset) => void;
     onEscape?: () => void;
-    onKeyboardDelete?: (assetIds: string[]) => void;
-    onKeyboardArchive?: (ids: string[]) => void;
     children?: Snippet;
     empty?: Snippet;
     customThumbnailLayout?: Snippet<[TimelineAsset]>;
@@ -89,8 +87,6 @@
     isShowDeleteConfirmation = $bindable(false),
     onSelect = () => {},
     onEscape = () => {},
-    onKeyboardDelete,
-    onKeyboardArchive,
     children,
     empty,
     customThumbnailLayout,
@@ -608,8 +604,6 @@
   {assetInteraction}
   bind:isShowDeleteConfirmation
   {onEscape}
-  onAssetDelete={onKeyboardDelete}
-  onArchive={onKeyboardArchive}
 />
 
 {#if timelineManager.months.length > 0}

web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte

@@ -7,6 +7,7 @@
     setFocusTo as setFocusToInit,
   } from '$lib/components/timeline/actions/focus-actions';
   import { AppRoute } from '$lib/constants';
+  import { eventManager } from '$lib/managers/event-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -27,8 +28,6 @@
     assetInteraction: AssetInteraction;
     isShowDeleteConfirmation: boolean;
     onEscape?: () => void;
-    onAssetDelete?: (assetIds: string[]) => void;
-    onArchive?: (ids: string[]) => void;
     scrollToAsset: (asset: TimelineAsset) => boolean;
   }
 
@@ -37,8 +36,6 @@
     assetInteraction,
     isShowDeleteConfirmation = $bindable(false),
     onEscape,
-    onAssetDelete,
-    onArchive,
     scrollToAsset,
   }: Props = $props();
 
@@ -50,7 +47,7 @@
       !(isTrashEnabled && !force),
       (assetIds) => {
         timelineManager.removeAssets(assetIds);
-        onAssetDelete?.(assetIds);
+        eventManager.emit('AssetsDelete', assetIds);
       },
       assetInteraction.selectedAssets,
       !isTrashEnabled || force ? undefined : (assets) => timelineManager.upsertAssets(assets),
@@ -88,7 +85,7 @@
     const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
     const ids = await archiveAssets(assetInteraction.selectedAssets, visibility);
     timelineManager.update(ids, (asset) => (asset.visibility = visibility));
-    onArchive?.(ids);
+    eventManager.emit('AssetsArchive', ids);
     deselectAllAssets();
   };
 

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

@@ -19,6 +19,8 @@ export type Events = {
   ThemeChange: [ThemeSetting];
 
   AssetReplace: [{ oldAssetId: string; newAssetId: string }];
+  AssetsArchive: [string[]];
+  AssetsDelete: [string[]];
 
   AlbumDelete: [AlbumResponseDto];
 

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

@@ -56,6 +56,7 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
+  import OnEvents from '$lib/components/OnEvents.svelte';
 
   interface Props {
     data: PageData;
@@ -342,6 +343,8 @@
   };
 </script>
 
+<OnEvents onAssetsDelete={updateAssetCount} onAssetsArchive={updateAssetCount} />
+
 <main
   class="relative z-0 h-dvh overflow-hidden px-2 md:px-6 md:pt-(--navbar-height-md) pt-(--navbar-height)"
   use:scrollMemoryClearer={{
@@ -362,8 +365,6 @@
       singleSelect={viewMode === PersonPageViewMode.SELECT_PERSON}
       onSelect={handleSelectFeaturePhoto}
       onEscape={handleEscape}
-      onKeyboardDelete={() => updateAssetCount()}
-      onKeyboardArchive={() => updateAssetCount()}
     >
       {#if viewMode === PersonPageViewMode.VIEW_ASSETS}
         <!-- Person information block -->