From 71ff0e68429adc878fd5f7d1b76f5512cb6eb3ca Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Wed, 22 Jul 2026 14:12:57 -0400
Subject: [PATCH] Fix QR image not appearing for new codes; v1.1.4
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switch from toDataURL (which silently failed in browser) to toCanvas on
a real <canvas> ref — more reliable and renders immediately on mount.
Download PNG link appears once the canvas is drawn.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 package.json      |  2 +-
 src/AdminPage.tsx | 33 ++++++++++++++++++++-------------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 5192174..452eadf 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/AdminPage.tsx b/src/AdminPage.tsx
index da8b0c7..ff879f4 100644
--- a/src/AdminPage.tsx
+++ b/src/AdminPage.tsx
@@ -1086,24 +1086,31 @@ function buildSiteContentForSave(siteContent: SiteContent): SiteContent {
 }
 
 function QrCodeImage({ url, label }: { url: string; label: string }) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
   const [dataUrl, setDataUrl] = React.useState<string>('')
+
   React.useEffect(() => {
-    QRCode.toDataURL(url, { width: 256, margin: 2, color: { dark: '#000000', light: '#ffffff' } })
-      .then(setDataUrl)
-      .catch(() => {})
+    const canvas = canvasRef.current
+    if (!canvas) return
+    QRCode.toCanvas(canvas, url, { width: 256, margin: 2, color: { dark: '#000000', light: '#ffffff' } }, (err: Error | null | undefined) => {
+      if (err) { console.error('[QR]', err); return }
+      setDataUrl(canvas.toDataURL('image/png'))
+    })
   }, [url])
-  if (!dataUrl) return null
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 6, marginTop: 10 }}>
-      <img src={dataUrl} alt={`QR code for ${label}`} style={{ width: 128, height: 128, imageRendering: 'pixelated', border: '1px solid var(--admin-border, #ddd)', borderRadius: 4 }} />
-      <a
-        href={dataUrl}
-        download={`qr-${label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.png`}
-        className="btn-admin-reset"
-        style={{ fontSize: '0.8em' }}
-      >
-        Download PNG
-      </a>
+      <canvas ref={canvasRef} style={{ width: 128, height: 128, border: '1px solid var(--admin-border, #ddd)', borderRadius: 4 }} />
+      {dataUrl && (
+        <a
+          href={dataUrl}
+          download={`qr-${label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.png`}
+          className="btn-admin-reset"
+          style={{ fontSize: '0.8em' }}
+        >
+          Download PNG
+        </a>
+      )}
     </div>
   )
 }