format frontend files

web/.prettierrc

@@ -11,5 +11,6 @@
 				"parser": "svelte"
 			}
 		}
-	]
+	],
+	"tailwindStylesheet": "./src/app.css"
 }

web/eslint.config.js

@@ -1,3 +1,4 @@
+import prettier from 'eslint-config-prettier';
 // eslint.config.js
 import js from '@eslint/js';
 import svelte from 'eslint-plugin-svelte';
@@ -8,17 +9,17 @@ import { fileURLToPath } from 'node:url';
 import { includeIgnoreFile } from '@eslint/compat';
 
 const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
 export default ts.config(
 	includeIgnoreFile(gitignorePath, 'Imported .gitignore patterns'),
 	js.configs.recommended,
 	...ts.configs.recommended,
 	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
 	{
 		languageOptions: {
-			globals: {
+			globals: { ...globals.browser, ...globals.node }
-				...globals.browser,
-				...globals.node
-			}
 		}
 	},
 	{
@@ -35,7 +36,6 @@ export default ts.config(
 				//   js: espree,    // Use espree for .js files (add: import espree from 'espree')
 				//   typescript: ts.parser
 				// },
-
 				// We recommend importing and specifying svelte.config.js.
 				// By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly.
 				// While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it,
@@ -45,9 +45,6 @@ export default ts.config(
 		}
 	},
 	{
-		rules: {
+		rules: {} // Override or add rule settings here, such as:// 'svelte/rule-name': 'error'
-			// Override or add rule settings here, such as:
-			// 'svelte/rule-name': 'error'
-		}
 	}
 );

web/package.json

@@ -41,7 +41,7 @@
 		"clsx": "^2.1.1",
 		"embla-carousel-svelte": "^8.6.0",
 		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
+		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.11.0",
 		"formsnap": "^2.0.0-next.1",
 		"globals": "^15.14.0",
@@ -49,9 +49,9 @@
 		"mode-watcher": "^1.0.7",
 		"openapi-typescript": "^7.9.1",
 		"paneforge": "^1.0.0-next.6",
-		"prettier": "^3.4.2",
+		"prettier": "^3.6.2",
-		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.6.14",
+		"prettier-plugin-tailwindcss": "^0.7.1",
 		"superstruct": "^2.0.2",
 		"svelte": "^5.38.0",
 		"svelte-check": "^4.3.1",

web/src/lib/components/add-media-card.svelte

@@ -73,7 +73,7 @@
 			</div>
 		{/if}
 	</Card.Content>
-	<Card.Footer class="bg-card flex flex-col items-start gap-2 rounded-b-lg border-t p-4">
+	<Card.Footer class="flex flex-col items-start gap-2 rounded-b-lg border-t bg-card p-4">
 		<Button
 			class="w-full font-semibold"
 			disabled={result.added || loading}

web/src/lib/components/delete-torrent-dialog.svelte

@@ -46,7 +46,7 @@
 			<div class="flex flex-col">
 				<Label for="delete-files">
 					Delete associated files as well.
-					<p class="text-muted-foreground text-sm font-normal">
+					<p class="text-sm font-normal text-muted-foreground">
 						(Only files in the download location will be deleted)
 					</p>
 				</Label>

web/src/lib/components/download-movie-dialog.svelte

@@ -160,7 +160,7 @@
 							Search
 						</Button>
 					</div>
-					<p class="text-muted-foreground text-sm">
+					<p class="text-sm text-muted-foreground">
 						The custom query will override the default search string like "A Minecraft Movie
 						(2025)".
 					</p>

web/src/lib/components/download-season-dialog.svelte

@@ -143,7 +143,7 @@
 							Search
 						</Button>
 					</div>
-					<p class="text-muted-foreground text-sm">
+					<p class="text-sm text-muted-foreground">
 						Enter the season's number you want to search for. The first, usually 1, or the last
 						season number usually yield the most season packs. Note that only Seasons which are
 						listed in the "Seasons" cell will be imported!
@@ -173,7 +173,7 @@
 							Search
 						</Button>
 					</div>
-					<p class="text-muted-foreground text-sm">
+					<p class="text-sm text-muted-foreground">
 						The custom query will override the default search string like "The Simpsons Season 3".
 						Note that only Seasons which are listed in the "Seasons" cell will be imported!
 					</p>

web/src/lib/components/file-path-suffix-selector.svelte

@@ -16,12 +16,12 @@
 </script>
 
 {#snippet filePathPreview()}
-	<p class="text-muted-foreground text-sm">
+	<p class="text-sm text-muted-foreground">
 		This is necessary to differentiate between versions of the same movie or show, for example a
 		1080p and a 4K version.
 	</p>
 	<Label for="file-suffix-display">The files will be saved in the following directory:</Label>
-	<p class="text-muted-foreground text-sm" id="file-suffix-display">
+	<p class="text-sm text-muted-foreground" id="file-suffix-display">
 		{saveDirectoryPreview(media, filePathSuffix)}
 	</p>
 {/snippet}

web/src/lib/components/login-card.svelte

@@ -107,9 +107,9 @@
 		</form>
 		{#each oauthProviderNames as name (name)}
 			<div
-				class="after:border-border relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t"
+				class="relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
 			>
-				<span class="bg-background text-muted-foreground relative z-10 px-2">
+				<span class="relative z-10 bg-background px-2 text-muted-foreground">
 					Or continue with
 				</span>
 			</div>

web/src/lib/components/signup-card.svelte

@@ -114,9 +114,9 @@
 		</form>
 		{#each oauthProviderNames as name (name)}
 			<div
-				class="after:border-border relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t"
+				class="relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
 			>
-				<span class="bg-background text-muted-foreground relative z-10 px-2">
+				<span class="relative z-10 bg-background px-2 text-muted-foreground">
 					Or continue with
 				</span>
 			</div>

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

@@ -13,7 +13,7 @@
 <AccordionPrimitive.Content
 	bind:ref
 	class={cn(
-		'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm',
+		'overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
 		className
 	)}
 	{...restProps}

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

@@ -24,6 +24,6 @@
 		{...restProps}
 	>
 		{@render children?.()}
-		<ChevronDown class="text-muted-foreground size-4 shrink-0 transition-transform duration-200" />
+		<ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
 	</AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>

web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -18,7 +18,7 @@
 	<AlertDialogPrimitive.Content
 		bind:ref
 		class={cn(
-			'bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+			'fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
 			className
 		)}
 		{...restProps}

web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -11,6 +11,6 @@
 
 <AlertDialogPrimitive.Description
 	bind:ref
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...restProps}
 />

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

@@ -12,7 +12,7 @@
 <AlertDialogPrimitive.Overlay
 	bind:ref
 	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+		'fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -11,6 +11,6 @@
 
 <AvatarPrimitive.Fallback
 	bind:ref
-	class={cn('bg-muted flex size-full items-center justify-center', className)}
+	class={cn('flex size-full items-center justify-center bg-muted', className)}
 	{...restProps}
 />

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

@@ -14,7 +14,7 @@
 <ol
 	bind:this={ref}
 	class={cn(
-		'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
+		'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5',
 		className
 	)}
 	{...restProps}

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

@@ -16,7 +16,7 @@
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
-	class={cn('text-foreground font-normal', className)}
+	class={cn('font-normal text-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}

web/src/lib/components/ui/button/button.svelte

@@ -54,6 +54,7 @@
 </script>
 
 {#if href}
+	<!-- eslint-disable svelte/no-navigation-without-resolve -->
 	<a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
 		{@render children?.()}
 	</a>

web/src/lib/components/ui/calendar/calendar-cell.svelte

@@ -11,7 +11,7 @@
 
 <CalendarPrimitive.Cell
 	class={cn(
-		'[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md',
+		'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50',
 		className
 	)}
 	bind:ref

web/src/lib/components/ui/calendar/calendar-day.svelte

@@ -17,13 +17,13 @@
 		// Today
 		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
 		// Selected
-		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100',
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		// Disabled
 		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 		// Unavailable
 		'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
 		// Outside months
-		'data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30',
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
 		className
 	)}
 	bind:ref

web/src/lib/components/ui/calendar/calendar-head-cell.svelte

@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.HeadCell
 	bind:ref
-	class={cn('text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal', className)}
+	class={cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', className)}
 	{...restProps}
 />

web/src/lib/components/ui/card/card-description.svelte

@@ -11,6 +11,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
-<p bind:this={ref} class={cn('text-muted-foreground text-sm', className)} {...restProps}>
+<p bind:this={ref} class={cn('text-sm text-muted-foreground', className)} {...restProps}>
 	{@render children?.()}
 </p>

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

@@ -13,7 +13,7 @@
 
 <div
 	bind:this={ref}
-	class={cn('bg-card text-card-foreground rounded-xl border shadow', className)}
+	class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
 	{...restProps}
 >
 	{@render children?.()}

web/src/lib/components/ui/checkbox/checkbox.svelte

@@ -15,7 +15,7 @@
 
 <CheckboxPrimitive.Root
 	class={cn(
-		'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border shadow focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
+		'peer box-content size-4 shrink-0 rounded-sm border border-primary shadow focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
 		className
 	)}
 	bind:checked

web/src/lib/components/ui/command/command-group.svelte

@@ -15,13 +15,13 @@
 </script>
 
 <CommandPrimitive.Group
-	class={cn('text-foreground overflow-hidden p-1', className)}
+	class={cn('overflow-hidden p-1 text-foreground', className)}
 	bind:ref
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
 	{#if heading}
-		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+		<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
 			{heading}
 		</CommandPrimitive.GroupHeading>
 	{/if}

web/src/lib/components/ui/command/command-input.svelte

@@ -15,7 +15,7 @@
 	<Search class="mr-2 size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
-			'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			className
 		)}
 		bind:ref

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

@@ -11,7 +11,7 @@
 
 <CommandPrimitive.Item
 	class={cn(
-		'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		className
 	)}
 	bind:ref

web/src/lib/components/ui/command/command-link-item.svelte

@@ -11,7 +11,7 @@
 
 <CommandPrimitive.LinkItem
 	class={cn(
-		'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		className
 	)}
 	bind:ref

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

@@ -9,4 +9,4 @@
 	}: CommandPrimitive.SeparatorProps = $props();
 </script>
 
-<CommandPrimitive.Separator bind:ref class={cn('bg-border -mx-1 h-px', className)} {...restProps} />
+<CommandPrimitive.Separator bind:ref class={cn('-mx-1 h-px bg-border', className)} {...restProps} />

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

@@ -12,7 +12,7 @@
 </script>
 
 <span
-	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...restProps}
 	bind:this={ref}
 >

web/src/lib/components/ui/command/command.svelte

@@ -12,7 +12,7 @@
 
 <CommandPrimitive.Root
 	class={cn(
-		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+		'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
 		className
 	)}
 	bind:ref

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

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/context-menu/context-menu-content.svelte

@@ -15,7 +15,7 @@
 <ContextMenuPrimitive.Portal {...portalProps}>
 	<ContextMenuPrimitive.Content
 		class={cn(
-			'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-md focus:outline-none',
+			'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 			className
 		)}
 		{...restProps}

web/src/lib/components/ui/context-menu/context-menu-group-heading.svelte

@@ -14,6 +14,6 @@
 
 <ContextMenuPrimitive.GroupHeading
 	bind:ref
-	class={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+	class={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
 	{...restProps}
 />

web/src/lib/components/ui/context-menu/context-menu-item.svelte

@@ -14,7 +14,7 @@
 
 <ContextMenuPrimitive.Item
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		inset && 'pl-8',
 		className
 	)}

web/src/lib/components/ui/context-menu/context-menu-radio-item.svelte

@@ -14,7 +14,7 @@
 <ContextMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/context-menu/context-menu-separator.svelte

@@ -11,6 +11,6 @@
 
 <ContextMenuPrimitive.Separator
 	bind:ref
-	class={cn('bg-border -mx-1 my-1 h-px', className)}
+	class={cn('-mx-1 my-1 h-px bg-border', className)}
 	{...restProps}
 />

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

@@ -13,7 +13,7 @@
 
 <span
 	bind:this={ref}
-	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}

web/src/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -12,7 +12,7 @@
 <ContextMenuPrimitive.SubContent
 	bind:ref
 	class={cn(
-		'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none',
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <ContextMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none',
+		'flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
 		inset && 'pl-8',
 		className
 	)}

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

@@ -22,14 +22,14 @@
 	<DialogPrimitive.Content
 		bind:ref
 		class={cn(
-			'bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+			'fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
+			class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
 		>
 			<X class="size-4" />
 			<span class="sr-only">Close</span>

web/src/lib/components/ui/dialog/dialog-description.svelte

@@ -11,6 +11,6 @@
 
 <DialogPrimitive.Description
 	bind:ref
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...restProps}
 />

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

@@ -12,7 +12,7 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+		'fixed inset-0 z-50 bg-black/80  data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
 		className
 	)}
 	{...restProps}

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

