@knotpad/app 0.1.4 → 0.1.6

package/components/notes/note-editor.tsx

@@ -0,0 +1,662 @@
+"use client";
+
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import Link from "next/link";
+import {
+  Download, CheckCircle2, X,
+} from "lucide-react";
+import { StatusDot } from "@/components/tasks/status-dot";
+import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
+import { useToast } from "@/components/ui/toast";
+import { loadPreference, savePreference } from "@/lib/view-preferences";
+import { extractTitleFromContent } from "@/lib/note-title";
+import { useIsMobile } from "@/lib/use-is-mobile";
+import { MobileBottomSheet } from "./mobile-bottom-sheet";
+
+import type { Task, Props } from "./note-types";
+import { extractTaskTitleFromLine, stripBadgeComments, formatTodayHeader } from "./note-types";
+import { EditorOverlay, getTaskBadgeRows, GUTTER_PX } from "./note-editor-overlay";
+import { PreviewPane } from "./note-preview-pane";
+import {
+  SlashPalette, MentionDropdown, NotePickerDropdown, TaskPickerDropdown,
+  PlusPickerDropdown, DatePickerDropdown, TemplatePickerDropdown, SoftHintBar,
+  PriorityPickerDropdown,
+} from "./note-editor-dropdowns";
+import { EditorContextMenu } from "./note-editor-context-menu";
+import { useNoteSave, useUndoHistory, usePickerState } from "./note-editor-hooks";
+import { useNoteEditorKeyboard } from "./note-editor-keyboard";
+
+// ── PickerShell — desktop: inline, mobile: bottom sheet ─────────────────────
+function PickerShell({
+  open, onClose, title, isMobile, children,
+}: {
+  open: boolean;
+  onClose: () => void;
+  title?: string;
+  isMobile: boolean;
+  children: React.ReactNode;
+}) {
+  if (!open) return null;
+  if (isMobile) {
+    return (
+      <MobileBottomSheet open={open} onClose={onClose} title={title}>
+        {children}
+      </MobileBottomSheet>
+    );
+  }
+  return <>{children}</>;
+}
+
+type EditorViewMode = "edit" | "split" | "preview";
+
+export function NoteEditor({ note, members = [], notesList = [], tasksList = [], highlight }: Props) {
+  // ── Local state ─────────────────────────────────────────────────────────
+  const [title, setTitle] = useState(note.title);
+  const [content, setContent] = useState(stripBadgeComments(note.content));
+  const [localTasks, setLocalTasks] = useState<Task[]>(note.tasks);
+  const [showLockWarning, setShowLockWarning] = useState(false);
+  const [allDoneDismissed, setAllDoneDismissed] = useState(false);
+  const [viewMode, setViewMode] = useState<EditorViewMode>(() =>
+    loadPreference("brief:notes-view-mode", "edit")
+  );
+  const [lastSavedAt, setLastSavedAt] = useState<number | null>(null);
+  const [badgePositions, setBadgePositions] = useState<Record<number, number>>({});
+  const userEditedTitle = useRef(false);
+  const hadPendingSave = useRef(false);
+  const titleRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  // ── Hooks ───────────────────────────────────────────────────────────────
+  const kanbanStatuses = useKanbanStatuses();
+  const toast = useToast();
+  const isMobile = useIsMobile();
+  const availableViewModes: { key: EditorViewMode; label: string }[] = isMobile
+    ? [
+        { key: "edit", label: "Edit only" },
+        { key: "preview", label: "Preview only" },
+      ]
+    : [
+        { key: "edit", label: "Edit only" },
+        { key: "split", label: "Split view" },
+        { key: "preview", label: "Preview only" },
+      ];
+
+  const { historyStack, historyPos, historyTimer, pushHistory, pushHistoryImmediate } =
+    useUndoHistory(stripBadgeComments(note.content));
+
+  const {
+    saving, saveError, setSaveError, staleReloaded, setStaleReloaded,
+    savePending, scheduleSave,
+  } = useNoteSave(note.id, note.version, setLocalTasks, setContent, setTitle);
+
+  const p = usePickerState(
+    content, title, members, notesList, tasksList,
+    note.id, textareaRef, scheduleSave, setContent,
+  );
+  const savedCursor = p.savedCursor;
+
+  const { handleKeyDown } = useNoteEditorKeyboard({
+    content, title, textareaRef, savedCursor: p.savedCursor,
+    historyTimer, historyPos, historyStack, pushHistoryImmediate,
+    scheduleSave, setContent,
+    slashQuery: p.slashQuery, setSlashQuery: p.setSlashQuery,
+    slashIndex: p.slashIndex, setSlashIndex: p.setSlashIndex,
+    slashSuggestions: p.slashSuggestions,
+    executeSlashCommand: p.executeSlashCommand,
+    setDropdownPos: p.setDropdownPos,
+    mentionQuery: p.mentionQuery, setMentionQuery: p.setMentionQuery,
+    mentionIndex: p.mentionIndex, setMentionIndex: p.setMentionIndex,
+    mentionSuggestions: p.mentionSuggestions,
+    insertMention: p.insertMention,
+    taskQuery: p.taskQuery, setTaskQuery: p.setTaskQuery,
+    taskIndex: p.taskIndex, setTaskIndex: p.setTaskIndex,
+    taskSuggestions: p.taskSuggestions,
+    insertTaskRef: p.insertTaskRef,
+    priorityQuery: p.priorityQuery, setPriorityQuery: p.setPriorityQuery,
+    priorityIndex: p.priorityIndex, setPriorityIndex: p.setPriorityIndex,
+    prioritySuggestions: p.prioritySuggestions,
+    insertPriority: p.insertPriority,
+    plusOpen: p.plusOpen, setPlusOpen: p.setPlusOpen,
+    triggerPlusOption: p.triggerPlusOption,
+    templateOpen: p.templateOpen, setTemplateOpen: p.setTemplateOpen,
+    contextMenu: p.contextMenu, setContextMenu: p.setContextMenu,
+    noteQuery: p.noteQuery, setNoteQuery: p.setNoteQuery,
+    noteIndex: p.noteIndex, setNoteIndex: p.setNoteIndex,
+    noteSuggestions: p.noteSuggestions,
+    insertNoteLink: p.insertNoteLink,
+  });
+
+  // ── Mount effects ───────────────────────────────────────────────────────
+  useEffect(() => {
+    if (note.title && note.title.trim() && note.title.trim() !== "Untitled") {
+      userEditedTitle.current = true;
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (isMobile && viewMode === "split") {
+      setViewMode("edit");
+      savePreference("brief:notes-view-mode", "edit");
+      return;
+    }
+    savePreference("brief:notes-view-mode", viewMode);
+  }, [isMobile, viewMode]);
+
+  useEffect(() => {
+    if (savePending.current) {
+      hadPendingSave.current = true;
+      return;
+    }
+    if (hadPendingSave.current && !saving && !saveError) {
+      hadPendingSave.current = false;
+      setLastSavedAt(Date.now());
+    }
+  }, [content, localTasks, saveError, savePending, saving, title]);
+
+  // Scroll to and select highlighted text on deep-link
+  useEffect(() => {
+    if (!highlight || !textareaRef.current) return;
+    const ta = textareaRef.current;
+    const needle = highlight.toLowerCase();
+    const idx = ta.value.toLowerCase().indexOf(needle);
+    if (idx === -1) return;
+    ta.focus();
+    ta.setSelectionRange(idx, idx + highlight.length);
+    const linesBefore = ta.value.slice(0, idx).split("\n").length - 1;
+    const lineH = parseInt(getComputedStyle(ta).lineHeight) || 24;
+    ta.scrollTop = Math.max(0, linesBefore * lineH - ta.clientHeight / 3);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Toggle a task checkbox from the preview pane
+  function toggleTaskInPreview(checkboxIndex: number) {
+    const lines = content.split("\n");
+    const taskLinePattern = /^(\s*)((?:[-*]|\d+\.))(\s+)\[([ x])\](.*)$/;
+    let taskCount = 0;
+    for (let i = 0; i < lines.length; i++) {
+      const matchedLine = taskLinePattern.exec(lines[i]);
+      if (matchedLine) {
+        if (taskCount === checkboxIndex) {
+          const [, indent, marker, spacing, checkState, remainder] = matchedLine;
+          const wasChecked = checkState === "x";
+          lines[i] = `${indent}${marker}${spacing}[${wasChecked ? " " : "x"}]${remainder}`;
+          const newContent = lines.join("\n");
+          setContent(newContent);
+          scheduleSave(title, newContent);
+          const rawText = remainder.trim();
+          const taskTitle = rawText
+            .replace(/\[\[[^\]]*\]\]/g, "").replace(/\(\([^)]*\)\)/g, "")
+            .replace(/@[\w-]+/g, "").replace(/<[^>]+>/g, "")
+            .replace(/(\d{4}-\d{2}-\d{2})\.\.(\d{4}-\d{2}-\d{2})/g, "")
+            .replace(/(\d{4}-\d{2}-\d{2})/g, "").replace(/\s*<!--task::[A-Z_]+-->/g, "").trim();
+          const matchedTask = tasksList.find((t) => t.title === taskTitle);
+          if (matchedTask) {
+            fetch(`/api/tasks/${matchedTask.id}`, {
+              method: "PATCH", headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ status: wasChecked ? "OPEN" : "DONE" }),
+            }).catch(() => {});
+          }
+          break;
+        }
+        taskCount++;
+      }
+    }
+  }
+
+  // Measure badge positions for text wrapping
+  useEffect(() => {
+    function measureBadgePositions() {
+      const overlay = overlayRef.current;
+      if (!overlay) return;
+      const lines = content.split("\n");
+      const positions: Record<number, number> = {};
+      lines.forEach((line, i) => {
+        const taskTitle = extractTaskTitleFromLine(line);
+        if (taskTitle && localTasks.find((t) => t.title === taskTitle)) {
+          const spans = overlay.querySelectorAll("span > span");
+          for (const span of spans) {
+            if (span.textContent === line || span.textContent?.includes(line.slice(0, 20))) {
+              const rect = span.getBoundingClientRect();
+              const overlayRect = overlay.getBoundingClientRect();
+              positions[i] = rect.top - overlayRect.top;
+              break;
+            }
+          }
+          if (!(i in positions)) positions[i] = i * 24;
+        }
+      });
+      setBadgePositions(positions);
+    }
+    measureBadgePositions();
+    const ta = textareaRef.current;
+    if (!ta) return;
+    const resizeObserver = new ResizeObserver(() => measureBadgePositions());
+    resizeObserver.observe(ta);
+    return () => resizeObserver.disconnect();
+  }, [content, localTasks]);
+
+  // ── Handlers ────────────────────────────────────────────────────────────
+  function handleTitleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    userEditedTitle.current = true;
+    setTitle(e.target.value);
+    scheduleSave(e.target.value, content);
+  }
+
+  function handleContentChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const composing = (e.nativeEvent as InputEvent).isComposing ?? false;
+    const val = e.target.value;
+    if (!composing) {
+      p.savedCursor.current = { start: e.target.selectionStart, end: e.target.selectionEnd };
+    }
+    setContent(val);
+    if (composing) return;
+    pushHistory(val);
+    p.detectTriggers(val, e.target.selectionStart);
+    let newTitle = title;
+    if (!userEditedTitle.current) {
+      const extracted = extractTitleFromContent(val);
+      if (extracted) { newTitle = extracted; setTitle(newTitle); }
+    }
+    scheduleSave(newTitle, val);
+  }
+
+  // After every render, restore cursor and auto-grow textarea
+  useLayoutEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = ta.scrollHeight + "px";
+    if (savedCursor.current) {
+      ta.setSelectionRange(savedCursor.current.start, savedCursor.current.end);
+      savedCursor.current = null;
+    }
+  }, [content, savedCursor]);
+
+  const activeStatusKeys = kanbanStatuses
+    .filter((s) => s.isVisible && s.key !== "OPEN" && s.key !== "DONE")
+    .map((s) => s.key);
+  const hasActiveTasks = localTasks.some((t) => activeStatusKeys.includes(t.status));
+  const allTasksDone = localTasks.length > 0 && localTasks.every((t) => t.status === "DONE");
+  const effectiveViewMode: EditorViewMode = isMobile && viewMode === "split" ? "edit" : viewMode;
+  const showEditorPane = effectiveViewMode !== "preview";
+  const showPreviewPane = effectiveViewMode !== "edit";
+  const saveLabel = saving
+    ? "Saving..."
+    : saveError
+      ? "Save failed"
+      : lastSavedAt && !savePending.current
+        ? "Saved just now"
+        : null;
+
+  function handleExport() { window.open(`/api/notes/${note.id}/export`, "_blank"); }
+
+  function handleContextMenu(e: React.MouseEvent<HTMLTextAreaElement>) {
+    const ta = e.currentTarget;
+    if (ta.selectionStart === ta.selectionEnd) return;
+    e.preventDefault();
+    const vw = window.innerWidth, vh = window.innerHeight;
+    p.setContextMenu({
+      top: Math.min(e.clientY, vh - 196), left: Math.min(e.clientX, vw - 192),
+      selStart: ta.selectionStart, selEnd: ta.selectionEnd,
+    });
+  }
+
+  function copyDeepLink() {
+    if (!p.contextMenu) return;
+    const { selStart, selEnd } = p.contextMenu;
+    const sel = content.slice(selStart, selEnd);
+    const url = `${window.location.origin}/notes/${note.id}?q=${encodeURIComponent(sel)}`;
+    navigator.clipboard.writeText(url)
+      .then(() => toast("Link to selection copied", "success"))
+      .catch(() => toast("Couldn't copy link", "error"));
+    p.setContextMenu(null);
+  }
+
+  // Badge gutter
+  const badgeRows = getTaskBadgeRows(content, localTasks);
+  const gutterWidth = badgeRows.length === 0 ? 0 : GUTTER_PX;
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      {/* Breadcrumb + status bar */}
+      <div className="flex items-center gap-3 border-b border-zinc-800 px-6 py-2.5">
+        <div className="flex-1 min-w-0">
+          <nav className="flex items-center gap-1 text-xs text-zinc-600">
+            <span>Workspace</span><span>/</span>
+            {note.folder && (<><span className="truncate">{note.folder.name}</span><span>/</span></>)}
+            <span className="text-zinc-400 truncate">{title}</span>
+          </nav>
+        </div>
+        <div className="flex items-center gap-2">
+          {hasActiveTasks && <span className="text-xs text-amber-400">Tasks active</span>}
+          {saveLabel && <span className="text-xs text-zinc-600">{saveLabel}</span>}
+          <div className="inline-flex rounded-md border border-zinc-800 bg-zinc-950 p-1">
+            {availableViewModes.map((mode) => (
+              <button
+                key={mode.key}
+                type="button"
+                aria-pressed={effectiveViewMode === mode.key}
+                onClick={() => setViewMode(mode.key as EditorViewMode)}
+                className={`rounded px-2 py-1 text-xs transition-colors ${
+                  effectiveViewMode === mode.key
+                    ? "bg-zinc-800 text-zinc-200"
+                    : "text-zinc-500 hover:bg-zinc-900 hover:text-zinc-300"
+                }`}
+              >
+                {mode.label}
+              </button>
+            ))}
+          </div>
+          <button onClick={handleExport} title="Download as .md"
+            className="flex items-center gap-1 rounded px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-800 hover:text-zinc-300 transition-colors">
+            <Download size={12} /><span>Export</span>
+          </button>
+        </div>
+      </div>
+
+      {showEditorPane && (
+        <div className="border-b border-zinc-800/60 px-6 py-2">
+          <div className="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
+            <span className="text-zinc-300">Editing help</span>
+            <span>/ commands</span>
+            <span>@ mentions</span>
+            <span>+ insert</span>
+            <span>- [ ] tasks</span>
+          </div>
+        </div>
+      )}
+
+      {hasActiveTasks && showLockWarning && (
+        <div className="flex items-center gap-2 bg-amber-950/40 border-b border-amber-800/40 px-6 py-2">
+          <span className="text-sm text-amber-300">Tasks are active in this note. Edit anyway?</span>
+          <button onClick={() => setShowLockWarning(false)} className="text-xs text-amber-400 underline">Yes, edit</button>
+        </div>
+      )}
+
+      {saveError && (
+        <div className="flex items-center justify-between gap-2 bg-red-950/40 border-b border-red-800/40 px-6 py-2">
+          <span className="text-sm text-red-300">{saveError}</span>
+          <button onClick={() => setSaveError(null)} className="text-zinc-500 hover:text-zinc-300"><X size={14} /></button>
+        </div>
+      )}
+
+      {staleReloaded && (
+        <div className="flex items-center justify-between gap-2 bg-blue-950/40 border-b border-blue-800/40 px-6 py-2">
+          <span className="text-sm text-blue-300">This note was edited elsewhere — reloaded the latest version to avoid overwriting it.</span>
+          <button onClick={() => setStaleReloaded(false)} className="text-zinc-500 hover:text-zinc-300"><X size={14} /></button>
+        </div>
+      )}
+
+      {allTasksDone && !allDoneDismissed && (
+        <div className="flex items-center justify-between bg-emerald-950/40 border-b border-emerald-800/40 px-6 py-2">
+          <div className="flex items-center gap-2">
+            <CheckCircle2 size={14} className="text-emerald-400" />
+            <span className="text-sm text-emerald-300">All tasks complete!</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <button onClick={handleExport}
+              className="flex items-center gap-1.5 rounded-md bg-emerald-900/60 px-3 py-1 text-xs font-medium text-emerald-300 hover:bg-emerald-900 transition-colors">
+              <Download size={12} /> Export .md
+            </button>
+            <button onClick={() => setAllDoneDismissed(true)} className="text-zinc-600 hover:text-zinc-400 transition-colors">
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-1 overflow-hidden">
+        {/* ── Editor pane ── */}
+        {showEditorPane && (
+          <div
+            className={`flex min-w-0 flex-col overflow-y-auto px-6 py-6 ${
+              effectiveViewMode === "split"
+                ? "basis-[56%] border-r border-zinc-800"
+                : "flex-1"
+            }`}
+          >
+            <div className="mb-1 text-xs font-medium text-zinc-500">{formatTodayHeader()}</div>
+            <input ref={titleRef} value={title} onChange={handleTitleChange}
+              className="mb-4 w-full bg-transparent text-2xl font-semibold text-zinc-100 outline-none placeholder-zinc-700"
+              placeholder="Untitled" />
+
+            <div className="flex flex-1 gap-0">
+              {/* ── Left badge gutter ── */}
+              <div className="relative shrink-0 border-r border-zinc-800/60 mr-3 transition-[width]" style={{ width: gutterWidth }}>
+                {badgeRows.map(({ lineIndex, task }) => (
+                  <Link key={lineIndex} href={`/tasks/${task.id}`} title={task.title}
+                    className="absolute right-1 flex items-center justify-end opacity-80 hover:opacity-100 transition-opacity"
+                    style={{ top: badgePositions[lineIndex] ?? lineIndex * 24, height: 24 }}>
+                    <StatusDot status={task.status} />
+                  </Link>
+                ))}
+              </div>
+
+              {/* ── Text editor (overlay + textarea) ── */}
+              <div className="relative flex-1">
+                <div ref={overlayRef} dir="ltr"
+                  className="pointer-events-none absolute inset-0 z-10 whitespace-pre-wrap break-words font-mono text-sm leading-6 text-zinc-300 selection:bg-blue-500/30"
+                  aria-hidden>
+                  <EditorOverlay content={content} />
+                </div>
+
+                <textarea dir="ltr" ref={textareaRef} value={content}
+                  onChange={handleContentChange}
+                  onCompositionEnd={(e) => {
+                    const ta = e.target as HTMLTextAreaElement;
+                    p.savedCursor.current = { start: ta.selectionStart, end: ta.selectionEnd };
+                    setContent(ta.value);
+                    p.detectTriggers(ta.value, ta.selectionStart);
+                    let newTitle = title;
+                    if (!userEditedTitle.current) {
+                      const extracted = extractTitleFromContent(ta.value);
+                      if (extracted) { newTitle = extracted; setTitle(newTitle); }
+                    }
+                    scheduleSave(newTitle, ta.value);
+                  }}
+                  onKeyDown={handleKeyDown}
+                  onPaste={() => pushHistoryImmediate(content)}
+                  onFocus={() => { if (hasActiveTasks && note.isLocked) setShowLockWarning(true); }}
+                  onDragOver={(e) => {
+                    if (e.dataTransfer.types.includes("application/brief-note-title")) {
+                      e.preventDefault(); e.dataTransfer.dropEffect = "copy";
+                    }
+                  }}
+                  onDrop={(e) => {
+                    const droppedTitle = e.dataTransfer.getData("application/brief-note-title");
+                    if (!droppedTitle) return;
+                    e.preventDefault();
+                    const ta = textareaRef.current;
+                    if (!ta) return;
+                    let insertPos: number | null = null;
+                    const d = document as unknown as {
+                      caretPositionFromPoint?: (x: number, y: number) => { offset: number } | null;
+                      caretRangeFromPoint?: (x: number, y: number) => { startOffset: number } | null;
+                    };
+                    const caret =
+                      d.caretPositionFromPoint?.(e.clientX, e.clientY) ??
+                      (d.caretRangeFromPoint
+                        ? (() => { const r = d.caretRangeFromPoint!(e.clientX, e.clientY); return r ? { offset: r.startOffset } : null; })()
+                        : null);
+                    if (caret && typeof caret.offset === "number") {
+                      insertPos = Math.min(caret.offset, content.length);
+                    }
+                    if (insertPos === null) {
+                      const rect = ta.getBoundingClientRect();
+                      const relY = e.clientY - rect.top;
+                      const lineIndex = Math.max(0, Math.floor(relY / 24));
+                      const lines = content.split("\n");
+                      const targetLine = Math.min(lineIndex, lines.length - 1);
+                      insertPos = lines.slice(0, targetLine).reduce((acc, l) => acc + l.length + 1, 0) + lines[targetLine].length;
+                    }
+                    const link = ` [[${droppedTitle}]]`;
+                    const newContent = content.slice(0, insertPos) + link + content.slice(insertPos);
+                    p.savedCursor.current = { start: insertPos + link.length, end: insertPos + link.length };
+                    setContent(newContent);
+                    scheduleSave(title, newContent);
+                  }}
+                  onContextMenu={handleContextMenu}
+                  onBlur={() => {
+                    setTimeout(() => { p.setMentionQuery(null); p.setSlashQuery(null); p.setNoteQuery(null); p.setTaskQuery(null); p.setPriorityQuery(null); p.setPlusOpen(false); p.setTemplateOpen(false); p.setDropdownPos(null); }, 150);
+                    setTimeout(() => { p.setSoftHint(null); p.setContextMenu(null); }, 300);
+                  }}
+                  className="relative z-20 min-h-[400px] w-full overflow-hidden resize-none bg-transparent font-mono text-sm leading-6 text-transparent outline-none placeholder-zinc-700 caret-zinc-300"
+                  placeholder={`Write a note…\n\nTip: / for commands · + to insert a link · @name to mention · - [ ] for tasks`}
+                  spellCheck={false} />
+
+                {/* ── Dropdowns ── */}
+                {/* Desktop pos (undefined on mobile — bottom sheet handles layout) */}
+                {p.softHint && p.mentionQuery === null && p.slashQuery === null && (
+                  <SoftHintBar handle={p.softHint.handle} onAccept={p.applySoftHint} onDismiss={() => p.setSoftHint(null)} />
+                )}
+
+                <PickerShell
+                  open={p.slashQuery !== null && (isMobile || !!p.dropdownPos)}
+                  onClose={() => { p.setSlashQuery(null); p.setDropdownPos(null); }}
+                  title="Commands"
+                  isMobile={isMobile}
+                >
+                  {p.slashSuggestions.length > 0 ? (
+                    <SlashPalette
+                      suggestions={p.slashSuggestions}
+                      activeIndex={p.slashIndex}
+                      pos={isMobile ? undefined : p.dropdownPos!}
+                      onPick={p.executeSlashCommand}
+                    />
+                  ) : (
+                    <div className="rounded-lg border border-zinc-800 bg-zinc-900 px-3 py-2 text-xs text-zinc-500">
+                      No commands match <span className="text-zinc-300">/{p.slashQuery}</span>. Try `/date`, `/table`, or `/h1`.
+                    </div>
+                  )}
+                </PickerShell>
+
+                <PickerShell
+                  open={p.mentionQuery !== null && p.mentionSuggestions.length > 0 && (isMobile || !!p.dropdownPos)}
+                  onClose={() => { p.setMentionQuery(null); p.setDropdownPos(null); }}
+                  title="Mention"
+                  isMobile={isMobile}
+                >
+                  <MentionDropdown
+                    suggestions={p.mentionSuggestions}
+                    activeIndex={p.mentionIndex}
+                    pos={isMobile ? undefined : p.dropdownPos!}
+                    onPick={p.insertMention}
+                  />
+                </PickerShell>
+
+                <PickerShell
+                  open={isMobile ? !!p.datePickerPos : !!p.datePickerPos}
+                  onClose={() => p.setDatePickerPos(null)}
+                  title="Insert date"
+                  isMobile={isMobile}
+                >
+                  <DatePickerDropdown
+                    pos={isMobile ? undefined : p.datePickerPos!}
+                    startDate={p.datePickerStart}
+                    endDate={p.datePickerEnd}
+                    onStartChange={p.setDatePickerStart}
+                    onEndChange={p.setDatePickerEnd}
+                    onConfirm={p.confirmDatePicker}
+                    onCancel={() => p.setDatePickerPos(null)}
+                  />
+                </PickerShell>
+
+                <PickerShell
+                  open={p.plusOpen && (isMobile || !!p.dropdownPos)}
+                  onClose={() => { p.setPlusOpen(false); p.setDropdownPos(null); }}
+                  title="Insert"
+                  isMobile={isMobile}
+                >
+                  <PlusPickerDropdown
+                    pos={isMobile ? undefined : p.dropdownPos!}
+                    onPick={p.triggerPlusOption}
+                  />
+                </PickerShell>
+
+                <PickerShell
+                  open={p.taskQuery !== null && (isMobile || !!p.dropdownPos)}
+                  onClose={() => { p.setTaskQuery(null); p.setDropdownPos(null); }}
+                  title="Link task"
+                  isMobile={isMobile}
+                >
+                  <TaskPickerDropdown
+                    suggestions={p.taskSuggestions}
+                    activeIndex={p.taskIndex}
+                    pos={isMobile ? undefined : p.dropdownPos!}
+                    onPick={p.insertTaskRef}
+                  />
+                </PickerShell>
+
+                <PickerShell
+                  open={p.priorityQuery !== null && p.prioritySuggestions.length > 0 && (isMobile || !!p.dropdownPos)}
+                  onClose={() => { p.setPriorityQuery(null); p.setDropdownPos(null); }}
+                  title="Set priority"
+                  isMobile={isMobile}
+                >
+                  <PriorityPickerDropdown
+                    suggestions={p.prioritySuggestions}
+                    activeIndex={p.priorityIndex}
+                    pos={isMobile ? undefined : p.dropdownPos!}
+                    onPick={p.insertPriority}
+                  />
+                </PickerShell>
+
+                <PickerShell
+                  open={p.noteQuery !== null && (isMobile || !!p.dropdownPos)}
+                  onClose={() => { p.setNoteQuery(null); p.setDropdownPos(null); }}
+                  title="Link note"
+                  isMobile={isMobile}
+                >
+                  <NotePickerDropdown
+                    suggestions={p.noteSuggestions}
+                    activeIndex={p.noteIndex}
+                    pos={isMobile ? undefined : p.dropdownPos!}
+                    onPick={p.insertNoteLink}
+                  />
+                </PickerShell>
+
+                <PickerShell
+                  open={p.templateOpen && (isMobile || !!p.dropdownPos)}
+                  onClose={() => { p.setTemplateOpen(false); p.setDropdownPos(null); }}
+                  title="Templates"
+                  isMobile={isMobile}
+                >
+                  <TemplatePickerDropdown
+                    pos={isMobile ? undefined : p.dropdownPos!}
+                    onPick={p.insertTemplate}
+                  />
+                </PickerShell>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* ── Preview pane ── */}
+        {showPreviewPane && (
+          <div
+            className={
+              effectiveViewMode === "preview"
+                ? "flex-1 min-w-0 [&>div]:w-full"
+                : "basis-[44%] min-w-0"
+            }
+          >
+            <PreviewPane title={title} content={content} notesList={notesList} tasksList={tasksList} onToggleTask={toggleTaskInPreview} />
+          </div>
+        )}
+      </div>
+
+      {/* Right-click context menu */}
+      {p.contextMenu && (
+        <EditorContextMenu
+          pos={{ top: p.contextMenu.top, left: p.contextMenu.left }}
+          menuRef={p.contextMenuRef}
+          onBold={() => p.applyContextFormat("bold")}
+          onItalic={() => p.applyContextFormat("italic")}
+          onStrike={() => p.applyContextFormat("strike")}
+          onMakeTask={p.convertSelectionToTask}
+          onCopyLink={copyDeepLink}
+        />
+      )}
+    </div>
+  );
+}