From fca99d6126c31fbb18ed9f1034cee6f940b040e8 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 10 Feb 2026 16:28:21 +0100
Subject: refactor

---
 apps/web/src/components/ui/button.tsx          |  7 ++++---
 apps/web/src/components/ui/color-picker.tsx    | 19 +++++++++++++++----
 apps/web/src/components/ui/command.tsx         |  2 +-
 apps/web/src/components/ui/dropdown-menu.tsx   |  2 +-
 apps/web/src/components/ui/font-picker.tsx     |  6 +++---
 apps/web/src/components/ui/input-with-back.tsx |  4 ++--
 apps/web/src/components/ui/label.tsx           |  2 +-
 apps/web/src/components/ui/popover.tsx         |  1 -
 apps/web/src/components/ui/select.tsx          |  6 +++---
 apps/web/src/components/ui/slider.tsx          |  2 +-
 apps/web/src/components/ui/split-button.tsx    |  4 ++--
 apps/web/src/components/ui/tabs.tsx            |  2 +-
 12 files changed, 34 insertions(+), 23 deletions(-)

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 6c063eff..2fc2c2e6 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
 		variants: {
 			variant: {
 				default:
-					"bg-primary text-primary-foreground hover:bg-primary-hover",
+					"bg-primary text-primary-foreground hover:bg-primary/90",
 				background:
 					"bg-background text-foreground hover:bg-background/90",
 				foreground:
@@ -22,13 +22,14 @@ const buttonVariants = cva(
 				outline:
 					"border border-border bg-transparent hover:bg-accent/50",
 				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-foreground/15 border border-input",
+					"bg-secondary text-secondary-foreground border border-secondary-border",
 				text: "bg-transparent rounded-none opacity-100 hover:opacity-75",
+				ghost: "bg-transparent hover:bg-accent",
 				link: "text-primary underline-offset-4 hover:underline !p-0 !h-auto",
 			},
 			size: {
 				default: "h-9.5 px-4 py-2",
-				sm: "h-8 px-3 text-xs",
+				sm: "h-8 p-1 px-2 text-xs rounded-sm",
 				lg: "h-10 p-5 px-6",
 				icon: "size-7",
 				text: "p-0",
diff --git a/apps/web/src/components/ui/color-picker.tsx b/apps/web/src/components/ui/color-picker.tsx
index a57a86e0..0ea1a14d 100644
--- a/apps/web/src/components/ui/color-picker.tsx
+++ b/apps/web/src/components/ui/color-picker.tsx
@@ -6,6 +6,7 @@ import { Input } from "./input";
 interface ColorPickerProps {
 	value?: string;
 	onChange?: (value: string) => void;
+	onChangeEnd?: (value: string) => void;
 	className?: string;
 	containerRef?: React.RefObject<HTMLDivElement | null>;
 }
@@ -86,7 +87,7 @@ const hsvToHex = (h: number, s: number, v: number) => {
 };
 
 const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
-	({ className, value = "FFFFFF", onChange, containerRef, ...props }, ref) => {
+	({ className, value = "FFFFFF", onChange, onChangeEnd, containerRef, ...props }, ref) => {
 		const [isOpen, setIsOpen] = useState(false);
 		const [isDragging, setIsDragging] = useState<"saturation" | "hue" | null>(
 			null,
@@ -102,6 +103,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 		const saturationRef = useRef<HTMLButtonElement>(null);
 		const hueRef = useRef<HTMLButtonElement>(null);
 		const triggerRef = useRef<HTMLButtonElement>(null);
+		const latestDragColorRef = useRef<string | null>(null);
 
 		const [h, s, v] = hexToHsv(value);
 		const displayHue = s > 0 ? h : internalHue;
@@ -144,6 +146,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 					const newS = x;
 					const newV = 1 - y;
 					const newHex = hsvToHex(displayHue, newS, newV);
+					latestDragColorRef.current = newHex;
 					onChange?.(newHex);
 				}
 
@@ -157,12 +160,17 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 					setInternalHue(newH);
 					if (s > 0) {
 						const newHex = hsvToHex(newH, s, v);
+						latestDragColorRef.current = newHex;
 						onChange?.(newHex);
 					}
 				}
 			};
 
 			const handleMouseUp = () => {
+				if (latestDragColorRef.current !== null && onChangeEnd) {
+					onChangeEnd(latestDragColorRef.current);
+					latestDragColorRef.current = null;
+				}
 				setIsDragging(null);
 			};
 
@@ -187,6 +195,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 			const newS = x;
 			const newV = 1 - y;
 			const newHex = hsvToHex(displayHue, newS, newV);
+			latestDragColorRef.current = newHex;
 			onChange?.(newHex);
 		};
 
@@ -201,6 +210,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 			setInternalHue(newH);
 			if (s > 0) {
 				const newHex = hsvToHex(newH, s, v);
+				latestDragColorRef.current = newHex;
 				onChange?.(newHex);
 			}
 		};
@@ -235,14 +245,14 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 				<div
 					ref={ref}
 					className={cn(
-						"bg-panel-accent flex h-9 items-center gap-2 rounded-full px-[0.45rem]",
+						"bg-accent flex h-8 items-center gap-2 rounded-md px-[0.45rem]",
 						className,
 					)}
 					{...props}
 				>
 					<button
 						ref={triggerRef}
-						className="size-6 cursor-pointer rounded-full hover:ring-2 hover:ring-white/20"
+						className="size-4.5 cursor-pointer border rounded-sm hover:ring-2 hover:ring-white/20"
 						style={{ backgroundColor: `#${value}` }}
 						type="button"
 						onClick={() => {
@@ -259,7 +269,8 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 					/>
 					<div className="flex flex-1 items-center">
 						<Input
-							className="!border-0 bg-transparent p-0 !ring-0 !ring-offset-0"
+							className="!border-0 bg-transparent p-0 !ring-0 !ring-offset-0 uppercase"
+							size="sm"
 							containerClassName="w-full"
 							value={inputValue}
 							onChange={handleInputChange}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 0f77a4ce..f5d96125 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -114,7 +114,7 @@ const CommandItem = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cn(
-			"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			"data-[selected=true]:bg-popover-hover data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 			className,
 		)}
 		{...props}
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index a7736e6e..d8a9f594 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -20,7 +20,7 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const dropdownMenuItemVariants = cva(
-	"relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-accent/35 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+	"relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
 	{
 		variants: {
 			variant: {
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index 1806b48a..4b8e364a 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -6,6 +6,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { FONT_OPTIONS, type FontFamily } from "@/constants/font-constants";
+import { cn } from "@/utils/ui";
 
 interface FontPickerProps {
 	defaultValue?: FontFamily;
@@ -21,16 +22,15 @@ export function FontPicker({
 	return (
 		<Select defaultValue={defaultValue} onValueChange={onValueChange}>
 			<SelectTrigger
-				className={`bg-panel-accent h-9 w-full text-base ${className || ""}`}
+				className={cn("w-full", className)}
 			>
-				<SelectValue placeholder="Select a font" className="text-sm" />
+				<SelectValue placeholder="Select a font" />
 			</SelectTrigger>
 			<SelectContent>
 				{FONT_OPTIONS.map((font) => (
 					<SelectItem
 						key={font.value}
 						value={font.value}
-						className="text-sn"
 						style={{ fontFamily: font.value }}
 					>
 						{font.label}
diff --git a/apps/web/src/components/ui/input-with-back.tsx b/apps/web/src/components/ui/input-with-back.tsx
index 392ab3c3..f8265779 100644
--- a/apps/web/src/components/ui/input-with-back.tsx
+++ b/apps/web/src/components/ui/input-with-back.tsx
@@ -55,7 +55,7 @@ export function InputWithBack({
 			>
 				<Button
 					variant="outline"
-					className="bg-panel-accent !size-9 rounded-full"
+					className="bg-accent !size-9 rounded-full"
 				>
 					<ArrowLeft />
 				</Button>
@@ -77,7 +77,7 @@ export function InputWithBack({
 					<Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
 					<Input
 						placeholder={placeholder}
-						className="bg-panel-accent w-full pl-9"
+						className="bg-accent w-full pl-9"
 						value={value}
 						onChange={(e) => onChange?.(e.target.value)}
 					/>
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
index 0ea7be03..a9a5166f 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/apps/web/src/components/ui/label.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/ui";
 
 const labelVariants = cva(
-	"text-sm text-muted-foreground font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+	"text-xs text-muted-foreground font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index 34738303..36ae5a69 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-
 import { cn } from "@/utils/ui";
 
 const Popover = PopoverPrimitive.Root;
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 79462d4a..fd9c7ac5 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -14,7 +14,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 const selectItemVariants = cva(
-	"relative flex cursor-pointer select-none items-center gap-2 rounded-xl px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-accent/35 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+	"relative flex cursor-pointer select-none items-center gap-2 rounded-xl px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-popover-hover data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
 	{
 		variants: {
 			variant: {
@@ -35,7 +35,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"bg-accent ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-7 w-auto cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-2 text-sm whitespace-nowrap focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"bg-accent ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-8 w-auto cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-2 text-sm whitespace-nowrap focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			"focus:border-primary focus:ring-4 focus:ring-primary/10 border-transparent transition-none",
 			className,
 		)}
@@ -159,7 +159,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SelectPrimitive.Separator
 		ref={ref}
-		className={cn("bg-border/60 mx-1 my-2 h-px", className)}
+		className={cn("bg-border mx-1 my-2 h-px", className)}
 		{...props}
 	/>
 ));
diff --git a/apps/web/src/components/ui/slider.tsx b/apps/web/src/components/ui/slider.tsx
index 994159a1..57ddbcf0 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/apps/web/src/components/ui/slider.tsx
@@ -17,7 +17,7 @@ const Slider = React.forwardRef<
 		)}
 		{...props}
 	>
-		<SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+		<SliderPrimitive.Track className="bg-accent relative h-1.5 w-full grow overflow-hidden rounded-full">
 			<SliderPrimitive.Range className="bg-primary absolute h-full" />
 		</SliderPrimitive.Track>
 		<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
diff --git a/apps/web/src/components/ui/split-button.tsx b/apps/web/src/components/ui/split-button.tsx
index 26e54cab..aa8b331a 100644
--- a/apps/web/src/components/ui/split-button.tsx
+++ b/apps/web/src/components/ui/split-button.tsx
@@ -18,7 +18,7 @@ const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
 			<div
 				ref={ref}
 				className={cn(
-					"border-input bg-panel-accent inline-flex h-7 overflow-hidden rounded-lg border",
+					"border-input bg-accent inline-flex h-7 overflow-hidden rounded-lg border",
 					className,
 				)}
 				{...props}
@@ -39,7 +39,7 @@ const SplitButtonSide = forwardRef<
 			ref={ref}
 			variant="text"
 			className={cn(
-				"bg-panel-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100",
+				"bg-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100",
 				onClick
 					? "hover:bg-foreground/10 cursor-pointer hover:opacity-100"
 					: "cursor-default select-text",
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index 3668477c..d2844b63 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
 	<TabsPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-panel-accent data-[state=active]:text-foreground inline-flex cursor-pointer items-center justify-center rounded-lg px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+			"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-accent data-[state=active]:text-foreground inline-flex cursor-pointer items-center justify-center rounded-lg px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
 			className,
 		)}
 		{...props}
-- 
cgit v1.3.1