From 906884e434d99b78b79391269d4f2c1f5d1ccb04 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 3 Jun 2026 10:10:25 -0400
Subject: [PATCH] feat: QR code in invite modal; fix CSP to allow
 api.qrserver.com
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

InviteUserPrompt: add QR code toggle button (Icons.BlockCode) in header.
When toggled, shows a 180x180 QR code image (api.qrserver.com) and the
raw invite URL below it, between the header and the search form.
inviteUrl computed once and shared between Copy Link and QR display.

Server: added https://api.qrserver.com to img-src in CSP header on
LXC 106 (/etc/nginx/sites-available/cinny) — nginx reloaded.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../invite-user-prompt/InviteUserPrompt.tsx   | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
index 3a6d69bdd..7153a7205 100644
--- a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
+++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
@@ -68,11 +68,16 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
   const mx = useMatrixClient();
   const alive = useAlive();
   const [linkCopied, setLinkCopied] = useState(false);
+  const [showQr, setShowQr] = useState(false);
 
-  const handleCopyLink = () => {
+  const inviteUrl = (() => {
     const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
     const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-    copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
+    return getMatrixToRoom(roomIdOrAlias, viaServers);
+  })();
+
+  const handleCopyLink = () => {
+    copyToClipboard(inviteUrl);
     setLinkCopied(true);
     setTimeout(() => setLinkCopied(false), 2000);
   };
@@ -202,11 +207,47 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
                   >
                     <Text size="B300">{linkCopied ? 'Copied!' : 'Copy Link'}</Text>
                   </Button>
+                  <IconButton
+                    size="300"
+                    radii="300"
+                    variant={showQr ? 'Primary' : 'Surface'}
+                    fill={showQr ? 'Soft' : 'None'}
+                    aria-label="Show QR code"
+                    aria-pressed={showQr}
+                    onClick={() => setShowQr((v) => !v)}
+                  >
+                    <Icon src={Icons.BlockCode} size="100" />
+                  </IconButton>
                   <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
                     <Icon src={Icons.Cross} />
                   </IconButton>
                 </Box>
               </Header>
+              {showQr && (
+                <Box
+                  direction="Column"
+                  alignItems="Center"
+                  gap="200"
+                  style={{
+                    padding: config.space.S300,
+                    borderBottom: `1px solid var(--bg-surface-border)`,
+                  }}
+                >
+                  <img
+                    src={`https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(inviteUrl)}`}
+                    alt="QR code for room invite link"
+                    width={180}
+                    height={180}
+                    style={{ display: 'block', borderRadius: config.radii.R300 }}
+                  />
+                  <Text
+                    size="T200"
+                    style={{ opacity: 0.6, wordBreak: 'break-all', textAlign: 'center' }}
+                  >
+                    {inviteUrl}
+                  </Text>
+                </Box>
+              )}
               <Box
                 as="form"
                 onSubmit={handleSubmit}