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/favicon/FaviconGenerator.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { Download, Loader2, Code2, Globe, Layout, FileImage } from 'lucide-react';
 import { FaviconFileUpload } from './FaviconFileUpload';
+import { ColorInput } from '@/components/ui/color-input';
 import { CodeSnippet } from './CodeSnippet';
 import { generateFaviconSet } from '@/lib/favicon/faviconService';
 import { downloadBlobsAsZip } from '@/lib/media/utils/fileUtils';
@@ -145,37 +146,17 @@ export function FaviconGenerator() {
               <div className="grid grid-cols-2 gap-3">
                 <div>
                   <label className="text-[10px] text-muted-foreground/60 font-mono mb-1.5 block">Background</label>
-                  <div className="flex gap-1.5">
-                    <input
-                      type="color"
-                      value={options.backgroundColor}
-                      onChange={(e) => setOptions({ ...options, backgroundColor: 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={options.backgroundColor}
-                      onChange={(e) => setOptions({ ...options, backgroundColor: e.target.value })}
-                      className={cn(inputCls, 'py-1')}
-                    />
-                  </div>
+                  <ColorInput
+                    value={options.backgroundColor}
+                    onChange={(v) => setOptions({ ...options, backgroundColor: v })}
+                  />
                 </div>
                 <div>
                   <label className="text-[10px] text-muted-foreground/60 font-mono mb-1.5 block">Theme</label>
-                  <div className="flex gap-1.5">
-                    <input
-                      type="color"
-                      value={options.themeColor}
-                      onChange={(e) => setOptions({ ...options, themeColor: 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={options.themeColor}
-                      onChange={(e) => setOptions({ ...options, themeColor: e.target.value })}
-                      className={cn(inputCls, 'py-1')}
-                    />
-                  </div>
+                  <ColorInput
+                    value={options.themeColor}
+                    onChange={(v) => setOptions({ ...options, themeColor: v })}
+                  />
                 </div>
               </div>
             </div>