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>
Layout:
- AnimationEditor: lg:grid-cols-5 (2/5 edit, 3/5 visual); full viewport
height; mobile Edit|Preview glass pill tabs; timeline embedded in edit
panel on mobile, standalone on desktop; Export|Presets custom tab
panel at the bottom of the right column
Components (all shadcn removed):
- AnimationSettings: Card/Label/Input/Select/Button → native inputs;
direction & fill mode as 4-pill selectors; easing as native <select>;
∞ iterations as icon pill toggle
- AnimationPreview: Card/ToggleGroup/Button → glass card; speed pills
as inline glass pill group; element picker as compact icon pills;
playback controls as glass icon buttons; subtle grid bg on canvas
- KeyframeTimeline: Card/Button → glass card; embedded prop for
rendering inside another card on mobile without double glass
- KeyframeProperties: Card/Label/Input/Button → bare content section;
SliderRow uses native number input; bg color toggle as pill button
- ExportPanel: Card/Tabs/Button → bare section; CSS|Tailwind custom
tab switcher; dark terminal (#06060e) code blocks
- PresetLibrary: Card/Tabs → bare section; category pills replace Tabs;
preset cards use glass border-border/20 bg-primary/3 styling
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
