@knotpad/app 0.1.0 → 0.1.2

package/components/layout/notes-panel.tsx

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