feat: self-service user signup (#672)

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/lib/components/ui/dropdown-button/dropdown-button-content.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+	import { cn } from '$lib/utils/style.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	export type DropdownButtonContentProps = DropdownMenuPrimitive.ContentProps;
+</script>
+
+<script lang="ts">
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: DropdownMenuPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md outline-none',
+			className
+		)}
+		{...restProps}
+	>
+		<DropdownMenuPrimitive.Arrow />
+		{@render children?.()}
+	</DropdownMenuPrimitive.Content>
+</DropdownMenuPrimitive.Portal>

frontend/src/lib/components/ui/dropdown-button/dropdown-button-item.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style.js';
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	class={cn(
+		'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		className
+	)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/dropdown-button/dropdown-button-main.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize
+	} from '$lib/components/ui/button/button.svelte';
+
+	export type DropdownButtonMainProps = WithElementRef<HTMLButtonAttributes> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: DropdownButtonMainProps = $props();
+</script>
+
+<button
+	bind:this={ref}
+	data-slot="dropdown-button-main"
+	class={cn(buttonVariants({ variant, size }), 'rounded-r-none border-r-0', className)}
+	{type}
+	{disabled}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

frontend/src/lib/components/ui/dropdown-button/dropdown-button-separator.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+	import { cn } from '$lib/utils/style.js';
+
+	export type DropdownButtonSeparatorProps = DropdownMenuPrimitive.SeparatorProps;
+</script>
+
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	class={cn('bg-muted -mx-1 my-1 h-px', className)}
+	{...restProps}
+/>

frontend/src/lib/components/ui/dropdown-button/dropdown-button-trigger.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize
+	} from '$lib/components/ui/button/button.svelte';
+
+	export type DropdownButtonTriggerProps = WithElementRef<HTMLButtonAttributes> & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		builders?: any[];
+	};
+</script>
+
+<script lang="ts">
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		type = 'button',
+		disabled,
+		builders = [],
+		children,
+		...restProps
+	}: DropdownButtonTriggerProps = $props();
+</script>
+
+<button
+	bind:this={ref}
+	use:builders[0]
+	data-slot="dropdown-button-trigger"
+	class={cn(
+		buttonVariants({ variant, size }),
+		'border-l-background/20 rounded-l-none border-l px-2',
+		className
+	)}
+	{type}
+	{disabled}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<ChevronDown class="size-4" />
+	{/if}
+</button>

frontend/src/lib/components/ui/dropdown-button/dropdown-button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '$lib/utils/style.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type DropdownButtonProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: DropdownButtonProps = $props();
+</script>
+
+<div bind:this={ref} data-slot="dropdown-button" class={cn('flex', className)} {...restProps}>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/dropdown-button/index.ts

@@ -0,0 +1,30 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import Root from './dropdown-button.svelte';
+import Main from './dropdown-button-main.svelte';
+import Trigger from './dropdown-button-trigger.svelte';
+import Content from './dropdown-button-content.svelte';
+import Item from './dropdown-button-item.svelte';
+import Separator from './dropdown-button-separator.svelte';
+
+const DropdownRoot = DropdownMenuPrimitive.Root;
+const DropdownTrigger = DropdownMenuPrimitive.Trigger;
+
+export {
+	Root,
+	Main,
+	Trigger,
+	Content,
+	Item,
+	Separator,
+	DropdownRoot,
+	DropdownTrigger,
+	//
+	Root as DropdownButton,
+	Main as DropdownButtonMain,
+	Trigger as DropdownButtonTrigger,
+	Content as DropdownButtonContent,
+	Item as DropdownButtonItem,
+	Separator as DropdownButtonSeparator,
+	DropdownRoot as DropdownButtonRoot,
+	DropdownTrigger as DropdownButtonPrimitiveTrigger
+};