refactor(web): rename DayGroup/MonthGroup to TimelineDay/TimelineMonth

- Rename classes: DayGroup → TimelineDay, MonthGroup → TimelineMonth - Use short variable names: dayGroup → day, monthGroup → month - Update all method names and properties for consistency - Convert relative imports to $lib alias convention No functional changes.
Run ops even if asset no longer matches criteria; add tests
2025-12-07 13:21:02 -08:00 · 2025-11-04 00:40:48 +00:00 · 2025-11-04 00:27:29 +00:00 · 2025-11-02 16:54:57 +00:00 · 2025-11-02 16:54:57 +00:00 · 2025-11-02 16:54:57 +00:00
39 changed files with 918 additions and 716 deletions
--- a/web/src/lib/components/album-page/album-viewer.svelte
+++ b/web/src/lib/components/album-page/album-viewer.svelte
@@ -6,7 +6,7 @@
  import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
  import Timeline from '$lib/components/timeline/Timeline.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { dragAndDropFilesStore } from '$lib/stores/drag-and-drop-files.store';
--- a/web/src/lib/components/timeline/Scrubber.svelte
+++ b/web/src/lib/components/timeline/Scrubber.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import type { ScrubberMonth, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
  import { mobileDevice } from '$lib/stores/mobile-device.svelte';
  import { getTabbable } from '$lib/utils/focus-util';
@@ -91,7 +91,7 @@
    scrubberWidth = usingMobileDevice ? MOBILE_WIDTH : DESKTOP_WIDTH;
  });

-  const toScrollFromMonthGroupPercentage = (
+  const toScrollFromMonthPercentage = (
    scrubberMonth: ViewportTopMonth,
    scrubberMonthPercent: number,
    scrubOverallPercent: number,
@@ -124,7 +124,7 @@
    }
  };
  const scrollY = $derived(
-    toScrollFromMonthGroupPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
+    toScrollFromMonthPercentage(viewportTopMonth, viewportTopMonthScrollPercent, timelineScrollPercent),
  );
  const timelineFullHeight = $derived(timelineManager.scrubberTimelineHeight);
  const relativeTopOffset = $derived(toScrollY(timelineTopOffset / timelineFullHeight));
@@ -280,12 +280,12 @@
      const boundingClientRect = bestElement.boundingClientRect;
      const sy = boundingClientRect.y;
      const relativeY = y - sy;
-      const monthGroupPercentY = relativeY / boundingClientRect.height;
+      const monthPercentY = relativeY / boundingClientRect.height;
      return {
        isOnPaddingTop: false,
        isOnPaddingBottom: false,
        segment,
-        monthGroupPercentY,
+        monthPercentY,
      };
    }

@@ -308,7 +308,7 @@
      isOnPaddingTop,
      isOnPaddingBottom,
      segment: undefined,
-      monthGroupPercentY: 0,
+      monthPercentY: 0,
    };
  };

@@ -327,7 +327,7 @@
    const upper = rect?.height - (PADDING_TOP + PADDING_BOTTOM);
    hoverY = clamp(clientY - rect?.top - PADDING_TOP, lower, upper);
    const x = rect!.left + rect!.width / 2;
-    const { segment, monthGroupPercentY, isOnPaddingTop, isOnPaddingBottom } = getActive(x, clientY);
+    const { segment, monthPercentY, isOnPaddingTop, isOnPaddingBottom } = getActive(x, clientY);
    activeSegment = segment;
    isHoverOnPaddingTop = isOnPaddingTop;
    isHoverOnPaddingBottom = isOnPaddingBottom;
@@ -335,7 +335,7 @@
    const scrubData = {
      scrubberMonth: segmentDate,
      overallScrollPercent: toTimelineY(hoverY),
-      scrubberMonthScrollPercent: monthGroupPercentY,
+      scrubberMonthScrollPercent: monthPercentY,
    };
    if (wasDragging === false && isDragging) {
      void startScrub?.(scrubData);
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -2,17 +2,17 @@
  import { afterNavigate, beforeNavigate } from '$app/navigation';
  import { page } from '$app/state';
  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
+  import TimelineKeyboardActions from '$lib/components/timeline/actions/TimelineKeyboardActions.svelte';
  import Scrubber from '$lib/components/timeline/Scrubber.svelte';
  import TimelineAssetViewer from '$lib/components/timeline/TimelineAssetViewer.svelte';
-  import TimelineKeyboardActions from '$lib/components/timeline/actions/TimelineKeyboardActions.svelte';
  import { AssetAction } from '$lib/constants';
  import HotModuleReload from '$lib/elements/HotModuleReload.svelte';
  import Portal from '$lib/elements/Portal.svelte';
  import Skeleton from '$lib/elements/Skeleton.svelte';
-  import type { DayGroup } from '$lib/managers/timeline-manager/day-group.svelte';
  import { isIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
-  import type { MonthGroup } from '$lib/managers/timeline-manager/month-group.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
+  import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
  import type { TimelineAsset, TimelineManagerOptions, ViewportTopMonth } from '$lib/managers/timeline-manager/types';
  import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -58,11 +58,11 @@
    onThumbnailClick?: (
      asset: TimelineAsset,
      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
+      day: TimelineDay,
      onClick: (
        timelineManager: TimelineManager,
        assets: TimelineAsset[],
-        groupTitle: string,
+        dayTitle: string,
        asset: TimelineAsset,
      ) => void,
    ) => void;
@@ -130,10 +130,10 @@
    timelineManager.scrollableElement = scrollableElement;
  });

-  const getAssetPosition = (assetId: string, monthGroup: MonthGroup) => monthGroup.findAssetAbsolutePosition(assetId);
+  const getAssetPosition = (assetId: string, month: TimelineMonth) => month.findAssetAbsolutePosition(assetId);

