From 94469f7123d618ce54bb6496e08134ae487bc321 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 26 Aug 2025 23:40:48 +0200
Subject: [PATCH] UX: improve 'offline' indicator, make translatable

---
 langs/en.json                             |  1 +
 src/UI/Image/UploadingImageCounter.svelte |  6 ++++--
 src/UI/ThemeViewGUI.svelte                | 10 +++++++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/langs/en.json b/langs/en.json
index 0f25afbfe..c8f76a7ad 100644
--- a/langs/en.json
+++ b/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",
diff --git a/src/UI/Image/UploadingImageCounter.svelte b/src/UI/Image/UploadingImageCounter.svelte
index 4e214a4d2..64144ec38 100644
--- a/src/UI/Image/UploadingImageCounter.svelte
+++ b/src/UI/Image/UploadingImageCounter.svelte
@@ -94,8 +94,10 @@
   </div>
 {/if}
 {#if !$online && $pending > 0}
-  <div class="alert">
-    <Tr t={t.upload.offline} />
+  <div class="alert flex flex-col">
+    <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} />
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 98d347fa6..ebaf594bb 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/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"}