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

@@ -0,0 +1,151 @@
+"use client";
+
+import { forwardRef } from "react";
+
+import { SnowflakeIcon } from "@/components/icons";
+import { cn } from "@/lib/utils";
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success";
+type ButtonSize = "sm" | "md" | "lg";
+
+/**
+ * ChatGPT-flavoured buttons: pill-shaped, near-black primary in light mode and
+ * white in dark mode, quiet secondaries with hairline borders.
+ */
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  ghost: "btn-ghost",
+  danger: "btn-primary !bg-rose-600 hover:!bg-rose-700 dark:!bg-rose-500 dark:!text-white dark:hover:!bg-rose-600",
+  success: "btn-primary !bg-emerald-600 hover:!bg-emerald-700 dark:!bg-emerald-500 dark:!text-white dark:hover:!bg-emerald-600",
+};
+
+const SIZES: Record<ButtonSize, string> = {
+  sm: "h-9 px-3.5 text-[13px] rounded-full",
+  md: "h-10 px-4 text-sm rounded-full",
+  lg: "h-11 px-5 text-[15px] rounded-full",
+};
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { className, variant = "primary", size = "md", loading, children, disabled, ...props },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      disabled={disabled || loading}
+      className={cn(
+        "inline-flex select-none items-center justify-center whitespace-nowrap font-medium transition disabled:cursor-not-allowed disabled:opacity-40",
+        VARIANTS[variant],
+        SIZES[size],
+        className,
+      )}
+      {...props}
+    >
+      {loading ? <Spinner className="size-4" /> : null}
+      {children}
+    </button>
+  );
+});
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <svg className={cn("animate-spin", className)} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
+      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+/** Small neutral pill. Colour is reserved for meaning, not decoration. */
+export function Chip({
+  children,
+  className,
+  tone = "neutral",
+}: {
+  children: React.ReactNode;
+  className?: string;
+  tone?: "neutral" | "accent" | "success" | "warning" | "danger";
+}) {
+  const tones: Record<string, string> = {
+    neutral: "bg-[var(--surface-sunken)] text-[var(--text-muted)]",
+    accent: "bg-accent-500/12 text-accent-700 dark:text-accent-200",
+    success: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
+    warning: "bg-amber-500/14 text-amber-800 dark:text-amber-300",
+    danger: "bg-rose-500/12 text-rose-700 dark:text-rose-300",
+  };
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[12px] font-medium leading-none",
+        tones[tone],
+        className,
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function ProgressBar({
+  value,
+  max,
+  className,
+  label,
+}: {
+  value: number;
+  max: number;
+  className?: string;
+  label?: string;
+}) {
+  const percent = max <= 0 ? 0 : Math.min(100, Math.max(0, (value / max) * 100));
+  return (
+    <div
+      className={cn("h-1 w-full overflow-hidden rounded-full bg-[var(--surface-sunken)]", className)}
+      role="progressbar"
+      aria-valuenow={Math.round(percent)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label ?? "Progress"}
+    >
+      <div
+        className="h-full rounded-full bg-[var(--text)]/75 transition-[width] duration-500 ease-out"
+        style={{ width: `${percent}%` }}
+      />
+    </div>
+  );
+}
+
+export function EmptyState({
+  title,
+  children,
+  icon,
+  action,
+}: {
+  title: string;
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+}) {
+  return (
+    <div className="animate-rise flex flex-col items-center px-6 py-16 text-center sm:py-24">
+      <span
+        className="mb-4 grid size-12 place-items-center rounded-2xl border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-subtle)]"
+        aria-hidden
+      >
+        {icon ?? <SnowflakeIcon className="size-6" />}
+      </span>
+      <h2 className="text-[17px] font-semibold tracking-[-0.01em] text-[var(--text)]">{title}</h2>
+      {children ? (
+        <p className="mt-2 max-w-md text-sm leading-relaxed text-[var(--text-muted)]">{children}</p>
+      ) : null}
+      {action ? <div className="mt-6">{action}</div> : null}
+    </div>
+  );
+}