From 89ba8ce2c14afc78ab131686e5dd5536ff9d080c Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sat, 7 Jun 2025 13:31:36 +0200
Subject: [PATCH] UX: add popup indicating "logged in as"

---
 src/UI/BigComponents/GpsElementHelper.svelte |  3 +-
 src/UI/BigComponents/WelcomeBack.svelte      | 39 ++++++++++++++++++++
 src/UI/ThemeViewGUI.svelte                   |  2 +
 3 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/UI/BigComponents/WelcomeBack.svelte

diff --git a/src/UI/BigComponents/GpsElementHelper.svelte b/src/UI/BigComponents/GpsElementHelper.svelte
index 23f0f1e27..cf321e24d 100644
--- a/src/UI/BigComponents/GpsElementHelper.svelte
+++ b/src/UI/BigComponents/GpsElementHelper.svelte
@@ -14,7 +14,6 @@
   let open = true
 
   function showFor(timeoutSeconds: number = 5) {
-    console.trace("Showing for", timeoutSeconds)
     open = true
     window.setTimeout(() => {
         open = false
@@ -36,7 +35,7 @@
   })
   let explanation = gpsState.gpsStateExplanation
   onDestroy(
-    explanation.addCallbackD(
+    explanation.stabilized(50).addCallbackD(
       expl => {
         if (expl) {
           showFor(5)
diff --git a/src/UI/BigComponents/WelcomeBack.svelte b/src/UI/BigComponents/WelcomeBack.svelte
new file mode 100644
index 000000000..5d484dadf
--- /dev/null
+++ b/src/UI/BigComponents/WelcomeBack.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+
+  import { Avatar, Popover } from "flowbite-svelte"
+  import { fade } from "svelte/transition"
+  import Tr from "../Base/Tr.svelte"
+  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
+
+  let open = false
+  export let state: { osmConnection: OsmConnection }
+  let userdetails = state.osmConnection.userDetails
+
+  userdetails.addCallbackAndRunD(ud => {
+    if (ud) {
+      open = true
+      window.setTimeout(() => {
+         open = false
+      }, 5000)
+    }
+  })
+</script>
+
+
+<Popover class="mt-4" defaultClass="py-2 px-3 w-fit " trigger=null placement="bottom"
+         transition={e => fade(e, {duration: 150})} bind:open>
+  {#if $userdetails !== undefined}
+    <div style="width: max-content" class="flex items-center">
+      {#if $userdetails.img}
+        <img src={$userdetails.img } alt="profile picture" class="w-8 h-8 rounded-full mr-4" />
+      {/if}
+      <div>
+        <div>Welcome back</div>
+        <div class="normal-background" style="width: max-content">
+          <b>{$userdetails?.name}</b>
+        </div>
+      </div>
+    </div>
+  {/if}
+</Popover>
+
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 14a7670fa..bfe4ff1f1 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -53,6 +53,7 @@
   import TagRenderingAnswer from "./Popup/TagRendering/TagRenderingAnswer.svelte"
   import GpsElementHelper from "./BigComponents/GpsElementHelper.svelte"
   import { dragDetection } from "../Utils/dragDetection"
+  import WelcomeBack from "./BigComponents/WelcomeBack.svelte"
   export let state: WithSearchState
   new TitleHandler(state.selectedElement, state)
 
@@ -353,6 +354,7 @@
           on:keydown={forwardEventToMap}
         >
           <MenuIcon class="h-6 w-6 cursor-pointer" />
+          <WelcomeBack {state}/>
         </MapControlButton>
 
         <MapControlButton