From 2c82e4ce8bf8c82333fff041bad1a200f6cf7d50 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Sun, 21 Dec 2025 03:40:15 +0000
Subject: [PATCH] fix: edit date time doesn't update asset position on the
 timeline

---
 .../memory-page/memory-viewer.svelte          |  2 +-
 .../timeline/actions/ChangeDateAction.svelte  | 23 ++++++++--
 .../AssetSelectionChangeDateModal.svelte      | 45 +++++++++++++++----
 .../[[assetId=id]]/+page.svelte               |  2 +-
 .../[[assetId=id]]/+page.svelte               |  2 +-
 .../[[assetId=id]]/+page.svelte               |  2 +-
 .../[[assetId=id]]/+page.svelte               |  2 +-
 .../[[assetId=id]]/+page.svelte               |  2 +-
 .../(user)/photos/[[assetId=id]]/+page.svelte |  2 +-
 .../[[assetId=id]]/+page.svelte               |  4 +-
 .../[[assetId=id]]/+page.svelte               | 30 ++++++-------
 11 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index cfe11e1026..beadb35476 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -342,7 +342,7 @@
 
       <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
         <DownloadAction menuItem />
-        <ChangeDate menuItem />
+        <ChangeDate menuItem onDateChange={() => init(page)} />
         <ChangeDescription menuItem />
         <ChangeLocation menuItem />
         <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={handleDeleteOrArchiveAssets} />
diff --git a/web/src/lib/components/timeline/actions/ChangeDateAction.svelte b/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
index fdfbf48749..2bd8c29053 100644
--- a/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
+++ b/web/src/lib/components/timeline/actions/ChangeDateAction.svelte
@@ -1,27 +1,44 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import type { DateChangeResult } from '$lib/modals/AssetSelectionChangeDateModal.svelte';
   import AssetSelectionChangeDateModal from '$lib/modals/AssetSelectionChangeDateModal.svelte';
