feat: [wip] identity menu & creation

src/lib/blah/crypto/keypair.ts

@@ -16,6 +16,9 @@ export class BlahKeyPair {
 	get id() {
 		return this.publicIdentity.id;
 	}
+	get name() {
+		return this.publicIdentity.name;
+	}
 
 	private constructor(publicIdentity: BlahPublicIdentity, privateKey: CryptoKey) {
 		this.publicIdentity = publicIdentity;

src/lib/blah/crypto/publicIdentity.ts

@@ -1,14 +1,26 @@
 import canonicalize from 'canonicalize';
 import type { BlahSignedPayload } from './signedPayload';
 import { bufToHex, hexToBuf } from './utils';
+import { adjectives, animals, uniqueNamesGenerator } from 'unique-names-generator';
+
+export function generateName(id: string) {
+	return uniqueNamesGenerator({
+		seed: id,
+		style: 'capital',
+		separator: ' ',
+		dictionaries: [adjectives, animals]
+	});
+}
 
 export class BlahPublicIdentity {
 	private publicKey: CryptoKey;
 	id: string;
+	name: string;
 
 	private constructor(publicKey: CryptoKey, id: string) {
 		this.publicKey = publicKey;
 		this.id = id;
+		this.name = generateName(id);
 	}
 
 	static async fromPublicKey(publicKey: CryptoKey): Promise<BlahPublicIdentity> {

src/lib/components/DropdownMenu.ts

@@ -0,0 +1,9 @@
+import { DropdownMenu } from 'bits-ui';
+
+import Content from './DropdownMenu/Content.svelte';
+import Trigger from './DropdownMenu/Trigger.svelte';
+import Item from './DropdownMenu/Item.svelte';
+
+const { Root, RadioGroup, RadioItem, Separator } = DropdownMenu;
+
+export { Root, Trigger, Content, Item, RadioGroup, RadioItem, Separator };

src/lib/components/DropdownMenu/Content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { DropdownMenu, type DropdownMenuContentProps } from 'bits-ui';
+
+	interface $$Props extends DropdownMenuContentProps {}
+</script>
+
+<DropdownMenu.Content
+	class="bg-sb-overlay min-w-32 rounded-lg border border-ss-secondary p-1 shadow-xl"
+	sideOffset={4}
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenu.Content>

src/lib/components/DropdownMenu/Item.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { DropdownMenu, type DropdownMenuItemProps } from 'bits-ui';
+
+	type $$Props = DropdownMenuItemProps;
+</script>
+
+<DropdownMenu.Item
+	class="cursor-default rounded px-1.5 py-0.5 text-sf-primary transition-colors duration-200 hover:bg-accent-50 dark:hover:bg-white/5"
+	on:click
+	{...$$restProps}
+>
+	<slot />
+</DropdownMenu.Item>

src/lib/components/DropdownMenu/Trigger.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { DropdownMenu, type DropdownMenuTriggerProps } from 'bits-ui';
+	type $$Props = DropdownMenuTriggerProps;
+</script>
+
+<DropdownMenu.Trigger class="cursor-default" {...$$restProps}>
+	<slot />
+</DropdownMenu.Trigger>

src/lib/keystore.ts

@@ -2,3 +2,4 @@ import type { EncodedBlahKeyPair } from './blah/crypto';
 import { localStore } from './localstore';
 
 export const keyStore = localStore<EncodedBlahKeyPair[]>('weblah-keypairs', []);
+export const currentKeyIndex = localStore<number>('weblah-current-key-index', 0);