windmill/frontend/src/lib/components/sidebar/UserMenu.svelte

<script lang="ts">
	import { goto } from '$lib/navigation'
	import { logout } from '$lib/logoutKit'
	import {
		userStore,
		usageStore,
		workspaceUsageStore,
		isPremiumStore,
		workspaceStore
	} from '$lib/stores'
	import { USER_SETTINGS_HASH } from './settings'
	import { isCloudHosted } from '$lib/cloud'
	import { twMerge } from 'tailwind-merge'
	import { Crown, KeyRound, ServerCog, LogOut, Moon, Settings, Sun, User } from 'lucide-svelte'
	import { accountSetup } from './accountSetup.svelte'
	import DarkModeObserver from '../DarkModeObserver.svelte'
	import MenuButton from './MenuButton.svelte'
	import { Menu, MenuItem, Tooltip } from '$lib/components/meltComponents'
	import { type MenubarBuilders } from '@melt-ui/svelte'
	import { EXECUTIONS_HINT } from './executionsHint'

	let darkMode: boolean = $state(false)

	interface Props {
		isCollapsed?: boolean
		lightMode?: boolean
		createMenu: MenubarBuilders['createMenu']
	}

	let { isCollapsed = false, lightMode = false, createMenu }: Props = $props()

	// An account entered through an invite link that still has no credentials of its own.
	let pendingSetup = $derived(accountSetup.pending)

	const itemClass = twMerge(
		'text-secondary text-left font-normal text-xs ',
		'flex flex-row items-center gap-2 px-4 py-3 w-full',
		'data-[highlighted]:bg-surface-hover data-[highlighted]:text-primary'
	)
</script>

<Menu {createMenu} usePointerDownOutside>
	{#snippet triggr({ trigger })}
		<MenuButton
			class="!text-xs"
			icon={User}
			label={`User (${$userStore?.username ?? $userStore?.email})`}
			{isCollapsed}
			{lightMode}
			showChevron
			{trigger}
		/>
	{/snippet}

	{#snippet children({ item })}
		<div class="px-4 py-3 border-b" role="none">
			<p class="text-sm font-medium text-primary truncate" role="none">
				{$userStore?.email}
			</p>
			<span class="text-xs text-primary flex flex-row gap-2 items-center">
				{#if $userStore?.non_member}
					Superadmin, not a member of this workspace <Crown size={14} />
				{:else if $userStore?.is_admin}
					Admin of this workspace <Crown size={14} />
				{:else if $userStore?.operator}
					Operator in this workspace <ServerCog size={14} />
				{/if}
			</span>
			{#if $userStore?.non_member}
				<span class="text-xs text-tertiary block mt-1">
					You are not a member, but as a superadmin you can access this workspace. You act here
					under the username
					<span class="font-mono font-medium text-primary">{$userStore?.username}</span>
					with admin permissions.
				</span>
			{/if}
		</div>
		<div class="py-1">
			{#if pendingSetup}
				<MenuItem
					onClick={() => setTimeout(() => (accountSetup.open = true), 50)}
					class={itemClass}
					{item}
				>
					<KeyRound size={16} />
					Finish account setup
				</MenuItem>
			{/if}
			<MenuItem href={USER_SETTINGS_HASH} class={itemClass} {item}>
				<Settings size={16} />
				Account settings
			</MenuItem>

			<MenuItem
				onClick={() => {
					if (!document.documentElement.classList.contains('dark')) {
						document.documentElement.classList.add('dark')
						window.localStorage.setItem('dark-mode', 'dark')
					} else {
						document.documentElement.classList.remove('dark')
						window.localStorage.setItem('dark-mode', 'light')
					}
				}}
				class={itemClass}
				{item}
			>
				{#if darkMode}
					<Sun size={16} />
				{:else}
					<Moon size={16} />
				{/if}
				Switch theme
			</MenuItem>

			<MenuItem onClick={() => logout()} class={itemClass} {item}>
				<LogOut size={16} />
				Sign out
			</MenuItem>
		</div>

		<!-- Both branches below assert a plan, so neither may render for an unresolved or
		failed tier: `{:else}` would read `undefined` as paid and claim "Premium plan". -->
		{#if isCloudHosted() && $isPremiumStore !== undefined}
			<div class="border-t">
				{#if $isPremiumStore === false}
					<span class="text-secondary block w-full text-left px-4 py-2 text-xs">
						{$usageStore ?? '—'}/1000 user execs
						<Tooltip small>
							{#snippet text()}
								{EXECUTIONS_HINT}
							{/snippet}
						</Tooltip>
					</span>
					<div class="px-4 w-full h-1 mb-1">
						<div class="bg-gray-200 h-full rounded-sm overflow-hidden">
							<div
								class="bg-blue-400 h-full"
								style="width: {Math.min($usageStore ?? 0, 1000) / 10}%"
							></div>
						</div>
					</div>
					{#if $workspaceStore != 'demo'}
						<span class="text-secondary block w-full text-left px-4 py-2 text-xs">
							{$workspaceUsageStore ?? '—'}/1000 free workspace execs
							<Tooltip small>
								{#snippet text()}
									{EXECUTIONS_HINT}
								{/snippet}
							</Tooltip>
						</span>
						<div class="px-4 w-full h-1 mb-1">
							<div class="bg-gray-200 h-full rounded-sm overflow-hidden">
								<div
									class="bg-blue-400 h-full"
									style="width: {Math.min($workspaceUsageStore ?? 0, 1000) / 10}%"
								></div>
							</div>
						</div>
					{/if}
					{#if $userStore?.is_admin}
						<MenuItem
							class={twMerge(itemClass, 'py-2')}
							onClick={() => {
								goto('/workspace_settings?tab=premium')
							}}
							{item}
						>
							Upgrade
						</MenuItem>
					{/if}
				{:else}
					<MenuItem
						class={twMerge(itemClass, 'py-2')}
						onClick={() => {
							goto('/workspace_settings?tab=premium')
						}}
						{item}
					>
						Premium plan
					</MenuItem>
				{/if}
			</div>
		{/if}
	{/snippet}
</Menu>

<DarkModeObserver bind:darkMode />