UI: make WelcomeBack translatable

langs/en.json

@@ -542,6 +542,7 @@
             "tuesday": "Tuesday",
             "wednesday": "Wednesday"
         },
+        "welcomeBack": "Welcome back",
         "welcomeExplanation": {
             "addNew": "Is an item missing? Use the button on the bottom-left to add a new point of interest.",
             "general": "On this map, you can see, edit and add <i>points of interest</i>. Zoom around to see the POI, tap one to see or edit the information. All data is sourced from and saved to OpenStreetMap, which can be freely reused."

src/UI/BigComponents/WelcomeBack.svelte

@@ -3,9 +3,13 @@
   import { fade } from "svelte/transition"
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import { onDestroy } from "svelte"
+  import If from "../Base/If.svelte"
+  import type { Store } from "../../Logic/UIEventSource"
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
 
   let open = false
-  export let state: { osmConnection: OsmConnection }
+  export let state: { osmConnection: OsmConnection, featureSwitches: { featureSwitchEnableLogin: Store<boolean> } }
   let userdetails = state.osmConnection.userDetails
   let username = userdetails.mapD((ud) => ud.name, onDestroy)
   username.addCallbackAndRunD((ud) => {
@@ -18,25 +22,28 @@
   })
 </script>
 
-<Popover
-  class="mt-4 hidden sm:block"
-  defaultClass="py-2 px-3 w-fit "
-  trigger="null"
-  placement="bottom"
-  transition={(e) => fade(e, { duration: 150 })}
-  bind:open
->
-  {#if $username !== undefined}
-    <div style="width: max-content" class="flex items-center">
-      {#if $userdetails.img}
-        <img src={$userdetails.img} alt="avatar" class="mr-4 h-10 w-10 rounded-full" />
-      {/if}
-      <div>
-        <div>Welcome back</div>
-        <div class="normal-background" style="width: max-content">
-          <b>{$username}</b>
+<If condition={state.featureSwitches.featureSwitchEnableLogin}>
+
+  <Popover
+    class="mt-4 hidden sm:block"
+    defaultClass="py-2 px-3 w-fit "
+    trigger="null"
+    placement="bottom"
+    transition={(e) => fade(e, { duration: 150 })}
+    bind:open
+  >
+    {#if $username !== undefined}
+      <div style="width: max-content" class="flex items-center">
+        {#if $userdetails.img}
+          <img src={$userdetails.img} alt="avatar" class="mr-4 h-10 w-10 rounded-full" />
+        {/if}
+        <div>
+          <Tr t={Translations.t.general.welcomeBack}/>
+          <div class="normal-background" style="width: max-content">
+            <b>{$username}</b>
+          </div>
         </div>
       </div>
-    </div>
-  {/if}
-</Popover>
+    {/if}
+  </Popover>
+</If>