add qr-code to assignments and fix flashing with slider

Author: joshunrau

apps/web/package.json

@@ -46,6 +46,7 @@
     "lucide-react": "^0.507.0",
     "motion": "catalog:",
     "papaparse": "workspace:papaparse__5.x@*",
+    "qrcode": "^1.5.4",
     "react": "workspace:react__19.x@*",
     "react-dom": "workspace:react-dom__19.x@*",
     "recharts": "^2.15.2",
@@ -65,6 +66,7 @@
     "@tanstack/router-plugin": "^1.127.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "16.2.0",
+    "@types/qrcode": "^1.5.6",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "happy-dom": "catalog:",
     "tailwindcss": "catalog:",

apps/web/src/components/QRCode.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+
+import { useTheme } from '@douglasneuroinformatics/libui/hooks';
+import qrcode from 'qrcode';
+
+export const QRCode = ({ url }: { url: string }) => {
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  const [theme] = useTheme();
+
+  useEffect(() => {
+    qrcode.toCanvas(
+      ref.current,
+      url,
+      {
+        color: {
+          dark: theme === 'dark' ? '#f1f5f9' : '#0f172a',
+          light: '#0000'
+        },
+        margin: 2,
+        scale: 6
+      },
+      (error) => {
+        if (error) {
+          console.error(error);
+        }
+      }
+    );
+  }, [theme, url]);
+
+  return <canvas className="rounded-md border" ref={ref} />;
+};

apps/web/src/routes/_app/datahub/$subjectId/assignments.tsx

@@ -21,6 +21,7 @@ import type { UnilingualInstrumentInfo } from '@opendatacapture/schemas/instrume
 import { createFileRoute } from '@tanstack/react-router';
 import { z } from 'zod/v4';
 
+import { QRCode } from '@/components/QRCode';
 import { useAssignmentsQuery } from '@/hooks/useAssignmentsQuery';
 import { useCreateAssignment } from '@/hooks/useCreateAssignment';
 import { useInstrument } from '@/hooks/useInstrument';
@@ -40,26 +41,25 @@ const AssignmentSlider: React.FC<{
   const instrument = useInstrument(assignment?.instrumentId ?? null);
 
   return (
-    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+    <Sheet open={Boolean(isOpen && assignment && instrument)} onOpenChange={setIsOpen}>
       <Sheet.Content className="flex h-full flex-col">
         <Sheet.Header>
           <Sheet.Title>{instrument?.details.title}</Sheet.Title>
           <Sheet.Description>{t('datahub.assignments.assignmentSliderDesc')}</Sheet.Description>
         </Sheet.Header>
         <Sheet.Body className="grow">
-          {instrument && (
-            <div className="flex flex-col gap-3">
-              <Label asChild>
-                <a className="hover:underline" href={assignment!.url} rel="noreferrer" target="_blank">
-                  {t('datahub.assignments.link')}
-                </a>
-              </Label>
-              <div className="flex gap-2">
-                <Input readOnly className="h-9" id="link" value={assignment!.url} />
-                <CopyButton size="sm" text={assignment!.url} variant="outline" />
-              </div>
+          <div className="flex flex-col gap-3">
+            <Label asChild>
+              <a className="hover:underline" href={assignment?.url} rel="noreferrer" target="_blank">
+                {t('datahub.assignments.link')}
+              </a>
+            </Label>
+            <div className="flex gap-2">
+              <Input readOnly className="h-9" id="link" value={assignment?.url} />
+              <CopyButton size="sm" text={assignment?.url ?? ''} variant="outline" />
             </div>
-          )}
+            <QRCode url={assignment?.url ?? 'javascript:void(0)'} />
+          </div>
         </Sheet.Body>
         <Sheet.Footer>
           <Button