fix(web): timeline time bucket issue (#20438)

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

@@ -1,4 +1,4 @@
-import { setDifference, type TimelinePlainDate } from '$lib/utils/timeline-util';
+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';
@@ -13,11 +13,11 @@ export class GroupInsertionCache {
   changedDayGroups = new SvelteSet<DayGroup>();
   newDayGroups = new SvelteSet<DayGroup>();
 
-  getDayGroup({ year, month, day }: TimelinePlainDate): DayGroup | undefined {
+  getDayGroup({ year, month, day }: TimelineDate): DayGroup | undefined {
     return this.#lookupCache[year]?.[month]?.[day];
   }
 
-  setDayGroup(dayGroup: DayGroup, { year, month, day }: TimelinePlainDate) {
+  setDayGroup(dayGroup: DayGroup, { year, month, day }: TimelineDate) {
     if (!this.#lookupCache[year]) {
       this.#lookupCache[year] = {};
     }

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

@@ -1,7 +1,6 @@
 import { authManager } from '$lib/managers/auth-manager.svelte';
 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';

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

@@ -1,4 +1,4 @@
-import { setDifference, type TimelinePlainDate } from '$lib/utils/timeline-util';
+import { setDifference, type TimelineDate } from '$lib/utils/timeline-util';
 import { AssetOrder } from '@immich/sdk';
 
 import { SvelteSet } from 'svelte/reactivity';
@@ -70,7 +70,7 @@ export function runAssetOperation(
   const changedMonthGroups = new SvelteSet<MonthGroup>();
   let idsToProcess = new SvelteSet(ids);
   const idsProcessed = new SvelteSet<string>();
-  const combinedMoveAssets: { asset: TimelineAsset; date: TimelinePlainDate }[][] = [];
+  const combinedMoveAssets: { asset: TimelineAsset; date: TimelineDate }[][] = [];
   for (const month of timelineManager.months) {
     if (idsToProcess.size > 0) {
       const { moveAssets, processedIds, changedGeometry } = month.runAssetOperation(idsToProcess, operation);

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

@@ -1,4 +1,4 @@
-import { plainDateTimeCompare, type TimelinePlainYearMonth } from '$lib/utils/timeline-util';
+import { plainDateTimeCompare, type TimelineYearMonth } from '$lib/utils/timeline-util';
 import { AssetOrder } from '@immich/sdk';
 import type { MonthGroup } from '../month-group.svelte';
 import type { TimelineManager } from '../timeline-manager.svelte';
@@ -42,7 +42,7 @@ export function findMonthGroupForAsset(timelineManager: TimelineManager, id: str
 
 export function getMonthGroupByDate(
   timelineManager: TimelineManager,
-  targetYearMonth: TimelinePlainYearMonth,
+  targetYearMonth: TimelineYearMonth,
 ): MonthGroup | undefined {
   return timelineManager.months.find(
     (month) => month.yearMonth.year === targetYearMonth.year && month.yearMonth.month === targetYearMonth.month,
@@ -135,7 +135,7 @@ export async function retrieveRange(timelineManager: TimelineManager, start: Ass
   return range;
 }
 
-export function findMonthGroupForDate(timelineManager: TimelineManager, targetYearMonth: TimelinePlainYearMonth) {
+export function findMonthGroupForDate(timelineManager: TimelineManager, targetYearMonth: TimelineYearMonth) {
   for (const month of timelineManager.months) {
     const { year, month: monthNum } = month.yearMonth;
     if (monthNum === targetYearMonth.month && year === targetYearMonth.year) {

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

@@ -10,8 +10,8 @@ import {
   fromTimelinePlainYearMonth,
   getTimes,
   setDifference,
-  type TimelinePlainDateTime,
-  type TimelinePlainYearMonth,
+  type TimelineDateTime,
+  type TimelineYearMonth,
 } from '$lib/utils/timeline-util';
 
 import { t } from 'svelte-i18n';
@@ -47,11 +47,11 @@ export class MonthGroup {
   isHeightActual: boolean = $state(false);
 
   readonly monthGroupTitle: string;
-  readonly yearMonth: TimelinePlainYearMonth;
+  readonly yearMonth: TimelineYearMonth;
 
   constructor(
     store: TimelineManager,
-    yearMonth: TimelinePlainYearMonth,
+    yearMonth: TimelineYearMonth,
     initialCount: number,
     order: AssetOrder = AssetOrder.Desc,
   ) {
@@ -351,7 +351,7 @@ export class MonthGroup {
     }
   }
 
-  findClosest(target: TimelinePlainDateTime) {
+  findClosest(target: TimelineDateTime) {
     const targetDate = fromTimelinePlainDateTime(target);
     let closest = undefined;
     let smallestDiff = Infinity;

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

@@ -3,7 +3,7 @@ import { AssetOrder, getAssetInfo, getTimeBuckets } from '@immich/sdk';
 import { authManager } from '$lib/managers/auth-manager.svelte';
 
 import { CancellableTask } from '$lib/utils/cancellable-task';
-import { toTimelineAsset, type TimelinePlainDateTime, type TimelinePlainYearMonth } from '$lib/utils/timeline-util';
+import { toTimelineAsset, type TimelineDateTime, type TimelineYearMonth } from '$lib/utils/timeline-util';
 
 import { clamp, debounce, isEqual } from 'lodash-es';
 import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
@@ -387,7 +387,7 @@ export class TimelineManager {
     };
   }
 
-  async loadMonthGroup(yearMonth: TimelinePlainYearMonth, options?: { cancelable: boolean }): Promise<void> {
+  async loadMonthGroup(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }): Promise<void> {
     let cancelable = true;
     if (options) {
       cancelable = options.cancelable;
@@ -433,7 +433,7 @@ export class TimelineManager {
     }
   }
 
-  async #loadMonthGroupAtTime(yearMonth: TimelinePlainYearMonth, options?: { cancelable: boolean }) {
+  async #loadMonthGroupAtTime(yearMonth: TimelineYearMonth, options?: { cancelable: boolean }) {
     await this.loadMonthGroup(yearMonth, options);
     return getMonthGroupByDate(this, yearMonth);
   }
@@ -514,7 +514,7 @@ export class TimelineManager {
     return await getAssetWithOffset(this, assetDescriptor, interval, 'earlier');
   }
 
-  async getClosestAssetToDate(dateTime: TimelinePlainDateTime) {
+  async getClosestAssetToDate(dateTime: TimelineDateTime) {
     const monthGroup = findMonthGroupForDate(this, dateTime);
     if (!monthGroup) {
       return;

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

@@ -1,4 +1,4 @@
-import type { TimelinePlainDate, TimelinePlainDateTime } from '$lib/utils/timeline-util';
+import type { TimelineDate, TimelineDateTime } from '$lib/utils/timeline-util';
 import type { AssetStackResponseDto, AssetVisibility } from '@immich/sdk';
 
 export type AssetApiGetTimeBucketsRequest = Parameters<typeof import('@immich/sdk').getTimeBuckets>[0];
@@ -17,8 +17,8 @@ export type TimelineAsset = {
   ownerId: string;
   ratio: number;
   thumbhash: string | null;
-  localDateTime: TimelinePlainDateTime;
-  fileCreatedAt: TimelinePlainDateTime;
+  localDateTime: TimelineDateTime;
+  fileCreatedAt: TimelineDateTime;
   visibility: AssetVisibility;
   isFavorite: boolean;
   isTrashed: boolean;
@@ -35,7 +35,7 @@ export type TimelineAsset = {
 
 export type AssetOperation = (asset: TimelineAsset) => { remove: boolean };
 
-export type MoveAsset = { asset: TimelineAsset; date: TimelinePlainDate };
+export type MoveAsset = { asset: TimelineAsset; date: TimelineDate };
 
 export interface Viewport {
   width: number;