Sebastian Krüger
a723be7731
Restructure the UI to match professional image editors (Photoshop, Affinity) with a clean, predictable layout that maximizes canvas space. Changes: - **Top Bar** (48px): Unified horizontal bar with three sections: * Left: Title + File Menu * Center: Context-sensitive tool options * Right: Undo/Redo, Zoom controls, New Layer button - **Left Side** (64px): Single tool palette (unchanged) - **Center**: Maximized canvas workspace (flex-1) - **Right Side** (280px): Unified panel dock with hybrid organization: * Always visible: Layers Panel (400px) + Color Panel (200px) * Tabbed sections: Adjustments, Tools, History * Collapsible panels within tabs for efficient space usage New Components: - `components/editor/tool-options.tsx`: Horizontal tool options bar * Shows context-sensitive options for active tool * Drawing tools: color, size, opacity, hardness, flow * Shape tool: shape type selector * Selection tool: mode selector (rectangular, elliptical, lasso, magic wand) - `components/editor/panel-dock.tsx`: Unified right panel system * Fixed 280px width (compact professional standard) * Tab system for organizing feature panels * Collapsible sections within tabs * Hybrid approach: essential panels always visible, others tabbed Removed from Left Sidebar: - ToolSettings panel (now in top bar) - ColorPanel (now in panel dock) - FilterPanel (now in panel dock) - SelectionPanel (now in panel dock) - TransformPanel (now in panel dock) - ShapePanel (now in panel dock) Benefits: - Reclaimed ~400px horizontal space for canvas - Predictable, stable UI (no panels appearing/disappearing) - Professional, industry-standard layout - All features accessible in organized panel dock - Cleaner, less cluttered interface Build Status: ✓ Successful (1266ms) 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
Paint UI
A modern, browser-based image editor built with Next.js 16 and Tailwind CSS 4. Inspired by miniPaint, reimagined for the modern web.
Features (Planned)
- 🎨 Multi-layer Canvas - Professional layer system with blend modes
- 🖌️ Drawing Tools - Pencil, brush, eraser, fill, and selection tools
- ✨ Image Effects - 50+ filters and effects (blur, sharpen, color adjustments)
- 📝 Text Tool - Add text with web fonts
- 🔄 Undo/Redo - Full history system
- 💾 File Support - Open/save PNG, JPG, WEBP, GIF, and project files
- 🎭 Dark Mode - Beautiful dark and light themes
- ⌨️ Keyboard Shortcuts - Power user friendly
- 📱 Responsive - Works on desktop, tablet, and mobile
Tech Stack
- Framework: Next.js 16 (App Router)
- UI: React 19 + TypeScript
- Styling: Tailwind CSS 4
- Components: Radix UI / Shadcn
- State: Zustand
- Canvas: HTML5 Canvas API + Web Workers
Getting Started
Prerequisites
- Node.js 20+
- pnpm 9+
Installation
# Clone repository
git clone ssh://git@dev.pivoine.art:2222/valknar/paint-ui.git
cd paint-ui
# Install dependencies
pnpm install
# Run development server
pnpm dev
Open http://localhost:3000 in your browser.
Documentation
- Implementation Plan - Detailed roadmap and architecture
- Contributing Guide - How to contribute (coming soon)
- API Documentation - Plugin API reference (coming soon)
Inspiration
This project is inspired by miniPaint, an excellent open-source image editor. While paint-ui is a complete rewrite with modern technologies, we aim to preserve the powerful capabilities that make miniPaint great.
License
MIT
Author
valknar