use dropdown in billing modal

src/lib/components/inference-playground/billing-modal.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
 	import { billing } from "$lib/state/billing.svelte";
+	import { user } from "$lib/state/user.svelte";
+	import { cn } from "$lib/utils/cn.js";
+	import { Select } from "melt/builders";
+	import IconCaret from "~icons/carbon/chevron-down";
 	import Dialog from "../dialog.svelte";
+	import { Avatar } from "melt/components";
+	import { omit } from "$lib/utils/object.svelte";
+	import IconLoading from "~icons/line-md/loading-loop";
 
 	interface Props {
 		onClose: () => void;
@@ -8,22 +15,52 @@
 
 	const { onClose }: Props = $props();
 
-	let inputValue = $state(billing.organization);
+	const options = $derived([
+		{ value: "", label: "Personal Account", avatarUrl: user.avatarUrl, isEnterprise: false },
+		...user.orgs.map(org => ({
+			value: org.name,
+			label: org.fullname,
+			avatarUrl: org.avatarUrl,
+			isEnterprise: org.isEnterprise,
+		})),
+	]);
+
+	const select = new Select({
+		value: () => billing.organization,
+		onValueChange(v) {
+			if (v !== undefined) {
+				billing.organization = v;
+			}
+		},
+		sameWidth: true,
+	});
 
 	function handleSubmit(e: Event) {
 		e.preventDefault();
-		const form = e.target as HTMLFormElement;
-		const formData = new FormData(form);
-		const org = (formData.get("billing-org") as string).trim() ?? "";
-		billing.organization = org;
-		inputValue = org;
 		onClose();
 	}
 
-	function handleReset() {
-		billing.reset();
-		inputValue = "";
-	}
+	const getInitials = (username: string): string => {
+		// Handle empty strings
+		if (!username) return "";
+
+		// Split by common separators and handle camelCase/PascalCase
+		const parts = username
+			// Insert space before capitals in camelCase/PascalCase
+			.replace(/([a-z])([A-Z])/g, "$1 $2")
+			// Split by common separators
+			.split(/[\s\-_/.]+/)
+			// Remove empty parts
+			.filter(part => part.length > 0);
+
+		// Get first letter of first part
+		const firstInitial = parts[0]?.[0]?.toUpperCase() || "";
+
+		// Get first letter of last part if different from first part
+		const lastInitial = parts.length > 1 ? parts[parts.length - 1]?.[0]?.toUpperCase() : "";
+
+		return firstInitial + (lastInitial === firstInitial ? "" : lastInitial);
+	};
 </script>
 
 <Dialog title="Billing Settings" open={true} {onClose}>
@@ -31,16 +68,97 @@
 		<form onsubmit={handleSubmit} class="space-y-4">
 			<div>
 				<div class="mb-2 flex items-center gap-2">
-					<label for="billing-org" class="text-sm font-medium text-gray-900 dark:text-white"> Organization Name </label>
+					<label for="billing-org" class="text-sm font-medium text-gray-900 dark:text-white">
+						Billing Organization
+					</label>
 				</div>
-				<input
-					type="text"
-					id="billing-org"
-					name="billing-org"
-					bind:value={inputValue}
-					placeholder="my-org-name"
-					class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-3 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-				/>
+
+				{#if user.loading}
+					<div
+						class="flex items-center gap-2 rounded-lg border border-gray-300 bg-gray-50 p-3 dark:border-gray-600 dark:bg-gray-700"
+					>
+						<div
+							class="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-gray-900 dark:border-gray-600 dark:border-t-white"
+						></div>
+						<span class="text-sm text-gray-600 dark:text-gray-400">Loading organizations...</span>
+					</div>
+				{:else}
+					<button
+						{...select.trigger}
+						type="button"
+						class={cn(
+							"relative flex w-full items-center justify-between gap-3 rounded-lg border border-gray-300 bg-gray-50 p-3 text-left text-sm",
+							"hover:bg-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-500",
+							"dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:border-blue-500 dark:focus:ring-blue-500",
+						)}
+					>
+						{#each options as option}
+							{#if option.value === billing.organization}
+								<div class="flex items-center gap-3">
+									{#if option.avatarUrl}
+										<img src={option.avatarUrl} alt="" class="h-6 w-6 rounded-full" />
+									{/if}
+									<span class="text-gray-900 dark:text-white">
+										{option.label}
+									</span>
+									{#if option.isEnterprise}
+										<span
+											class="rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+										>
+											Enterprise
+										</span>
+									{/if}
+								</div>
+							{/if}
+						{/each}
+						<div class="flex-none text-gray-500 dark:text-gray-400">
+							<IconCaret />
+						</div>
+					</button>
+
+					<div
+						{...select.content}
+						class="z-50 max-h-60 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+					>
+						{#each options as option (option.value)}
+							{@const optionProps = select.getOption(option.value)}
+							<div {...optionProps} class="group cursor-pointer px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
+								<div class="flex items-center gap-3">
+									{#if option.avatarUrl}
+										<Avatar src={option.avatarUrl}>
+											{#snippet children(avatar)}
+												<div
+													class="relative flex size-6 items-center justify-center overflow-hidden rounded-full bg-neutral-300 dark:bg-neutral-100"
+												>
+													<img
+														{...avatar.image}
+														alt="{option.label}'s avatar"
+														class={[
+															"absolute inset-0 !block h-full w-full rounded-[inherit] ",
+															avatar.loadingStatus === "loaded" ? "" : "invisible",
+														]}
+													/>
+													<span {...avatar.fallback} class="!block text-4xl font-medium text-neutral-700">
+														{getInitials(option.label)}
+													</span>
+												</div>
+											{/snippet}
+										</Avatar>
+									{/if}
+
+									<span class="text-sm text-gray-900 dark:text-white">{option.label}</span>
+									{#if option.isEnterprise}
+										<span
+											class="rounded bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
+										>
+											Enterprise
+										</span>
+									{/if}
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
 			</div>
 
 			<!-- Current Status -->
@@ -58,11 +176,28 @@
 					<div class="rounded-lg bg-green-50 p-3 dark:bg-green-900/20">
 						<div class="flex items-center gap-3">
 							{#if billing.organizationInfo.avatar}
-								<img
-									src={billing.organizationInfo.avatar}
-									alt={billing.organizationInfo.displayName}
-									class="h-8 w-8 rounded-full"
-								/>
+								<Avatar src={billing.organizationInfo.avatar}>
+									{#snippet children(avatar)}
+										<div
+											class="relative flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-300 dark:bg-neutral-800"
+										>
+											<img
+												{...avatar.image}
+												alt="{billing.organizationInfo?.displayName}'s avatar"
+												class={[
+													"absolute inset-0 !block h-full w-full rounded-[inherit] ",
+													avatar.loadingStatus === "loaded" ? "fade-in" : "invisible",
+												]}
+											/>
+											<span
+												{...omit(avatar.fallback, "style", "hidden")}
+												class="!block text-sm font-medium text-neutral-200"
+											>
+												<IconLoading />
+											</span>
+										</div>
+									{/snippet}
+								</Avatar>
 							{/if}
 							<div class="flex-1">
 								<div class="flex items-center gap-2">
@@ -103,7 +238,7 @@
 				{#if billing.organization}
 					<button
 						type="button"
-						onclick={handleReset}
+						onclick={() => billing.reset()}
 						class="rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
 					>
 						Reset
@@ -131,3 +266,22 @@
 		</div>
 	</div>
 </Dialog>
+
+<style>
+	.fade-in {
+		animation: fade-in 0.25s ease-in-out;
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+			filter: blur(10px);
+			scale: 1.2;
+		}
+		to {
+			opacity: 1;
+			filter: blur(0);
+			scale: 1;
+		}
+	}
+</style>

src/lib/state/user.svelte.ts

@@ -0,0 +1,103 @@
+import { token } from "./token.svelte.js";
+
+interface Org {
+	type: "org";
+	id: string;
+	name: string;
+	fullname: string;
+	avatarUrl: string;
+	roleInOrg: string;
+	isEnterprise: boolean;
+}
+
+interface WhoamiResponse {
+	type: "user";
+	id: string;
+	name: string;
+	fullname: string;
+	email: string;
+	avatarUrl: string;
+	orgs: Org[];
+}
+
+class User {
+	#info = $state<WhoamiResponse | null>(null);
+	#loading = $state(false);
+	#error = $state<string | null>(null);
+
+	constructor() {
+		$effect.root(() => {
+			$effect(() => {
+				if (token.value) {
+					this.fetchUserInfo();
+				} else {
+					this.#info = null;
+				}
+			});
+		});
+	}
+
+	get info() {
+		return this.#info;
+	}
+
+	get loading() {
+		return this.#loading;
+	}
+
+	get error() {
+		return this.#error;
+	}
+
+	get orgs() {
+		return this.#info?.orgs ?? [];
+	}
+
+	get name() {
+		return this.#info?.name ?? "";
+	}
+
+	get fullname() {
+		return this.#info?.fullname ?? "";
+	}
+
+	get avatarUrl() {
+		return this.#info?.avatarUrl ?? "";
+	}
+
+	async fetchUserInfo() {
+		if (!token.value) {
+			this.#info = null;
+			return;
+		}
+
+		this.#loading = true;
+		this.#error = null;
+
+		try {
+			const response = await fetch("https://huggingface.co/api/whoami-v2", {
+				headers: {
+					Authorization: `Bearer ${token.value}`,
+				},
+			});
+
+			if (!response.ok) {
+				throw new Error(`Failed to fetch user info: ${response.statusText}`);
+			}
+
+			this.#info = await response.json();
+		} catch (error) {
+			this.#error = error instanceof Error ? error.message : "Unknown error";
+			console.error("Failed to fetch user info:", error);
+		} finally {
+			this.#loading = false;
+		}
+	}
+
+	reset() {
+		this.#info = null;
+		this.#error = null;
+	}
+}
+
+export const user = new User();