Show page thumbnails, lightbox, and reasoning on quiz cards (#60)

nicpottier · web-flow · commit e07ef6bd4f8a · 2026-02-17T13:54:13.000-08:00
* Add page thumbnails, lightbox, and reasoning to quiz cards

* Improve quiz page preview UX and resilience
diff --git a/apps/studio/src/components/v2/steps/QuizzesView.tsx b/apps/studio/src/components/v2/steps/QuizzesView.tsx
@@ -1,14 +1,17 @@
 import { useState, useEffect, useRef, useCallback } from "react"
-import { Check, CheckCircle2, XCircle, ChevronDown, Loader2 } from "lucide-react"
+import { Check, CheckCircle2, XCircle, ChevronDown, Loader2, ImageOff } from "lucide-react"
 import { useQueryClient } from "@tanstack/react-query"
 import { api } from "@/api/client"
 import type { QuizGenerationOutput, VersionEntry } from "@/api/client"
 import { useQuizzes } from "@/hooks/use-quizzes"
+import { usePageImage } from "@/hooks/use-pages"
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"
 import { useStepHeader } from "../StepViewRouter"
 import { useStepRun } from "@/hooks/use-step-run"
 import { useApiKey } from "@/hooks/use-api-key"
 import { StepRunCard } from "../StepRunCard"
 import { STEP_DESCRIPTIONS } from "../StepSidebar"
+import { getRequestedPageId, getQuizImageRenderState } from "./quizzes-image-state"
 
 const QUIZZES_SUB_STEPS = [
   { key: "quiz-generation", label: "Generate Quizzes" },
@@ -131,6 +134,142 @@ function VersionPicker({
   )
 }
 
+function PageThumb({
+  bookLabel,
+  pageId,
+  onClick,
+}: {
+  bookLabel: string
+  pageId: string
+  onClick: () => void
+}) {
+  const [requestImage, setRequestImage] = useState(false)
+  const ref = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (requestImage) return
+    if (typeof IntersectionObserver === "undefined") {
+      setRequestImage(true)
+      return
+    }
+    const element = ref.current
+    if (!element) return
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setRequestImage(true)
+          observer.disconnect()
+        }
+      },
+      { rootMargin: "200px" }
+    )
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [requestImage])
+
+  const { data: imageData, isLoading, isError } = usePageImage(
+    bookLabel,
+    getRequestedPageId(pageId, requestImage)
+  )
+  const imageState = getQuizImageRenderState({
+    isRequested: requestImage,
+    isLoading,
+    isError,
+    hasImage: !!imageData,
+  })
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      onClick={onClick}
+      onMouseEnter={() => setRequestImage(true)}
+      onFocus={() => setRequestImage(true)}
+      aria-label={`Open page preview for ${pageId}`}
+      className="shrink-0 rounded border border-border bg-muted/40 overflow-hidden hover:ring-2 hover:ring-ring transition-shadow cursor-pointer"
+    >
+      {imageState === "ready" ? (
+        <img
+          src={`data:image/png;base64,${imageData!.imageBase64}`}
+          alt={`Page ${pageId}`}
+          loading="lazy"
+          className="h-44 w-auto block"
+        />
+      ) : imageState === "error" ? (
+        <div className="h-44 w-32 flex flex-col items-center justify-center gap-1 text-[10px] text-muted-foreground">
+          <ImageOff className="h-4 w-4" />
+          <span>No image</span>
+        </div>
+      ) : (
+        <div className="h-44 w-32 flex items-center justify-center px-2 text-[10px] text-muted-foreground">
+          Page {pageId}
+        </div>
+      )}
+    </button>
+  )
+}
+
+function PageLightbox({
+  bookLabel,
+  pageId,
+  open,
+  onOpenChange,
+}: {
+  bookLabel: string
+  pageId: string | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const isRequested = open && !!pageId
+  const queryPageId = getRequestedPageId(pageId ?? "", isRequested)
+  const { data: imageData, isLoading, isError, refetch } = usePageImage(bookLabel, queryPageId)
+  const imageState = getQuizImageRenderState({
+    isRequested,
+    isLoading,
+    isError,
+    hasImage: !!imageData,
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {pageId && (
+        <DialogContent className="w-auto max-w-[95vw] overflow-hidden gap-2 p-2 sm:max-w-[90vw] bg-white">
+          <DialogTitle className="sr-only">Page preview {pageId}</DialogTitle>
+          <DialogDescription className="sr-only">
+            Full-size source page preview for the selected quiz.
+          </DialogDescription>
+          <div className="flex max-h-[90vh] max-w-[90vw] items-center justify-center overflow-hidden rounded-md bg-muted/20">
+            {imageState === "ready" ? (
+              <img
+                src={`data:image/png;base64,${imageData!.imageBase64}`}
+                alt={`Page ${pageId}`}
+                className="max-h-[90vh] max-w-[90vw] object-contain"
+              />
+            ) : imageState === "error" ? (
+              <div className="flex h-64 w-52 flex-col items-center justify-center gap-2 text-sm text-muted-foreground">
+                <ImageOff className="h-5 w-5" />
+                <span>Image unavailable</span>
+                <button
+                  type="button"
+                  onClick={() => void refetch()}
+                  className="rounded border px-2 py-0.5 text-xs hover:bg-muted transition-colors cursor-pointer"
+                >
+                  Retry
+                </button>
+              </div>
+            ) : (
+              <div className="flex h-64 w-52 items-center justify-center gap-2 text-sm text-muted-foreground">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span>Loading image...</span>
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      )}
+    </Dialog>
+  )
+}
+
 export function QuizzesView({ bookLabel }: { bookLabel: string }) {
   const queryClient = useQueryClient()
   const { data, isLoading } = useQuizzes(bookLabel)
@@ -150,6 +289,7 @@ export function QuizzesView({ bookLabel }: { bookLabel: string }) {
 
   const [pending, setPending] = useState<QuizData | null>(null)
   const [saving, setSaving] = useState(false)
+  const [lightboxPageId, setLightboxPageId] = useState<string | null>(null)
 
   // Reset pending when data changes
   useEffect(() => {
@@ -258,14 +398,23 @@ export function QuizzesView({ bookLabel }: { bookLabel: string }) {
     <div className="space-y-2">
       {quizzes.map((quiz, idx) => (
         <div key={idx} className="rounded-md border bg-card overflow-hidden">
-          <div className="px-4 py-3 flex items-start justify-between gap-3">
+          <div className="flex flex-wrap items-center gap-1.5 px-4 py-2 bg-muted/20 border-b">
+            {quiz.pageIds.length > 0 ? (
+              quiz.pageIds.map((pageId) => (
+                <PageThumb key={pageId} bookLabel={bookLabel} pageId={pageId} onClick={() => setLightboxPageId(pageId)} />
+              ))
+            ) : (
+              <span className="text-xs text-muted-foreground">After {quiz.afterPageId}</span>
+            )}
+          </div>
+          <div className="px-4 py-3">
             <textarea
               value={quiz.question}
               onChange={(e) => updateQuestion(idx, e.target.value)}
-              className="flex-1 text-sm font-medium resize-none rounded border border-transparent bg-transparent p-1 -m-1 hover:border-border hover:bg-muted/30 focus:border-ring focus:bg-white focus:outline-none focus:ring-1 focus:ring-ring transition-colors"
+              className="w-full text-sm font-medium resize-none rounded border border-transparent bg-transparent p-1 -m-1 hover:border-border hover:bg-muted/30 focus:border-ring focus:bg-white focus:outline-none focus:ring-1 focus:ring-ring transition-colors"
               rows={1}
             />
-            <span className="text-[10px] text-muted-foreground shrink-0 mt-1.5">
+            <span className="text-[10px] text-muted-foreground mt-1 inline-block">
               After {quiz.afterPageId}
             </span>
           </div>
@@ -300,9 +449,20 @@ export function QuizzesView({ bookLabel }: { bookLabel: string }) {
                 </div>
               </div>
             ))}
+            {quiz.reasoning && (
+              <p className="text-xs italic text-muted-foreground px-1 pt-1">{quiz.reasoning}</p>
+            )}
           </div>
         </div>
       ))}
+      <PageLightbox
+        bookLabel={bookLabel}
+        pageId={lightboxPageId}
+        open={lightboxPageId != null}
+        onOpenChange={(open) => {
+          if (!open) setLightboxPageId(null)
+        }}
+      />
     </div>
   )
 }
diff --git a/apps/studio/src/components/v2/steps/quizzes-image-state.test.ts b/apps/studio/src/components/v2/steps/quizzes-image-state.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest"
+import { getQuizImageRenderState, getRequestedPageId } from "./quizzes-image-state"
+
+describe("getRequestedPageId", () => {
+  it("returns empty page id when image is not requested", () => {
+    expect(getRequestedPageId("pg001", false)).toBe("")
+  })
+
+  it("returns source page id when image is requested", () => {
+    expect(getRequestedPageId("pg001", true)).toBe("pg001")
+  })
+})
+
+describe("getQuizImageRenderState", () => {
+  it("returns idle before a request starts", () => {
+    expect(
+      getQuizImageRenderState({
+        isRequested: false,
+        isLoading: false,
+        isError: false,
+        hasImage: false,
+      })
+    ).toBe("idle")
+  })
+
+  it("returns loading while query is in progress", () => {
+    expect(
+      getQuizImageRenderState({
+        isRequested: true,
+        isLoading: true,
+        isError: false,
+        hasImage: false,
+      })
+    ).toBe("loading")
+  })
+
+  it("returns error when query fails", () => {
+    expect(
+      getQuizImageRenderState({
+        isRequested: true,
+        isLoading: false,
+        isError: true,
+        hasImage: false,
+      })
+    ).toBe("error")
+  })
+
+  it("returns ready when image payload exists", () => {
+    expect(
+      getQuizImageRenderState({
+        isRequested: true,
+        isLoading: false,
+        isError: false,
+        hasImage: true,
+      })
+    ).toBe("ready")
+  })
+})
diff --git a/apps/studio/src/components/v2/steps/quizzes-image-state.ts b/apps/studio/src/components/v2/steps/quizzes-image-state.ts
@@ -0,0 +1,23 @@
+export type QuizImageRenderState = "idle" | "loading" | "error" | "ready"
+
+export function getRequestedPageId(pageId: string, isRequested: boolean): string {
+  return isRequested ? pageId : ""
+}
+
+export function getQuizImageRenderState({
+  isRequested,
+  isLoading,
+  isError,
+  hasImage,
+}: {
+  isRequested: boolean
+  isLoading: boolean
+  isError: boolean
+  hasImage: boolean
+}): QuizImageRenderState {
+  if (!isRequested) return "idle"
+  if (hasImage) return "ready"
+  if (isError) return "error"
+  if (isLoading) return "loading"
+  return "loading"
+}
