change-date -> DateSelectionModal; use luxon; use handle* for callback fn name

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -5,9 +5,9 @@
   import DetailPanelLocation from '$lib/components/asset-viewer/detail-panel-location.svelte';
   import DetailPanelRating from '$lib/components/asset-viewer/detail-panel-star-rating.svelte';
   import DetailPanelTags from '$lib/components/asset-viewer/detail-panel-tags.svelte';
-  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
   import { AppRoute, QueryParameter, timeToLoadTheMap } from '$lib/constants';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+  import DateSelectionModal from '$lib/modals/DateSelectionModal.svelte';
   import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
   import { boundingBoxesArray } from '$lib/stores/people.store';
   import { locale } from '$lib/stores/preferences.store';
@@ -110,7 +110,7 @@
   const toggleAssetPath = () => (showAssetPath = !showAssetPath);
 
   const showChangeDate = async () => {
-    const result = await modalManager.show(ChangeDate, {
+    const result = await modalManager.show(DateSelectionModal, {
       initialDate: dateTime,
       initialTimeZone: timeZone ?? '',
       withDuration: false,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import DateSelectionModal from '$lib/modals/DateSelectionModal.svelte';
   import { user } from '$lib/stores/user.store';
   import { getSelectedAssets } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
@@ -43,7 +43,7 @@
   };
 
   const showChangeDate = async () => {
-    const result = await modalManager.show(ChangeDate, {
+    const result = await modalManager.show(DateSelectionModal, {
       initialDate: DateTime.now(),
       currentInterval: getCurrentInterval(),
     });

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

@@ -2,7 +2,6 @@
   import { goto } from '$app/navigation';
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import DeleteAssetDialog from '$lib/components/photos-page/delete-asset-dialog.svelte';
-  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
   import {
     setFocusToAsset as setFocusAssetInit,
     setFocusTo as setFocusToInit,
@@ -10,6 +9,7 @@
   import { AppRoute } from '$lib/constants';
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import DateSelectionModal from '$lib/modals/DateSelectionModal.svelte';
   import ShortcutsModal from '$lib/modals/ShortcutsModal.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@@ -143,8 +143,8 @@
     }
   });
 
-  const openChangeDateDialog = async () => {
-    const result = await modalManager.show(ChangeDate, {
+  const handleOpenDateModal = async () => {
+    const result = await modalManager.show(DateSelectionModal, {
       withDuration: false,
       title: $t('navigate_to_time'),
       initialDate: DateTime.now(),
@@ -183,7 +183,7 @@
         { shortcut: { key: 'M', shift: true }, onShortcut: () => setFocusTo('later', 'month') },
         { shortcut: { key: 'Y' }, onShortcut: () => setFocusTo('earlier', 'year') },
         { shortcut: { key: 'Y', shift: true }, onShortcut: () => setFocusTo('later', 'year') },
-        { shortcut: { key: 'G' }, onShortcut: openChangeDateDialog },
+        { shortcut: { key: 'G' }, onShortcut: handleOpenDateModal },
       ];
       if (onEscape) {
         shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape });

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

@@ -1,5 +1,6 @@
 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';
@@ -145,16 +146,14 @@ export function findMonthGroupForDate(timelineManager: TimelineManager, targetYe
 }
 
 export function findClosestGroupForDate(months: MonthGroup[], targetYearMonth: TimelineYearMonth) {
+  const targetDate = DateTime.fromObject({ year: targetYearMonth.year, month: targetYearMonth.month });
+
   let closestMonth: MonthGroup | undefined;
   let minDifference = Number.MAX_SAFE_INTEGER;
 
   for (const month of months) {
-    const { year, month: monthNum } = month.yearMonth;
-
-    // Calculate the absolute difference in months
-    const monthsA = year * 12 + monthNum;
-    const monthsB = targetYearMonth.year * 12 + targetYearMonth.month;
-    const totalDiff = Math.abs(monthsA - monthsB);
+    const monthDate = DateTime.fromObject({ year: month.yearMonth.year, month: month.yearMonth.month });
+    const totalDiff = Math.abs(monthDate.diff(targetDate, 'months').months);
 
     if (totalDiff < minDifference) {
       minDifference = totalDiff;

web/src/lib/modals/DateSelectionModal.spec.ts

@@ -3,9 +3,9 @@ import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock';
 import { fireEvent, render, screen, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { DateTime } from 'luxon';
-import ChangeDate from './change-date.svelte';
+import DateSelectionModal from './DateSelectionModal.svelte';
 
-describe('ChangeDate component', () => {
+describe('DateSelectionModal component', () => {
   const initialDate = DateTime.fromISO('2024-01-01');
   const initialTimeZone = 'Europe/Berlin';
   const targetDate = DateTime.fromISO('2024-01-01').setZone('UTC+1', {
@@ -40,13 +40,13 @@ describe('ChangeDate component', () => {
   });
 
   test('should render correct values', () => {
-    render(ChangeDate, { initialDate, initialTimeZone, onClose });
+    render(DateSelectionModal, { initialDate, initialTimeZone, onClose });
     expect(getDateInput().value).toBe('2024-01-01T00:00');
     expect(getTimeZoneInput().value).toBe('Europe/Berlin (+01:00)');
   });
 
   test('calls onConfirm with correct date on confirm', async () => {
-    render(ChangeDate, {
+    render(DateSelectionModal, {
       props: { initialDate, initialTimeZone, onClose },
     });
 
@@ -60,7 +60,7 @@ describe('ChangeDate component', () => {
   });
 
   test('calls onCancel on cancel', async () => {
-    render(ChangeDate, {
+    render(DateSelectionModal, {
       props: { initialDate, initialTimeZone, onClose },
     });
 
@@ -75,13 +75,13 @@ describe('ChangeDate component', () => {
       keepLocalTime: true,
     });
     test('should render correct timezone with offset', () => {
-      render(ChangeDate, { initialDate: dstDate, initialTimeZone, onClose });
+      render(DateSelectionModal, { initialDate: dstDate, initialTimeZone, onClose });
 
       expect(getTimeZoneInput().value).toBe('Europe/Berlin (+02:00)');
     });
 
     test('calls onConfirm with correct date on confirm', async () => {
-      render(ChangeDate, {
+      render(DateSelectionModal, {
         props: { initialDate: dstDate, initialTimeZone, onClose },
       });
 
@@ -96,7 +96,7 @@ describe('ChangeDate component', () => {
   });
 
   test('calls onConfirm with correct offset in relative mode', async () => {
-    render(ChangeDate, {
+    render(DateSelectionModal, {
       props: { initialDate, initialTimeZone, currentInterval, onClose },
     });
 
@@ -125,7 +125,7 @@ describe('ChangeDate component', () => {
 
   test('calls onConfirm with correct timeZone in relative mode', async () => {
     const user = userEvent.setup();
-    render(ChangeDate, {
+    render(DateSelectionModal, {
       props: { initialDate, initialTimeZone, currentInterval, onClose },
     });
 
@@ -188,7 +188,7 @@ describe('ChangeDate component', () => {
       },
     ];
 
-    const component = render(ChangeDate, {
+    const component = render(DateSelectionModal, {
       props: { initialDate, initialTimeZone, currentInterval, onClose },
     });