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

<script lang="ts">
	import {
		Contrast,
		CreditCard,
		MessageCircleQuestionMark,
		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';
	import * as Tooltip from '$lib/components/ui/tooltip';
	import PersonasModal from './PersonasModal.svelte';
</script>

<Panel
	position={breakpointsState.isMobile ? 'bottom-right' : 'top-right'}
	class="flex items-center justify-end gap-2 p-1 lg:p-2"
>
	<Tooltip.Root delayDuration={0}>
		<Tooltip.Trigger>
			<a
				href="https://huggingface.co/spaces/huggingface/inference-playground/discussions/12"
				target="_blank"
			>
				<Button variant="outline" size={breakpointsState.isMobile ? 'icon-sm' : 'icon-lg'}>
					<MessageCircleQuestionMark class={breakpointsState.isMobile ? 'size-4' : 'size-5'} />
				</Button>
			</a>
		</Tooltip.Trigger>
		<Tooltip.Content>Get support or report an issue</Tooltip.Content>
	</Tooltip.Root>
	<PersonasModal />
	<InstructionsModal />
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			{#snippet child({ props })}
				<Button
					{...props}
					variant="outline"
					size={breakpointsState.isMobile ? 'sm' : 'lg'}
					class="px-3!"
				>
					{#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="{breakpointsState.isMobile ? 'size-4' : 'size-5'} rounded-full"
						/>
						{authState.user.username}
					{:else}
						<img
							src={defaultAvatar}
							alt="User Avatar"
							class="{breakpointsState.isMobile ? 'size-4' : 'size-5'} rounded-full"
						/>
						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} />