| "use client"; |
|
|
| import { useState, useEffect, useCallback, useTransition } from "react"; |
| import NoteCard from "./NoteCard"; |
| import NoteForm from "./NoteForm"; |
| import QueryBench from "./QueryBench"; |
| import DbInfo from "./DbInfo"; |
| import { |
| fetchNotes, |
| fetchStats, |
| createNote, |
| updateNote, |
| deleteNote, |
| type Note, |
| } from "@/lib/actions"; |
|
|
| type Stats = { |
| total: number; |
| pinned: number; |
| latest: Date | null; |
| colors: { color: string; count: number }[]; |
| }; |
|
|
| type Tab = "notes" | "bench" | "db"; |
|
|
| export default function NotesClient({ |
| initialNotes, |
| initialQueryMs, |
| initialStats, |
| initialStatsMs, |
| }: { |
| initialNotes: Note[]; |
| initialQueryMs: number; |
| initialStats: Stats; |
| initialStatsMs: number; |
| }) { |
| const [notes, setNotes] = useState(initialNotes); |
| const [stats, setStats] = useState(initialStats); |
| const [queryMs, setQueryMs] = useState(initialQueryMs); |
| const [statsMs, setStatsMs] = useState(initialStatsMs); |
| const [search, setSearch] = useState(""); |
| const [editing, setEditing] = useState<Note | null>(null); |
| const [showForm, setShowForm] = useState(false); |
| const [tab, setTab] = useState<Tab>("notes"); |
| const [isPending, startTransition] = useTransition(); |
| const [lastAction, setLastAction] = useState<{ name: string; ms: number } | null>(null); |
|
|
| const reload = useCallback(() => { |
| startTransition(async () => { |
| const [nr, sr] = await Promise.all([ |
| fetchNotes(search || undefined), |
| fetchStats(), |
| ]); |
| setNotes(nr.data); |
| setQueryMs(nr.ms); |
| setStats(sr.data); |
| setStatsMs(sr.ms); |
| }); |
| }, [search]); |
|
|
| useEffect(() => { reload(); }, [reload]); |
|
|
| const onSave = async (data: { title: string; content: string; color: string; pinned: boolean }) => { |
| const r = editing |
| ? await updateNote(editing.id, data) |
| : await createNote(data); |
| setLastAction({ name: editing ? "UPDATE" : "CREATE", ms: r.ms }); |
| setEditing(null); |
| setShowForm(false); |
| reload(); |
| }; |
|
|
| const onDel = async (id: string) => { |
| const r = await deleteNote(id); |
| setLastAction({ name: "DELETE", ms: r.ms }); |
| reload(); |
| }; |
|
|
| const onPin = async (note: Note) => { |
| const r = await updateNote(note.id, { pinned: !note.pinned }); |
| setLastAction({ name: "PIN", ms: r.ms }); |
| reload(); |
| }; |
|
|
| const tabs: { key: Tab; label: string; icon: string }[] = [ |
| { key: "notes", label: "Notes", icon: "📝" }, |
| { key: "bench", label: "Benchmark", icon: "⚡" }, |
| { key: "db", label: "Database", icon: "💾" }, |
| ]; |
|
|
| return ( |
| <main className="max-w-5xl mx-auto px-3 sm:px-4 py-6 sm:py-8"> |
| <header className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6"> |
| <h1 className="text-2xl sm:text-3xl font-bold tracking-tight"> |
| <span className="text-emerald-400">◆</span> Nexova |
| <span className="text-[10px] text-zinc-600 font-normal ml-2 align-middle">Server Actions</span> |
| </h1> |
| <div className="flex gap-1.5 sm:gap-2"> |
| {tabs.map((t) => ( |
| <button |
| key={t.key} |
| onClick={() => setTab(t.key)} |
| className={`px-3 py-1.5 rounded-lg text-xs sm:text-sm font-medium transition whitespace-nowrap ${ |
| tab === t.key ? "bg-emerald-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-white" |
| }`} |
| > |
| {t.icon} {t.label} |
| </button> |
| ))} |
| </div> |
| </header> |
| |
| {tab === "notes" && ( |
| <> |
| <div className="flex flex-wrap gap-x-4 gap-y-1 mb-3 text-xs text-zinc-500"> |
| <span>📊 {stats.total} notes</span> |
| <span>📌 {stats.pinned} pinned</span> |
| {stats.latest && ( |
| <span className="hidden sm:inline">🕐 {new Date(stats.latest).toLocaleString()}</span> |
| )} |
| <div className="flex gap-1 ml-auto"> |
| {stats.colors.map((c) => ( |
| <span |
| key={c.color} |
| className="w-3 h-3 rounded-full inline-block" |
| style={{ backgroundColor: c.color }} |
| title={`${c.count}`} |
| /> |
| ))} |
| </div> |
| </div> |
| |
| <div className="flex flex-wrap items-center gap-2 mb-4 text-xs text-zinc-500"> |
| <span className="inline-flex items-center gap-1 bg-zinc-900 border border-zinc-800 rounded-md px-2 py-1"> |
| 🔍 Query: <span className={`font-mono font-bold ${msColor(queryMs)}`}>{queryMs}ms</span> |
| </span> |
| <span className="inline-flex items-center gap-1 bg-zinc-900 border border-zinc-800 rounded-md px-2 py-1"> |
| 📊 Stats: <span className={`font-mono font-bold ${msColor(statsMs)}`}>{statsMs}ms</span> |
| </span> |
| {lastAction && ( |
| <span className="inline-flex items-center gap-1 bg-zinc-900 border border-emerald-900/50 rounded-md px-2 py-1"> |
| ✅ {lastAction.name}: <span className={`font-mono font-bold ${msColor(lastAction.ms)}`}>{lastAction.ms}ms</span> |
| </span> |
| )} |
| {isPending && <span className="text-yellow-500 animate-pulse">⏳ loading...</span>} |
| <span className="text-zinc-600 ml-auto hidden sm:inline">server-side via Prisma</span> |
| </div> |
| |
| <div className="flex gap-2 sm:gap-3 mb-6"> |
| <input |
| type="text" |
| placeholder="Search notes..." |
| value={search} |
| onChange={(e) => setSearch(e.target.value)} |
| className="flex-1 min-w-0 bg-zinc-900 border border-zinc-800 rounded-lg px-3 sm:px-4 py-2.5 text-sm focus:outline-none focus:border-emerald-500 transition" |
| /> |
| <button |
| onClick={() => { setEditing(null); setShowForm(true); }} |
| className="bg-emerald-600 hover:bg-emerald-500 px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition shrink-0" |
| > |
| + New |
| </button> |
| </div> |
| |
| {showForm && ( |
| <NoteForm |
| initial={editing} |
| onSave={onSave} |
| onCancel={() => { setShowForm(false); setEditing(null); }} |
| /> |
| )} |
| |
| {notes.length === 0 ? ( |
| <div className="text-center py-16 sm:py-20 text-zinc-500"> |
| <p className="text-4xl mb-3">📝</p> |
| <p>No notes yet. Create one!</p> |
| </div> |
| ) : ( |
| <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4"> |
| {notes.map((n) => ( |
| <NoteCard |
| key={n.id} |
| note={n} |
| onEdit={() => { setEditing(n); setShowForm(true); }} |
| onDelete={() => onDel(n.id)} |
| onPin={() => onPin(n)} |
| /> |
| ))} |
| </div> |
| )} |
| </> |
| )} |
|
|
| {tab === "bench" && <QueryBench />} |
| {tab === "db" && <DbInfo />} |
| </main> |
| ); |
| } |
|
|
| const msColor = (ms: number) => |
| ms < 1 ? "text-emerald-400" : ms < 5 ? "text-yellow-400" : ms < 20 ? "text-orange-400" : "text-red-400"; |
|
|
