Add notes module

This commit is contained in:
ginnoir
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>
);
}
-18
View File
@@ -1,18 +0,0 @@
import type { ModuleManifest } from "../_core/module";
const manifest: ModuleManifest = {
id: "notes",
name: "Notes",
nav: { href: "/notes", label: "Notes", icon: "file-text" },
entities: [
{
type: "notes.note",
label: { singular: "Note", plural: "Notes" },
resolveUrl: (id) => `/notes/${id}`,
},
],
dashboardWidgets: [],
quickAdds: [],
};
export default manifest;
+56
View File
@@ -0,0 +1,56 @@
import type { ModuleManifest } from "../_core/module";
import { z } from "zod";
import { searchNotes } from "./server/queries";
const notesWidgetConfigSchema = z.object({
filter: z.enum(["pinned", "all"]),
limit: z.number().int().min(1).max(50).optional(),
});
const manifest: ModuleManifest = {
id: "notes",
name: "Notes",
nav: { href: "/notes", label: "Notes", icon: "file-text" },
entities: [
{
type: "notes.note",
label: { singular: "Note", plural: "Notes" },
share: { canShare: true, defaultCapabilities: ["read"] },
reminder: { canRemind: true },
search: { search: searchNotes },
resolveUrl: (id) => `/notes/${id}`,
},
],
dashboardWidgets: [
{
id: "notes.filtered",
title: "Notes",
description: "Pinned notes or recent notes.",
category: "Notes",
defaultSize: { w: 4, h: 3 },
minSize: { w: 3, h: 2 },
defaultPriority: 40,
configSchema: notesWidgetConfigSchema,
defaultConfig: { filter: "pinned", limit: 10 },
resolveConfigOptions: async () => undefined,
render: ({ config }) => {
const parsed = notesWidgetConfigSchema.parse(config);
return (
<div className="text-sm text-muted-foreground">
{parsed.filter === "pinned" ? "Pinned notes" : "Notes"}
</div>
);
},
},
],
quickAdds: [
{
id: "notes.new-note",
label: "New note",
icon: "file-plus",
action: () => undefined,
},
],
};
export default manifest;
+27
View File
@@ -0,0 +1,27 @@
import { boolean, index, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
import { households, users } from "../_core/schema";
export const notes = pgTable(
"notes",
{
id: uuid("id").primaryKey().defaultRandom(),
householdId: uuid("household_id")
.notNull()
.references(() => households.id, { onDelete: "cascade" }),
authorId: uuid("author_id")
.notNull()
.references(() => users.id, { onDelete: "cascade" }),
title: text("title").notNull(),
body: text("body").notNull().default(""),
pinned: boolean("pinned").notNull().default(false),
remindAt: timestamp("remind_at", { withTimezone: true }),
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
},
(t) => [
index("notes_household_pinned_updated_idx").on(t.householdId, t.pinned, t.updatedAt),
index("notes_author_idx").on(t.authorId),
],
);
export type Note = typeof notes.$inferSelect;
+142
View File
@@ -0,0 +1,142 @@
"use server";
import { and, eq } from "drizzle-orm";
import { revalidatePath } from "next/cache";
import { z } from "zod";
import { db } from "@/lib/db";
import { getCurrentSession } from "@/lib/session";
import { reminders } from "@/modules/_core/schema";
import { notes } from "../schema";
import { canAccessNote, getNote } from "./queries";
const noteInput = z.object({
title: z.string().trim().min(1).max(200),
body: z.string().max(20000).default(""),
pinned: z.boolean().default(false),
remindAt: z.coerce.date().nullable().optional(),
});
const updateNoteInput = z.object({
id: z.string().uuid(),
title: noteInput.shape.title.optional(),
body: z.string().max(20000).optional(),
pinned: z.boolean().optional(),
remindAt: z.coerce.date().nullable().optional(),
});
export async function createNote(input: z.input<typeof noteInput>) {
const parsed = noteInput.parse(input);
const { household, user } = await getCurrentSession();
const [note] = await db.transaction(async (tx) => {
const [created] = await tx
.insert(notes)
.values({
householdId: household.id,
authorId: user.id,
title: parsed.title,
body: parsed.body,
pinned: parsed.pinned,
remindAt: parsed.remindAt ?? null,
})
.returning();
if (!created) throw new Error("Note was not created");
await syncNoteReminder(tx, {
householdId: household.id,
noteId: created.id,
remindAt: created.remindAt,
});
return [created];
});
revalidatePath("/notes");
return note;
}
export async function updateNote(input: z.input<typeof updateNoteInput>) {
const parsed = updateNoteInput.parse(input);
const { household } = await getCurrentSession();
await assertCanAccessNote(parsed.id, household.id);
const [note] = await db.transaction(async (tx) => {
const [updated] = await tx
.update(notes)
.set({
title: parsed.title,
body: parsed.body,
pinned: parsed.pinned,
remindAt: parsed.remindAt === undefined ? undefined : parsed.remindAt,
updatedAt: new Date(),
})
.where(eq(notes.id, parsed.id))
.returning();
if (!updated) throw new Error("Note was not updated");
if (parsed.remindAt !== undefined) {
await syncNoteReminder(tx, {
householdId: household.id,
noteId: updated.id,
remindAt: updated.remindAt,
});
}
return [updated];
});
revalidatePath("/notes");
revalidatePath(`/notes/${parsed.id}`);
return note;
}
export async function setNotePinned(input: { id: string; pinned: boolean }) {
const parsed = z.object({ id: z.string().uuid(), pinned: z.boolean() }).parse(input);
const { household } = await getCurrentSession();
await assertCanAccessNote(parsed.id, household.id);
await db
.update(notes)
.set({ pinned: parsed.pinned, updatedAt: new Date() })
.where(eq(notes.id, parsed.id));
revalidatePath("/notes");
revalidatePath(`/notes/${parsed.id}`);
return getNote(parsed.id);
}
export async function deleteNote(input: { id: string }) {
const parsed = z.object({ id: z.string().uuid() }).parse(input);
const { household } = await getCurrentSession();
await assertCanAccessNote(parsed.id, household.id);
await db.transaction(async (tx) => {
await tx
.delete(reminders)
.where(and(eq(reminders.entityType, "notes.note"), eq(reminders.entityId, parsed.id)));
await tx.delete(notes).where(eq(notes.id, parsed.id));
});
revalidatePath("/notes");
}
async function assertCanAccessNote(noteId: string, householdId: string) {
if (!(await canAccessNote(noteId, householdId))) throw new Error("Forbidden");
}
async function syncNoteReminder(
tx: Parameters<Parameters<typeof db.transaction>[0]>[0],
input: { householdId: string; noteId: string; remindAt: Date | null },
) {
await tx
.delete(reminders)
.where(and(eq(reminders.entityType, "notes.note"), eq(reminders.entityId, input.noteId)));
if (!input.remindAt) return;
await tx.insert(reminders).values({
householdId: input.householdId,
entityType: "notes.note",
entityId: input.noteId,
fireAt: input.remindAt,
channel: "in_app",
});
}
+112
View File
@@ -0,0 +1,112 @@
"use server";
import { and, desc, eq, or, sql } from "drizzle-orm";
import { z } from "zod";
import { db } from "@/lib/db";
import { getCurrentSession } from "@/lib/session";
import { notes } from "../schema";
export type NoteDto = {
id: string;
householdId: string;
authorId: string;
title: string;
body: string;
pinned: boolean;
remindAt: string | null;
createdAt: string;
updatedAt: string;
};
export async function listNotes(): Promise<NoteDto[]> {
const { household } = await getCurrentSession();
const rows = await db
.select()
.from(notes)
.where(eq(notes.householdId, household.id))
.orderBy(desc(notes.pinned), desc(notes.updatedAt));
return rows.map(toNoteDto);
}
export async function getNote(id: string): Promise<NoteDto> {
const parsed = z.string().uuid().parse(id);
const { household } = await getCurrentSession();
const [note] = await db
.select()
.from(notes)
.where(and(eq(notes.id, parsed), eq(notes.householdId, household.id)))
.limit(1);
if (!note) throw new Error("Note not found");
return toNoteDto(note);
}
export async function canAccessNote(noteId: string, householdId: string) {
const [note] = await db
.select({ id: notes.id })
.from(notes)
.where(and(eq(notes.id, noteId), eq(notes.householdId, householdId)))
.limit(1);
return !!note;
}
export async function searchNotes(query: string, householdId: string) {
const rows = await db
.select({
id: notes.id,
title: notes.title,
body: notes.body,
})
.from(notes)
.where(
and(
eq(notes.householdId, householdId),
or(sql`${notes.title} ilike ${`%${query}%`}`, sql`${notes.body} ilike ${`%${query}%`}`),
),
)
.limit(10);
return rows.map((row) => ({
id: row.id,
title: row.title,
url: `/notes/${row.id}`,
excerpt: row.body.slice(0, 160),
}));
}
export async function listWidgetNotes(input: { filter: "pinned" | "all"; limit?: number }) {
const parsed = z
.object({
filter: z.enum(["pinned", "all"]),
limit: z.number().int().min(1).max(50).optional(),
})
.parse(input);
const { household } = await getCurrentSession();
const conditions = [eq(notes.householdId, household.id)];
if (parsed.filter === "pinned") conditions.push(eq(notes.pinned, true));
const rows = await db
.select()
.from(notes)
.where(and(...conditions))
.orderBy(desc(notes.pinned), desc(notes.updatedAt))
.limit(parsed.limit ?? 10);
return rows.map(toNoteDto);
}
function toNoteDto(note: typeof notes.$inferSelect): NoteDto {
return {
id: note.id,
householdId: note.householdId,
authorId: note.authorId,
title: note.title,
body: note.body,
pinned: note.pinned,
remindAt: note.remindAt?.toISOString() ?? null,
createdAt: note.createdAt.toISOString(),
updatedAt: note.updatedAt.toISOString(),
};
}