feat: Edit metadata (#5066)

* chore: rebase and clean-up

* feat: sync description, add e2e tests

* feat: simplify web code

* chore: unit tests

* fix: linting

* Bug fix with the arrows key

* timezone typeahead filter

timezone typeahead filter

* small stlying

* format fix

* Bug fix in the map selection

Bug fix in the map selection

* Websocket basic

Websocket basic

* Update metadata visualisation through the websocket

* Update timeline

* fix merge

* fix web

* fix web

* maplibre system

* format fix

* format fix

* refactor: clean up

* Fix small bug in the hour/timezone

* Don't diplay modify for readOnly asset

* Add log in case of failure

* Formater + try/catch error

* Remove everything related to websocket

* Revert "Remove everything related to websocket"

This reverts commit 14bcb9e1e4.

* remove notification

* fix test

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -0,0 +1,128 @@
+<script lang="ts" context="module">
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  declare namespace Intl {
+    type Key = 'calendar' | 'collation' | 'currency' | 'numberingSystem' | 'timeZone' | 'unit';
+    function supportedValuesOf(input: Key): string[];
+  }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { DateTime } from 'luxon';
+  import ConfirmDialogue from './confirm-dialogue.svelte';
+  import Dropdown from '../elements/dropdown.svelte';
+  export let initialDate: DateTime = DateTime.now();
+
+  interface ZoneOption {
+    zone: string;
+    offset: string;
+  }
+
+  const timezones: ZoneOption[] = Intl.supportedValuesOf('timeZone').map((zone: string) => ({
+    zone,
+    offset: 'UTC' + DateTime.local({ zone }).toFormat('ZZ'),
+  }));
+
+  const initialOption = timezones.find((item) => item.offset === 'UTC' + initialDate.toFormat('ZZ'));
+
+  let selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
+  let selectedTimezone = initialOption?.offset || null;
+  let disabled = false;
+
+  let searchQuery = '';
+  let filteredTimezones: ZoneOption[] = timezones;
+
+  const updateSearchQuery = (event: Event) => {
+    searchQuery = (event.target as HTMLInputElement).value;
+    filterTimezones();
+  };
+
+  const filterTimezones = () => {
+    filteredTimezones = timezones.filter((timezone) => timezone.zone.toLowerCase().includes(searchQuery.toLowerCase()));
+  };
+
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    confirm: string;
+  }>();
+
+  const handleCancel = () => dispatch('cancel');
+  const handleConfirm = () => {
+    let date = DateTime.fromISO(selectedDate);
+    if (selectedTimezone != null) {
+      date = date.setZone(selectedTimezone, { keepLocalTime: true }); // Keep local time if not it's really confusing
+    }
+
+    const value = date.toISO();
+    if (value) {
+      disabled = true;
+      dispatch('confirm', value);
+    }
+  };
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      event.stopPropagation();
+    }
+  };
+  let isDropdownOpen = false;
+
+  const openDropdown = () => {
+    isDropdownOpen = true;
+  };
+
+  const closeDropdown = () => {
+    isDropdownOpen = false;
+  };
+
+  const handleSelectTz = (item: ZoneOption) => {
+    selectedTimezone = item.offset;
+    closeDropdown();
+  };
+</script>
+
+<div role="presentation" on:keydown={handleKeydown}>
+  <ConfirmDialogue
+    confirmColor="primary"
+    cancelColor="secondary"
+    title="Change Date"
+    prompt="Please select a new date:"
+    {disabled}
+    on:confirm={handleConfirm}
+    on:cancel={handleCancel}
+  >
+    <div class="flex flex-col text-md px-4 py-5 text-center gap-2" slot="prompt">
+      <div class="mt-2" />
+      <div class="flex flex-col">
+        <label for="datetime">Date and Time</label>
+        <input
+          class="immich-form-label text-sm mt-2 w-full text-black"
+          id="datetime"
+          type="datetime-local"
+          bind:value={selectedDate}
+        />
+      </div>
+      <div class="flex flex-col w-full">
+        <label for="timezone">Timezone</label>
+        <div class="relative">
+          <input
+            class="immich-form-label text-sm mt-2 w-full text-black"
+            id="timezoneSearch"
+            type="text"
+            placeholder="Search timezone..."
+            bind:value={searchQuery}
+            on:input={updateSearchQuery}
+            on:focus={openDropdown}
+          />
+          <Dropdown
+            selectedOption={initialOption}
+            options={filteredTimezones}
+            render={(item) => (item ? `${item.zone} (${item.offset})` : '(not selected)')}
+            on:select={({ detail: item }) => handleSelectTz(item)}
+            controlable={true}
+            bind:showMenu={isDropdownOpen}
+          />
+        </div>
+      </div>
+    </div>
+  </ConfirmDialogue>
+</div>