@@ -19,12 +19,12 @@
 	<DrawerPrimitive.Content
 		bind:ref
 		class={cn(
-			'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border',
+			'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
 			className
 		)}
 		{...restProps}
 	>
-		<div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
+		<div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted"></div>
 		{@render children?.()}
 	</DrawerPrimitive.Content>
 </DrawerPrimitive.Portal>

web/src/lib/components/ui/drawer/drawer-description.svelte

@@ -11,6 +11,6 @@
 
 <DrawerPrimitive.Description
 	bind:ref
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...restProps}
 />

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

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		className
 	)}
 	{...restProps}

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

@@ -18,8 +18,8 @@
 		bind:ref
 		{sideOffset}
 		class={cn(
-			'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+			'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
-			'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 outline-none',
+			'outline-none 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}

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

@@ -15,7 +15,7 @@
 <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]:size-4 [&>svg]:shrink-0',
+		'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 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
 		inset && 'pl-8',
 		className
 	)}

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

@@ -14,7 +14,7 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		className
 	)}
 	{...restProps}

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

@@ -11,6 +11,6 @@
 
 <DropdownMenuPrimitive.Separator
 	bind:ref
-	class={cn('bg-muted -mx-1 my-1 h-px', className)}
+	class={cn('-mx-1 my-1 h-px bg-muted', className)}
 	{...restProps}
 />

