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 14bcb9e1e4398e8211adfe6c14348ef8f3f5fce4.

* 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-location.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { AssetResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import ConfirmDialogue from './confirm-dialogue.svelte';
+  import Map from './map/map.svelte';
+  export const title = 'Change Location';
+  export let asset: AssetResponseDto | undefined = undefined;
+
+  interface Point {
+    lng: number;
+    lat: number;
+  }
+
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    confirm: Point;
+  }>();
+
+  $: lat = asset?.exifInfo?.latitude || 0;
+  $: lng = asset?.exifInfo?.longitude || 0;
+  $: zoom = lat && lng ? 15 : 1;
+
+  let point: Point | null = null;
+
+  const handleCancel = () => dispatch('cancel');
+
+  const handleSelect = (selected: Point) => {
+    point = selected;
+  };
+
+  const handleConfirm = () => {
+    if (!point) {
+      dispatch('cancel');
+    } else {
+      dispatch('confirm', point);
+    }
+  };
+</script>
+
+<ConfirmDialogue
+  confirmColor="primary"
+  cancelColor="secondary"
+  title="Change Location"
+  on:confirm={handleConfirm}
+  on:cancel={handleCancel}
+>
+  <div slot="prompt" class="flex flex-col w-full h-full gap-2">
+    <label for="datetime">Pick a location</label>
+    <div class="h-[350px] min-h-[300px] w-full">
+      <Map
+        mapMarkers={lat && lng && asset ? [{ id: asset.id, lat, lon: lng }] : []}
+        {zoom}
+        center={lat && lng ? { lat, lng } : undefined}
+        simplified={true}
+        clickable={true}
+        on:clickedPoint={({ detail: point }) => handleSelect(point)}
+      />
+    </div>
+  </div>
+</ConfirmDialogue>