Change how QR code system works

app/page.tsx

@@ -53,6 +53,7 @@ import { TeamTrendChart, type TeamTrend } from '@/components/team-trend-chart';
 import { ScoutingOperations } from '@/components/scouting-operations';
 import { OfflineReadiness } from '@/components/offline-readiness';
 import { QrRelay } from '@/components/qr-relay';
+import { MatchSubmissionQr } from '@/components/match-submission-qr';
 import {
   getCachedValue,
   getDraft,
@@ -61,6 +62,7 @@ import {
   saveCachedValue,
   saveDraft,
   synchronizePendingMutations,
+  type PendingMutation,
 } from '@/lib/offline-db';
 import { observedPoints, type ScoutingPayload } from '@/lib/scouting-metrics';
 import {
@@ -432,6 +434,8 @@ export default function Home() {
   const [submissionStatus, setSubmissionStatus] = useState<
     'draft' | 'queued' | 'synchronized' | 'rejected'
   >('draft');
+  const [submittedMatchMutation, setSubmittedMatchMutation] =
+    useState<PendingMutation | null>(null);
   const eventTeams = eventPack
     ? [
         ...new Set(
@@ -893,7 +897,7 @@ export default function Home() {
     }
     setSaveError('');
     try {
-      await queueMutation({
+      const mutation: PendingMutation = {
         id: scoutEntryMutationId(
           eventPack.event.key,
           currentMatch.key,
@@ -914,7 +918,9 @@ export default function Home() {
           schemaVersion: 1,
           ...currentPayload,
         },
-      });
+      };
+      await queueMutation(mutation);
+      setSubmittedMatchMutation(mutation);
       setQueuedCount((await getPendingMutations()).length);
       setSaved(true);
       setSubmissionStatus('queued');
@@ -1082,6 +1088,7 @@ export default function Home() {
     setSelectedStation(station);
     setSaved(false);
     setSubmissionStatus('draft');
+    setSubmittedMatchMutation(null);
     navigate('Scout');
   }
 
@@ -1779,11 +1786,7 @@ export default function Home() {
               online={online}
               onRefresh={() => loadEventPack(false, true)}
             />
-            <QrRelay
-              organizationId={eventPack?.organizationId ?? ''}
-              eventKey={eventPack?.event.key ?? ''}
-              online={online}
-            />
+            <QrRelay online={online} />
             <Card>
               <CardHeader>
                 <CardTitle>Event coverage</CardTitle>
@@ -2073,18 +2076,28 @@ export default function Home() {
               </Button>
               {(submissionStatus === 'queued' ||
                 submissionStatus === 'synchronized') && (
-                <Button
-                  className="h-12 w-full text-base"
-                  variant="outline"
-                  onClick={continueToNextAssignment}
-                >
-                  {myAssignments.some(
-                    ({ match }) => match && match.key !== selectedMatchKey,
-                  )
-                    ? 'Continue to next assignment'
-                    : 'Return home'}
-                  <ChevronRight />
-                </Button>
+                <>
+                  {submittedMatchMutation && eventPack && (
+                    <MatchSubmissionQr
+                      mutation={submittedMatchMutation}
+                      organizationId={eventPack.organizationId}
+                      eventKey={eventPack.event.key}
+                      online={online}
+                    />
+                  )}
+                  <Button
+                    className="h-12 w-full text-base"
+                    variant="outline"
+                    onClick={continueToNextAssignment}
+                  >
+                    {myAssignments.some(
+                      ({ match }) => match && match.key !== selectedMatchKey,
+                    )
+                      ? 'Continue to next assignment'
+                      : 'Return home'}
+                    <ChevronRight />
+                  </Button>
+                </>
               )}
             </div>
           </div>

components/match-submission-qr.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+import QRCode from 'qrcode';
+import { QrCode } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { PendingMutation } from '@/lib/offline-db';
+import {
+  createRelayFrames,
+  ensureRelayDeviceRegistered,
+} from '@/lib/qr-relay';
+
+export function MatchSubmissionQr({
+  mutation,
+  organizationId,
+  eventKey,
+  online,
+}: {
+  mutation: PendingMutation;
+  organizationId: string;
+  eventKey: string;
+  online: boolean;
+}) {
+  const [image, setImage] = useState('');
+  const [message, setMessage] = useState('Preparing match handoff code…');
+
+  useEffect(() => {
+    let cancelled = false;
+    setImage('');
+    setMessage('Preparing match handoff code…');
+    void ensureRelayDeviceRegistered(online)
+      .then((device) =>
+        createRelayFrames(device, organizationId, eventKey, [mutation]),
+      )
+      .then((frames) => {
+        if (frames.length !== 1)
+          throw new Error(
+            'This match contains too much data for one QR code. Shorten the notes and save again.',
+          );
+        return QRCode.toDataURL(frames[0], {
+          width: 420,
+          margin: 1,
+          errorCorrectionLevel: 'M',
+        });
+      })
+      .then((dataUrl) => {
+        if (cancelled) return;
+        setImage(dataUrl);
+        setMessage(
+          'Have a signed-in device with data service scan this code. You can also sync normally when service returns.',
+        );
+      })
+      .catch((error: unknown) => {
+        if (cancelled) return;
+        setMessage(
+          error instanceof Error
+            ? error.message
+            : 'Could not create the match handoff code.',
+        );
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [eventKey, mutation, online, organizationId]);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>
+          <QrCode /> Match handoff
+        </CardTitle>
+        <Badge variant="outline">One match</Badge>
+      </CardHeader>
+      <CardContent className="space-y-3 text-center">
+        {image && (
+          <Image
+            unoptimized
+            width={420}
+            height={420}
+            className="mx-auto w-full max-w-[420px] rounded-lg bg-white p-2"
+            src={image}
+            alt="QR code containing this match scouting submission"
+          />
+        )}
+        <p className="text-sm text-muted-foreground">{message}</p>
+      </CardContent>
+    </Card>
+  );
+}

components/offline-readiness.tsx

@@ -201,7 +201,8 @@ export function OfflineReadiness({
             ) : (
               <TriangleAlert className="text-amber-500" />
             )}
-            <strong>{relayReady ? 'Registered' : 'Missing'}</strong> QR relay
+            <strong>{relayReady ? 'Registered' : 'Missing'}</strong> match QR
+            handoff
             key
           </span>
           <span>