From 521825e5e6899837fbe593543810ce32634a375c Mon Sep 17 00:00:00 2001
From: midzelis <min123@gmail.com>
Date: Thu, 14 Aug 2025 21:36:22 +0000
Subject: [PATCH] Rename asset-grid to base-timeline and reorganize timeline
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Rename asset-grid.svelte to base-timeline.svelte
• Move asset-grid-actions.svelte to timeline-keyboard-actions.svelte in timeline-viewer/actions/
• Move delete-asset-dialog.svelte to timeline-viewer/actions/
• Update all imports across routes and components
---
 .../components/album-page/album-viewer.svelte |   2 +-
 .../asset-viewer/actions/delete-action.svelte |   4 +-
 .../photos-page/actions/delete-assets.svelte  |   4 +-
 .../components/photos-page/asset-grid.svelte  |  31 +--
 .../gallery-viewer/gallery-viewer.svelte      |   2 +-
 .../actions}/delete-asset-dialog.svelte       |   0
 .../actions/timeline-keyboard-actions.svelte} |   6 +-
 .../timeline-viewer/base-timeline.svelte      | 208 ++++++++++++++++++
 .../timeline-viewer/timeline-viewer.svelte    |   9 +-
 .../[[assetId=id]]/+page.svelte               |   2 +-
 .../[[assetId=id]]/+page.svelte               |   2 +-
 .../[[assetId=id]]/+page.svelte               |   2 +-
 .../[[assetId=id]]/+page.svelte               |   2 +-
 .../[[assetId=id]]/+page.svelte               |   2 +-
 .../[[assetId=id]]/+page.svelte               |   2 +-
 .../(user)/photos/[[assetId=id]]/+page.svelte |   2 +-
 .../[[assetId=id]]/+page.svelte               |   2 +-
 .../(user)/utilities/geolocation/+page.svelte |  18 +-
 18 files changed, 254 insertions(+), 46 deletions(-)
 rename web/src/lib/components/{photos-page => timeline-viewer/actions}/delete-asset-dialog.svelte (100%)
 rename web/src/lib/components/{photos-page/asset-grid-actions.svelte => timeline-viewer/actions/timeline-keyboard-actions.svelte} (96%)
 create mode 100644 web/src/lib/components/timeline-viewer/base-timeline.svelte

diff --git a/web/src/lib/components/album-page/album-viewer.svelte b/web/src/lib/components/album-page/album-viewer.svelte
index 8c91d29a34..b8f2f5a8a7 100644
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -18,10 +18,10 @@
   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';
+  import AssetGrid from '../timeline-viewer/base-timeline.svelte';
   import AlbumSummary from './album-summary.svelte';
 
   interface Props {
diff --git a/web/src/lib/components/asset-viewer/actions/delete-action.svelte b/web/src/lib/components/asset-viewer/actions/delete-action.svelte
index 82b88127f6..25f439246e 100644
--- a/web/src/lib/components/asset-viewer/actions/delete-action.svelte
+++ b/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-viewer/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;
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index e3b592b5cb..2583844522 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/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-viewer/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;
diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index d5708566dd..9598b12479 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@@ -12,6 +12,7 @@
   import Scrubber from '../shared-components/scrubber/scrubber.svelte';
 
   interface Props {
+    customLayout?: Snippet<[TimelineAsset]>;
     isSelectionMode?: boolean;
     singleSelect?: boolean;
     /** `true` if this asset grid is responds to navigation events; if `true`, then look at the
@@ -32,25 +33,26 @@
     album?: AlbumResponseDto | null;
     person?: PersonResponseDto | null;
     isShowDeleteConfirmation?: boolean;
+    /**
+     * Customizes what happens when an asset is opened (clicked/tapped).
+     * 
+     * @param dayGroup - The day group containing the asset
+     * @param asset - The asset that was opened
+     * @param defaultAssetOpen - Callback that executes the default behavior:
+     *   - If selection mode is active: Selects/deselects the asset
+     *   - If selection mode is inactive: Navigates to the asset detail view
+     * 
+     * If not provided, the default behavior is used automatically.
+     */
+    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
     onSelect?: (asset: TimelineAsset) => void;
     onEscape?: () => void;
     children?: Snippet;
     empty?: Snippet;
-    customLayout?: Snippet<[TimelineAsset]>;
-    onThumbnailClick?: (
-      asset: TimelineAsset,
-      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
-      onClick: (
-        timelineManager: TimelineManager,
-        assets: TimelineAsset[],
-        groupTitle: string,
-        asset: TimelineAsset,
-      ) => void,
-    ) => void;
   }
 
   let {
+    customLayout,
     isSelectionMode = false,
     singleSelect = false,
     enableRouting,
@@ -63,12 +65,11 @@
     album = null,
     person = null,
     isShowDeleteConfirmation = $bindable(false),
+    onAssetOpen,
     onSelect = () => {},
     onEscape = () => {},
     children,
     empty,
-    customLayout,
-    onThumbnailClick,
   }: Props = $props();
 
   let leadout = $state(false);
@@ -186,6 +187,7 @@
 </script>
 
 <TimelineViewer
+  {customLayout}
   {isSelectionMode}
   {singleSelect}
   {enableRouting}
@@ -198,6 +200,7 @@
   {album}
   {person}
   {isShowDeleteConfirmation}
+  {onAssetOpen}
   {onSelect}
   {onEscape}
   {children}
diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index e9282ae5d8..a3c741cee9 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -23,7 +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 '../../timeline-viewer/actions/delete-asset-dialog.svelte';
   import Portal from '../portal/portal.svelte';
 
   interface Props {
diff --git a/web/src/lib/components/photos-page/delete-asset-dialog.svelte b/web/src/lib/components/timeline-viewer/actions/delete-asset-dialog.svelte
similarity index 100%
rename from web/src/lib/components/photos-page/delete-asset-dialog.svelte
rename to web/src/lib/components/timeline-viewer/actions/delete-asset-dialog.svelte
diff --git a/web/src/lib/components/photos-page/asset-grid-actions.svelte b/web/src/lib/components/timeline-viewer/actions/timeline-keyboard-actions.svelte
similarity index 96%
rename from web/src/lib/components/photos-page/asset-grid-actions.svelte
rename to web/src/lib/components/timeline-viewer/actions/timeline-keyboard-actions.svelte
index 7bafd97d09..9d40e384e7 100644
--- a/web/src/lib/components/photos-page/asset-grid-actions.svelte
+++ b/web/src/lib/components/timeline-viewer/actions/timeline-keyboard-actions.svelte
@@ -129,9 +129,9 @@
     }
   };
 
