Feature: offline: more features to be able to work fully offline

src/UI/Base/LoginToggle.svelte

@@ -14,10 +14,15 @@
     osmConnection: OsmConnection
     featureSwitches?: { featureSwitchEnableLogin?: UIEventSource<boolean> }
   }
+  /**
+   * Do show this element when in offline mode
+   */
+  export let offline = false
   /**
    * If set, 'loading' will act as if we are already logged in.
    */
-  export let ignoreLoading: boolean = false
+  export let ignoreLoading: boolean = offline // If it works in offline mode, it'll work while we are logging in too
+
   /**
    * If set and the OSM-api fails, do _not_ show any error messages nor the successful state, just hide.
    * Will still show the "not-logged-in"-slot
@@ -32,23 +37,26 @@
     unknown: t.loginFailedUnreachableMode,
     readonly: t.loginFailedReadonlyMode,
   }
-  const apiState: Store<string> =
+  const apiState: Store<OsmServiceState> =
     state?.osmConnection?.apiIsOnline ?? new ImmutableStore<OsmServiceState>("online")
   const online = IsOnline.isOnline
+  let loggedIn = state?.osmConnection?.isLoggedIn
 </script>
 
 {#if $badge}
-  {#if !$online}
+  {#if !$online && !offline}
     {#if !hiddenFail}
       <div class="alert">
-        Your device is offline
+        <Tr t={t.offline} />
       </div>
     {/if}
   {:else if !ignoreLoading && !hiddenFail && $loadingStatus === "loading"}
     <slot name="loading">
       <Loading />
     </slot>
-  {:else if ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")}
+  {:else if $loggedIn}
+    <slot />
+  {:else if ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline" || $apiState === "unreachable")}
     {#if !hiddenFail}
       <slot name="error">
         <div class="alert flex flex-col items-center">
@@ -63,8 +71,7 @@
         </div>
       </slot>
     {/if}
-  {:else if $loadingStatus === "logged-in"}
-    <slot />
+
   {:else if $loadingStatus === "not-attempted"}
     <slot name="not-logged-in" />
   {/if}