@knotpad/app 0.1.0 → 0.1.2

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

@@ -1,68 +0,0 @@
-"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

@@ -1,127 +0,0 @@
-"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

@@ -1,140 +0,0 @@
-"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

@@ -1,63 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-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"];