+  import type { TimelineDateTime } from '$lib/utils/timeline-util';
   import { modalManager } from '@immich/ui';
   import { mdiCalendarEditOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
+
   interface Props {
     menuItem?: boolean;
+    onDateChange?: (ids: string[], updateAsset: (asset: TimelineAsset) => void) => void;
   }
 
-  let { menuItem = false }: Props = $props();
+  let { menuItem = false, onDateChange }: Props = $props();
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
   const handleChangeDate = async () => {
-    const success = await modalManager.show(AssetSelectionChangeDateModal, {
+    const result = await modalManager.show(AssetSelectionChangeDateModal, {
       initialDate: DateTime.now(),
       assets: getOwnedAssets(),
     });
-    if (success) {
+    if (result) {
+      const ids = result.assets.map((a) => a.id);
+      onDateChange?.(ids, (asset) => {
+        const updatedDateTime = getUpdatedDateTime(asset, result);
+        asset.localDateTime = updatedDateTime.toObject() as TimelineDateTime;
+      });
       clearSelect();
     }
   };
+
+  function getUpdatedDateTime(asset: TimelineAsset, result: DateChangeResult): DateTime {
+    const { localDateTime } = asset;
+    const currentDateTime = DateTime.fromObject(localDateTime, { zone: result.timeZone });
+
+    return result.type === 'relative' ? currentDateTime.plus({ minutes: result.offsetMinutes }) : result.newDateTime;
+  }
 </script>
 
 {#if menuItem}
diff --git a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
index 8eb1a481cc..c9e7c57c75 100644
--- a/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
+++ b/web/src/lib/modals/AssetSelectionChangeDateModal.svelte
@@ -1,8 +1,26 @@
+<script lang="ts" module>
+  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
+  import type { DateTime as DateTimeType } from 'luxon';
+
+  export type DateChangeResult =
+    | {
+        type: 'relative';
+        offsetMinutes: number;
+        timeZone: string;
+        assets: TimelineAsset[];
+      }
+    | {
+        type: 'absolute';
+        newDateTime: DateTimeType;
+        timeZone: string;
+        assets: TimelineAsset[];
+      };
+</script>
+
 <script lang="ts">
   import Combobox from '$lib/components/shared-components/combobox.svelte';
   import DateInput from '$lib/elements/DateInput.svelte';
   import DurationInput from '$lib/elements/DurationInput.svelte';
-  import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { getPreferredTimeZone, getTimezones, toIsoDate, type ZoneOption } from '$lib/modals/timezone-utils';
   import { user } from '$lib/stores/user.store';
   import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
@@ -17,7 +35,7 @@
     initialDate?: DateTime;
     initialTimeZone?: string;
     assets: TimelineAsset[];
-    onClose: (success: boolean) => void;
+    onClose: (result: DateChangeResult | undefined) => void;
   }
   let { initialDate = DateTime.now(), initialTimeZone, assets, onClose }: Props = $props();
 
@@ -32,24 +50,35 @@
 
   const handleConfirm = async () => {
     const ids = getOwnedAssetsWithWarning(assets, $user);
+    const timeZone = selectedOption?.value ?? 'UTC';
     try {
       if (showRelative && (selectedDuration || selectedOption)) {
         await updateAssets({
           assetBulkUpdateDto: {
             ids,
             dateTimeRelative: selectedDuration,
-            timeZone: selectedOption?.value,
+            timeZone,
           },
         });
-        onClose(true);
+        onClose({
+          type: 'relative',
+          offsetMinutes: selectedDuration,
+          timeZone,
+          assets,
+        });
         return;
       }
       const isoDate = toIsoDate(selectedDate, selectedOption);
       await updateAssets({ assetBulkUpdateDto: { ids, dateTimeOriginal: isoDate } });
-      onClose(true);
+      onClose({
+        type: 'absolute',
+        newDateTime: date,
+        timeZone,
+        assets,
+      });
     } catch (error) {
       handleError(error, $t('errors.unable_to_change_date'));
-      onClose(false);
+      onClose(undefined);
     }
   };
 
@@ -63,7 +92,7 @@
   const date = $derived(DateTime.fromISO(selectedDate, { zone: selectedOption?.value, setZone: true }));
 </script>
 
-<Modal title={$t('edit_date_and_time')} icon={mdiCalendarEdit} onClose={() => onClose(false)} size="small">
+<Modal title={$t('edit_date_and_time')} icon={mdiCalendarEdit} onClose={() => onClose(undefined)} size="small">
   <ModalBody>
     <Field label={$t('edit_date_and_time_by_offset')}>
       <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} class="mb-2" />
@@ -117,7 +146,7 @@
   </ModalBody>
   <ModalFooter>
     <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose(undefined)}>
         {$t('cancel')}
       </Button>
       <Button shape="round" color="primary" fullWidth onclick={handleConfirm} disabled={!date.isValid}>
diff --git 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
index 3f4d3dd39f..51f7b93df7 100644
--- 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
@@ -563,7 +563,7 @@
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')} offset={{ x: 175, y: 25 }}>
           <DownloadAction menuItem filename="{album.albumName}.zip" />
           {#if assetInteraction.isAllUserOwned}
-            <ChangeDate menuItem />
+            <ChangeDate menuItem onDateChange={(ids, updateFn) => timelineManager.update(ids, updateFn)} />
             <ChangeDescription menuItem />
             <ChangeLocation menuItem />
             {#if assetInteraction.selectedAssets.length === 1}
diff --git a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 781dc80ec8..99bf4e5dab 100644
--- a/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/favorites/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -79,7 +79,7 @@
     </ButtonContextMenu>
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />
-      <ChangeDate menuItem />
+      <ChangeDate menuItem onDateChange={(ids, updateFn) => timelineManager.update(ids, updateFn)} />
       <ChangeDescription menuItem />
       <ChangeLocation menuItem />
       <ArchiveAction
diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 2e73eb6876..55265850f5 100644
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -151,7 +151,7 @@
 
       <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
         <DownloadAction menuItem />
-        <ChangeDate menuItem />
+        <ChangeDate menuItem onDateChange={() => triggerAssetUpdate()} />
         <ChangeDescription menuItem />
         <ChangeLocation menuItem />
         <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} onArchive={triggerAssetUpdate} />
diff --git a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
index b16018bbf4..707e103118 100644
--- a/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/locked/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -80,7 +80,7 @@
     <SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
     <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
       <DownloadAction menuItem />
-      <ChangeDate menuItem />
+      <ChangeDate menuItem onDateChange={(ids, updateFn) => timelineManager.update(ids, updateFn)} />
       <ChangeLocation menuItem />
       <DeleteAssets menuItem force onAssetDelete={(assetIds) => timelineManager.removeAssets(assetIds)} />
     </ButtonContextMenu>
diff --git 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
index c822855310..c964005e19 100644
--- 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
@@ -501,7 +501,7 @@
           text={$t('fix_incorrect_match')}
           onClick={handleReassignAssets}
         />
-        <ChangeDate menuItem />
+        <ChangeDate menuItem onDateChange={(ids, updateFn) => timelineManager.update(ids, updateFn)} />
         <ChangeDescription menuItem />
         <ChangeLocation menuItem />
         <ArchiveAction
diff --git a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
index 8bf8dce94e..8ac4c6e743 100644
--- a/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/photos/[[assetId=id]]/+page.svelte
@@ -139,7 +139,7 @@
           onUnlink={handleUnlink}
         />
       {/if}
-      <ChangeDate menuItem />
+      <ChangeDate menuItem onDateChange={(ids, updateFn) => timelineManager.update(ids, updateFn)} />
       <ChangeDescription menuItem />
       <ChangeLocation menuItem />
       <ArchiveAction
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index b58210187b..0cbd5bc0cf 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -291,7 +291,7 @@
 
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
           <DownloadAction menuItem />
-          <ChangeDate menuItem />
+          <ChangeDate menuItem onDateChange={() => onSearchQueryUpdate()} />
           <ChangeLocation menuItem />
           <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
           {#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
@@ -432,7 +432,7 @@
 
           <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
             <DownloadAction menuItem />
-            <ChangeDate menuItem />
+            <ChangeDate menuItem onDateChange={() => onSearchQueryUpdate()} />
             <ChangeDescription menuItem />
             <ChangeLocation menuItem />
             <ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
diff --git a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 7f873aa918..9825d9cbaf 100644
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,24 +1,13 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
   import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
   import Sidebar from '$lib/components/sidebar/sidebar.svelte';
-  import 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 TagCreateModal from '$lib/modals/TagCreateModal.svelte';
-  import TagEditModal from '$lib/modals/TagEditModal.svelte';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
-  import { deleteTag, getAllTags, type TagResponseDto } from '@immich/sdk';
-  import { Button, HStack, modalManager, Text } from '@immich/ui';
-  import { mdiDotsVertical, mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import type { PageData } from './$types';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
+  import Timeline from '$lib/components/timeline/Timeline.svelte';
   import AddToAlbum from '$lib/components/timeline/actions/AddToAlbumAction.svelte';
   import ArchiveAction from '$lib/components/timeline/actions/ArchiveAction.svelte';
   import ChangeDate from '$lib/components/timeline/actions/ChangeDateAction.svelte';
@@ -31,8 +20,19 @@
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
   import SetVisibilityAction from '$lib/components/timeline/actions/SetVisibilityAction.svelte';
   import TagAction from '$lib/components/timeline/actions/TagAction.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.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 TagCreateModal from '$lib/modals/TagCreateModal.svelte';
+  import TagEditModal from '$lib/modals/TagEditModal.svelte';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { preferences, user } from '$lib/stores/user.store';
+  import { joinPaths, TreeNode } from '$lib/utils/tree-utils';
+  import { deleteTag, getAllTags, type TagResponseDto } from '@immich/sdk';
+  import { Button, HStack, modalManager, Text } from '@immich/ui';
+  import { mdiDotsVertical, mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -172,7 +172,7 @@
         ></FavoriteAction>
         <ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
           <DownloadAction menuItem />
-          <ChangeDate menuItem />
+          <ChangeDate menuItem onDateChange={(ids, updateFn) => timelineManager.update(ids, updateFn)} />
           <ChangeDescription menuItem />
           <ChangeLocation menuItem />
           <ArchiveAction