Merge remote-tracking branch 'origin/main' into refactor/asset_grid

Author: midzelis

web/src/lib/components/photos-page/asset-grid-actions.svelte

@@ -7,7 +7,7 @@
   } from '$lib/components/photos-page/actions/focus-actions';
   import ChangeDate from '$lib/components/shared-components/change-date.svelte';
   import { AppRoute } from '$lib/constants';
-  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import { modalManager } from '@immich/ui';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';

web/src/lib/components/photos-page/asset-grid.svelte

@@ -8,14 +8,16 @@
   import Skeleton from '$lib/components/photos-page/skeleton.svelte';
   import Scrubber from '$lib/components/shared-components/scrubber/scrubber.svelte';
   import { AssetAction } from '$lib/constants';
+  import { authManager } from '$lib/managers/auth-manager.svelte';
+  import { modalManager } from '@immich/ui';
   import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { navigate } from '$lib/utils/navigation';
-  import { type ScrubberListener, type TimelinePlainYearMonth } from '$lib/utils/timeline-util';
+  import { getTimes, type ScrubberListener, type TimelinePlainYearMonth } from '$lib/utils/timeline-util';
   import { AssetVisibility, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
   import { DateTime } from 'luxon';
   import { onMount, type Snippet } from 'svelte';
@@ -69,7 +71,7 @@
     empty,
   }: Props = $props();
 
-  let { isViewing: showAssetViewer, gridScrollTarget, mutex, viewingAsset} = assetViewingStore;
+  let { isViewing: showAssetViewer, gridScrollTarget, mutex, asset: viewingAsset} = assetViewingStore;
 
   let element: HTMLElement | undefined = $state();
 
@@ -500,6 +502,21 @@
   </section>
 </section>
 
+<Portal target="body">
+   {#if $showAssetViewer}
+    <AssetViewerAndActions
+      bind:showSkeleton
+      {timelineManager}
+      {removeAction}
+      {withStacked}
+      {isShared}
+      {album}
+      {person}
+      {isShowDeleteConfirmation}
+    ></AssetViewerAndActions>
+   {/if}
+ </Portal>
+
 <style>
   #asset-grid {
     contain: strict;