fix: fetch origin name before upload

Format numbers on map view

.devcontainer/server/container-compose-overrides.yml

@@ -26,7 +26,7 @@ services:
     env_file: !reset []
   init:
     env_file: !reset []
-    command: sh -c 'find /data -maxdepth 1 ! -path "/data/postgres" -type d -exec chown ${UID:-1000}:${GID:-1000} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-1000}:${GID:-1000} "$$path" || true; done'
+    command: sh -c 'find /data -maxdepth 1 ! -path "/data/postgres" -type d -exec chown ${UID:-0}:${GID:-0} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-0}:${GID:-0} "$$path" || true; done'
   immich-machine-learning:
     env_file: !reset []
   database:

.github/workflows/close-duplicates.yml

@@ -35,7 +35,7 @@ jobs:
     needs: [get_body, should_run]
     if: ${{ needs.should_run.outputs.should_run == 'true' }}
     container:
-      image: yshavit/mdq:0.9.0@sha256:4399483ca857fb1a7ed28a596f754c7373e358647de31ce14b79a27c91e1e35e
+      image: ghcr.io/immich-app/mdq:main@sha256:1669c75a5542333ff6b03c13d5fd259ea8d798188b84d5d99093d62e4542eb05
     outputs:
       checked: ${{ steps.get_checkbox.outputs.checked }}
     steps:

.vscode/settings.json

@@ -50,7 +50,7 @@
     "editor.formatOnSave": true,
     "editor.tabSize": 2
   },
-  "cSpell.words": ["immich", "intersectable", "intersectables"],
+  "cSpell.words": ["immich"],
   "editor.formatOnSave": true,
   "eslint.validate": ["javascript", "svelte"],
   "explorer.fileNesting.enabled": true,

Makefile

@@ -70,11 +70,9 @@ VOLUME_DIRS = \
 
 # Helper function to chown, on error suggest remediation and exit
 define safe_chown
-	if chown $(2) $(or $(UID),1000):$(or $(GID),1000) "$(1)" 2>/dev/null; then \
+	CURRENT_OWNER=$$(stat -c '%u:%g' "$(1)" 2>/dev/null || echo "none"); \
-		true; \
+	DESIRED_OWNER="$(or $(UID),0):$(or $(GID),0)"; \
-	else \
+	if [ "$$CURRENT_OWNER" != "$$DESIRED_OWNER" ] && ! chown -v $(2) $$DESIRED_OWNER "$(1)" 2>/dev/null; then \
-	  	STATUS=$$?; echo "Exit code: $$STATUS $(1)"; \
-		echo "$$STATUS $(1)"; \
 		echo "Permission denied when changing owner of volumes and upload location. Try running 'sudo make prepare-volumes' first."; \
 		exit 1; \
 	fi;

docker/docker-compose.dev.yml

@@ -21,7 +21,7 @@ services:
     # extends:
     #   file: hwaccel.transcoding.yml
     #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
-    user: '${UID:-1000}:${GID:-1000}'
+    user: '${UID:-0}:${GID:-0}'
     build:
       context: ../
       dockerfile: server/Dockerfile
@@ -82,7 +82,7 @@ services:
     image: immich-web-dev:latest
     # Needed for rootless docker setup, see https://github.com/moby/moby/issues/45919
     # user: 0:0
-    user: '${UID:-1000}:${GID:-1000}'
+    user: '${UID:-0}:${GID:-0}'
     build:
       context: ../
       dockerfile: server/Dockerfile
@@ -189,7 +189,7 @@ services:
     env_file:
       - .env
     user: 0:0
-    command: sh -c 'find /data -maxdepth 1 -type d -exec chown ${UID:-1000}:${GID:-1000} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-1000}:${GID:-1000} "$$path" || true; done'
+    command: sh -c 'find /data -maxdepth 1 -type d -exec chown ${UID:-0}:${GID:-0} {} + 2>/dev/null || true; for path in /usr/src/app/.pnpm-store /usr/src/app/server/node_modules /usr/src/app/server/dist /usr/src/app/.github/node_modules /usr/src/app/cli/node_modules /usr/src/app/docs/node_modules /usr/src/app/e2e/node_modules /usr/src/app/open-api/typescript-sdk/node_modules /usr/src/app/web/.svelte-kit /usr/src/app/web/coverage /usr/src/app/node_modules /usr/src/app/web/node_modules; do [ -e "$$path" ] && chown -R ${UID:-0}:${GID:-0} "$$path" || true; done'
     volumes:
       - pnpm-store:/usr/src/app/.pnpm-store
       - server-node_modules:/usr/src/app/server/node_modules

i18n/en.json

@@ -1339,8 +1339,6 @@
   "my_albums": "My albums",
   "name": "Name",
   "name_or_nickname": "Name or nickname",
-  "navigate": "Navigate",
-  "navigate_to_time": "Navigate to Time",
   "network_requirement_photos_upload": "Use cellular data to backup photos",
   "network_requirement_videos_upload": "Use cellular data to backup videos",
   "network_requirements_updated": "Network requirements changed, resetting backup queue",

mobile/lib/services/upload.service.dart

@@ -17,6 +17,7 @@ import 'package:immich_mobile/providers/app_settings.provider.dart';
 import 'package:immich_mobile/providers/backup/drift_backup.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/asset.provider.dart';
 import 'package:immich_mobile/providers/infrastructure/storage.provider.dart';
+import 'package:immich_mobile/repositories/asset_media.repository.dart';
 import 'package:immich_mobile/repositories/upload.repository.dart';
 import 'package:immich_mobile/services/api.service.dart';
 import 'package:immich_mobile/services/app_settings.service.dart';
