[P1] Stabilize the recipe editor and protect unsaved work

[postigodev]

Context

The current recipe editor is a single large Client Component responsible for create, edit, copy, imported-draft review, AI autofill, image upload, cuisine matching, tags, nutrition, ingredients, steps, validation, and submission.

This concentration makes accessibility, validation, performance, testing, and recovery difficult. Closing the modal or navigating away can also discard substantial work without warning or draft recovery.

Scope

• Split the editor into a controller and focused sections for basics, planning, image, nutrition, ingredients, and steps.
• Extract ingredient and step rows into stable components with durable client line IDs and controlled reordering/removal behavior.
• Align client validation with the canonical API/shared schemas from [P0] Harden recipe ingredient quantity validation and align contracts #82 and compatibility tests from [P1] Add cross-layer contract compatibility tests #86.
• Add field-level errors, aria-invalid/descriptions, and focus the first invalid field after submission.
• Replace the cuisine input/dropdown hybrid with the accessible combobox foundation from [P1] Create an accessible dialog, navigation, and form foundation #115.
• Add dirty-state detection and protect modal close, route changes, browser refresh, and destructive reset.
• Add safe draft recovery, scoped to the authenticated user/session and versioned to avoid restoring incompatible or cross-account data.
• Define conflict behavior when the underlying recipe changed before an edit was saved.
• Validate image type, size, dimensions, and compression before upload; coordinate storage with [P0] Stop persisting base64 recipe images in PostgreSQL #81 instead of persisting data URLs.
• Preserve user-entered fields when AI autofill, image lookup, or save operations fail.
• Bound and measure client rendering for recipes with many ingredients and steps.
• Remove dead or misleading controls from the editor flow.

Acceptance criteria

• Create, edit, save-as-copy, import-review, and AI-assisted flows share one documented controller without one monolithic render function.
• Unsaved changes cannot be silently lost through backdrop click, close, route navigation, or refresh.
• Draft recovery is user-scoped, versioned, clearable, and never restores microphone/overlay state.
• Validation matches shared/API contracts and focuses the first invalid field.
• Cuisine selection is keyboard- and screen-reader-operable.
• Image uploads enforce frontend limits and no longer require raw data URLs as durable recipe values.
• AI and network failures preserve manual edits and offer a safe retry.
• Large representative recipes remain responsive during editing.
• Automated tests cover create, edit, copy, imported draft, AI failure, save conflict, outage, close guard, refresh recovery, and account switching.

Related

• Recipe ingredient contract hardening: [P0] Harden recipe ingredient quantity validation and align contracts #82.
• Cross-layer contract tests: [P1] Add cross-layer contract compatibility tests #86.
• Image/object-storage work: [P0] Stop persisting base64 recipe images in PostgreSQL #81.
• Accessible UI primitives: [P1] Create an accessible dialog, navigation, and form foundation #115.
• Frontend mutation consistency: [P1] Fix frontend mutation consistency and inventory error handling #114.
• Browser validation: [P0] Add launch-critical validation and staging smoke tests to dev and release CI #77.

Out of scope

• Redesigning the entire recipe data model.
• Adding new recipe features unrelated to editor reliability.