feat: open notes in view mode with optional editor

default to reading the note; edit opens the form alone without a
side preview since the rich text editor already shows live content.

src/modules/notes/components/note-editor.tsx

@@ -2,10 +2,9 @@
 
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
-import { Pin, PinOff, Save, Trash2 } from "lucide-react";
+import { Bell, Pencil, Pin, PinOff, Save, Trash2, X } from "lucide-react";
 import { useState, useTransition } from "react";
 import { EntityComments } from "@/components/comments/entity-comments";
-import { RichTextContent } from "@/components/rich-text";
 import { DetailBackLink } from "@/components/detail-back-link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -13,6 +12,7 @@ import { Label } from "@/components/ui/label";
 import { ShareButton } from "@/components/share-button";
 import type { NoteDto } from "../server/queries";
 import { createNote, deleteNote, setNotePinned, updateNote } from "../server/actions";
+import { NoteRichTextBody } from "./note-rich-text-body";
 
 const RichTextEditor = dynamic(
   () => import("@/components/rich-text/rich-text-editor").then((mod) => mod.RichTextEditor),
@@ -29,6 +29,7 @@ const RichTextEditor = dynamic(
 export function NoteEditor({ note, currentUserId }: { note?: NoteDto; currentUserId?: string }) {
   const router = useRouter();
   const [currentNote, setCurrentNote] = useState(note);
+  const [editing, setEditing] = useState(!note);
   const [title, setTitle] = useState(note?.title ?? "");
   const [body, setBody] = useState(note?.body ?? "");
   const [remindAt, setRemindAt] = useState(toLocalDateTimeValue(note?.remindAt ?? null));
@@ -36,6 +37,25 @@ export function NoteEditor({ note, currentUserId }: { note?: NoteDto; currentUse
 
   const pinned = currentNote?.pinned ?? false;
 
+  function beginEdit() {
+    if (!currentNote) return;
+    setTitle(currentNote.title);
+    setBody(currentNote.body);
+    setRemindAt(toLocalDateTimeValue(currentNote.remindAt));
+    setEditing(true);
+  }
+
+  function cancelEdit() {
+    if (!currentNote) {
+      router.push("/notes");
+      return;
+    }
+    setTitle(currentNote.title);
+    setBody(currentNote.body);
+    setRemindAt(toLocalDateTimeValue(currentNote.remindAt));
+    setEditing(false);
+  }
+
   function saveNote() {
     startTransition(async () => {
       if (currentNote) {
@@ -46,6 +66,7 @@ export function NoteEditor({ note, currentUserId }: { note?: NoteDto; currentUse
           remindAt: remindAt ? new Date(remindAt) : null,
         });
         setCurrentNote(updated);
+        setEditing(false);
         return;
       }
 
@@ -73,38 +94,87 @@ export function NoteEditor({ note, currentUserId }: { note?: NoteDto; currentUse
     });
   }
 
+  const displayTitle = currentNote?.title || title || "New note";
+  const updatedLabel = currentNote
+    ? new Date(currentNote.updatedAt).toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      })
+    : null;
+  const reminderLabel = currentNote?.remindAt
+    ? new Date(currentNote.remindAt).toLocaleString(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      })
+    : null;
+
   return (
-    <div className="mx-auto grid w-full max-w-6xl gap-4 min-w-0">
+    <div className="mx-auto grid w-full max-w-3xl gap-4 min-w-0">
       <DetailBackLink href="/notes" label="Notes" />
       <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex items-center gap-2 min-w-0 flex-1">
-          {pinned && <Pin className="size-3.5 text-[var(--accent)]" />}
-          <h2 className="serif text-[24px] font-medium tracking-tight truncate">
-            {currentNote ? currentNote.title : "New note"}
-          </h2>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 min-w-0">
+            {pinned ? <Pin className="size-3.5 shrink-0 text-[var(--accent)]" /> : null}
+            <h2 className="serif text-[24px] font-medium tracking-tight truncate">
+              {displayTitle}
+            </h2>
+          </div>
+          {!editing && currentNote ? (
+            <p className="muted text-[13px] mt-1 inline-flex flex-wrap items-center gap-x-2 gap-y-1">
+              {pinned ? <span>Pinned</span> : null}
+              {pinned && updatedLabel ? <span>·</span> : null}
+              {updatedLabel ? <span>Updated {updatedLabel}</span> : null}
+              {reminderLabel ? (
+                <>
+                  <span>·</span>
+                  <span className="inline-flex items-center gap-1">
+                    <Bell className="size-3" />
+                    {reminderLabel}
+                  </span>
+                </>
+              ) : null}
+            </p>
+          ) : null}
         </div>
         <div className="flex flex-wrap gap-2">
           {currentNote ? (
             <Button variant="outline" size="sm" onClick={togglePinned} disabled={isPending}>
               {pinned ? <PinOff className="size-3.5" /> : <Pin className="size-3.5" />}
-              {pinned ? "Unpin note" : "Pin note"}
+              {pinned ? "Unpin" : "Pin"}
             </Button>
           ) : null}
           {currentNote ? <ShareButton entityType="notes.note" entityId={currentNote.id} /> : null}
           {currentNote ? (
             <Button variant="destructive" size="sm" onClick={removeNote} disabled={isPending}>
               <Trash2 className="size-3.5" />
-              Delete note
+              Delete
             </Button>
           ) : null}
-          <Button size="sm" onClick={saveNote} disabled={!title.trim() || isPending}>
-            <Save className="size-3.5" />
-            Save note
-          </Button>
+          {editing ? (
+            <>
+              <Button variant="outline" size="sm" onClick={cancelEdit} disabled={isPending}>
+                <X className="size-3.5" />
+                Cancel
+              </Button>
+              <Button size="sm" onClick={saveNote} disabled={!title.trim() || isPending}>
+                <Save className="size-3.5" />
+                Save
+              </Button>
+            </>
+          ) : (
+            <Button size="sm" onClick={beginEdit}>
+              <Pencil className="size-3.5" />
+              Edit
+            </Button>
+          )}
         </div>
       </header>
 
-      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(280px,420px)] min-w-0">
+      {editing ? (
         <section
           className="grid gap-4 rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] p-4 shadow-[var(--shadow-1)] min-w-0"
           style={{ borderColor: "var(--hair)" }}
@@ -138,16 +208,18 @@ export function NoteEditor({ note, currentUserId }: { note?: NoteDto; currentUse
             />
           </div>
         </section>
-
-        <aside
-          className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] p-4 text-[var(--ink)] shadow-[var(--shadow-1)] min-w-0"
+      ) : currentNote ? (
+        <section
+          className="rounded-[var(--r-lg)] border-[0.5px] bg-[var(--card)] p-4 shadow-[var(--shadow-1)] min-w-0 text-[var(--ink)]"
           style={{ borderColor: "var(--hair)" }}
-          aria-label="Preview"
         >
-          <div className="eyebrow mb-3">Preview</div>
-          <RichTextContent html={body} />
-        </aside>
-      </div>
+          {currentNote.body ? (
+            <NoteRichTextBody noteId={currentNote.id} body={currentNote.body} />
+          ) : (
+            <p className="text-sm muted">No body text.</p>
+          )}
+        </section>
+      ) : null}
 
       {currentNote && currentUserId ? (
         <EntityComments