Update README with new UI features and live preview

README.md

@@ -1,22 +1,43 @@
 # PNGer - Modern PNG Editor & Resizer
 
-A simple, reactive, modern PNG editor and resizer with direct upload and download features. Built with TypeScript and deployed as a single Docker container on Unraid.
+A sleek, modern PNG editor and resizer with **live preview**, **dark/light mode theming**, and direct upload/download features. Built with TypeScript and deployed as a single Docker container on Unraid.
 
-## Features
+## ✨ Features
 
-- **Drag & Drop Upload**: Intuitive file upload interface
+### 🎨 Modern UI with Dark/Light Mode
+- **Dark Mode**: Black background (#0a0a0a) with light gold (#daa520) accents
+- **Light Mode**: White background with dark gold (#b8860b) accents
+- Perfect for inspecting PNG transparency on different backgrounds
+- Persistent theme preference
+- Smooth color transitions
+
+### ⚡ Live Preview
+- **Real-time preview** of transformations before download
+- **Side-by-side comparison** (original vs transformed)
+- **File size analysis** showing savings or increase
+- **Instant feedback** using client-side Canvas API (< 500ms)
+- No server round-trip needed for preview
+
+### 🖼️ Image Operations
 - **Resize Operations**: Width, height, and aspect ratio controls
-- **Crop to Fit**: Smart cropping with position control (center, top, bottom, etc.)
+- **Crop to Fit**: Smart cropping with position control (9 positions)
 - **Format Conversion**: PNG, WebP, and JPEG output
-- **Quality Control**: Adjustable compression settings
+- **Quality Control**: Adjustable compression settings (10-100%)
+- **Fit Modes**: Inside (resize only) or Cover (crop to fill)
+
+### 🚀 Performance & Usability
 - **Direct Download**: No server-side storage, immediate download
 - **Modern UI**: Sleek, responsive TypeScript/Svelte design
+- **File Analysis**: Original size, transformed size, savings percentage
+- **Debounced Updates**: Smooth preview generation (300ms delay)
+- **Visual Feedback**: Loading states, error messages, success indicators
 
 ## Tech Stack
 
 - **Frontend**: Svelte 4 + Vite + TypeScript
 - **Backend**: Node.js + Express + TypeScript
 - **Image Processing**: Sharp (high-performance image library)
+- **Preview**: Canvas API (client-side)
 - **Container**: Docker (Alpine-based, multi-stage build)
 - **Deployment**: Unraid via Docker Compose
 
@@ -141,37 +162,46 @@ docker run -d \
 
 ```
 pnger/
-├── frontend/              # Svelte + TypeScript application
+├── frontend/                # Svelte + TypeScript application
 │   ├── src/
-│   │   ├── App.svelte    # Main UI component
-│   │   ├── main.ts       # Entry point
+│   │   ├── App.svelte      # Main UI component (with live preview)
+│   │   ├── main.ts         # Entry point
+│   │   ├── app.css         # Design system (dark/light modes)
 │   │   └── lib/
-│   │       └── api.ts    # API client
+│   │       ├── api.ts      # API client
+│   │       ├── preview.ts  # Live preview logic
+│   │       └── theme.ts    # Theme management store
 │   ├── package.json
 │   ├── tsconfig.json
 │   └── vite.config.ts
-├── backend/               # Express + TypeScript API server
+├── backend/                 # Express + TypeScript API server
 │   ├── src/
-│   │   ├── index.ts      # Express server
+│   │   ├── index.ts        # Express server
 │   │   ├── routes/
-│   │   │   └── image.ts  # Image transform endpoint
+│   │   │   └── image.ts    # Image transform endpoint
 │   │   └── types/
-│   │       └── image.ts  # TypeScript types
+│   │       └── image.ts    # TypeScript types
 │   ├── package.json
 │   └── tsconfig.json
-├── Dockerfile             # Multi-stage build (frontend + backend)
-├── docker-compose.yml     # Unraid deployment config
-└── INSTRUCTIONS.md        # Development guide
+├── Dockerfile               # Multi-stage build (frontend + backend)
+├── docker-compose.yml       # Unraid deployment config
+├── ROADMAP.md              # Feature roadmap
+└── UI_UPGRADE_NOTES.md     # UI upgrade documentation
 ```
 
 ## How It Works
 
 1. User uploads an image via the web interface
-2. Frontend sends image + transform parameters to backend API
-3. Backend processes image using Sharp (resize, crop, compress, convert format)
-4. Processed image is returned directly to browser
-5. Browser triggers automatic download
-6. No files stored on server (stateless operation)
+2. **Live preview** generates instantly using Canvas API
+3. User adjusts parameters (width, height, quality, format, etc.)
+4. Preview updates in real-time (debounced 300ms)
+5. User sees file size comparison and savings
+6. When satisfied, user clicks "Transform & Download"
+7. Frontend sends image + parameters to backend API
+8. Backend processes using Sharp (resize, crop, compress, convert)
+9. Processed image returned directly to browser
+10. Browser triggers automatic download
+11. No files stored on server (stateless operation)
 
 ## API Endpoints
 
@@ -204,10 +234,53 @@ All configuration is handled via environment variables passed through Docker/Unr
 - `TEMP_DIR`: Temporary directory for uploads (default: `/app/temp`)
 - `NODE_ENV`: Node environment (default: `production`)
 
+## UI Features in Detail
+
+### Dark/Light Mode
+- **Toggle Button**: Sun (☀️) / Moon (🌙) icon in header
+- **Persistent**: Saved to localStorage
+- **System Detection**: Uses OS preference on first visit
+- **Smooth Transitions**: Colors fade smoothly (250ms)
+- **Use Case**: Compare PNG transparency on black vs white backgrounds
+
+### Live Preview
+- **Side-by-Side**: Original image on left, preview on right
+- **File Size**: Shows before and after sizes
+- **Savings Indicator**: Green for reduction, yellow for increase
+- **Instant Updates**: Debounced at 300ms for smooth performance
+- **Canvas-Based**: No server load, runs in browser
+
+### Image Analysis
+- Original file size displayed
+- Preview size estimation
+- Savings/increase percentage
+- Visual feedback with color coding
+
+## Roadmap
+
+See [ROADMAP.md](./ROADMAP.md) for planned features including:
+- Drag & drop upload
+- Batch processing
+- Smart presets
+- Watermarking
+- Advanced crop tool
+- And more!
+
 ## License
 
 MIT License - See LICENSE file for details
 
 ## Repository
 
-https://git.alwisp.com/jason/pnger
+https://git.alwisp.com/jason/pnger
+
+## Screenshots
+
+### Light Mode
+Clean white interface with dark gold accents, perfect for inspecting dark images
+
+### Dark Mode
+Sleek black interface with light gold accents, ideal for viewing light/transparent PNGs
+
+### Live Preview
+Side-by-side comparison showing original and transformed image with file size analysis