feat: status page improvements

frontend/package.json

@@ -49,8 +49,8 @@
 		"mode-watcher": "^0.1.2",
 		"motion": "^10.17.0",
 		"nprogress": "^0.2.0",
-		"svelte-sonner": "^0.3.6",
-		"sveltekit-superforms": "^1.13.1",
+		"svelte-sonner": "^0.3.11",
+		"sveltekit-superforms": "^1.13.4",
 		"tailwind-merge": "^2.2.0",
 		"tailwind-variants": "^0.1.18",
 		"uuid": "^9.0.1",

frontend/src/lib/components/ui/accordion/accordion-item.svelte

@@ -9,10 +9,6 @@
 	export { className as class };
 </script>
 
-<AccordionPrimitive.Item
-	{value}
-	class={cn("border-b", className)}
-	{...$$restProps}
->
+<AccordionPrimitive.Item {value} class={cn("border-b", className)} {...$$restProps}>
 	<slot />
 </AccordionPrimitive.Item>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -11,11 +11,7 @@
 </script>
 
 <AlertDialogPrimitive.Cancel
-	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"mt-2 sm:mt-0",
-		className
-	)}
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
 	{...$$restProps}
 	on:click
 	on:keydown

frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -9,10 +9,7 @@
 </script>
 
 <div
-	class={cn(
-		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-		className
-	)}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -8,9 +8,6 @@
 	export { className as class };
 </script>
 
-<div
-	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
-	{...$$restProps}
->
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -16,9 +16,6 @@
 <AlertDialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn(
-		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ",
-		className
-	)}
+	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ", className)}
 	{...$$restProps}
 />

frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -9,10 +9,6 @@
 	export { className as class };
 </script>
 
-<AlertDialogPrimitive.Title
-	class={cn("text-lg font-semibold", className)}
-	{level}
-	{...$$restProps}
->
+<AlertDialogPrimitive.Title class={cn("text-lg font-semibold", className)} {level} {...$$restProps}>
 	<slot />
 </AlertDialogPrimitive.Title>

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

@@ -12,10 +12,6 @@
 	export { className as class };
 </script>
 
-<div
-	class={cn(alertVariants({ variant }), className)}
-	{...$$restProps}
-	role="alert"
->
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
 	<slot />
 </div>

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

