feat: unified recipe editing interface with integrated ingredient mapping #5

Merged

pkartch merged 1 commits from feature/edit-recipe-improvements into main 2025-11-01 05:10:48 +00:00

Conversation 0 Commits 1 Files Changed 4 +1966 -6

pkartch commented 2025-11-01 05:10:32 +00:00

Owner

Copy Link

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

Co-Authored-By: Claude noreply@anthropic.com

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

pkartch added 1 commit 2025-11-01 05:10:33 +00:00

feat: unified recipe editing interface with integrated ingredient mapping ... 6d18839589

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

pkartch merged commit 08ccbdcfd9 into main 2025-11-01 05:10:48 +00:00

pkartch referenced this issue from a commit 2025-11-01 05:10:50 +00:00

Merge pull request 'feat: unified recipe editing interface with integrated ingredient mapping' (#5) from feature/edit-recipe-improvements into main

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

pkartch

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: pkartch/basil#5