+++
title = "Set up ui/Trunk.toml and ui/index.html — build configuration and Wasm entry point"
priority = 8
status = "todo"
ticket_type = "task"
dependencies = ["a9534d", "9ef703"]
+++

<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>
Update `Trunk.toml` and `index.html` in the `quotesdb/` root:
1. `Trunk.toml` must specify the target index.html so Trunk uses the right entry point.
2. `Trunk.toml` must include a `[[proxy]]` block to forward `/api/*` requests to the local API server (see proxy-config section below).
3. `index.html` must:
   - Include `<link data-trunk rel="css" href="src/bin/ui/style.css"/>` (plain CSS — see triage 5e3e37)
   - Include `<link data-trunk rel="rust" data-bin="ui"/>` so Trunk compiles the `ui` binary
   - Include `<div id="app"></div>` as the Yew mount point

Verify `trunk build` succeeds.
</goal>

<css-approach>
CSS approach resolved in triage 5e3e37: **plain CSS**.

- CSS file lives at `src/bin/ui/style.css`
- Linked in index.html as: `<link data-trunk rel="css" href="src/bin/ui/style.css"/>`
- Naming convention: BEM-style — `quote-card`, `quote-card__text`, `page-browse`, etc.
- No CDN Tailwind (incompatible with Wasm class-name scanning), no Rust CSS-in-Wasm crate.
- The actual CSS content is implemented in ticket bb1514.
</css-approach>

<proxy-config>
CORS/proxy approach resolved in triage a9534d: **Trunk proxy**.

During `trunk serve`, Trunk's built-in proxy forwards all `/api/*` requests to the local API server.
The API server runs on `localhost:3000` during local development (plain Axum/Tokio — not wrangler dev).
No CORS headers are needed anywhere; the proxy makes API calls appear same-origin.

Add this block to `Trunk.toml`:

```toml
[[proxy]]
rewrite = "/api"
backend = "http://localhost:3000"
```

This means:
- `trunk serve` listens on `localhost:8080` (default)
- Browser requests to `http://localhost:8080/api/quotes` are transparently proxied to `http://localhost:3000/api/quotes`
- In production (Cloudflare Pages + Workers), `/api/*` routes to the Worker via Cloudflare's routing — same path prefix, no code change needed
</proxy-config>

<constraints>
- `index.html` must include a `<div id="app">` mount point for the Yew app.
- Trunk.toml `target` must point to `index.html`.
- The `[[proxy]]` block must appear in `Trunk.toml` (not `Trunk.toml.dev` or elsewhere).
- Do NOT remove or overwrite the `<link data-trunk rel="copy-file" href="_redirects"/>` line
  added by ticket 9ef703 — that line must remain in `index.html`.
</constraints>

<validation>
From the `quotesdb/` directory:

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

<commit>
`chore(quotesdb): set up Trunk.toml and index.html for UI build`
</commit>