refactor: migrate shadcn-components to Svelte 5 and TW4 (#551)

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

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

@@ -1,7 +1,7 @@
 import { Popover as PopoverPrimitive } from 'bits-ui';
 import Content from './popover-content.svelte';
+import Trigger from './popover-trigger.svelte';
 const Root = PopoverPrimitive.Root;
-const Trigger = PopoverPrimitive.Trigger;
 const Close = PopoverPrimitive.Close;
 
 export {

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

@@ -1,22 +1,32 @@
 <script lang="ts">
+	import { cn } from '$lib/utils/style.js';
 	import { Popover as PopoverPrimitive } from 'bits-ui';
-	import { cn, flyAndScale } from '$lib/utils/style.js';
 
-	type $$Props = PopoverPrimitive.ContentProps;
-	let className: $$Props['class'] = undefined;
-	export let transition: $$Props['transition'] = flyAndScale;
-	export let transitionConfig: $$Props['transitionConfig'] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = 'center',
+		sameWidth = false,
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+		sameWidth?: boolean;
+	} = $props();
 </script>
 
-<PopoverPrimitive.Content
-	{transition}
-	{transitionConfig}
-	class={cn(
-		'bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none',
-		className
-	)}
-	{...$$restProps}
->
-	<slot />
-</PopoverPrimitive.Content>
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		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 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+			sameWidth && 'w-[var(--bits-popover-anchor-width)]',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>

frontend/src/lib/components/ui/popover/popover-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/style.js';
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn('', className)}
+	{...restProps}
+/>