-  const scrollToAssetPosition = (assetId: string, monthGroup: MonthGroup) => {
-    const position = getAssetPosition(assetId, monthGroup);
+  const scrollToAssetPosition = (assetId: string, month: TimelineMonth) => {
+    const position = getAssetPosition(assetId, month);

    if (!position) {
      return;
@@ -176,20 +176,20 @@
  };

  const scrollAndLoadAsset = async (assetId: string) => {
-    const monthGroup = await timelineManager.findMonthGroupForAsset(assetId);
-    if (!monthGroup) {
+    const month = await timelineManager.findMonthForAsset(assetId);
+    if (!month) {
      return false;
    }
-    scrollToAssetPosition(assetId, monthGroup);
+    scrollToAssetPosition(assetId, month);
    return true;
  };

  const scrollToAsset = (asset: TimelineAsset) => {
-    const monthGroup = timelineManager.getMonthGroupByAssetId(asset.id);
-    if (!monthGroup) {
+    const month = timelineManager.getMonthByAssetId(asset.id);
+    if (!month) {
      return false;
    }
-    scrollToAssetPosition(asset.id, monthGroup);
+    scrollToAssetPosition(asset.id, month);
    return true;
  };

@@ -264,10 +264,10 @@
    }
  });

-  const scrollToSegmentPercentage = (segmentTop: number, segmentHeight: number, monthGroupScrollPercent: number) => {
+  const scrollToSegmentPercentage = (segmentTop: number, segmentHeight: number, monthScrollPercent: number) => {
    const topOffset = segmentTop;
    const maxScrollPercent = timelineManager.maxScrollPercent;
-    const delta = segmentHeight * monthGroupScrollPercent;
+    const delta = segmentHeight * monthScrollPercent;
    const scrollToTop = (topOffset + delta) * maxScrollPercent;

    timelineManager.scrollTo(scrollToTop);
@@ -296,13 +296,13 @@
        scrubberMonthScrollPercent,
      );
    } else {
-      const monthGroup = timelineManager.months.find(
+      const month = timelineManager.months.find(
        ({ yearMonth: { year, month } }) => year === scrubberMonth.year && month === scrubberMonth.month,
      );
-      if (!monthGroup) {
+      if (!month) {
        return;
      }
-      scrollToSegmentPercentage(monthGroup.top, monthGroup.height, scrubberMonthScrollPercent);
+      scrollToSegmentPercentage(month.top, month.height, scrubberMonthScrollPercent);
    }
  };

@@ -327,28 +327,28 @@

      const monthsLength = timelineManager.months.length;
      for (let i = -1; i < monthsLength + 1; i++) {
-        let monthGroup: ViewportTopMonth;
-        let monthGroupHeight = 0;
+        let month: ViewportTopMonth;
+        let monthHeight = 0;
        if (i === -1) {
          // lead-in
-          monthGroup = 'lead-in';
-          monthGroupHeight = timelineManager.topSectionHeight;
+          month = 'lead-in';
+          monthHeight = timelineManager.topSectionHeight;
        } else if (i === monthsLength) {
          // lead-out
-          monthGroup = 'lead-out';
-          monthGroupHeight = timelineManager.bottomSectionHeight;
+          month = 'lead-out';
+          monthHeight = timelineManager.bottomSectionHeight;
        } else {
-          monthGroup = timelineManager.months[i].yearMonth;
-          monthGroupHeight = timelineManager.months[i].height;
+          month = timelineManager.months[i].yearMonth;
+          monthHeight = timelineManager.months[i].height;
        }

-        let next = top - monthGroupHeight * maxScrollPercent;
+        let next = top - monthHeight * maxScrollPercent;
        // instead of checking for < 0, add a little wiggle room for subpixel resolution
-        if (next < -1 && monthGroup) {
-          viewportTopMonth = monthGroup;
+        if (next < -1 && month) {
+          viewportTopMonth = month;

          // allowing next to be at least 1 may cause percent to go negative, so ensure positive percentage
-          viewportTopMonthScrollPercent = Math.max(0, top / (monthGroupHeight * maxScrollPercent));
+          viewportTopMonthScrollPercent = Math.max(0, top / (monthHeight * maxScrollPercent));

          // compensate for lost precision/rounding errors advance to the next bucket, if present
          if (viewportTopMonthScrollPercent > 0.9999 && i + 1 < monthsLength - 1) {
@@ -442,8 +442,8 @@
    assetInteraction.clearAssetSelectionCandidates();

    if (assetInteraction.assetSelectionStart && rangeSelection) {
-      let startBucket = timelineManager.getMonthGroupByAssetId(assetInteraction.assetSelectionStart.id);
-      let endBucket = timelineManager.getMonthGroupByAssetId(asset.id);
+      let startBucket = timelineManager.getMonthByAssetId(assetInteraction.assetSelectionStart.id);
+      let endBucket = timelineManager.getMonthByAssetId(asset.id);

      if (startBucket === null || endBucket === null) {
        return;
@@ -451,13 +451,13 @@

      // Select/deselect assets in range (start,end)
      let started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === endBucket) {
+      for (const month of timelineManager.months) {
+        if (month === endBucket) {
          break;
        }
        if (started) {
-          await timelineManager.loadMonthGroup(monthGroup.yearMonth);
-          for (const asset of monthGroup.assetsIterator()) {
+          await timelineManager.loadMonth(month.yearMonth);
+          for (const asset of month.assetsIterator()) {
            if (deselect) {
              assetInteraction.removeAssetFromMultiselectGroup(asset.id);
            } else {
@@ -465,29 +465,29 @@
            }
          }
        }
-        if (monthGroup === startBucket) {
+        if (month === startBucket) {
          started = true;
        }
      }

      // Update date group selection in range [start,end]
      started = false;
-      for (const monthGroup of timelineManager.months) {
-        if (monthGroup === startBucket) {
+      for (const month of timelineManager.months) {
+        if (month === 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);
+          for (const day of month.days) {
+            const dayTitle = day.dayTitle;
+            if (day.getAssets().every((a) => assetInteraction.hasSelectedAsset(a.id))) {
+              assetInteraction.addGroupToMultiselectGroup(dayTitle);
            } else {
-              assetInteraction.removeGroupFromMultiselectGroup(dayGroupTitle);
+              assetInteraction.removeGroupFromMultiselectGroup(dayTitle);
            }
          }
        }
-        if (monthGroup === endBucket) {
+        if (month === endBucket) {
          break;
        }
      }
@@ -531,7 +531,7 @@
  $effect(() => {
    if ($showAssetViewer) {
      const { localDateTime } = getTimes($viewingAsset.fileCreatedAt, DateTime.local().offset / 60);
-      void timelineManager.loadMonthGroup({ year: localDateTime.year, month: localDateTime.month });
+      void timelineManager.loadMonth({ year: localDateTime.year, month: localDateTime.month });
    }
  });
 </script>
@@ -622,23 +622,23 @@
      {/if}
    </section>

-    {#each timelineManager.months as monthGroup (monthGroup.viewId)}
-      {@const display = monthGroup.intersecting}
-      {@const absoluteHeight = monthGroup.top}
+    {#each timelineManager.months as month (month.viewId)}
+      {@const display = month.intersecting}
+      {@const absoluteHeight = month.top}

-      {#if !monthGroup.isLoaded}
+      {#if !month.isLoaded}
        <div
-          style:height={monthGroup.height + 'px'}
+          style:height={month.height + 'px'}
          style:position="absolute"
          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
          style:width="100%"
        >
-          <Skeleton {invisible} height={monthGroup.height} title={monthGroup.monthGroupTitle} />
+          <Skeleton {invisible} height={month.height} title={month.monthTitle} />
        </div>
      {:else if display}
        <div
          class="month-group"
-          style:height={monthGroup.height + 'px'}
+          style:height={month.height + 'px'}
          style:position="absolute"
          style:transform={`translate3d(0,${absoluteHeight}px,0)`}
          style:width="100%"
@@ -650,7 +650,7 @@
            {timelineManager}
            {isSelectionMode}
            {singleSelect}
-            {monthGroup}
+            {month}
            onSelect={({ title, assets }) => handleGroupSelect(timelineManager, title, assets)}
            onSelectAssetCandidates={handleSelectAssetCandidates}
            onSelectAssets={handleSelectAssets}
--- a/web/src/lib/components/timeline/TimelineAssetViewer.svelte
+++ b/web/src/lib/components/timeline/TimelineAssetViewer.svelte
@@ -2,7 +2,7 @@
  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 { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { updateStackedAssetInTimeline, updateUnstackedAssetInTimeline } from '$lib/utils/actions';
  import { navigate } from '$lib/utils/navigation';
@@ -110,13 +110,9 @@
      case AssetAction.ARCHIVE:
      case AssetAction.UNARCHIVE:
      case AssetAction.FAVORITE:
-      case AssetAction.UNFAVORITE: {
-        timelineManager.updateAssets([action.asset]);
-        break;
-      }
-
+      case AssetAction.UNFAVORITE:
      case AssetAction.ADD: {
-        timelineManager.addAssets([action.asset]);
+        timelineManager.upsertAssets([action.asset]);
        break;
      }

@@ -135,7 +131,7 @@
        break;
      }
      case AssetAction.REMOVE_ASSET_FROM_STACK: {
-        timelineManager.addAssets([toTimelineAsset(action.asset)]);
+        timelineManager.upsertAssets([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(
--- a/web/src/lib/components/timeline/TimelineDateGroup.svelte
+++ b/web/src/lib/components/timeline/TimelineDateGroup.svelte
@@ -1,19 +1,17 @@
 <script lang="ts">
  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.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 { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
+  import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.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 { Icon } from '@immich/ui';
+  import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
  import { type Snippet } from 'svelte';
  import { flip } from 'svelte/animate';
  import { scale } from 'svelte/transition';
@@ -25,7 +23,7 @@
    singleSelect: boolean;
    withStacked: boolean;
    showArchiveIcon: boolean;
-    monthGroup: MonthGroup;
+    month: TimelineMonth;
    timelineManager: TimelineManager;
    assetInteraction: AssetInteraction;
    customLayout?: Snippet<[TimelineAsset]>;
@@ -36,11 +34,11 @@
    onThumbnailClick?: (
      asset: TimelineAsset,
      timelineManager: TimelineManager,
-      dayGroup: DayGroup,
+      day: TimelineDay,
      onClick: (
        timelineManager: TimelineManager,
        assets: TimelineAsset[],
-        groupTitle: string,
+        dayTitle: string,
        asset: TimelineAsset,
      ) => void,
    ) => void;
@@ -51,7 +49,7 @@
    singleSelect,
    withStacked,
    showArchiveIcon,
-    monthGroup = $bindable(),
+    month = $bindable(),
    assetInteraction,
    timelineManager,
    customLayout,
@@ -63,20 +61,18 @@
  }: Props = $props();

  let isMouseOverGroup = $state(false);
-  let hoveredDayGroup = $state();
+  let hoveredDay = $state();

-  const transitionDuration = $derived.by(() =>
-    monthGroup.timelineManager.suspendTransitions && !$isUploading ? 0 : 150,
-  );
+  const transitionDuration = $derived.by(() => (month.timelineManager.suspendTransitions && !$isUploading ? 0 : 150));
  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
  const _onClick = (
    timelineManager: TimelineManager,
    assets: TimelineAsset[],
-    groupTitle: string,
+    dayTitle: string,
    asset: TimelineAsset,
  ) => {
    if (isSelectionMode || assetInteraction.selectionActive) {
-      assetSelectHandler(timelineManager, asset, assets, groupTitle);
+      assetSelectHandler(timelineManager, asset, assets, dayTitle);
      return;
    }
    void navigate({ targetRoute: 'current', assetId: asset.id });
@@ -87,21 +83,19 @@
  const assetSelectHandler = (
    timelineManager: TimelineManager,
    asset: TimelineAsset,
-    assetsInDayGroup: TimelineAsset[],
-    groupTitle: string,
+    assetsInDay: TimelineAsset[],
+    dayTitle: 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;
+    let selectedAssetsInDayCount = assetsInDay.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);
+    if (selectedAssetsInDayCount == assetsInDay.length) {
+      assetInteraction.addGroupToMultiselectGroup(dayTitle);
    } else {
-      assetInteraction.removeGroupFromMultiselectGroup(groupTitle);
+      assetInteraction.removeGroupFromMultiselectGroup(dayTitle);
    }

    if (timelineManager.assetCount == assetInteraction.selectedAssets.length) {
@@ -111,9 +105,9 @@
    }
  };

-  const assetMouseEventHandler = (groupTitle: string, asset: TimelineAsset | null) => {
+  const assetMouseEventHandler = (dayTitle: string, asset: TimelineAsset | null) => {
    // Show multi select icon on hover on date group
-    hoveredDayGroup = groupTitle;
+    hoveredDay = dayTitle;

    if (assetInteraction.selectionActive) {
      onSelectAssetCandidates(asset);
@@ -124,52 +118,52 @@
    return intersectable.filter((int) => int.intersecting);
  }

-  const getDayGroupFullDate = (dayGroup: DayGroup): string => {
-    const { month, year } = dayGroup.monthGroup.yearMonth;
+  const getDayFullDate = (day: TimelineDay): string => {
+    const { month, year } = day.month.yearMonth;
    const date = fromTimelinePlainDate({
      year,
      month,
-      day: dayGroup.day,
+      day: day.day,
    });
    return getDateLocaleString(date);
  };
 </script>

-{#each filterIntersecting(monthGroup.dayGroups) as dayGroup, groupIndex (dayGroup.day)}
-  {@const absoluteWidth = dayGroup.left}
+{#each filterIntersecting(month.days) as day, groupIndex (day.day)}
+  {@const absoluteWidth = day.left}

  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <section
    class={[
-      { 'transition-all': !monthGroup.timelineManager.suspendTransitions },
-      !monthGroup.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
+      { 'transition-all': !month.timelineManager.suspendTransitions },
+      !month.timelineManager.suspendTransitions && `delay-${transitionDuration}`,
    ]}
    data-group
    style:position="absolute"
-    style:transform={`translate3d(${absoluteWidth}px,${dayGroup.top}px,0)`}
+    style:transform={`translate3d(${absoluteWidth}px,${day.top}px,0)`}
    onmouseenter={() => {
      isMouseOverGroup = true;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
+      assetMouseEventHandler(day.dayTitle, null);
    }}
    onmouseleave={() => {
      isMouseOverGroup = false;
-      assetMouseEventHandler(dayGroup.groupTitle, null);
+      assetMouseEventHandler(day.dayTitle, 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'}
+      style:width={day.width + 'px'}
    >
      {#if !singleSelect}
        <div
          class="hover:cursor-pointer transition-all duration-200 ease-out overflow-hidden w-0"
-          class:w-8={(hoveredDayGroup === dayGroup.groupTitle && isMouseOverGroup) ||
-            assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
-          onclick={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
-          onkeydown={() => handleSelectGroup(dayGroup.groupTitle, assetsSnapshot(dayGroup.getAssets()))}
+          class:w-8={(hoveredDay === day.dayTitle && isMouseOverGroup) ||
+            assetInteraction.selectedGroup.has(day.dayTitle)}
+          onclick={() => handleSelectGroup(day.dayTitle, assetsSnapshot(day.getAssets()))}
+          onkeydown={() => handleSelectGroup(day.dayTitle, assetsSnapshot(day.getAssets()))}
        >
-          {#if assetInteraction.selectedGroup.has(dayGroup.groupTitle)}
+          {#if assetInteraction.selectedGroup.has(day.dayTitle)}
            <Icon icon={mdiCheckCircle} size="24" class="text-primary" />
          {:else}
            <Icon icon={mdiCircleOutline} size="24" color="#757575" />
@@ -177,19 +171,14 @@
        </div>
      {/if}

-      <span class="w-full truncate first-letter:capitalize" title={getDayGroupFullDate(dayGroup)}>
-        {dayGroup.groupTitle}
+      <span class="w-full truncate first-letter:capitalize" title={getDayFullDate(day)}>
+        {day.dayTitle}
      </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)}
+    <div data-image-grid class="relative overflow-clip" style:height={day.height + 'px'} style:width={day.width + 'px'}>
+      {#each filterIntersecting(day.viewerAssets) as viewerAsset (viewerAsset.id)}
        {@const position = viewerAsset.position!}
        {@const asset = viewerAsset.asset!}

@@ -212,17 +201,17 @@
            {groupIndex}
            onClick={(asset) => {
              if (typeof onThumbnailClick === 'function') {
-                onThumbnailClick(asset, timelineManager, dayGroup, _onClick);
+                onThumbnailClick(asset, timelineManager, day, _onClick);
              } else {
-                _onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+                _onClick(timelineManager, day.getAssets(), day.dayTitle, asset);
              }
            }}
-            onSelect={(asset) => assetSelectHandler(timelineManager, asset, dayGroup.getAssets(), dayGroup.groupTitle)}
-            onMouseEvent={() => assetMouseEventHandler(dayGroup.groupTitle, assetSnapshot(asset))}
+            onSelect={(asset) => assetSelectHandler(timelineManager, asset, day.getAssets(), day.dayTitle)}
+            onMouseEvent={() => assetMouseEventHandler(day.dayTitle, assetSnapshot(asset))}
            selected={assetInteraction.hasSelectedAsset(asset.id) ||
-              dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
+              day.month.timelineManager.albumAssets.has(asset.id)}
            selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
-            disabled={dayGroup.monthGroup.timelineManager.albumAssets.has(asset.id)}
+            disabled={day.month.timelineManager.albumAssets.has(asset.id)}
            thumbnailWidth={position.width}
            thumbnailHeight={position.height}
          />
--- a/web/src/lib/components/timeline/actions/SelectAllAction.svelte
+++ b/web/src/lib/components/timeline/actions/SelectAllAction.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
  import { cancelMultiselect, selectAllAssets } from '$lib/utils/asset-utils';
--- a/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
+++ b/web/src/lib/components/timeline/actions/TimelineKeyboardActions.svelte
@@ -7,7 +7,7 @@
    setFocusTo as setFocusToInit,
  } from '$lib/components/timeline/actions/focus-actions';
  import { AppRoute } from '$lib/constants';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
  import NavigateToDateModal from '$lib/modals/NavigateToDateModal.svelte';
  import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
@@ -46,7 +46,7 @@
      !(isTrashEnabled && !force),
      (assetIds) => timelineManager.removeAssets(assetIds),
      assetInteraction.selectedAssets,
-      !isTrashEnabled || force ? undefined : (assets) => timelineManager.addAssets(assets),
+      !isTrashEnabled || force ? undefined : (assets) => timelineManager.upsertAssets(assets),
    );
    assetInteraction.clearMultiselect();
  };
--- a/web/src/lib/components/timeline/actions/focus-actions.ts
+++ b/web/src/lib/components/timeline/actions/focus-actions.ts
@@ -1,4 +1,4 @@
-import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { moveFocus } from '$lib/utils/focus-util';
 import { InvocationTracker } from '$lib/utils/invocationTracker';
--- a/web/src/lib/managers/VirtualScrollManager/ScrollSegment.svelte.ts
+++ b/web/src/lib/managers/VirtualScrollManager/ScrollSegment.svelte.ts
@@ -0,0 +1 @@
+export class ScrollSegment {}
--- a/web/src/lib/managers/timeline-manager/TimelineDay.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/TimelineDay.svelte.ts
@@ -1,18 +1,16 @@
-import { AssetOrder } from '@immich/sdk';
-
+import { onCreateDay } from '$lib/managers/timeline-manager/internal/TestHooks.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
+import type { AssetOperation, Direction, TimelineAsset } from '$lib/managers/timeline-manager/types';
+import { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
 import type { CommonLayoutOptions } from '$lib/utils/layout-utils';
 import { getJustifiedLayoutFromAssets } from '$lib/utils/layout-utils';
 import { plainDateTimeCompare } from '$lib/utils/timeline-util';
+import { AssetOrder } from '@immich/sdk';

-import { SvelteSet } from 'svelte/reactivity';
-import type { MonthGroup } from './month-group.svelte';
-import type { AssetOperation, Direction, MoveAsset, TimelineAsset } from './types';
-import { ViewerAsset } from './viewer-asset.svelte';
-
-export class DayGroup {
-  readonly monthGroup: MonthGroup;
+export class TimelineDay {
+  readonly month: TimelineMonth;
  readonly index: number;
-  readonly groupTitle: string;
+  readonly dayTitle: string;
  readonly day: number;
  viewerAssets: ViewerAsset[] = $state([]);

@@ -26,11 +24,14 @@ export class DayGroup {
  #col = $state(0);
  #deferredLayout = false;

-  constructor(monthGroup: MonthGroup, index: number, day: number, groupTitle: string) {
+  constructor(month: TimelineMonth, index: number, day: number, dayTitle: string) {
    this.index = index;
-    this.monthGroup = monthGroup;
+    this.month = month;
    this.day = day;
-    this.groupTitle = groupTitle;
+    this.dayTitle = dayTitle;
+    if (import.meta.env.DEV) {
+      onCreateDay(this);
+    }
  }

  get top() {
@@ -104,15 +105,18 @@ export class DayGroup {
  runAssetOperation(ids: Set<string>, operation: AssetOperation) {
    if (ids.size === 0) {
      return {
-        moveAssets: [] as MoveAsset[],
-        processedIds: new SvelteSet<string>(),
+        moveAssets: [] as TimelineAsset[],
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        processedIds: new Set<string>(),
        unprocessedIds: ids,
        changedGeometry: false,
      };
    }
-    const unprocessedIds = new SvelteSet<string>(ids);
-    const processedIds = new SvelteSet<string>();
-    const moveAssets: MoveAsset[] = [];
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const unprocessedIds = new Set<string>(ids);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const processedIds = new Set<string>();
+    const moveAssets: TimelineAsset[] = [];
    let changedGeometry = false;
    for (const assetId of unprocessedIds) {
      const index = this.viewerAssets.findIndex((viewAsset) => viewAsset.id == assetId);
@@ -121,17 +125,24 @@ export class DayGroup {
      }

      const asset = this.viewerAssets[index].asset!;
+      // save old time, pre-mutating operation
      const oldTime = { ...asset.localDateTime };
-      let { remove } = operation(asset);
+      const opResult = operation(asset);
+      let remove = false;
+      if (opResult) {
+        remove = (opResult as { remove: boolean }).remove ?? false;
+      }
      const newTime = asset.localDateTime;
-      if (oldTime.year !== newTime.year || oldTime.month !== newTime.month || oldTime.day !== newTime.day) {
-        const { year, month, day } = newTime;
+      if (
+        !remove &&
+        (oldTime.year !== newTime.year || oldTime.month !== newTime.month || oldTime.day !== newTime.day)
+      ) {
        remove = true;
-        moveAssets.push({ asset, date: { year, month, day } });
+        moveAssets.push(asset);
      }
      unprocessedIds.delete(assetId);
      processedIds.add(assetId);
-      if (remove || this.monthGroup.timelineManager.isExcluded(asset)) {
+      if (remove || this.month.timelineManager.isExcluded(asset)) {
        this.viewerAssets.splice(index, 1);
        changedGeometry = true;
      }
@@ -140,7 +151,7 @@ export class DayGroup {
  }

  layout(options: CommonLayoutOptions, noDefer: boolean) {
-    if (!noDefer && !this.monthGroup.intersecting) {
+    if (!noDefer && !this.month.intersecting) {
      this.#deferredLayout = true;
      return;
    }
@@ -154,7 +165,7 @@ export class DayGroup {
    }
  }

-  get absoluteDayGroupTop() {
-    return this.monthGroup.top + this.#top;
+  get absoluteTop() {
+    return this.month.top + this.#top;
  }
 }
--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.spec.ts
@@ -1,12 +1,16 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import { getMonthGroupByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
+import { getMonthByDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
+import { setTestHooks } from '$lib/managers/timeline-manager/internal/TestHooks.svelte';
+import { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { AbortError } from '$lib/utils';
 import { fromISODateTimeUTCToObject } from '$lib/utils/timeline-util';
-import { type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
+import { AssetVisibility, type AssetResponseDto, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { timelineAssetFactory, toResponseDto } from '@test-data/factories/asset-factory';
 import { tick } from 'svelte';
-import { TimelineManager } from './timeline-manager.svelte';
-import type { TimelineAsset } from './types';
+import type { MockInstance } from 'vitest';

 async function getAssets(timelineManager: TimelineManager) {
  const assets = [];
@@ -94,7 +98,7 @@ describe('TimelineManager', () => {
    });
  });

-  describe('loadMonthGroup', () => {
+  describe('loadMonth', () => {
    let timelineManager: TimelineManager;
    const bucketAssets: Record<string, TimelineAsset[]> = {
      '2024-01-03T00:00:00.000Z': timelineAssetFactory.buildList(1).map((asset) =>
@@ -130,52 +134,52 @@ describe('TimelineManager', () => {
    });

    it('loads a month', async () => {
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
+      await timelineManager.loadMonth({ year: 2024, month: 1 });
      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
    });

    it('ignores invalid months', async () => {
-      await timelineManager.loadMonthGroup({ year: 2023, month: 1 });
+      await timelineManager.loadMonth({ year: 2023, month: 1 });
      expect(sdkMock.getTimeBucket).toBeCalledTimes(0);
    });

    it('cancels month loading', async () => {
-      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!;
-      void timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      const month = getMonthByDate(timelineManager, { year: 2024, month: 1 })!;
+      void timelineManager.loadMonth({ year: 2024, month: 1 });
      const abortSpy = vi.spyOn(month!.loader!.cancelToken!, 'abort');
      month?.cancel();
      expect(abortSpy).toBeCalledTimes(1);
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
+      await timelineManager.loadMonth({ year: 2024, month: 1 });
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(3);
    });

    it('prevents loading months multiple times', async () => {
      await Promise.all([
-        timelineManager.loadMonthGroup({ year: 2024, month: 1 }),
-        timelineManager.loadMonthGroup({ year: 2024, month: 1 }),
+        timelineManager.loadMonth({ year: 2024, month: 1 }),
+        timelineManager.loadMonth({ year: 2024, month: 1 }),
      ]);
      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);

-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      await timelineManager.loadMonth({ year: 2024, month: 1 });
      expect(sdkMock.getTimeBucket).toBeCalledTimes(1);
    });

    it('allows loading a canceled month', async () => {
-      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })!;
-      const loadPromise = timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      const month = getMonthByDate(timelineManager, { year: 2024, month: 1 })!;
+      const loadPromise = timelineManager.loadMonth({ year: 2024, month: 1 });

      month.cancel();
      await loadPromise;
      expect(month?.getAssets().length).toEqual(0);

-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
+      await timelineManager.loadMonth({ year: 2024, month: 1 });
      expect(month!.getAssets().length).toEqual(3);
    });
  });

-  describe('addAssets', () => {
+  describe('upsertAssets', () => {
    let timelineManager: TimelineManager;

    beforeEach(async () => {
@@ -196,7 +200,7 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
        }),
      );
-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);

      expect(timelineManager.months.length).toEqual(1);
      expect(timelineManager.assetCount).toEqual(1);
@@ -212,8 +216,8 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
        })
        .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.addAssets([assetOne]);
-      timelineManager.addAssets([assetTwo]);
+      timelineManager.upsertAssets([assetOne]);
+      timelineManager.upsertAssets([assetTwo]);

      expect(timelineManager.months.length).toEqual(1);
      expect(timelineManager.assetCount).toEqual(2);
@@ -238,9 +242,9 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-16T12:00:00.000Z'),
        }),
      );
-      timelineManager.addAssets([assetOne, assetTwo, assetThree]);
+      timelineManager.upsertAssets([assetOne, assetTwo, assetThree]);

-      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });
+      const month = getMonthByDate(timelineManager, { year: 2024, month: 1 });
      expect(month).not.toBeNull();
      expect(month?.getAssets().length).toEqual(3);
      expect(month?.getAssets()[0].id).toEqual(assetOne.id);
@@ -264,7 +268,7 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2023-01-20T12:00:00.000Z'),
        }),
      );
-      timelineManager.addAssets([assetOne, assetTwo, assetThree]);
+      timelineManager.upsertAssets([assetOne, assetTwo, assetThree]);

      expect(timelineManager.months.length).toEqual(3);
      expect(timelineManager.months[0].yearMonth.year).toEqual(2024);
@@ -278,11 +282,11 @@ describe('TimelineManager', () => {
    });

    it('updates existing asset', () => {
-      const updateAssetsSpy = vi.spyOn(timelineManager, 'updateAssets');
+      const updateAssetsSpy = vi.spyOn(timelineManager, 'upsertAssets');
      const asset = deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build());
-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);

-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);
      expect(updateAssetsSpy).toBeCalledWith([asset]);
      expect(timelineManager.assetCount).toEqual(1);
    });
@@ -294,12 +298,128 @@ describe('TimelineManager', () => {

      const timelineManager = new TimelineManager();
      await timelineManager.updateOptions({ isTrashed: true });
-      timelineManager.addAssets([asset, trashedAsset]);
+      timelineManager.upsertAssets([asset, trashedAsset]);
      expect(await getAssets(timelineManager)).toEqual([trashedAsset]);
    });
  });

-  describe('updateAssets', () => {
+  describe('ensure efficient timeline operations', () => {
+    let timelineManager: TimelineManager;
+
+    let month1day1asset1: TimelineAsset,
+      month1day2asset1: TimelineAsset,
+      month1day2asset2: TimelineAsset,
+      month1day3asset1: TimelineAsset,
+      month2day1asset1: TimelineAsset,
+      month2day2asset1: TimelineAsset,
+      month2day2asset2: TimelineAsset;
+
+    type DayMocks = {
+      layoutFn: MockInstance;
+      sortAssetsFn: MockInstance;
+    };
+    type MonthMocks = {
+      sortDaysFn: MockInstance;
+    };
+
+    const days = new Map<TimelineDay, DayMocks>();
+    const months = new Map<TimelineMonth, MonthMocks>();
+
+    beforeEach(async () => {
+      timelineManager = new TimelineManager();
+      setTestHooks({
+        onCreateDay: (day: TimelineDay) => {
+          days.set(day, {
+            layoutFn: vi.spyOn(day, 'layout'),
+            sortAssetsFn: vi.spyOn(day, 'sortAssets'),
+          });
+        },
+        onCreateMonth: (month: TimelineMonth) => {
+          months.set(month, {
+            sortDaysFn: vi.spyOn(month, 'sortDays'),
+          });
+        },
+      });
+      sdkMock.getTimeBuckets.mockResolvedValue([]);
+      month1day1asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
+        }),
+      );
+      month1day2asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-15T12:00:00.000Z'),
+        }),
+      );
+      month1day2asset2 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-15T13:00:00.000Z'),
+        }),
+      );
+      month1day3asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-16T12:00:00.000Z'),
+        }),
+      );
+      month2day1asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-16T12:00:00.000Z'),
+        }),
+      );
+      month2day2asset1 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-18T12:00:00.000Z'),
+        }),
+      );
+      month2day2asset2 = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-18T13:00:00.000Z'),
+        }),
+      );
+
+      await timelineManager.updateViewport({ width: 1588, height: 1000 });
+      timelineManager.upsertAssets([
+        month1day1asset1,
+        month1day2asset1,
+        month1day2asset2,
+        month1day3asset1,
+        month2day1asset1,
+        month2day2asset1,
+        month2day2asset2,
+      ]);
+      vitest.resetAllMocks();
+    });
+    it.skip('Not Ready Yet - optimizations not complete: moving asset between months only sorts/layout the affected months once', () => {
+      // move from 2024-01-15 to 2024-01-16
+      timelineManager.updateAssetOperation([month1day2asset1.id], (asset) => {
+        asset.localDateTime.day = asset.localDateTime.day + 1;
+      });
+      for (const [day, mocks] of days) {
+        if (day.day === 15 && day.month.yearMonth.month === 1) {
+          // source - should be layout once
+          expect.soft(mocks.layoutFn).toBeCalledTimes(1);
+          expect.soft(mocks.sortAssetsFn).toBeCalledTimes(1);
+        }
+        if (day.day === 16 && day.month.yearMonth.month === 1) {
+          // target - should be layout once
+          expect.soft(mocks.layoutFn).toBeCalledTimes(1);
+          expect.soft(mocks.sortAssetsFn).toBeCalledTimes(1);
+        }
+        // everything else - should not be layed-out
+        expect.soft(mocks.layoutFn).toBeCalledTimes(0);
+        expect.soft(mocks.sortAssetsFn).toBeCalledTimes(0);
+      }
+      for (const [_, mocks] of months) {
+        // if the day itself did not change, probably no need to sort it
+        // in the timeline manager, the day-group identity is immutable - you will never
+        // "move" a whole day to another day - only the assets inside will be moved from
+        // one to the other.
+        expect.soft(mocks.sortDaysFn).toBeCalledTimes(0);
+      }
+    });
+  });
+
+  describe('upsertAssets', () => {
    let timelineManager: TimelineManager;

    beforeEach(async () => {
@@ -309,22 +429,15 @@ describe('TimelineManager', () => {
      await timelineManager.updateViewport({ width: 1588, height: 1000 });
    });

-    it('ignores non-existing assets', () => {
-      timelineManager.updateAssets([deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build())]);
-
-      expect(timelineManager.months.length).toEqual(0);
-      expect(timelineManager.assetCount).toEqual(0);
-    });
-
-    it('updates an asset', () => {
+    it('upserts an asset', () => {
      const asset = deriveLocalDateTimeFromFileCreatedAt(timelineAssetFactory.build({ isFavorite: false }));
      const updatedAsset = { ...asset, isFavorite: true };

-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);
      expect(timelineManager.assetCount).toEqual(1);
      expect(timelineManager.months[0].getFirstAsset().isFavorite).toEqual(false);

-      timelineManager.updateAssets([updatedAsset]);
+      timelineManager.upsertAssets([updatedAsset]);
      expect(timelineManager.assetCount).toEqual(1);
      expect(timelineManager.months[0].getFirstAsset().isFavorite).toEqual(true);
    });
@@ -340,17 +453,80 @@ describe('TimelineManager', () => {
        fileCreatedAt: fromISODateTimeUTCToObject('2024-03-20T12:00:00.000Z'),
      });

-      timelineManager.addAssets([asset]);
+      timelineManager.upsertAssets([asset]);
      expect(timelineManager.months.length).toEqual(1);
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })).not.toBeUndefined();
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(1);
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 1 })).not.toBeUndefined();
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(1);

-      timelineManager.updateAssets([updatedAsset]);
+      timelineManager.upsertAssets([updatedAsset]);
      expect(timelineManager.months.length).toEqual(2);
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })).not.toBeUndefined();
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })).not.toBeUndefined();
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })?.getAssets().length).toEqual(1);
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 1 })).not.toBeUndefined();
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 1 })?.getAssets().length).toEqual(0);
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 3 })).not.toBeUndefined();
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 3 })?.getAssets().length).toEqual(1);
+    });
+
+    it('asset is removed during upsert when TimelineManager if visibility changes', async () => {
+      await timelineManager.updateOptions({
+        visibility: AssetVisibility.Archive,
+      });
+      const fixture = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          visibility: AssetVisibility.Archive,
+        }),
+      );
+
+      timelineManager.upsertAssets([fixture]);
+      expect(timelineManager.assetCount).toEqual(1);
+
+      const updated = Object.freeze({ ...fixture, visibility: AssetVisibility.Timeline });
+      timelineManager.upsertAssets([updated]);
+      expect(timelineManager.assetCount).toEqual(0);
+
+      timelineManager.upsertAssets([{ ...fixture, visibility: AssetVisibility.Archive }]);
+      expect(timelineManager.assetCount).toEqual(1);
+    });
+
+    it('asset is removed during upsert when TimelineManager if isFavorite changes', async () => {
+      await timelineManager.updateOptions({
+        isFavorite: true,
+      });
+      const fixture = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          isFavorite: true,
+        }),
+      );
+
+      timelineManager.upsertAssets([fixture]);
+      expect(timelineManager.assetCount).toEqual(1);
+
+      const updated = Object.freeze({ ...fixture, isFavorite: false });
+      timelineManager.upsertAssets([updated]);
+      expect(timelineManager.assetCount).toEqual(0);
+
+      timelineManager.upsertAssets([{ ...fixture, isFavorite: true }]);
+      expect(timelineManager.assetCount).toEqual(1);
+    });
+
+    it('asset is removed during upsert when TimelineManager if isTrashed changes', async () => {
+      await timelineManager.updateOptions({
+        isTrashed: true,
+      });
+      const fixture = deriveLocalDateTimeFromFileCreatedAt(
+        timelineAssetFactory.build({
+          isTrashed: true,
+        }),
+      );
+
+      timelineManager.upsertAssets([fixture]);
+      expect(timelineManager.assetCount).toEqual(1);
+
+      const updated = Object.freeze({ ...fixture, isTrashed: false });
+      timelineManager.upsertAssets([updated]);
+      expect(timelineManager.assetCount).toEqual(0);
+
+      timelineManager.upsertAssets([{ ...fixture, isTrashed: true }]);
+      expect(timelineManager.assetCount).toEqual(1);
    });
  });

