@knotpad/app 0.1.5 → 0.1.6

package/components/layout/notes-panel.tsx

@@ -0,0 +1,476 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useSearchParams, useRouter } from "next/navigation";
+import { FilePlus, FolderPlus } from "lucide-react";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { SyncIndicator } from "@/components/sync/sync-indicator";
+import { useIsElectron } from "@/lib/use-is-electron";
+import { ConflictViewer } from "@/components/sync/conflict-viewer";
+import { WorkspaceSwitcher } from "@/components/layout/workspace-switcher";
+import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
+import type { NoteItem, FolderItem, TaskItem, NotesPanelProps, UserWorkspace } from "./notes-panel-types";
+import { statusDot, MULTI_SELECT_VIEWS } from "./notes-panel-types";
+import { TaskTabContent } from "./notes-panel-task-tab";
+import { NoteItemRow } from "./notes-panel-note-item";
+import { FolderTreeItem } from "./notes-panel-folder";
+
+export type { NotesPanelProps, NoteItem, FolderItem, TaskItem, UserWorkspace };
+
+export function NotesPanel({ notes, folders, tasks, workspaces, activeWorkspaceId, activeNoteId: activeNoteIdProp }: NotesPanelProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const kanbanStatuses = useKanbanStatuses();
+  const isElectron = useIsElectron();
+  const taskStatusOrder = kanbanStatuses.filter((s) => s.isVisible).map((s) => s.key);
+  const taskStatusLabels = Object.fromEntries(kanbanStatuses.map((s) => [s.key, s.label]));
+  const activeStatusKeys = kanbanStatuses.filter((s) => s.isVisible && s.key !== "OPEN" && s.key !== "DONE").map((s) => s.key);
+
+  // The layout doesn't pass an explicit active note, so derive it from the URL
+  // (/notes/<id>). Drives sidebar highlighting and "deleted the open note" nav.
+  const activeNoteId =
+    activeNoteIdProp ?? (pathname.startsWith("/notes/") ? pathname.split("/")[2] : undefined);
+  const [panelTab, setPanelTab] = useState<"notes" | "tasks">(() => {
+    if (typeof window !== "undefined") {
+      return (localStorage.getItem("brief_panel_tab") as "notes" | "tasks") ?? "notes";
+    }
+    return "notes";
+  });
+  const [creating, setCreating] = useState(false);
+  const [showConflicts, setShowConflicts] = useState(false);
+  const [syncRefreshSignal, setSyncRefreshSignal] = useState(0);
+  const [deleteError, setDeleteError] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState<string | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // ── Folder state ──────────────────────────────────────────────────────────
+  const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
+  const [creatingFolder, setCreatingFolder] = useState(false);
+  const [newFolderName, setNewFolderName] = useState("");
+  const [folderMenuOpen, setFolderMenuOpen] = useState<string | null>(null);
+  const [renamingFolderId, setRenamingFolderId] = useState<string | null>(null);
+  const [folderRenameValue, setFolderRenameValue] = useState("");
+  const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
+  const folderMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    function onDown(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(null);
+        setConfirmDelete(null);
+      }
+    }
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [menuOpen]);
+
+  useEffect(() => {
+    if (!folderMenuOpen) return;
+    function onDown(e: MouseEvent) {
+      if (folderMenuRef.current && !folderMenuRef.current.contains(e.target as Node)) setFolderMenuOpen(null);
+    }
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [folderMenuOpen]);
+
+  const isMultiSelectView = MULTI_SELECT_VIEWS.some((v) => pathname.startsWith(v));
+  const isGraphView = pathname.startsWith("/graph");
+  const isKanbanOrList = pathname.startsWith("/kanban") || pathname.startsWith("/list");
+  const isCalendarView = pathname.startsWith("/calendar");
+  const filterNoteId = searchParams.get("note") ?? undefined;
+  const filterFolderId = searchParams.get("folder") ?? undefined;
+  const graphNotes = searchParams.get("notes")?.split(",").filter(Boolean) ?? [];
+
+  async function handleNewNote() {
+    setCreating(true);
+    try {
+      const activeNote = notes.find((n) => n.id === activeNoteId);
+      const body: Record<string, unknown> = { title: "Untitled", content: "" };
+      if (activeNote?.folderId) body.folderId = activeNote.folderId;
+      const res = await fetch("/api/notes", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body),
+      });
+      if (res.ok) {
+        const note = await res.json();
+        router.push(`/notes/${note.id}`);
+        router.refresh();
+      }
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function handleDelete(noteId: string) {
+    setDeleteError(null);
+    try {
+      const res = await fetch(`/api/notes/${noteId}`, { method: "DELETE" });
+      if (!res.ok) throw new Error(`${res.status}`);
+      setMenuOpen(null);
+      setConfirmDelete(null);
+      if (activeNoteId === noteId) router.push("/notes");
+      router.refresh();
+    } catch {
+      setDeleteError("Couldn't delete note — please try again.");
+      setConfirmDelete(null);
+    }
+  }
+
+  function startRename(note: NoteItem) {
+    setRenamingId(note.id);
+    setRenameValue(note.title);
+    setMenuOpen(null);
+    setConfirmDelete(null);
+  }
+
+  async function submitRename(noteId: string) {
+    const trimmed = renameValue.trim();
+    if (!trimmed) { setRenamingId(null); return; }
+    await fetch(`/api/notes/${noteId}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title: trimmed }),
+    });
+    setRenamingId(null);
+    router.refresh();
+  }
+
+  // ── Folder actions ──────────────────────────────────────────────────────────
+  async function submitNewFolder() {
+    const name = newFolderName.trim();
+    setCreatingFolder(false);
+    setNewFolderName("");
+    if (!name) return;
+    await fetch("/api/folders", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    });
+    router.refresh();
+  }
+
+  async function submitFolderRename(folderId: string) {
+    const name = folderRenameValue.trim();
+    setRenamingFolderId(null);
+    if (!name) return;
+    await fetch(`/api/folders/${folderId}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name }),
+    });
+    router.refresh();
+  }
+
+  async function deleteFolder(folderId: string) {
+    setFolderMenuOpen(null);
+    await fetch(`/api/folders/${folderId}`, { method: "DELETE" });
+    router.refresh();
+  }
+
+  async function moveNoteToFolder(noteId: string, folderId: string | null) {
+    await fetch(`/api/notes/${noteId}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ folderId }),
+    });
+    router.refresh();
+  }
+
+  function toggleCollapse(folderId: string) {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(folderId)) next.delete(folderId);
+      else next.add(folderId);
+      return next;
+    });
+  }
+
+  const handleNoteClick = useCallback(
+    (e: React.MouseEvent, noteId: string) => {
+      if (!isMultiSelectView || pathname.startsWith("/notes") || pathname === "/") return;
+      e.preventDefault();
+      if (isGraphView) {
+        const params = new URLSearchParams(searchParams.toString());
+        if (e.ctrlKey || e.metaKey) {
+          const next = graphNotes.includes(noteId)
+            ? graphNotes.filter((id) => id !== noteId)
+            : [...graphNotes, noteId];
+          if (next.length === 0) params.delete("notes");
+          else params.set("notes", next.join(","));
+        } else {
+          if (graphNotes.length === 1 && graphNotes[0] === noteId) params.delete("notes");
+          else params.set("notes", noteId);
+        }
+        router.push(`${pathname}?${params.toString()}`);
+        return;
+      }
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("folder"); // mutually exclusive with note filter
+      if (filterNoteId === noteId) params.delete("note");
+      else params.set("note", noteId);
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [pathname, searchParams, isMultiSelectView, isGraphView, filterNoteId, graphNotes, router]
+  );
+
+  function handleFolderClick(folderId: string) {
+    // Graph view: select all notes in the folder
+    if (isGraphView) {
+      const folderNoteIds = notesByFolder(folderId).map((n) => n.id).sort();
+      const currentNoteIds = graphNotes.slice().sort();
+      const isSame =
+        folderNoteIds.length === currentNoteIds.length &&
+        folderNoteIds.every((id, i) => id === currentNoteIds[i]);
+      const params = new URLSearchParams(searchParams.toString());
+      if (isSame) {
+        params.delete("notes");
+      } else {
+        params.set("notes", folderNoteIds.join(","));
+      }
+      router.push(`${pathname}?${params.toString()}`);
+      return;
+    }
+
+    // Calendar / Kanban / List: use folder param filter
+    if (isKanbanOrList || isCalendarView) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("note"); // mutually exclusive with folder filter
+      if (filterFolderId === folderId) params.delete("folder");
+      else params.set("folder", folderId);
+      router.push(`${pathname}?${params.toString()}`);
+      return;
+    }
+
+    // Default: just toggle collapse
+    toggleCollapse(folderId);
+  }
+
+  function noteHref(noteId: string) {
+    if (!isMultiSelectView || pathname.startsWith("/notes") || pathname === "/") {
+      return `/notes/${noteId}`;
+    }
+    if (isGraphView) return "#";
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete("folder"); // mutually exclusive with note filter
+    if (filterNoteId === noteId) params.delete("note");
+    else params.set("note", noteId);
+    return `${pathname}?${params.toString()}`;
+  }
+
+  function isNoteActive(noteId: string) {
+    if (activeNoteId) return activeNoteId === noteId;
+    if (isGraphView) return graphNotes.includes(noteId);
+    return filterNoteId === noteId;
+  }
+
+  function isFolderActive(folderId: string) {
+    if (isGraphView) {
+      const folderNoteIds = notesByFolder(folderId).map((n) => n.id).sort();
+      const currentNoteIds = graphNotes.slice().sort();
+      return (
+        folderNoteIds.length === currentNoteIds.length &&
+        folderNoteIds.every((id, i) => id === currentNoteIds[i])
+      );
+    }
+    return filterFolderId === folderId;
+  }
+
+  function renderNote(note: NoteItem) {
+    return (
+      <NoteItemRow
+        key={note.id}
+        note={note}
+        isRenaming={renamingId === note.id}
+        renameValue={renameValue}
+        onRenameChange={setRenameValue}
+        onRenameSubmit={submitRename}
+        onRenameCancel={() => setRenamingId(null)}
+        isMenuOpen={menuOpen === note.id}
+        onMenuToggle={() => { setMenuOpen(menuOpen === note.id ? null : note.id); setConfirmDelete(null); }}
+        isConfirmDelete={confirmDelete === note.id}
+        onConfirmDelete={() => setConfirmDelete(note.id)}
+        onCancelDelete={() => setConfirmDelete(null)}
+        onDelete={handleDelete}
+        onStartRename={() => startRename(note)}
+        onMoveToFolder={(noteId, folderId) => { setMenuOpen(null); moveNoteToFolder(noteId, folderId); }}
+        isActive={isNoteActive(note.id)}
+        href={noteHref(note.id)}
+        onClick={handleNoteClick}
+        onDragStart={(e, n) => {
+          e.dataTransfer.setData("application/brief-note-title", n.title);
+          e.dataTransfer.setData("application/brief-note-id", n.id);
+          // "copyMove" so both the editor (copy → insert link) and folder drop
+          // (move → file note) targets accept it. A "copy"-only source would
+          // make the folder's dropEffect="move" reject the drop.
+          e.dataTransfer.effectAllowed = "copyMove";
+        }}
+        menuRef={menuRef}
+      />
+    );
+  }
+
+  const ungrouped = notes.filter((n) => !n.folderId);
+  const notesByFolder = (folderId: string) => notes.filter((n) => n.folderId === folderId);
+
+  function handleFolderDragOver(e: React.DragEvent, folderId: string) {
+    if (e.dataTransfer.types.includes("application/brief-note-id")) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      setDragOverFolder(folderId);
+    }
+  }
+
+  function handleFolderDragLeave(folderId: string) {
+    setDragOverFolder((f) => (f === folderId ? null : f));
+  }
+
+  function handleFolderDrop(e: React.DragEvent, folderId: string) {
+    const noteId = e.dataTransfer.getData("application/brief-note-id");
+    setDragOverFolder(null);
+    if (noteId) { e.preventDefault(); moveNoteToFolder(noteId, folderId); }
+  }
+
+  return (
+    <aside className="flex w-full flex-col border-r border-zinc-800 bg-zinc-950 overflow-hidden">
+      <WorkspaceSwitcher workspaces={workspaces} activeId={activeWorkspaceId} />
+
+      <div className="flex items-center justify-between border-b border-zinc-800 px-3">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => { setPanelTab("notes"); localStorage.setItem("brief_panel_tab", "notes"); }}
+            className={`py-2.5 text-xs font-semibold uppercase tracking-wider transition-colors ${panelTab === "notes" ? "border-b-2 border-zinc-400 text-zinc-100" : "text-zinc-500 hover:text-zinc-300"}`}
+          >
+            Notes
+          </button>
+          <button
+            onClick={() => { setPanelTab("tasks"); localStorage.setItem("brief_panel_tab", "tasks"); }}
+            className={`py-2.5 text-xs font-semibold uppercase tracking-wider transition-colors ${panelTab === "tasks" ? "border-b-2 border-zinc-400 text-zinc-100" : "text-zinc-500 hover:text-zinc-300"}`}
+          >
+            Tasks
+          </button>
+        </div>
+        {panelTab === "notes" && (
+          <div className="flex items-center gap-1">
+            <button onClick={handleNewNote} disabled={creating} title="New note" className="flex h-6 w-6 items-center justify-center rounded text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300 disabled:opacity-50">
+              <FilePlus size={14} />
+            </button>
+            <button onClick={() => { setCreatingFolder(true); setNewFolderName(""); }} title="New folder" className="flex h-6 w-6 items-center justify-center rounded text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
+              <FolderPlus size={14} />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {panelTab === "notes" && isGraphView && (
+        <p className="px-3 py-1.5 text-[10px] text-zinc-700 border-b border-zinc-800/60">
+          Click to filter · Ctrl+click to multi-select
+        </p>
+      )}
+
+      {panelTab === "tasks" && (
+        <TaskTabContent
+          tasks={tasks}
+          taskStatusOrder={taskStatusOrder}
+          taskStatusLabels={taskStatusLabels}
+          activeStatusKeys={activeStatusKeys}
+          pathname={pathname}
+          searchParams={searchParams}
+        />
+      )}
+
+      {panelTab === "notes" && <nav className="flex-1 overflow-y-auto py-1">
+        {creatingFolder && (
+          <div className="px-3 py-1.5">
+            <input
+              autoFocus
+              placeholder="Folder name"
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") submitNewFolder(); if (e.key === "Escape") { setCreatingFolder(false); setNewFolderName(""); } }}
+              onBlur={submitNewFolder}
+              className="w-full rounded bg-zinc-800 px-1.5 py-0.5 text-sm text-zinc-100 outline-none ring-1 ring-zinc-600"
+            />
+          </div>
+        )}
+
+        {/* Folders */}
+        {folders.map((folder) => (
+          <FolderTreeItem
+            key={folder.id}
+            folder={folder}
+            folderNotes={notesByFolder(folder.id)}
+            isCollapsed={collapsed.has(folder.id)}
+            isFolderActive={isFolderActive(folder.id)}
+            isRenaming={renamingFolderId === folder.id}
+            renameValue={folderRenameValue}
+            onRenameChange={setFolderRenameValue}
+            onRenameSubmit={() => submitFolderRename(folder.id)}
+            onRenameCancel={() => setRenamingFolderId(null)}
+            onStartRename={() => { setRenamingFolderId(folder.id); setFolderRenameValue(folder.name); setFolderMenuOpen(null); }}
+            onToggleCollapse={() => toggleCollapse(folder.id)}
+            onClick={() => handleFolderClick(folder.id)}
+            onDelete={() => deleteFolder(folder.id)}
+            isMenuOpen={folderMenuOpen === folder.id}
+            onMenuToggle={() => setFolderMenuOpen(folderMenuOpen === folder.id ? null : folder.id)}
+            menuRef={folderMenuRef}
+            dragOverFolder={dragOverFolder}
+            onDragOver={handleFolderDragOver}
+            onDragLeave={handleFolderDragLeave}
+            onDrop={handleFolderDrop}
+            renderNote={renderNote}
+          />
+        ))}
+
+        {/* Ungrouped notes — also a drop target to remove from a folder */}
+        <div
+          onDragOver={(e) => {
+            if (e.dataTransfer.types.includes("application/brief-note-id")) { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setDragOverFolder("__none__"); }
+          }}
+          onDragLeave={() => setDragOverFolder((f) => (f === "__none__" ? null : f))}
+          onDrop={(e) => {
+            const noteId = e.dataTransfer.getData("application/brief-note-id");
+            setDragOverFolder(null);
+            if (noteId) { e.preventDefault(); moveNoteToFolder(noteId, null); }
+          }}
+          className={dragOverFolder === "__none__" ? "bg-blue-900/20" : ""}
+        >
+          {folders.length > 0 && ungrouped.length > 0 && (
+            <p className="px-3 pt-2 pb-0.5 text-[10px] uppercase tracking-wider text-zinc-700">No folder</p>
+          )}
+          {notes.length === 0 && !creatingFolder && (
+            <p className="px-3 py-4 text-xs text-zinc-600">No notes yet. Click + to create one.</p>
+          )}
+          {ungrouped.map(renderNote)}
+        </div>
+      </nav>}
+
+      {deleteError && (
+        <div className="flex items-center justify-between gap-1 border-t border-red-800/40 bg-red-950/40 px-3 py-2">
+          <span className="text-[11px] text-red-300 leading-tight">{deleteError}</span>
+          <button onClick={() => setDeleteError(null)} className="shrink-0 text-zinc-600 hover:text-zinc-400 text-xs">✕</button>
+        </div>
+      )}
+      {isElectron && (
+        <SyncIndicator
+          onConflictClick={() => setShowConflicts(true)}
+          refreshSignal={syncRefreshSignal}
+        />
+      )}
+      {showConflicts && (
+        <ConflictViewer
+          onClose={() => setShowConflicts(false)}
+          onResolved={() => {
+            setShowConflicts(false);
+            setSyncRefreshSignal((s) => s + 1);
+          }}
+        />
+      )}
+    </aside>
+  );
+}