feat: unified recipe editing interface with integrated ingredient mapping #5
1 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 6d18839589 |
feat: unified recipe editing interface with integrated ingredient mapping
Some checks failed
CI Pipeline / Lint Code (pull_request) Has been cancelled
Security Scanning / Docker Image Security (pull_request) Has been cancelled
CI Pipeline / Test API Package (pull_request) Has been cancelled
CI Pipeline / Test Web Package (pull_request) Has been cancelled
CI Pipeline / Test Shared Package (pull_request) Has been cancelled
Docker Build & Deploy / Build Docker Images (pull_request) Has been cancelled
E2E Tests / End-to-End Tests (pull_request) Has been cancelled
E2E Tests / E2E Tests (Mobile) (pull_request) Has been cancelled
Security Scanning / NPM Audit (pull_request) Has been cancelled
Security Scanning / Dependency License Check (pull_request) Has been cancelled
Security Scanning / Code Quality Scan (pull_request) Has been cancelled
Docker Build & Deploy / Push Docker Images (pull_request) Has been cancelled
Docker Build & Deploy / Deploy to Staging (pull_request) Has been cancelled
CI Pipeline / Build All Packages (pull_request) Has been cancelled
CI Pipeline / Generate Coverage Report (pull_request) Has been cancelled
Docker Build & Deploy / Deploy to Production (pull_request) Has been cancelled
Security Scanning / Security Summary (pull_request) Has been cancelled
## Major Features ### Unified Edit Interface - Created new UnifiedEditRecipe component combining recipe editing and ingredient-instruction mapping - Two-column layout: sticky ingredients panel (left) + instructions with drop zones (right) - Eliminated need to switch between separate edit and mapping pages ### Ingredient Management - Multi-select checkboxes for bulk operations - Inline editing of ingredient amounts, units, and names - Drag-and-drop ingredients to instruction steps - Bulk mapping: select multiple ingredients and assign to a step - Delete selected ingredients in bulk - Sticky ingredient panel with improved scrolling ### Instruction Editing - Click-to-edit inline editing for instruction text and timing - Edit/Delete buttons on each instruction step - Visual drop zones that highlight when dragging ingredients - Shows mapped ingredients directly in each step with remove buttons - Add new instructions with + button ### UI/UX Improvements - Collapsible recipe details section (compact layout) - 50/50 column split for balanced view - Sticky footer with Save/Cancel buttons - Compact, professional styling from mapping interface - Smaller image preview (200px) - Improved form spacing and padding - Fixed scrolling issues in ingredient panel ### Save Logic Enhancements - Improved ID matching algorithm using position and content - Handles newly added ingredients and instructions correctly - Matches by index position to handle duplicates better - Two-step fallback matching (index + content, then exact content) - Better error handling and logging ### Route Changes - Updated /recipes/:id/edit to use UnifiedEditRecipe - Removed /recipes/:id/manage-mappings route (no longer needed) - Updated Cooking Mode button: "Manage Ingredients" → "Edit Recipe" ## Technical Details - New Files: - packages/web/src/pages/UnifiedEditRecipe.tsx (~1000 lines) - packages/web/src/styles/UnifiedRecipeEdit.css (~850 lines) - Modified Files: - packages/web/src/App.tsx (removed old mapping route) - packages/web/src/pages/CookingMode.tsx (updated button) - Technologies: React, TypeScript, CSS Grid, Flexbox, Drag & Drop API 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> |
