Threema UX: static file middleware fix, *AIAGENT display, info banner

2026-05-17 17:29:25 +02:00
parent c0ff22394c
commit 55571b1e59
9 changed files with 128 additions and 75 deletions
--- a/README.md
+++ b/README.md
@@ -1,33 +1,22 @@
-# Threema UX v2 — QR available on demand
+# Threema UX v3 — three real fixes

-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 fixes vs v2

-## 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`.
+| # | 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/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
+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
@@ -35,32 +24,54 @@ public/threema/qr_code_AIAGENT.png                     # unchanged
 ```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
+unzip -o /path/to/threema-ux-v3.zip
 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 status   # eyeball
+git commit -m "Threema UX: middleware static fix, *AIAGENT display, info banner"
 git push
 ```

-After redeploy, the threema card under Authorized Users shows:
+## Layout after redeploy

 ```
-threema    [Show QR]                              0 users
-            ────────────────────
-            <help text: 'Enter your own Threema ID...'>
-            ────────────────────
-            [ input: A8K2P3X7    ] [ Add ]
-            ^^^ focusing this opens the QR modal the first time
+┌─────────────────────────────────────────────────────────┐
+│ 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 ]                             │
+└─────────────────────────────────────────────────────────┘
 ```

-Clicking "Show QR" or focusing the input → modal with QR + steps.
+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:
+
+1. Open `https://app.pieced.ch/en/tenants/acme-gmbh-2acf4612` in the browser.
+2. Scroll to the **Authorized Users → threema** card.
+3. Visible banner with icon, title "Set up Threema", body text, and a
+   clearly clickable "Show QR code" button on the right.
+4. Click the button → modal with the QR shows.
+5. The label under the QR reads `*AIAGENT` (with asterisk).
+6. Browser DevTools → Network → `GET /threema/qr_code_AIAGENT.png` is
+   `200`, not `404`, and not redirected to `/en/threema/...`.