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/QueuedImagesView.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import QueuedImage from "./QueuedImage.svelte"
+  import { ArrowPathIcon } from "@babeard/svelte-heroicons/mini"
+  import Loading from "../Base/Loading.svelte"
+  import { WithImageState } from "../../Models/ThemeViewState/WithImageState"
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
+  import type { ImageUploadArguments } from "../../Logic/ImageProviders/ImageUploadQueue"
+  import { Store } from "../../Logic/UIEventSource"
+  import UploadingImageCounter from "./UploadingImageCounter.svelte"
+  export let state: WithImageState
+  let queued: Store<ImageUploadArguments[]> = state.imageUploadManager.queuedArgs
+  let isUploading = state.imageUploadManager.isUploading
+  const t = Translations.t
+  const q = t.imageQueue
+</script>
+
+<div class="m-4 flex flex-col">
+  {#if $queued.length === 0}
+    <Tr t={q.noFailedImages} />
+  {:else}
+    <div>
+      <Tr t={q.intro} />
+    </div>
+
+    <UploadingImageCounter {state}/>
+
+    {#if $isUploading}
+      <Loading />
+    {:else}
+      <button class="primary" on:click={() => state.imageUploadManager.uploadQueue()}>
+        <ArrowPathIcon class="w-8 h-8 m-1" />
+        <Tr t={q.retryAll} />
+      </button>
+    {/if}
+    <div class="flex flex-wrap">
+      {#each $queued as i (i.date + i.featureId)}
+        <QueuedImage imageArguments={i} />
+      {/each}
+    </div>
+  {/if}
+</div>