feat: unified recipe editing interface with integrated ingredient mapping

Browse Source

## 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>

...

This commit is contained in:

Paul R Kartchner

2025-11-01 05:09:09 +00:00

parent 3d1e5f0e14

commit 6d18839589

4 changed files with 1966 additions and 6 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

1101

packages/web/src/pages/UnifiedEditRecipe.tsx Normal file

File diff suppressed because it is too large Load Diff