Re-use change-date instead of new component

web/src/lib/components/photos-page/asset-grid.svelte

@@ -9,7 +9,7 @@
     setFocusTo as setFocusToInit,
   } from '$lib/components/photos-page/actions/focus-actions';
   import Skeleton from '$lib/components/photos-page/skeleton.svelte';
-  import SelectDate from '$lib/components/shared-components/select-date.svelte';
+  import ChangeDate from '$lib/components/shared-components/change-date.svelte';
   import { AppRoute, AssetAction } from '$lib/constants';
   import { albumMapViewManager } from '$lib/managers/album-view-map.manager.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
@@ -722,10 +722,13 @@
 {/if}
 
 {#if isShowSelectDate}
-  <SelectDate
+  <ChangeDate
+    title="Navigate to Time"
     initialDate={DateTime.now()}
-    onConfirm={async (date: DateTime) => {
+    timezoneInput={false}
+    onConfirm={async (dateString: string) => {
       isShowSelectDate = false;
+      const date = DateTime.fromISO(dateString);
       const asset = await assetStore.getClosestAssetToDate(date);
       if (asset) {
         await setFocusAsset(asset);

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

@@ -6,13 +6,22 @@
   import ConfirmDialog from './dialog/confirm-dialog.svelte';
 
   interface Props {
+    title?: string;
     initialDate?: DateTime;
     initialTimeZone?: string;
+    timezoneInput?: boolean;
     onCancel: () => void;
     onConfirm: (date: string) => void;
   }
 
-  let { initialDate = DateTime.now(), initialTimeZone = '', onCancel, onConfirm }: Props = $props();
+  let {
+    initialDate = DateTime.now(),
+    initialTimeZone = '',
+    title = $t('edit_date_and_time'),
+    timezoneInput = true,
+    onCancel,
+    onConfirm,
+  }: Props = $props();
 
   type ZoneOption = {
     /**
@@ -135,7 +144,7 @@
 
 <ConfirmDialog
   confirmColor="primary"
-  title={$t('edit_date_and_time')}
+  {title}
   prompt="Please select a new date:"
   disabled={!date.isValid}
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
@@ -148,15 +157,17 @@
         <label for="datetime">{$t('date_and_time')}</label>
         <DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} />
       </div>
-      <div>
-        <Combobox
-          bind:selectedOption
-          label={$t('timezone')}
-          options={timezones}
-          placeholder={$t('search_timezone')}
-          onSelect={(option) => handleOnSelect(option)}
-        />
-      </div>
+      {#if timezoneInput}
+        <div>
+          <Combobox
+            bind:selectedOption
+            label={$t('timezone')}
+            options={timezones}
+            placeholder={$t('search_timezone')}
+            onSelect={(option) => handleOnSelect(option)}
+          />
+        </div>
+      {/if}
     </div>
   {/snippet}
 </ConfirmDialog>

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

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import DateInput from '$lib/components/elements/date-input.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
-  import { DateTime } from 'luxon';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    initialDate?: DateTime;
-
-    onCancel: () => void;
-    onConfirm: (date: DateTime) => void;
-  }
-
-  let { initialDate = DateTime.now(), onCancel, onConfirm }: Props = $props();
-  let selectedDate = $state(initialDate.toFormat("yyyy-MM-dd'T'HH:mm"));
-
-  // when changing the time zone, assume the configured date/time is meant for that time zone (instead of updating it)
-  const date = $derived(DateTime.fromISO(selectedDate));
-
-  const handleConfirm = () => {
-    if (date) {
-      onConfirm(date);
-    }
-  };
-</script>
-
-<ConfirmDialog
-  confirmColor="primary"
-  title="Go to date"
-  disabled={!date.isValid}
-  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
->
-  {#snippet promptSnippet()}
-    <div class="flex flex-col text-left gap-2">
-      <div class="flex flex-col">
-        <label for="datetime">{$t('date_and_time')}</label>
-        <DateInput
-          class="immich-form-input"
-          id="datetime"
-          type="datetime-local"
-          bind:value={selectedDate}
-          autofocus
-          onkeydown={(e) => {
-            if (e.key === 'Enter') {
-              handleConfirm();
-            }
-            if (e.key === 'Escape') {
-              onCancel();
-            }
-          }}
-        />
-      </div>
-    </div>
-  {/snippet}
-</ConfirmDialog>