mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
80 lines
3.5 KiB
Markdown
80 lines
3.5 KiB
Markdown
# Resize & Rotate/Flip UX Redesign
|
||
|
||
## Problem
|
||
|
||
The before/after comparison slider is a poor fit for resize and rotate/flip tools:
|
||
- **Resize** overlays two different-sized images — doesn't communicate anything useful. Users care about "how big will it be?" not pixel-level comparison.
|
||
- **Rotate/Flip** transformations are self-evident. A slider adds nothing.
|
||
|
||
The resize settings also use technical jargon (contain, cover, fill, inside, outside) that confuses layman users.
|
||
|
||
## Design
|
||
|
||
### Resize: Tab-Based Settings with Presets Front-and-Center
|
||
|
||
Replace the current mode toggle (Pixels/Percentage) with three tabs:
|
||
|
||
#### Presets Tab (default)
|
||
- Grid of cards grouped by platform (Instagram, Twitter/X, Facebook, YouTube, LinkedIn)
|
||
- Each card shows: platform icon, preset name (e.g., "Post", "Story", "Header"), dimensions (e.g., "1080 × 1080")
|
||
- Clicking a card selects it (highlighted border), clicking again deselects
|
||
- Selected preset populates the dimensions automatically
|
||
- Process button at bottom
|
||
|
||
#### Custom Size Tab
|
||
- Width and Height number inputs
|
||
- Aspect ratio lock toggle between them (link/unlink icon)
|
||
- Fit mode as 3 plain-language options:
|
||
- "Crop to fit" (maps to sharp `cover`)
|
||
- "Fit inside" (maps to sharp `contain`)
|
||
- "Stretch" (maps to sharp `fill`)
|
||
- Remove "inside" and "outside" fit modes — they confuse laymen
|
||
- "Don't enlarge" checkbox
|
||
- Process button at bottom
|
||
|
||
#### Scale Tab
|
||
- Percentage number input
|
||
- Quick-select buttons: 25% | 50% | 75%
|
||
- Process button at bottom
|
||
|
||
### Resize: Side-by-Side Result Display
|
||
|
||
Replace the before/after slider with side-by-side thumbnails:
|
||
|
||
- Two image thumbnails side by side, each fitted within its half
|
||
- **Left**: "Original" label, the original image, dimensions below (e.g., "3000 × 2000"), file size (e.g., "2.4 MB")
|
||
- **Right**: "Resized" label, the processed image, new dimensions below (e.g., "1080 × 720"), file size (e.g., "340 KB")
|
||
- File size savings shown between/below (e.g., "86% smaller")
|
||
- Checkerboard background for transparency (same pattern as current viewer)
|
||
- Review panel (undo, download, continue editing) remains unchanged
|
||
|
||
### Rotate/Flip: Live CSS Preview
|
||
|
||
Replace the "process then compare" flow with live preview:
|
||
|
||
- When a file is loaded, it shows in the image viewer as normal
|
||
- As the user adjusts controls (rotate buttons, angle slider, flip toggles), CSS transforms update the preview in real-time — no server call
|
||
- Controls stay the same: quick rotate 90 left/right, angle slider 0-360, horizontal/vertical flip toggles
|
||
- The "Process" button label changes to "Apply" to signal finality
|
||
- Clicking "Apply" sends to the server, produces the final file
|
||
|
||
### Rotate/Flip: Result Display
|
||
|
||
After applying:
|
||
- Result shows in the standard ImageViewer (no before/after slider, no side-by-side)
|
||
- The transformation is self-evident
|
||
- Review panel appears with undo/download options
|
||
|
||
## Files to Modify
|
||
|
||
### Frontend
|
||
- `apps/web/src/components/tools/resize-settings.tsx` — rewrite with tab-based UI
|
||
- `apps/web/src/components/tools/rotate-settings.tsx` — add live CSS preview controls
|
||
- `apps/web/src/pages/tool-page.tsx` — conditionally render side-by-side for resize, skip before/after slider for rotate/flip
|
||
- New component: `apps/web/src/components/common/side-by-side-comparison.tsx` — reusable side-by-side thumbnail comparison
|
||
|
||
### No Backend Changes
|
||
- Resize and rotate API routes remain unchanged
|
||
- Image engine operations remain unchanged
|
||
- Only the frontend presentation and interaction model changes
|