fix: navigate to time action (#20928)

* fix: navigate to time action

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

* refactor change-date dialogs

* Review comments

* chore: clean up

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>

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

@@ -2,10 +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, {
-    type AbsoluteResult,
-    type RelativeResult,
-  } from '$lib/components/shared-components/change-date.svelte';
   import {
     setFocusToAsset as setFocusAssetInit,
     setFocusTo as setFocusToInit,
@@ -13,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 NavigateToDateModal from '$lib/modals/NavigateToDateModal.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';
@@ -24,8 +21,6 @@
   import { archiveAssets, cancelMultiselect, selectAllAssets, stackAssets } from '$lib/utils/asset-utils';
   import { AssetVisibility } from '@immich/sdk';
   import { modalManager } from '@immich/ui';
-  import { DateTime } from 'luxon';
-  let { isViewing: showAssetViewer } = assetViewingStore;
 
   interface Props {
     timelineManager: TimelineManager;
@@ -43,7 +38,7 @@
     scrollToAsset,
   }: Props = $props();
 
-  let isShowSelectDate = $state(false);
+  const { isViewing: showAssetViewer } = assetViewingStore;
 
   const trashOrDelete = async (force: boolean = false) => {
     isShowDeleteConfirmation = false;
@@ -150,6 +145,13 @@
   const setFocusTo = setFocusToInit.bind(undefined, scrollToAsset, timelineManager);
   const setFocusAsset = setFocusAssetInit.bind(undefined, scrollToAsset);
 
+  const handleOpenDateModal = async () => {
+    const asset = await modalManager.show(NavigateToDateModal, { timelineManager });
+    if (asset) {
+      setFocusAsset(asset);
+    }
+  };
+
   let shortcutList = $derived(
     (() => {
       if (searchStore.isSearchEnabled || $showAssetViewer) {
@@ -168,7 +170,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: () => (isShowSelectDate = true) },
+        { shortcut: { key: 'G' }, onShortcut: handleOpenDateModal },
       ];
       if (onEscape) {
         shortcuts.push({ shortcut: { key: 'Escape' }, onShortcut: onEscape });
@@ -198,24 +200,3 @@
     onConfirm={() => handlePromiseError(trashOrDelete(true))}
   />
 {/if}
-
-{#if isShowSelectDate}
-  <ChangeDate
-    withDuration={false}
-    title="Navigate to Time"
-    initialDate={DateTime.now()}
-    timezoneInput={false}
-    onConfirm={async (dateString: AbsoluteResult | RelativeResult) => {
-      isShowSelectDate = false;
-      if (dateString.mode == 'absolute') {
-        const asset = await timelineManager.getClosestAssetToDate(
-          (DateTime.fromISO(dateString.date) as DateTime<true>).toObject(),
-        );
-        if (asset) {
-          setFocusAsset(asset);
-        }
-      }
-    }}
-    onCancel={() => (isShowSelectDate = false)}
-  />
-{/if}