Add notes module

2026-05-06 04:10:50 -05:00
parent 016d01cc25
commit 5b434702ba
19 changed files with 775 additions and 24 deletions
@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+
+export function MarkdownPreview({ markdown }: { markdown: string }) {
+  const blocks = parseBlocks(markdown);
+
+  if (blocks.length === 0) {
+    return <p className="text-sm text-muted-foreground">No preview yet.</p>;
+  }
+
+  return (
+    <div className="grid gap-3 text-sm leading-6">
+      {blocks.map((block, index) => {
+        if (block.type === "heading") {
+          return (
+            <h2 key={index} className="text-lg font-semibold">
+              {block.text}
+            </h2>
+          );
+        }
+
+        if (block.type === "list") {
+          return (
+            <ul key={index} className="list-disc space-y-1 pl-5">
+              {block.items.map((item, itemIndex) => (
+                <li key={itemIndex}>{item}</li>
+              ))}
+            </ul>
+          );
+        }
+
+        return <p key={index}>{block.text}</p>;
+      })}
+    </div>
+  );
+}
+
+type MarkdownBlock =
+  | { type: "heading"; text: ReactNode }
+  | { type: "list"; items: ReactNode[] }
+  | { type: "paragraph"; text: ReactNode };
+
+function parseBlocks(markdown: string): MarkdownBlock[] {
+  const blocks: MarkdownBlock[] = [];
+  const lines = markdown.replace(/\r\n/g, "\n").split("\n");
+  let paragraph: string[] = [];
+  let listItems: string[] = [];
+
+  function flushParagraph() {
+    if (paragraph.length === 0) return;
+    blocks.push({ type: "paragraph", text: paragraph.join(" ") });
+    paragraph = [];
+  }
+
+  function flushList() {
+    if (listItems.length === 0) return;
+    blocks.push({ type: "list", items: listItems.map((item) => item) });
+    listItems = [];
+  }
+
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (!line) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+
+    if (line.startsWith("# ")) {
+      flushParagraph();
+      flushList();
+      blocks.push({ type: "heading", text: line.slice(2).trim() });
+      continue;
+    }
+
+    if (line.startsWith("- ")) {
+      flushParagraph();
+      listItems.push(line.slice(2).trim());
+      continue;
+    }
+
+    flushList();
+    paragraph.push(line);
+  }
+
+  flushParagraph();
+  flushList();
+  return blocks;
+}
@@ -0,0 +1,134 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Pin, PinOff, Save, Trash2 } from "lucide-react";
+import { useState, useTransition } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { NoteDto } from "../server/queries";
+import { createNote, deleteNote, setNotePinned, updateNote } from "../server/actions";
+import { MarkdownPreview } from "./markdown-preview";
+
+export function NoteEditor({ note }: { note?: NoteDto }) {
+  const router = useRouter();
+  const [currentNote, setCurrentNote] = useState(note);
+  const [title, setTitle] = useState(note?.title ?? "");
+  const [body, setBody] = useState(note?.body ?? "");
+  const [remindAt, setRemindAt] = useState(toLocalDateTimeValue(note?.remindAt ?? null));
+  const [isPending, startTransition] = useTransition();
+
+  const pinned = currentNote?.pinned ?? false;
+
+  function saveNote() {
+    startTransition(async () => {
+      if (currentNote) {
+        const updated = await updateNote({
+          id: currentNote.id,
+          title,
+          body,
+          remindAt: remindAt ? new Date(remindAt) : null,
+        });
+        setCurrentNote({
+          ...updated,
+          createdAt: updated.createdAt.toISOString(),
+          updatedAt: updated.updatedAt.toISOString(),
+          remindAt: updated.remindAt?.toISOString() ?? null,
+        });
+        return;
+      }
+
+      const created = await createNote({
+        title,
+        body,
+        remindAt: remindAt ? new Date(remindAt) : null,
+      });
+      router.push(`/notes/${created.id}`);
+    });
+  }
+
+  function togglePinned() {
+    if (!currentNote) return;
+    startTransition(async () => {
+      setCurrentNote(await setNotePinned({ id: currentNote.id, pinned: !pinned }));
+    });
+  }
+
+  function removeNote() {
+    if (!currentNote) return;
+    startTransition(async () => {
+      await deleteNote({ id: currentNote.id });
+      router.push("/notes");
+    });
+  }
+
+  return (
+    <div className="mx-auto grid w-full max-w-6xl gap-5 p-4">
+      <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold">{currentNote ? currentNote.title : "New note"}</h1>
+          <p className="text-sm text-muted-foreground">Markdown notes shared with the household.</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {currentNote ? (
+            <Button variant="outline" onClick={togglePinned} disabled={isPending}>
+              {pinned ? <PinOff /> : <Pin />}
+              {pinned ? "Unpin note" : "Pin note"}
+            </Button>
+          ) : null}
+          {currentNote ? (
+            <Button variant="destructive" onClick={removeNote} disabled={isPending}>
+              <Trash2 />
+              Delete note
+            </Button>
+          ) : null}
+          <Button onClick={saveNote} disabled={!title.trim() || isPending}>
+            <Save />
+            Save note
+          </Button>
+        </div>
+      </header>
+
+      <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(280px,420px)]">
+        <section className="grid gap-4 rounded-lg border bg-background p-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="note-title">Title</Label>
+            <Input id="note-title" value={title} onChange={(event) => setTitle(event.target.value)} />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="note-body">Body</Label>
+            <textarea
+              id="note-body"
+              aria-label="Body"
+              className="min-h-80 w-full rounded-lg border border-input bg-transparent px-3 py-2 text-sm leading-6 outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+              value={body}
+              onChange={(event) => setBody(event.target.value)}
+              placeholder="# Dinner ideas&#10;&#10;- Tacos&#10;- Soup"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="note-reminder">Reminder</Label>
+            <Input
+              id="note-reminder"
+              type="datetime-local"
+              value={remindAt}
+              onChange={(event) => setRemindAt(event.target.value)}
+            />
+          </div>
+        </section>
+
+        <aside className="rounded-lg border bg-card p-4 text-card-foreground">
+          <h2 className="mb-3 text-sm font-medium text-muted-foreground">Preview</h2>
+          <MarkdownPreview markdown={body} />
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function toLocalDateTimeValue(value: string | null) {
+  if (!value) return "";
+  const date = new Date(value);
+  const local = new Date(date.getTime() - date.getTimezoneOffset() * 60_000);
+  return local.toISOString().slice(0, 16);
+}
@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Plus, Pin } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
+import type { NoteDto } from "../server/queries";
+
+export function NotesIndex({ notes }: { notes: NoteDto[] }) {
+  return (
+    <div className="mx-auto grid w-full max-w-5xl gap-6 p-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold">Notes</h1>
+          <p className="text-sm text-muted-foreground">
+            Shared reminders, reference notes, and loose household details.
+          </p>
+        </div>
+        <Link href="/notes/new" className={buttonVariants()}>
+          <Plus />
+          New note
+        </Link>
+      </div>
+
+      {notes.length === 0 ? (
+        <div className="rounded-lg border bg-background p-8 text-center text-sm text-muted-foreground">
+          No notes yet.
+        </div>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {notes.map((note) => (
+            <Link
+              key={note.id}
+              href={`/notes/${note.id}`}
+              className="grid min-h-32 gap-3 rounded-lg border bg-card p-4 text-card-foreground transition-colors hover:bg-muted"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <h2 className="font-medium">{note.title}</h2>
+                {note.pinned ? (
+                  <Pin aria-label="Pinned" className="mt-0.5 size-4 shrink-0 text-primary" />
+                ) : null}
+              </div>
+              <p className="line-clamp-3 text-sm text-muted-foreground">
+                {note.body || "No body text."}
+              </p>
+              <div className="text-xs text-muted-foreground">
+                Updated {new Date(note.updatedAt).toLocaleDateString()}
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}