feat(web): map timeline sidepanel (#26532)

* feat(web): map timeline panel

* update openapi

* remove #key

* add index on lat/lng

web/src/lib/components/shared-components/map/MapTimelinePanel.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import type { SelectionBBox } from '$lib/components/shared-components/map/types';
+  import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
+  import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
+  import ChangeDescription from '$lib/components/timeline/actions/ChangeDescriptionAction.svelte';
+  import ChangeLocation from '$lib/components/timeline/actions/ChangeLocationAction.svelte';
+  import CreateSharedLink from '$lib/components/timeline/actions/CreateSharedLinkAction.svelte';
+  import DeleteAssets from '$lib/components/timeline/actions/DeleteAssetsAction.svelte';
+  import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
+  import FavoriteAction from '$lib/components/timeline/actions/FavoriteAction.svelte';
+  import LinkLivePhotoAction from '$lib/components/timeline/actions/LinkLivePhotoAction.svelte';
+  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
+  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
+  import StackAction from '$lib/components/timeline/actions/StackAction.svelte';
+  import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
+  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
+  import Portal from '$lib/elements/Portal.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { getAssetBulkActions } from '$lib/services/asset.service';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { locale, mapSettings } from '$lib/stores/preferences.store';
+  import { preferences, user } from '$lib/stores/user.store';
+  import {
+    updateStackedAssetInTimeline,
+    updateUnstackedAssetInTimeline,
+    type OnLink,
+    type OnUnlink,
+  } from '$lib/utils/actions';
+  import { AssetVisibility } from '@immich/sdk';
+  import { ActionButton, CloseButton, CommandPaletteDefaultProvider, Icon } from '@immich/ui';
+  import { mdiDotsVertical, mdiImageMultiple } from '@mdi/js';
+  import { ceil, floor } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    bbox: SelectionBBox;
+    selectedClusterIds: Set<string>;
+    assetCount: number;
+    onClose: () => void;
+  }
+
+  let { bbox, selectedClusterIds, assetCount, onClose }: Props = $props();
+
+  const assetInteraction = new AssetInteraction();
+  let timelineManager = $state<TimelineManager>() as TimelineManager;
+  let selectedAssets = $derived(assetInteraction.selectedAssets);
+  let isAssetStackSelected = $derived(selectedAssets.length === 1 && !!selectedAssets[0].stack);
+  let isLinkActionAvailable = $derived.by(() => {
+    const isLivePhoto = selectedAssets.length === 1 && !!selectedAssets[0].livePhotoVideoId;
+    const isLivePhotoCandidate =
+      selectedAssets.length === 2 &&
+      selectedAssets.some((asset) => asset.isImage) &&
+      selectedAssets.some((asset) => asset.isVideo);
+
+    return assetInteraction.isAllUserOwned && (isLivePhoto || isLivePhotoCandidate);
+  });
+  const isAllUserOwned = $derived($user && selectedAssets.every((asset) => asset.ownerId === $user.id));
+
+  const handleLink: OnLink = ({ still, motion }) => {
+    timelineManager.removeAssets([motion.id]);
+    timelineManager.upsertAssets([still]);
+  };
+
+  const handleUnlink: OnUnlink = ({ still, motion }) => {
+    timelineManager.upsertAssets([motion]);
+    timelineManager.upsertAssets([still]);
+  };
+
+  const handleSetVisibility = (assetIds: string[]) => {
+    timelineManager.removeAssets(assetIds);
+    assetInteraction.clearMultiselect();
+  };
+
+  const handleEscape = () => {
+    assetInteraction.clearMultiselect();
+  };
+
+  const timelineBoundingBox = $derived(
+    `${floor(bbox.west, 6)},${floor(bbox.south, 6)},${ceil(bbox.east, 6)},${ceil(bbox.north, 6)}`,
+  );
+
+  const timelineOptions = $derived({
+    bbox: timelineBoundingBox,
+    visibility: $mapSettings.includeArchived ? undefined : AssetVisibility.Timeline,
+    isFavorite: $mapSettings.onlyFavorites || undefined,
+    withPartners: $mapSettings.withPartners || undefined,
+    assetFilter: selectedClusterIds,
+  });
+
+  const displayedAssetCount = $derived(timelineManager?.assetCount ?? assetCount);
+
+  $effect.pre(() => {
+    void timelineOptions;
+    assetInteraction.clearMultiselect();
+  });
+</script>
+
+<aside class="h-full w-full overflow-hidden bg-immich-bg dark:bg-immich-dark-bg flex flex-col contain-content">
+  <div class="flex items-center justify-between border-b border-gray-200 dark:border-immich-dark-gray pb-1 pe-1">
+    <div class="flex items-center gap-2">
+      <Icon icon={mdiImageMultiple} size="20" />
+      <p class="text-sm font-medium text-immich-fg dark:text-immich-dark-fg">
+        {displayedAssetCount.toLocaleString($locale)}
+        {$t('assets')}
+      </p>
+    </div>
+    <CloseButton onclick={onClose} />
+  </div>
+
+  <div class="min-h-0 flex-1">
+    <Timeline
+      bind:timelineManager
+      enableRouting={false}
+      options={timelineOptions}
+      onEscape={handleEscape}
+      {assetInteraction}
+      showArchiveIcon
+    />
+  </div>
+</aside>
+
+{#if assetInteraction.selectionActive}
+  {@const Actions = getAssetBulkActions($t, assetInteraction.asControlContext())}
+  <CommandPaletteDefaultProvider name={$t('assets')} actions={Object.values(Actions)} />
+
+  <Portal target="body">
+    <AssetSelectControlBar
+      ownerId={$user.id}
+      assets={assetInteraction.selectedAssets}
+      clearSelect={() => assetInteraction.clearMultiselect()}
+    >
+      <CreateSharedLink />
+      <SelectAllAssets {timelineManager} {assetInteraction} />
+      <ActionButton action={Actions.AddToAlbum} />
+
+      {#if isAllUserOwned}
+        <FavoriteAction
+          removeFavorite={assetInteraction.isAllFavorite}
+          onFavorite={(ids, isFavorite) => timelineManager.update(ids, (asset) => (asset.isFavorite = isFavorite))}
+        />
+
+        <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
+          <DownloadAction menuItem />
+          {#if assetInteraction.selectedAssets.length > 1 || isAssetStackSelected}
+            <StackAction
+              unstack={isAssetStackSelected}
+              onStack={(result) => updateStackedAssetInTimeline(timelineManager, result)}
+              onUnstack={(assets) => updateUnstackedAssetInTimeline(timelineManager, assets)}
+            />
+          {/if}
+          {#if isLinkActionAvailable}
+            <LinkLivePhotoAction
+              menuItem
+              unlink={assetInteraction.selectedAssets.length === 1}
+              onLink={handleLink}
+              onUnlink={handleUnlink}
+            />
+          {/if}
+          <ChangeDate menuItem />
+          <ChangeDescription menuItem />
+          <ChangeLocation menuItem />
+          <ArchiveAction
+            menuItem
+            unarchive={assetInteraction.isAllArchived}
+            onArchive={(ids, visibility) => timelineManager.update(ids, (asset) => (asset.visibility = visibility))}
+          />
+          {#if $preferences.tags.enabled}
+            <TagAction menuItem />
+          {/if}
+          <DeleteAssets
+            menuItem
+            onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
+            onUndoDelete={(assets) => timelineManager.upsertAssets(assets)}
+          />
+          <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
+          <hr />
+          <ActionMenuItem action={Actions.RegenerateThumbnailJob} />
+          <ActionMenuItem action={Actions.RefreshMetadataJob} />
+          <ActionMenuItem action={Actions.TranscodeVideoJob} />
+        </ButtonContextMenu>
+      {:else}
+        <DownloadAction />
+      {/if}
+    </AssetSelectControlBar>
+  </Portal>
+{/if}

web/src/lib/components/shared-components/map/map.svelte

@@ -49,6 +49,7 @@
     Popup,
     ScaleControl,
   } from 'svelte-maplibre';
+  import type { SelectionBBox } from './types';
 
   interface Props {
     mapMarkers?: MapMarkerResponseDto[];
@@ -61,6 +62,7 @@
     useLocationPin?: boolean;
     onOpenInMapView?: (() => Promise<void> | void) | undefined;
     onSelect?: (assetIds: string[]) => void;
+    onClusterSelect?: (assetIds: string[], bbox: SelectionBBox) => void;
     onClickPoint?: ({ lat, lng }: { lat: number; lng: number }) => void;
     popup?: import('svelte').Snippet<[{ marker: MapMarkerResponseDto }]>;
     rounded?: boolean;
@@ -79,6 +81,7 @@
     useLocationPin = false,
     onOpenInMapView = undefined,
     onSelect = () => {},
+    onClusterSelect,
     onClickPoint = () => {},
     popup,
     rounded = false,
@@ -131,9 +134,30 @@
       return;
     }
 
-    const mapSource = map?.getSource('geojson') as GeoJSONSource;
+    const mapSource = map.getSource('geojson') as GeoJSONSource;
     const leaves = await mapSource.getClusterLeaves(clusterId, 10_000, 0);
-    const ids = leaves.map((leaf) => leaf.properties?.id);
+    const ids = leaves.map((leaf) => leaf.properties?.id as string);
+
+    if (onClusterSelect && ids.length > 1) {
+      const [firstLongitude, firstLatitude] = (leaves[0].geometry as Point).coordinates;
+      let west = firstLongitude;
+      let south = firstLatitude;
+      let east = firstLongitude;
+      let north = firstLatitude;
+
+      for (const leaf of leaves.slice(1)) {
+        const [longitude, latitude] = (leaf.geometry as Point).coordinates;
+        west = Math.min(west, longitude);
+        south = Math.min(south, latitude);
+        east = Math.max(east, longitude);
+        north = Math.max(north, latitude);
+      }
+
+      const bbox = { west, south, east, north };
+      onClusterSelect(ids, bbox);
+      return;
+    }
+
     onSelect(ids);
   }
 

web/src/lib/components/shared-components/map/types.ts

@@ -0,0 +1,6 @@
+export type SelectionBBox = {
+  west: number;
+  south: number;
+  east: number;
+  north: number;
+};