UX: add unlink button, simplify unlink code

src/UI/Image/AttributedImage.svelte

@@ -24,6 +24,7 @@
   import Panorama360 from "../../assets/svg/Panorama360.svelte"
   import { ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { ExclamationTriangle as TriangleOutline } from "@babeard/svelte-heroicons/outline/ExclamationTriangle"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
   export let image: Partial<ProvidedImage> & { id: string; url: string }
   let fallbackImage: string = undefined
@@ -43,16 +44,39 @@
 
   let loaded = false
   let error = false
+  let notFound = false
   let ignoreHidden = false
   let isInStrictMode = new UIEventSource(false)
 
-  function onError() {
-    error = true
+  async function detectErrorReason() {
+    try {
+
+      const response = await fetch(
+        image.url,
+        {
+          headers: {
+            "Accept": "image/avif,image/webp,*/*",
+          },
+        },
+      )
+      if (response.status === 404) {
+        notFound = true
+      }
+    } catch
+      (e) {
+      console.log("Could not load image while trying to remediate", e)
+    }
+  }
+
+  async function onError() {
     Mapillary.isInStrictMode().addCallbackAndRunD(isStrict => {
       isInStrictMode.set(isStrict)
       return true // unregister
     })
+    await detectErrorReason()
+    error = true
   }
+
   let visitUrl = image.provider?.visitUrl(image)
   let showBigPreview = new UIEventSource(false)
   onDestroy(
@@ -112,15 +136,25 @@
 </Popup>
 {#if error}
   <div class="h-80 w-60 interactive flex flex-col justify-center items-center p-4 text-center">
-    <div class="alert flex items-center">
-      <TriangleOutline class="shrink-0 h-8 w-8" />
-      <Tr t={Translations.t.image.loadingFailed}/>
-    </div>
-    {#if image.provider.name.toLowerCase() === "mapillary" && $isInStrictMode}
-      <Tr t={Translations.t.image.mapillaryTrackingProtection}/>
-    {:else if $isInStrictMode}
-      <Tr t={Translations.t.image.strictProtectionDetected}/>
-      <div class="subtle text-sm mt-8">{image.url}</div>
+    {#if notFound}
+      <div class="alert flex items-center">
+        <TriangleOutline class="shrink-0 h-8 w-8" />
+        Not found
+      </div>
+      This image is probably incorrect or deleted.
+      <slot name="not-found-extra" />
+    {:else}
+      <div class="alert flex items-center">
+        <TriangleOutline class="shrink-0 h-8 w-8" />
+        <Tr t={Translations.t.image.loadingFailed} />
+      </div>
+      {#if image.provider.name.toLowerCase() === "mapillary" && $isInStrictMode}
+        <Tr t={Translations.t.image.mapillaryTrackingProtection} />
+      {:else if $isInStrictMode}
+        <Tr t={Translations.t.image.strictProtectionDetected} />
+        {image.provider.name}
+        <div class="subtle text-sm mt-8">{image.url}</div>
+      {/if}
     {/if}
   </div>
 {:else if image.status !== undefined && image.status !== "ready" && image.status !== "hidden"}