113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { NotebookPen, Pencil, Sparkles } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { colorModeFromTheme } from "@/components/theme/use-dark-theme";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { MDEditor, MarkdownPreview } from "@/components/markdown/markdown-widgets";
|
|
import { useBoard } from "@/components/board/board-context";
|
|
import { GroupAiDialog } from "@/components/board/group-ai-dialog";
|
|
import type { GroupDTO } from "@/types/board";
|
|
|
|
export function NotesDialog({ group }: { group: GroupDTO }) {
|
|
const { saveNote } = useBoard();
|
|
const colorMode = colorModeFromTheme();
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const [editing, setEditing] = useState(false);
|
|
const [draft, setDraft] = useState(group.noteContent);
|
|
const [pending, setPending] = useState(false);
|
|
const [aiOpen, setAiOpen] = useState(false);
|
|
|
|
function handleOpenChange(next: boolean) {
|
|
setOpen(next);
|
|
if (next) {
|
|
setDraft(group.noteContent);
|
|
setEditing(false);
|
|
}
|
|
}
|
|
|
|
// The "Ask AI" dialog can update this group's notes (via saveNote) while
|
|
// this dialog stays open behind it. Pick up that change so the accepted
|
|
// AI notes show up here immediately instead of the stale pre-AI draft.
|
|
useEffect(() => {
|
|
if (open && !editing) {
|
|
setDraft(group.noteContent);
|
|
}
|
|
}, [group.noteContent, open, editing]);
|
|
|
|
async function handleSave() {
|
|
setPending(true);
|
|
const ok = await saveNote(group.id, group.categoryId, draft);
|
|
setPending(false);
|
|
if (ok) setEditing(false);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7 shrink-0"
|
|
aria-label={`Notes for ${group.title}`}
|
|
onClick={() => handleOpenChange(true)}
|
|
>
|
|
<NotebookPen className="size-4" />
|
|
</Button>
|
|
<DialogContent className="sm:max-w-2xl" data-color-mode={colorMode}>
|
|
<DialogHeader>
|
|
<DialogTitle>{group.title} — Notes</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{editing ? (
|
|
<MDEditor value={draft} onChange={(v) => setDraft(v ?? "")} height={360} />
|
|
) : draft ? (
|
|
<div className="max-h-[60vh] overflow-y-auto rounded-md border p-4">
|
|
<MarkdownPreview source={draft} />
|
|
</div>
|
|
) : (
|
|
<p className="rounded-md border border-dashed p-8 text-center text-sm text-muted-foreground">
|
|
No notes yet. Click Edit to add some.
|
|
</p>
|
|
)}
|
|
|
|
<DialogFooter>
|
|
{editing ? (
|
|
<>
|
|
<Button variant="outline" onClick={() => setEditing(false)} disabled={pending}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleSave} disabled={pending}>
|
|
{pending ? "Saving…" : "Save"}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Button variant="outline" onClick={() => setAiOpen(true)} className="gap-2">
|
|
<Sparkles className="size-4" />
|
|
Ask AI
|
|
</Button>
|
|
<Button variant="outline" onClick={() => setEditing(true)} className="gap-2">
|
|
<Pencil className="size-4" />
|
|
Edit
|
|
</Button>
|
|
</>
|
|
)}
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<GroupAiDialog group={group} open={aiOpen} onOpenChange={setAiOpen} />
|
|
</>
|
|
);
|
|
}
|