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.
This commit is contained in:
parent
3baa0fa8ce
commit
3ea2cea100
83 changed files with 10909 additions and 165 deletions
332
components/LibraryScreen.tsx
Normal file
332
components/LibraryScreen.tsx
Normal file
|
|
@ -0,0 +1,332 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useMemo, useRef, useState, useSyncExternalStore } from "react";
|
||||
|
||||
import { ApiKeyBanner } from "@/components/ApiKeyBanner";
|
||||
import { DeckCard } from "@/components/DeckCard";
|
||||
import { FolderBar } from "@/components/FolderBar";
|
||||
import { FolderIcon, UploadIcon } from "@/components/icons";
|
||||
import { Button, EmptyState } from "@/components/ui";
|
||||
import { folderStore, renameFolder } from "@/lib/folders";
|
||||
import { ALL_FOLDERS, folderSelection, useSelectedFolder } from "@/lib/nav";
|
||||
import { openSettings } from "@/lib/ui-events";
|
||||
import { UNORGANIZED_ID, type Deck } from "@/lib/schemas";
|
||||
import { deckStore, deleteFolder, importDeck, sortDecks, upsertDeck } from "@/lib/storage";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Dashboard: page title, folder pills, then a spacious responsive grid of
|
||||
* deck cards grouped by folder.
|
||||
*/
|
||||
export function LibraryScreen() {
|
||||
const decks = useSyncExternalStore(deckStore.subscribe, deckStore.getSnapshot, deckStore.getServerSnapshot);
|
||||
const folders = useSyncExternalStore(
|
||||
folderStore.subscribe,
|
||||
folderStore.getSnapshot,
|
||||
folderStore.getServerSnapshot,
|
||||
);
|
||||
const selected = useSelectedFolder();
|
||||
const setSelected = folderSelection.set;
|
||||
const [message, setMessage] = useState<{ tone: "ok" | "error"; text: string } | null>(null);
|
||||
const [editingFolder, setEditingFolder] = useState<{ id: string; name: string } | null>(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
|
||||
const importRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const sorted = useMemo(() => sortDecks(decks), [decks]);
|
||||
const folderList = useMemo(
|
||||
() => [...folders].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" })),
|
||||
[folders],
|
||||
);
|
||||
|
||||
const counts = useMemo(() => {
|
||||
const map: Record<string, number> = {};
|
||||
for (const folder of folderList) map[folder.id] = 0;
|
||||
for (const deck of decks) {
|
||||
const key = deck.folderId && map[deck.folderId] !== undefined ? deck.folderId : UNORGANIZED_ID;
|
||||
map[key] = (map[key] ?? 0) + 1;
|
||||
}
|
||||
return map;
|
||||
}, [decks, folderList]);
|
||||
|
||||
const groups = useMemo(() => {
|
||||
const unorganized: { id: string; name: string; decks: Deck[]; virtual: boolean } = {
|
||||
id: UNORGANIZED_ID,
|
||||
name: "Unorganized",
|
||||
decks: sorted.filter((deck) => !deck.folderId),
|
||||
virtual: true,
|
||||
};
|
||||
|
||||
if (selected === UNORGANIZED_ID) return [unorganized];
|
||||
if (selected !== ALL_FOLDERS) {
|
||||
const folder = folderList.find((entry) => entry.id === selected);
|
||||
if (!folder) return [unorganized];
|
||||
return [
|
||||
{ id: folder.id, name: folder.name, decks: sorted.filter((deck) => deck.folderId === folder.id), virtual: false },
|
||||
];
|
||||
}
|
||||
|
||||
const named = folderList.map((folder) => ({
|
||||
id: folder.id,
|
||||
name: folder.name,
|
||||
decks: sorted.filter((deck) => deck.folderId === folder.id),
|
||||
virtual: false,
|
||||
}));
|
||||
return [...named, unorganized];
|
||||
}, [folderList, selected, sorted]);
|
||||
|
||||
const totalActivities = decks.reduce((sum, deck) => sum + deck.activities.length, 0);
|
||||
const bestEver = decks.reduce((best, deck) => Math.max(best, deck.bestScore ?? 0), 0);
|
||||
const played = decks.some((deck) => deck.attempts > 0);
|
||||
|
||||
const handleImport = async (file: File | undefined) => {
|
||||
if (!file) return;
|
||||
try {
|
||||
const text = await file.text();
|
||||
const result = importDeck(text);
|
||||
if ("error" in result) setMessage({ tone: "error", text: result.error });
|
||||
else setMessage({ tone: "ok", text: `Imported “${result.deck.title}”.` });
|
||||
} catch {
|
||||
setMessage({ tone: "error", text: "Could not read that file." });
|
||||
}
|
||||
};
|
||||
|
||||
const removeFolderEverywhere = (folderId: string) => {
|
||||
deleteFolder(folderId);
|
||||
setConfirmDelete(null);
|
||||
setSelected(ALL_FOLDERS);
|
||||
setMessage({ tone: "ok", text: "Folder deleted — its decks moved to Unorganized." });
|
||||
};
|
||||
|
||||
const isEmpty = sorted.length === 0 && folderList.length === 0;
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* page header ---------------------------------------------------- */}
|
||||
<section className="mb-6 space-y-5">
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-[24px] font-medium leading-tight tracking-[-0.01em] text-[var(--text)] sm:text-[26px]">
|
||||
Your icebox
|
||||
</h1>
|
||||
<p className="mt-1.5 text-[13.5px] text-[var(--text-subtle)]">
|
||||
Decks frozen from your notes, saved in this browser.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button variant="secondary" size="md" onClick={() => importRef.current?.click()}>
|
||||
<UploadIcon className="size-4" />
|
||||
Import JSON
|
||||
</Button>
|
||||
<input
|
||||
ref={importRef}
|
||||
type="file"
|
||||
accept="application/json,.json"
|
||||
className="sr-only"
|
||||
onChange={(event) => {
|
||||
void handleImport(event.target.files?.[0]);
|
||||
event.target.value = "";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary stats folded into the header as quiet text on desktop,
|
||||
where the sidebar already shows per-folder counts. */}
|
||||
{decks.length > 0 ? (
|
||||
<p className="text-[13px] text-[var(--text-subtle)] lg:hidden">
|
||||
{decks.length} {decks.length === 1 ? "deck" : "decks"}
|
||||
<span aria-hidden> · </span>
|
||||
{folderList.length} {folderList.length === 1 ? "folder" : "folders"}
|
||||
<span aria-hidden> · </span>
|
||||
{totalActivities} activities
|
||||
{played ? (
|
||||
<>
|
||||
<span aria-hidden> · </span>
|
||||
best {bestEver}%
|
||||
</>
|
||||
) : null}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{/* Mobile folder switcher; the sidebar covers desktop. */}
|
||||
<FolderBar className="lg:hidden"
|
||||
folders={folderList}
|
||||
counts={counts}
|
||||
selected={selected}
|
||||
onSelect={(id) => {
|
||||
setSelected(id);
|
||||
setConfirmDelete(null);
|
||||
}}
|
||||
onCreated={(id) => {
|
||||
setSelected(id);
|
||||
setMessage({
|
||||
tone: "ok",
|
||||
text: "Folder created — decks you freeze while it's selected land here.",
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<ApiKeyBanner />
|
||||
|
||||
{message ? (
|
||||
<p
|
||||
role="status"
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-xl border border-[var(--hairline)] bg-[var(--surface)] px-3.5 py-2.5 text-[13px] font-medium",
|
||||
message.tone === "ok" ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300",
|
||||
)}
|
||||
>
|
||||
{message.text}
|
||||
</p>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
{/* deck grid ------------------------------------------------------ */}
|
||||
{isEmpty ? (
|
||||
<EmptyState
|
||||
title="No decks yet"
|
||||
action={
|
||||
<Link href="/create" className="btn-primary h-10 px-4 text-sm">
|
||||
Make your first deck
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
Freeze a page of notes into a feed of flashcards and quizzes.
|
||||
<span className="mt-3 block text-[12.5px] text-[var(--text-subtle)]">
|
||||
Using your own Ollama models —{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={openSettings}
|
||||
className="font-medium text-[var(--text-muted)] underline underline-offset-2 hover:text-[var(--text)]"
|
||||
>
|
||||
check the connection in Settings
|
||||
</button>
|
||||
.
|
||||
</span>
|
||||
</EmptyState>
|
||||
) : (
|
||||
<div className="space-y-8">
|
||||
{groups.map((group) => {
|
||||
const isEditing = editingFolder?.id === group.id;
|
||||
return (
|
||||
<section key={group.id} aria-label={group.name}>
|
||||
{/* group header -------------------------------------- */}
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<FolderIcon className="size-4 shrink-0 text-[var(--text-subtle)]" />
|
||||
|
||||
{isEditing && editingFolder ? (
|
||||
<span className="flex flex-1 items-center gap-2">
|
||||
<input
|
||||
autoFocus
|
||||
value={editingFolder.name}
|
||||
onChange={(event) => setEditingFolder({ ...editingFolder, name: event.target.value })}
|
||||
onKeyDown={(event) => {
|
||||
event.stopPropagation();
|
||||
if (event.key === "Enter") {
|
||||
const result = renameFolder(editingFolder.id, editingFolder.name);
|
||||
if ("error" in result) setMessage({ tone: "error", text: result.error });
|
||||
else setEditingFolder(null);
|
||||
}
|
||||
if (event.key === "Escape") setEditingFolder(null);
|
||||
}}
|
||||
aria-label="Folder name"
|
||||
maxLength={60}
|
||||
className="min-w-32 max-w-xs flex-1 rounded-lg border border-[var(--hairline)] bg-[var(--surface-strong)] px-2.5 py-1.5 text-[15px] font-semibold text-[var(--text)] outline-none focus:border-accent-400"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const result = renameFolder(editingFolder.id, editingFolder.name);
|
||||
if ("error" in result) setMessage({ tone: "error", text: result.error });
|
||||
else setEditingFolder(null);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelected(group.virtual ? UNORGANIZED_ID : group.id)}
|
||||
className="truncate text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]"
|
||||
>
|
||||
{group.name}
|
||||
<span className="ml-2 text-[13px] font-normal tabular-nums text-[var(--text-subtle)]">
|
||||
{group.decks.length}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{!group.virtual && !isEditing ? (
|
||||
<div className="flex items-center gap-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setEditingFolder({ id: group.id, name: group.name })}
|
||||
className="rounded-lg px-2 py-1 text-[12.5px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
Rename
|
||||
</button>
|
||||
{confirmDelete === group.id ? (
|
||||
<>
|
||||
<Button size="sm" variant="danger" onClick={() => removeFolderEverywhere(group.id)}>
|
||||
Delete
|
||||
</Button>
|
||||
<Button size="sm" variant="ghost" onClick={() => setConfirmDelete(null)}>
|
||||
Cancel
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmDelete(group.id)}
|
||||
className="rounded-lg px-2 py-1 text-[12.5px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-rose-600 dark:hover:text-rose-300"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{confirmDelete === group.id ? (
|
||||
<p className="mb-3 text-[12.5px] text-[var(--text-muted)]">
|
||||
The {group.decks.length} deck{group.decks.length === 1 ? "" : "s"} inside will move to
|
||||
Unorganized — nothing is deleted.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{group.decks.length === 0 ? (
|
||||
<div className="rounded-2xl border border-dashed border-[var(--hairline)] px-5 py-8 text-center text-[13px] text-[var(--text-subtle)]">
|
||||
{group.virtual
|
||||
? "Nothing unfiled right now."
|
||||
: "Empty folder — freeze a deck into it or move one over from Unorganized."}
|
||||
</div>
|
||||
) : (
|
||||
<ul className="grid list-none grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4">
|
||||
{group.decks.map((deck) => (
|
||||
<DeckCard
|
||||
key={deck.id}
|
||||
deck={deck}
|
||||
onMove={(folderId) => {
|
||||
upsertDeck({ ...deck, folderId });
|
||||
setMessage({
|
||||
tone: "ok",
|
||||
text: folderId ? "Deck moved." : "Deck moved to Unorganized.",
|
||||
});
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue