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/modals/AssetSelectionChangeDateModal.svelte

@@ -0,0 +1,136 @@
+<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';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateAssets } from '@immich/sdk';
+  import { Button, Field, HStack, Modal, ModalBody, ModalFooter, Switch, VStack } from '@immich/ui';
+  import { mdiCalendarEdit } from '@mdi/js';
+  import { DateTime } from 'luxon';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    initialDate?: DateTime;
+    initialTimeZone?: string;
+    assets: TimelineAsset[];
+    onClose: (success: boolean) => void;
+  }
+  let { initialDate = DateTime.now(), initialTimeZone, assets, onClose }: Props = $props();
+
+  let showRelative = $state(false);
+  let selectedDuration = $state(0);
+  let selectedDate = $state(initialDate.toFormat("yyyy-MM-dd'T'HH:mm:ss.SSS"));
+  const timezones = $derived(getTimezones(selectedDate));
+  // svelte-ignore state_referenced_locally
+  let lastSelectedTimezone = $state(getPreferredTimeZone(initialDate, initialTimeZone, timezones));
+  // the offsets (and validity) for time zones may change if the date is changed, which is why we recompute the list
+  let selectedOption = $derived(getPreferredTimeZone(initialDate, initialTimeZone, timezones, lastSelectedTimezone));
+
+  const handleConfirm = async () => {
+    const ids = getOwnedAssetsWithWarning(assets, $user);
+    try {
+      if (showRelative && (selectedDuration || selectedOption)) {
+        await updateAssets({
+          assetBulkUpdateDto: {
+            ids,
+            dateTimeRelative: selectedDuration,
+            timeZone: selectedOption?.value,
+          },
+        });
+        onClose(true);
+        return;
+      }
+      const isoDate = toIsoDate(selectedDate, selectedOption);
+      await updateAssets({ assetBulkUpdateDto: { ids, dateTimeOriginal: isoDate } });
+      onClose(true);
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_change_date'));
+      onClose(false);
+    }
+  };
+
+  // let before = $derived(DateTime.fromObject(assets[0].localDateTime).toFormat("yyyy-MM-dd'T'HH:mm:ss.SSS"));
+
+  // let after = $derived(
+  //   currentInterval ? calcNewDate(currentInterval.end, selectedDuration, selectedOption?.value) : undefined,
+  // );
+
+  // 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, { zone: selectedOption?.value, setZone: true }));
+</script>
+
+<Modal title={$t('edit_date_and_time')} icon={mdiCalendarEdit} onClose={() => onClose(false)} size="small">
+  <ModalBody>
+    <VStack fullWidth>
+      <HStack fullWidth>
+        <Field label={$t('edit_date_and_time_by_offset')}>
+          <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} />
+        </Field>
+      </HStack>
+      {#if showRelative}
+        <HStack fullWidth>
+          <label class="immich-form-label" for="relativedatetime">{$t('offset')}</label>
+        </HStack>
+        <HStack fullWidth>
+          <DurationInput class="immich-form-input text-gray-700" id="relativedatetime" bind:value={selectedDuration} />
+        </HStack>
+      {:else}
+        <HStack fullWidth>
+          <label class="immich-form-label" for="datetime">{$t('date_and_time')}</label>
+        </HStack>
+        <HStack fullWidth>
+          <DateInput class="immich-form-input" id="datetime" type="datetime-local" bind:value={selectedDate} />
+        </HStack>
+      {/if}
+      <div class="w-full">
+        <Combobox
+          bind:selectedOption
+          label={$t('timezone')}
+          options={timezones}
+          placeholder={$t('search_timezone')}
+          onSelect={(option) => (lastSelectedTimezone = option as ZoneOption)}
+        ></Combobox>
+      </div>
+      <!-- <Card color="secondary" class={!showRelative || !currentInterval ? 'invisible' : ''}>
+        <CardBody class="p-2">
+          <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 items-center">
+            <div class="col-span-2 immich-form-label" data-testid="interval-preview">Preview</div>
+            <Text size="small" class="-mt-2 immich-form-label col-span-2"
+              >Showing changes for first selected asset only</Text
+            >
+            <label class="immich-form-label" for="from">Before</label>
+            <DateInput
+              class="dark:text-gray-300 text-gray-700 text-base"
+              id="from"
+              type="datetime-local"
+              readonly
+              bind:value={before}
+            />
+            <label class="immich-form-label" for="to">After</label>
+            <DateInput
+              class="dark:text-gray-300 text-gray-700 text-base"
+              id="to"
+              type="datetime-local"
+              readonly
+              bind:value={after}
+            />
+          </div>
+        </CardBody>
+      </Card> -->
+    </VStack>
+  </ModalBody>
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
+        {$t('cancel')}
+      </Button>
+      <Button shape="round" color="primary" fullWidth onclick={handleConfirm} disabled={!date.isValid}>
+        {$t('confirm')}
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>