@knotpad/app 0.1.0 → 0.1.2

package/components/notes/note-editor.tsx

@@ -1,662 +0,0 @@
-"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>
-  );
-}