feat: [wip] identity menu & creation

src/routes/(app)/ChatListHeader.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import Button from '$lib/components/Button.svelte';
 	import InputFrame from '$lib/components/InputFrame.svelte';
-	import { AvatarBeam } from 'svelte-boring-avatars';
+	import IdentityMenu from './IdentityMenu.svelte';
 </script>
 
 <header class="flex items-center justify-stretch gap-2 border-b border-ss-secondary p-2 shadow-sm">
-	<div><AvatarBeam size={30} name="Shibo Lyu" /></div>
+	<IdentityMenu />
 	<InputFrame class="flex-1">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

src/routes/(app)/IdentityMenu.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import * as DropdownMenu from '$lib/components/DropdownMenu';
+	import { AvatarBeam } from 'svelte-boring-avatars';
+	import { keyStore, currentKeyIndex } from '$lib/keystore';
+	import { BlahKeyPair, generateName } from '$lib/blah/crypto';
+
+	let currentKeyId: string | undefined;
+	$: currentKeyId = $keyStore[$currentKeyIndex]?.id;
+	$: currentKeyName = currentKeyId ? generateName(currentKeyId) : null;
+
+	async function createKeyPair() {
+		const newKeyPair = await BlahKeyPair.generate();
+		const encoded = await newKeyPair.encode();
+		$keyStore = [...$keyStore, encoded];
+		$currentKeyIndex = $keyStore.length - 1;
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#if currentKeyId}
+			<AvatarBeam size={30} name={currentKeyId} />
+			<span class="sr-only">Using identity {currentKeyName}</span>
+		{:else}
+			<div
+				class="box-border size-[30px] rounded-full border-2 border-dashed border-ss-primary"
+				aria-hidden
+			/>
+			<span class="sr-only">Using no identity</span>
+		{/if}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content>
+		{#if $keyStore.length > 0}
+			<DropdownMenu.RadioGroup bind:value={currentKeyId}>
+				{#each $keyStore as { id }}
+					{@const name = generateName(id)}
+					<DropdownMenu.RadioItem value={id}>
+						<AvatarBeam size={30} {name} />
+						<span>{name}</span>
+					</DropdownMenu.RadioItem>
+				{/each}
+			</DropdownMenu.RadioGroup>
+			<DropdownMenu.Separator />
+		{/if}
+		<DropdownMenu.Item on:click={createKeyPair}>Create new identity</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>