@@ -5,8 +5,7 @@ export const badgeVariants = tv({
 	base: "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 	variants: {
 		variant: {
-			default:
-				"bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
+			default: "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
 			secondary:
 				"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
 			destructive:

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

@@ -7,12 +7,10 @@ const buttonVariants = tv({
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/90",
-			destructive:
-				"bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 			outline:
 				"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-			secondary:
-				"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
 			ghost: "hover:bg-accent hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline"
 		},

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

@@ -9,10 +9,7 @@
 </script>
 
 <div
-	class={cn(
-		"rounded-lg border bg-card text-card-foreground shadow-sm",
-		className
-	)}
+	class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/carousel/carousel-content.svelte

@@ -2,16 +2,29 @@
 	import { cn } from "$lib/utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { getEmblaContext } from "./context.js";
+	import emblaCarouselSvelte from "embla-carousel-svelte";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
 
-	const { orientation } = getEmblaContext("<Carousel.Content/>");
+	const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
 </script>
 
-<div class="overflow-hidden">
+<div
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...$options,
+			axis: $orientation === "horizontal" ? "x" : "y"
+		},
+		plugins: $plugins
+	}}
+	on:emblaInit={onInit}
+>
 	<div
 		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
 		data-embla-container=""

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import emblaCarouselSvelte from "embla-carousel-svelte";
 	import { setEmblaContex, type CarouselProps, type CarouselAPI } from "./context.js";
 	import { cn } from "$lib/utils.js";
 	import { writable } from "svelte/store";
@@ -19,8 +18,12 @@
 	const orientationStore = writable(orientation);
 	const canScrollPrev = writable(false);
 	const canScrollNext = writable(false);
+	const optionsStore = writable(opts);
+	const pluginStore = writable(plugins);
 
 	$: orientationStore.set(orientation);
+	$: pluginStore.set(plugins);
+	$: optionsStore.set(opts);
 
 	function scrollPrev() {
 		api?.scrollPrev();
@@ -58,7 +61,10 @@
 		orientation: orientationStore,
 		canScrollNext,
 		canScrollPrev,
-		handleKeyDown
+		handleKeyDown,
+		options: optionsStore,
+		plugins: pluginStore,
+		onInit
 	});
 
 	function onInit(event: CustomEvent<CarouselAPI>) {
@@ -73,16 +79,6 @@
 
 <div
 	class={cn("relative", className)}
-	use:emblaCarouselSvelte={{
-		options: {
-			container: "[data-embla-container]",
-			slides: "[data-embla-slide]",
-			...opts,
-			axis: $orientationStore === "horizontal" ? "x" : "y"
-		},
-		plugins
-	}}
-	on:emblaInit={onInit}
 	on:mouseenter
 	on:mouseleave
 	role="region"

frontend/src/lib/components/ui/carousel/context.ts

@@ -34,6 +34,9 @@ type EmblaContext = {
 	canScrollNext: Readable<boolean>;
 	canScrollPrev: Readable<boolean>;
 	handleKeyDown: (e: KeyboardEvent) => void;
+	options: Writable<CarouselOptions>;
+	plugins: Writable<CarouselPlugins>;
+	onInit: (e: CustomEvent<CarouselAPI>) => void;
 };
 
 export function setEmblaContex(config: EmblaContext): EmblaContext {

frontend/src/lib/components/ui/command/command-empty.svelte

@@ -7,9 +7,6 @@
 	export { className as class };
 </script>
 
-<CommandPrimitive.Empty
-	class={cn("py-6 text-center text-sm", className)}
-	{...$$restProps}
->
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
 	<slot />
 </CommandPrimitive.Empty>

frontend/src/lib/components/ui/command/command-separator.svelte

@@ -7,7 +7,4 @@
 	export { className as class };
 </script>
 
-<CommandPrimitive.Separator
-	class={cn("-mx-1 h-px bg-border", className)}
-	{...$$restProps}
-/>
+<CommandPrimitive.Separator class={cn("-mx-1 h-px bg-border", className)} {...$$restProps} />

frontend/src/lib/components/ui/command/command-shortcut.svelte

@@ -9,10 +9,7 @@
 </script>
 
 <span
-	class={cn(
-		"ml-auto text-xs tracking-widest text-muted-foreground",
-		className
-	)}
+	class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/dialog/dialog-footer.svelte

@@ -9,10 +9,7 @@
 </script>
 
 <div
-	class={cn(
-		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-		className
-	)}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
 	{...$$restProps}
 >
 	<slot />

frontend/src/lib/components/ui/dialog/dialog-header.svelte

@@ -8,9 +8,6 @@
 	export { className as class };
 </script>
 
-<div
-	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
-	{...$$restProps}
->
+<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
 	<slot />
 </div>

frontend/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -16,9 +16,6 @@
 <DialogPrimitive.Overlay
 	{transition}
 	{transitionConfig}
-	class={cn(
-		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
-		className
-	)}
+	class={cn("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm", className)}
 	{...$$restProps}
 />

frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -8,9 +8,6 @@
 	export { className as class };
 </script>
 
-<span
-	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-	{...$$restProps}
->
+<span class={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...$$restProps}>
 	<slot />
 </span>

frontend/src/lib/components/ui/form/form-description.svelte

@@ -8,9 +8,6 @@
 	export { className as class };
 </script>
 
-<FormPrimitive.Description
-	class={cn("text-sm text-muted-foreground", className)}
-	{...$$restProps}
->
+<FormPrimitive.Description class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
 	<slot />
 </FormPrimitive.Description>

frontend/src/lib/components/ui/form/form-label.svelte

@@ -12,10 +12,6 @@
 	const { errors, ids } = getFormField();
 </script>
 
-<Label
-	for={$ids.input}
-	class={cn($errors && "text-destructive", className)}
-	{...$$restProps}
->
+<Label for={$ids.input} class={cn($errors && "text-destructive", className)} {...$$restProps}>
 	<slot />
 </Label>

frontend/src/lib/components/ui/form/form-select-trigger.svelte

@@ -7,17 +7,12 @@
 		placeholder?: string;
 	};
 	type $$Events = SelectPrimitive.TriggerEvents;
-	const { attrStore } = getFormField();
+	const { attrStore, value } = getFormField();
 	export let placeholder = "";
 </script>
 
-<Select.Trigger
-	{...$$restProps}
-	{...$attrStore}
-	on:click
-	on:keydown
-	type="button"
->
-	<Select.Value {placeholder} />
-	<slot />
+<Select.Trigger {...$$restProps} {...$attrStore} on:click on:keydown type="button">
+	<slot value={$value}>
+		<Select.Value {placeholder} />
+	</slot>
 </Select.Trigger>

frontend/src/lib/components/ui/form/form-textarea.svelte

@@ -2,10 +2,7 @@
 	import { getFormField } from "formsnap";
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import type { TextareaGetFormField } from ".";
-	import {
-		Textarea,
-		type TextareaEvents
-	} from "$lib/components/ui/textarea";
+	import { Textarea, type TextareaEvents } from "$lib/components/ui/textarea";
 
 	type $$Props = HTMLTextareaAttributes;
 	type $$Events = TextareaEvents;

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

@@ -27,10 +27,7 @@ const SelectGroup = SelectComp.Group;
 const SelectItem = SelectComp.Item;
 const SelectSeparator = SelectComp.Separator;
 
-export type TextareaGetFormField = Omit<
-	ReturnType<typeof getFormField>,
-	"value"
-> & {
+export type TextareaGetFormField = Omit<ReturnType<typeof getFormField>, "value"> & {
 	value: Writable<string>;
 };
 

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

@@ -8,6 +8,8 @@ export type InputEvents = {
 	change: FormInputEvent<Event>;
 	click: FormInputEvent<MouseEvent>;
 	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
 	keydown: FormInputEvent<KeyboardEvent>;
 	keypress: FormInputEvent<KeyboardEvent>;
 	keyup: FormInputEvent<KeyboardEvent>;

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

@@ -21,6 +21,8 @@
 	on:change
 	on:click
 	on:focus
+	on:focusin
+	on:focusout
 	on:keydown
 	on:keypress
 	on:keyup