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"}

src/UI/Image/DeletableImage.svelte

@@ -39,6 +39,8 @@
   let reportFreeText = new UIEventSource<string>(undefined)
   let reported = new UIEventSource<boolean>(false)
 
+  let canBeUnlinked = image.originalAttribute !== undefined
+
   async function requestDeletion() {
     if (reportReason.data === "other" && !reportFreeText.data) {
       return
@@ -63,31 +65,20 @@
   }
 
   async function unlink() {
-    console.log("Unlinking image", image.key, image.id)
-    if (image.id.length < 10) {
-      console.error("Suspicious value, not deleting ", image.id)
-      return
-    }
-    // The "key" is the provider key, but not necessarely the actual key that should be reset
-    // We iterate over all tags. *Every* tag for which the value contains the id will be deleted
-    const tgs = tags.data
-    for (const key in tgs) {
-      if (typeof tgs[key] !== "string" || tgs[key].indexOf(image.id) < 0) {
-        continue
-      }
-
-      await state?.changes?.applyAction(
-        new ChangeTagAction(tgs.id, new Tag(key, ""), tgs, {
-          changeType: "delete-image",
-          theme: state.theme.id,
-        })
-      )
-    }
+    const {key} = image.originalAttribute
+    await state?.changes?.applyAction(
+      new ChangeTagAction(tags.data.id, new Tag(key, ""), tags.data, {
+        changeType: "delete-image",
+        theme: state.theme.id,
+      })
+    )
   }
 
   const t = Translations.t.image.panoramax
   const tu = Translations.t.image.unlink
   const placeholder = t.placeholder.current
+
+  let showTags = state.userRelatedState?.showTagsB
 </script>
 
 <Popup shown={showDeleteDialog}>
@@ -169,10 +160,24 @@
           <DownloadIcon />
           <Tr t={Translations.t.general.download.downloadImage} />
         </button>
-        <button on:click={() => showDeleteDialog.set(true)} class="flex items-center">
-          <TrashIcon />
-          <Tr t={tu.button} />
-        </button>
+        {#if canBeUnlinked}
+          <button on:click={() => showDeleteDialog.set(true)} class="flex items-center">
+            <TrashIcon />
+            <Tr t={tu.button} />
+          </button>
+        {/if}
+      </svelte:fragment>
+      <svelte:fragment slot="not-found-extra">
+        {#if canBeUnlinked}
+          <button on:click={() => unlink()}>
+            <Tr t={tu.button} />
+          </button>
+          {#if $showTags}
+            <div class="subtle line-through">
+              {image.originalAttribute.key}={image.originalAttribute.value}
+            </div>
+          {/if}
+        {/if}
       </svelte:fragment>
     </AttributedImage>
   </div>