@@ -365,7 +541,7 @@ describe('TimelineManager', () => {
    });

    it('ignores invalid IDs', () => {
-      timelineManager.addAssets(
+      timelineManager.upsertAssets(
        timelineAssetFactory
          .buildList(2, {
            fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
@@ -385,7 +561,7 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
        })
        .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
      timelineManager.removeAssets([assetOne.id]);

      expect(timelineManager.assetCount).toEqual(1);
@@ -399,7 +575,7 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-20T12:00:00.000Z'),
        })
        .map((asset) => deriveLocalDateTimeFromFileCreatedAt(asset));
-      timelineManager.addAssets(assets);
+      timelineManager.upsertAssets(assets);
      timelineManager.removeAssets(assets.map((asset) => asset.id));

      expect(timelineManager.assetCount).toEqual(0);
@@ -431,7 +607,7 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-01-15T12:00:00.000Z'),
        }),
      );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);
      expect(timelineManager.getFirstAsset()).toEqual(assetOne);
    });
  });
@@ -479,8 +655,8 @@ describe('TimelineManager', () => {
    });

    it('returns previous assetId', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 1 });
+      await timelineManager.loadMonth({ year: 2024, month: 1 });
+      const month = getMonthByDate(timelineManager, { year: 2024, month: 1 });

      const a = month!.getAssets()[0];
      const b = month!.getAssets()[1];
@@ -489,11 +665,11 @@ describe('TimelineManager', () => {
    });

    it('returns previous assetId spanning multiple months', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
+      await timelineManager.loadMonth({ year: 2024, month: 2 });
+      await timelineManager.loadMonth({ year: 2024, month: 3 });

-      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 });
-      const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 });
+      const month = getMonthByDate(timelineManager, { year: 2024, month: 2 });
+      const previousMonth = getMonthByDate(timelineManager, { year: 2024, month: 3 });
      const a = month!.getAssets()[0];
      const b = previousMonth!.getAssets()[0];
      const previous = await timelineManager.getLaterAsset(a);
@@ -501,23 +677,23 @@ describe('TimelineManager', () => {
    });

    it('loads previous month', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
-      const month = getMonthGroupByDate(timelineManager, { year: 2024, month: 2 });
-      const previousMonth = getMonthGroupByDate(timelineManager, { year: 2024, month: 3 });
+      await timelineManager.loadMonth({ year: 2024, month: 2 });
+      const month = getMonthByDate(timelineManager, { year: 2024, month: 2 });
+      const previousMonth = getMonthByDate(timelineManager, { year: 2024, month: 3 });
      const a = month!.getFirstAsset();
      const b = previousMonth!.getFirstAsset();
-      const loadMonthGroupSpy = vi.spyOn(month!.loader!, 'execute');
+      const loadMonthSpy = vi.spyOn(month!.loader!, 'execute');
      const previousMonthSpy = vi.spyOn(previousMonth!.loader!, 'execute');
      const previous = await timelineManager.getLaterAsset(a);
      expect(previous).toEqual(b);
-      expect(loadMonthGroupSpy).toBeCalledTimes(0);
+      expect(loadMonthSpy).toBeCalledTimes(0);
      expect(previousMonthSpy).toBeCalledTimes(0);
    });

    it('skips removed assets', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 1 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 2 });
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
+      await timelineManager.loadMonth({ year: 2024, month: 1 });
+      await timelineManager.loadMonth({ year: 2024, month: 2 });
+      await timelineManager.loadMonth({ year: 2024, month: 3 });

      const [assetOne, assetTwo, assetThree] = await getAssets(timelineManager);
      timelineManager.removeAssets([assetTwo.id]);
@@ -525,12 +701,12 @@ describe('TimelineManager', () => {
    });

    it('returns null when no more assets', async () => {
-      await timelineManager.loadMonthGroup({ year: 2024, month: 3 });
+      await timelineManager.loadMonth({ year: 2024, month: 3 });
      expect(await timelineManager.getLaterAsset(timelineManager.months[0].getFirstAsset())).toBeUndefined();
    });
  });

-  describe('getMonthGroupIndexByAssetId', () => {
+  describe('getMonthIndexByAssetId', () => {
    let timelineManager: TimelineManager;

    beforeEach(async () => {
@@ -541,8 +717,8 @@ describe('TimelineManager', () => {
    });

    it('returns null for invalid months', () => {
-      expect(getMonthGroupByDate(timelineManager, { year: -1, month: -1 })).toBeUndefined();
-      expect(getMonthGroupByDate(timelineManager, { year: 2024, month: 3 })).toBeUndefined();
+      expect(getMonthByDate(timelineManager, { year: -1, month: -1 })).toBeUndefined();
+      expect(getMonthByDate(timelineManager, { year: 2024, month: 3 })).toBeUndefined();
    });

    it('returns the month index', () => {
@@ -556,12 +732,12 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-15T12:00:00.000Z'),
        }),
      );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);

-      expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetTwo.id)?.yearMonth.month).toEqual(2);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
+      expect(timelineManager.getMonthByAssetId(assetTwo.id)?.yearMonth.year).toEqual(2024);
+      expect(timelineManager.getMonthByAssetId(assetTwo.id)?.yearMonth.month).toEqual(2);
+      expect(timelineManager.getMonthByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
+      expect(timelineManager.getMonthByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
    });

    it('ignores removed months', () => {
@@ -575,11 +751,11 @@ describe('TimelineManager', () => {
          fileCreatedAt: fromISODateTimeUTCToObject('2024-02-15T12:00:00.000Z'),
        }),
      );
-      timelineManager.addAssets([assetOne, assetTwo]);
+      timelineManager.upsertAssets([assetOne, assetTwo]);

      timelineManager.removeAssets([assetTwo.id]);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
-      expect(timelineManager.getMonthGroupByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
+      expect(timelineManager.getMonthByAssetId(assetOne.id)?.yearMonth.year).toEqual(2024);
+      expect(timelineManager.getMonthByAssetId(assetOne.id)?.yearMonth.month).toEqual(1);
    });
  });

