refactor: standardize formatting and improve code consistency across components

web/src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive, type WithoutChild} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        children,
+        ...restProps
+    }: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+        bind:ref
+        class={cn(
+		'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+		className
+	)}
+        {...restProps}
+>
+    <div class="pb-4 pt-0">
+        {@render children?.()}
+    </div>
+</AccordionPrimitive.Content>

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive} from 'bits-ui';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item {...restProps} bind:ref class={cn('border-b', className)}/>

web/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import {Accordion as AccordionPrimitive, type WithoutChild} from 'bits-ui';
+    import ChevronDown from '@lucide/svelte/icons/chevron-down';
+    import {cn} from '$lib/utils.js';
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        level = 3,
+        children,
+        ...restProps
+    }: WithoutChild<AccordionPrimitive.TriggerProps> & {
+        level?: AccordionPrimitive.HeaderProps['level'];
+    } = $props();
+</script>
+
+<AccordionPrimitive.Header class="flex" {level}>
+    <AccordionPrimitive.Trigger
+            bind:ref
+            class={cn(
+			'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+            {...restProps}
+    >
+        {@render children?.()}
+        <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"/>
+    </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

web/src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import {Accordion as AccordionPrimitive} from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+
+const Root = AccordionPrimitive.Root;
+export {
+    Root,
+    Content,
+    Item,
+    Trigger,
+    //
+    Root as Accordion,
+    Content as AccordionContent,
+    Item as AccordionItem,
+    Trigger as AccordionTrigger
+};

web/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-    import Ellipsis from '@lucide/svelte/icons/ellipsis';
-    import type {WithElementRef, WithoutChildren} from 'bits-ui';
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {cn} from '$lib/utils.js';
+	import Ellipsis from '@lucide/svelte/icons/ellipsis';
+	import type {WithElementRef, WithoutChildren} from 'bits-ui';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {cn} from '$lib/utils.js';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        role="presentation"
-        aria-hidden="true"
-        class={cn('flex size-9 items-center justify-center', className)}
-        {...restProps}
+		{...restProps}
+		aria-hidden="true"
+		bind:this={ref}
+		class={cn('flex size-9 items-center justify-center', className)}
+		role="presentation"
 >
 	<Ellipsis class="size-4"/>
 	<span class="sr-only">More</span>

web/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -1,23 +1,23 @@
 <script lang="ts">
-    import type {WithElementRef} from 'bits-ui';
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {cn} from '$lib/utils.js';
+	import type {WithElementRef} from 'bits-ui';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {cn} from '$lib/utils.js';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        role="link"
-        aria-disabled="true"
-        aria-current="page"
-        class={cn('font-normal text-foreground', className)}
-        {...restProps}
+		{...restProps}
+		aria-current="page"
+		aria-disabled="true"
+		bind:this={ref}
+		class={cn('font-normal text-foreground', className)}
+		role="link"
 >
 	{@render children?.()}
 </span>

web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,33 +1,33 @@
 <script lang="ts">
-    import {DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
-    import Check from '@lucide/svelte/icons/check';
-    import Minus from '@lucide/svelte/icons/minus';
-    import {cn} from '$lib/utils.js';
-    import type {Snippet} from 'svelte';
+	import {DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild} from 'bits-ui';
+	import Check from '@lucide/svelte/icons/check';
+	import Minus from '@lucide/svelte/icons/minus';
+	import {cn} from '$lib/utils.js';
+	import type {Snippet} from 'svelte';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        children: childrenProp,
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        ...restProps
-    }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
-        children?: Snippet;
-    } = $props();
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
-        bind:ref
-        bind:checked
-        bind:indeterminate
-        class={cn(
+		{...restProps}
+		bind:checked
+		bind:indeterminate
+		bind:ref
+		class={cn(
 		'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
 		className
 	)}
-        {...restProps}
 >
-    {#snippet children({checked, indeterminate})}
+	{#snippet children({checked, indeterminate})}
 		<span class="absolute left-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
 				<Minus class="size-4"/>
@@ -35,6 +35,6 @@
 				<Check class={cn('size-4', !checked && 'text-transparent')}/>
 			{/if}
 		</span>
-        {@render childrenProp?.()}
-    {/snippet}
+		{@render childrenProp?.()}
+	{/snippet}
 </DropdownMenuPrimitive.CheckboxItem>

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

@@ -1,20 +1,20 @@
 <script lang="ts">
-    import type {HTMLAttributes} from 'svelte/elements';
-    import {type WithElementRef} from 'bits-ui';
-    import {cn} from '$lib/utils.js';
+	import type {HTMLAttributes} from 'svelte/elements';
+	import {type WithElementRef} from 'bits-ui';
+	import {cn} from '$lib/utils.js';
 
 	let {
-        ref = $bindable(null),
-        class: className,
-        children,
-        ...restProps
-    }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
 </script>
 
 <span
-        bind:this={ref}
-        class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
-        {...restProps}
+		{...restProps}
+		bind:this={ref}
+		class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
 >
 	{@render children?.()}
 </span>