feat(ui): add size system (sm/md/lg) + compact mode + remove collapsed dot

web/src/components/ui/switch.tsx

@@ -1,16 +1,25 @@
 import { cn } from '@/lib/utils'
 
+const sizes = {
+  sm: { track: 'h-4 w-7', thumb: 'h-2.5 w-2.5', on: 'translate-x-[14px]', off: 'translate-x-[2px]' },
+  md: { track: 'h-5 w-9', thumb: 'h-3.5 w-3.5', on: 'translate-x-[18px]', off: 'translate-x-[3px]' },
+  lg: { track: 'h-6 w-11', thumb: 'h-4 w-4', on: 'translate-x-[22px]', off: 'translate-x-[3px]' },
+}
+
 export function Switch({
   checked,
   onCheckedChange,
   disabled,
   className,
+  size = 'md',
 }: {
   checked: boolean
   onCheckedChange: (v: boolean) => void
   disabled?: boolean
   className?: string
+  size?: 'sm' | 'md' | 'lg'
 }) {
+  const s = sizes[size]
   return (
     <button
       type="button"
@@ -18,7 +27,8 @@ export function Switch({
       aria-checked={checked}
       disabled={disabled}
       className={cn(
-        'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition',
+        'relative inline-flex shrink-0 items-center rounded-full border transition',
+        s.track,
         checked ? 'border-transparent bg-[var(--bg-accent)]' : 'border-[var(--border)] bg-[var(--bg-tertiary)]',
         disabled && 'opacity-55 cursor-not-allowed',
         className,
@@ -27,8 +37,9 @@ export function Switch({
     >
       <span
         className={cn(
-          'inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform',
-          checked ? 'translate-x-[18px]' : 'translate-x-[3px]',
+          'inline-block rounded-full bg-white shadow transition-transform',
+          s.thumb,
+          checked ? s.on : s.off,
         )}
       />
     </button>