UX: improve 'offline' indicator, make translatable

langs/en.json

@@ -640,6 +640,7 @@
             },
             "noBlur": "Images will not be blurred. Do not photograph people",
             "offline": "You are currently offline. Uploading images be attempted when your internet is back",
+            "offlinePending": "{count} images are currently in the queue",
             "one": {
                 "done": "Your image was successfully uploaded. Thank you!",
                 "failed": "Sorry, we could not upload your image",

src/UI/Image/UploadingImageCounter.svelte

@@ -94,8 +94,10 @@
   </div>
 {/if}
 {#if !$online && $pending > 0}
-  <div class="alert">
+  <div class="alert flex flex-col">
-    <Tr t={t.upload.offline} />
+    <Tr cls="block" t={t.upload.offline} />
+    <Tr cls="block" t={t.upload.offlinePending.Subs({count: $pending})} />
+
   </div>
 {:else if $failed > dismissed}
   <UploadFailedMessage failed={$failed} on:click={() => (dismissed = $failed)} {state} />

src/UI/ThemeViewGUI.svelte

@@ -56,6 +56,8 @@
   import { AndroidPolyfill } from "../Logic/Web/AndroidPolyfill"
   import { IsOnline } from "../Logic/Web/IsOnline"
   import CompassWidget from "./BigComponents/CompassWidget.svelte"
+  import { WifiIcon } from "@babeard/svelte-heroicons/solid"
+  import Cross_bottom_right from "../assets/svg/Cross_bottom_right.svelte"
   export let state: WithSearchState
   new TitleHandler(state.selectedElement, state)
 
@@ -438,7 +440,13 @@
         <div class="alert w-fit">Faking a user (Testmode)</div>
       </If>
       {#if !$isOnline}
-        <div class="alert">Offline mode</div>
+        <div class="alert w-fit flex gap-x-2">
+          <div class="relative">
+            <WifiIcon class="w-6 h-6" />
+            <Cross_bottom_right color="red" class="absolute top-0 left-0" />
+          </div>
+          <Tr t={Translations.t.general.offline} />
+        </div>
       {:else if $apiState === "unknown"}
         <Loading />
       {:else if $apiState !== "online"}