# MultiMailer WebUI

Standalone React/Vite WebUI for MultiMailer.

## Layout

This shell implements the requested layout:

```text
+--------+----------------------------------------------------------------------------------------+
| MSM    | Titlebar with tenant selector                         ? Help    Account selector       |
|        +----------------------------------------------------------------------------------------+
| Icon   | Breadcrumb                                                                             |
|        +---------------+-----------------------------------------------------------------------+
| Icon   | Submenu       | Content                                                               |
|        |               |                                                                       |
```

## Run locally

Start the backend first:

```bash
cd multimailer-server/server
source .venv/bin/activate
python -m uvicorn app.main:app --reload --host 127.0.0.1 --port 8000
```

Start the WebUI:

```bash
cd multimailer-webui
npm install
npm run dev
```

Open:

```text
http://127.0.0.1:5173
```

Use the development API key:

```text
dev-multimailer-api-key
```

## Current UI scope

Included now:

- screenshot-inspired app shell
- dark left icon rail
- top titlebar with tenant selector, help and account area
- breadcrumb/action bar
- module submenu
- dashboard cards
- campaign workspace
- Create / Review / Send wizard skeletons
- structured editor placeholders
- settings/admin placeholders
- local API key storage

Next steps:

1. Wire campaign list and version detail to backend.
2. Wire version autosave endpoints.
3. Implement Create Wizard data model.
4. Implement fields editor.
5. Implement recipient mapping table.
6. Implement attachment rule editor.
7. Implement review wizard around missing/ambiguous attachments.


## Troubleshooting: campaigns response does not render

The server returns campaign lists as:

```json
{
  "campaigns": []
}
```

The WebUI client normalizes this to an array internally. If the page still shows
"No campaigns loaded yet", check:

```bash
curl -H "X-API-Key: dev-multimailer-api-key" \
  http://127.0.0.1:8000/api/v1/campaigns
```

During Vite development, either:

1. leave the WebUI API base URL empty and use the Vite `/api` proxy, or
2. configure FastAPI CORS and use `http://127.0.0.1:8000` as API base URL.

To reset the saved API base URL:

```js
localStorage.removeItem("multimailer.apiSettings.baseUrl")
```


## Login and help shell update

The top line no longer contains the API URL, API key field or Blog link. The URL/API key remain under Settings for development and automation access.

The Help menu includes:

- context-sensitive Help, opened by the Help menu or `F1`
- User docs placeholder
- Admin docs placeholder
- GitLab link
- About modal

The account selector now opens a login flow. Development login requires the backend auth-session update:

```text
Email: admin@example.local
Password: dev-admin
```

The tenant selector is currently informational. It becomes actionable once users can have memberships in multiple tenants.