Feature: add zoomable image when clicked

src/UI/Image/LinkableImage.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Store } from "../../Logic/UIEventSource"
+    import type { OsmTags } from "../../Models/OsmFeature"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
+    import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
+    import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
+    import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
+    import { Tag } from "../../Logic/Tags/Tag"
+    import { GeoOperations } from "../../Logic/GeoOperations"
+    import type { Feature } from "geojson"
+    import Translations from "../i18n/Translations"
+    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+    import AttributedImage from "./AttributedImage.svelte"
+    import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
+
+    export let tags: Store<OsmTags>
+  export let lon: number
+  export let lat: number
+  export let state: SpecialVisualizationState
+  export let image: P4CPicture
+  export let feature: Feature
+  export let layer: LayerConfig
+
+  export let linkable = true
+  let isLinked = Object.values(tags.data).some((v) => image.pictureUrl === v)
+
+  const t = Translations.t.image.nearby
+  const c = [lon, lat]
+  const providedImage: ProvidedImage = {
+      url: image.thumbUrl ?? image.pictureUrl,
+      provider: AllImageProviders.byName(image.provider),
+      date: new Date(image.date),
+      id: Object.values(image.osmTags)[0]
+  }
+  let distance = Math.round(
+    GeoOperations.distanceBetween([image.coordinates.lng, image.coordinates.lat], c)
+  )
+
+  $: {
+    const currentTags = tags.data
+    const key = Object.keys(image.osmTags)[0]
+    const url = image.osmTags[key]
+    if (isLinked) {
+      const action = new LinkImageAction(currentTags.id, key, url, tags, {
+        theme: tags.data._orig_theme ??  state.layout.id,
+        changeType: "link-image",
+      })
+      state.changes.applyAction(action)
+    } else {
+      for (const k in currentTags) {
+        const v = currentTags[k]
+        if (v === url) {
+          const action = new ChangeTagAction(currentTags.id, new Tag(k, ""), currentTags, {
+            theme: tags.data._orig_theme ?? state.layout.id,
+            changeType: "remove-image",
+          })
+          state.changes.applyAction(action)
+        }
+      }
+    }
+  }
+</script>
+
+<div class="flex w-fit shrink-0 flex-col">
+  <AttributedImage image={providedImage} />
+  {#if linkable}
+    <label>
+      <input bind:checked={isLinked} type="checkbox" />
+      <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
+    </label>
+  {/if}
+</div>