+++
title = "Implement Quote detail page (/quotes/:id) — view, edit form with auth prompt, delete with auth prompt"
priority = 5
status = "todo"
ticket_type = "task"
dependencies = ["c3503b", "04f865", "1e6a09", "0d987f", "f850c6", "fc2f51"]
+++

<context>
The `quotesdb` UI is a Yew (Rust → Wasm) single-page app compiled by Trunk and hosted on Cloudflare Pages. It communicates with the backend API via `fetch` calls. Source lives in `src/bin/ui/`. Run with `trunk serve` for local development.

The Quote Detail page (`/quotes/:id`) shows a single quote. It also provides edit and delete actions, each guarded by the `AuthModal` component that prompts for the auth code.
</context>

<goal>
Implement the Quote Detail page component (`src/bin/ui/pages/quote_detail.rs`):
1. Extract `:id` from the route
2. Fetch the quote from `GET /api/quotes/:id`
3. Render the quote with `QuoteCard`
4. Render Edit and Delete buttons
5. Edit: show `AuthModal`, then show an edit form pre-filled with current values; on submit call `POST /api/quotes/:id`
6. Delete: show `AuthModal`, then call `DELETE /api/quotes/:id`; on success navigate to `/`
7. Show 403 error message on wrong auth code
</goal>

<constraints>
- 404 from the API should display a user-friendly "quote not found" message.
- After successful edit, re-fetch the quote to show updated data.
- After successful delete, navigate to `/browse`.
</constraints>

<validation>
From the `quotesdb/` directory:

```sh
trunk build
```
</validation>

<commit>
`feat(quotesdb): implement Quote Detail page — view, edit, delete with auth`
</commit>