UI: add download links

src/UI/Image/ImageOperations.svelte

@@ -8,7 +8,7 @@
   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 { DownloadIcon, ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { twMerge } from "tailwind-merge"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import Loading from "../Base/Loading.svelte"
@@ -23,7 +23,7 @@
   export let nearbyFeatures:
     | Feature<Geometry, HotspotProperties>[]
     | Store<Feature<Geometry, HotspotProperties>[]> = []
-
+  let visitUrl = image.provider?.visitUrl(image)
   let isLoaded = new UIEventSource(false)
 </script>
 
@@ -39,22 +39,28 @@
 
   {#if $$slots["dot-menu-actions"]}
     <DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>
-      <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>
+      <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>
+
+      {#if visitUrl !== undefined}
+        <a href={visitUrl} target="_blank" rel="noopener">
+          <ExternalLinkIcon class="w-6" />
+          <Tr t={Translations.t.image.openOnWebsite.Subs(image.provider)} />
+        </a>
+      {/if}
     </DotMenu>
   {/if}
   <div
     class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
   >
     <div class="pointer-events-auto m-1 w-fit transition-colors duration-200">
-      <ImageAttribution {image} attributionFormat="large" />
+      <ImageAttribution image={$image} attributionFormat="large" />
     </div>
 
     <slot />