Feature(360): improve showing images, improve typing

src/UI/Image/LinkableImage.svelte

@@ -2,7 +2,6 @@
   import { UIEventSource } from "../../Logic/UIEventSource"
   import type { 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"
@@ -17,8 +16,11 @@
   import LoginToggle from "../Base/LoginToggle.svelte"
   import { onDestroy } from "svelte"
   import { Utils } from "../../Utils"
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import { MenuState } from "../../Models/MenuState"
+
   export let tags: UIEventSource<OsmTags>
-  export let state: SpecialVisualizationState
+  export let state: ThemeViewState
   export let image: P4CPicture
   export let feature: Feature
   export let layer: LayerConfig
@@ -28,6 +30,11 @@
   export let linkable = true
   let targetValue = Object.values(image.osmTags)[0]
   let isLinked = new UIEventSource(Object.values(tags.data).some((v) => targetValue === v))
+  isLinked.addCallbackAndRun(linked => {
+    if (linked) {
+      MenuState.previewedImage.set(undefined)
+    }
+  })
   const t = Translations.t.image.nearby
   const providedImage: ProvidedImage = {
     url: image.thumbUrl ?? image.pictureUrl,
@@ -38,6 +45,7 @@
     id: Object.values(image.osmTags)[0],
     isSpherical: image.details.isSpherical
   }
+
   async function applyLink(isLinked: boolean) {
     console.log("Applying linked image", isLinked, targetValue)
     const currentTags = tags.data
@@ -46,7 +54,7 @@
     if (isLinked) {
       const action = new LinkImageAction(currentTags.id, key, url, tags, {
         theme: tags.data._orig_theme ?? state.theme.id,
-        changeType: "link-image",
+        changeType: "link-image"
       })
       await state.changes.applyAction(action)
     } else {
@@ -55,7 +63,7 @@
         if (v === url) {
           const action = new ChangeTagAction(currentTags.id, new Tag(k, ""), currentTags, {
             theme: tags.data._orig_theme ?? state.theme.id,
-            changeType: "remove-image",
+            changeType: "remove-image"
           })
           state.changes.applyAction(action)
         }
@@ -89,7 +97,21 @@
     {nearbyFeatures}
     imgClass="max-h-64 w-auto sm:h-32 md:h-64"
     attributionFormat="minimal"
-  />
+  >
+    <svelte:fragment slot="dot-menu-actions">
+
+      <LoginToggle {state} silentFail={true} hiddenFail={true}>
+
+        {#if linkable}
+          <label>
+            <input bind:checked={$isLinked} type="checkbox" />
+            <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
+          </label>
+        {/if}
+      </LoginToggle>
+    </svelte:fragment>
+
+  </AttributedImage>
   <LoginToggle {state} silentFail={true}>
     {#if linkable}
       <label>