MapComplete/src/UI/BigComponents/WelcomeBack.svelte

<script lang="ts">
  import { Popover } from "flowbite-svelte"
  import { fade } from "svelte/transition"
  import { OsmConnection } from "../../Logic/Osm/OsmConnection"
  import { onDestroy } from "svelte"

  let open = false
  export let state: { osmConnection: OsmConnection }
  let userdetails = state.osmConnection.userDetails
  let username = userdetails.mapD((ud) => ud.name, onDestroy)
  username.addCallbackAndRunD((ud) => {
    if (ud) {
      open = true
      window.setTimeout(() => {
        open = false
      }, 3000)
    }
  })
</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>
        </div>
      </div>
    </div>
  {/if}
</Popover>