Add authenticated recipe detail page

[dgee2]

Summary

• New /recipe/:recipeId page (route protected by the existing authGuard) rendering title, summary, prep/cook/total timings, servings/yield, ingredients grouped by sectionTitle, ordered steps, and an accessScope badge via the existing useRecipe(recipeId) composable.
• Regenerates the OpenAPI client from the backend built in Expand recipe DTOs and Mapperly profiles #1114-Add recipe delete endpoint #1117 and renames NewRecipe/Recipe/FullRecipe to UpsertRecipe/RecipeListItem/RecipeDetail to match; threads the new required scope query param through getRecipes/useRecipes (hardcoded to 'mine' — a scope selector UI is a separate future issue).
• RecipeList.vue's items now link to the new page, otherwise it would be unreachable from the UI.

Also fixes a real bug found while wiring useRecipe for this page: useRecipes/useRecipe embedded a freshly-created function reference (getRecipes/getRecipe from useRecipeApi()) directly in their TanStack Query keys to satisfy a lint rule. Since that reference changes identity on every call, it broke query caching/hashing badly enough to destabilize the whole Storybook test suite (manifesting as unhandled promise rejections that made pnpm test:storybook exit non-zero even when every individual assertion passed). Fixed by removing the function references from both keys and suppressing the lint rule with an explanatory comment instead.

Known, documented limitation: MSW isn't intercepting this page's path-parameterized route (/api/recipe/:recipeId) specifically under vitest --project=storybook — confirmed via direct testing against MSW's own matchRequestUrl (the pattern matches correctly in isolation) and by manually verifying the page renders correctly with the same mock data in the real interactive Storybook dev server. RecipeList's pre-existing stories have the same underlying gap; they just don't assert on real response data so it was never visible. Documented inline in RecipeDetail.stories.ts rather than worked around — worth a dedicated follow-up.

Closes #1118
Part of #1100

Test plan

• pnpm type-check, pnpm lint, pnpm build — all clean
• pnpm test:storybook — 19/19 files, 36/36 tests, exit 0
• Manually verified in the real Storybook dev server (Success/NotFound states render correctly; RecipeList → RecipeDetail navigation works)

[Copilot]

Pull request overview

Adds an authenticated recipe detail page to the Vue/Quasar frontend and aligns both frontend + backend with the updated recipe DTOs and API behaviors (including scoped recipe listing, step upserts, and 409/403 problem responses).

Changes:

• Frontend: adds /recipe/:recipeId route + RecipeDetail page + Storybook coverage; updates recipe list items to navigate to details.
• Frontend API client/service: regenerates OpenAPI types, renames recipe DTO types, threads required scope query param through getRecipes/useRecipes, and fixes TanStack Query key instability.
• Backend: adds step upsert on create/update, adds delete endpoint + ownership checks, and introduces reusable ProblemDetails-based exception handlers (409 conflict, 403 forbidden) with updated tests.

Reviewed changes

Copilot reviewed 28 out of 28 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
ui/menu-website/src/services/recipe-service.ts	Fixes TanStack Query key instability; hardcodes list scope to mine.
ui/menu-website/src/services/recipe-api.ts	Updates generated DTO type exports and adds scope query param to recipe listing.
ui/menu-website/src/router/authenticated.routes.ts	Adds authenticated recipe/:recipeId route.
ui/menu-website/src/pages/RecipeList.vue	Makes list items navigable to the new recipe detail page.
ui/menu-website/src/pages/RecipeDetail.vue	New recipe detail page rendering timings, ingredients, steps, and access-scope badge.
ui/menu-website/src/pages/RecipeDetail.stories.ts	Adds Storybook stories / play assertions for detail page states.
ui/menu-website/.storybook/router.ts	Adds Storybook router path for /recipe/:recipeId.
ui/menu-website/.storybook/msw-handlers.ts	Adds MSW handlers + sample data for recipe detail endpoint.
backend/MenuApi/Validation/UpsertRecipeValidator.cs	Allows empty ingredient collections while still disallowing null.
backend/MenuApi/Services/RecipeService.cs	Adds step upsert on create/update; adds ownership-gated update/delete returning success flags.
backend/MenuApi/Services/IRecipeService.cs	Updates service contract for update/delete to include caller + return bool.
backend/MenuApi/Repositories/RecipeRepository.cs	Improves projections via expression selector + adds delete via ExecuteDeleteAsync; maps duplicate-title errors to 409.
backend/MenuApi/Repositories/IRecipeRepository.cs	Adds DeleteRecipeAsync contract.
backend/MenuApi/Recipes/RecipeApi.cs	Documents new 401/403/404/409 responses; adds delete endpoint and ownership-aware update handling.
backend/MenuApi/Program.cs	Registers new exception handlers.
backend/MenuApi/Exceptions/ProblemDetailsExceptionHandler.cs	New reusable base for typed ProblemDetails exception handling.
backend/MenuApi/Exceptions/ForbiddenAccessExceptionHandler.cs	Maps ForbiddenAccessException to 403 ProblemDetails.
backend/MenuApi/Exceptions/ForbiddenAccessException.cs	New exception for ownership/authorization failures.
backend/MenuApi/Exceptions/ConflictExceptionHandler.cs	Maps ConflictException to 409 ProblemDetails.
backend/MenuApi/Exceptions/ConflictException.cs	New exception for conflict/duplicate scenarios.
backend/MenuApi/Exceptions/BusinessValidationExceptionHandler.cs	Refactors existing 422 handler to use new ProblemDetails base.
backend/MenuApi.Tests/Validation/UpsertRecipeValidatorTests.cs	Updates validator tests for empty-vs-null ingredients behavior.
backend/MenuApi.Tests/Services/RecipeServiceTests.cs	Adds tests for steps upsert + ownership checks + delete behavior.
backend/MenuApi.Tests/Controllers/RecipeApiTests.cs	Updates controller tests for ownership-gated update + new delete endpoint behaviors.
backend/MenuApi.Integration.Tests/RecipeIntegrationTests.cs	Updates expected status codes from 422 → 409 for duplicates.
backend/MenuApi.Integration.Tests/RecipeDeleteIntegrationTests.cs	Adds integration coverage for delete (success, forbidden, not found) + cascade assertions.
backend/MenuApi.Integration.Tests/RecipeCreateUpdateIntegrationTests.cs	Adds integration coverage for create/update including steps and empty collections.
backend/MenuApi.Integration.Tests/Factory/TestDatabaseSeeder.cs	Adds helper to count steps for cascade verification.

Suppressed comments (1)

ui/menu-website/src/pages/RecipeDetail.vue:40

• Using the array index as the Vue :key for steps can cause incorrect DOM reuse if steps are edited/reordered. Steps include a stable sortOrder value; use that as the key (you can still keep index for display).

      <q-list v-else bordered separator>
        <q-item v-for="(step, index) in recipe.steps" :key="index">
          <q-item-section avatar>{{ index + 1 }}</q-item-section>
          <q-item-section>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud