Feature(360): improve showing images, improve typing

src/UI/Image/ImageOperations.svelte

@@ -4,6 +4,7 @@
    */
 
   import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
+  import type { HotspotProperties } from "../../Logic/ImageProviders/ImageProvider"
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import ImageAttribution from "./ImageAttribution.svelte"
   import ImagePreview from "./ImagePreview.svelte"
@@ -14,14 +15,15 @@
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
   import DotMenu from "../Base/DotMenu.svelte"
-  import type { Feature } from "geojson"
+  import type { Feature, Geometry } from "geojson"
   import { Store } from "../../Logic/UIEventSource"
 
   export let image: Partial<ProvidedImage> & { id: string; url: string }
   export let clss: string = undefined
-  export let nearbyFeatures: Feature[] | Store<Feature[]> = []
+  export let nearbyFeatures: Feature<Geometry, HotspotProperties>[] | Store<Feature<Geometry, HotspotProperties>[]> = []
 
   let isLoaded = new UIEventSource(false)
+  console.log(">>> slots are", $$slots)
 </script>
 
 <div class={twMerge("relative h-full w-full", clss)}>
@@ -34,6 +36,7 @@
     <ImagePreview {image} {isLoaded} {nearbyFeatures} />
   </div>
 
+  {#if $$slots["dot-menu-actions"]}
   <DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>
     <slot name="dot-menu-actions">
       <button
@@ -45,6 +48,7 @@
       </button>
     </slot>
   </DotMenu>
+  {/if}
   <div
     class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
   >