web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -12,7 +12,7 @@
 <DropdownMenuPrimitive.SubContent
 	bind:ref
 	class={cn(
-		'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none',
+		'z-50 min-w-[8rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+		'flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[highlighted]:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 		inset && 'pl-8',
 		className
 	)}

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

@@ -12,6 +12,6 @@
 
 <FormPrimitive.Description
 	bind:ref
-	class={cn('text-muted-foreground text-[0.8rem]', className)}
+	class={cn('text-[0.8rem] text-muted-foreground', className)}
 	{...restProps}
 />

web/src/lib/components/ui/form/form-field-errors.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <FormPrimitive.FieldErrors
-	class={cn('text-destructive text-[0.8rem] font-medium', className)}
+	class={cn('text-[0.8rem] font-medium text-destructive', className)}
 	{...restProps}
 >
 	{#snippet children({ errors, errorProps })}

web/src/lib/components/ui/form/form-legend.svelte

@@ -13,5 +13,5 @@
 <FormPrimitive.Legend
 	bind:ref
 	{...restProps}
-	class={cn('data-[fs-error]:text-destructive text-sm leading-none font-medium', className)}
+	class={cn('text-sm leading-none font-medium data-[fs-error]:text-destructive', className)}
 />

web/src/lib/components/ui/hover-card/hover-card-content.svelte

@@ -20,7 +20,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'bg-popover text-popover-foreground z-50 w-64 rounded-md border p-4 shadow-md outline-none',
+			'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',
 			className
 		)}
 		{...restProps}

