Freezmo: self-hosted notes-to-activities study app

Next.js 15 app that turns photos, PDFs, DOCX/PPTX and text into a swipeable
feed of AI-generated activities (flashcards, multiple choice, true/false,
fill-in-the-blank, matching, ordering, short answer) using the user's own
Ollama models.

Highlights:
- All AI calls run in server route handlers; the browser never talks to Ollama.
- Bring-your-own-key mode (default): the key lives only in the browser and is
  sent per-request; server, local-daemon and shared-key modes also supported.
- Client-side document extraction (pdf.js, mammoth, jszip) with scanned-PDF
  page rendering for the vision model; notes stay in their original language.
- ChatGPT-style shell: collapsible sidebar / mobile drawer, neutral token-based
  light + dark themes, folder organisation, PWA (manifest, SW, offline page).
- Strict JSON validation with zod + auto-repair, rate limiting, and request
  guards (cross-origin, body-size, API-key sanitising).
- setup.sh bootstraps deps, .env.local and a production build.

Gitignore excludes .env*, the generated pdf.js worker and local scratch files.

components/activities/Matching.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import type { Activity } from "@/lib/schemas";
+import { cn, shuffle } from "@/lib/utils";
+
+import {
+  ActivityHeader,
+  FeedbackPanel,
+  Hint,
+  PromptCard,
+  type ActivityComponentProps,
+} from "./shared";
+
+type MatchingActivity = Extract<Activity, { type: "matching" }>;
+
+export function Matching({ activity, onAnswered, onNext, isLast }: ActivityComponentProps<MatchingActivity>) {
+  const terms = useMemo(
+    () => shuffle(activity.pairs.map((pair, index) => ({ index, text: pair.term }))),
+    [activity],
+  );
+  const definitions = useMemo(
+    () => shuffle(activity.pairs.map((pair, index) => ({ index, text: pair.definition }))),
+    [activity],
+  );
+
+  const [selectedTerm, setSelectedTerm] = useState<number | null>(null);
+  const [matched, setMatched] = useState<number[]>([]);
+  const [misses, setMisses] = useState(0);
+  const [flash, setFlash] = useState<{ term: number; definition: number } | null>(null);
+  const [done, setDone] = useState(false);
+
+  const total = activity.pairs.length;
+  const complete = matched.length === total;
+
+  const onDefinitionTap = (definitionIndex: number) => {
+    if (done || selectedTerm === null || matched.includes(definitionIndex)) return;
+    if (selectedTerm === definitionIndex) {
+      const next = [...matched, definitionIndex];
+      setMatched(next);
+      setSelectedTerm(null);
+      if (next.length === total) {
+        const correct = misses === 0;
+        setDone(true);
+        onAnswered(correct);
+      }
+    } else {
+      setMisses((value) => value + 1);
+      setFlash({ term: selectedTerm, definition: definitionIndex });
+      window.setTimeout(() => setFlash(null), 500);
+      setSelectedTerm(null);
+    }
+  };
+
+  return (
+    <>
+      <ActivityHeader
+        type="matching"
+        topic={activity.topic}
+        extra={
+          <span className="rounded-full bg-white/70 px-3 py-1 text-xs font-bold text-slate-600 dark:bg-white/10 dark:text-slate-200">
+            {matched.length}/{total} matched
+          </span>
+        }
+      />
+      <PromptCard className="py-4">
+        <p className="text-lg font-bold text-frost-950 dark:text-frost-50">{activity.instruction}</p>
+        <Hint>
+          {done
+            ? "All matched!"
+            : selectedTerm === null
+              ? "Tap a term on the left, then its match on the right."
+              : "Now tap the matching definition →"}
+        </Hint>
+      </PromptCard>
+
+      <div className="grid grid-cols-2 gap-2.5">
+        <div className="flex flex-col gap-2.5">
+          {terms.map((term) => {
+            const isMatched = matched.includes(term.index);
+            const isSelected = selectedTerm === term.index;
+            const isFlashing = flash?.term === term.index;
+            return (
+              <button
+                key={`term-${term.index}`}
+                type="button"
+                disabled={isMatched || done}
+                onClick={() => setSelectedTerm(isSelected ? null : term.index)}
+                className={cn(
+                  "min-h-16 rounded-2xl border px-3 py-2 text-left text-sm font-semibold backdrop-blur-xl transition-all",
+                  isMatched
+                    ? "border-emerald-200/80 bg-emerald-50/85 text-emerald-800 dark:border-emerald-400/40 dark:bg-emerald-400/15 dark:text-emerald-100"
+                    : isSelected
+                      ? "border-accent-400 bg-accent-50/80 text-frost-900 dark:bg-accent-500/20 dark:text-white"
+                      : "border-white/60 bg-white/55 text-frost-950 hover:bg-white/80 dark:border-white/12 dark:bg-white/[0.07] dark:text-frost-50",
+                  isFlashing && "animate-wiggle border-rose-400 bg-rose-50 dark:bg-rose-400/15",
+                )}
+              >
+                <span className="mr-1">{isMatched ? "✓" : "•"}</span>
+                {term.text}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="flex flex-col gap-2.5">
+          {definitions.map((definition) => {
+            const isMatched = matched.includes(definition.index);
+            const isFlashing = flash?.definition === definition.index;
+            return (
+              <button
+                key={`def-${definition.index}`}
+                type="button"
+                disabled={isMatched || done || selectedTerm === null}
+                onClick={() => onDefinitionTap(definition.index)}
+                className={cn(
+                  "min-h-16 rounded-2xl border-2 px-3 py-2 text-left text-sm transition-all",
+                  isMatched
+                    ? "border-emerald-200/80 bg-emerald-50/85 text-emerald-800 dark:border-emerald-400/40 dark:bg-emerald-400/15 dark:text-emerald-100"
+                    : "border-white/60 bg-white/55 text-frost-700 hover:bg-white/80 disabled:opacity-60 dark:border-white/12 dark:bg-white/[0.07] dark:text-frost-200",
+                  isFlashing && "animate-wiggle border-rose-400 bg-rose-50 dark:bg-rose-400/15",
+                )}
+              >
+                {definition.text}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {complete ? (
+        <FeedbackPanel
+          correct={misses === 0}
+          explanation={activity.explanation}
+          xp={activity.xp}
+          isLast={isLast}
+          onNext={onNext}
+          headline={misses === 0 ? "Perfect match!" : "Matched — with a few slips"}
+          detail={
+            <span>
+              {misses === 0
+                ? "You matched everything first try."
+                : `You made ${misses} wrong ${misses === 1 ? "attempt" : "attempts"}.`}
+            </span>
+          }
+        />
+      ) : null}
+    </>
+  );
+}