refactor: externalize shared primitives, remove shadcn mixing in tools

Shared components (components/ui/):
- slider-row.tsx: SliderRow — label + display value + Slider, replaces
  inline slider blocks in FileConverter, QROptions
- color-input.tsx: ColorInput — color swatch + hex text input pair,
  replaces repeated inline patterns in QROptions, KeyframeProperties,
  FaviconGenerator

Media tool (FileConverter.tsx):
- Remove all shadcn Select/SelectTrigger/SelectContent/SelectItem
- Replace with native <select> + selectCls (matches AnimationSettings
  and all other tools)
- Use SliderRow for video/audio bitrate and image quality sliders
- Net: -6 shadcn Select trees, consistent with every other tool

QROptions.tsx:
- Use SliderRow for margin slider (remove raw Slider import)
- Use ColorInput for foreground + background color pairs

KeyframeProperties.tsx:
- Use ColorInput for background color pair (keep local SliderRow which
  has a different layout with number input)

FaviconGenerator.tsx:
- Use ColorInput for background + theme color pairs

AnimationSettings.tsx:
- Remove dead bg-[#1a1a2e] per-option className (global CSS handles
  select option styling via bg-popover)

Delete:
- components/media/ConversionOptions.tsx — dead code (no imports),
  contained the shadcn Label/Input/Select/Slider patterns being replaced

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/qrcode/QROptions.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { Slider } from '@/components/ui/slider';
+import { SliderRow } from '@/components/ui/slider-row';
+import { ColorInput } from '@/components/ui/color-input';
 import { cn } from '@/lib/utils/cn';
 import type { ErrorCorrectionLevel } from '@/types/qrcode';
 
@@ -22,9 +23,6 @@ const EC_OPTIONS: { value: ErrorCorrectionLevel; label: string; desc: string }[]
   { value: 'H', label: 'H', desc: '30%' },
 ];
 
-const inputCls =
-  'w-full bg-transparent border border-border/40 rounded-lg px-3 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 placeholder:text-muted-foreground/30';
-
 export function QROptions({
   errorCorrection,
   foregroundColor,
@@ -73,20 +71,7 @@ export function QROptions({
         {/* Foreground */}
         <div>
           <label className="text-[9px] text-muted-foreground/50 font-mono block mb-1.5">Foreground</label>
-          <div className="flex gap-1.5">
-            <input
-              type="color"
-              value={foregroundColor}
-              onChange={(e) => onForegroundColorChange(e.target.value)}
-              className="w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5"
-            />
-            <input
-              type="text"
-              value={foregroundColor}
-              onChange={(e) => onForegroundColorChange(e.target.value)}
-              className={inputCls}
-            />
-          </div>
+          <ColorInput value={foregroundColor} onChange={onForegroundColorChange} />
         </div>
 
         {/* Background */}
@@ -105,44 +90,24 @@ export function QROptions({
               Transparent
             </button>
           </div>
-          <div className="flex gap-1.5">
-            <input
-              type="color"
-              disabled={isTransparent}
-              value={isTransparent ? '#ffffff' : backgroundColor}
-              onChange={(e) => onBackgroundColorChange(e.target.value)}
-              className={cn(
-                'w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5 transition-opacity',
-                isTransparent && 'opacity-30 cursor-not-allowed'
-              )}
-            />
-            <input
-              type="text"
-              disabled={isTransparent}
-              value={isTransparent ? 'transparent' : backgroundColor}
-              onChange={(e) => onBackgroundColorChange(e.target.value)}
-              className={cn(inputCls, isTransparent && 'opacity-30')}
-            />
-          </div>
+          <ColorInput
+            value={isTransparent ? '#ffffff' : backgroundColor}
+            onChange={onBackgroundColorChange}
+            disabled={isTransparent}
+          />
         </div>
       </div>
 
       {/* Margin */}
-      <div>
-        <div className="flex items-center justify-between mb-2">
-          <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
-            Margin
-          </span>
-          <span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{margin}</span>
-        </div>
-        <Slider
-          value={[margin]}
-          onValueChange={([v]) => onMarginChange(v)}
-          min={0}
-          max={8}
-          step={1}
-        />
-      </div>
+      <SliderRow
+        label="Margin"
+        display={String(margin)}
+        value={margin}
+        min={0}
+        max={8}
+        step={1}
+        onChange={onMarginChange}
+      />
     </div>
   );
 }