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/ui/color-input.tsx

@@ -0,0 +1,39 @@
+import { cn } from '@/lib/utils/cn';
+
+interface ColorInputProps {
+  value: string;
+  onChange: (color: string) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Colour swatch (type="color") + hex text input pair.
+ * Renders them in a flex row at equal height. Disabled state dims both inputs.
+ */
+export function ColorInput({ value, onChange, disabled, className }: ColorInputProps) {
+  return (
+    <div className={cn('flex gap-1.5', className)}>
+      <input
+        type="color"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        className={cn(
+          'w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5 transition-opacity',
+          disabled && 'opacity-30 cursor-not-allowed'
+        )}
+      />
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        className={cn(
+          'flex-1 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',
+          disabled && 'opacity-30'
+        )}
+      />
+    </div>
+  );
+}

components/ui/slider-row.tsx

@@ -0,0 +1,37 @@
+import { Slider } from '@/components/ui/slider';
+
+interface SliderRowProps {
+  label: string;
+  display: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  onChange: (v: number) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Shared label+display header + Slider.
+ * For the keyframe editor's slider+number-input variant, use the local SliderRow in KeyframeProperties.tsx.
+ */
+export function SliderRow({ label, display, value, min, max, step = 1, onChange, disabled }: SliderRowProps) {
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+          {label}
+        </span>
+        <span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{display}</span>
+      </div>
+      <Slider
+        min={min}
+        max={max}
+        step={step}
+        value={[value]}
+        onValueChange={([v]) => onChange(v)}
+        disabled={disabled}
+      />
+    </div>
+  );
+}