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
362
components/Sidebar.tsx
Normal file
362
components/Sidebar.tsx
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useMemo, useState, useSyncExternalStore } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
|
||||
import {
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
FolderIcon,
|
||||
GearIcon,
|
||||
LayersIcon,
|
||||
MoonIcon,
|
||||
PlusIcon,
|
||||
SnowflakeIcon,
|
||||
SunIcon,
|
||||
} from "@/components/icons";
|
||||
import { useTheme } from "@/components/ThemeToggle";
|
||||
import { createFolder, folderStore } from "@/lib/folders";
|
||||
import { ALL_FOLDERS, folderSelection, sidebarOpen, useSelectedFolder, useSidebarOpen } from "@/lib/nav";
|
||||
import { UNORGANIZED_ID } from "@/lib/schemas";
|
||||
import { deckStore } from "@/lib/storage";
|
||||
import { openSettings } from "@/lib/ui-events";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const COLLAPSE_KEY = "freezmo.sidebarCollapsed";
|
||||
|
||||
/** Shared nav content for the desktop rail and the mobile drawer. */
|
||||
function NavContent({ collapsed = false, onNavigate }: { collapsed?: boolean; onNavigate?: () => void }) {
|
||||
const decks = useSyncExternalStore(deckStore.subscribe, deckStore.getSnapshot, deckStore.getServerSnapshot);
|
||||
const folders = useSyncExternalStore(
|
||||
folderStore.subscribe,
|
||||
folderStore.getSnapshot,
|
||||
folderStore.getServerSnapshot,
|
||||
);
|
||||
const selected = useSelectedFolder();
|
||||
const { theme, toggle } = useTheme();
|
||||
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [draft, setDraft] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const sortedFolders = useMemo(
|
||||
() => [...folders].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" })),
|
||||
[folders],
|
||||
);
|
||||
|
||||
const counts = useMemo(() => {
|
||||
const map: Record<string, number> = { [UNORGANIZED_ID]: 0 };
|
||||
for (const folder of sortedFolders) 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, sortedFolders]);
|
||||
|
||||
const submit = () => {
|
||||
const result = createFolder(draft);
|
||||
if ("error" in result) {
|
||||
setError(result.error);
|
||||
return;
|
||||
}
|
||||
folderSelection.set(result.folder.id);
|
||||
setDraft("");
|
||||
setError(null);
|
||||
setCreating(false);
|
||||
};
|
||||
|
||||
const select = (id: string) => {
|
||||
folderSelection.set(id);
|
||||
onNavigate?.();
|
||||
};
|
||||
|
||||
/** Counts of 0 are noise — only show a count when there is something in it. */
|
||||
const count = (value: number) =>
|
||||
!collapsed && value > 0 ? <span className="text-[12px] tabular-nums opacity-60">{value}</span> : null;
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col">
|
||||
{/* brand ---------------------------------------------------------- */}
|
||||
<div className={cn("mb-1 flex items-center", collapsed ? "justify-center" : "justify-between")}>
|
||||
<Link
|
||||
href="/"
|
||||
onClick={onNavigate}
|
||||
className={cn("nav-row gap-2.5", collapsed ? "w-auto px-2" : "flex-1")}
|
||||
aria-label="Freezmo home"
|
||||
title="Freezmo"
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="grid size-7 shrink-0 place-items-center rounded-lg bg-[var(--text)] text-[var(--page)]"
|
||||
>
|
||||
<SnowflakeIcon className="size-4" />
|
||||
</span>
|
||||
{!collapsed ? (
|
||||
<span className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">Freezmo</span>
|
||||
) : null}
|
||||
</Link>
|
||||
{!collapsed ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => sidebarCollapse.set(true)}
|
||||
aria-label="Collapse sidebar"
|
||||
title="Collapse sidebar"
|
||||
className="grid size-8 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
<ChevronLeftIcon className="size-4" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{/* new deck: a quiet row, not a competing primary button ---------- */}
|
||||
<Link
|
||||
href="/create"
|
||||
onClick={onNavigate}
|
||||
className={cn("nav-row mb-3", collapsed && "justify-center px-2")}
|
||||
title="New deck"
|
||||
>
|
||||
<PlusIcon className="size-4 shrink-0" />
|
||||
{!collapsed ? <span className="flex-1 truncate text-left">New deck</span> : null}
|
||||
</Link>
|
||||
|
||||
{/* folders --------------------------------------------------------- */}
|
||||
{!collapsed ? (
|
||||
<div className="flex items-center justify-between px-2 pb-1">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-[var(--text-subtle)]">
|
||||
Folders
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreating(true)}
|
||||
aria-label="New folder"
|
||||
title="New folder"
|
||||
className="grid size-6 place-items-center rounded-md text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
|
||||
>
|
||||
<PlusIcon className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<nav aria-label="Folders" className="thin-scroll min-h-0 flex-1 space-y-0.5 overflow-y-auto">
|
||||
{collapsed ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => sidebarCollapse.set(false)}
|
||||
aria-label="Expand sidebar"
|
||||
title="Expand sidebar"
|
||||
className="nav-row justify-center px-2"
|
||||
>
|
||||
<ChevronRightIcon className="size-4" />
|
||||
</button>
|
||||
) : null}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => select(ALL_FOLDERS)}
|
||||
aria-pressed={selected === ALL_FOLDERS}
|
||||
title="All decks"
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
<LayersIcon className="size-4 shrink-0 opacity-70" />
|
||||
{!collapsed ? <span className="flex-1 truncate text-left">All decks</span> : null}
|
||||
{count(decks.length)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => select(UNORGANIZED_ID)}
|
||||
aria-pressed={selected === UNORGANIZED_ID}
|
||||
title="Unorganized"
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
<FolderIcon className="size-4 shrink-0 opacity-70" />
|
||||
{!collapsed ? <span className="flex-1 truncate text-left">Unorganized</span> : null}
|
||||
{count(counts[UNORGANIZED_ID] ?? 0)}
|
||||
</button>
|
||||
|
||||
{sortedFolders.map((folder) => (
|
||||
<button
|
||||
key={folder.id}
|
||||
type="button"
|
||||
onClick={() => select(folder.id)}
|
||||
aria-pressed={selected === folder.id}
|
||||
title={folder.name}
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
<FolderIcon className="size-4 shrink-0 opacity-70" />
|
||||
{!collapsed ? <span className="flex-1 truncate text-left">{folder.name}</span> : null}
|
||||
{count(counts[folder.id] ?? 0)}
|
||||
</button>
|
||||
))}
|
||||
|
||||
{creating && !collapsed ? (
|
||||
<div className="flex items-center gap-1 px-1 pt-1">
|
||||
<input
|
||||
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="min-w-0 flex-1 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] px-2.5 py-1.5 text-[13px] text-[var(--text)] outline-none focus:border-[var(--text-subtle)]"
|
||||
/>
|
||||
<button type="button" onClick={submit} className="btn-primary h-8 px-3 text-[12px]">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{error ? <p className="px-2 pt-1 text-[12px] text-rose-600 dark:text-rose-300">{error}</p> : null}
|
||||
</nav>
|
||||
|
||||
{/* footer ---------------------------------------------------------- */}
|
||||
<div className="mt-2 space-y-0.5 border-t border-[var(--hairline)] pt-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={openSettings}
|
||||
title="Settings"
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
<GearIcon className="size-4 shrink-0 opacity-70" />
|
||||
{!collapsed ? <span className="flex-1 truncate text-left">Settings</span> : null}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
title={theme === "dark" ? "Light mode" : "Dark mode"}
|
||||
className={cn("nav-row", collapsed && "justify-center px-2")}
|
||||
>
|
||||
{theme === "dark" ? (
|
||||
<SunIcon className="size-4 shrink-0 opacity-70" />
|
||||
) : (
|
||||
<MoonIcon className="size-4 shrink-0 opacity-70" />
|
||||
)}
|
||||
{!collapsed ? (
|
||||
<span className="flex-1 truncate text-left">{theme === "dark" ? "Light mode" : "Dark mode"}</span>
|
||||
) : null}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Collapsed state (shared between rail and drawer) */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
let collapsed = false;
|
||||
const collapseListeners = new Set<() => void>();
|
||||
|
||||
export const sidebarCollapse = {
|
||||
subscribe(listener: () => void): () => void {
|
||||
collapseListeners.add(listener);
|
||||
return () => collapseListeners.delete(listener);
|
||||
},
|
||||
getSnapshot(): boolean {
|
||||
return collapsed;
|
||||
},
|
||||
getServerSnapshot(): boolean {
|
||||
return false;
|
||||
},
|
||||
set(value: boolean): void {
|
||||
collapsed = value;
|
||||
try {
|
||||
window.localStorage.setItem(COLLAPSE_KEY, value ? "1" : "0");
|
||||
} catch {
|
||||
/* private mode */
|
||||
}
|
||||
collapseListeners.forEach((listener) => listener());
|
||||
},
|
||||
hydrate(): void {
|
||||
try {
|
||||
collapsed = window.localStorage.getItem(COLLAPSE_KEY) === "1";
|
||||
} catch {
|
||||
collapsed = false;
|
||||
}
|
||||
collapseListeners.forEach((listener) => listener());
|
||||
},
|
||||
};
|
||||
|
||||
function useCollapsed(): boolean {
|
||||
return useSyncExternalStore(
|
||||
sidebarCollapse.subscribe,
|
||||
sidebarCollapse.getSnapshot,
|
||||
sidebarCollapse.getServerSnapshot,
|
||||
);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Desktop rail + mobile drawer */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
export function Sidebar() {
|
||||
const isCollapsed = useCollapsed();
|
||||
|
||||
return (
|
||||
<aside
|
||||
aria-label="Sidebar"
|
||||
className={cn(
|
||||
"sidebar-surface fixed inset-y-0 left-0 z-40 hidden flex-col px-2.5 py-3 transition-[width] duration-200 lg:flex",
|
||||
isCollapsed ? "w-[68px]" : "w-[260px]",
|
||||
)}
|
||||
>
|
||||
<NavContent collapsed={isCollapsed} />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
export function MobileSidebar() {
|
||||
const open = useSidebarOpen();
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open ? (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex lg:hidden"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close menu"
|
||||
onClick={() => sidebarOpen.set(false)}
|
||||
className="absolute inset-0 bg-black/40 backdrop-blur-sm"
|
||||
/>
|
||||
<motion.aside
|
||||
aria-label="Menu"
|
||||
initial={{ x: -280 }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: -280 }}
|
||||
transition={{ type: "spring", stiffness: 380, damping: 36 }}
|
||||
className="sidebar-surface relative z-10 flex h-full w-[272px] flex-col px-2.5 py-3 pb-safe"
|
||||
>
|
||||
<NavContent onNavigate={() => sidebarOpen.set(false)} />
|
||||
</motion.aside>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
||||
/** Spacer so page content clears the fixed rail (desktop only). */
|
||||
export function SidebarOffset() {
|
||||
const isCollapsed = useCollapsed();
|
||||
return (
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn("hidden shrink-0 transition-[width] duration-200 lg:block", isCollapsed ? "w-[68px]" : "w-[260px]")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue