UX: add dots menu to images with overflow menu

src/UI/Image/ImageOperations.svelte

@@ -13,11 +13,13 @@
   import Loading from "../Base/Loading.svelte"
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
+  import DotMenu from "../Base/DotMenu.svelte"
 
   export let image: ProvidedImage
   export let clss: string = undefined
 
   let isLoaded = new UIEventSource(false)
+
   async function download() {
     const response = await fetch(image.url_hd ?? image.url)
     const blob = await response.blob()
@@ -36,6 +38,16 @@
     {/if}
     <ImagePreview {image} {isLoaded} />
   </div>
+
+  <DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>
+    <button
+      class="no-image-background pointer-events-auto flex items-center"
+      on:click={() => download()}
+    >
+      <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
+      <Tr t={Translations.t.general.download.downloadImage} />
+    </button>
+  </DotMenu>
   <div
     class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
   >
@@ -43,14 +55,8 @@
       <ImageAttribution {image} attributionFormat="large" />
     </div>
 
-    <slot/>
+    <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()}
-    >
-      <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
-      <Tr t={Translations.t.general.download.downloadImage} />
-    </button>
   </div>
 </div>