Feature: image upload now uses the indexedDB-backed queue (formerly known as EmergencyBackup), rework (and simplify) counter logic (fix #2186; fix #1942; helps #2022)

src/UI/Image/QueuedImage.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { ImageUploadArguments } from "../../Logic/ImageProviders/ImageUploadQueue"
+  import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue"
+  import { TrashIcon } from "@babeard/svelte-heroicons/mini"
+  import Popup from "../Base/Popup.svelte"
+  import { UIEventSource } from "../../Logic/UIEventSource"
+  import Page from "../Base/Page.svelte"
+  import BackButton from "../Base/BackButton.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
+
+  let queue = ImageUploadQueue.singleton
+  export let imageArguments: ImageUploadArguments
+  let confirmDelete = new UIEventSource(false)
+
+
+  function del() {
+    queue.delete(imageArguments)
+  }
+
+  const t = Translations.t
+  let src = undefined
+  try{
+
+    src = URL.createObjectURL(imageArguments.blob)
+  }catch (e) {
+    console.error("Could not create an ObjectURL for blob", imageArguments.blob)
+  }
+</script>
+
+<div class="low-interaction rounded border-interactive w-fit p-2 m-1 flex flex-col">
+
+  <img class="max-w-64 w-auto max-h-64 w-auto" {src} />
+  {imageArguments.featureId} {imageArguments.layoutId}
+  <button class="as-link self-end" on:click={() => {confirmDelete.set(true)}}>
+    <TrashIcon class="w-4" />
+    <Tr t={t.imageQueue.delete} />
+  </button>
+  <Popup shown={confirmDelete} dismissable={true}>
+    <Page shown={confirmDelete}>
+      <svelte:fragment slot="header">
+        <TrashIcon class="w-8 m-1" />
+        <Tr t={t.imageQueue.confirmDeleteTitle} />
+      </svelte:fragment>
+
+      <div class="flex flex-col ">
+
+        <div class="flex justify-center">
+          <img class="max-w-128 w-auto max-h-128 w-auto" src={URL.createObjectURL(imageArguments.blob)} />
+        </div>
+
+        <div class="flex w-full">
+          <BackButton clss="w-full" on:click={() => confirmDelete.set(false)}>
+            <Tr t={t.general.back} />
+          </BackButton>
+          <button on:click={() => del()} class="primary w-full">
+
+            <TrashIcon class="w-8 m-1" />
+            <Tr t={t.imageQueue.confirmDelete} />
+          </button>
+        </div>
+      </div>
+    </Page>
+  </Popup>
+</div>