$sessionListStore

import { $sessionListStore, $clerkStore } from '@clerk/astro/client'

export default function UserButton() {
  const sessions = useStore($sessionListStore)
  const { session, setActive, signOut } = useStore($clerkStore)

  if (sessions === undefined) {
    // Handle loading state
    return <div>Loading sessions...</div>
  }

  return (
    <div>
      <div>{session.user.primaryEmailAddress}</div>
      <div role="menu">
        {sessions.map((sess) => (
          <button role="menuitem" onClick={() => setActive({ session: sess.id })} key={sess.id}>
            {sess.user.primaryEmailAddress}
          </button>
        ))}
        <button role="menuitem" onClick={() => signOut()}>
          Sign out of all accounts
        </button>
      </div>
    </div>
  )
}

<script setup>
import { useStore } from '@nanostores/vue'
import { $sessionListStore, $clerkStore } from '@clerk/astro/client'

const sessions = useStore($sessionListStore)
const clerk = useStore($clerkStore)
</script>

<template>
  <div v-if="sessions === undefined">Loading sessions...</div>
  <div v-else>
    <div>{{ clerk.session.user.primaryEmailAddress }}</div>
    <div role="menu">
      <button
        v-for="sess in sessions"
        :key="sess.id"
        role="menuitem"
        @click="clerk.setActive({ session: sess.id })"
      >
        {{ sess.user.primaryEmailAddress }}
      </button>
      <button role="menuitem" @click="clerk.signOut">Sign out of all accounts</button>
    </div>
  </div>
</template>

<script>
  // The $ prefix is reserved in Svelte for its own reactivity system.
  // Alias the imports to avoid conflicts.
  import { $sessionListStore as sessions, $clerkStore as clerk } from '@clerk/astro/client'
</script>

{#if $sessions === undefined}
  <div>Loading sessions...</div>
{:else}
  <div>
    <div>{$clerk.session.user.primaryEmailAddress}</div>
    <div role="menu">
      {#each $sessions as sess (sess.id)}
        <button role="menuitem" on:click={() => $clerk.setActive({ session: sess.id })}>
          {sess.user.primaryEmailAddress}
        </button>
      {/each}
      <button role="menuitem" on:click={() => $clerk.signOut()}> Sign out of all accounts </button>
    </div>
  </div>
{/if}