src/lib/components/flow/actions/PanelRightActions.svelte

<script lang="ts">
	import { Contrast, CreditCard, LifeBuoy, Monitor, Moon, Sun } from '@lucide/svelte';
	import { Panel } from '@xyflow/svelte';
	import { setMode } from 'mode-watcher';

	import { Button } from '$lib/components/ui/button';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
	import { authState } from '$lib/state/auth.svelte';
	import { billingModalState } from '$lib/state/billing-modal.svelte';
	import defaultAvatar from '$lib/assets/default-avatar.svg';
	import BillingManagementModal from '$lib/components/billing/BillingManagementModal.svelte';
	import InstructionsModal from './InstructionsModal.svelte';
	import { breakpointsState } from '$lib/state/breakpoints.svelte';
</script>

<Panel
	position={breakpointsState.isMobile ? 'bottom-right' : 'top-right'}
	class="flex items-center justify-end gap-2 p-1 lg:p-2"
>
	<a
		href="https://huggingface.co/spaces/huggingface/inference-playground/discussions/12"
		target="_blank"
	>
		<Button variant="outline" size={breakpointsState.isMobile ? 'icon-sm' : 'default'}>
			<LifeBuoy />
			{#if !breakpointsState.isMobile}
				Support
			{/if}
		</Button>
	</a>
	<InstructionsModal />
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			{#snippet child({ props })}
				<Button {...props} variant="outline" size={breakpointsState.isMobile ? 'sm' : 'default'}>
					{#if authState.loading}
						<div class="h-2 w-12 animate-pulse rounded-full bg-accent-foreground/20"></div>
					{:else if authState.user}
						<img
							src={authState.user.avatarUrl}
							alt={authState.user.name}
							class="size-4 rounded-full"
						/>
						{authState.user.name}
					{:else}
						<img src={defaultAvatar} alt="User Avatar" class="size-4" />
						Account
					{/if}
				</Button>
			{/snippet}
		</DropdownMenu.Trigger>
		<DropdownMenu.Content class="w-56" align="end">
			{#if authState.user}
				<DropdownMenu.Group>
					<div class="flex items-center gap-2 px-2 py-1.5">
						<img
							src={authState.user.avatarUrl}
							alt={authState.user.name}
							class="size-8 rounded-full"
						/>
						<div class="flex flex-col">
							<span class="text-sm font-medium">{authState.user.name}</span>
							<span class="text-xs text-muted-foreground">@{authState.user.username}</span>
						</div>
					</div>
				</DropdownMenu.Group>
				<DropdownMenu.Separator />
			{/if}
			<DropdownMenu.Group>
				{#if authState.user}
					<DropdownMenu.Item onclick={() => (billingModalState.open = true)}>
						<CreditCard />
						Billings
					</DropdownMenu.Item>
				{/if}
				<DropdownMenu.Sub>
					<DropdownMenu.SubTrigger>
						<Contrast />
						Appearance
					</DropdownMenu.SubTrigger>
					<DropdownMenu.SubContent>
						<DropdownMenu.Item onclick={() => setMode('light')}><Sun />Light</DropdownMenu.Item>
						<DropdownMenu.Item onclick={() => setMode('dark')}><Moon />Dark</DropdownMenu.Item>
						<DropdownMenu.Item onclick={() => setMode('system')}
							><Monitor />System</DropdownMenu.Item
						>
					</DropdownMenu.SubContent>
				</DropdownMenu.Sub>
			</DropdownMenu.Group>
		</DropdownMenu.Content>
	</DropdownMenu.Root>
</Panel>

<BillingManagementModal bind:open={billingModalState.open} />