Create Timeline facade component to unify timeline usage

• Create timeline/timeline.svelte as main entry point for timeline functionality • Combine BaseTimeline, TimelineKeyboardActions, and TimelineAssetViewer • Update all route imports from base-timeline to use Timeline component • Move scrubber.svelte to timeline/base-components/ • Fix timeline-keyboard-actions date handling from result.dateTime to result.date • Clean up unused imports and props
2026-02-11 11:27:56 +03:00 · 2025-08-14 21:56:22 +00:00
parent dcc34bd1be
commit 364468afac
18 changed files with 141 additions and 97 deletions
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -4,7 +4,7 @@
  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 AssetGrid from '$lib/components/timeline/base-components/base-timeline.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';
@@ -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)">
-  <AssetGrid enableRouting={true} {album} {timelineManager} {assetInteraction}>
+  <Timeline 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>
-  </AssetGrid>
+  </Timeline>
 </main>

 <header>
--- a/web/src/lib/components/asset-viewer/actions/delete-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/delete-action.svelte
@@ -5,7 +5,6 @@
    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';
--- a/web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte
+++ b/web/src/lib/components/timeline/actions/timeline-keyboard-actions.svelte
@@ -212,7 +212,9 @@
    onConfirm={async (result: AbsoluteResult | RelativeResult) => {
      isShowSelectDate = false;
      if (result.mode === 'absolute') {
-        const asset = await timelineManager.getClosestAssetToDate(result.dateTime.toObject());
+        const asset = await timelineManager.getClosestAssetToDate(
+          (DateTime.fromISO(result.date) as DateTime<true>).toObject(),
+        );
        if (asset) {
          setFocusAsset(asset);
        }
--- a/web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte
+++ b/web/src/lib/components/timeline/base-components/base-timeline-viewer.svelte
@@ -2,11 +2,8 @@
  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/timeline/actions/timeline-keyboard-actions.svelte';
  import Skeleton from '$lib/components/timeline/base-components/skeleton.svelte';
  import SelectableTimelineDay from '$lib/components/timeline/internal-components/selectable-timeline-day.svelte';
-  import TimelineAssetViewer from '$lib/components/timeline/internal-components/timeline-asset-viewer.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';
@@ -15,10 +12,8 @@
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { navigate } from '$lib/utils/navigation';
-  import { type AlbumResponseDto, type PersonResponseDto } from '@immich/sdk';
  import { onMount, type Snippet } from 'svelte';
  import type { UpdatePayload } from 'vite';
-  import Portal from '../../shared-components/portal/portal.svelte';

  interface Props {
    customThumbnailLayout?: Snippet<[TimelineAsset]>;
@@ -31,21 +26,12 @@
    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;
+    showSkeleton?: boolean;
    isShowDeleteConfirmation?: boolean;
    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
    onSelect?: (asset: TimelineAsset) => void;
-    onEscape?: () => void;
    header?: Snippet<[handleScrollTop: (top: number) => void]>;
    children?: Snippet;
    empty?: Snippet;
@@ -60,30 +46,23 @@
    enableRouting,
    timelineManager = $bindable(),
    assetInteraction,
-    removeAction,
    withStacked = false,
+    showSkeleton = $bindable(true),
    showArchiveIcon = false,
-    isShared = false,
-    album = null,
-    person = null,
    isShowDeleteConfirmation = $bindable(false),

    onAssetOpen,
    onSelect,
-    onEscape,
    children,
    empty,
    header,
    handleTimelineScroll = () => {},
  }: Props = $props();

-  let { isViewing: showAssetViewer, gridScrollTarget } = assetViewingStore;
+  let { gridScrollTarget } = assetViewingStore;

  let element: HTMLElement | undefined = $state();
-
  let timelineElement: HTMLElement | undefined = $state();
-  let showSkeleton = $state(true);
-
  let scrubberWidth = $state(0);

  const maxMd = $derived(mobileDevice.maxMd);
@@ -161,7 +140,7 @@
    return true;
  };

-  const scrollToAsset = (asset: TimelineAsset) => {
+  export const scrollToAsset = (asset: TimelineAsset) => {
    const monthGroup = timelineManager.getMonthGroupByAssetId(asset.id);
    if (!monthGroup) {
      return false;
@@ -264,9 +243,6 @@
  });
 </script>

-<AssetGridActions {scrollToAsset} {timelineManager} {assetInteraction} bind:isShowDeleteConfirmation {onEscape}
-></AssetGridActions>
-
 {@render header?.(scrollTop)}

 <!-- Right margin MUST be equal to the width of scrubber -->
@@ -352,12 +328,6 @@
  </section>
 </section>

-<Portal target="body">
-  {#if $showAssetViewer}
-    <TimelineAssetViewer bind:showSkeleton {timelineManager} {removeAction} {withStacked} {isShared} {album} {person} />
-  {/if}
-</Portal>
-
 <style>
  #asset-grid {
    contain: strict;
--- a/web/src/lib/components/timeline/base-components/base-timeline.svelte
+++ b/web/src/lib/components/timeline/base-components/base-timeline.svelte
@@ -1,15 +1,13 @@
 <script lang="ts">
-  import TimelineViewer from '$lib/components/timeline/base-components/base-timeline-viewer.svelte';
-  import { AssetAction } from '$lib/constants';
+  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 type { ScrubberListener, TimelineYearMonth } 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';
+  import Scrubber from './scrubber.svelte';

  interface Props {
    customThumbnailLayout?: Snippet<[TimelineAsset]>;
@@ -22,20 +20,12 @@
    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;
+    showSkeleton?: boolean;

-    onAssetOpen?: (dayGroup: DayGroup, asset: TimelineAsset, defaultAssetOpen: () => void) => void;
+    isShowDeleteConfirmation?: boolean;
    onSelect?: (asset: TimelineAsset) => void;
    onEscape?: () => void;

@@ -50,16 +40,13 @@
    enableRouting,
    timelineManager = $bindable(),
    assetInteraction,
-    removeAction,
+
    withStacked = false,
    showArchiveIcon = false,
-    isShared = false,
-    album = null,
-    person = null,
+    showSkeleton = $bindable(true),
    isShowDeleteConfirmation = $bindable(false),
    onAssetOpen,
    onSelect = () => {},
-    onEscape = () => {},
    children,
    empty,
  }: Props = $props();
@@ -176,25 +163,22 @@

    handleScrollTop?.(scrollToTop);
  };
+  let baseTimelineViewer: BaseTimelineViewer | undefined = $state();
+  export const scrollToAsset = (asset: TimelineAsset) => baseTimelineViewer?.scrollToAsset(asset) ?? false;
 </script>

 <TimelineViewer
-  {customThumbnailLayout}
  {isSelectionMode}
  {singleSelect}
  {enableRouting}
  {timelineManager}
  {assetInteraction}
-  {removeAction}
  {withStacked}
  {showArchiveIcon}
-  {isShared}
-  {album}
-  {person}
+  {showSkeleton}
  {isShowDeleteConfirmation}
  {onAssetOpen}
  {onSelect}
-  {onEscape}
  {children}
  {empty}
  {handleTimelineScroll}
@@ -215,4 +199,4 @@
      />
    {/if}
  {/snippet}
-</TimelineViewer>
+</BaseTimelineViewer>
--- a/web/src/lib/components/shared-components/scrubber/scrubber.svelte
+++ b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
--- a/web/src/lib/components/timeline/base-components/timeline-day.svelte
+++ b/web/src/lib/components/timeline/base-components/timeline-day.svelte
@@ -19,7 +19,6 @@

  interface Props {
    customThumbnailLayout?: Snippet<[TimelineAsset]>;
-    isSelectionMode: boolean;
    singleSelect: boolean;
    withStacked: boolean;
    showArchiveIcon: boolean;
--- a/web/src/lib/components/timeline/internal-components/selectable-timeline-day.svelte
+++ b/web/src/lib/components/timeline/internal-components/selectable-timeline-day.svelte
@@ -4,7 +4,6 @@
  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 { uploadAssetsStore } from '$lib/stores/upload';
  import { navigate } from '$lib/utils/navigation';

  import TimelineDay from '$lib/components/timeline/base-components/timeline-day.svelte';
@@ -13,8 +12,6 @@
  import { searchStore } from '$lib/stores/search.svelte';
  import type { Snippet } from 'svelte';

-  let { isUploading } = uploadAssetsStore;
-
  interface Props {
    isSelectionMode: boolean;
    singleSelect: boolean;
@@ -264,7 +261,6 @@

 <TimelineDay
  {customThumbnailLayout}
-  {isSelectionMode}
  {singleSelect}
  {withStacked}
  {showArchiveIcon}
--- a/web/src/lib/components/timeline/timeline.svelte
+++ b/web/src/lib/components/timeline/timeline.svelte
@@ -0,0 +1,94 @@
+<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 { 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 {
+    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 viewer: BaseTimeline | undefined = $state();
+  let showSkeleton: boolean = $state(true);
+</script>
+
+<BaseTimeline
+  bind:this={viewer}
+  {isSelectionMode}
+  {singleSelect}
+  {enableRouting}
+  {timelineManager}
+  {assetInteraction}
+  {withStacked}
+  {showArchiveIcon}
+  {isShowDeleteConfirmation}
+  {showSkeleton}
+  {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>
--- 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
@@ -31,7 +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/base-components/base-timeline.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)">
-      <AssetGrid
+      <Timeline
        enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
        {album}
        {timelineManager}
@@ -544,7 +544,7 @@
            </section>
          {/if}
        {/if}
-      </AssetGrid>
+      </Timeline>

      {#if showActivityStatus && !activityManager.isLoading}
        <div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end">
--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -10,10 +10,10 @@
  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/base-components/base-timeline.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}>
-  <AssetGrid
+  <Timeline
    enableRouting={true}
    {timelineManager}
    {assetInteraction}
@@ -57,7 +57,7 @@
    {#snippet empty()}
      <EmptyPlaceholder text={$t('no_archived_assets_message')} />
    {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>

 {#if assetInteraction.selectionActive}
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -15,7 +15,7 @@
  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/base-components/base-timeline.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}>
-  <AssetGrid
+  <Timeline
    enableRouting={true}
    withStacked={true}
    {timelineManager}
@@ -62,7 +62,7 @@
    {#snippet empty()}
      <EmptyPlaceholder text={$t('no_favorites_message')} />
    {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>

 <!-- Multiselection mode app bar -->
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -10,7 +10,7 @@
  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/base-components/base-timeline.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}

-  <AssetGrid
+  <Timeline
    enableRouting={true}
    {timelineManager}
    {assetInteraction}
@@ -68,7 +68,7 @@
    {#snippet empty()}
      <EmptyPlaceholder text={$t('no_locked_photos_message')} title={$t('nothing_here_yet')} />
    {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>

 <!-- Multi-selection mode app bar -->
--- 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
@@ -6,7 +6,7 @@
  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/base-components/base-timeline.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)">
-  <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
+  <Timeline enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape} />
 </main>

 {#if assetInteraction.selectionActive}
--- 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
@@ -29,7 +29,7 @@
    NotificationType,
    notificationController,
  } from '$lib/components/shared-components/notification/notification';
-  import AssetGrid from '$lib/components/timeline/base-components/base-timeline.svelte';
+  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}
-    <AssetGrid
+    <Timeline
      enableRouting={true}
      {person}
      {timelineManager}
@@ -498,7 +498,7 @@
          {/if}
        </div>
      {/if}
-    </AssetGrid>
+    </Timeline>
  {/key}
 </main>

--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -20,7 +20,7 @@
  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/base-components/base-timeline.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}>
-  <AssetGrid
+  <Timeline
    enableRouting={true}
    {timelineManager}
    {assetInteraction}
@@ -103,7 +103,7 @@
    {#snippet empty()}
      <EmptyPlaceholder text={$t('no_assets_message')} onClick={() => openFileUploadDialog()} />
    {/snippet}
-  </AssetGrid>
+  </Timeline>
 </UserPageLayout>

 {#if assetInteraction.selectionActive}
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -6,7 +6,7 @@
  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 AssetGrid from '$lib/components/timeline/base-components/base-timeline.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}
-      <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
+      <Timeline enableRouting={true} {timelineManager} {assetInteraction} removeAction={AssetAction.UNARCHIVE}>
        {#snippet empty()}
          <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
        {/snippet}
-      </AssetGrid>
+      </Timeline>
    {:else}
      <TreeItemThumbnails items={tag.children} icon={mdiTag} onClick={handleNavigation} />
    {/if}
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -11,7 +11,7 @@
    notificationController,
    NotificationType,
  } from '$lib/components/shared-components/notification/notification';
-  import AssetGrid from '$lib/components/timeline/base-components/base-timeline.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';
@@ -116,14 +116,14 @@
      </HStack>
    {/snippet}

-    <AssetGrid enableRouting={true} {timelineManager} {assetInteraction} onEscape={handleEscape}>
+    <Timeline 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}
-    </AssetGrid>
+    </Timeline>
  </UserPageLayout>
 {/if}