feat: add support for email verification (#1223)

frontend/src/lib/components/ui/alert/alert.svelte

@@ -6,9 +6,11 @@
 		variants: {
 			variant: {
 				default: 'bg-card text-card-foreground',
+				success:
+					'bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100 [&>svg]:text-green-900 dark:[&>svg]:text-green-100',
 				info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 [&>svg]:text-blue-900 dark:[&>svg]:text-blue-100',
 				destructive:
-					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current',
+					'bg-red-100 text-red-900 dark:bg-red-900 dark:text-red-100 [&>svg]:text-red-900 dark:[&>svg]:text-red-100',
 				warning:
 					'bg-warning text-warning-foreground border-warning/40 [&>svg]:text-warning-foreground'
 			}
@@ -32,10 +34,12 @@
 		class: className,
 		variant = 'default',
 		children,
+		onDismiss,
 		dismissibleId = undefined,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		variant?: AlertVariant;
+		onDismiss?: () => void;
 		dismissibleId?: string;
 	} = $props();
 
@@ -49,6 +53,7 @@
 	});
 
 	function dismiss() {
+		onDismiss?.();
 		if (dismissibleId) {
 			const dismissedAlerts = JSON.parse(localStorage.getItem('dismissed-alerts') || '[]');
 			localStorage.setItem('dismissed-alerts', JSON.stringify([...dismissedAlerts, dismissibleId]));
@@ -66,7 +71,7 @@
 		role="alert"
 	>
 		{@render children?.()}
-		{#if dismissibleId}
+		{#if dismissibleId || onDismiss}
 			<button onclick={dismiss} class="absolute right-0 top-0 m-3 text-black dark:text-white"
 				><LucideX class="size-4" /></button
 			>

frontend/src/lib/components/ui/toggle/index.ts

@@ -0,0 +1,13 @@
+import Root from "./toggle.svelte";
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from "./toggle.svelte";
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};

frontend/src/lib/components/ui/toggle/toggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const toggleVariants = tv({
+		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs",
+			},
+			size: {
+				default: "h-9 min-w-9 px-2",
+				sm: "h-8 min-w-8 px-1.5",
+				lg: "h-10 min-w-10 px-2.5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>["variant"];
+	export type ToggleSize = VariantProps<typeof toggleVariants>["size"];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from "bits-ui";
+	import { cn } from "$lib/utils/style.js";
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>