Refactoring: use popups for attributed images

src/UI/Image/AttributedImage.svelte

@@ -7,6 +7,10 @@
   import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import { MagnifyingGlassPlusIcon } from "@babeard/svelte-heroicons/outline"
+  import { CloseButton, Modal } from "flowbite-svelte"
+  import ImageOperations from "./ImageOperations.svelte"
+  import Popup from "../Base/Popup.svelte"
+  import { onDestroy } from "svelte"
 
   export let image: Partial<ProvidedImage>
   let fallbackImage: string = undefined
@@ -16,21 +20,42 @@
 
   let imgEl: HTMLImageElement
   export let imgClass: string = undefined
-  export let previewedImage: UIEventSource<ProvidedImage> = undefined
   export let attributionFormat: "minimal" | "medium" | "large" = "medium"
-  let canZoom = previewedImage !== undefined // We check if there is a SOURCE, not if there is data in it!
+  export let previewedImage: UIEventSource<ProvidedImage>
+  export let canZoom = previewedImage !== undefined
   let loaded = false
+  let showBigPreview =  new UIEventSource(false)
+  onDestroy(showBigPreview.addCallbackAndRun(shown=>{
+    if(!shown){
+      previewedImage.set(false)
+    }
+  }))
+  onDestroy(previewedImage.addCallbackAndRun(previewedImage => {
+    showBigPreview.set(previewedImage?.id === image.id)
+  }))
 </script>
 
+<Popup shown={showBigPreview} bodyPadding="p-0">
+  <div slot="close" />
+  <div style="height: 80vh">
+    <ImageOperations {image}>
+      <slot name="preview-action" />
+    </ImageOperations>
+  </div>
+  <div class="absolute top-4 right-4">
+    <CloseButton class="normal-background"
+                 on:click={() => {console.log("Closing");previewedImage.set(undefined)}}></CloseButton>
+  </div>
+</Popup>
 <div class="relative shrink-0">
   <div class="relative w-fit">
     <img
       bind:this={imgEl}
       on:load={() => loaded = true}
       class={imgClass ?? ""}
-      class:cursor-zoom-in={previewedImage !== undefined}
+      class:cursor-zoom-in={canZoom}
       on:click={() => {
-      previewedImage?.setData(image)
+        previewedImage.set(image)
     }}
       on:error={() => {
       if (fallbackImage) {
@@ -41,8 +66,9 @@
     />
 
     {#if canZoom && loaded}
-      <div class="absolute right-0 top-0 bg-black-transparent rounded-bl-full" on:click={() => previewedImage.set(image)}>
-      <MagnifyingGlassPlusIcon class="w-8 h-8 pl-3 pb-3 cursor-zoom-in" color="white" />
+      <div class="absolute right-0 top-0 bg-black-transparent rounded-bl-full"
+           on:click={() => previewedImage.set(image)}>
+        <MagnifyingGlassPlusIcon class="w-8 h-8 pl-3 pb-3 cursor-zoom-in" color="white" />
       </div>
     {/if}
 

src/UI/Image/ImageOperations.svelte

@@ -45,6 +45,8 @@
       <ImageAttribution {image} attributionFormat="large"/>
     </div>
 
+    <slot/>
+
     <button
       class="no-image-background pointer-events-auto flex items-center bg-black text-white opacity-50 transition-colors duration-200 hover:opacity-100"
       on:click={() => download()}

src/UI/Image/LinkableImage.svelte

@@ -72,7 +72,19 @@
     imgClass="max-h-64 w-auto"
     previewedImage={state.previewedImage}
     attributionFormat="minimal"
-  />
+  >
+    <!--
+    <div slot="preview-action" class="self-center" >
+    <LoginToggle {state} silentFail={true}>
+      {#if linkable}
+        <label class="normal-background p-2 rounded-full pointer-events-auto">
+          <input bind:checked={$isLinked} type="checkbox" />
+          <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
+        </label>
+      {/if}
+    </LoginToggle>
+    </div>-->
+  </AttributedImage>
   <LoginToggle {state} silentFail={true}>
     {#if linkable}
       <label>