Add useMobile hook for viewport detection (<768px). Update AppLayout
with hamburger menu, slide-over sidebar overlay, and fixed bottom
navigation bar (Tools, Automate, Files, Settings) for mobile. Update
Sidebar with expanded mode for mobile overlay. Update ToolPage to
stack settings above dropzone on mobile with collapsible panel. Add
new routes for /automate and /fullscreen. Integrate Settings dialog
and keyboard shortcuts at the App root level.
Create /fullscreen page showing all 37 tools grouped by 9 categories
in a card grid layout. Each category card has a colored header with
icon and tool count badge. Includes search bar, Show/Hide Details
toggle for tool descriptions, and button to switch back to sidebar view.
Create translation key system in packages/shared/src/i18n/ with full
English locale covering common actions, all 37 tools, settings sections,
auth, pipeline, and navigation strings. Add useI18n hook that returns
typed translations. Architecture enables adding new languages by
creating locale files matching the TranslationKeys type.
Register global keyboard shortcuts: Cmd/Ctrl+K to focus search,
Cmd/Ctrl+/ for tools view, Cmd/Ctrl+Shift+D to toggle theme,
Cmd/Ctrl+Alt+1-8 for quick tool navigation. Uses platform-aware
mod key detection (Cmd on Mac, Ctrl on Windows/Linux).
Create Automate page at /automate with pipeline builder component.
Includes 5 preset templates (Social Media Ready, Privacy Clean, Web
Optimization, Profile Picture, Watermark Batch), saved automation
management, step reordering, and pipeline execution with download.
- Add replace-color tool with pixel-level color replacement and tolerance
- Register all 19 new Phase 3 tools in routes/tools/index.ts
- Map all new tool IDs to settings components in tool-page.tsx
- Add PDF, ZIP, ICO, JSON content types to download route
- Install qrcode, jsqr, potrace, pdfkit dependencies
Add 6 tools for format conversion and optimization extras:
- svg-to-raster: SVG to PNG/JPG/WebP at custom resolution
- vectorize: raster to SVG via potrace (B&W and color modes)
- gif-tools: animated GIF resize, frame extraction, optimization
- bulk-rename: pattern-based file renaming with ZIP output
- favicon: generate all favicon/app icon sizes with manifest.json
- image-to-pdf: combine images into PDF using pdfkit
Add 3 layout and composition tools with API routes and frontend settings:
- collage: multi-image grid layout with configurable gap and background
- split: image grid splitting with ZIP output (reuses archiver pattern)
- border: borders, rounded corners via SVG mask, padding, and shadows
Add 4 watermark/overlay tools with API routes and frontend settings:
- watermark-text: SVG text overlay with tiling, position, opacity, rotation
- watermark-image: logo/image watermark with position, opacity, scale
- text-overlay: styled text on images with shadow and background box
- compose: layer images with position, opacity, and blend modes
Backend: POST /api/v1/tools/:toolId/batch accepts multiple files +
settings, processes via p-queue with CONCURRENT_JOBS concurrency limit,
streams ZIP response using archiver. Tool registry in tool-factory
enables batch to reuse any registered tool's process function. SSE
endpoint at GET /api/v1/jobs/:jobId/progress provides real-time updates.
Handles partial failures gracefully, preserves filenames, deduplicates
collisions. Frontend: use-batch-processor hook handles upload, SSE
progress tracking, and automatic ZIP download.
Draggable split-view slider with clip-path reveals original vs processed
image. Shows file size badges with savings percentage. Supports pointer
events for both mouse and touch. Integrated into tool-page to replace
dropzone after processing completes. Updated file-store with
originalBlobUrl for comparison. Enhanced dropzone with multi-file count
badge and file list display.
Adds Zustand file store, useToolProcessor hook for upload/process/download
flow, and 7 settings components: resize (with social media presets), crop
(with aspect ratio presets), rotate/flip, convert, compress (quality +
target size modes), strip-metadata, and color adjustments (brightness,
contrast, saturation, channels, effects). Updates tool-page to render the
appropriate settings panel based on toolId.
- Register @fastify/multipart plugin with size limits from env config
- Workspace manager: createWorkspace, getWorkspacePath, cleanupWorkspace
- File validation: magic byte detection, format check, megapixel limit
- POST /api/v1/upload: multipart upload with validation, returns jobId + file metadata
- GET /api/v1/download/:jobId/:filename: serve files with Content-Disposition
- Path traversal guards on all file-serving endpoints
- Add @stirling-image/image-engine and sharp as API dependencies
- Add apiUpload, getDownloadUrl, apiDownloadBlob to web client
Siddharth Kumar Sah