---
# quotesdb-k258
title: Implement error display component — consistent error state UI across all pages
status: completed
type: task
priority: low
created_at: 2026-03-10T23:32:11Z
updated_at: 2026-03-10T23:32:20Z
blocked_by:
    - quotesdb-kaat
    - quotesdb-wlpv
---

<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.
</context>

<goal>
Implement a shared `ErrorDisplay` Yew component (`src/bin/ui/components/error_display.rs`) that renders a styled error message when an API call fails. Used on all pages. Accepts an `Option<String>` error message prop — renders nothing when `None`.
</goal>

<constraints>
- Resolve TRIAGE ticket 5e3e37 (CSS/styling approach) before adding class names.
- Do not use `panic!` or `unwrap` in component code — all errors should surface via this component.
- Render nothing (not an empty box) when the error is `None`.
</constraints>

<validation>
From the `quotesdb/` directory:

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

<commit>
`feat(quotesdb): implement shared ErrorDisplay component`
</commit>