-  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 isTrashEnabled = $derived($featureFlags.loaded && $featureFlags.trash);
+  let isEmpty = $derived(timelineManager.isInitialized && timelineManager.months.length === 0);
+  let idsSelectedAssets = $derived(assetInteraction.selectedAssets.map(({ id }) => id));
   let isShortcutModalOpen = false;
 
   const handleOpenShortcutModal = async () => {
diff --git a/web/src/lib/components/timeline-viewer/base-timeline.svelte b/web/src/lib/components/timeline-viewer/base-timeline.svelte
new file mode 100644
index 0000000000..4dc932dd80
--- /dev/null
+++ b/web/src/lib/components/timeline-viewer/base-timeline.svelte
@@ -0,0 +1,208 @@
+<script lang="ts">
+  import TimelineViewer from '$lib/components/timeline-viewer/timeline-viewer.svelte';
+  import { AssetAction } from '$lib/constants';
+  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 type { ScrubberListener } from '$lib/utils/timeline-util';
+  import type { AlbumResponseDto, PersonResponseDto } from '@immich/sdk';
+  import type { Snippet } from 'svelte';
+  import Scrubber from '../shared-components/scrubber/scrubber.svelte';
+
+  interface Props {
+    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;
+    onSelect?: (asset: TimelineAsset) => void;
+    onEscape?: () => void;
+    children?: Snippet;
+    empty?: Snippet;
+  }
+
+  let {
+    isSelectionMode = false,
+    singleSelect = false,
+    enableRouting,
+    timelineManager = $bindable(),
+    assetInteraction,
+    removeAction,
+    withStacked = false,
+    showArchiveIcon = false,
+    isShared = false,
+    album = null,
+    person = null,
+    isShowDeleteConfirmation = $bindable(false),
+    onSelect = () => {},
+    onEscape = () => {},
+    children,
+    empty,
+  }: Props = $props();
+
+  let leadout = $state(false);
+  let scrubberMonthPercent = $state(0);
+  let scrubberMonth: { year: number; month: number } | undefined = $state(undefined);
+  let scrubOverallPercent: number = $state(0);
+  let scrubberWidth: number = $state(0);
+
+  // note: don't throttle, debounch, 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 = () => {
+    leadout = false;
+
+    if (timelineManager.timelineHeight < timelineManager.viewportHeight * 2) {
+      // edge case - scroll limited due to size of content, must adjust -  use the overall percent instead
+      const maxScroll = timelineManager.getMaxScroll();
+      scrubOverallPercent = Math.min(1, timelineManager.visibleWindow.top / maxScroll);
+
+      scrubberMonth = undefined;
+      scrubberMonthPercent = 0;
+    } else {
+      let top = timelineManager.visibleWindow.top;
+      if (top < timelineManager.topSectionHeight) {
+        // in the lead-in area
+        scrubberMonth = undefined;
+        scrubberMonthPercent = 0;
+        const maxScroll = timelineManager.getMaxScroll();
+
+        scrubOverallPercent = Math.min(1, top / maxScroll);
+        return;
+      }
+
+      let maxScrollPercent = timelineManager.getMaxScrollPercent();
+      let found = false;
+
+      const monthsLength = timelineManager.months.length;
+      for (let i = -1; i < monthsLength + 1; i++) {
+        let monthGroup: TimelineYearMonth | undefined;
+        let monthGroupHeight = 0;
+        if (i === -1) {
+          // lead-in
+          monthGroupHeight = timelineManager.topSectionHeight;
+        } else if (i === monthsLength) {
+          // lead-out
+          monthGroupHeight = timelineManager.bottomSectionHeight;
+        } else {
+          monthGroup = timelineManager.months[i].yearMonth;
+          monthGroupHeight = timelineManager.months[i].height;
+        }
+
+        let next = top - monthGroupHeight * maxScrollPercent;
+        // instead of checking for < 0, add a little wiggle room for subpixel resolution
+        if (next < -1 && monthGroup) {
+          scrubberMonth = monthGroup;
+
+          // allowing next to be at least 1 may cause percent to go negative, so ensure positive percentage
+          scrubberMonthPercent = Math.max(0, top / (monthGroupHeight * maxScrollPercent));
+
+          // compensate for lost precision/rounding errors advance to the next bucket, if present
+          if (scrubberMonthPercent > 0.9999 && i + 1 < monthsLength - 1) {
+            scrubberMonth = timelineManager.months[i + 1].yearMonth;
+            scrubberMonthPercent = 0;
+          }
+
+          found = true;
+          break;
+        }
+        top = next;
+      }
+      if (!found) {
+        leadout = true;
+        scrubberMonth = undefined;
+        scrubberMonthPercent = 0;
+        scrubOverallPercent = 1;
+      }
+    }
+  };
+
+  // note: don't throttle, debounch, 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 = ({
+    scrubberMonth,
+    overallScrollPercent,
+    scrubberMonthScrollPercent,
+    handleScrollTop,
+  }) => {
+    if (!scrubberMonth || timelineManager.timelineHeight < timelineManager.viewportHeight * 2) {
+      // edge case - scroll limited due to size of content, must adjust - use use the overall percent instead
+      const maxScroll = timelineManager.getMaxScroll();
+      const offset = maxScroll * overallScrollPercent;
+      handleScrollTop?.(offset);
+    } else {
+      const monthGroup = timelineManager.months.find(
+        ({ yearMonth: { year, month } }) => year === scrubberMonth.year && month === scrubberMonth.month,
+      );
+      if (!monthGroup) {
+        return;
+      }
+      scrollToMonthGroupAndOffset(monthGroup, scrubberMonthScrollPercent, handleScrollTop);
+    }
+  };
+
+  const scrollToMonthGroupAndOffset = (
+    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);
+  };
+</script>
+
+<TimelineViewer
+  {isSelectionMode}
+  {singleSelect}
+  {enableRouting}
+  {timelineManager}
+  {assetInteraction}
+  {removeAction}
+  {withStacked}
+  {showArchiveIcon}
+  {isShared}
+  {album}
+  {person}
+  {isShowDeleteConfirmation}
+  {onSelect}
+  {onEscape}
+  {children}
+  {empty}
+  {handleTimelineScroll}
+>
+  {#snippet header(handleScrollTop)}
+    {#if timelineManager.months.length > 0}
+      <Scrubber
+        {timelineManager}
+        height={timelineManager.viewportHeight}
+        timelineTopOffset={timelineManager.topSectionHeight}
+        timelineBottomOffset={timelineManager.bottomSectionHeight}
+        {leadout}
+        {scrubOverallPercent}
+        {scrubberMonthPercent}
+        {scrubberMonth}
+        onScrub={(args) => onScrub({ ...args, handleScrollTop })}
+        bind:scrubberWidth
+      />
+    {/if}
+  {/snippet}
+</TimelineViewer>
diff --git a/web/src/lib/components/timeline-viewer/timeline-viewer.svelte b/web/src/lib/components/timeline-viewer/timeline-viewer.svelte
index cfb29d1f88..51b8c437c1 100644
--- a/web/src/lib/components/timeline-viewer/timeline-viewer.svelte
+++ b/web/src/lib/components/timeline-viewer/timeline-viewer.svelte
@@ -2,11 +2,12 @@
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/stores';
   import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
-  import AssetGridActions from '$lib/components/photos-page/asset-grid-actions.svelte';
+  import AssetGridActions from '$lib/components/timeline-viewer/actions/timeline-keyboard-actions.svelte';
   import Skeleton from '$lib/components/timeline-viewer/skeleton.svelte';
   import TimelineAssetViewer from '$lib/components/timeline-viewer/timeline-asset-viewer.svelte';
   import SelectableTimelineDay from '$lib/components/timeline-viewer/timeline-day/selectable-timeline-day.svelte';
   import { AssetAction } from '$lib/constants';
+  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';
@@ -20,6 +21,7 @@
   import Portal from '../shared-components/portal/portal.svelte';
 
   interface Props {
+    customLayout?: Snippet<[TimelineAsset]>;
     isSelectionMode?: boolean;
     singleSelect?: boolean;
     /** `true` if this asset grid is responds to navigation events; if `true`, then look at the
@@ -40,6 +42,7 @@
     album?: AlbumResponseDto | null;
     person?: PersonResponseDto | null;
     isShowDeleteConfirmation?: boolean;
+    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
     onSelect?: (asset: TimelineAsset) => void;
     onEscape?: () => void;
     header?: Snippet<[handleScrollTop: (top: number) => void]>;
@@ -49,6 +52,7 @@
   }
 
   let {
+    customLayout,
     isSelectionMode = false,
     singleSelect = false,
     enableRouting,
@@ -61,6 +65,7 @@
     album = null,
     person = null,
     isShowDeleteConfirmation = $bindable(false),
+    onAssetOpen,
     onSelect = (asset: TimelineAsset) => void 0,
     onEscape = () => {},
     children,
@@ -317,6 +322,7 @@
           style:width="100%"
         >
           <SelectableTimelineDay
+            {customLayout}
             {withStacked}
             {showArchiveIcon}
             {assetInteraction}
@@ -324,6 +330,7 @@
             {isSelectionMode}
             {singleSelect}
             {monthGroup}
+            {onAssetOpen}
             {onSelect}
             {onScrollToTop}
             {onScrollCompensation}
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index eba030e2d9..17662697a5 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -22,7 +22,6 @@
   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';
@@ -32,6 +31,7 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import AssetGrid from '$lib/components/timeline-viewer/base-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';
diff --git a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 5481224057..23d52ac3d2 100644
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -7,10 +7,10 @@
   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 AssetGrid from '$lib/components/timeline-viewer/base-timeline.svelte';
   import { AssetAction } from '$lib/constants';
 
   import SetVisibilityAction from '$lib/components/photos-page/actions/set-visibility-action.svelte';
diff --git a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
index ae24a82da7..6f00ef9577 100644
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 AssetGrid from '$lib/components/timeline-viewer/base-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';
diff --git a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 733e93db71..39549f1e64 100644
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 AssetGrid from '$lib/components/timeline-viewer/base-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';
diff --git a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 83962c5a90..886e0dbaec 100644
--- a/web/src/routes/(user)/partners/[userId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 AssetGrid from '$lib/components/timeline-viewer/base-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';
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 807819b585..aa5b167b01 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -20,7 +20,6 @@
   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';
@@ -30,6 +29,7 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import AssetGrid from '$lib/components/timeline-viewer/base-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';
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index 0098667873..c8cf1e700e 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/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 AssetGrid from '$lib/components/timeline-viewer/base-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';
diff --git a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 2989a78a13..e4c562d06d 100644
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/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 AssetGrid from '$lib/components/timeline-viewer/base-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';
diff --git a/web/src/routes/(user)/utilities/geolocation/+page.svelte b/web/src/routes/(user)/utilities/geolocation/+page.svelte
index ab0a59f3ef..b97fc18f2e 100644
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -110,17 +110,7 @@
     return !!asset.latitude && !!asset.longitude;
   };
 
-  const handleThumbnailClick = (
-    asset: TimelineAsset,
-    timelineManager: TimelineManager,
-    dayGroup: DayGroup,
-    onClick: (
-      timelineManager: TimelineManager,
-      assets: TimelineAsset[],
-      groupTitle: string,
-      asset: TimelineAsset,
-    ) => void,
-  ) => {
+  const handleOnAssetOpen = (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => {
     if (hasGps(asset)) {
       locationUpdated = true;
       setTimeout(() => {
@@ -128,9 +118,9 @@
       }, 1500);
       location = { latitude: asset.latitude!, longitude: asset.longitude! };
       void setQueryValue('at', asset.id);
-    } else {
-      onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+      return;
     }
+    defaultAssetOpen();
   };
 </script>
 
@@ -193,7 +183,7 @@
     removeAction={AssetAction.ARCHIVE}
     onEscape={handleEscape}
     withStacked
-    onThumbnailClick={handleThumbnailClick}
+    onAssetOpen={handleOnAssetOpen}
   >
     {#snippet customLayout(asset: TimelineAsset)}
       {#if hasGps(asset)}