Show QR image and Download PNG button in QR Codes panel; v1.1.3

Each QR code card now renders a 128px preview of the actual QR image
(pointing to /qr/<slug> on the current origin) and a Download PNG link
that saves it as qr-<label>.png. Uses the qrcode browser build with
@types/qrcode for TypeScript support.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "siteforge",
-  "version": "1.0.14",
+  "version": "1.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "siteforge",
-      "version": "1.0.14",
+      "version": "1.1.2",
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
@@ -35,6 +35,7 @@
       "devDependencies": {
         "@eslint/js": "^9.39.4",
         "@types/node": "^24.12.0",
+        "@types/qrcode": "^1.5.6",
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^6.0.0",
@@ -3433,6 +3434,16 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "19.2.14",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "1.1.2",
+  "version": "1.1.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -40,6 +40,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@types/node": "^24.12.0",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.0",

src/AdminPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
 import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
@@ -9,6 +9,7 @@ import { DEFAULTS } from './content'
 import { AnalyticsPanel } from './components/AnalyticsPanel'
 import { AdminCollapsibleCard } from './components/AdminCollapsibleCard'
 import { useAutosave } from './hooks/useAutosave'
+import QRCode from 'qrcode'
 
 // Addresses an admin may send a reply from — must stay in sync with ADMIN_REPLY_FROM_OPTIONS in server/config.js.
 const REPLY_FROM_OPTIONS = [
@@ -1084,6 +1085,29 @@ function buildSiteContentForSave(siteContent: SiteContent): SiteContent {
   }
 }
 
+function QrCodeImage({ url, label }: { url: string; label: string }) {
+  const [dataUrl, setDataUrl] = React.useState<string>('')
+  React.useEffect(() => {
+    QRCode.toDataURL(url, { width: 256, margin: 2, color: { dark: '#000000', light: '#ffffff' } })
+      .then(setDataUrl)
+      .catch(() => {})
+  }, [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>
+    </div>
+  )
+}
+
 export default function AdminPage({ content, onSave, onLogout }: Props) {
   const normalizedContent = normalizeSiteContentForAdmin(content)
   const [form, setForm] = useState<SiteContent>(normalizedContent)
@@ -5572,6 +5596,7 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
                         </button>
                       </div>
                       <p style={{ margin: '4px 0 0', fontSize: '0.82em', color: '#888', wordBreak: 'break-all' }}>{code.destination}</p>
+                      <QrCodeImage url={`${window.location.origin}/qr/${code.slug}`} label={code.label} />
                       {isEditing && (
                         <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
                           <input type="text" value={qrEditLabel} onChange={e => setQrEditLabel(e.target.value)} className="admin-input" style={{ flex: '1 1 140px' }} placeholder="Label" />