Threema UX v3 — three real fixes

What this fixes vs v2

#	Issue	Fix
1	QR image 404'd as `GET /en/threema/qr_code_AIAGENT.png`	Middleware matcher now excludes paths with file extensions, so static files in `public/` are not locale-prefixed
2	Displayed gateway name as `AIAGENT` (without asterisk)	`displayName` is now `*AIAGENT` (with asterisk) — what users actually see in their Threema contacts
3	"Show QR" hyperlink — too small, unclear what it does	Replaced with a proper accent-bordered info banner: icon + title + body explaining what to do + prominent "Show QR code" button

Files

src/middleware.ts                                       # MODIFIED — matcher excludes dot-paths (static files)
src/lib/threema-gateway-config.ts                       # MODIFIED — displayName: "*AIAGENT"
src/components/channel-users/channel-users.tsx          # MODIFIED — banner replaces inline hyperlink
src/components/channel-users/threema-qr-modal.tsx       # UNCHANGED from v2 (label now reads "*AIAGENT" automatically via config)
deploy/patch-i18n-threema.mjs                           # MODIFIED — new bannerTitle/bannerBody/bannerButton keys, showQr dropped
public/threema/qr_code_AIAGENT.png                      # UNCHANGED

Apply

cd /path/to/pieced-portal

unzip -o /path/to/threema-ux-v3.zip
node deploy/patch-i18n-threema.mjs
npx tsc --noEmit
git add -A
git status   # eyeball
git commit -m "Threema UX: middleware static fix, *AIAGENT display, info banner"
git push

Layout after redeploy

┌─────────────────────────────────────────────────────────┐
│ threema                                       2 users   │
├─────────────────────────────────────────────────────────┤
│ ╔═══════════════════════════════════════════════════════╗│
│ ║ [icon]  Set up Threema           [ Show QR code ]    ║│ ← prominent banner, accent border
│ ║         Open Threema on your phone and scan our      ║│
│ ║         QR code to add the assistant as a contact.   ║│
│ ║         Then add your own Threema ID below.          ║│
│ ╚═══════════════════════════════════════════════════════╝│
├─────────────────────────────────────────────────────────┤
│ <help: "Enter your own Threema ID...">                  │
│ ┌───────┐ ┌───────┐                                     │
│ │USER01 ✕│ │USER02 ✕│                                   │
│ └───────┘ └───────┘                                     │
│ [ A8K2P3X7        ] [ Add ]                             │
└─────────────────────────────────────────────────────────┘

The banner is always visible whenever the threema channel is enabled. Clicking "Show QR code" opens the modal with the QR and 3-step instructions. ESC, overlay click, or × button closes.

Auto-open on first focus of the add-ID input is preserved from v2 — the modal pops once when a customer clicks into the input to add their first ID, so a brand-new customer who skipped the banner still gets the QR right when they need it.

Verification

After redeploy:

Open https://app.pieced.ch/en/tenants/acme-gmbh-2acf4612 in the browser.
Scroll to the Authorized Users → threema card.
Visible banner with icon, title "Set up Threema", body text, and a clearly clickable "Show QR code" button on the right.
Click the button → modal with the QR shows.
The label under the QR reads *AIAGENT (with asterisk).
Browser DevTools → Network → GET /threema/qr_code_AIAGENT.png is 200, not 404, and not redirected to /en/threema/....

4.3 KiB Raw Permalink Blame History Unescape Escape