UX: tone down popover elements

src/UI/BigComponents/GpsElementHelper.svelte

@@ -7,14 +7,16 @@
   import Tr from "../Base/Tr.svelte"
   import { onDestroy } from "svelte"
   import { Popover } from "flowbite-svelte"
+  import { Store } from "../../Logic/UIEventSource"
 
   export let state: ThemeViewState
   let gpsState = state.geolocationState
   export let mapIsDragged: Store<void>
   let open = true
 
-  function showFor(timeoutSeconds: number = 5) {
+  function showFor(timeoutSeconds: number = 3) {
     open = true
+    console.trace("Showing gpshelperelement")
     window.setTimeout(() => {
       open = false
     }, timeoutSeconds * 1000)
@@ -30,13 +32,13 @@
     if (gpsState.gpsAvailable.data && gpsState.allowMoving.data) {
       return
     }
-    showFor(5)
+    showFor(3)
   })
-  let explanation = gpsState.gpsStateExplanation
+  let explanation = gpsState.gpsStateExplanation.stabilized(50)
   onDestroy(
-    explanation.stabilized(50).addCallbackD((expl) => {
+    explanation.addCallback((expl) => {
       if (expl) {
-        showFor(5)
+        showFor(3)
       } else {
         open = false
       }
@@ -46,7 +48,6 @@
 
 <Popover
   reference={undefined}
-  trigger="null"
   placement="left"
   transition={(e) => fade(e, { duration: 150 })}
   bind:open

src/UI/BigComponents/WelcomeBack.svelte

@@ -6,26 +6,26 @@
   let open = false
   export let state: { osmConnection: OsmConnection }
   let userdetails = state.osmConnection.userDetails
-
-  userdetails.addCallbackAndRunD((ud) => {
+  let username = userdetails.mapD(ud => ud.name)
+  username.addCallbackAndRunD((ud) => {
     if (ud) {
       open = true
       window.setTimeout(() => {
-        open = false
-      }, 5000)
+         open = false
+      }, 3000)
     }
   })
 </script>
 
 <Popover
-  class="z-50 mt-4"
+  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 $userdetails !== undefined}
+  {#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-8 w-8 rounded-full" />
@@ -33,7 +33,7 @@
       <div>
         <div>Welcome back</div>
         <div class="normal-background" style="width: max-content">
-          <b>{$userdetails?.name}</b>
+          <b>{$username}</b>
         </div>
       </div>
     </div>