web/src/lib/components/ui/input-otp/input-otp-slot.svelte

@@ -15,8 +15,8 @@
 	{cell}
 	bind:ref
 	class={cn(
-		'border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+		'relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-		cell.isActive && 'ring-ring z-10 ring-1',
+		cell.isActive && 'z-10 ring-1 ring-ring',
 		className
 	)}
 	{...restProps}
@@ -24,7 +24,7 @@
 	{cell.char}
 	{#if cell.hasFakeCaret}
 		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
-			<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
+			<div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
 		</div>
 	{/if}
 </InputOTPPrimitive.Cell>

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

@@ -24,7 +24,7 @@
 	<input
 		bind:this={ref}
 		class={cn(
-			'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			className
 		)}
 		type="file"
@@ -36,7 +36,7 @@
 	<input
 		bind:this={ref}
 		class={cn(
-			'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 			className
 		)}
 		{type}

web/src/lib/components/ui/menubar/menubar-checkbox-item.svelte

@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		className
 	)}
 	{...restProps}

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

@@ -24,7 +24,7 @@
 		{alignOffset}
 		{side}
 		class={cn(
-			'bg-popover text-popover-foreground z-50 min-w-[12rem] rounded-md border p-1 shadow-md focus:outline-none',
+			'z-50 min-w-[12rem] rounded-md border bg-popover p-1 text-popover-foreground shadow-md focus:outline-none',
 			className
 		)}
 		{...restProps}

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