@@ -30,6 +31,7 @@ final uploadServiceProvider = Provider((ref) {
     ref.watch(storageRepositoryProvider),
     ref.watch(localAssetRepository),
     ref.watch(appSettingsServiceProvider),
+    ref.watch(assetMediaRepositoryProvider),
   );
 
   ref.onDispose(service.dispose);
@@ -43,6 +45,7 @@ class UploadService {
     this._storageRepository,
     this._localAssetRepository,
     this._appSettingsService,
+    this._assetMediaRepository,
   ) {
     _uploadRepository.onUploadStatus = _onUploadCallback;
     _uploadRepository.onTaskProgress = _onTaskProgressCallback;
@@ -53,6 +56,7 @@ class UploadService {
   final StorageRepository _storageRepository;
   final DriftLocalAssetRepository _localAssetRepository;
   final AppSettingsService _appSettingsService;
+  final AssetMediaRepository _assetMediaRepository;
   final Logger _logger = Logger('UploadService');
 
   final StreamController<TaskStatusUpdate> _taskStatusController = StreamController<TaskStatusUpdate>.broadcast();
@@ -321,7 +325,8 @@ class UploadService {
       return null;
     }
 
-    final originalFileName = entity.isLivePhoto ? p.setExtension(asset.name, p.extension(file.path)) : asset.name;
+    final fileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
+    final originalFileName = entity.isLivePhoto ? p.setExtension(fileName, p.extension(file.path)) : fileName;
 
     String metadata = UploadTaskMetadata(
       localAssetId: asset.id,
@@ -359,12 +364,13 @@ class UploadService {
     final fields = {'livePhotoVideoId': livePhotoVideoId};
 
     final requiresWiFi = _shouldRequireWiFi(asset);
+    final originalFileName = await _assetMediaRepository.getOriginalFilename(asset.id) ?? asset.name;
 
     return buildUploadTask(
       file,
       createdAt: asset.createdAt,
       modifiedAt: asset.updatedAt,
-      originalFileName: asset.name,
+      originalFileName: originalFileName,
       deviceAssetId: asset.id,
       fields: fields,
       group: kBackupLivePhotoGroup,

web/package.json

@@ -9,7 +9,7 @@
     "build:stats": "BUILD_STATS=true vite build",
     "package": "svelte-kit package",
     "preview": "vite preview",
-    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings",
+    "check:svelte": "svelte-check --no-tsconfig --fail-on-warnings --compiler-warnings 'reactive_declaration_non_reactive_property:ignore' --ignore src/lib/components/photos-page/asset-grid.svelte",
     "check:typescript": "tsc --noEmit",
     "check:watch": "npm run check:svelte -- --watch",
     "check:code": "npm run format && npm run lint:p && npm run check:svelte && npm run check:typescript",

web/src/lib/components/album-page/album-viewer.svelte

@@ -4,7 +4,6 @@
   import AlbumMap from '$lib/components/album-page/album-map.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -19,6 +18,7 @@
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import DownloadAction from '../photos-page/actions/download-action.svelte';
+  import AssetGrid from '../photos-page/asset-grid.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import ImmichLogoSmallLink from '../shared-components/immich-logo-small-link.svelte';
   import ThemeButton from '../shared-components/theme-button.svelte';
@@ -61,7 +61,7 @@
 />
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <Timeline enableRouting={true} {album} {timelineManager} {assetInteraction}>
+  <AssetGrid enableRouting={true} {album} {timelineManager} {assetInteraction}>
     <section class="pt-8 md:pt-24 px-2 md:px-0">
       <!-- ALBUM TITLE -->
       <h1
@@ -83,7 +83,7 @@
         </p>
       {/if}
     </section>
-  </Timeline>
+  </AssetGrid>
 </main>
 
 <header>

web/src/lib/components/asset-viewer/actions/delete-action.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
+  import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
   import { AssetAction } from '$lib/constants';
   import { showDeleteModal } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import { deleteAssets, type AssetResponseDto } from '@immich/sdk';
-  import { IconButton } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { OnAction, PreAction } from './action';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     asset: AssetResponseDto;

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { featureFlags } from '$lib/stores/server-config.store';
   import { type OnDelete, type OnUndoDelete, deleteAssets } from '$lib/utils/actions';
-  import { IconButton } from '@immich/ui';
   import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
-  import DeleteAssetDialog from '../../timeline/actions/delete-asset-dialog.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import DeleteAssetDialog from '../delete-asset-dialog.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onAssetDelete: OnDelete;

web/src/lib/components/photos-page/asset-date-group.svelte

@@ -0,0 +1,253 @@
+<script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
+  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
+  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
+  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
+  import { uploadAssetsStore } from '$lib/stores/upload';
+  import { navigate } from '$lib/utils/navigation';
+
+  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
+
+  import { fromTimelinePlainDate, getDateLocaleString } from '$lib/utils/timeline-util';
+  import type { Snippet } from 'svelte';
+  import { flip } from 'svelte/animate';
+  import { fly, scale } from 'svelte/transition';
+
+  let { isUploading } = uploadAssetsStore;
+
+  interface Props {
+    isSelectionMode: boolean;
+    singleSelect: boolean;
+    withStacked: boolean;
+    showArchiveIcon: boolean;
+    monthGroup: MonthGroup;
+    timelineManager: TimelineManager;
+    assetInteraction: AssetInteraction;
+    customLayout?: Snippet<[TimelineAsset]>;
+
+    onSelect: ({ title, assets }: { title: string; assets: TimelineAsset[] }) => void;
+    onSelectAssets: (asset: TimelineAsset) => void;
+    onSelectAssetCandidates: (asset: TimelineAsset | null) => void;
+    onScrollCompensation: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
+    onThumbnailClick?: (
+      asset: TimelineAsset,
+      timelineManager: TimelineManager,
+      dayGroup: DayGroup,
+      onClick: (
+        timelineManager: TimelineManager,
+        assets: TimelineAsset[],
+        groupTitle: string,
+        asset: TimelineAsset,
+      ) => void,
+    ) => void;
+  }
+
+  let {
+    isSelectionMode,
+    singleSelect,
+    withStacked,
+    showArchiveIcon,
+    monthGroup = $bindable(),
+    assetInteraction,
+    timelineManager,
+    customLayout,
+    onSelect,
+    onSelectAssets,
+    onSelectAssetCandidates,
+    onScrollCompensation,
+    onThumbnailClick,
+  }: Props = $props();
+
+  let isMouseOverGroup = $state(false);
+  let hoveredDayGroup = $state();
+
+  const transitionDuration = $derived.by(() =>
+    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
+  );
+  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+  const _onClick = (
+    timelineManager: TimelineManager,
+    assets: TimelineAsset[],
+    groupTitle: string,
+    asset: TimelineAsset,
+  ) => {
+    if (isSelectionMode || assetInteraction.selectionActive) {
+      assetSelectHandler(timelineManager, asset, assets, groupTitle);
+      return;
+    }
+    void navigate({ targetRoute: 'current', assetId: asset.id });
+  };
+
+  const handleSelectGroup = (title: string, assets: TimelineAsset[]) => onSelect({ title, assets });
+
+  const assetSelectHandler = (
+    timelineManager: TimelineManager,
+    asset: TimelineAsset,
+    assetsInDayGroup: TimelineAsset[],
+    groupTitle: string,
+  ) => {
+    onSelectAssets(asset);
+
+    // Check if all assets are selected in a group to toggle the group selection's icon
+    let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
+      assetInteraction.hasSelectedAsset(asset.id),
+    ).length;
+
+    // if all assets are selected in a group, add the group to selected group
+    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
+      assetInteraction.addGroupToMultiselectGroup(groupTitle);
+    } else {
+      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
+    }
+
+    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
+      isSelectingAllAssets.set(true);
+    } else {
+      isSelectingAllAssets.set(false);
+    }
+  };
+
+  const assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
+    // Show multi select icon on hover on date group
+    hoveredDayGroup = groupTitle;
+
+    if (assetInteraction.selectionActive) {
+      onSelectAssetCandidates(asset);
+    }
+  };
+
+  function filterIntersecting<R extends { intersecting: boolean }>(intersectable: R[]) {
+    return intersectable.filter((int) => int.intersecting);
+  }
+
+  const getDayGroupFullDate = (dayGroup: DayGroup): string => {
+    const { month, year } = dayGroup.monthGroup.yearMonth;
+    const date = fromTimelinePlainDate({
+      year,
+      month,
+      day: dayGroup.day,
+    });
+    return getDateLocaleString(date);
+  };
+
+  $effect.root(() => {
+    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
+      onScrollCompensation(timelineManager.scrollCompensation);
+      timelineManager.clearScrollCompensation();
+    }
+  });
+</script>
+
+{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
+  {@const absoluteWidth = dayGroup.left}
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <section
+    class={[
+      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
+      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
+    ]}
+    data-group
+    style:position="absolute"
+    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
+    onmouseenter={() => {
+      isMouseOverGroup = true;
+      assetMouseEventHandler(dayGroup.groupTitle, null);
+    }}
+    onmouseleave={() => {
+      isMouseOverGroup = false;
+      assetMouseEventHandler(dayGroup.groupTitle, null);
+    }}
+  >
+    <!-- Date group title -->
+    <div
+      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
+      style:width={dayGroup.width + 'px'}
+    >
+      {#if !singleSelect && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || assetInteraction.selectedGroup.has(dayGroup.groupTitle))}
+        <div
+          transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
+          class="inline-block pe-2 hover:cursor-pointer"
+          onclick={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
+          onkeydown={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
+        >
+          {#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
+            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
+          {:else}
+            <Icon path={mdiCircleOutline} size="24" color="#757575" />
+          {/if}
+        </div>
+      {/if}
+
+      <span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
+        {dayGroup.groupTitle}
+      </span>
+    </div>
+
+    <!-- Image grid -->
+    <div
+      data-image-grid
+      class="relative overflow-clip"
+      style:height={dayGroup.height + 'px'}
+      style:width={dayGroup.width + 'px'}
+    >
+      {#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
+        {@const position = viewerAsset.position!}
+        {@const asset = viewerAsset.asset!}
+
+        <!-- {#if viewerAsset.intersecting} -->
+        <!-- note: don't remove data-asset-id - its used by web e2e tests -->
+        <div
+          data-asset-id={asset.id}
+          class="absolute"
+          style:top={position.top + 'px'}
+          style:left={position.left + 'px'}
+          style:width={position.width + 'px'}
+          style:height={position.height + 'px'}
+          out:scale|global={{ start: 0.1, duration: scaleDuration }}
+          animate:flip={{ duration: transitionDuration }}
+        >
+          <Thumbnail
+            showStackedIcon={withStacked}
+            {showArchiveIcon}
+            {asset}
+            {groupIndex}
+            onClick={(asset) => {
+              if (typeof onThumbnailClick === 'function') {
+                onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
+              } else {
+                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+              }
+            }}
+            onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
+            onMouseEvent={() => assetMouseEventHandler(dayGroup.groupTitle, assetSnapshot(asset))}
+            selected={assetInteraction.hasSelectedAsset(asset.id) ||
+              dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
+            selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
+            disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
+            thumbnailWidth={position.width}
+            thumbnailHeight={position.height}
+          />
+          {#if customLayout}
+            {@render customLayout(asset)}
+          {/if}
+        </div>
+        <!-- {/if} -->
+      {/each}
+    </div>
+  </section>
+{/each}
+
+<style>
+  section {
+    contain: layout paint style;
+  }
+  [data-image-grid] {
+    user-select: none;
+  }
+</style>

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

@@ -1,162 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import { AssetAction } from '$lib/constants';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
-  import { navigate } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAssetInfo, type AssetResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, gridScrollTarget, mutex } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE;
-    handlePreAction?: (action: Action) => Promise<void>;
-    handleAction?: (action: Action) => void;
-    handleNext?: () => Promise<boolean>;
-    handlePrevious?: () => Promise<boolean>;
-    handleRandom?: () => Promise<AssetResponseDto | undefined>;
-    handleClose?: (asset: { id: string }) => Promise<void>;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    showSkeleton = $bindable(false),
-    removeAction,
-    handlePreAction = $bindable(),
-    handleAction = $bindable(),
-    handleNext = $bindable(),
-    handlePrevious = $bindable(),
-    handleRandom = $bindable(),
-    handleClose = $bindable(),
-  }: Props = $props();
-
-  handlePrevious = async () => {
-    const release = await mutex.acquire();
-    const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
-
-    if (laterAsset) {
-      const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: laterAsset.id });
-    }
-
-    release();
-    return !!laterAsset;
-  };
-
-  handleNext = async () => {
-    const release = await mutex.acquire();
-    const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
-
-    if (earlierAsset) {
-      const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
-    }
-
-    release();
-    return !!earlierAsset;
-  };
-
-  handleRandom = async () => {
-    const randomAsset = await timelineManager.getRandomAsset();
-
-    if (randomAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
-      assetViewingStore.setAsset(asset);
-      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return asset;
-    }
-  };
-
-  handleClose = async (asset: { id: string }) => {
-    assetViewingStore.showAssetViewer(false);
-    showSkeleton = true;
-    $gridScrollTarget = { at: asset.id };
-    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
-  };
-
-  handlePreAction = async (action: Action) => {
-    switch (action.type) {
-      case removeAction:
-      case AssetAction.TRASH:
-      case AssetAction.RESTORE:
-      case AssetAction.DELETE:
-      case AssetAction.ARCHIVE:
-      case AssetAction.SET_VISIBILITY_LOCKED:
-      case AssetAction.SET_VISIBILITY_TIMELINE: {
-        // find the next asset to show or close the viewer
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
-
-        // delete after find the next one
-        timelineManager.removeAssets([action.asset.id]);
-        break;
-      }
-    }
-  };
-  handleAction = (action: Action) => {
-    switch (action.type) {
-      case AssetAction.ARCHIVE:
-      case AssetAction.UNARCHIVE:
-      case AssetAction.FAVORITE:
-      case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.UNSTACK: {
-        updateUnstackedAssetInTimeline(timelineManager, action.assets);
-        break;
-      }
-      case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.addAssets([toTimelineAsset(action.asset)]);
-        if (action.stack) {
-          //Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
-          updateUnstackedAssetInTimeline(
-            timelineManager,
-            action.stack.assets.map((asset) => toTimelineAsset(asset)),
-          );
-          updateStackedAssetInTimeline(timelineManager, {
-            stack: action.stack,
-            toDeleteIds: action.stack.assets
-              .filter((asset) => asset.id !== action.stack?.primaryAssetId)
-              .map((asset) => asset.id),
-          });
-        }
-        break;
-      }
-      case AssetAction.SET_STACK_PRIMARY_ASSET: {
-        //Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
-        updateUnstackedAssetInTimeline(
-          timelineManager,
-          action.stack.assets.map((asset) => toTimelineAsset(asset)),
-        );
-        updateStackedAssetInTimeline(timelineManager, {
-          stack: action.stack,
-          toDeleteIds: action.stack.assets
-            .filter((asset) => asset.id !== action.stack.primaryAssetId)
-            .map((asset) => asset.id),
-        });
-        break;
-      }
-    }
-  };
-</script>

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

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import AssetViewerActions from '$lib/components/photos-page/asset-viewer-actions.svelte';
-  import { AssetAction } from '$lib/constants';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { type AlbumResponseDto, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, preloadAssets } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE;
-    withStacked?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-    isShowDeleteConfirmation?: boolean;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    showSkeleton = $bindable(false),
-    removeAction,
-    withStacked = false,
-    isShared = false,
-    album = null,
-    person = null,
-    isShowDeleteConfirmation = $bindable(false),
-  }: Props = $props();
-
-  let handlePreAction = <(action: Action) => Promise<void>>$state();
-  let handleAction = <(action: Action) => void>$state();
-  let handleNext = <() => Promise<boolean>>$state();
-  let handlePrevious = <() => Promise<boolean>>$state();
-  let handleRandom = <() => Promise<AssetResponseDto | undefined>>$state();
-  let handleClose = <(asset: { id: string }) => Promise<void>>$state();
-</script>
-
-<AssetViewerActions
-  {timelineManager}
-  {removeAction}
-  bind:showSkeleton
-  bind:handlePreAction
-  bind:handleAction
-  bind:handleNext
-  bind:handlePrevious
-  bind:handleRandom
-  bind:handleClose
-></AssetViewerActions>
-
-{#await import('../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-  <AssetViewer
-    {withStacked}
-    asset={$viewingAsset}
-    preloadAssets={$preloadAssets}
-    {isShared}
-    {album}
-    {person}
-    preAction={handlePreAction}
-    onAction={handleAction}
-    onPrevious={handlePrevious}
-    onNext={handleNext}
-    onRandom={handleRandom}
-    onClose={handleClose}
-  />
-{/await}

web/src/lib/components/photos-page/skeleton.svelte

@@ -13,7 +13,11 @@
   >
     {title}
   </div>
-  <div class="animate-pulse absolute h-full w-full" data-skeleton="true"></div>
+  <div
+    class="animate-pulse absolute h-full ms-[10px] me-[10px]"
+    style:width="calc(100% - 20px)"
+    data-skeleton="true"
+  ></div>
 </div>
 
 <style>

web/src/lib/components/shared-components/change-date.spec.ts

@@ -8,9 +8,6 @@ import ChangeDate from './change-date.svelte';
 describe('ChangeDate component', () => {
   const initialDate = DateTime.fromISO('2024-01-01');
   const initialTimeZone = 'Europe/Berlin';
-  const targetDate = DateTime.fromISO('2024-01-01').setZone('UTC+1', {
-    keepLocalTime: true,
-  });
   const currentInterval = {
     start: DateTime.fromISO('2000-02-01T14:00:00+01:00'),
     end: DateTime.fromISO('2001-02-01T14:00:00+01:00'),
@@ -46,11 +43,7 @@ describe('ChangeDate component', () => {
 
     await fireEvent.click(getConfirmButton());
 
-    expect(onConfirm).toHaveBeenCalledWith({
+    expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-01-01T00:00:00.000+01:00' });
-      mode: 'absolute',
-      date: '2024-01-01T00:00:00.000+01:00',
-      dateTime: targetDate,
-    });
   });
 
   test('calls onCancel on cancel', async () => {
@@ -65,9 +58,7 @@ describe('ChangeDate component', () => {
 
   describe('when date is in daylight saving time', () => {
     const dstDate = DateTime.fromISO('2024-07-01');
-    const targetDate = DateTime.fromISO('2024-07-01').setZone('UTC+2', {
+
-      keepLocalTime: true,
-    });
     test('should render correct timezone with offset', () => {
       render(ChangeDate, { initialDate: dstDate, initialTimeZone, onCancel, onConfirm });
 
@@ -81,11 +72,7 @@ describe('ChangeDate component', () => {
 
       await fireEvent.click(getConfirmButton());
 
-      expect(onConfirm).toHaveBeenCalledWith({
+      expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-07-01T00:00:00.000+02:00' });
-        mode: 'absolute',
-        date: '2024-07-01T00:00:00.000+02:00',
-        dateTime: targetDate,
-      });
     });
   });
 

web/src/lib/components/shared-components/change-date.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-  import { locale } from '$lib/stores/preferences.store';
+  import { ConfirmModal } from '@immich/ui';
-  import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
+  import { mdiCalendarEditOutline } from '@mdi/js';
-  import { ConfirmModal, Field, Switch } from '@immich/ui';
-  import { mdiCalendarEdit } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
-  import { get } from 'svelte/store';
   import DateInput from '../elements/date-input.svelte';
-  import DurationInput from '../elements/duration-input.svelte';
   import Combobox, { type ComboBoxOption } from './combobox.svelte';
+  import DurationInput from '../elements/duration-input.svelte';
+  import { Field, Switch } from '@immich/ui';
+  import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
+  import { locale } from '$lib/stores/preferences.store';
+  import { get } from 'svelte/store';
 
   interface Props {
     title?: string;
@@ -17,8 +18,6 @@
     timezoneInput?: boolean;
     withDuration?: boolean;
     currentInterval?: { start: DateTime; end: DateTime };
-    icon?: string;
-    confirmText?: string;
     onCancel: () => void;
     onConfirm: (result: AbsoluteResult | RelativeResult) => void;
   }
@@ -30,8 +29,6 @@
     timezoneInput = true,
     withDuration = true,
     currentInterval = undefined,
-    icon = mdiCalendarEdit,
-    confirmText,
     onCancel,
     onConfirm,
   }: Props = $props();
@@ -39,7 +36,6 @@
   export type AbsoluteResult = {
     mode: 'absolute';
     date: string;
-    dateTime: DateTime<true>;
   };
 
   export type RelativeResult = {
@@ -196,13 +192,9 @@
       const fixedOffsetZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
 
       // Create a DateTime object in this fixed-offset zone, preserving the local time.
-      const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone }) as DateTime<true>;
+      const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone });
 
-      onConfirm({
+      onConfirm({ mode: 'absolute', date: finalDateTime.toISO({ includeOffset: true })! });
-        mode: 'absolute',
-        date: finalDateTime.toISO({ includeOffset: true }),
-        dateTime: finalDateTime,
-      });
     }
 
     if (showRelative && (selectedDuration || selectedRelativeOption)) {
@@ -246,8 +238,7 @@
 <ConfirmModal
   confirmColor="primary"
   {title}
-  {icon}
+  icon={mdiCalendarEditOutline}
-  {confirmText}
   prompt="Please select a new date:"
   disabled={!date.isValid}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -23,8 +23,7 @@
   import { debounce } from 'lodash-es';
   import { t } from 'svelte-i18n';
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-
+  import DeleteAssetDialog from '../../photos-page/delete-asset-dialog.svelte';
-  import DeleteAssetDialog from '$lib/components/timeline/actions/delete-asset-dialog.svelte';
   import Portal from '../portal/portal.svelte';
 
   interface Props {

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

@@ -353,7 +353,7 @@
           <div
             class="rounded-full w-[40px] h-[40px] bg-immich-primary text-white flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
           >
-            {feature.properties?.point_count}
+            {feature.properties?.point_count?.toLocaleString()}
           </div>
         {/snippet}
       </MarkerLayer>

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

@@ -4,38 +4,25 @@
   import type { ScrubberMonth } from '$lib/managers/timeline-manager/types';
   import { mobileDevice } from '$lib/stores/mobile-device.svelte';
   import { getTabbable } from '$lib/utils/focus-util';
-  import { type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
+  import { type ScrubberListener } from '$lib/utils/timeline-util';
   import { mdiPlay } from '@mdi/js';
   import { clamp } from 'lodash-es';
   import { onMount } from 'svelte';
   import { fade, fly } from 'svelte/transition';
 
   interface Props {
-    /** Offset from the top of the timeline (e.g., for headers) */
     timelineTopOffset?: number;
-    /** Offset from the bottom of the timeline (e.g., for footers) */
     timelineBottomOffset?: number;
-    /** Total height of the scrubber component */
     height?: number;
-    /** Timeline manager instance that controls the timeline state */
     timelineManager: TimelineManager;
-    /** Overall scroll percentage through the entire timeline (0-1), used when no specific month is targeted */
+    scrubOverallPercent?: number;
-    timelineScrollPercent?: number;
+    scrubberMonthPercent?: number;
-    /** The percentage of scroll through the month that is currently intersecting the top boundary of the viewport */
+    scrubberMonth?: { year: number; month: number };
-    viewportTopMonthScrollPercent?: number;
+    leadout?: boolean;
-    /** The year/month of the timeline month at the top of the viewport */
-    viewportTopMonth?: TimelineYearMonth;
-    /** Indicates whether the viewport is currently in the lead-out section (after all months) */
-    isInLeadOutSection?: boolean;
-    /** Width of the scrubber component in pixels (bindable for parent component margin adjustments) */
     scrubberWidth?: number;
-    /** Callback fired when user interacts with the scrubber to navigate */
     onScrub?: ScrubberListener;
-    /** Callback fired when keyboard events occur on the scrubber */
     onScrubKeyDown?: (event: KeyboardEvent, element: HTMLElement) => void;
-    /** Callback fired when scrubbing starts */
     startScrub?: ScrubberListener;
-    /** Callback fired when scrubbing stops */
     stopScrub?: ScrubberListener;
   }
 
@@ -44,10 +31,10 @@
     timelineBottomOffset = 0,
     height = 0,
     timelineManager,
-    timelineScrollPercent = 0,
+    scrubOverallPercent = 0,
-    viewportTopMonthScrollPercent = 0,
+    scrubberMonthPercent = 0,
-    viewportTopMonth = undefined,
+    scrubberMonth = undefined,
-    isInLeadOutSection = false,
+    leadout = false,
     onScrub = undefined,
     onScrubKeyDown = undefined,
     startScrub = undefined,
@@ -113,7 +100,7 @@
         offset += scrubberMonthPercent * relativeBottomOffset;
       }
       return offset;
-    } else if (isInLeadOutSection) {
+    } else if (leadout) {
       let offset = relativeTopOffset;
       for (const segment of segments) {
         offset += segment.height;
@@ -124,9 +111,7 @@
       return scrubOverallPercent * (height - (PADDING_TOP + PADDING_BOTTOM));
     }
   };
-  let scrollY = $derived(
+  let scrollY = $derived(toScrollFromMonthGroupPercentage(scrubberMonth, scrubberMonthPercent, scrubOverallPercent));
-    toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
-  );
   let timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight + timelineTopOffset + timelineBottomOffset);
   let relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
   let relativeBottomOffset = $derived(toScrollY(timelineBottomOffset / timelineFullHeight));
@@ -310,24 +295,12 @@
 
     const scrollPercent = toTimelineY(hoverY);
     if (wasDragging === false && isDragging) {
-      void startScrub?.({
+      void startScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
-        scrubberMonth: segmentDate!,
+      void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
-      void onScrub?.({
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
     }
 
     if (wasDragging && !isDragging) {
-      void stopScrub?.({
+      void stopScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
-        scrubberMonth: segmentDate!,
-        overallScrollPercent: scrollPercent,
-        scrubberMonthScrollPercent: monthGroupPercentY,
-      });
       return;
     }
 
@@ -335,11 +308,7 @@
       return;
     }
 
-    void onScrub?.({
+    void onScrub?.(segmentDate!, scrollPercent, monthGroupPercentY);
-      scrubberMonth: segmentDate!,
-      overallScrollPercent: scrollPercent,
-      scrubberMonthScrollPercent: monthGroupPercentY,
-    });
   };
   /* eslint-disable tscompat/tscompat */
   const getTouch = (event: TouchEvent) => {
@@ -443,11 +412,7 @@
       }
       if (next) {
         event.preventDefault();
-        void onScrub?.({
+        void onScrub?.({ year: next.year, month: next.month }, -1, 0);
-          scrubberMonth: { year: next.year, month: next.month },
-          overallScrollPercent: -1,
-          scrubberMonthScrollPercent: 0,
-        });
         return true;
       }
     }
@@ -457,11 +422,7 @@
         const next = segments[idx + 1];
         if (next) {
           event.preventDefault();
-          void onScrub?.({
+          void onScrub?.({ year: next.year, month: next.month }, -1, 0);
-            scrubberMonth: { year: next.year, month: next.month },
-            overallScrollPercent: -1,
-            scrubberMonthScrollPercent: 0,
-          });
           return true;
         }
       }

web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte

@@ -1,225 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
-  import {
-    setFocusToAsset as setFocusAssetInit,
-    setFocusTo as setFocusToInit,
-  } from '$lib/components/photos-page/actions/focus-actions';
-  import ChangeDate, {
-    type AbsoluteResult,
-    type RelativeResult,
-  } from '$lib/components/shared-components/change-date.svelte';
-  import { AppRoute } from '$lib/constants';
-  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';
-  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import { featureFlags } from '$lib/stores/server-config.store';
-  import { handlePromiseError } from '$lib/utils';
-  import { deleteAssets, updateStackedAssetInTimeline } from '$lib/utils/actions';
-  import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
-  import { AssetVisibility } from '@immich/sdk';
-  import { modalManager } from '@immich/ui';
-  import { mdiCalendarBlankOutline } from '@mdi/js';
-  import { DateTime } from 'luxon';
-  import { t } from 'svelte-i18n';
-  import DeleteAssetDialog from './delete-asset-dialog.svelte';
-  let { isViewing: showAssetViewer } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    isShowDeleteConfirmation: boolean;
-    onEscape?: () => void;
-    scrollToAsset: (asset: TimelineAsset) => boolean;
-  }
-
-  let {
-    timelineManager = $bindable(),
-    assetInteraction,
-    isShowDeleteConfirmation = $bindable(false),
-    onEscape,
-    scrollToAsset,
-  }: Props = $props();
-
-  let isShowSelectDate = $state(false);
-
-  const trashOrDelete = async (force: boolean = false) => {
-    isShowDeleteConfirmation = false;
-    await deleteAssets(
-      !(isTrashEnabled && !force),
-      (assetIds) => timelineManager.removeAssets(assetIds),
-      assetInteraction.selectedAssets,
-      !isTrashEnabled || force ? undefined : (assets) => timelineManager.addAssets(assets),
-    );
-    assetInteraction.clearMultiselect();
-  };
-
-  const onDelete = () => {
-    const hasTrashedAsset = assetInteraction.selectedAssets.some((asset) => asset.isTrashed);
-
-    if ($showDeleteModal && (!isTrashEnabled || hasTrashedAsset)) {
-      isShowDeleteConfirmation = true;
-      return;
-    }
-    handlePromiseError(trashOrDelete(hasTrashedAsset));
-  };
-
-  const onForceDelete = () => {
-    if ($showDeleteModal) {
-      isShowDeleteConfirmation = true;
-      return;
-    }
-    handlePromiseError(trashOrDelete(true));
-  };
-
-  const onStackAssets = async () => {
-    const result = await stackAssets(assetInteraction.selectedAssets);
-
-    updateStackedAssetInTimeline(timelineManager, result);
-
-    onEscape?.();
-  };
-
-  const toggleArchive = async () => {
-    const visibility = assetInteraction.isAllArchived ? AssetVisibility.Timeline : AssetVisibility.Archive;
-    const ids = await archiveAssets(assetInteraction.selectedAssets, visibility);
-    timelineManager.updateAssetOperation(ids, (asset) => {
-      asset.visibility = visibility;
-      return { remove: false };
-    });
-    deselectAllAssets();
-  };
-
-  let shiftKeyIsDown = $state(false);
-
-  const deselectAllAssets = () => {
-    cancelMultiselect(assetInteraction);
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = true;
-    }
-  };
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = false;
-    }
-  };
-
-  const onSelectStart = (e: Event) => {
-    if (assetInteraction.selectionActive && shiftKeyIsDown) {
-      e.preventDefault();
-    }
-  };
-
-  const isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
-  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-  const idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
-  let isShortcutModalOpen = false;
-
-  const handleOpenShortcutModal = async () => {
-    if (isShortcutModalOpen) {
-      return;
-    }
-
-    isShortcutModalOpen = true;
-    await modalManager.show(ShortcutsModal, {});
-    isShortcutModalOpen = false;
-  };
-
-  $effect(() => {
-    if (isEmpty) {
-      assetInteraction.clearMultiselect();
-    }
-  });
-
-  const setFocusTo = setFocusToInit.bind(undefined, scrollToAsset, timelineManager);
-  const setFocusAsset = setFocusAssetInit.bind(undefined, scrollToAsset);
-
-  let shortcutList = $derived(
-    (() => {
-      if (searchStore.isSearchEnabled || $showAssetViewer) {
-        return [];
-      }
-
-      const shortcuts: ShortcutOptions[] = [
-        { shortcut: { key: '?', shift: true }, onShortcut: handleOpenShortcutModal },
-        { shortcut: { key: '/' }, onShortcut: () => goto(AppRoute.EXPLORE) },
-        { shortcut: { key: 'A', ctrl: true }, onShortcut: () => selectAllAssets(timelineManager, assetInteraction) },
-        { shortcut: { key: 'ArrowRight' }, onShortcut: () => setFocusTo('earlier', 'asset') },
-        { shortcut: { key: 'ArrowLeft' }, onShortcut: () => setFocusTo('later', 'asset') },
-        { shortcut: { key: 'D' }, onShortcut: () => setFocusTo('earlier', 'day') },
-        { shortcut: { key: 'D', shift: true }, onShortcut: () => setFocusTo('later', 'day') },
-        { shortcut: { key: 'M' }, onShortcut: () => setFocusTo('earlier', 'month') },
-        { shortcut: { key: 'M', shift: true }, onShortcut: () => setFocusTo('later', 'month') },
-        { shortcut: { key: 'Y' }, onShortcut: () => setFocusTo('earlier', 'year') },
-        { shortcut: { key: 'Y', shift: true }, onShortcut: () => setFocusTo('later', 'year') },
-        { shortcut: { key: 'G' }, onShortcut: () => (isShowSelectDate = true) },
-      ];
-      if (onEscape) {
-        shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape });
-      }
-
-      if (assetInteraction.selectionActive) {
-        shortcuts.push(
-          { shortcut: { key: 'Delete' }, onShortcut: onDelete },
-          { shortcut: { key: 'Delete', shift: true }, onShortcut: onForceDelete },
-          { shortcut: { key: 'D', ctrl: true }, onShortcut: () => deselectAllAssets() },
-          { shortcut: { key: 's' }, onShortcut: () => onStackAssets() },
-          { shortcut: { key: 'a', shift: true }, onShortcut: toggleArchive },
-        );
-      }
-
-      return shortcuts;
-    })(),
-  );
-</script>
-
-<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} onselectstart={onSelectStart} use:shortcuts={shortcutList} />
-
-{#if isShowDeleteConfirmation}
-  <DeleteAssetDialog
-    size={idsSelectedAssets.length}
-    onCancel={() => (isShowDeleteConfirmation = false)}
-    onConfirm={() => handlePromiseError(trashOrDelete(true))}
-  />
-{/if}
-
-{#if isShowSelectDate}
-  <ChangeDate
-    withDuration={false}
-    icon={mdiCalendarBlankOutline}
-    confirmText={$t('navigate')}
-    title={$t('navigate_to_time')}
-    initialDate={DateTime.now()}
-    timezoneInput={false}
-    onConfirm={async (result: AbsoluteResult | RelativeResult) => {
-      isShowSelectDate = false;
-      if (result.mode === 'absolute') {
-        const asset = await timelineManager.getClosestAssetToDate(
-          (DateTime.fromISO(result.date) as DateTime<true>).toObject(),
-        );
-        if (asset) {
-          setFocusAsset(asset);
-        }
-      }
-    }}
-    onCancel={() => (isShowSelectDate = false)}
-  />
-{/if}

web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte

@@ -1,318 +0,0 @@
-<script lang="ts">
-  import { afterNavigate, beforeNavigate } from '$app/navigation';
-  import { page } from '$app/stores';
-  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import Hmr from '$lib/components/timeline/base-components/hmr.svelte';
-  import Skeleton from '$lib/components/timeline/base-components/skeleton.svelte';
-  import SelectableTimelineMonth from '$lib/components/timeline/internal-components/selectable-timeline-month.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  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 { onMount, type Snippet } from 'svelte';
-  import type { UpdatePayload } from 'vite';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this asset grid responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    showSkeleton?: boolean;
-    isShowDeleteConfirmation?: boolean;
-    styleMarginRightOverride?: string;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-    header?: Snippet<[scrollToFunction: (top: number) => void]>;
-    children?: Snippet;
-    empty?: Snippet;
-    handleTimelineScroll?: () => void;
-  }
-
-  let {
-    customThumbnailLayout,
-
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-    withStacked = false,
-    showSkeleton = $bindable(true),
-    showArchiveIcon = false,
-    styleMarginRightOverride,
-    isShowDeleteConfirmation = $bindable(false),
-
-    onAssetOpen,
-    onSelect,
-    children,
-    empty,
-    header,
-    handleTimelineScroll = () => {},
-  }: Props = $props();
-
-  let { gridScrollTarget } = assetViewingStore;
-
-  let element: HTMLElement | undefined = $state();
-  let timelineElement: HTMLElement | undefined = $state();
-
-  const maxMd = $derived(mobileDevice.maxMd);
-  const isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-
-  $effect(() => {
-    const layoutOptions = maxMd
-      ? {
-          rowHeight: 100,
-          headerHeight: 32,
-        }
-      : {
-          rowHeight: 235,
-          headerHeight: 48,
-        };
-    timelineManager.setLayoutOptions(layoutOptions);
-  });
-
-  const scrollTo = (top: number) => {
-    if (element) {
-      element.scrollTo({ top });
-    }
-    updateSlidingWindow();
-  };
-
-  const scrollBy = (y: number) => {
-    if (element) {
-      element.scrollBy(0, y);
-    }
-    updateSlidingWindow();
-  };
-
-  const scrollCompensation = (compensation: { heightDelta?: number; scrollTop?: number }) => {
-    const { heightDelta, scrollTop } = compensation;
-    if (heightDelta !== undefined) {
-      scrollBy(heightDelta);
-    } else if (scrollTop !== undefined) {
-      scrollTo(scrollTop);
-    }
-    timelineManager.clearScrollCompensation();
-  };
-
-  const getAssetHeight = (assetId: string, monthGroup: MonthGroup) => {
-    // the following method may trigger any layouts, so need to
-    // handle any scroll compensation that may have been set
-    const height = monthGroup!.findAssetAbsolutePosition(assetId);
-
-    // this is in a while loop, since scrollCompensations invoke scrolls
-    // which may load months, triggering more scrollCompensations. Call
-    // this in a loop, until no more layouts occur.
-    while (timelineManager.scrollCompensation.monthGroup) {
-      scrollCompensation(timelineManager.scrollCompensation);
-    }
-    return height;
-  };
-
-  const assetIsVisible = (assetTop: number): boolean => {
-    if (!element) {
-      return false;
-    }
-
-    const { clientHeight, scrollTop } = element;
-    return assetTop >= scrollTop && assetTop < scrollTop + clientHeight;
-  };
-
-  const scrollToAssetId = async (assetId: string) => {
-    const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
-    if (!monthGroup) {
-      return false;
-    }
-    const height = getAssetHeight(assetId, monthGroup);
-
-    // If the asset is already visible, then don't scroll.
-    if (assetIsVisible(height)) {
-      return true;
-    }
-
-    scrollTo(height);
-    return true;
-  };
-
-  export const scrollToAsset = (asset: TimelineAsset) => {
-    const monthGroup = timelineManager.getMonthGroupByAssetId(asset.id);
-    if (!monthGroup) {
-      return false;
-    }
-    const height = getAssetHeight(asset.id, monthGroup);
-    scrollTo(height);
-    return true;
-  };
-
-  const completeNav = async () => {
-    const scrollTarget = $gridScrollTarget?.at;
-    let scrolled = false;
-    if (scrollTarget) {
-      scrolled = await scrollToAssetId(scrollTarget);
-    }
-    if (!scrolled) {
-      // if the asset is not found, scroll to the top
-      scrollTo(0);
-    }
-    showSkeleton = false;
-  };
-
-  beforeNavigate(() => (timelineManager.suspendTransitions = true));
-
-  afterNavigate((nav) => {
-    const { complete } = nav;
-    complete.then(completeNav, completeNav);
-  });
-
-  const updateIsScrolling = () => (timelineManager.scrolling = true);
-  // Yes, updateSlideWindow() is called by the onScroll event. However, if you also just scrolled
-  // by explicitly invoking element.scrollX functions, there may be a delay with enough time to
-  // set the intersecting property of the monthGroup to false, then true, which causes the DOM
-  // nodes to be recreated, causing bad perf, and also, disrupting focus of those elements.
-  // Also note: don't throttle, debounce, or otherwise do this function async - it causes flicker
-  const updateSlidingWindow = () => timelineManager.updateSlidingWindow(element?.scrollTop || 0);
-
-  const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
-
-  onMount(() => {
-    if (!enableRouting) {
-      showSkeleton = false;
-    }
-  });
-</script>
-
-<Hmr
-  onAfterUpdate={(payload: UpdatePayload) => {
-    // when hmr happens, skeleton is initialized to true by default
-    // normally, loading asset-grid is part of a navigation event, and the completion of
-    // that event triggers a scroll-to-asset, if necessary, when then clears the skeleton.
-    // this handler will run the navigation/scroll-to-asset handler when hmr is performed,
-    // preventing skeleton from showing after hmr
-    const finishHmr = () => {
-      const asset = $page.url.searchParams.get('at');
-      if (asset) {
-        $gridScrollTarget = { at: asset };
-      }
-      void completeNav();
-    };
-    const assetGridUpdate = payload.updates.some((update) => update.path.endsWith('base-timeline-viewer.svelte'));
-    if (assetGridUpdate) {
-      // wait 500ms for the update to be fully swapped in
-      setTimeout(finishHmr, 500);
-    }
-  }}
-/>
-
-{@render header?.(scrollTo)}
-
-<!-- Right margin MUST be equal to the width of scrubber -->
-<section
-  id="asset-grid"
-  class={['scrollbar-hidden h-full overflow-y-auto outline-none', { 'm-0': isEmpty }, { 'ms-0': !isEmpty }]}
-  style:margin-right={styleMarginRightOverride}
-  tabindex="-1"
-  bind:clientHeight={timelineManager.viewportHeight}
-  bind:clientWidth={null, (v: number) => ((timelineManager.viewportWidth = v), updateSlidingWindow())}
-  bind:this={element}
-  onscroll={() => (handleTimelineScroll(), updateSlidingWindow(), updateIsScrolling())}
->
-  <section
-    bind:this={timelineElement}
-    id="virtual-timeline"
-    class:invisible={showSkeleton}
-    style:height={timelineManager.timelineHeight + 'px'}
-  >
-    <section
-      use:resizeObserver={topSectionResizeObserver}
-      class:invisible={showSkeleton}
-      style:position="absolute"
-      style:left="0"
-      style:right="0"
-    >
-      {@render children?.()}
-      {#if isEmpty}
-        <!-- (optional) empty placeholder -->
-        {@render empty?.()}
-      {/if}
-    </section>
-
-    {#each timelineManager.months as monthGroup (monthGroup.viewId)}
-      {@const display = monthGroup.intersecting}
-      {@const absoluteHeight = monthGroup.top}
-
-      {#if !monthGroup.isLoaded}
-        <div
-          style:height={monthGroup.height + 'px'}
-          style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-          style:width="100%"
-        >
-          <Skeleton
-            height={monthGroup.height - monthGroup.timelineManager.headerHeight}
-            title={monthGroup.monthGroupTitle}
-          />
-        </div>
-      {:else if display}
-        <div
-          class="month-group"
-          style:height={monthGroup.height + 'px'}
-          style:position="absolute"
-          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
-          style:width="100%"
-        >
-          <SelectableTimelineMonth
-            {customThumbnailLayout}
-            {withStacked}
-            {showArchiveIcon}
-            {assetInteraction}
-            {timelineManager}
-            {isSelectionMode}
-            {singleSelect}
-            {monthGroup}
-            {onAssetOpen}
-            onSelect={(isSingleSelect: boolean, asset: TimelineAsset) => {
-              if (isSingleSelect) {
-                scrollTo(0);
-              }
-              onSelect?.(asset);
-            }}
-            onScrollCompensationMonthInDOM={scrollCompensation}
-          />
-        </div>
-      {/if}
-    {/each}
-    <!-- spacer for lead-out -->
-    <div
-      class="h-[60px]"
-      style:position="absolute"
-      style:left="0"
-      style:right="0"
-      style:transform={`translate3d(0,${timelineManager.timelineHeight}px,0)`}
-    ></div>
-  </section>
-</section>
-
-<style>
-  #asset-grid {
-    contain: strict;
-    scrollbar-width: none;
-  }
-
-  .month-group {
-    contain: layout size paint;
-    transform-style: flat;
-    backface-visibility: hidden;
-    transform-origin: center center;
-  }
-</style>

web/src/lib/components/timeline/base-components/base-timeline.svelte

@@ -1,200 +0,0 @@
-<script lang="ts">
-  import BaseTimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { 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 { findMonthAtScrollPosition, type ScrubberListener, type TimelineYearMonth } from '$lib/utils/timeline-util';
-  import type { Snippet } from 'svelte';
-  import Scrubber from './scrubber.svelte';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this timeline responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    showSkeleton?: boolean;
-
-    isShowDeleteConfirmation?: boolean;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-
-    children?: Snippet;
-    empty?: Snippet;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-
-    withStacked = false,
-    showArchiveIcon = false,
-    showSkeleton = $bindable(true),
-    isShowDeleteConfirmation = $bindable(false),
-    onAssetOpen,
-    onSelect = () => {},
-    children,
-    empty,
-  }: Props = $props();
-
-  const VIEWPORT_MULTIPLIER = 2; // Used to determine if timeline is "small"
-
-  // The percentage of scroll through the month that is currently intersecting the top boundary of the viewport.
-  // Note: There may be multiple months visible within the viewport at any given time.
-  let viewportTopMonthScrollPercent = $state(0);
-  // The timeline month intersecting the top position of the viewport
-  let viewportTopMonth: TimelineYearMonth | undefined = $state(undefined);
-  // Overall scroll percentage through the entire timeline (0-1)
-  let timelineScrollPercent: number = $state(0);
-  // Indicates whether the viewport is currently in the lead-out section (after all months)
-  let isInLeadOutSection = $state(false);
-  // Width of the scrubber component in pixels, used to adjust timeline margins
-  let scrubberWidth: number = $state(0);
-
-  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
-  // this function updates the scrubber position based on the current scroll position in the timeline
-  const handleTimelineScroll = () => {
-    isInLeadOutSection = false;
-
-    // Handle edge cases: small timeline (limited scroll) or lead-in area scrolling
-    const top = timelineManager.visibleWindow.top;
-    if (isSmallTimeline() || top < timelineManager.topSectionHeight) {
-      calculateTimelineScrollPercent();
-      return;
-    }
-
-    // Handle normal month scrolling
-    handleMonthScroll();
-  };
-
-  const handleMonthScroll = () => {
-    const scrollPosition = timelineManager.visibleWindow.top;
-    const months = timelineManager.months;
-    const maxScrollPercent = timelineManager.getMaxScrollPercent();
-
-    // Find the month at the current scroll position
-    const searchResult = findMonthAtScrollPosition(months, scrollPosition, maxScrollPercent);
-
-    if (searchResult) {
-      viewportTopMonth = searchResult.month;
-      viewportTopMonthScrollPercent = searchResult.monthScrollPercent;
-      isInLeadOutSection = false;
-      return;
-    }
-
-    // We're in lead-out section
-    isInLeadOutSection = true;
-    timelineScrollPercent = 1;
-    resetScrubberMonth();
-  };
-
-  const resetScrubberMonth = () => {
-    viewportTopMonth = undefined;
-    viewportTopMonthScrollPercent = 0;
-  };
-
-  const calculateTimelineScrollPercent = () => {
-    const maxScroll = timelineManager.getMaxScroll();
-    timelineScrollPercent = Math.min(1, timelineManager.visibleWindow.top / maxScroll);
-    resetScrubberMonth();
-  };
-
-  const handleOverallPercentScroll = (percent: number, scrollTo?: (offset: number) => void) => {
-    const maxScroll = timelineManager.getMaxScroll();
-    const offset = maxScroll * percent;
-    scrollTo?.(offset);
-  };
-
-  const findMonthGroup = (target: TimelineYearMonth) => {
-    return timelineManager.months.find(
-      ({ yearMonth }) => yearMonth.year === target.year && yearMonth.month === target.month,
-    );
-  };
-
-  const isSmallTimeline = () => {
-    return timelineManager.timelineHeight < timelineManager.viewportHeight * VIEWPORT_MULTIPLIER;
-  };
-
-  // note: don't throttle, debounce, or otherwise make this function async - it causes flicker
-  // this function scrolls the timeline to the specified month group and offset, based on scrubber interaction
-  const onScrub: ScrubberListener = (scrubberData) => {
-    const { scrubberMonth, overallScrollPercent, scrubberMonthScrollPercent, scrollToFunction } = scrubberData;
-
-    // Handle edge case or no month selected
-    if (!scrubberMonth || isSmallTimeline()) {
-      handleOverallPercentScroll(overallScrollPercent, scrollToFunction);
-      return;
-    }
-
-    // Find and scroll to the selected month
-    const monthGroup = findMonthGroup(scrubberMonth);
-    if (monthGroup) {
-      scrollToPositionWithinMonth(monthGroup, scrubberMonthScrollPercent, scrollToFunction);
-    }
-  };
-
-  const scrollToPositionWithinMonth = (
-    monthGroup: MonthGroup,
-    monthGroupScrollPercent: number,
-    handleScrollTop?: (top: number) => void,
-  ) => {
-    const topOffset = monthGroup.top;
-    const maxScrollPercent = timelineManager.getMaxScrollPercent();
-    const delta = monthGroup.height * monthGroupScrollPercent;
-    const scrollToTop = (topOffset + delta) * maxScrollPercent;
-
-    handleScrollTop?.(scrollToTop);
-  };
-  let baseTimelineViewer: BaseTimelineViewer | undefined = $state();
-  export const scrollToAsset = (asset: TimelineAsset) => baseTimelineViewer?.scrollToAsset(asset) ?? false;
-</script>
-
-<BaseTimelineViewer
-  {customThumbnailLayout}
-  {isSelectionMode}
-  {singleSelect}
-  {enableRouting}
-  {timelineManager}
-  {assetInteraction}
-  {withStacked}
-  {showArchiveIcon}
-  {showSkeleton}
-  {isShowDeleteConfirmation}
-  styleMarginRightOverride={scrubberWidth + 'px'}
-  {onAssetOpen}
-  {onSelect}
-  {children}
-  {empty}
-  {handleTimelineScroll}
->
-  {#snippet header(scrollToFunction)}
-    {#if timelineManager.months.length > 0}
-      <Scrubber
-        {timelineManager}
-        height={timelineManager.viewportHeight}
-        timelineTopOffset={timelineManager.topSectionHeight}
-        timelineBottomOffset={timelineManager.bottomSectionHeight}
-        {isInLeadOutSection}
-        {timelineScrollPercent}
-        {viewportTopMonthScrollPercent}
-        {viewportTopMonth}
-        onScrub={(scrubberData) => onScrub({ ...scrubberData, scrollToFunction })}
-        bind:scrubberWidth
-      />
-    {/if}
-  {/snippet}
-</BaseTimelineViewer>

web/src/lib/components/timeline/base-components/hmr.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import type { UpdatePayload } from 'vite';
-
-  interface Props {
-    onAfterUpdate: (payload: UpdatePayload) => void;
-  }
-  let { onAfterUpdate }: Props = $props();
-
-  onMount(() => {
-    if (import.meta && import.meta.hot) {
-      import.meta.hot.on('vite:afterUpdate', onAfterUpdate);
-      return () => import.meta.hot && import.meta.hot.off('vite:afterUpdate', onAfterUpdate);
-    }
-  });
-</script>

web/src/lib/components/timeline/base-components/timeline-month.svelte

@@ -1,181 +0,0 @@
-<script lang="ts">
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-  import Icon from '$lib/components/elements/icon.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { assetSnapshot, assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
-
-  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
-
-  import { flip } from 'svelte/animate';
-  import { fly, scale } from 'svelte/transition';
-
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { Snippet } from 'svelte';
-
-  let { isUploading } = uploadAssetsStore;
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-
-    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-
-    onHover: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onAssetSelect: (dayGroup: DayGroup, asset: TimelineAsset) => void;
-    onDayGroupSelect: (dayGroup: DayGroup, assets: TimelineAsset[]) => void;
-
-    // these should be replaced with reactive properties in timeline-manager.svelte.ts
-    isDayGroupSelected: (dayGroup: DayGroup) => boolean;
-    isAssetSelected: (asset: TimelineAsset) => boolean;
-    isAssetSelectionCandidate: (asset: TimelineAsset) => boolean;
-    isAssetDisabled: (asset: TimelineAsset) => boolean;
-  }
-
-  let {
-    customThumbnailLayout,
-
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup,
-    timelineManager,
-    onScrollCompensationMonthInDOM,
-
-    onHover,
-    onAssetOpen,
-    onAssetSelect,
-    onDayGroupSelect,
-
-    isDayGroupSelected,
-    isAssetSelected,
-    isAssetSelectionCandidate,
-    isAssetDisabled,
-  }: Props = $props();
-
-  let isMouseOverGroup = $state(false);
-  let hoveredDayGroup = $state();
-
-  const transitionDuration = $derived.by(() =>
-    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
-  );
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
-
-  function filterIntersecting<R extends { intersecting: boolean }>(intersectables: R[]) {
-    return intersectables.filter((intersectable) => intersectable.intersecting);
-  }
-
-  $effect.root(() => {
-    if (timelineManager.scrollCompensation.monthGroup === monthGroup) {
-      onScrollCompensationMonthInDOM(timelineManager.scrollCompensation);
-    }
-  });
-</script>
-
-{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const absoluteWidth = dayGroup.left}
-
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <section
-    class={[
-      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
-      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
-    ]}
-    data-group
-    style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
-    onmouseenter={() => {
-      isMouseOverGroup = true;
-      hoveredDayGroup = dayGroup.groupTitle;
-    }}
-    onmouseleave={() => {
-      isMouseOverGroup = false;
-      hoveredDayGroup = null;
-    }}
-  >
-    <!-- Date group title -->
-    <div
-      class="flex pt-7 pb-5 max-md:pt-5 max-md:pb-3 h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
-      style:width={dayGroup.width + 'px'}
-    >
-      {#if !singleSelect && ((hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) || isDayGroupSelected(dayGroup))}
-        <div
-          transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
-          class="inline-block pe-2 hover:cursor-pointer"
-          onclick={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => onDayGroupSelect(dayGroup, assetsSnapshot(dayGroup.getAssets()))}
-        >
-          {#if isDayGroupSelected(dayGroup)}
-            <Icon path={mdiCheckCircle} size="24" class="text-primary" />
-          {:else}
-            <Icon path={mdiCircleOutline} size="24" color="#757575" />
-          {/if}
-        </div>
-      {/if}
-
-      <span class="w-full truncate first-letter:capitalize" title={dayGroup.groupTitleFull}>
-        {dayGroup.groupTitle}
-      </span>
-    </div>
-
-    <!-- Image grid -->
-    <div
-      data-image-grid
-      class="relative overflow-clip"
-      style:height={dayGroup.height + 'px'}
-      style:width={dayGroup.width + 'px'}
-    >
-      {#each filterIntersecting(dayGroup.viewerAssets) as viewerAsset (viewerAsset.id)}
-        {@const position = viewerAsset.position!}
-        {@const asset = viewerAsset.asset!}
-
-        <!-- note: don't remove data-asset-id - its used by web e2e tests -->
-        <div
-          data-asset-id={asset.id}
-          class="absolute"
-          style:top={position.top + 'px'}
-          style:left={position.left + 'px'}
-          style:width={position.width + 'px'}
-          style:height={position.height + 'px'}
-          out:scale|global={{ start: 0.1, duration: scaleDuration }}
-          animate:flip={{ duration: transitionDuration }}
-        >
-          <Thumbnail
-            showStackedIcon={withStacked}
-            {showArchiveIcon}
-            {asset}
-            {groupIndex}
-            onClick={() => onAssetOpen?.(dayGroup, assetSnapshot(asset))}
-            onSelect={() => onAssetSelect(dayGroup, assetSnapshot(asset))}
-            onMouseEvent={() => onHover(dayGroup, assetSnapshot(asset))}
-            selected={isAssetSelected(asset)}
-            selectionCandidate={isAssetSelectionCandidate(asset)}
-            disabled={isAssetDisabled(asset)}
-            thumbnailWidth={position.width}
-            thumbnailHeight={position.height}
-          />
-          {#if customThumbnailLayout}
-            {@render customThumbnailLayout(asset)}
-          {/if}
-        </div>
-      {/each}
-    </div>
-  </section>
-{/each}
-
-<style>
-  section {
-    contain: layout paint style;
-  }
-  [data-image-grid] {
-    user-select: none;
-  }
-</style>

web/src/lib/components/timeline/internal-components/selectable-timeline-month.svelte

@@ -1,276 +0,0 @@
-<script lang="ts">
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
-  import { navigate } from '$lib/utils/navigation';
-
-  import TimelineMonth from '$lib/components/timeline/base-components/timeline-month.svelte';
-  import { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
-  import { searchStore } from '$lib/stores/search.svelte';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-
-    isSelectionMode: boolean;
-    singleSelect: boolean;
-    withStacked: boolean;
-    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (isSingleSelect: boolean, asset: TimelineAsset) => void;
-    onScrollCompensationMonthInDOM: (compensation: { heightDelta?: number; scrollTop?: number }) => void;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode,
-    singleSelect,
-    withStacked,
-    showArchiveIcon,
-    monthGroup = $bindable(),
-    assetInteraction,
-    timelineManager,
-    onAssetOpen,
-    onSelect,
-    onScrollCompensationMonthInDOM,
-  }: Props = $props();
-
-  let lastAssetMouseEvent: TimelineAsset | null = $state(null);
-  let shiftKeyIsDown = $state(false);
-  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
-
-  $effect(() => {
-    if (!lastAssetMouseEvent || !lastAssetMouseEvent) {
-      assetInteraction.clearAssetSelectionCandidates();
-    }
-    if (shiftKeyIsDown && lastAssetMouseEvent) {
-      void selectAssetCandidates(lastAssetMouseEvent);
-    }
-    if (isEmpty) {
-      assetInteraction.clearMultiselect();
-    }
-  });
-
-  const defaultAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (isSelectionMode || assetInteraction.selectionActive) {
-      handleAssetSelect(dayGroup, asset);
-      return;
-    }
-    void navigate({ targetRoute: 'current', assetId: asset.id });
-  };
-
-  const handleOnAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (onAssetOpen) {
-      onAssetOpen(dayGroup, asset, () => defaultAssetOpen(dayGroup, asset));
-      return;
-    }
-    defaultAssetOpen(dayGroup, asset);
-  };
-
-  // called when clicking asset with shift key pressed or with mouse
-  const handleAssetSelect = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    void onSelectAssets(asset);
-
-    const assetsInDayGroup = dayGroup.getAssets();
-    const groupTitle = dayGroup.groupTitle;
-    // Check if all assets are selected in a group to toggle the group selection's icon
-    let selectedAssetsInGroupCount = assetsInDayGroup.filter((asset) =>
-      assetInteraction.hasSelectedAsset(asset.id),
-    ).length;
-
-    // if all assets are selected in a group, add the group to selected group
-    if (selectedAssetsInGroupCount == assetsInDayGroup.length) {
-      assetInteraction.addGroupToMultiselectGroup(groupTitle);
-    } else {
-      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const handleSelectAsset = (asset: TimelineAsset) => {
-    if (!timelineManager.albumAssets.has(asset.id)) {
-      assetInteraction.selectAsset(asset);
-    }
-  };
-
-  const onKeyDown = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = true;
-    }
-  };
-
-  const onKeyUp = (event: KeyboardEvent) => {
-    if (searchStore.isSearchEnabled) {
-      return;
-    }
-
-    if (event.key === 'Shift') {
-      event.preventDefault();
-      shiftKeyIsDown = false;
-    }
-  };
-
-  const handleOnHover = (dayGroup: DayGroup, asset: TimelineAsset) => {
-    if (assetInteraction.selectionActive) {
-      void selectAssetCandidates(asset);
-    }
-    lastAssetMouseEvent = asset;
-  };
-
-  const handleDayGroupSelect = (dayGroup: DayGroup, assets: TimelineAsset[]) => {
-    const group = dayGroup.groupTitle;
-    if (assetInteraction.selectedGroup.has(group)) {
-      assetInteraction.removeGroupFromMultiselectGroup(group);
-      for (const asset of assets) {
-        assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-      }
-    } else {
-      assetInteraction.addGroupToMultiselectGroup(group);
-      for (const asset of assets) {
-        handleSelectAsset(asset);
-      }
-    }
-
-    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
-      isSelectingAllAssets.set(true);
-    } else {
-      isSelectingAllAssets.set(false);
-    }
-  };
-
-  const onSelectAssets = async (asset: TimelineAsset) => {
-    if (!asset) {
-      return;
-    }
-    onSelect?.(singleSelect, asset);
-
-    if (singleSelect) {
-      // onScrollToTop();
-
-      return;
-    }
-
-    const rangeSelection = assetInteraction.assetSelectionCandidates.length > 0;
-    const deselect = assetInteraction.hasSelectedAsset(asset.id);
-
-    // Select/deselect already loaded assets
-    if (deselect) {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
-      }
-      assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-    } else {
-      for (const candidate of assetInteraction.assetSelectionCandidates) {
-        handleSelectAsset(candidate);
-      }
-      handleSelectAsset(asset);
-    }
-
-    assetInteraction.clearAssetSelectionCandidates();
-
-    if (assetInteraction.assetSelectionStart && rangeSelection) {
-      let startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
-      let endBucket = timelineManager.getMonthGroupByAssetId(asset.id);
-
-      if (startBucket === null || endBucket === null) {
-        return;
-      }
-
-      // Select/deselect assets in range (start,end)
-      let started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === endBucket) {
-          break;
-        }
-        if (started) {
-          await timelineManager.loadMonthGroup(monthGroup.yearMonth);
-          for (const asset of monthGroup.assetsIterator()) {
-            if (deselect) {
-              assetInteraction.removeAssetFromMultiselectGroup(asset.id);
-            } else {
-              handleSelectAsset(asset);
-            }
-          }
-        }
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-      }
-
-      // Update date group selection in range [start,end]
-      started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === startBucket) {
-          started = true;
-        }
-        if (started) {
-          // Split month group into day groups and check each group
-          for (const dayGroup of monthGroup.dayGroups) {
-            const dayGroupTitle = dayGroup.groupTitle;
-            if (dayGroup.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
-              assetInteraction.addGroupToMultiselectGroup(dayGroupTitle);
-            } else {
-              assetInteraction.removeGroupFromMultiselectGroup(dayGroupTitle);
-            }
-          }
-        }
-        if (monthGroup === endBucket) {
-          break;
-        }
-      }
-    }
-
-    assetInteraction.setAssetSelectionStart(deselect ? null : asset);
-  };
-
-  const selectAssetCandidates = async (endAsset: TimelineAsset) => {
-    if (!shiftKeyIsDown) {
-      return;
-    }
-
-    const startAsset = assetInteraction.assetSelectionStart;
-    if (!startAsset) {
-      return;
-    }
-
-    const assets = assetsSnapshot(await timelineManager.retrieveRange(startAsset, endAsset));
-    assetInteraction.setAssetSelectionCandidates(assets);
-  };
-</script>
-
-<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
-
-<TimelineMonth
-  {customThumbnailLayout}
-  {singleSelect}
-  {withStacked}
-  {showArchiveIcon}
-  {monthGroup}
-  {timelineManager}
-  {onScrollCompensationMonthInDOM}
-  onHover={handleOnHover}
-  onAssetOpen={handleOnAssetOpen}
-  onAssetSelect={handleAssetSelect}
-  onDayGroupSelect={handleDayGroupSelect}
-  isDayGroupSelected={(dayGroup: DayGroup) => assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-  isAssetSelected={(asset) => assetInteraction.hasSelectedAsset(asset.id) || timelineManager.albumAssets.has(asset.id)}
-  isAssetSelectionCandidate={(asset) => assetInteraction.hasSelectionCandidate(asset.id)}
-  isAssetDisabled={(asset) => timelineManager.albumAssets.has(asset.id)}
-/>

web/src/lib/components/timeline/internal-components/timeline-asset-viewer.svelte

@@ -1,176 +0,0 @@
-<script lang="ts">
-  import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import { AssetAction } from '$lib/constants';
-  import { authManager } from '$lib/managers/auth-manager.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
-  import { navigate } from '$lib/utils/navigation';
-  import { toTimelineAsset } from '$lib/utils/timeline-util';
-  import { getAssetInfo, type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
-
-  let { asset: viewingAsset, gridScrollTarget, mutex, preloadAssets } = assetViewingStore;
-
-  interface Props {
-    timelineManager: TimelineManager;
-    showSkeleton: boolean;
-    withStacked?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE;
-  }
-
-  let {
-    timelineManager,
-    showSkeleton = $bindable(false),
-    removeAction,
-    withStacked = false,
-    isShared = false,
-    album = null,
-    person = null,
-  }: Props = $props();
-
-  const handlePrevious = async () => {
-    const release = await mutex.acquire();
-    const laterAsset = await timelineManager.getLaterAsset($viewingAsset);
-
-    if (laterAsset) {
-      const preloadAsset = await timelineManager.getLaterAsset(laterAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: laterAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: laterAsset.id });
-    }
-
-    release();
-    return !!laterAsset;
-  };
-
-  const handleNext = async () => {
-    const release = await mutex.acquire();
-    const earlierAsset = await timelineManager.getEarlierAsset($viewingAsset);
-
-    if (earlierAsset) {
-      const preloadAsset = await timelineManager.getEarlierAsset(earlierAsset);
-      const asset = await getAssetInfo({ ...authManager.params, id: earlierAsset.id });
-      assetViewingStore.setAsset(asset, preloadAsset ? [preloadAsset] : []);
-      await navigate({ targetRoute: 'current', assetId: earlierAsset.id });
-    }
-
-    release();
-    return !!earlierAsset;
-  };
-
-  const handleRandom = async () => {
-    const randomAsset = await timelineManager.getRandomAsset();
-
-    if (randomAsset) {
-      const asset = await getAssetInfo({ ...authManager.params, id: randomAsset.id });
-      assetViewingStore.setAsset(asset);
-      await navigate({ targetRoute: 'current', assetId: randomAsset.id });
-      return asset;
-    }
-  };
-
-  const handleClose = async (asset: { id: string }) => {
-    assetViewingStore.showAssetViewer(false);
-    showSkeleton = true;
-    $gridScrollTarget = { at: asset.id };
-    await navigate({ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: $gridScrollTarget });
-  };
-
-  const handlePreAction = async (action: Action) => {
-    switch (action.type) {
-      case removeAction:
-      case AssetAction.TRASH:
-      case AssetAction.RESTORE:
-      case AssetAction.DELETE:
-      case AssetAction.ARCHIVE:
-      case AssetAction.SET_VISIBILITY_LOCKED:
-      case AssetAction.SET_VISIBILITY_TIMELINE: {
-        // find the next asset to show or close the viewer
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        (await handleNext()) || (await handlePrevious()) || (await handleClose(action.asset));
-
-        // delete after find the next one
-        timelineManager.removeAssets([action.asset.id]);
-        break;
-      }
-    }
-  };
-  const handleAction = (action: Action) => {
-    switch (action.type) {
-      case AssetAction.ARCHIVE:
-      case AssetAction.UNARCHIVE:
-      case AssetAction.FAVORITE:
-      case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
-        break;
-      }
-
-      case AssetAction.UNSTACK: {
-        updateUnstackedAssetInTimeline(timelineManager, action.assets);
-        break;
-      }
-      case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.addAssets([toTimelineAsset(action.asset)]);
-        if (action.stack) {
-          //Have to unstack then restack assets in timeline in order to update the stack count in the timeline.
-          updateUnstackedAssetInTimeline(
-            timelineManager,
-            action.stack.assets.map((asset) => toTimelineAsset(asset)),
-          );
-          updateStackedAssetInTimeline(timelineManager, {
-            stack: action.stack,
-            toDeleteIds: action.stack.assets
-              .filter((asset) => asset.id !== action.stack?.primaryAssetId)
-              .map((asset) => asset.id),
-          });
-        }
-        break;
-      }
-      case AssetAction.SET_STACK_PRIMARY_ASSET: {
-        //Have to unstack then restack assets in timeline in order for the currently removed new primary asset to be made visible.
-        updateUnstackedAssetInTimeline(
-          timelineManager,
-          action.stack.assets.map((asset) => toTimelineAsset(asset)),
-        );
-        updateStackedAssetInTimeline(timelineManager, {
-          stack: action.stack,
-          toDeleteIds: action.stack.assets
-            .filter((asset) => asset.id !== action.stack.primaryAssetId)
-            .map((asset) => asset.id),
-        });
-        break;
-      }
-    }
-  };
-</script>
-
-{#await import('../../asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
-  <AssetViewer
-    {withStacked}
-    asset={$viewingAsset}
-    preloadAssets={$preloadAssets}
-    {isShared}
-    {album}
-    {person}
-    preAction={handlePreAction}
-    onAction={handleAction}
-    onPrevious={handlePrevious}
-    onNext={handleNext}
-    onRandom={handleRandom}
-    onClose={handleClose}
-  />
-{/await}

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

@@ -1,101 +0,0 @@
-<script lang="ts">
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import TimelineKeyboardActions from '$lib/components/timeline/actions/timeline-keyboard-actions.svelte';
-  import BaseTimeline from '$lib/components/timeline/base-components/base-timeline.svelte';
-  import TimelineAssetViewer from '$lib/components/timeline/internal-components/timeline-asset-viewer.svelte';
-  import type { AssetAction } from '$lib/constants';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
-  import type { 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 type { AlbumResponseDto, PersonResponseDto } from '@immich/sdk';
-  import type { Snippet } from 'svelte';
-
-  let { isViewing: showAssetViewer } = assetViewingStore;
-
-  interface Props {
-    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-    isSelectionMode?: boolean;
-    singleSelect?: boolean;
-    /** `true` if this asset grid is responds to navigation events; if `true`, then look at the
-     `AssetViewingStore.gridScrollTarget` and load and scroll to the asset specified, and
-     additionally, update the page location/url with the asset as the asset-grid is scrolled */
-    enableRouting: boolean;
-    timelineManager: TimelineManager;
-    assetInteraction: AssetInteraction;
-    removeAction?:
-      | AssetAction.UNARCHIVE
-      | AssetAction.ARCHIVE
-      | AssetAction.FAVORITE
-      | AssetAction.UNFAVORITE
-      | AssetAction.SET_VISIBILITY_TIMELINE;
-    withStacked?: boolean;
-    showArchiveIcon?: boolean;
-    isShared?: boolean;
-    album?: AlbumResponseDto | null;
-    person?: PersonResponseDto | null;
-    isShowDeleteConfirmation?: boolean;
-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
-    onSelect?: (asset: TimelineAsset) => void;
-    onEscape?: () => void;
-    children?: Snippet;
-    empty?: Snippet;
-  }
-
-  let {
-    customThumbnailLayout,
-    isSelectionMode = false,
-    singleSelect = false,
-    enableRouting,
-    timelineManager = $bindable(),
-    assetInteraction,
-    removeAction,
-    withStacked = false,
-    showArchiveIcon = false,
-    isShared = false,
-    album = null,
-    person = null,
-    isShowDeleteConfirmation = $bindable(false),
-    onAssetOpen,
-    onSelect = () => {},
-    onEscape = () => {},
-    children,
-    empty,
-  }: Props = $props();
-
-  let viewer: BaseTimeline | undefined = $state();
-  let showSkeleton: boolean = $state(true);
-</script>
-
-<BaseTimeline
-  bind:this={viewer}
-  {customThumbnailLayout}
-  {isSelectionMode}
-  {singleSelect}
-  {enableRouting}
-  {timelineManager}
-  {assetInteraction}
-  {withStacked}
-  {showArchiveIcon}
-  {isShowDeleteConfirmation}
-  {showSkeleton}
-  {onAssetOpen}
-  {onSelect}
-  {children}
-  {empty}
-/>
-
-<TimelineKeyboardActions
-  scrollToAsset={(asset) => viewer?.scrollToAsset(asset) ?? false}
-  {timelineManager}
-  {assetInteraction}
-  bind:isShowDeleteConfirmation
-  {onEscape}
-/>
-
-<Portal target="body">
-  {#if $showAssetViewer}
-    <TimelineAssetViewer bind:showSkeleton {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
-  {/if}
-</Portal>

web/src/lib/managers/timeline-manager/day-group.svelte.ts

@@ -13,7 +13,6 @@ export class DayGroup {
   readonly monthGroup: MonthGroup;
   readonly index: number;
   readonly groupTitle: string;
-  readonly groupTitleFull: string;
   readonly day: number;
   viewerAssets: ViewerAsset[] = $state([]);
 
@@ -27,12 +26,11 @@ export class DayGroup {
   #col = $state(0);
   #deferredLayout = false;
 
-  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string, groupTitleFull: string) {
+  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string) {
     this.index = index;
     this.monthGroup = monthGroup;
     this.day = day;
     this.groupTitle = groupTitle;
-    this.groupTitleFull = groupTitleFull;
   }
 
   get top() {

web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts

@@ -143,24 +143,3 @@ export function findMonthGroupForDate(timelineManager: TimelineManager, targetYe
     }
   }
 }
-
-export function findClosestGroupForDate(timelineManager: TimelineManager, targetYearMonth: TimelineYearMonth) {
-  let closestMonth: MonthGroup | undefined;
-  let minDifference = Number.MAX_SAFE_INTEGER;
-
-  for (const month of timelineManager.months) {
-    const { year, month: monthNum } = month.yearMonth;
-
-    // Calculate the absolute difference in months
-    const yearDiff = Math.abs(year - targetYearMonth.year);
-    const monthDiff = Math.abs(monthNum - targetYearMonth.month);
-    const totalDiff = yearDiff * 12 + monthDiff;
-
-    if (totalDiff < minDifference) {
-      minDifference = totalDiff;
-      closestMonth = month;
-    }
-  }
-
-  return closestMonth;
-}

web/src/lib/managers/timeline-manager/month-group.svelte.ts

@@ -4,7 +4,6 @@ import { CancellableTask } from '$lib/utils/cancellable-task';
 import { handleError } from '$lib/utils/handle-error';
 import {
   formatGroupTitle,
-  formatGroupTitleFull,
   formatMonthGroupTitle,
   fromTimelinePlainDate,
   fromTimelinePlainDateTime,
@@ -223,8 +222,7 @@ export class MonthGroup {
       addContext.setDayGroup(dayGroup, localDateTime);
     } else {
       const groupTitle = formatGroupTitle(fromTimelinePlainDate(localDateTime));
-      const groupTitleFull = formatGroupTitleFull(fromTimelinePlainDate(localDateTime));
+      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle);
-      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle, groupTitleFull);
       this.dayGroups.push(dayGroup);
       addContext.setDayGroup(dayGroup, localDateTime);
       addContext.newDayGroups.add(dayGroup);

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

@@ -16,7 +16,6 @@ import {
   runAssetOperation,
 } from '$lib/managers/timeline-manager/internal/operations-support.svelte';
 import {
-  findClosestGroupForDate,
   findMonthGroupForAsset as findMonthGroupForAssetUtil,
   findMonthGroupForDate,
   getAssetWithOffset,
@@ -42,7 +41,6 @@ export class TimelineManager {
   isInitialized = $state(false);
   months: MonthGroup[] = $state([]);
   topSectionHeight = $state(0);
-  bottomSectionHeight = $state(60);
   timelineHeight = $derived(this.months.reduce((accumulator, b) => accumulator + b.height, 0) + this.topSectionHeight);
   assetCount = $derived(this.months.reduce((accumulator, b) => accumulator + b.assetsCount, 0));
 
@@ -525,13 +523,9 @@ export class TimelineManager {
   }
 
   async getClosestAssetToDate(dateTime: TimelineDateTime) {
-    let monthGroup = findMonthGroupForDate(this, dateTime);
+    const monthGroup = findMonthGroupForDate(this, dateTime);
     if (!monthGroup) {
-      // if exact match not found, find closest
+      return;
-      monthGroup = findClosestGroupForDate(this, dateTime);
-      if (!monthGroup) {
-        return;
-      }
     }
     await this.loadMonthGroup(dateTime, { cancelable: false });
     const asset = monthGroup.findClosest(dateTime);
@@ -558,13 +552,4 @@ export class TimelineManager {
   getAssetOrder() {
     return this.#options.order ?? AssetOrder.Desc;
   }
-
-  getMaxScrollPercent() {
-    const totalHeight = this.timelineHeight + this.bottomSectionHeight + this.topSectionHeight;
-    return (totalHeight - this.viewportHeight) / totalHeight;
-  }
-
-  getMaxScroll() {
-    return this.topSectionHeight + this.bottomSectionHeight + (this.timelineHeight - this.viewportHeight);
-  }
 }

web/src/lib/modals/ShortcutsModal.svelte

@@ -28,7 +28,6 @@
         { key: ['D', 'd'], action: $t('previous_or_next_day') },
         { key: ['M', 'm'], action: $t('previous_or_next_month') },
         { key: ['Y', 'y'], action: $t('previous_or_next_year') },
-        { key: ['g'], action: $t('navigate_to_time') },
         { key: ['x'], action: $t('select') },
         { key: ['Esc'], action: $t('back_close_deselect') },
         { key: ['Ctrl', 'k'], action: $t('search_your_photos') },

web/src/lib/utils/timeline-util.ts

@@ -23,12 +23,11 @@ export type TimelineDateTime = TimelineDate & {
   millisecond: number;
 };
 
-export type ScrubberListener = (scrubberData: {
+export type ScrubberListener = (
-  scrubberMonth: { year: number; month: number };
+  scrubberMonth: { year: number; month: number },
-  overallScrollPercent: number;
+  overallScrollPercent: number,
-  scrubberMonthScrollPercent: number;
+  scrubberMonthScrollPercent: number,
-  scrollToFunction?: (top: number) => void;
+) => void | Promise<void>;
-}) => void | Promise<void>;
 
 // used for AssetResponseDto.dateTimeOriginal, amongst others
 export const fromISODateTime = (isoDateTime: string, timeZone: string): DateTime<true> =>
@@ -152,14 +151,6 @@ export function formatGroupTitle(_date: DateTime): string {
   return getDateLocaleString(date, { locale: get(locale) });
 }
 
-export const formatGroupTitleFull = (_date: DateTime): string => {
-  if (!_date.isValid) {
-    return _date.toString();
-  }
-  const date = _date as DateTime<true>;
-  return getDateLocaleString(date);
-};
-
 export const getDateLocaleString = (date: DateTime, opts?: LocaleOptions): string =>
   date.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY, opts);
 
@@ -243,79 +234,3 @@ export function setDifference<T>(setA: Set<T>, setB: Set<T>): SvelteSet<T> {
   }
   return result;
 }
-
-export interface MonthGroupForSearch {
-  yearMonth: TimelineYearMonth;
-  top: number;
-  height: number;
-}
-
-export interface BinarySearchResult {
-  month: TimelineYearMonth;
-  monthScrollPercent: number;
-}
-
-export function findMonthAtScrollPosition(
-  months: MonthGroupForSearch[],
-  scrollPosition: number,
-  maxScrollPercent: number,
-): BinarySearchResult | null {
-  const SUBPIXEL_TOLERANCE = -1; // Tolerance for scroll position checks
-  const NEAR_END_THRESHOLD = 0.9999; // Threshold for detecting near-end of month
-
-  if (months.length === 0) {
-    return null;
-  }
-
-  // Check if we're before the first month
-  const firstMonthTop = months[0].top * maxScrollPercent;
-  if (scrollPosition < firstMonthTop - SUBPIXEL_TOLERANCE) {
-    return null;
-  }
-
-  // Check if we're after the last month
-  const lastMonth = months.at(-1)!;
-  const lastMonthBottom = (lastMonth.top + lastMonth.height) * maxScrollPercent;
-  if (scrollPosition >= lastMonthBottom - SUBPIXEL_TOLERANCE) {
-    return null;
-  }
-
-  // Binary search to find the month containing the scroll position
-  let left = 0;
-  let right = months.length - 1;
-
-  while (left <= right) {
-    const mid = Math.floor((left + right) / 2);
-    const month = months[mid];
-    const monthTop = month.top * maxScrollPercent;
-    const monthBottom = monthTop + month.height * maxScrollPercent;
-
-    if (scrollPosition >= monthTop - SUBPIXEL_TOLERANCE && scrollPosition < monthBottom - SUBPIXEL_TOLERANCE) {
-      // Found the month containing the scroll position
-      const distanceIntoMonth = scrollPosition - monthTop;
-      const monthScrollPercent = Math.max(0, distanceIntoMonth / (month.height * maxScrollPercent));
-
-      // Handle month boundary edge case
-      if (monthScrollPercent > NEAR_END_THRESHOLD && mid < months.length - 1) {
-        return {
-          month: months[mid + 1].yearMonth,
-          monthScrollPercent: 0,
-        };
-      }
-
-      return {
-        month: month.yearMonth,
-        monthScrollPercent,
-      };
-    }
-
-    if (scrollPosition < monthTop) {
-      right = mid - 1;
-    } else {
-      left = mid + 1;
-    }
-  }
-
-  // Shouldn't reach here, but return null if we do
-  return null;
-}

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

@@ -22,6 +22,7 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@@ -31,7 +32,6 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { AlbumPageViewMode, AppRoute } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
@@ -443,7 +443,7 @@
 <div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
   <div class="relative w-full shrink">
     <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-      <Timeline
+      <AssetGrid
         enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
         {album}
         {timelineManager}
@@ -544,7 +544,7 @@
             </section>
           {/if}
         {/if}
-      </Timeline>
+      </AssetGrid>
 
       {#if showActivityStatus && !activityManager.isLoading}
         <div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end">

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

@@ -7,13 +7,13 @@
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.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 { AssetAction } from '$lib/constants';
 
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
-  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { AssetVisibility } from '@immich/sdk';
@@ -47,7 +47,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  <Timeline
+  <AssetGrid
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -57,7 +57,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_archived_assets_message')} />
     {/snippet}
-  </Timeline>
+  </AssetGrid>
 </UserPageLayout>
 
 {#if assetInteraction.selectionActive}

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

@@ -12,10 +12,10 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.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 Timeline from '$lib/components/timeline/timeline.svelte';
   import { AssetAction } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -51,7 +51,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
-  <Timeline
+  <AssetGrid
     enableRouting={true}
     withStacked={true}
     {timelineManager}
@@ -62,7 +62,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_favorites_message')} />
     {/snippet}
-  </Timeline>
+  </AssetGrid>
 </UserPageLayout>
 
 <!-- Multiselection mode app bar -->

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

@@ -7,10 +7,10 @@
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.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 Timeline from '$lib/components/timeline/timeline.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -58,7 +58,7 @@
     </Button>
   {/snippet}
 
-  <Timeline
+  <AssetGrid
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -68,7 +68,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
     {/snippet}
-  </Timeline>
+  </AssetGrid>
 </UserPageLayout>
 
 <!-- Multi-selection mode app bar -->

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

@@ -3,10 +3,10 @@
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
   import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
   import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { AppRoute } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -43,7 +43,7 @@
 </script>
 
 <main class="relative h-dvh overflow-hidden px-2 md:px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
-  <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
+  <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
 </main>
 
 {#if assetInteraction.selectionActive}

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

@@ -20,6 +20,7 @@
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
@@ -29,7 +30,6 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { AppRoute, PersonPageViewMode, QueryParameter, SessionStorageKey } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
@@ -386,7 +386,7 @@
   }}
 >
   {#key person.id}
-    <Timeline
+    <AssetGrid
       enableRouting={true}
       {person}
       {timelineManager}
@@ -498,7 +498,7 @@
           {/if}
         </div>
       {/if}
-    </Timeline>
+    </AssetGrid>
   {/key}
 </main>
 

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

@@ -16,11 +16,11 @@
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
   import StackAction from '$lib/components/photos-page/actions/stack-action.svelte';
   import TagAction from '$lib/components/photos-page/actions/tag-action.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import MemoryLane from '$lib/components/photos-page/memory-lane.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 Timeline from '$lib/components/timeline/timeline.svelte';
   import { AssetAction } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -89,7 +89,7 @@
 </script>
 
 <UserPageLayout hideNavbar={assetInteraction.selectionActive} showUploadButton scrollbar={false}>
-  <Timeline
+  <AssetGrid
     enableRouting={true}
     {timelineManager}
     {assetInteraction}
@@ -103,7 +103,7 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} />
     {/snippet}
-  </Timeline>
+  </AssetGrid>
 </UserPageLayout>
 
 {#if assetInteraction.selectionActive}

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

@@ -2,11 +2,11 @@
   import { goto } from '$app/navigation';
   import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
-  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { AppRoute, AssetAction, QueryParameter } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import TagCreateModal from '$lib/modals/TagCreateModal.svelte';
@@ -117,11 +117,11 @@
 
   <section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
     {#if tag.hasAssets}
-      <Timeline enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
+      <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
         {#snippet empty()}
           <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
         {/snippet}
-      </Timeline>
+      </AssetGrid>
     {:else}
       <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
     {/if}

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

@@ -5,13 +5,13 @@
   import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
   import RestoreAssets from '$lib/components/photos-page/actions/restore-assets.svelte';
   import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { AppRoute } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -116,14 +116,14 @@
       </HStack>
     {/snippet}
 
-    <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
+    <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
       <p class="font-medium text-gray-500/60 dark:text-gray-300/60 p-4">
         {$t('trashed_items_will_be_permanently_deleted_after', { values: { days: $serverConfig.trashDays } })}
       </p>
       {#snippet empty()}
         <EmptyPlaceholder text={$t('trash_no_results_message')} src={empty3Url} />
       {/snippet}
-    </Timeline>
+    </AssetGrid>
   </UserPageLayout>
 {/if}
 

web/src/routes/(user)/utilities/geolocation/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import Timeline from '$lib/components/timeline/timeline.svelte';
   import { AssetAction } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
@@ -110,7 +110,17 @@
     return !!asset.latitude && !!asset.longitude;
   };
 
-  const handleOnAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => {
+  const handleThumbnailClick = (
+    asset: TimelineAsset,
+    timelineManager: TimelineManager,
+    dayGroup: DayGroup,
+    onClick: (
+      timelineManager: TimelineManager,
+      assets: TimelineAsset[],
+      groupTitle: string,
+      asset: TimelineAsset,
+    ) => void,
+  ) => {
     if (hasGps(asset)) {
       locationUpdated = true;
       setTimeout(() => {
@@ -118,9 +128,9 @@
       }, 1500);
       location = { latitude: asset.latitude!, longitude: asset.longitude! };
       void setQueryValue('at', asset.id);
-      return;
+    } else {
+      onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
     }
-    defaultAssetOpen();
   };
 </script>
 
@@ -175,7 +185,7 @@
     </div>
   {/if}
 
-  <Timeline
+  <AssetGrid
     isSelectionMode={true}
     enableRouting={true}
     {timelineManager}
@@ -183,9 +193,9 @@
     removeAction={AssetAction.ARCHIVE}
     onEscape={handleEscape}
     withStacked
-    onAssetOpen={handleOnAssetOpen}
+    onThumbnailClick={handleThumbnailClick}
   >
-    {#snippet customThumbnailLayout(asset: TimelineAsset)}
+    {#snippet customLayout(asset: TimelineAsset)}
       {#if hasGps(asset)}
         <div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
           {asset.city || $t('gps')}
@@ -199,5 +209,5 @@
     {#snippet empty()}
       <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => {}} />
     {/snippet}
-  </Timeline>
+  </AssetGrid>
 </UserPageLayout>