fix: navigate to time action

Author: midzelis

i18n/en.json

@@ -1364,6 +1364,8 @@
   "my_albums": "My albums",
   "name": "Name",
   "name_or_nickname": "Name or nickname",
+  "navigate": "Navigate",
+  "navigate_to_time": "Navigate to Time",
   "network_requirement_photos_upload": "Use cellular data to backup photos",
   "network_requirement_videos_upload": "Use cellular data to backup videos",
   "network_requirements": "Network Requirements",

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

@@ -5,10 +5,7 @@
   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, {
-    type AbsoluteResult,
-    type RelativeResult,
-  } from '$lib/components/shared-components/change-date.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 { isFaceEditMode } from '$lib/stores/face-edit.svelte';
@@ -24,7 +21,7 @@
   import { fromISODateTime, fromISODateTimeUTC } from '$lib/utils/timeline-util';
   import { getParentPath } from '$lib/utils/tree-utils';
   import { AssetMediaSize, getAssetInfo, updateAsset, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';
-  import { Icon, IconButton, LoadingSpinner } from '@immich/ui';
+  import { Icon, IconButton, LoadingSpinner, modalManager } from '@immich/ui';
   import {
     mdiCalendar,
     mdiCameraIris,
@@ -112,18 +109,24 @@
 
   const toggleAssetPath = () => (showAssetPath = !showAssetPath);
 
-  let isShowChangeDate = $state(false);
-
-  async function handleConfirmChangeDate(result: AbsoluteResult | RelativeResult) {
-    isShowChangeDate = false;
+  const showChangeDate = async () => {
+    const result = await modalManager.show(ChangeDate, {
+      initialDate: dateTime,
+      initialTimeZone: timeZone ?? '',
+      withDuration: false,
+      timezoneInput: false,
+    });
+    if (!result) {
+      return;
+    }
     try {
       if (result.mode === 'absolute') {
         await updateAsset({ id: asset.id, updateAssetDto: { dateTimeOriginal: result.date } });
       }
     } catch (error) {
       handleError(error, $t('errors.unable_to_change_date'));
     }
-  }
+  };
 </script>
 
 <section class="relative p-2">
@@ -280,7 +283,7 @@
       <button
         type="button"
         class="flex w-full text-start justify-between place-items-start gap-4 py-4"
-        onclick={() => (isOwner ? (isShowChangeDate = true) : null)}
+        onclick={() => (isOwner ? showChangeDate() : null)}
         title={isOwner ? $t('edit_date') : ''}
         class:hover:text-primary={isOwner}
       >
@@ -336,16 +339,6 @@
       </div>
     {/if}
 
-    {#if isShowChangeDate}
-      <ChangeDate
-        initialDate={dateTime}
-        initialTimeZone={timeZone ?? ''}
-        withDuration={false}
-        onConfirm={handleConfirmChangeDate}
-        onCancel={() => (isShowChangeDate = false)}
-      />
-    {/if}
-
     <div class="flex gap-4 py-4">
       <div><Icon icon={mdiImageOutline} size="24" /></div>
 

web/src/lib/components/shared-components/change-date.spec.ts

@@ -8,18 +8,20 @@ import ChangeDate from './change-date.svelte';
 describe('ChangeDate component', () => {
   const initialDate = DateTime.fromISO('2024-01-01');
   const initialTimeZone = 'Europe/Berlin';
+  const targetDate = DateTime.fromISO('2024-01-01').setZone('UTC+1', {
+    keepLocalTime: true,
+  });
   const currentInterval = {
     start: DateTime.fromISO('2000-02-01T14:00:00+01:00'),
     end: DateTime.fromISO('2001-02-01T14:00:00+01:00'),
   };
-  const onCancel = vi.fn();
-  const onConfirm = vi.fn();
+  const onClose = vi.fn();
 
   const getRelativeInputToggle = () => screen.getByTestId('edit-by-offset-switch');
   const getDateInput = () => screen.getByLabelText('date_and_time') as HTMLInputElement;
   const getTimeZoneInput = () => screen.getByLabelText('timezone') as HTMLInputElement;
-  const getCancelButton = () => screen.getByText('Cancel');
-  const getConfirmButton = () => screen.getByText('Confirm');
+  const getCancelButton = () => screen.getByText('cancel');
+  const getConfirmButton = () => screen.getByText('confirm');
 
   beforeEach(() => {
     vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());
@@ -38,54 +40,64 @@ describe('ChangeDate component', () => {
   });
 
   test('should render correct values', () => {
-    render(ChangeDate, { initialDate, initialTimeZone, onCancel, onConfirm });
+    render(ChangeDate, { 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, {
-      props: { initialDate, initialTimeZone, onCancel, onConfirm },
+      props: { initialDate, initialTimeZone, onClose },
     });
 
     await fireEvent.click(getConfirmButton());
 
-    expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-01-01T00:00:00.000+01:00' });
+    expect(onClose).toHaveBeenCalledWith({
+      mode: 'absolute',
+      date: '2024-01-01T00:00:00.000+01:00',
+      dateTime: targetDate,
+    });
   });
 
   test('calls onCancel on cancel', async () => {
     render(ChangeDate, {
-      props: { initialDate, initialTimeZone, onCancel, onConfirm },
+      props: { initialDate, initialTimeZone, onClose },
     });
 
     await fireEvent.click(getCancelButton());
 
-    expect(onCancel).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
   });
 
   describe('when date is in daylight saving time', () => {
     const dstDate = DateTime.fromISO('2024-07-01');
-
+    const targetDate = DateTime.fromISO('2024-07-01').setZone('UTC+2', {
+      keepLocalTime: true,
+    });
     test('should render correct timezone with offset', () => {
-      render(ChangeDate, { initialDate: dstDate, initialTimeZone, onCancel, onConfirm });
+      render(ChangeDate, { initialDate: dstDate, initialTimeZone, onClose });
 
       expect(getTimeZoneInput().value).toBe('Europe/Berlin (+02:00)');
     });
 
     test('calls onConfirm with correct date on confirm', async () => {
       render(ChangeDate, {
-        props: { initialDate: dstDate, initialTimeZone, onCancel, onConfirm },
+        props: { initialDate: dstDate, initialTimeZone, onClose },
       });
 
       await fireEvent.click(getConfirmButton());
 
-      expect(onConfirm).toHaveBeenCalledWith({ mode: 'absolute', date: '2024-07-01T00:00:00.000+02:00' });
+      expect(onClose).toHaveBeenCalledWith({
+        mode: 'absolute',
+        date: '2024-07-01T00:00:00.000+02:00',
+        dateTime: targetDate,
+      });
     });
   });
 
   test('calls onConfirm with correct offset in relative mode', async () => {
     render(ChangeDate, {
-      props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
+      props: { initialDate, initialTimeZone, currentInterval, onClose },
     });
 
     await fireEvent.click(getRelativeInputToggle());
@@ -104,7 +116,7 @@ describe('ChangeDate component', () => {
 
     await fireEvent.click(getConfirmButton());
 
-    expect(onConfirm).toHaveBeenCalledWith({
+    expect(onClose).toHaveBeenCalledWith({
       mode: 'relative',
       duration: days * 60 * 24 + hours * 60 + minutes,
       timeZone: undefined,
@@ -114,7 +126,7 @@ describe('ChangeDate component', () => {
   test('calls onConfirm with correct timeZone in relative mode', async () => {
     const user = userEvent.setup();
     render(ChangeDate, {
-      props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
+      props: { initialDate, initialTimeZone, currentInterval, onClose },
     });
 
     await user.click(getRelativeInputToggle());
@@ -123,7 +135,7 @@ describe('ChangeDate component', () => {
     await user.keyboard('{Enter}');
 
     await user.click(getConfirmButton());
-    expect(onConfirm).toHaveBeenCalledWith({
+    expect(onClose).toHaveBeenCalledWith({
       mode: 'relative',
       duration: 0,
       timeZone: initialTimeZone,
@@ -177,7 +189,7 @@ describe('ChangeDate component', () => {
     ];
 
     const component = render(ChangeDate, {
-      props: { initialDate, initialTimeZone, currentInterval, onCancel, onConfirm },
+      props: { initialDate, initialTimeZone, currentInterval, onClose },
     });
 
     for (const testCase of testCases) {

web/src/lib/components/shared-components/change-date.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
+  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
   import DateInput from '$lib/elements/DateInput.svelte';
   import DurationInput from '$lib/elements/DurationInput.svelte';
   import { locale } from '$lib/stores/preferences.store';
-  import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util.js';
-  import { ConfirmModal, Field, Switch } from '@immich/ui';
-  import { mdiCalendarEditOutline } from '@mdi/js';
+  import { getDateTimeOffsetLocaleString } from '$lib/utils/timeline-util';
+  import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui';
+  import { mdiCalendarEdit } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import { get } from 'svelte/store';
-  import Combobox, { type ComboBoxOption } from './combobox.svelte';
 
   interface Props {
     title?: string;
@@ -17,8 +17,9 @@
     timezoneInput?: boolean;
     withDuration?: boolean;
     currentInterval?: { start: DateTime; end: DateTime };
-    onCancel: () => void;
-    onConfirm: (result: AbsoluteResult | RelativeResult) => void;
+    icon?: string;
+    confirmText?: string;
+    onClose: (result?: AbsoluteResult | RelativeResult) => void;
   }
 
   let {
@@ -28,13 +29,15 @@
     timezoneInput = true,
     withDuration = true,
     currentInterval = undefined,
-    onCancel,
-    onConfirm,
+    icon = mdiCalendarEdit,
+    confirmText = $t('confirm'),
+    onClose,
   }: Props = $props();
 
   export type AbsoluteResult = {
     mode: 'absolute';
     date: string;
+    dateTime: DateTime<true>;
   };
 
   export type RelativeResult = {
@@ -191,14 +194,23 @@
       const fixedOffsetZone = `UTC${offsetMinutes >= 0 ? '+' : ''}${Duration.fromObject({ minutes: offsetMinutes }).toFormat('hh:mm')}`;
 
       // Create a DateTime object in this fixed-offset zone, preserving the local time.
-      const finalDateTime = DateTime.fromObject(dtComponents.toObject(), { zone: fixedOffsetZone });
-
-      onConfirm({ mode: 'absolute', date: finalDateTime.toISO({ includeOffset: true })! });
+      const fixedOffsetDateTime = DateTime.fromObject(dtComponents.toObject(), {
+        zone: fixedOffsetZone,
+      }) as DateTime<true>;
+
+      onClose({
+        mode: 'absolute',
+        date: fixedOffsetDateTime.toISO({ includeOffset: true })!,
+        dateTime: fixedOffsetDateTime,
+      });
+      return;
     }
 
     if (showRelative && (selectedDuration || selectedRelativeOption)) {
-      onConfirm({ mode: 'relative', duration: selectedDuration, timeZone: selectedRelativeOption?.value });
+      onClose({ mode: 'relative', duration: selectedDuration, timeZone: selectedRelativeOption?.value });
+      return;
     }
+    onClose();
   };
 
   const handleOnSelect = (option?: ComboBoxOption) => {
@@ -234,15 +246,8 @@
   );
 </script>
 
-<ConfirmModal
-  confirmColor="primary"
-  {title}
-  icon={mdiCalendarEditOutline}
-  prompt="Please select a new date:"
-  disabled={!date.isValid}
-  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
->
-  {#snippet promptSnippet()}
+<Modal {title} {icon} {onClose}>
+  <ModalBody>
     {#if withDuration}
       <div class="mb-5">
         <Field label={$t('edit_date_and_time_by_offset')}>
@@ -280,5 +285,15 @@
         </div>
       </div>
     </div>
-  {/snippet}
-</ConfirmModal>
+  </ModalBody>
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
+        {$t('cancel')}
+      </Button>
+      <Button shape="round" color="primary" fullWidth onclick={handleConfirm} disabled={!date.isValid}>
+        {confirmText}
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>