@@ -15,7 +15,7 @@
 <MenubarPrimitive.Item
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		inset && 'pl-8',
 		className
 	)}

web/src/lib/components/ui/menubar/menubar-radio-item.svelte

@@ -14,7 +14,7 @@
 <MenubarPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/menubar/menubar-separator.svelte

@@ -11,6 +11,6 @@
 
 <MenubarPrimitive.Separator
 	bind:ref
-	class={cn('bg-muted -mx-1 my-1 h-px', className)}
+	class={cn('-mx-1 my-1 h-px bg-muted', className)}
 	{...restProps}
 />

web/src/lib/components/ui/menubar/menubar-shortcut.svelte

@@ -13,7 +13,7 @@
 
 <span
 	bind:this={ref}
-	class={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+	class={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
 	{...restProps}
 >
 	{@render children?.()}

web/src/lib/components/ui/menubar/menubar-sub-content.svelte

@@ -12,7 +12,7 @@
 <MenubarPrimitive.SubContent
 	bind:ref
 	class={cn(
-		'bg-popover text-popover-foreground z-50 min-w-max rounded-md border p-1 shadow-lg focus:outline-none',
+		'z-50 min-w-max rounded-md border bg-popover p-1 text-popover-foreground shadow-lg focus:outline-none',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/menubar/menubar-sub-trigger.svelte

@@ -17,7 +17,7 @@
 <MenubarPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		'data-[highlighted]:bg-accent data-[state=open]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
 		inset && 'pl-8',
 		className
 	)}

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

@@ -12,7 +12,7 @@
 <MenubarPrimitive.Trigger
 	bind:ref
 	class={cn(
-		'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-3 py-1 text-sm font-medium outline-none select-none',
+		'flex cursor-default items-center rounded-sm px-3 py-1 text-sm font-medium outline-none select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/menubar/menubar.svelte

@@ -12,7 +12,7 @@
 <MenubarPrimitive.Root
 	bind:ref
 	class={cn(
-		'bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-sm',
+		'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
 		className
 	)}
 	{...restProps}

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

@@ -20,7 +20,7 @@
 		{align}
 		{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 w-72 rounded-md border p-4 shadow-md outline-none',
+			'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}

web/src/lib/components/ui/progress/progress.svelte

@@ -14,11 +14,11 @@
 <ProgressPrimitive.Root
 	bind:ref
 	{value}
-	class={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
+	class={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
 	{...restProps}
 >
 	<div
-		class="bg-primary h-full w-full flex-1 transition-all"
+		class="h-full w-full flex-1 bg-primary transition-all"
 		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
 	></div>
 </ProgressPrimitive.Root>

web/src/lib/components/ui/radio-group/radio-group-item.svelte

@@ -15,7 +15,7 @@
 <RadioGroupPrimitive.Item
 	bind:ref
 	class={cn(
-		'border-primary text-primary focus-visible:ring-ring aspect-square size-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+		'aspect-square size-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 		className
 	)}
 	{...restProps}
@@ -23,7 +23,7 @@
 	{#snippet children({ checked })}
 		<div class="flex items-center justify-center">
 			{#if checked}
-				<Circle class="fill-primary size-3.5" />
+				<Circle class="size-3.5 fill-primary" />
 			{/if}
 		</div>
 	{/snippet}

web/src/lib/components/ui/range-calendar/range-calendar-cell.svelte

@@ -12,7 +12,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		'[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',
+		'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/range-calendar/range-calendar-day.svelte

@@ -24,7 +24,7 @@
 		// Selection End
 		'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
 		// Outside months
-		'data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30',
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
 		// Disabled
 		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 		// Unavailable

web/src/lib/components/ui/range-calendar/range-calendar-head-cell.svelte

@@ -11,6 +11,6 @@
 
 <RangeCalendarPrimitive.HeadCell
 	bind:ref
-	class={cn('text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal', className)}
+	class={cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', className)}
 	{...restProps}
 />

web/src/lib/components/ui/resizable/resizable-handle.svelte

@@ -17,13 +17,13 @@
 <ResizablePrimitive.PaneResizer
 	bind:ref
 	class={cn(
-		'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-none data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
+		'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
 		className
 	)}
 	{...restProps}
 >
 	{#if withHandle}
-		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+		<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
 			<GripVertical class="size-2.5" />
 		</div>
 	{/if}

web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -24,6 +24,6 @@
 >
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
-		class={cn('bg-border relative rounded-full', orientation === 'vertical' && 'flex-1')}
+		class={cn('relative rounded-full bg-border', orientation === 'vertical' && 'flex-1')}
 	/>
 </ScrollAreaPrimitive.Scrollbar>

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

@@ -20,7 +20,7 @@
 		bind:ref
 		{sideOffset}
 		class={cn(
-			'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 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+			'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
 			className
 		)}
 		{...restProps}

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

@@ -17,7 +17,7 @@
 	bind:ref
 	{value}
 	class={cn(
-		'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/select/select-separator.svelte

@@ -10,4 +10,4 @@
 	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
-<Separator bind:ref class={cn('bg-muted -mx-1 my-1 h-px', className)} {...restProps} />
+<Separator bind:ref class={cn('-mx-1 my-1 h-px bg-muted', className)} {...restProps} />

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

@@ -14,7 +14,7 @@
 <SelectPrimitive.Trigger
 	bind:ref
 	class={cn(
-		'border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+		'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-sm ring-offset-background focus:ring-1 focus:ring-ring focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/separator/separator.svelte

@@ -13,7 +13,7 @@
 <SeparatorPrimitive.Root
 	bind:ref
 	class={cn(
-		'bg-border shrink-0',
+		'shrink-0 bg-border',
 		orientation === 'horizontal' ? 'h-[1px] w-full' : 'min-h-full w-[1px]',
 		className
 	)}

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

@@ -47,7 +47,7 @@
 	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
 		{@render children?.()}
 		<SheetPrimitive.Close
-			class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
+			class="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
 		>
 			<X class="size-4" />
 			<span class="sr-only">Close</span>

web/src/lib/components/ui/sheet/sheet-description.svelte

@@ -11,6 +11,6 @@
 
 <SheetPrimitive.Description
 	bind:ref
-	class={cn('text-muted-foreground text-sm', className)}
+	class={cn('text-sm text-muted-foreground', className)}
 	{...restProps}
 />

web/src/lib/components/ui/sheet/sheet-overlay.svelte

@@ -12,7 +12,7 @@
 <SheetPrimitive.Overlay
 	bind:ref
 	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+		'fixed inset-0 z-50 bg-black/80  data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/sheet/sheet-title.svelte

@@ -11,6 +11,6 @@
 
 <SheetPrimitive.Title
 	bind:ref
-	class={cn('text-foreground text-lg font-semibold', className)}
+	class={cn('text-lg font-semibold text-foreground', className)}
 	{...restProps}
 />

web/src/lib/components/ui/sidebar/sidebar-input.svelte

@@ -16,7 +16,7 @@
 	bind:value
 	data-sidebar="input"
 	class={cn(
-		'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
+		'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
 		className
 	)}
 	{...restProps}

web/src/lib/components/ui/sidebar/sidebar-inset.svelte

@@ -14,7 +14,7 @@
 <main
 	bind:this={ref}
 	class={cn(
-		'bg-background relative flex min-h-svh flex-1 flex-col',
+		'relative flex min-h-svh flex-1 flex-col bg-background',
 		'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',
 		className
 	)}

web/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-sidebar="menu-badge"
 	class={cn(
-		'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+		'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none',
 		'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
 		'peer-data-[size=sm]/menu-button:top-1',
 		'peer-data-[size=default]/menu-button:top-1.5',

web/src/lib/components/ui/sidebar/sidebar-menu-button.svelte

@@ -64,7 +64,7 @@
 	});
 </script>
 
-{#snippet Button({ props }: { props?: Record<string, unknown> })}
+{#snippet Button({ props }: { props?: Record })}
 	{@const mergedProps = mergeProps(buttonProps, props)}
 	{#if child}
 		{@render child({ props: mergedProps })}

web/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-sidebar="menu-sub"
 	class={cn(
-		'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+		'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
 		'group-data-[collapsible=icon]:hidden',
 		className
 	)}

web/src/lib/components/ui/sidebar/sidebar-provider.svelte

@@ -42,7 +42,7 @@
 	<div
 		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
 		class={cn(
-			'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
+			'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
 			className
 		)}
 		bind:this={ref}

web/src/lib/components/ui/sidebar/sidebar-rail.svelte

@@ -22,10 +22,10 @@
 	onclick={() => sidebar.toggle()}
 	title="Toggle Sidebar"
 	class={cn(
-		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+		'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex',
 		'[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
 		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-		'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+		'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
 		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
 		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
 		className

web/src/lib/components/ui/sidebar/sidebar-separator.svelte

@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-sidebar="separator"
-	class={cn('bg-sidebar-border mx-2 w-auto', className)}
+	class={cn('mx-2 w-auto bg-sidebar-border', className)}
 	{...restProps}
 />

web/src/lib/components/ui/sidebar/sidebar.svelte

@@ -26,7 +26,7 @@
 {#if collapsible === 'none'}
 	<div
 		class={cn(
-			'bg-sidebar text-sidebar-foreground flex h-full w-[var(--sidebar-width)] flex-col',
+			'flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground',
 			className
 		)}
 		bind:this={ref}
@@ -39,7 +39,7 @@
 		<Sheet.Content
 			data-sidebar="sidebar"
 			data-mobile="true"
-			class="bg-sidebar text-sidebar-foreground w-[var(--sidebar-width)] p-0 [&>button]:hidden"
+			class="w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
 			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
 			{side}
 		>
@@ -51,7 +51,7 @@
 {:else}
 	<div
 		bind:this={ref}
-		class="text-sidebar-foreground group peer hidden md:block"
+		class="group peer hidden text-sidebar-foreground md:block"
 		data-state={sidebar.state}
 		data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
 		data-variant={variant}
@@ -84,7 +84,7 @@
 		>
 			<div
 				data-sidebar="sidebar"
-				class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+				class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
 			>
 				{@render children?.()}
 			</div>

web/src/lib/components/ui/skeleton/skeleton.svelte

@@ -12,6 +12,6 @@
 
 <div
 	bind:this={ref}
-	class={cn('bg-primary/10 animate-pulse rounded-md', className)}
+	class={cn('animate-pulse rounded-md bg-primary/10', className)}
 	{...restProps}
 ></div>

web/src/lib/components/ui/slider/slider.svelte

@@ -28,16 +28,16 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{#snippet children({ thumbs })}
 		<span
 			data-orientation={orientation}
-			class="bg-primary/20 relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-1.5 data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full data-[orientation='vertical']:w-1.5"
+			class="relative grow overflow-hidden rounded-full bg-primary/20 data-[orientation='horizontal']:h-1.5 data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full data-[orientation='vertical']:w-1.5"
 		>
 			<SliderPrimitive.Range
-				class="bg-primary absolute data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
+				class="absolute bg-primary data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
 			/>
 		</span>
 		{#each thumbs as thumb (thumb)}
 			<SliderPrimitive.Thumb
 				index={thumb}
-				class="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+				class="block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

web/src/lib/components/ui/switch/switch.svelte

@@ -14,14 +14,14 @@
 	bind:ref
 	bind:checked
 	class={cn(
-		'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+		'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			'bg-background pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+			'pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
 		)}
 	/>
 </SwitchPrimitive.Root>