@knotpad/app 0.1.0

package/components/layout/mobile-top-bar.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Menu, Search, BookOpen } from "lucide-react";
+import Link from "next/link";
+import { NotificationBell } from "@/components/layout/notification-bell";
+import { FeedbackPopup } from "@/components/feedback/feedback-popup";
+import { usePathname } from "next/navigation";
+import { AppLogo } from "@/components/branding/app-logo";
+import { useCommandPalette } from "@/components/command/command-palette";
+
+const VIEW_LABELS: [string, string][] = [
+  ["/notes", "Notes"],
+  ["/list", "List"],
+  ["/kanban", "Kanban"],
+  ["/graph", "Graph"],
+  ["/calendar", "Calendar"],
+  ["/settings", "Settings"],
+  ["/tasks", "Tasks"],
+];
+
+function getViewLabel(pathname: string): string {
+  for (const [prefix, label] of VIEW_LABELS) {
+    if (pathname.startsWith(prefix)) return label;
+  }
+  return "Knotpad";
+}
+
+type Props = { onMenuClick: () => void };
+
+export function MobileTopBar({ onMenuClick }: Props) {
+  const pathname = usePathname();
+  const palette = useCommandPalette();
+
+  return (
+    <div className="flex md:hidden items-center gap-2 border-b border-zinc-800 bg-zinc-950 px-2 py-2">
+      <button
+        onClick={onMenuClick}
+        aria-label="Open notes panel"
+        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-zinc-400 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-200"
+      >
+        <Menu size={20} />
+      </button>
+      <div className="flex flex-1 items-center gap-2 text-sm font-semibold text-zinc-200">
+        <AppLogo variant="icon" className="h-5 w-5 rounded-md" />
+        <span>{getViewLabel(pathname)}</span>
+      </div>
+      <div className="flex items-center gap-1">
+        <NotificationBell />
+        <FeedbackPopup />
+        <Link
+          href="/guide"
+          aria-label="User Guide"
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-zinc-400 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-200"
+        >
+          <BookOpen size={18} />
+        </Link>
+        <div className="mx-1 w-px h-5 bg-zinc-800" />
+        <button
+          onClick={palette.open}
+          aria-label="Search"
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-zinc-400 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-200"
+        >
+          <Search size={19} />
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/layout/notes-panel-folder.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { ChevronRight, ChevronDown, MoreHorizontal, Pencil, Trash2, Folder as FolderIcon } from "lucide-react";
+import type { NoteItem, FolderItem } from "./notes-panel-types";
+import { NoteItemRow } from "./notes-panel-note-item";
+
+type FolderTreeItemProps = {
+  folder: FolderItem;
+  folderNotes: NoteItem[];
+  isCollapsed: boolean;
+  isFolderActive: boolean;
+  isRenaming: boolean;
+  renameValue: string;
+  onRenameChange: (value: string) => void;
+  onRenameSubmit: () => void;
+  onRenameCancel: () => void;
+  onStartRename: () => void;
+  onToggleCollapse: () => void;
+  onClick: () => void;
+  onDelete: () => void;
+  isMenuOpen: boolean;
+  onMenuToggle: () => void;
+  menuRef: React.RefObject<HTMLDivElement | null>;
+  dragOverFolder: string | null;
+  onDragOver: (e: React.DragEvent, folderId: string) => void;
+  onDragLeave: (folderId: string) => void;
+  onDrop: (e: React.DragEvent, folderId: string) => void;
+  renderNote: (note: NoteItem) => React.ReactNode;
+};
+
+export function FolderTreeItem({
+  folder,
+  folderNotes,
+  isCollapsed,
+  isFolderActive,
+  isRenaming,
+  renameValue,
+  onRenameChange,
+  onRenameSubmit,
+  onRenameCancel,
+  onStartRename,
+  onToggleCollapse,
+  onClick,
+  onDelete,
+  isMenuOpen,
+  onMenuToggle,
+  menuRef,
+  dragOverFolder,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  renderNote,
+}: FolderTreeItemProps) {
+  return (
+    <div className="relative">
+      <div
+        onDragOver={(e) => onDragOver(e, folder.id)}
+        onDragLeave={() => onDragLeave(folder.id)}
+        onDrop={(e) => onDrop(e, folder.id)}
+        className={`flex items-center gap-1 px-2 py-1.5 ${dragOverFolder === folder.id ? "bg-blue-900/30" : ""} ${isFolderActive ? "bg-zinc-800/60" : ""}`}
+      >
+        <button
+          onClick={onToggleCollapse}
+          className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-zinc-500 hover:text-zinc-300"
+        >
+          {isCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
+        </button>
+        <div
+          onClick={onClick}
+          className={`flex min-w-0 flex-1 cursor-pointer select-none items-center gap-1 text-left ${
+            isFolderActive ? "text-zinc-200" : "text-zinc-400 hover:text-zinc-200"
+          }`}
+        >
+          <FolderIcon size={12} className="shrink-0 text-zinc-500" />
+          {isRenaming ? (
+            <input
+              autoFocus
+              value={renameValue}
+              onChange={(e) => onRenameChange(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => { if (e.key === "Enter") onRenameSubmit(); if (e.key === "Escape") onRenameCancel(); }}
+              onBlur={() => onRenameSubmit()}
+              className="flex-1 min-w-0 rounded bg-zinc-800 px-1 py-0.5 text-xs text-zinc-100 outline-none ring-1 ring-zinc-600"
+            />
+          ) : (
+            <span className="truncate text-xs font-medium">{folder.name}</span>
+          )}
+          {!isRenaming && <span className="ml-auto text-[10px] text-zinc-600">{folderNotes.length}</span>}
+        </div>
+        <button
+          onClick={onMenuToggle}
+          className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-zinc-600 hover:bg-zinc-700 hover:text-zinc-300"
+        >
+          <MoreHorizontal size={12} />
+        </button>
+      </div>
+
+      {isMenuOpen && (
+        <div ref={menuRef} className="absolute right-0 top-7 z-50 w-36 rounded-md border border-zinc-700 bg-zinc-900 py-1 shadow-xl">
+          <button onClick={onStartRename} className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-800">
+            <Pencil size={11} className="text-zinc-500" />
+            Rename
+          </button>
+          <button onClick={onDelete} className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-zinc-800">
+            <Trash2 size={11} />
+            Delete folder
+          </button>
+        </div>
+      )}
+
+      {!isCollapsed && (
+        <div
+          onDragOver={(e) => onDragOver(e, folder.id)}
+          onDragLeave={() => onDragLeave(folder.id)}
+          onDrop={(e) => onDrop(e, folder.id)}
+          className={`ml-2 border-l border-zinc-800/60 ${dragOverFolder === folder.id ? "bg-blue-900/20" : ""}`}
+        >
+          {folderNotes.length === 0 ? (
+            <p className="px-3 py-1.5 text-[11px] text-zinc-700">Empty — drag notes here</p>
+          ) : (
+            folderNotes.map(renderNote)
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/layout/notes-panel-note-item.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import Link from "next/link";
+import { Lock, MoreHorizontal, Pencil, Trash2, Folder as FolderIcon } from "lucide-react";
+import type { NoteItem } from "./notes-panel-types";
+import { statusDot } from "./notes-panel-types";
+
+type NoteItemRowProps = {
+  note: NoteItem;
+  isRenaming: boolean;
+  renameValue: string;
+  onRenameChange: (value: string) => void;
+  onRenameSubmit: (noteId: string) => void;
+  onRenameCancel: () => void;
+  isMenuOpen: boolean;
+  onMenuToggle: () => void;
+  isConfirmDelete: boolean;
+  onConfirmDelete: () => void;
+  onCancelDelete: () => void;
+  onDelete: (noteId: string) => void;
+  onStartRename: () => void;
+  onMoveToFolder: (noteId: string, folderId: string | null) => void;
+  isActive: boolean;
+  href: string;
+  onClick: (e: React.MouseEvent, noteId: string) => void;
+  onDragStart: (e: React.DragEvent, note: NoteItem) => void;
+  menuRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export function NoteItemRow({
+  note,
+  isRenaming,
+  renameValue,
+  onRenameChange,
+  onRenameSubmit,
+  onRenameCancel,
+  isMenuOpen,
+  onMenuToggle,
+  isConfirmDelete,
+  onConfirmDelete,
+  onCancelDelete,
+  onDelete,
+  onStartRename,
+  onMoveToFolder,
+  isActive,
+  href,
+  onClick,
+  onDragStart,
+  menuRef,
+}: NoteItemRowProps) {
+  if (isRenaming) {
+    return (
+      <div className="flex items-center gap-2 px-3 py-2">
+        <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${statusDot(note)}`} />
+        <input
+          autoFocus
+          value={renameValue}
+          onChange={(e) => onRenameChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") onRenameSubmit(note.id);
+            if (e.key === "Escape") onRenameCancel();
+          }}
+          onBlur={() => onRenameSubmit(note.id)}
+          className="flex-1 min-w-0 rounded bg-zinc-800 px-1.5 py-0.5 text-sm text-zinc-100 outline-none ring-1 ring-zinc-600"
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="relative group/item">
+      <Link
+        href={href}
+        onClick={(e) => onClick(e, note.id)}
+        draggable
+        onDragStart={(e) => onDragStart(e, note)}
+        className={`flex items-start gap-2 px-3 py-2 text-sm transition-colors select-none ${
+          isActive
+            ? "bg-zinc-800 text-zinc-100"
+            : "text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200"
+        }`}
+      >
+        <span className={`mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full ${statusDot(note)}`} />
+        <div className="min-w-0 flex-1">
+          <p className="flex items-center gap-1 truncate font-medium leading-snug">
+            <span className="truncate">{note.title}</span>
+            {note.isLocked && <Lock size={9} className="shrink-0 text-zinc-600" />}
+          </p>
+          {note.taskCount > 0 && (
+            <p className="text-xs text-zinc-600">
+              {note.activeTaskCount > 0
+                ? `${note.activeTaskCount} active · ${note.taskCount} total`
+                : `${note.taskCount} tasks`}
+            </p>
+          )}
+        </div>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onMenuToggle();
+          }}
+          className="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded text-zinc-600 opacity-0 transition-opacity hover:bg-zinc-700 hover:text-zinc-300 group-hover/item:opacity-100"
+        >
+          <MoreHorizontal size={12} />
+        </button>
+      </Link>
+
+      {isMenuOpen && (
+        <div
+          ref={menuRef}
+          className="absolute right-2 top-full z-50 w-40 rounded-md border border-zinc-700 bg-zinc-900 py-1 shadow-xl"
+          onMouseDown={(e) => e.stopPropagation()}
+        >
+          <button onClick={onStartRename} className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-800">
+            <Pencil size={11} className="text-zinc-500" />
+            Rename
+          </button>
+          {note.folderId && (
+            <button onClick={() => { onMoveToFolder(note.id, null); }} className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-zinc-300 hover:bg-zinc-800">
+              <FolderIcon size={11} className="text-zinc-500" />
+              Remove from folder
+            </button>
+          )}
+          {isConfirmDelete ? (
+            <div className="flex items-center gap-1 px-3 py-1.5">
+              <span className="text-xs text-zinc-500">Delete?</span>
+              <button onClick={() => onDelete(note.id)} className="ml-auto rounded bg-red-900/60 px-2 py-0.5 text-xs text-red-300 hover:bg-red-900">Yes</button>
+              <button onClick={onCancelDelete} className="rounded px-2 py-0.5 text-xs text-zinc-500 hover:text-zinc-300">No</button>
+            </div>
+          ) : (
+            <button onClick={onConfirmDelete} className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-zinc-800">
+              <Trash2 size={11} />
+              Delete
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/layout/notes-panel-task-tab.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import Link from "next/link";
+import type { TaskItem } from "./notes-panel-types";
+import { taskStatusDot } from "./notes-panel-types";
+
+export function TaskTabContent({
+  tasks,
+  taskStatusOrder,
+  taskStatusLabels,
+  activeStatusKeys,
+  pathname,
+  searchParams,
+}: {
+  tasks: TaskItem[];
+  taskStatusOrder: string[];
+  taskStatusLabels: Record<string, string>;
+  activeStatusKeys: string[];
+  pathname: string;
+  searchParams: URLSearchParams;
+}) {
+  return (
+    <nav className="flex-1 overflow-y-auto py-1">
+      {tasks.length === 0 && (
+        <p className="px-3 py-4 text-xs text-zinc-600">No tasks yet.</p>
+      )}
+      {taskStatusOrder.map((status) => {
+        const group = tasks.filter((t) => t.status === status);
+        if (group.length === 0) return null;
+        return (
+          <div key={status}>
+            <p className="px-3 pb-0.5 pt-2 text-[10px] uppercase tracking-wider text-zinc-600">
+              {taskStatusLabels[status]}
+            </p>
+            {group.map((task) => {
+              const isActive = pathname === `/tasks/${task.id}`;
+              const from = `${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
+              return (
+                <Link
+                  key={task.id}
+                  href={`/tasks/${task.id}?from=${encodeURIComponent(from)}`}
+                  className={`flex items-start gap-2 px-3 py-2 text-sm transition-colors ${
+                    isActive
+                      ? "bg-zinc-800 text-zinc-100"
+                      : "text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200"
+                  }`}
+                >
+                  <span className={`mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full ${taskStatusDot(task.status, activeStatusKeys)}`} />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-xs font-medium leading-snug">{task.title}</p>
+                    {task.note && (
+                      <p className="truncate text-[10px] text-zinc-600">{task.note.title}</p>
+                    )}
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        );
+      })}
+    </nav>
+  );
+}

package/components/layout/notes-panel-types.ts

@@ -0,0 +1,44 @@
+import type { UserWorkspace } from "@/lib/workspace";
+
+export type { UserWorkspace };
+
+export type NoteItem = {
+  id: string;
+  title: string;
+  taskCount: number;
+  activeTaskCount: number;
+  isLocked: boolean;
+  folderId: string | null;
+};
+
+export type FolderItem = { id: string; name: string };
+
+export type TaskItem = {
+  id: string;
+  title: string;
+  status: string;
+  note: { id: string; title: string } | null;
+};
+
+export type NotesPanelProps = {
+  notes: NoteItem[];
+  folders: FolderItem[];
+  tasks: TaskItem[];
+  workspaces: UserWorkspace[];
+  activeWorkspaceId: string | null;
+  activeNoteId?: string;
+};
+
+export function taskStatusDot(status: string, activeKeys: string[]) {
+  if (activeKeys.includes(status)) return "bg-amber-400";
+  if (status === "OPEN") return "bg-emerald-400";
+  return "bg-zinc-700";
+}
+
+export function statusDot(note: NoteItem) {
+  if (note.activeTaskCount > 0) return "bg-amber-400";
+  if (note.taskCount > 0) return "bg-emerald-400";
+  return "bg-zinc-600";
+}
+
+export const MULTI_SELECT_VIEWS = ["/kanban", "/list", "/graph", "/calendar"];