--- a/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/timeline-manager.svelte.ts
@@ -1,29 +1,21 @@
 import { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
 import { authManager } from '$lib/managers/auth-manager.svelte';
-import { updateIntersectionMonthGroup } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
+import { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
+import { GroupInsertionCache } from '$lib/managers/timeline-manager/group-insertion-cache.svelte';
+import { updateIntersectionMonth } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
 import { updateGeometry } from '$lib/managers/timeline-manager/internal/layout-support.svelte';
 import { loadFromTimeBuckets } from '$lib/managers/timeline-manager/internal/load-support.svelte';
-import {
-  addAssetsToMonthGroups,
-  runAssetOperation,
-} from '$lib/managers/timeline-manager/internal/operations-support.svelte';
 import {
  findClosestGroupForDate,
-  findMonthGroupForAsset as findMonthGroupForAssetUtil,
-  findMonthGroupForDate,
+  findMonthForAsset as findMonthForAssetUtil,
+  findMonthForDate,
  getAssetWithOffset,
-  getMonthGroupByDate,
+  getMonthByDate,
  retrieveRange as retrieveRangeUtil,
 } from '$lib/managers/timeline-manager/internal/search-support.svelte';
+import { isMismatched, updateObject } from '$lib/managers/timeline-manager/internal/utils.svelte';
 import { WebsocketSupport } from '$lib/managers/timeline-manager/internal/websocket-support.svelte';
-import { CancellableTask } from '$lib/utils/cancellable-task';
-import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
-import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
-import { clamp, isEqual } from 'lodash-es';
-import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
-import { DayGroup } from './day-group.svelte';
-import { isMismatched, updateObject } from './internal/utils.svelte';
-import { MonthGroup } from './month-group.svelte';
 import type {
  AssetDescriptor,
  AssetOperation,
@@ -32,10 +24,20 @@ import type {
  TimelineAsset,
  TimelineManagerOptions,
  Viewport,
-} from './types';
+} from '$lib/managers/timeline-manager/types';
+import { CancellableTask } from '$lib/utils/cancellable-task';
+import {
+  setDifferenceInPlace,
+  toTimelineAsset,
+  type TimelineDateTime,
+  type TimelineYearMonth,
+} from '$lib/utils/timeline-util';
+import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
+import { clamp, isEqual } from 'lodash-es';
+import { SvelteDate, SvelteSet } from 'svelte/reactivity';

 type ViewportTopMonthIntersection = {
-  month: MonthGroup | undefined;
+  month: TimelineMonth | undefined;
  // Where viewport top intersects month (0 = month top, 1 = month bottom)
  viewportTopRatioInMonth: number;
  // Where month bottom is in viewport (0 = viewport top, 1 = viewport bottom)
@@ -61,7 +63,7 @@ export class TimelineManager extends VirtualScrollManager {
  });

  isInitialized = $state(false);
-  months: MonthGroup[] = $state([]);
+  months: TimelineMonth[] = $state([]);
  albumAssets: Set<string> = new SvelteSet();
  scrubberMonths: ScrubberMonth[] = $state([]);
  scrubberTimelineHeight: number = $state(0);
@@ -111,24 +113,24 @@ export class TimelineManager extends VirtualScrollManager {
  }

  async *assetsIterator(options?: {
-    startMonthGroup?: MonthGroup;
-    startDayGroup?: DayGroup;
+    startMonth?: TimelineMonth;
+    startDay?: TimelineDay;
    startAsset?: TimelineAsset;
    direction?: Direction;
  }) {
    const direction = options?.direction ?? 'earlier';
-    let { startDayGroup, startAsset } = options ?? {};
-    for (const monthGroup of this.monthGroupIterator({ direction, startMonthGroup: options?.startMonthGroup })) {
-      await this.loadMonthGroup(monthGroup.yearMonth, { cancelable: false });
-      yield* monthGroup.assetsIterator({ startDayGroup, startAsset, direction });
-      startDayGroup = startAsset = undefined;
+    let { startDay, startAsset } = options ?? {};
+    for (const month of this.monthIterator({ direction, startMonth: options?.startMonth })) {
+      await this.loadMonth(month.yearMonth, { cancelable: false });
+      yield* month.assetsIterator({ startDay, startAsset, direction });
+      startDay = startAsset = undefined;
    }
  }

-  *monthGroupIterator(options?: { direction?: Direction; startMonthGroup?: MonthGroup }) {
+  *monthIterator(options?: { direction?: Direction; startMonth?: TimelineMonth }) {
    const isEarlier = options?.direction === 'earlier';
-    let startIndex = options?.startMonthGroup
-      ? this.months.indexOf(options.startMonthGroup)
+    let startIndex = options?.startMonth
+      ? this.months.indexOf(options.startMonth)
      : isEarlier
        ? 0
        : this.months.length - 1;
@@ -155,7 +157,7 @@ export class TimelineManager extends VirtualScrollManager {
    this.#websocketSupport = undefined;
  }

-  #calculateMonthBottomViewportRatio(month: MonthGroup | undefined) {
+  #calculateMonthBottomViewportRatio(month: TimelineMonth | undefined) {
    if (!month) {
      return 0;
    }
@@ -165,7 +167,7 @@ export class TimelineManager extends VirtualScrollManager {
    return clamp(bottomOfMonthInViewport / windowHeight, 0, 1);
  }

-  #calculateVewportTopRatioInMonth(month: MonthGroup | undefined) {
+  #calculateVewportTopRatioInMonth(month: TimelineMonth | undefined) {
    if (!month) {
      return 0;
    }
@@ -179,7 +181,7 @@ export class TimelineManager extends VirtualScrollManager {
    this.#updatingIntersections = true;

    for (const month of this.months) {
-      updateIntersectionMonthGroup(this, month);
+      updateIntersectionMonth(this, month);
    }

    const month = this.months.find((month) => month.actuallyIntersecting);
@@ -195,17 +197,17 @@ export class TimelineManager extends VirtualScrollManager {
    this.#updatingIntersections = false;
  }

-  clearDeferredLayout(month: MonthGroup) {
-    const hasDeferred = month.dayGroups.some((group) => group.deferredLayout);
+  clearDeferredLayout(month: TimelineMonth) {
+    const hasDeferred = month.days.some((group) => group.deferredLayout);
    if (hasDeferred) {
      updateGeometry(this, month, { invalidateHeight: true, noDefer: true });
-      for (const group of month.dayGroups) {
+      for (const group of month.days) {
        group.deferredLayout = false;
      }
    }
  }

-  async #initializeMonthGroups() {
+  async #initializeMonths() {
    const timebuckets = await getTimeBuckets({
      ...authManager.params,
      ...this.#options,
@@ -213,10 +215,11 @@ export class TimelineManager extends VirtualScrollManager {

    this.months = timebuckets.map((timeBucket) => {
      const date = new SvelteDate(timeBucket.timeBucket);
-      return new MonthGroup(
+      return new TimelineMonth(
        this,
        { year: date.getUTCFullYear(), month: date.getUTCMonth() + 1 },
        timeBucket.count,
+        false,
        this.#options.order,
      );
    });
@@ -243,7 +246,7 @@ export class TimelineManager extends VirtualScrollManager {
    this.albumAssets.clear();
    await this.initTask.execute(async () => {
      this.#options = options;
-      await this.#initializeMonthGroups();
+      await this.#initializeMonths();
    }, true);
  }

@@ -290,49 +293,49 @@ export class TimelineManager extends VirtualScrollManager {
      assetCount: month.assetsCount,
      year: month.yearMonth.year,
      month: month.yearMonth.month,
-      title: month.monthGroupTitle,
+      title: month.monthTitle,
      height: month.height,
    }));
    this.scrubberTimelineHeight = this.totalViewerHeight;
  }

-  async loadMonthGroup(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }): Promise<void> {
+  async loadMonth(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }): Promise<void> {
    let cancelable = true;
    if (options) {
      cancelable = options.cancelable;
    }
-    const monthGroup = getMonthGroupByDate(this, yearMonth);
-    if (!monthGroup) {
+    const month = getMonthByDate(this, yearMonth);
+    if (!month) {
      return;
    }

-    if (monthGroup.loader?.executed) {
+    if (month.loader?.executed) {
      return;
    }

-    const executionStatus = await monthGroup.loader?.execute(async (signal: AbortSignal) => {
-      await loadFromTimeBuckets(this, monthGroup, this.#options, signal);
+    const executionStatus = await month.loader?.execute(async (signal: AbortSignal) => {
+      await loadFromTimeBuckets(this, month, this.#options, signal);
    }, cancelable);
    if (executionStatus === 'LOADED') {
-      updateGeometry(this, monthGroup, { invalidateHeight: false });
+      updateGeometry(this, month, { invalidateHeight: false });
      this.updateIntersections();
    }
  }

-  addAssets(assets: TimelineAsset[]) {
-    const assetsToUpdate = assets.filter((asset) => !this.isExcluded(asset));
-    const notUpdated = this.updateAssets(assetsToUpdate);
-    addAssetsToMonthGroups(this, [...notUpdated], { order: this.#options.order ?? AssetOrder.Desc });
+  upsertAssets(assets: TimelineAsset[]) {
+    const notUpdated = this.#updateAssets(assets);
+    const notExcluded = notUpdated.filter((asset) => !this.isExcluded(asset));
+    this.addAssetsToSegments(notExcluded);
  }

-  async findMonthGroupForAsset(id: string) {
+  async findMonthForAsset(id: string) {
    if (!this.isInitialized) {
      await this.initTask.waitUntilCompletion();
    }

-    let { monthGroup } = findMonthGroupForAssetUtil(this, id) ?? {};
-    if (monthGroup) {
-      return monthGroup;
+    let { month } = findMonthForAssetUtil(this, id) ?? {};
+    if (month) {
+      return month;
    }

    const response = await getAssetInfo({ ...authManager.params, id }).catch(() => null);
@@ -345,20 +348,20 @@ export class TimelineManager extends VirtualScrollManager {
      return;
    }

-    monthGroup = await this.#loadMonthGroupAtTime(asset.localDateTime, { cancelable: false });
-    if (monthGroup?.findAssetById({ id })) {
-      return monthGroup;
+    month = await this.#loadMonthAtTime(asset.localDateTime, { cancelable: false });
+    if (month?.findAssetById({ id })) {
+      return month;
    }
  }

-  async #loadMonthGroupAtTime(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }) {
-    await this.loadMonthGroup(yearMonth, options);
-    return getMonthGroupByDate(this, yearMonth);
+  async #loadMonthAtTime(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }) {
+    await this.loadMonth(yearMonth, options);
+    return getMonthByDate(this, yearMonth);
  }

-  getMonthGroupByAssetId(assetId: string) {
-    const monthGroupInfo = findMonthGroupForAssetUtil(this, assetId);
-    return monthGroupInfo?.monthGroup;
+  getMonthByAssetId(assetId: string) {
+    const monthInfo = findMonthForAssetUtil(this, assetId);
+    return monthInfo?.month;
  }

  // note: the `index` input is expected to be in the range [0, assetCount). This
@@ -369,7 +372,7 @@ export class TimelineManager extends VirtualScrollManager {

    let accumulatedCount = 0;

-    let randomMonth: MonthGroup | undefined = undefined;
+    let randomMonth: TimelineMonth | undefined = undefined;
    for (const month of this.months) {
      if (randomAssetIndex < accumulatedCount + month.assetsCount) {
        randomMonth = month;
@@ -381,10 +384,10 @@ export class TimelineManager extends VirtualScrollManager {
    if (!randomMonth) {
      return;
    }
-    await this.loadMonthGroup(randomMonth.yearMonth, { cancelable: false });
+    await this.loadMonth(randomMonth.yearMonth, { cancelable: false });

-    let randomDay: DayGroup | undefined = undefined;
-    for (const day of randomMonth.dayGroups) {
+    let randomDay: TimelineDay | undefined = undefined;
+    for (const day of randomMonth.days) {
      if (randomAssetIndex < accumulatedCount + day.viewerAssets.length) {
        randomDay = day;
        break;
@@ -399,38 +402,112 @@ export class TimelineManager extends VirtualScrollManager {
    return randomDay.viewerAssets[randomAssetIndex - accumulatedCount].asset;
  }

+  /**
+   * Executes the given operation against every passed in asset id.
+   *
+   * @returns An object with the changed ids, unprocessed ids, and if this resulted
+   * in changes of the timeline geometry.
+   */
  updateAssetOperation(ids: string[], operation: AssetOperation) {
-    runAssetOperation(this, new SvelteSet(ids), operation, { order: this.#options.order ?? AssetOrder.Desc });
+    return this.#runAssetOperation(ids, operation);
  }

-  updateAssets(assets: TimelineAsset[]) {
-    const lookup = new SvelteMap<string, TimelineAsset>(assets.map((asset) => [asset.id, asset]));
-    const { unprocessedIds } = runAssetOperation(
-      this,
-      new SvelteSet(lookup.keys()),
-      (asset) => {
-        updateObject(asset, lookup.get(asset.id));
-        return { remove: false };
-      },
-      { order: this.#options.order ?? AssetOrder.Desc },
-    );
+  /**
+   * Looks up the specified asset from the TimelineAsset using its id, and then updates the
+   * existing object to match the rest of the TimelineAsset parameter.
+
+   * @returns list of assets that were updated (not found)
+   */
+  #updateAssets(updatedAssets: TimelineAsset[]) {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const lookup = new Map<string, TimelineAsset>();
+    const ids = [];
+    for (const asset of updatedAssets) {
+      ids.push(asset.id);
+      lookup.set(asset.id, asset);
+    }
+    const { unprocessedIds } = this.#runAssetOperation(ids, (asset) => updateObject(asset, lookup.get(asset.id)));
    const result: TimelineAsset[] = [];
-    for (const id of unprocessedIds.values()) {
+    for (const id of unprocessedIds) {
      result.push(lookup.get(id)!);
    }
    return result;
  }

  removeAssets(ids: string[]) {
-    const { unprocessedIds } = runAssetOperation(
-      this,
-      new SvelteSet(ids),
-      () => {
-        return { remove: true };
-      },
-      { order: this.#options.order ?? AssetOrder.Desc },
-    );
-    return [...unprocessedIds];
+    this.#runAssetOperation(ids, () => ({ remove: true }));
+  }
+
+  protected createUpsertContext(): GroupInsertionCache {
+    return new GroupInsertionCache();
+  }
+
+  protected upsertAssetIntoSegment(asset: TimelineAsset, context: GroupInsertionCache): void {
+    let month = getMonthByDate(this, asset.localDateTime);
+
+    if (!month) {
+      month = new TimelineMonth(this, asset.localDateTime, 1, true, this.#options.order);
+      this.months.push(month);
+    }
+
+    month.addTimelineAsset(asset, context);
+  }
+
+  protected addAssetsToSegments(assets: TimelineAsset[]) {
+    if (assets.length === 0) {
+      return;
+    }
+    const context = this.createUpsertContext();
+    const monthCount = this.months.length;
+    for (const asset of assets) {
+      this.upsertAssetIntoSegment(asset, context);
+    }
+    if (this.months.length !== monthCount) {
+      this.postCreateSegments();
+    }
+    this.postUpsert(context);
+    this.updateIntersections();
+  }
+
+  #runAssetOperation(ids: string[], operation: AssetOperation) {
+    if (ids.length === 0) {
+      // eslint-disable-next-line svelte/prefer-svelte-reactivity
+      return { processedIds: new Set<string>(), unprocessedIds: new Set<string>(), changedGeometry: false };
+    }
+
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const changedMonths = new Set<TimelineMonth>();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsToProcess = new Set(ids);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsProcessed = new Set<string>();
+    const combinedMoveAssets: TimelineAsset[] = [];
+    for (const month of this.months) {
+      if (idsToProcess.size > 0) {
+        const { moveAssets, processedIds, changedGeometry } = month.runAssetOperation(idsToProcess, operation);
+        if (moveAssets.length > 0) {
+          combinedMoveAssets.push(...moveAssets);
+        }
+        setDifferenceInPlace(idsToProcess, processedIds);
+        for (const id of processedIds) {
+          idsProcessed.add(id);
+        }
+        if (changedGeometry) {
+          changedMonths.add(month);
+        }
+      }
+    }
+    if (combinedMoveAssets.length > 0) {
+      this.addAssetsToSegments(combinedMoveAssets);
+    }
+    const changedGeometry = changedMonths.size > 0;
+    for (const month of changedMonths) {
+      updateGeometry(this, month, { invalidateHeight: true });
+    }
+    if (changedGeometry) {
+      this.updateIntersections();
+    }
+    return { unprocessedIds: idsToProcess, processedIds: idsProcessed, changedGeometry };
  }

  override refreshLayout() {
@@ -459,20 +536,20 @@ export class TimelineManager extends VirtualScrollManager {
  }

  async getClosestAssetToDate(dateTime: TimelineDateTime) {
-    let monthGroup = findMonthGroupForDate(this, dateTime);
-    if (!monthGroup) {
+    let month = findMonthForDate(this, dateTime);
+    if (!month) {
      // if exact match not found, find closest
-      monthGroup = findClosestGroupForDate(this.months, dateTime);
-      if (!monthGroup) {
+      month = findClosestGroupForDate(this.months, dateTime);
+      if (!month) {
        return;
      }
    }
-    await this.loadMonthGroup(dateTime, { cancelable: false });
-    const asset = monthGroup.findClosest(dateTime);
+    await this.loadMonth(dateTime, { cancelable: false });
+    const asset = month.findClosest(dateTime);
    if (asset) {
      return asset;
    }
-    for await (const asset of this.assetsIterator({ startMonthGroup: monthGroup })) {
+    for await (const asset of this.assetsIterator({ startMonth: month })) {
      return asset;
    }
  }
@@ -492,4 +569,27 @@ export class TimelineManager extends VirtualScrollManager {
  getAssetOrder() {
    return this.#options.order ?? AssetOrder.Desc;
  }
+
+  protected postCreateSegments(): void {
+    this.months.sort((a, b) => {
+      return a.yearMonth.year === b.yearMonth.year
+        ? b.yearMonth.month - a.yearMonth.month
+        : b.yearMonth.year - a.yearMonth.year;
+    });
+  }
+
+  protected postUpsert(context: GroupInsertionCache): void {
+    for (const group of context.existingDays) {
+      group.sortAssets(this.#options.order);
+    }
+
+    for (const month of context.monthsWithNewDays) {
+      month.sortDays();
+    }
+
+    for (const month of context.updatedMonths) {
+      month.sortDays();
+      updateGeometry(this, month, { invalidateHeight: true });
+    }
+  }
 }
--- a/web/src/lib/managers/timeline-manager/TimelineMonth.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/TimelineMonth.svelte.ts
@@ -1,34 +1,32 @@
-import { AssetOrder, type TimeBucketAssetResponseDto } from '@immich/sdk';
-
+import { GroupInsertionCache } from '$lib/managers/timeline-manager/group-insertion-cache.svelte';
+import { onCreateMonth } from '$lib/managers/timeline-manager/internal/TestHooks.svelte';
+import { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
+import type { AssetDescriptor, AssetOperation, Direction, TimelineAsset } from '$lib/managers/timeline-manager/types';
+import { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
+import { ScrollSegment } from '$lib/managers/VirtualScrollManager/ScrollSegment.svelte';
 import { CancellableTask } from '$lib/utils/cancellable-task';
 import { handleError } from '$lib/utils/handle-error';
 import {
-  formatGroupTitle,
-  formatMonthGroupTitle,
+  formatDayTitle,
+  formatMonthTitle,
  fromTimelinePlainDate,
  fromTimelinePlainDateTime,
  fromTimelinePlainYearMonth,
  getTimes,
-  setDifference,
+  setDifferenceInPlace,
  type TimelineDateTime,
  type TimelineYearMonth,
 } from '$lib/utils/timeline-util';
-
+import { AssetOrder, type TimeBucketAssetResponseDto } from '@immich/sdk';
 import { t } from 'svelte-i18n';
 import { get } from 'svelte/store';

-import { SvelteSet } from 'svelte/reactivity';
-import { DayGroup } from './day-group.svelte';
-import { GroupInsertionCache } from './group-insertion-cache.svelte';
-import type { TimelineManager } from './timeline-manager.svelte';
-import type { AssetDescriptor, AssetOperation, Direction, MoveAsset, TimelineAsset } from './types';
-import { ViewerAsset } from './viewer-asset.svelte';
-
-export class MonthGroup {
+export class TimelineMonth extends ScrollSegment {
  #intersecting: boolean = $state(false);
  actuallyIntersecting: boolean = $state(false);
  isLoaded: boolean = $state(false);
-  dayGroups: DayGroup[] = $state([]);
+  days: TimelineDay[] = $state([]);
  readonly timelineManager: TimelineManager;

  #height: number = $state(0);
@@ -39,39 +37,45 @@ export class MonthGroup {
  percent: number = $state(0);

  assetsCount: number = $derived(
-    this.isLoaded
-      ? this.dayGroups.reduce((accumulator, g) => accumulator + g.viewerAssets.length, 0)
-      : this.#initialCount,
+    this.isLoaded ? this.days.reduce((accumulator, g) => accumulator + g.viewerAssets.length, 0) : this.#initialCount,
  );
  loader: CancellableTask | undefined;
  isHeightActual: boolean = $state(false);

-  readonly monthGroupTitle: string;
+  readonly monthTitle: string;
  readonly yearMonth: TimelineYearMonth;

  constructor(
-    store: TimelineManager,
+    timelineManager: TimelineManager,
    yearMonth: TimelineYearMonth,
    initialCount: number,
+    loaded: boolean,
    order: AssetOrder = AssetOrder.Desc,
  ) {
-    this.timelineManager = store;
+    super();
+    this.timelineManager = timelineManager;
    this.#initialCount = initialCount;
    this.#sortOrder = order;

    this.yearMonth = yearMonth;
-    this.monthGroupTitle = formatMonthGroupTitle(fromTimelinePlainYearMonth(yearMonth));
+    this.monthTitle = formatMonthTitle(fromTimelinePlainYearMonth(yearMonth));

    this.loader = new CancellableTask(
      () => {
        this.isLoaded = true;
      },
      () => {
-        this.dayGroups = [];
+        this.days = [];
        this.isLoaded = false;
      },
      this.#handleLoadError,
    );
+    if (loaded) {
+      this.isLoaded = true;
+    }
+    if (import.meta.env.DEV) {
+      onCreateMonth(this);
+    }
  }

  set intersecting(newValue: boolean) {
@@ -81,7 +85,7 @@ export class MonthGroup {
    }
    this.#intersecting = newValue;
    if (newValue) {
-      void this.timelineManager.loadMonthGroup(this.yearMonth);
+      void this.timelineManager.loadMonth(this.yearMonth);
    } else {
      this.cancel();
    }
@@ -91,69 +95,72 @@ export class MonthGroup {
    return this.#intersecting;
  }

-  get lastDayGroup() {
-    return this.dayGroups.at(-1);
+  get lastDay() {
+    return this.days.at(-1);
  }

  getFirstAsset() {
-    return this.dayGroups[0]?.getFirstAsset();
+    return this.days[0]?.getFirstAsset();
  }

  getAssets() {
    // eslint-disable-next-line unicorn/no-array-reduce
-    return this.dayGroups.reduce((accumulator: TimelineAsset[], g: DayGroup) => accumulator.concat(g.getAssets()), []);
+    return this.days.reduce((accumulator: TimelineAsset[], g: TimelineDay) => accumulator.concat(g.getAssets()), []);
  }

-  sortDayGroups() {
+  sortDays() {
    if (this.#sortOrder === AssetOrder.Asc) {
-      return this.dayGroups.sort((a, b) => a.day - b.day);
+      return this.days.sort((a, b) => a.day - b.day);
    }

-    return this.dayGroups.sort((a, b) => b.day - a.day);
+    return this.days.sort((a, b) => b.day - a.day);
  }

  runAssetOperation(ids: Set<string>, operation: AssetOperation) {
    if (ids.size === 0) {
      return {
-        moveAssets: [] as MoveAsset[],
-        processedIds: new SvelteSet<string>(),
+        moveAssets: [] as TimelineAsset[],
+        // eslint-disable-next-line svelte/prefer-svelte-reactivity
+        processedIds: new Set<string>(),
        unprocessedIds: ids,
        changedGeometry: false,
      };
    }
-    const { dayGroups } = this;
+    const { days } = this;
    let combinedChangedGeometry = false;
-    let idsToProcess = new SvelteSet(ids);
-    const idsProcessed = new SvelteSet<string>();
-    const combinedMoveAssets: MoveAsset[][] = [];
-    let index = dayGroups.length;
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsToProcess = new Set(ids);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const idsProcessed = new Set<string>();
+    const combinedMoveAssets: TimelineAsset[] = [];
+    let index = days.length;
    while (index--) {
      if (idsToProcess.size > 0) {
-        const group = dayGroups[index];
+        const group = days[index];
        const { moveAssets, processedIds, changedGeometry } = group.runAssetOperation(ids, operation);
        if (moveAssets.length > 0) {
-          combinedMoveAssets.push(moveAssets);
+          combinedMoveAssets.push(...moveAssets);
        }
-        idsToProcess = setDifference(idsToProcess, processedIds);
+        setDifferenceInPlace(idsToProcess, processedIds);
        for (const id of processedIds) {
          idsProcessed.add(id);
        }
        combinedChangedGeometry = combinedChangedGeometry || changedGeometry;
        if (group.viewerAssets.length === 0) {
-          dayGroups.splice(index, 1);
+          days.splice(index, 1);
          combinedChangedGeometry = true;
        }
      }
    }
    return {
-      moveAssets: combinedMoveAssets.flat(),
+      moveAssets: combinedMoveAssets,
      unprocessedIds: idsToProcess,
      processedIds: idsProcessed,
      changedGeometry: combinedChangedGeometry,
    };
  }

-  addAssets(bucketAssets: TimeBucketAssetResponseDto) {
+  addAssets(bucketAssets: TimeBucketAssetResponseDto, preSorted: boolean) {
    const addContext = new GroupInsertionCache();
    for (let i = 0; i < bucketAssets.id.length; i++) {
      const { localDateTime, fileCreatedAt } = getTimes(
@@ -194,17 +201,17 @@ export class MonthGroup {
      }
      this.addTimelineAsset(timelineAsset, addContext);
    }
+    if (!preSorted) {
+      for (const group of addContext.existingDays) {
+        group.sortAssets(this.#sortOrder);
+      }

-    for (const group of addContext.existingDayGroups) {
-      group.sortAssets(this.#sortOrder);
+      if (addContext.newDays.size > 0) {
+        this.sortDays();
+      }
+
+      addContext.sort(this, this.#sortOrder);
    }
-
-    if (addContext.newDayGroups.size > 0) {
-      this.sortDayGroups();
-    }
-
-    addContext.sort(this, this.#sortOrder);
-
    return addContext.unprocessedAssets;
  }

@@ -217,20 +224,20 @@ export class MonthGroup {
      return;
    }

-    let dayGroup = addContext.getDayGroup(localDateTime) || this.findDayGroupByDay(localDateTime.day);
-    if (dayGroup) {
-      addContext.setDayGroup(dayGroup, localDateTime);
+    let day = addContext.getDay(localDateTime) || this.findDayByDay(localDateTime.day);
+    if (day) {
+      addContext.setDay(day, localDateTime);
    } else {
-      const groupTitle = formatGroupTitle(fromTimelinePlainDate(localDateTime));
-      dayGroup = new DayGroup(this, this.dayGroups.length, localDateTime.day, groupTitle);
-      this.dayGroups.push(dayGroup);
-      addContext.setDayGroup(dayGroup, localDateTime);
-      addContext.newDayGroups.add(dayGroup);
+      const dayTitle = formatDayTitle(fromTimelinePlainDate(localDateTime));
+      day = new TimelineDay(this, this.days.length, localDateTime.day, dayTitle);
+      this.days.push(day);
+      addContext.setDay(day, localDateTime);
+      addContext.newDays.add(day);
    }

-    const viewerAsset = new ViewerAsset(dayGroup, timelineAsset);
-    dayGroup.viewerAssets.push(viewerAsset);
-    addContext.changedDayGroups.add(dayGroup);
+    const viewerAsset = new ViewerAsset(day, timelineAsset);
+    day.viewerAssets.push(viewerAsset);
+    addContext.changedDays.add(day);
  }

  get viewId() {
@@ -246,9 +253,9 @@ export class MonthGroup {
    const index = timelineManager.months.indexOf(this);
    const heightDelta = height - this.#height;
    this.#height = height;
-    const prevMonthGroup = timelineManager.months[index - 1];
-    if (prevMonthGroup) {
-      const newTop = prevMonthGroup.#top + prevMonthGroup.#height;
+    const prevMonth = timelineManager.months[index - 1];
+    if (prevMonth) {
+      const newTop = prevMonth.#top + prevMonth.#height;
      if (this.#top !== newTop) {
        this.#top = newTop;
      }
@@ -257,10 +264,10 @@ export class MonthGroup {
      return;
    }
    for (let cursor = index + 1; cursor < timelineManager.months.length; cursor++) {
-      const monthGroup = this.timelineManager.months[cursor];
-      const newTop = monthGroup.#top + heightDelta;
-      if (monthGroup.#top !== newTop) {
-        monthGroup.#top = newTop;
+      const month = this.timelineManager.months[cursor];
+      const newTop = month.#top + heightDelta;
+      if (month.#top !== newTop) {
+        month.#top = newTop;
      }
    }
    if (!timelineManager.viewportTopMonthIntersection) {
@@ -292,21 +299,21 @@ export class MonthGroup {
    handleError(error, _$t('errors.failed_to_load_assets'));
  }

-  findDayGroupForAsset(asset: TimelineAsset) {
-    for (const group of this.dayGroups) {
+  findDayForAsset(asset: TimelineAsset) {
+    for (const group of this.days) {
      if (group.viewerAssets.some((viewerAsset) => viewerAsset.id === asset.id)) {
        return group;
      }
    }
  }

-  findDayGroupByDay(day: number) {
-    return this.dayGroups.find((group) => group.day === day);
+  findDayByDay(day: number) {
+    return this.days.find((group) => group.day === day);
  }

  findAssetAbsolutePosition(assetId: string) {
    this.timelineManager.clearDeferredLayout(this);
-    for (const group of this.dayGroups) {
+    for (const group of this.days) {
      const viewerAsset = group.viewerAssets.find((viewAsset) => viewAsset.id === assetId);
      if (viewerAsset) {
        if (!viewerAsset.position) {
@@ -321,18 +328,14 @@ export class MonthGroup {
    }
  }

-  *assetsIterator(options?: { startDayGroup?: DayGroup; startAsset?: TimelineAsset; direction?: Direction }) {
+  *assetsIterator(options?: { startDay?: TimelineDay; startAsset?: TimelineAsset; direction?: Direction }) {
    const direction = options?.direction ?? 'earlier';
    let { startAsset } = options ?? {};
    const isEarlier = direction === 'earlier';
-    let groupIndex = options?.startDayGroup
-      ? this.dayGroups.indexOf(options.startDayGroup)
-      : isEarlier
-        ? 0
-        : this.dayGroups.length - 1;
+    let groupIndex = options?.startDay ? this.days.indexOf(options.startDay) : isEarlier ? 0 : this.days.length - 1;

-    while (groupIndex >= 0 && groupIndex < this.dayGroups.length) {
-      const group = this.dayGroups[groupIndex];
+    while (groupIndex >= 0 && groupIndex < this.days.length) {
+      const group = this.days[groupIndex];
      yield* group.assetsIterator({ startAsset, direction });
      startAsset = undefined;
      groupIndex += isEarlier ? 1 : -1;
--- a/web/src/lib/managers/timeline-manager/group-insertion-cache.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/group-insertion-cache.svelte.ts
@@ -1,61 +1,64 @@
+import { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
 import { AssetOrder } from '@immich/sdk';
-import { SvelteSet } from 'svelte/reactivity';
-import type { DayGroup } from './day-group.svelte';
-import type { MonthGroup } from './month-group.svelte';
-import type { TimelineAsset } from './types';

 export class GroupInsertionCache {
  #lookupCache: {
-    [year: number]: { [month: number]: { [day: number]: DayGroup } };
+    [year: number]: { [month: number]: { [day: number]: TimelineDay } };
  } = {};
  unprocessedAssets: TimelineAsset[] = [];
-  changedDayGroups = new SvelteSet<DayGroup>();
-  newDayGroups = new SvelteSet<DayGroup>();
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  changedDays = new Set<TimelineDay>();
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  newDays = new Set<TimelineDay>();

-  getDayGroup({ year, month, day }: TimelineDate): DayGroup | undefined {
+  getDay({ year, month, day }: TimelineDate): TimelineDay | undefined {
    return this.#lookupCache[year]?.[month]?.[day];
  }

-  setDayGroup(dayGroup: DayGroup, { year, month, day }: TimelineDate) {
+  setDay(day: TimelineDay, { year, month, day: dayNumber }: TimelineDate) {
    if (!this.#lookupCache[year]) {
      this.#lookupCache[year] = {};
    }
    if (!this.#lookupCache[year][month]) {
      this.#lookupCache[year][month] = {};
    }
-    this.#lookupCache[year][month][day] = dayGroup;
+    this.#lookupCache[year][month][dayNumber] = day;
  }

-  get existingDayGroups() {
-    return setDifference(this.changedDayGroups, this.newDayGroups);
+  get existingDays() {
+    return setDifference(this.changedDays, this.newDays);
  }

-  get updatedBuckets() {
-    const updated = new SvelteSet<MonthGroup>();
-    for (const group of this.changedDayGroups) {
-      updated.add(group.monthGroup);
+  get updatedMonths() {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const months = new Set<TimelineMonth>();
+    for (const day of this.changedDays) {
+      months.add(day.month);
    }
-    return updated;
+    return months;
  }

-  get bucketsWithNewDayGroups() {
-    const updated = new SvelteSet<MonthGroup>();
-    for (const group of this.newDayGroups) {
-      updated.add(group.monthGroup);
+  get monthsWithNewDays() {
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    const months = new Set<TimelineMonth>();
+    for (const day of this.newDays) {
+      months.add(day.month);
    }
-    return updated;
+    return months;
  }

-  sort(monthGroup: MonthGroup, sortOrder: AssetOrder = AssetOrder.Desc) {
-    for (const group of this.changedDayGroups) {
-      group.sortAssets(sortOrder);
+  sort(month: TimelineMonth, sortOrder: AssetOrder = AssetOrder.Desc) {
+    for (const day of this.changedDays) {
+      day.sortAssets(sortOrder);
    }
-    for (const group of this.newDayGroups) {
-      group.sortAssets(sortOrder);
+    for (const day of this.newDays) {
+      day.sortAssets(sortOrder);
    }
-    if (this.newDayGroups.size > 0) {
-      monthGroup.sortDayGroups();
+    if (this.newDays.size > 0) {
+      month.sortDays();
    }
  }
 }
--- a/web/src/lib/managers/timeline-manager/internal/TestHooks.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/TestHooks.svelte.ts
@@ -0,0 +1,16 @@
+import { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
+
+let testHooks: TestHooks | undefined = undefined;
+
+export type TestHooks = {
+  onCreateMonth(month: TimelineMonth): unknown;
+  onCreateDay(day: TimelineDay): unknown;
+};
+
+export const setTestHooks = (hooks: TestHooks) => {
+  testHooks = hooks;
+};
+
+export const onCreateMonth = (month: TimelineMonth) => testHooks?.onCreateMonth(month);
+export const onCreateDay = (day: TimelineDay) => testHooks?.onCreateDay(day);
--- a/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/intersection-support.svelte.ts
@@ -1,16 +1,16 @@
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
 import { TUNABLES } from '$lib/utils/tunables';
-import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';

 const {
  TIMELINE: { INTERSECTION_EXPAND_TOP, INTERSECTION_EXPAND_BOTTOM },
 } = TUNABLES;

-export function updateIntersectionMonthGroup(timelineManager: TimelineManager, month: MonthGroup) {
-  const actuallyIntersecting = calculateMonthGroupIntersecting(timelineManager, month, 0, 0);
+export function updateIntersectionMonth(timelineManager: TimelineManager, month: TimelineMonth) {
+  const actuallyIntersecting = calculateMonthIntersecting(timelineManager, month, 0, 0);
  let preIntersecting = false;
  if (!actuallyIntersecting) {
-    preIntersecting = calculateMonthGroupIntersecting(
+    preIntersecting = calculateMonthIntersecting(
      timelineManager,
      month,
      INTERSECTION_EXPAND_TOP,
@@ -40,18 +40,18 @@ export function isIntersecting(regionTop: number, regionBottom: number, windowTo
  );
 }

-export function calculateMonthGroupIntersecting(
+export function calculateMonthIntersecting(
  timelineManager: TimelineManager,
-  monthGroup: MonthGroup,
+  month: TimelineMonth,
  expandTop: number,
  expandBottom: number,
 ) {
-  const monthGroupTop = monthGroup.top;
-  const monthGroupBottom = monthGroupTop + monthGroup.height;
+  const monthTop = month.top;
+  const monthBottom = monthTop + month.height;
  const topWindow = timelineManager.visibleWindow.top - expandTop;
  const bottomWindow = timelineManager.visibleWindow.bottom + expandBottom;

-  return isIntersecting(monthGroupTop, monthGroupBottom, topWindow, bottomWindow);
+  return isIntersecting(monthTop, monthBottom, topWindow, bottomWindow);
 }

 /**
--- a/web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/layout-support.svelte.ts
@@ -1,8 +1,8 @@
-import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
-import type { UpdateGeometryOptions } from '../types';
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
+import type { UpdateGeometryOptions } from '$lib/managers/timeline-manager/types';

-export function updateGeometry(timelineManager: TimelineManager, month: MonthGroup, options: UpdateGeometryOptions) {
+export function updateGeometry(timelineManager: TimelineManager, month: TimelineMonth, options: UpdateGeometryOptions) {
  const { invalidateHeight, noDefer = false } = options;
  if (invalidateHeight) {
    month.isHeightActual = false;
@@ -17,49 +17,49 @@ export function updateGeometry(timelineManager: TimelineManager, month: MonthGro
    }
    return;
  }
-  layoutMonthGroup(timelineManager, month, noDefer);
+  layoutMonth(timelineManager, month, noDefer);
 }

-export function layoutMonthGroup(timelineManager: TimelineManager, month: MonthGroup, noDefer: boolean = false) {
+export function layoutMonth(timelineManager: TimelineManager, month: TimelineMonth, noDefer: boolean = false) {
  let cumulativeHeight = 0;
  let cumulativeWidth = 0;
  let currentRowHeight = 0;

-  let dayGroupRow = 0;
-  let dayGroupCol = 0;
+  let dayRow = 0;
+  let dayCol = 0;

  const options = timelineManager.justifiedLayoutOptions;
-  for (const dayGroup of month.dayGroups) {
-    dayGroup.layout(options, noDefer);
+  for (const day of month.days) {
+    day.layout(options, noDefer);

    // Calculate space needed for this item (including gap if not first in row)
-    const spaceNeeded = dayGroup.width + (dayGroupCol > 0 ? timelineManager.gap : 0);
+    const spaceNeeded = day.width + (dayCol > 0 ? timelineManager.gap : 0);
    const fitsInCurrentRow = cumulativeWidth + spaceNeeded <= timelineManager.viewportWidth;

    if (fitsInCurrentRow) {
-      dayGroup.row = dayGroupRow;
-      dayGroup.col = dayGroupCol++;
-      dayGroup.left = cumulativeWidth;
-      dayGroup.top = cumulativeHeight;
+      day.row = dayRow;
+      day.col = dayCol++;
+      day.left = cumulativeWidth;
+      day.top = cumulativeHeight;

-      cumulativeWidth += dayGroup.width + timelineManager.gap;
+      cumulativeWidth += day.width + timelineManager.gap;
    } else {
      // Move to next row
      cumulativeHeight += currentRowHeight;
      cumulativeWidth = 0;
-      dayGroupRow++;
-      dayGroupCol = 0;
+      dayRow++;
+      dayCol = 0;

      // Position at start of new row
-      dayGroup.row = dayGroupRow;
-      dayGroup.col = dayGroupCol;
-      dayGroup.left = 0;
-      dayGroup.top = cumulativeHeight;
+      day.row = dayRow;
+      day.col = dayCol;
+      day.left = 0;
+      day.top = cumulativeHeight;

-      dayGroupCol++;
-      cumulativeWidth += dayGroup.width + timelineManager.gap;
+      dayCol++;
+      cumulativeWidth += day.width + timelineManager.gap;
    }
-    currentRowHeight = dayGroup.height + timelineManager.headerHeight;
+    currentRowHeight = day.height + timelineManager.headerHeight;
  }

  // Add the height of the final row
--- a/web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/load-support.svelte.ts
@@ -1,21 +1,21 @@
 import { authManager } from '$lib/managers/auth-manager.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
+import type { TimelineManagerOptions } from '$lib/managers/timeline-manager/types';
 import { toISOYearMonthUTC } from '$lib/utils/timeline-util';
 import { getTimeBucket } from '@immich/sdk';
-import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
-import type { TimelineManagerOptions } from '../types';

 export async function loadFromTimeBuckets(
  timelineManager: TimelineManager,
-  monthGroup: MonthGroup,
+  month: TimelineMonth,
  options: TimelineManagerOptions,
  signal: AbortSignal,
 ): Promise<void> {
-  if (monthGroup.getFirstAsset()) {
+  if (month.getFirstAsset()) {
    return;
  }

-  const timeBucket = toISOYearMonthUTC(monthGroup.yearMonth);
+  const timeBucket = toISOYearMonthUTC(month.yearMonth);
  const bucketResponse = await getTimeBucket(
    {
      ...authManager.params,
@@ -43,10 +43,10 @@ export async function loadFromTimeBuckets(
    }
  }

-  const unprocessedAssets = monthGroup.addAssets(bucketResponse);
+  const unprocessedAssets = month.addAssets(bucketResponse, true);
  if (unprocessedAssets.length > 0) {
    console.error(
-      `Warning: getTimeBucket API returning assets not in requested month: ${monthGroup.yearMonth.month}, ${JSON.stringify(
+      `Warning: getTimeBucket API returning assets not in requested month: ${month.yearMonth.month}, ${JSON.stringify(
        unprocessedAssets.map((unprocessed) => ({
          id: unprocessed.id,
          localDateTime: unprocessed.localDateTime,
--- a/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/operations-support.svelte.ts
@@ -1,104 +0,0 @@
-import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
-import { AssetOrder } from '@immich/sdk';
-
-import { SvelteSet } from 'svelte/reactivity';
-import { GroupInsertionCache } from '../group-insertion-cache.svelte';
-import { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
-import type { AssetOperation, TimelineAsset } from '../types';
-import { updateGeometry } from './layout-support.svelte';
-import { getMonthGroupByDate } from './search-support.svelte';
-
-export function addAssetsToMonthGroups(
-  timelineManager: TimelineManager,
-  assets: TimelineAsset[],
-  options: { order: AssetOrder },
-) {
-  if (assets.length === 0) {
-    return;
-  }
-
-  const addContext = new GroupInsertionCache();
-  const updatedMonthGroups = new SvelteSet<MonthGroup>();
-  const monthCount = timelineManager.months.length;
-  for (const asset of assets) {
-    let month = getMonthGroupByDate(timelineManager, asset.localDateTime);
-
-    if (!month) {
-      month = new MonthGroup(timelineManager, asset.localDateTime, 1, options.order);
-      month.isLoaded = true;
-      timelineManager.months.push(month);
-    }
-
-    month.addTimelineAsset(asset, addContext);
-    updatedMonthGroups.add(month);
-  }
-
-  if (timelineManager.months.length !== monthCount) {
-    timelineManager.months.sort((a, b) => {
-      return a.yearMonth.year === b.yearMonth.year
-        ? b.yearMonth.month - a.yearMonth.month
-        : b.yearMonth.year - a.yearMonth.year;
-    });
-  }
-
-  for (const group of addContext.existingDayGroups) {
-    group.sortAssets(options.order);
-  }
-
-  for (const monthGroup of addContext.bucketsWithNewDayGroups) {
-    monthGroup.sortDayGroups();
-  }
-
-  for (const month of addContext.updatedBuckets) {
-    month.sortDayGroups();
-    updateGeometry(timelineManager, month, { invalidateHeight: true });
-  }
-  timelineManager.updateIntersections();
-}
-
-export function runAssetOperation(
-  timelineManager: TimelineManager,
-  ids: Set<string>,
-  operation: AssetOperation,
-  options: { order: AssetOrder },
-) {
-  if (ids.size === 0) {
-    return { processedIds: new SvelteSet(), unprocessedIds: ids, changedGeometry: false };
-  }
-
-  const changedMonthGroups = new SvelteSet<MonthGroup>();
-  let idsToProcess = new SvelteSet(ids);
-  const idsProcessed = new SvelteSet<string>();
-  const combinedMoveAssets: { asset: TimelineAsset; date: TimelineDate }[][] = [];
-  for (const month of timelineManager.months) {
-    if (idsToProcess.size > 0) {
-      const { moveAssets, processedIds, changedGeometry } = month.runAssetOperation(idsToProcess, operation);
-      if (moveAssets.length > 0) {
-        combinedMoveAssets.push(moveAssets);
-      }
-      idsToProcess = setDifference(idsToProcess, processedIds);
-      for (const id of processedIds) {
-        idsProcessed.add(id);
-      }
-      if (changedGeometry) {
-        changedMonthGroups.add(month);
-      }
-    }
-  }
-  if (combinedMoveAssets.length > 0) {
-    addAssetsToMonthGroups(
-      timelineManager,
-      combinedMoveAssets.flat().map((a) => a.asset),
-      options,
-    );
-  }
-  const changedGeometry = changedMonthGroups.size > 0;
-  for (const month of changedMonthGroups) {
-    updateGeometry(timelineManager, month, { invalidateHeight: true });
-  }
-  if (changedGeometry) {
-    timelineManager.updateIntersections();
-  }
-  return { unprocessedIds: idsToProcess, processedIds: idsProcessed, changedGeometry };
-}
--- a/web/src/lib/managers/timeline-manager/internal/search-support.svelte.spec.ts
+++ b/web/src/lib/managers/timeline-manager/internal/search-support.svelte.spec.ts
@@ -1,11 +1,11 @@
+import { findClosestGroupForDate } from '$lib/managers/timeline-manager/internal/search-support.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
 import { describe, expect, it } from 'vitest';
-import type { MonthGroup } from '../month-group.svelte';
-import { findClosestGroupForDate } from './search-support.svelte';

-function createMockMonthGroup(year: number, month: number): MonthGroup {
+function createMockMonth(year: number, month: number): TimelineMonth {
  return {
    yearMonth: { year, month },
-  } as MonthGroup;
+  } as TimelineMonth;
 }

 describe('findClosestGroupForDate', () => {
@@ -15,25 +15,25 @@ describe('findClosestGroupForDate', () => {
  });

  it('should return the only month when there is only one month', () => {
-    const months = [createMockMonthGroup(2024, 6)];
+    const months = [createMockMonth(2024, 6)];
    const result = findClosestGroupForDate(months, { year: 2025, month: 1 });
    expect(result?.yearMonth).toEqual({ year: 2024, month: 6 });
  });

  it('should return exact match when available', () => {
-    const months = [createMockMonthGroup(2024, 1), createMockMonthGroup(2024, 6), createMockMonthGroup(2024, 12)];
+    const months = [createMockMonth(2024, 1), createMockMonth(2024, 6), createMockMonth(2024, 12)];
    const result = findClosestGroupForDate(months, { year: 2024, month: 6 });
    expect(result?.yearMonth).toEqual({ year: 2024, month: 6 });
  });

  it('should find closest month when target is between two months', () => {
-    const months = [createMockMonthGroup(2024, 1), createMockMonthGroup(2024, 6), createMockMonthGroup(2024, 12)];
+    const months = [createMockMonth(2024, 1), createMockMonth(2024, 6), createMockMonth(2024, 12)];
    const result = findClosestGroupForDate(months, { year: 2024, month: 4 });
    expect(result?.yearMonth).toEqual({ year: 2024, month: 6 });
  });

  it('should handle year boundaries correctly (2023-12 vs 2024-01)', () => {
-    const months = [createMockMonthGroup(2023, 12), createMockMonthGroup(2024, 2)];
+    const months = [createMockMonth(2023, 12), createMockMonth(2024, 2)];
    const result = findClosestGroupForDate(months, { year: 2024, month: 1 });
    // 2024-01 is 1 month from 2023-12 and 1 month from 2024-02
    // Should return first encountered with min distance (2023-12)
@@ -41,33 +41,33 @@ describe('findClosestGroupForDate', () => {
  });

  it('should correctly calculate distance across years', () => {
-    const months = [createMockMonthGroup(2022, 6), createMockMonthGroup(2024, 6)];
+    const months = [createMockMonth(2022, 6), createMockMonth(2024, 6)];
    const result = findClosestGroupForDate(months, { year: 2023, month: 6 });
    // Both are exactly 12 months away, should return first encountered
    expect(result?.yearMonth).toEqual({ year: 2022, month: 6 });
  });

  it('should handle target before all months', () => {
-    const months = [createMockMonthGroup(2024, 6), createMockMonthGroup(2024, 12)];
+    const months = [createMockMonth(2024, 6), createMockMonth(2024, 12)];
    const result = findClosestGroupForDate(months, { year: 2024, month: 1 });
    expect(result?.yearMonth).toEqual({ year: 2024, month: 6 });
  });

  it('should handle target after all months', () => {
-    const months = [createMockMonthGroup(2024, 1), createMockMonthGroup(2024, 6)];
+    const months = [createMockMonth(2024, 1), createMockMonth(2024, 6)];
    const result = findClosestGroupForDate(months, { year: 2025, month: 1 });
    expect(result?.yearMonth).toEqual({ year: 2024, month: 6 });
  });

  it('should handle multiple years correctly', () => {
-    const months = [createMockMonthGroup(2020, 1), createMockMonthGroup(2022, 1), createMockMonthGroup(2024, 1)];
+    const months = [createMockMonth(2020, 1), createMockMonth(2022, 1), createMockMonth(2024, 1)];
    const result = findClosestGroupForDate(months, { year: 2023, month: 1 });
    // 2023-01 is 12 months from 2022-01 and 12 months from 2024-01
    expect(result?.yearMonth).toEqual({ year: 2022, month: 1 });
  });

  it('should prefer closer month when one is clearly closer', () => {
-    const months = [createMockMonthGroup(2024, 1), createMockMonthGroup(2024, 10)];
+    const months = [createMockMonth(2024, 1), createMockMonth(2024, 10)];
    const result = findClosestGroupForDate(months, { year: 2024, month: 11 });
    // 2024-11 is 1 month from 2024-10 and 10 months from 2024-01
    expect(result?.yearMonth).toEqual({ year: 2024, month: 10 });
--- a/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/search-support.svelte.ts
@@ -1,9 +1,9 @@
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
+import { TimelineMonth } from '$lib/managers/timeline-manager/TimelineMonth.svelte';
+import type { AssetDescriptor, Direction, TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { plainDateTimeCompare, type TimelineYearMonth } from '$lib/utils/timeline-util';
 import { AssetOrder } from '@immich/sdk';
 import { DateTime } from 'luxon';
-import type { MonthGroup } from '../month-group.svelte';
-import type { TimelineManager } from '../timeline-manager.svelte';
-import type { AssetDescriptor, Direction, TimelineAsset } from '../types';

 export async function getAssetWithOffset(
  timelineManager: TimelineManager,
@@ -11,40 +11,40 @@ export async function getAssetWithOffset(
  interval: 'asset' | 'day' | 'month' | 'year' = 'asset',
  direction: Direction,
 ): Promise<TimelineAsset | undefined> {
-  const { asset, monthGroup } = findMonthGroupForAsset(timelineManager, assetDescriptor.id) ?? {};
-  if (!monthGroup || !asset) {
+  const { asset, month } = findMonthForAsset(timelineManager, assetDescriptor.id) ?? {};
+  if (!month || !asset) {
    return;
  }

  switch (interval) {
    case 'asset': {
-      return getAssetByAssetOffset(timelineManager, asset, monthGroup, direction);
+      return getAssetByAssetOffset(timelineManager, asset, month, direction);
    }
    case 'day': {
-      return getAssetByDayOffset(timelineManager, asset, monthGroup, direction);
+      return getAssetByDayOffset(timelineManager, asset, month, direction);
    }
    case 'month': {
-      return getAssetByMonthOffset(timelineManager, monthGroup, direction);
+      return getAssetByMonthOffset(timelineManager, month, direction);
    }
    case 'year': {
-      return getAssetByYearOffset(timelineManager, monthGroup, direction);
+      return getAssetByYearOffset(timelineManager, month, direction);
    }
  }
 }

-export function findMonthGroupForAsset(timelineManager: TimelineManager, id: string) {
+export function findMonthForAsset(timelineManager: TimelineManager, id: string) {
  for (const month of timelineManager.months) {
    const asset = month.findAssetById({ id });
    if (asset) {
-      return { monthGroup: month, asset };
+      return { month, asset };
    }
  }
 }

-export function getMonthGroupByDate(
+export function getMonthByDate(
  timelineManager: TimelineManager,
  targetYearMonth: TimelineYearMonth,
-): MonthGroup | undefined {
+): TimelineMonth | undefined {
  return timelineManager.months.find(
    (month) => month.yearMonth.year === targetYearMonth.year && month.yearMonth.month === targetYearMonth.month,
  );
@@ -53,13 +53,13 @@ export function getMonthGroupByDate(
 async function getAssetByAssetOffset(
  timelineManager: TimelineManager,
  asset: TimelineAsset,
-  monthGroup: MonthGroup,
+  month: TimelineMonth,
  direction: Direction,
 ) {
-  const dayGroup = monthGroup.findDayGroupForAsset(asset);
+  const day = month.findDayForAsset(asset);
  for await (const targetAsset of timelineManager.assetsIterator({
-    startMonthGroup: monthGroup,
-    startDayGroup: dayGroup,
+    startMonth: month,
+    startDay: day,
    startAsset: asset,
    direction,
  })) {
@@ -72,13 +72,13 @@ async function getAssetByAssetOffset(
 async function getAssetByDayOffset(
  timelineManager: TimelineManager,
  asset: TimelineAsset,
-  monthGroup: MonthGroup,
+  month: TimelineMonth,
  direction: Direction,
 ) {
-  const dayGroup = monthGroup.findDayGroupForAsset(asset);
+  const day = month.findDayForAsset(asset);
  for await (const targetAsset of timelineManager.assetsIterator({
-    startMonthGroup: monthGroup,
-    startDayGroup: dayGroup,
+    startMonth: month,
+    startDay: day,
    startAsset: asset,
    direction,
  })) {
@@ -88,44 +88,44 @@ async function getAssetByDayOffset(
  }
 }

-async function getAssetByMonthOffset(timelineManager: TimelineManager, month: MonthGroup, direction: Direction) {
-  for (const targetMonth of timelineManager.monthGroupIterator({ startMonthGroup: month, direction })) {
+async function getAssetByMonthOffset(timelineManager: TimelineManager, month: TimelineMonth, direction: Direction) {
+  for (const targetMonth of timelineManager.monthIterator({ startMonth: month, direction })) {
    if (targetMonth.yearMonth.month !== month.yearMonth.month) {
-      const { value, done } = await timelineManager.assetsIterator({ startMonthGroup: targetMonth, direction }).next();
+      const { value, done } = await timelineManager.assetsIterator({ startMonth: targetMonth, direction }).next();
      return done ? undefined : value;
    }
  }
 }

-async function getAssetByYearOffset(timelineManager: TimelineManager, month: MonthGroup, direction: Direction) {
-  for (const targetMonth of timelineManager.monthGroupIterator({ startMonthGroup: month, direction })) {
+async function getAssetByYearOffset(timelineManager: TimelineManager, month: TimelineMonth, direction: Direction) {
+  for (const targetMonth of timelineManager.monthIterator({ startMonth: month, direction })) {
    if (targetMonth.yearMonth.year !== month.yearMonth.year) {
-      const { value, done } = await timelineManager.assetsIterator({ startMonthGroup: targetMonth, direction }).next();
+      const { value, done } = await timelineManager.assetsIterator({ startMonth: targetMonth, direction }).next();
      return done ? undefined : value;
    }
  }
 }

 export async function retrieveRange(timelineManager: TimelineManager, start: AssetDescriptor, end: AssetDescriptor) {
-  let { asset: startAsset, monthGroup: startMonthGroup } = findMonthGroupForAsset(timelineManager, start.id) ?? {};
-  if (!startMonthGroup || !startAsset) {
+  let { asset: startAsset, month: startMonth } = findMonthForAsset(timelineManager, start.id) ?? {};
+  if (!startMonth || !startAsset) {
    return [];
  }
-  let { asset: endAsset, monthGroup: endMonthGroup } = findMonthGroupForAsset(timelineManager, end.id) ?? {};
-  if (!endMonthGroup || !endAsset) {
+  let { asset: endAsset, month: endMonth } = findMonthForAsset(timelineManager, end.id) ?? {};
+  if (!endMonth || !endAsset) {
    return [];
  }
  const assetOrder: AssetOrder = timelineManager.getAssetOrder();
  if (plainDateTimeCompare(assetOrder === AssetOrder.Desc, startAsset.localDateTime, endAsset.localDateTime) < 0) {
    [startAsset, endAsset] = [endAsset, startAsset];
-    [startMonthGroup, endMonthGroup] = [endMonthGroup, startMonthGroup];
+    [startMonth, endMonth] = [endMonth, startMonth];
  }

  const range: TimelineAsset[] = [];
-  const startDayGroup = startMonthGroup.findDayGroupForAsset(startAsset);
+  const startDay = startMonth.findDayForAsset(startAsset);
  for await (const targetAsset of timelineManager.assetsIterator({
-    startMonthGroup,
-    startDayGroup,
+    startMonth,
+    startDay,
    startAsset,
  })) {
    range.push(targetAsset);
@@ -136,7 +136,7 @@ export async function retrieveRange(timelineManager: TimelineManager, start: Ass
  return range;
 }

-export function findMonthGroupForDate(timelineManager: TimelineManager, targetYearMonth: TimelineYearMonth) {
+export function findMonthForDate(timelineManager: TimelineManager, targetYearMonth: TimelineYearMonth) {
  for (const month of timelineManager.months) {
    const { year, month: monthNum } = month.yearMonth;
    if (monthNum === targetYearMonth.month && year === targetYearMonth.year) {
@@ -145,10 +145,10 @@ export function findMonthGroupForDate(timelineManager: TimelineManager, targetYe
  }
 }

-export function findClosestGroupForDate(months: MonthGroup[], targetYearMonth: TimelineYearMonth) {
+export function findClosestGroupForDate(months: TimelineMonth[], targetYearMonth: TimelineYearMonth) {
  const targetDate = DateTime.fromObject({ year: targetYearMonth.year, month: targetYearMonth.month });

-  let closestMonth: MonthGroup | undefined;
+  let closestMonth: TimelineMonth | undefined;
  let minDifference = Number.MAX_SAFE_INTEGER;

  for (const month of months) {
--- a/web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/internal/websocket-support.svelte.ts
@@ -1,4 +1,4 @@
-import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
 import type { PendingChange, TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { websocketEvents } from '$lib/stores/websocket';
 import { toTimelineAsset } from '$lib/utils/timeline-util';
@@ -13,10 +13,10 @@ export class WebsocketSupport {
  #processPendingChanges = throttle(() => {
    const { add, update, remove } = this.#getPendingChangeBatches();
    if (add.length > 0) {
-      this.#timelineManager.addAssets(add);
+      this.#timelineManager.upsertAssets(add);
    }
    if (update.length > 0) {
-      this.#timelineManager.updateAssets(update);
+      this.#timelineManager.upsertAssets(update);
    }
    if (remove.length > 0) {
      this.#timelineManager.removeAssets(remove);
--- a/web/src/lib/managers/timeline-manager/types.ts
+++ b/web/src/lib/managers/timeline-manager/types.ts
@@ -1,4 +1,4 @@
-import type { TimelineDate, TimelineDateTime, TimelineYearMonth } from '$lib/utils/timeline-util';
+import type { TimelineDateTime, TimelineYearMonth } from '$lib/utils/timeline-util';
 import type { AssetStackResponseDto, AssetVisibility } from '@immich/sdk';

 export type ViewportTopMonth = TimelineYearMonth | undefined | 'lead-in' | 'lead-out';
@@ -37,9 +37,7 @@ export type TimelineAsset = {
  longitude?: number | null;
 };

-export type AssetOperation = (asset: TimelineAsset) => { remove: boolean };
-
-export type MoveAsset = { asset: TimelineAsset; date: TimelineDate };
+export type AssetOperation = (asset: TimelineAsset) => unknown;

 export interface Viewport {
  width: number;
--- a/web/src/lib/managers/timeline-manager/utils.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/utils.svelte.ts
@@ -1,4 +1,4 @@
-import type { TimelineAsset } from './types';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';

 export const assetSnapshot = (asset: TimelineAsset): TimelineAsset => $state.snapshot(asset);
 export const assetsSnapshot = (assets: TimelineAsset[]) => assets.map((asset) => $state.snapshot(asset));
--- a/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
+++ b/web/src/lib/managers/timeline-manager/viewer-asset.svelte.ts
@@ -1,19 +1,18 @@
+import { calculateViewerAssetIntersecting } from '$lib/managers/timeline-manager/internal/intersection-support.svelte';
+import { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import type { CommonPosition } from '$lib/utils/layout-utils';

-import type { DayGroup } from './day-group.svelte';
-import { calculateViewerAssetIntersecting } from './internal/intersection-support.svelte';
-import type { TimelineAsset } from './types';
-
 export class ViewerAsset {
-  readonly #group: DayGroup;
+  readonly #day: TimelineDay;

  intersecting = $derived.by(() => {
    if (!this.position) {
      return false;
    }

-    const store = this.#group.monthGroup.timelineManager;
-    const positionTop = this.#group.absoluteDayGroupTop + this.position.top;
+    const store = this.#day.month.timelineManager;
+    const positionTop = this.#day.absoluteTop + this.position.top;

    return calculateViewerAssetIntersecting(store, positionTop, this.position.height);
  });
@@ -22,8 +21,8 @@ export class ViewerAsset {
  asset: TimelineAsset = <TimelineAsset>$state();
  id: string = $derived(this.asset.id);

-  constructor(group: DayGroup, asset: TimelineAsset) {
-    this.#group = group;
+  constructor(day: TimelineDay, asset: TimelineAsset) {
+    this.#day = day;
    this.asset = asset;
  }
 }
--- a/web/src/lib/modals/NavigateToDateModal.svelte
+++ b/web/src/lib/modals/NavigateToDateModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
  import DateInput from '$lib/elements/DateInput.svelte';
-  import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
  import { getPreferredTimeZone, getTimezones, toDatetime, type ZoneOption } from '$lib/modals/timezone-utils';
  import { Button, HStack, Modal, ModalBody, ModalFooter, VStack } from '@immich/ui';
--- a/web/src/lib/utils/actions.ts
+++ b/web/src/lib/utils/actions.ts
@@ -1,5 +1,5 @@
 import ToastAction from '$lib/components/ToastAction.svelte';
-import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import type { StackResponse } from '$lib/utils/asset-utils';
 import { AssetVisibility, deleteAssets as deleteBulk, restoreAssets } from '@immich/sdk';
@@ -109,5 +109,5 @@ export function updateUnstackedAssetInTimeline(timelineManager: TimelineManager,
    },
  );

-  timelineManager.addAssets(assets);
+  timelineManager.upsertAssets(assets);
 }
--- a/web/src/lib/utils/asset-utils.ts
+++ b/web/src/lib/utils/asset-utils.ts
@@ -3,7 +3,7 @@ import ToastAction from '$lib/components/ToastAction.svelte';
 import { AppRoute } from '$lib/constants';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 import { downloadManager } from '$lib/managers/download-manager.svelte';
-import type { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
 import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
 import { assetsSnapshot } from '$lib/managers/timeline-manager/utils.svelte';
 import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -490,17 +490,17 @@ export const selectAllAssets = async (timelineManager: TimelineManager, assetInt
  isSelectingAllAssets.set(true);

  try {
-    for (const monthGroup of timelineManager.months) {
-      await timelineManager.loadMonthGroup(monthGroup.yearMonth);
+    for (const month of timelineManager.months) {
+      await timelineManager.loadMonth(month.yearMonth);

      if (!get(isSelectingAllAssets)) {
        assetInteraction.clearMultiselect();
        break; // Cancelled
      }
-      assetInteraction.selectAssets(assetsSnapshot([...monthGroup.assetsIterator()]));
+      assetInteraction.selectAssets(assetsSnapshot([...month.assetsIterator()]));

-      for (const dateGroup of monthGroup.dayGroups) {
-        assetInteraction.addGroupToMultiselectGroup(dateGroup.groupTitle);
+      for (const dateGroup of month.days) {
+        assetInteraction.addGroupToMultiselectGroup(dateGroup.dayTitle);
      }
    }
  } catch (error) {
--- a/web/src/lib/utils/timeline-util.spec.ts
+++ b/web/src/lib/utils/timeline-util.spec.ts
@@ -1,9 +1,9 @@
 import { locale } from '$lib/stores/preferences.store';
 import { parseUtcDate } from '$lib/utils/date-time';
-import { formatGroupTitle, toISOYearMonthUTC } from '$lib/utils/timeline-util';
+import { formatDayTitle, toISOYearMonthUTC } from '$lib/utils/timeline-util';
 import { DateTime } from 'luxon';

-describe('formatGroupTitle', () => {
+describe('formatDayTitle', () => {
  beforeAll(() => {
    vi.useFakeTimers();
    process.env.TZ = 'UTC';
@@ -18,63 +18,63 @@ describe('formatGroupTitle', () => {
  it('formats today', () => {
    const date = parseUtcDate('2024-07-27T01:00:00Z');
    locale.set('en');
-    expect(formatGroupTitle(date)).toBe('today');
+    expect(formatDayTitle(date)).toBe('today');
    locale.set('es');
-    expect(formatGroupTitle(date)).toBe('hoy');
+    expect(formatDayTitle(date)).toBe('hoy');
  });

  it('formats yesterday', () => {
    const date = parseUtcDate('2024-07-26T23:59:59Z');
    locale.set('en');
-    expect(formatGroupTitle(date)).toBe('yesterday');
+    expect(formatDayTitle(date)).toBe('yesterday');
    locale.set('fr');
-    expect(formatGroupTitle(date)).toBe('hier');
+    expect(formatDayTitle(date)).toBe('hier');
  });

  it('formats last week', () => {
    const date = parseUtcDate('2024-07-21T00:00:00Z');
    locale.set('en');
-    expect(formatGroupTitle(date)).toBe('Sunday');
+    expect(formatDayTitle(date)).toBe('Sunday');
    locale.set('ar-SA');
-    expect(formatGroupTitle(date)).toBe('الأحد');
+    expect(formatDayTitle(date)).toBe('الأحد');
  });

  it('formats date 7 days ago', () => {
    const date = parseUtcDate('2024-07-20T00:00:00Z');
    locale.set('en');
-    expect(formatGroupTitle(date)).toBe('Sat, Jul 20');
+    expect(formatDayTitle(date)).toBe('Sat, Jul 20');
    locale.set('de');
-    expect(formatGroupTitle(date)).toBe('Sa., 20. Juli');
+    expect(formatDayTitle(date)).toBe('Sa., 20. Juli');
  });

  it('formats date this year', () => {
    const date = parseUtcDate('2020-01-01T00:00:00Z');
    locale.set('en');
-    expect(formatGroupTitle(date)).toBe('Wed, Jan 1, 2020');
+    expect(formatDayTitle(date)).toBe('Wed, Jan 1, 2020');
    locale.set('ja');
-    expect(formatGroupTitle(date)).toBe('2020年1月1日(水)');
+    expect(formatDayTitle(date)).toBe('2020年1月1日(水)');
  });

  it('formats future date', () => {
    const tomorrow = parseUtcDate('2024-07-28T00:00:00Z');
    locale.set('en');
-    expect(formatGroupTitle(tomorrow)).toBe('Sun, Jul 28');
+    expect(formatDayTitle(tomorrow)).toBe('Sun, Jul 28');

    const nextMonth = parseUtcDate('2024-08-28T00:00:00Z');
    locale.set('en');
-    expect(formatGroupTitle(nextMonth)).toBe('Wed, Aug 28');
+    expect(formatDayTitle(nextMonth)).toBe('Wed, Aug 28');

    const nextYear = parseUtcDate('2025-01-10T12:00:00Z');
    locale.set('en');
-    expect(formatGroupTitle(nextYear)).toBe('Fri, Jan 10, 2025');
+    expect(formatDayTitle(nextYear)).toBe('Fri, Jan 10, 2025');
  });

  it('returns "Invalid DateTime" when date is invalid', () => {
    const date = DateTime.invalid('test');
    locale.set('en');
-    expect(formatGroupTitle(date)).toBe('Invalid DateTime');
+    expect(formatDayTitle(date)).toBe('Invalid DateTime');
    locale.set('es');
-    expect(formatGroupTitle(date)).toBe('Invalid DateTime');
+    expect(formatDayTitle(date)).toBe('Invalid DateTime');
  });
 });

--- a/web/src/lib/utils/timeline-util.ts
+++ b/web/src/lib/utils/timeline-util.ts
@@ -3,7 +3,6 @@ import { locale } from '$lib/stores/preferences.store';
 import { getAssetRatio } from '$lib/utils/asset-utils';
 import { AssetTypeEnum, type AssetResponseDto } from '@immich/sdk';
 import { DateTime, type LocaleOptions } from 'luxon';
-import { SvelteSet } from 'svelte/reactivity';
 import { get } from 'svelte/store';

 // Move type definitions to the top
@@ -100,7 +99,7 @@ export const toISOYearMonthUTC = ({ year, month }: TimelineYearMonth): string =>
  return `${yearFull}-${monthFull}-01T00:00:00.000Z`;
 };

-export function formatMonthGroupTitle(_date: DateTime): string {
+export function formatMonthTitle(_date: DateTime): string {
  if (!_date.isValid) {
    return _date.toString();
  }
@@ -114,7 +113,7 @@ export function formatMonthGroupTitle(_date: DateTime): string {
  );
 }

-export function formatGroupTitle(_date: DateTime): string {
+export function formatDayTitle(_date: DateTime): string {
  if (!_date.isValid) {
    return _date.toString();
  }
@@ -222,8 +221,13 @@ export const plainDateTimeCompare = (ascending: boolean, a: TimelineDateTime, b:
  return aDateTime.millisecond - bDateTime.millisecond;
 };

-export function setDifference<T>(setA: Set<T>, setB: Set<T>): SvelteSet<T> {
-  const result = new SvelteSet<T>();
+export function setDifference<T>(setA: Set<T>, setB: Set<T>): Set<T> {
+  // Check if native Set.prototype.difference is available (ES2025)
+  const setWithDifference = setA as unknown as Set<T> & { difference?: (other: Set<T>) => Set<T> };
+  if (setWithDifference.difference && typeof setWithDifference.difference === 'function') {
+    return setWithDifference.difference(setB);
+  }
+  const result = new Set<T>();
  for (const value of setA) {
    if (!setB.has(value)) {
      result.add(value);
@@ -231,3 +235,13 @@ export function setDifference<T>(setA: Set<T>, setB: Set<T>): SvelteSet<T> {
  }
  return result;
 }
+
+/**
+ * Removes all elements of setB from setA in-place (mutates setA).
+ */
+export function setDifferenceInPlace<T>(setA: Set<T>, setB: Set<T>): Set<T> {
+  for (const value of setB) {
+    setA.delete(value);
+  }
+  return setA;
+}
--- 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
@@ -29,7 +29,7 @@
  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';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
  import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';
  import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
@@ -141,7 +141,7 @@
    const asset =
      $slideshowNavigation === SlideshowNavigation.Shuffle
        ? await timelineManager.getRandomAsset()
-        : timelineManager.months[0]?.dayGroups[0]?.viewerAssets[0]?.asset;
+        : timelineManager.months[0]?.days[0]?.viewerAssets[0]?.asset;
    if (asset) {
      handlePromiseError(setAssetId(asset.id).then(() => ($slideshowState = SlideshowState.PlaySlideshow)));
    }
@@ -266,7 +266,7 @@
  };

  const handleUndoRemoveAssets = async (assets: TimelineAsset[]) => {
-    timelineManager.addAssets(assets);
+    timelineManager.upsertAssets(assets);
    await refreshAlbum();
  };

--- a/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/archive/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -14,7 +14,7 @@
  import { AssetAction } from '$lib/constants';

  import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { AssetVisibility } from '@immich/sdk';
  import { mdiDotsVertical, mdiPlus } from '@mdi/js';
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -17,7 +17,7 @@
  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.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 { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { preferences } from '$lib/stores/user.store';
  import { mdiDotsVertical, mdiPlus } from '@mdi/js';
@@ -94,7 +94,7 @@
      <DeleteAssets
        menuItem
        onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
-        onUndoDelete={(assets) => timelineManager.addAssets(assets)}
+        onUndoDelete={(assets) => timelineManager.upsertAssets(assets)}
      />
    </ButtonContextMenu>
  </AssetSelectControlBar>
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -12,7 +12,7 @@
  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.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 { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { AssetVisibility, lockAuthSession } from '@immich/sdk';
  import { Button } from '@immich/ui';
--- 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
@@ -26,7 +26,7 @@
  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.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 { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
  import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
  import PersonMergeSuggestionModal from '$lib/modals/PersonMergeSuggestionModal.svelte';
@@ -339,7 +339,7 @@
  };

  const handleUndoDeleteAssets = async (assets: TimelineAsset[]) => {
-    timelineManager.addAssets(assets);
+    timelineManager.upsertAssets(assets);
    await updateAssetCount();
  };

--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -22,7 +22,7 @@
  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.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 { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
  import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
@@ -69,12 +69,12 @@

  const handleLink: OnLink = ({ still, motion }) => {
    timelineManager.removeAssets([motion.id]);
-    timelineManager.updateAssets([still]);
+    timelineManager.upsertAssets([still]);
  };

  const handleUnlink: OnUnlink = ({ still, motion }) => {
-    timelineManager.addAssets([motion]);
-    timelineManager.updateAssets([still]);
+    timelineManager.upsertAssets([motion]);
+    timelineManager.upsertAssets([still]);
  };

  const handleSetVisibility = (assetIds: string[]) => {
@@ -153,7 +153,7 @@
      <DeleteAssets
        menuItem
        onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)}
-        onUndoDelete={(assets) => timelineManager.addAssets(assets)}
+        onUndoDelete={(assets) => timelineManager.upsertAssets(assets)}
      />
      <SetVisibilityAction menuItem onVisibilitySet={handleSetVisibility} />
      <hr />
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -8,7 +8,7 @@
  import Timeline from '$lib/components/timeline/Timeline.svelte';
  import { AppRoute, AssetAction, QueryParameter } from '$lib/constants';
  import SkipLink from '$lib/elements/SkipLink.svelte';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import TagCreateModal from '$lib/modals/TagCreateModal.svelte';
  import TagEditModal from '$lib/modals/TagEditModal.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
--- a/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/trash/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -9,7 +9,7 @@
  import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.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 { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
  import { handlePromiseError } from '$lib/utils';
--- a/web/src/routes/(user)/utilities/geolocation/+page.svelte
+++ b/web/src/routes/(user)/utilities/geolocation/+page.svelte
@@ -5,8 +5,8 @@
  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';
-  import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
+  import { TimelineDay } from '$lib/managers/timeline-manager/TimelineDay.svelte';
+  import { TimelineManager } from '$lib/managers/timeline-manager/TimelineManager.svelte';
  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
  import GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.svelte';
  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
@@ -63,7 +63,7 @@
      }),
    );

-    timelineManager.updateAssets(updatedAssets);
+    timelineManager.upsertAssets(updatedAssets);

    handleDeselectAll();
  };
@@ -113,11 +113,11 @@
  const handleThumbnailClick = (
    asset: TimelineAsset,
    timelineManager: TimelineManager,
-    dayGroup: DayGroup,
+    day: TimelineDay,
    onClick: (
      timelineManager: TimelineManager,
      assets: TimelineAsset[],
-      groupTitle: string,
+      dayTitle: string,
      asset: TimelineAsset,
    ) => void,
  ) => {
@@ -129,7 +129,7 @@
      location = { latitude: asset.latitude!, longitude: asset.longitude! };
      void setQueryValue('at', asset.id);
    } else {
-      onClick(timelineManager, dayGroup.getAssets(), dayGroup.groupTitle, asset);
+      onClick(timelineManager, day.getAssets(), day.dayTitle, asset);
    }
  };
 </script>
Author	SHA1	Message	Date
midzelis	928b69f415	refactor(web): rename DayGroup/MonthGroup to TimelineDay/TimelineMonth - Rename classes: DayGroup → TimelineDay, MonthGroup → TimelineMonth - Use short variable names: dayGroup → day, monthGroup → month - Update all method names and properties for consistency - Convert relative imports to $lib alias convention No functional changes.	2025-11-04 00:40:48 +00:00
midzelis	d6ed52806f	Run ops even if asset no longer matches criteria; add tests	2025-11-04 00:27:29 +00:00
midzelis	9a5e8c07ab	Don't sort initial load of month from server	2025-11-02 16:54:57 +00:00
midzelis	9bcbf003e6	Make the operation more efficient	2025-11-02 16:54:57 +00:00
midzelis	8e97c584cf	refactor(web): move timeline-manager ops back into month-group; clean up API Consolidates asset operation logic within TimelineManager class and removes the now redundant operations-support.svelte.ts file. Combines addAsset/updateAsset to be upsertAsset. Changes: - Move `addAssetsToMonthGroups` logic into TimelineManager's `addAssetsToSegments`, `upsertAssetIntoSegment`, `postCreateSegments`, and `postUpsert` methods - Move `runAssetOperation` from operations-support into TimelineManager's private `#runAssetOperation` method - Rename public `addAssets`/`updateAssets` methods to unified `upsertAssets` for consistency - Delete internal/operations-support.svelte.ts - Update WebsocketSupport to use `upsertAssets` for both add and update operations - Fix AssetOperation return type to allow undefined/void operations (not just `{ remove: boolean }`) - Update MonthGroup constructor to accept `loaded` parameter for better initialization control - Update all test references from `addAssets`/`updateAssets` to `upsertAssets` This refactoring improves code maintainability by eliminating duplicate logic and consolidating all asset operations within the TimelineManager class where they belong.	2025-11-02 16:54:57 +00:00