Show QR codes for invite and public share links.

Generate scannable QR codes in settings next to collaboration links so crew can open invites on mobile without copying long URLs. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-01 09:58:16 +02:00
parent efa0fcf934
commit 8fc15081e2
11 changed files with 154 additions and 69 deletions
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import QRCode from 'qrcode'
+
+interface LinkQrCodeProps {
+  value: string
+  size?: number
+}
+
+export default function LinkQrCode({ value, size = 200 }: LinkQrCodeProps) {
+  const { t } = useTranslation()
+  const [dataUrl, setDataUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!value.trim()) {
+      setDataUrl(null)
+      return
+    }
+
+    let cancelled = false
+    void QRCode.toDataURL(value, {
+      width: size,
+      margin: 2,
+      errorCorrectionLevel: 'M',
+      color: { dark: '#0f172a', light: '#ffffff' }
+    })
+      .then((url) => {
+        if (!cancelled) setDataUrl(url)
+      })
+      .catch((err) => {
+        console.error('QR code generation failed:', err)
+        if (!cancelled) setDataUrl(null)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [value, size])
+
+  if (!value.trim() || !dataUrl) return null
+
+  return (
+    <div className="link-qr-block">
+      <p className="link-qr-label">{t('settings.link_qr_hint')}</p>
+      <img
+        src={dataUrl}
+        width={size}
+        height={size}
+        className="link-qr-image"
+        alt={t('settings.link_qr_alt')}
+      />
+    </div>
+  )
+}