UX: add proper delete dialog, add option to report images

src/UI/Image/ImageOperations.svelte

@@ -3,11 +3,11 @@
    * The 'imageOperations' previews an image and offers some extra tools (e.g. download)
    */
 
+  import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import ImageAttribution from "./ImageAttribution.svelte"
   import ImagePreview from "./ImagePreview.svelte"
   import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import { Utils } from "../../Utils"
   import { twMerge } from "tailwind-merge"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import Loading from "../Base/Loading.svelte"
@@ -20,13 +20,6 @@
 
   let isLoaded = new UIEventSource(false)
 
-  async function download() {
-    const response = await fetch(image.url_hd ?? image.url)
-    const blob = await response.blob()
-    Utils.offerContentsAsDownloadableFile(blob, new URL(image.url).pathname.split("/").at(-1), {
-      mimetype: "image/jpg",
-    })
-  }
 </script>
 
 <div class={twMerge("relative h-full w-full", clss)}>
@@ -40,13 +33,16 @@
   </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>
+    <slot name="dot-menu-actions">
+      <button
+        class="no-image-background pointer-events-auto flex items-center"
+        on:click={() =>  ImageProvider.offerImageAsDownload(image)}
+      >
+        <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
+        <Tr t={Translations.t.general.download.downloadImage} />
+      </button>
+
+    </slot>
   </DotMenu>
   <div
     class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"