Pr 500 qr code rebased

[BastiOfBerlin]

feat: QR codes for sharing and joining groups

Picks up #500 by @theo-engels, rebased onto current main and with a
few fixes layered on top. Their commit is unchanged and still under their
name — everything I added is in a separate commit at the end.

Closes #500.

What it does

Two things, both from the original PR:

• Share a group as a QR code. A QrCode button in the share popover opens
  a dialog with the group's URL as a QR, the Spliit logo embedded in the middle,
  and a button to download it as a PNG.
• Join a group by scanning one. On narrow viewports, "Add by URL" gains a
  second mode that opens the camera and accepts a scanned group link.

Why it needed a rebase

The PR conflicted, but only on package-lock.json — its lockfile commit
(3fabe84) was cut from d3b151e back in January and no longer applies.

I regenerated the lockfile against current main on npm 11 rather than
replaying that diff. It produces the same 17-line/11-line shape, and after #556
I'd rather not replay a six-month-old lockfile diff onto main again.

package.json and the source files rebased cleanly.

Commits

ee4f467	@theo-engels' original commit, cherry-picked with -x, byte-identical
a849a7f	regenerate package-lock.json for the two new dependencies
3195ad4	apply the repo's Prettier config to the three touched files
622e0e0	the fixes below

Please merge this with a merge commit or a rebase rather than a squash —
squashing collapses their commit and mine into one authorship.

What I changed on top

The relative-URL fallback accepted any host

This is the one worth a close look. #500 extends the "add by URL" parser so a
scanned code can carry a relative link:

const [, groupId] =
  urlToProcess.match(new RegExp(`${window.location.origin}/groups/([^/]+)`)) ??
  urlToProcess.match(/\/groups\/([^/?]+)/) ?? // Also match relative URLs from QR
  []

The second pattern is unanchored and has no origin check, so it also matches
absolute URLs on any host — https://evil.example/groups/abc scans as a
valid group link. The first pattern has a separate problem that predates this
PR: it interpolates window.location.origin into a RegExp unescaped.

Both go away with the URL API:

const parsed = new URL(urlToProcess, window.location.origin)
if (parsed.origin === window.location.origin) {
  groupId = parsed.pathname.match(/^\/groups\/([^/]+)/)?.[1]
}

Resolving against the current origin is what keeps the relative-link case
working — a relative path inherits our origin and passes, while an absolute URL
keeps its own and fails the check. pathname also drops the query string, so
the ?ref=share on shared links no longer needs its own character class.

The scanner couldn't be retried after a denied permission

The start button rendered only while hasPermission === null:

{!isScanning && hasPermission === null && ( <Button …> )}

So dismissing the browser's camera prompt — easy to do by accident — flipped it
to false and left the error message as the only remaining UI. The only way
back was to close and reopen the popover. It now renders whenever the scanner
isn't running, and startScanning resets the flag so a stale error doesn't sit
underneath a fresh attempt.

Smaller things

• includeMargin is deprecated in qrcode.react 4; switched to marginSize.
• Gave the QR explicit bgColor/fgColor and a title. It renders over a
  themed surface, so it shouldn't inherit one, and the title gives screen
  readers something to announce.
• Added title attributes to the copy and share buttons in the share popover,
  which had none. New en-US strings only, so Weblate picks them up normally.

New dependencies

qrcode.react	ISC	45 kB unminified, rendering only
html5-qrcode	Apache-2.0	375 kB minified, unpacked 3.4 MB

html5-qrcode is not small, and it's worth deciding deliberately. It's imported
by qr-code-scanner.tsx, a client component reachable from the groups list, so
Next will split it into that route's chunk rather than the shared bundle — but
anyone landing on the groups page pays for it once the chunk loads. If that's
not a trade you want, a next/dynamic import behind the scan-mode toggle would
defer it to the moment someone actually taps "Scan QR", and I'm happy to add
that here.

Verification

npm ci --ignore-scripts, npx prisma generate, npm run check-types,
npm run lint, npm run check-formatting — all clean against current main.
Lint reports 16 warnings, all of them pre-existing.

Not yet exercised on a physical device: the camera path needs a real phone, and
the PNG download path needs a browser check on Safari in particular
(canvas.toDataURL on an SVG-sourced image is the fiddly part). Worth someone
confirming both before this goes out.