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

@@ -0,0 +1,127 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+import { FolderIcon, PlusIcon } from "@/components/icons";
+import { createFolder } from "@/lib/folders";
+import type { Folder } from "@/lib/schemas";
+import { cn } from "@/lib/utils";
+
+export const ALL_FOLDERS = "all";
+
+/**
+ * Folder switcher. Reads like a row of quiet pills (ChatGPT sidebar items):
+ * the active one is filled, the rest are text with a hover wash.
+ */
+export function FolderBar({
+  folders,
+  counts,
+  selected,
+  onSelect,
+  onCreated,
+  className,
+}: {
+  folders: Folder[];
+  counts: Record<string, number>;
+  selected: string;
+  onSelect: (id: string) => void;
+  onCreated: (id: string) => void;
+  className?: string;
+}) {
+  const [creating, setCreating] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const submit = () => {
+    const result = createFolder(draft);
+    if ("error" in result) {
+      setError(result.error);
+      return;
+    }
+    onCreated(result.folder.id);
+    setDraft("");
+    setError(null);
+    setCreating(false);
+  };
+
+  const pill = (active: boolean) =>
+    cn(
+      "inline-flex shrink-0 items-center gap-2 rounded-full px-3.5 py-1.5 text-[13px] font-medium transition",
+      active
+        ? "bg-[var(--surface-sunken)] text-[var(--text)]"
+        : "text-[var(--text-muted)] hover:bg-[var(--hover)] hover:text-[var(--text)]",
+    );
+
+  return (
+    <div className={cn("no-scrollbar -mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0", className)}>
+      <div className="flex items-center gap-1.5">
+        <button
+          type="button"
+          onClick={() => onSelect(ALL_FOLDERS)}
+          aria-pressed={selected === ALL_FOLDERS}
+          className={pill(selected === ALL_FOLDERS)}
+        >
+          All decks
+        </button>
+
+        {folders.map((folder) => (
+          <button
+            key={folder.id}
+            type="button"
+            onClick={() => onSelect(folder.id)}
+            aria-pressed={selected === folder.id}
+            className={pill(selected === folder.id)}
+          >
+            <FolderIcon className="size-4 opacity-80" />
+            {folder.name}
+            <span className={cn("tabular-nums", selected === folder.id ? "opacity-70" : "text-[var(--text-subtle)]")}>
+              {counts[folder.id] ?? 0}
+            </span>
+          </button>
+        ))}
+
+        {creating ? (
+          <span className="inline-flex shrink-0 items-center gap-1 rounded-full border border-[var(--hairline)] bg-[var(--surface-strong)] py-1 pl-3 pr-1">
+            <input
+              ref={inputRef}
+              autoFocus
+              value={draft}
+              onChange={(event) => setDraft(event.target.value)}
+              onKeyDown={(event) => {
+                event.stopPropagation();
+                if (event.key === "Enter") submit();
+                if (event.key === "Escape") {
+                  setCreating(false);
+                  setDraft("");
+                  setError(null);
+                }
+              }}
+              placeholder="Folder name"
+              aria-label="New folder name"
+              maxLength={60}
+              className="w-28 bg-transparent text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)]"
+            />
+            <button
+              type="button"
+              onClick={submit}
+              className="btn-primary h-7 px-3 text-[12px]"
+            >
+              Add
+            </button>
+          </span>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setCreating(true)}
+            className="inline-flex shrink-0 items-center gap-2 rounded-full px-3.5 py-1.5 text-[13px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
+          >
+            <PlusIcon className="size-4" />
+            New folder
+          </button>
+        )}
+      </div>
+      {error ? <p className="pt-1 text-xs font-medium text-rose-600 dark:text-rose-300">{error}</p> : null}
+    </div>
+  );
+}