# Threema UX v2 — QR available on demand

Replaces the previous attempt that had the QR rendering inline above
the channel help text. That placement didn't work for you in practice
because it wasn't visible when you actually wanted it.

## What this does instead

1. **"Show QR" link** next to the channel title in the threema card —
   visible at all times, clickable any time you want the QR.

2. **Auto-opens the modal** the first time you focus the add-ID input
   on the page (so a new user adding their first ID sees it without
   needing to click "Show QR" themselves). Doesn't re-pop after
   dismissal — the link covers re-opens.

3. **Modal** with QR + 3-step instructions + "AIAGENT" label. Plain
   `<img>` (no next/image), closes on ESC / overlay click / × button.

The earlier `threema-setup.tsx` component file is removed — replaced by
`threema-qr-modal.tsx`.

## Files

```
src/lib/threema-gateway-config.ts                      # unchanged from before — central gateway constants
src/components/channel-users/threema-qr-modal.tsx      # NEW — the modal
src/components/channel-users/channel-users.tsx         # MODIFIED — Show QR button + focus auto-open + modal mount
deploy/patch-i18n-threema.mjs                          # adds threemaSetup.showQr label in 4 langs
public/threema/qr_code_AIAGENT.png                     # unchanged
```

## Apply

```bash
cd /path/to/pieced-portal

# Remove the old inline component if you applied the previous archive
rm -f src/components/channel-users/threema-setup.tsx

# Drop new + modified files
unzip -o /path/to/threema-ux-v2.zip

# Update messages
node deploy/patch-i18n-threema.mjs

# TS check
npx tsc --noEmit

git add -A
git commit -m "Threema QR: on-demand modal + auto-open on first add"
git push
```

After redeploy, the threema card under Authorized Users shows:

```
threema    [Show QR]                              0 users
            ────────────────────
            <help text: 'Enter your own Threema ID...'>
            ────────────────────
            [ input: A8K2P3X7    ] [ Add ]
            ^^^ focusing this opens the QR modal the first time
```

Clicking "Show QR" or focusing the input → modal with QR + steps.