67 lines
2.2 KiB
Markdown
67 lines
2.2 KiB
Markdown
# 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.
|