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/Ordering.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { Reorder } from "framer-motion";
+import { useMemo, useState } from "react";
+
+import type { Activity } from "@/lib/schemas";
+import { cn, shuffle } from "@/lib/utils";
+import { Button } from "@/components/ui";
+
+import {
+  ActivityHeader,
+  FeedbackPanel,
+  Hint,
+  PromptCard,
+  type ActivityComponentProps,
+} from "./shared";
+
+type OrderingActivity = Extract<Activity, { type: "ordering" }>;
+
+export function Ordering({ activity, onAnswered, onNext, isLast }: ActivityComponentProps<OrderingActivity>) {
+  const initial = useMemo(() => shuffle(activity.items), [activity]);
+  const [items, setItems] = useState<string[]>(initial);
+  const [checked, setChecked] = useState(false);
+  const [correct, setCorrect] = useState(false);
+
+  const isRight = (list: string[]) => list.every((item, index) => item === activity.items[index]);
+
+  const check = () => {
+    if (checked) return;
+    const result = isRight(items);
+    setChecked(true);
+    setCorrect(result);
+    onAnswered(result, { userAnswer: items.join(" → ") });
+  };
+
+  const move = (index: number, direction: -1 | 1) => {
+    if (checked) return;
+    const target = index + direction;
+    if (target < 0 || target >= items.length) return;
+    const next = [...items];
+    [next[index], next[target]] = [next[target], next[index]];
+    setItems(next);
+  };
+
+  return (
+    <>
+      <ActivityHeader type="ordering" topic={activity.topic} />
+      <PromptCard className="py-4">
+        <p className="text-lg font-bold text-frost-950 dark:text-frost-50">{activity.instruction}</p>
+        <Hint>
+          {checked ? "Here is the correct order:" : "Drag the cards, or use ▲▼, then check your order."}
+        </Hint>
+      </PromptCard>
+
+      {checked ? (
+        <ol className="flex flex-col gap-2.5">
+          {activity.items.map((item, index) => {
+            const wasRight = items[index] === item;
+            return (
+              <li
+                key={`solution-${item}`}
+                className={cn(
+                  "flex items-center gap-3 rounded-2xl border-2 px-4 py-3 text-sm font-semibold",
+                  wasRight
+                    ? "border-emerald-200/80 bg-emerald-50/85 text-emerald-900 dark:border-emerald-400/40 dark:bg-emerald-400/15 dark:text-emerald-100"
+                    : "border-rose-200/80 bg-rose-50/85 text-rose-900 dark:border-rose-400/40 dark:bg-rose-400/15 dark:text-rose-100",
+                )}
+              >
+                <span className="grid size-7 shrink-0 place-items-center rounded-full bg-white/70 text-xs font-extrabold dark:bg-white/15">
+                  {index + 1}
+                </span>
+                <span className="flex-1">{item}</span>
+              </li>
+            );
+          })}
+        </ol>
+      ) : (
+        <Reorder.Group axis="y" values={items} onReorder={setItems} className="flex flex-col gap-2.5">
+          {items.map((item, index) => (
+            <Reorder.Item
+              key={item}
+              value={item}
+              className="flex cursor-grab items-center gap-2 rounded-2xl border border-white/60 bg-white/60 px-3 py-3 text-sm font-semibold text-frost-950 shadow-sm backdrop-blur-xl active:cursor-grabbing dark:border-white/12 dark:bg-white/[0.08] dark:text-frost-50"
+            >
+              <span className="grid size-7 shrink-0 place-items-center rounded-full bg-frost-100 text-xs font-extrabold text-frost-700 dark:bg-white/15 dark:text-frost-100">
+                {index + 1}
+              </span>
+              <span className="flex-1">{item}</span>
+              <span className="flex flex-col">
+                <button
+                  type="button"
+                  aria-label={`Move "${item}" up`}
+                  onClick={() => move(index, -1)}
+                  disabled={index === 0}
+                  className="rounded px-1.5 text-xs text-frost-700 transition hover:bg-frost-100 disabled:opacity-30 dark:text-frost-100 dark:hover:bg-white/10"
+                >
+                  ▲
+                </button>
+                <button
+                  type="button"
+                  aria-label={`Move "${item}" down`}
+                  onClick={() => move(index, 1)}
+                  disabled={index === items.length - 1}
+                  className="rounded px-1.5 text-xs text-frost-700 transition hover:bg-frost-100 disabled:opacity-30 dark:text-frost-100 dark:hover:bg-white/10"
+                >
+                  ▼
+                </button>
+              </span>
+              <span aria-hidden className="text-slate-400">
+                ⠿
+              </span>
+            </Reorder.Item>
+          ))}
+        </Reorder.Group>
+      )}
+
+      {!checked ? (
+        <Button size="lg" onClick={check} disabled={items.length < 2}>
+          Check order
+        </Button>
+      ) : (
+        <FeedbackPanel
+          correct={correct}
+          explanation={activity.explanation}
+          xp={activity.xp}
+          isLast={isLast}
+          onNext={onNext}
+        />
+      )}
+    </>
+  );
+}