@knotpad/app 0.1.0 → 0.1.1

package/components/kanban/kanban-column.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { useDroppable } from "@dnd-kit/core";
-
-type Props = {
-  id: string;
-  label: string;
-  color: string;
-  count: number;
-  children: React.ReactNode;
-  density?: "comfortable" | "compact";
-  isFilteredEmpty?: boolean;
-};
-
-export function KanbanColumn({
-  id,
-  label,
-  color,
-  count,
-  children,
-  density = "comfortable",
-  isFilteredEmpty = false,
-}: Props) {
-  const { setNodeRef, isOver } = useDroppable({ id });
-
-  return (
-    <section
-      ref={setNodeRef}
-      className={`flex w-full shrink-0 flex-col overflow-y-auto rounded-lg border md:w-64 md:min-h-0 ${color} bg-zinc-900/60 transition-colors ${
-        isOver ? "bg-zinc-800/80" : ""
-      }`}
-    >
-      <header className="sticky top-0 z-10 flex items-center justify-between border-b border-zinc-800 bg-zinc-950/95 px-3 py-2.5 backdrop-blur">
-        <span className="text-xs font-semibold text-zinc-400">{label}</span>
-        <span className="text-xs text-zinc-600">{count}</span>
-      </header>
-      <div
-        className={`flex flex-col overscroll-contain ${density === "compact" ? "gap-2 p-2" : "gap-3 p-3"} md:min-h-[120px]`}
-      >
-        {children}
-        {isFilteredEmpty ? (
-          <p className="py-6 text-center text-xs text-zinc-600">No matching tasks in this column</p>
-        ) : count === 0 ? (
-          <p className="py-6 text-center text-xs text-zinc-700">Drop here</p>
-        ) : null}
-      </div>
-    </section>
-  );
-}

package/components/kanban/kanban-status-context.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { createContext, useContext } from "react";
-import type { KanbanStatusConfig } from "@/lib/kanban-status";
-
-const KanbanStatusContext = createContext<KanbanStatusConfig[] | null>(null);
-
-export function KanbanStatusProvider({
-  statuses,
-  children,
-}: {
-  statuses: KanbanStatusConfig[];
-  children: React.ReactNode;
-}) {
-  return (
-    <KanbanStatusContext.Provider value={statuses}>
-      {children}
-    </KanbanStatusContext.Provider>
-  );
-}
-
-export function useKanbanStatuses(): KanbanStatusConfig[] {
-  const ctx = useContext(KanbanStatusContext);
-  if (!ctx) {
-    throw new Error("useKanbanStatuses must be used within KanbanStatusProvider");
-  }
-  return ctx;
-}

package/components/landing/calendar-sandbox.test.tsx

@@ -1,15 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { createMockWorkspace } from "@/components/landing/mock-workspace";
-import { CalendarSandbox } from "@/components/landing/calendar-sandbox";
-
-describe("CalendarSandbox", () => {
-  it("shows month grid with task chips", () => {
-    render(<CalendarSandbox workspace={createMockWorkspace()} />);
-
-    expect(screen.getByText("Calendar")).toBeInTheDocument();
-    expect(screen.getByText("June 2026")).toBeInTheDocument();
-    expect(screen.getByText("Tighten hero copy")).toBeInTheDocument();
-  });
-});

package/components/landing/calendar-sandbox.tsx

@@ -1,107 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import type { MockWorkspace } from "@/components/landing/mock-workspace";
-
-const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-
-const STATUS_CHIP: Record<string, string> = {
-  Open: "bg-zinc-600",
-  "In Progress": "bg-blue-600",
-  Review: "bg-amber-600",
-  Done: "bg-emerald-600",
-};
-
-export function CalendarSandbox({ workspace }: { workspace: MockWorkspace }) {
-  const year = 2026;
-  const month = 5; // June (0-indexed)
-  const today = "2026-06-14";
-
-  const firstDay = new Date(year, month, 1);
-  const lastDay = new Date(year, month + 1, 0);
-  const startDow = firstDay.getDay();
-  const totalCells = Math.ceil((startDow + lastDay.getDate()) / 7) * 7;
-
-  const cellKeys: (string | null)[] = Array.from({ length: totalCells }, (_, i) => {
-    const d = i - startDow + 1;
-    if (d < 1 || d > lastDay.getDate()) return null;
-    return `2026-06-${String(d).padStart(2, "0")}`;
-  });
-
-  const weeks: (string | null)[][] = [];
-  for (let i = 0; i < cellKeys.length; i += 7) weeks.push(cellKeys.slice(i, i + 7));
-
-  const tasksByDate = useMemo(() => {
-    const map: Record<string, typeof workspace.tasks> = {};
-    for (const task of workspace.tasks) {
-      (map[task.dueDate] ??= []).push(task);
-    }
-    return map;
-  }, [workspace.tasks]);
-
-  return (
-    <div className="flex h-full flex-col rounded-xl border border-zinc-800 bg-zinc-950">
-      <div className="border-b border-zinc-800 px-4 py-2.5 flex items-center justify-between">
-        <div>
-          <p className="text-[11px] uppercase tracking-wider text-zinc-600">Calendar</p>
-          <p className="text-xs text-zinc-500">June 2026</p>
-        </div>
-      </div>
-
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <div className="grid grid-cols-7 border-b border-zinc-800">
-          {DAYS.map((d) => (
-            <div key={d} className="py-1.5 text-center text-[11px] font-medium text-zinc-600">{d}</div>
-          ))}
-        </div>
-
-        <div className="flex-1 flex flex-col">
-          {weeks.map((week, wi) => (
-            <div key={wi} className="grid grid-cols-7 flex-1 border-b border-zinc-800/40">
-              {week.map((key, di) => {
-                const isToday = key === today;
-                const isCurrentMonth = key !== null;
-                const dayTasks = key ? (tasksByDate[key] ?? []) : [];
-
-                return (
-                  <div
-                    key={di}
-                    className={`border-r border-zinc-800/60 p-1.5 flex flex-col gap-1 ${
-                      !isCurrentMonth ? "bg-zinc-900/20" : ""
-                    }`}
-                  >
-                    {key && (
-                      <>
-                        <div className={`mb-0.5 flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-medium ${
-                          isToday ? "bg-blue-500 text-white" : "text-zinc-600"
-                        }`}>
-                          {new Date(key + "T00:00:00").getDate()}
-                        </div>
-                        <div className="flex flex-col gap-0.5">
-                          {dayTasks.slice(0, 3).map((task) => (
-                            <div
-                              key={task.id}
-                              className={`truncate rounded border border-black/20 px-1 py-0.5 text-[10px] text-white ${
-                                STATUS_CHIP[task.status] ?? "bg-zinc-600"
-                              }`}
-                              title={task.title}
-                            >
-                              {task.title}
-                            </div>
-                          ))}
-                          {dayTasks.length > 3 && (
-                            <span className="text-[10px] text-zinc-600 pl-0.5">+{dayTasks.length - 3} more</span>
-                          )}
-                        </div>
-                      </>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/components/landing/graph-sandbox.test.tsx

@@ -1,27 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { createMockWorkspace } from "@/components/landing/mock-workspace";
-import { GraphSandbox } from "@/components/landing/graph-sandbox";
-
-vi.mock("next/navigation", () => ({
-  useRouter: () => ({ push: vi.fn(), replace: vi.fn(), refresh: vi.fn() }),
-  usePathname: () => "/",
-  useSearchParams: () => new URLSearchParams(),
-}));
-
-class MockResizeObserver {
-  observe = vi.fn();
-  disconnect = vi.fn();
-  unobserve = vi.fn();
-}
-global.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
-
-describe("GraphSandbox", () => {
-  it("renders the graph view header", () => {
-    render(<GraphSandbox workspace={createMockWorkspace()} />);
-
-    expect(screen.getByText("Graph")).toBeInTheDocument();
-    expect(screen.getByText("Relationship view")).toBeInTheDocument();
-  });
-});

package/components/landing/graph-sandbox.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import { useMemo, useRef } from "react";
-import { GraphView } from "@/components/graph/graph-view";
-import type { GraphViewHandle } from "@/components/graph/graph-types";
-import type { GraphNode, GraphEdge } from "@/app/api/graph/route";
-import type { MockWorkspace } from "@/components/landing/mock-workspace";
-
-export function GraphSandbox({ workspace }: { workspace: MockWorkspace }) {
-  const graphRef = useRef<GraphViewHandle>(null);
-
-  const { nodes, edges } = useMemo(() => {
-    const n: GraphNode[] = [];
-    const e: GraphEdge[] = [];
-    const edgeSet = new Set<string>();
-
-    function addEdge(source: string, target: string, type: GraphEdge["type"]) {
-      const key = `${source}→${target}:${type}`;
-      if (edgeSet.has(key)) return;
-      edgeSet.add(key);
-      e.push({ source, target, type });
-    }
-
-    // Folder
-    n.push({ id: `folder-${workspace.folder.id}`, type: "folder", label: workspace.folder.name });
-
-    // Notes
-    for (const note of workspace.notes) {
-      n.push({ id: `note-${note.id}`, type: "note", label: note.title, href: "#" });
-      addEdge(`folder-${workspace.folder.id}`, `note-${note.id}`, "contains");
-    }
-
-    // Tasks and assignees
-    for (const task of workspace.tasks) {
-      const note = workspace.notes.find((n) => n.id === task.noteId);
-      if (!note) continue;
-
-      const isAgent = task.assignee === "agent";
-      const taskNodeId = `task-${task.id}`;
-      n.push({
-        id: taskNodeId,
-        type: isAgent ? "agent" : "task",
-        label: task.title,
-        status: task.status,
-      });
-      addEdge(`note-${note.id}`, taskNodeId, "contains");
-
-      // Person node
-      const person = workspace.team.find((t) => t.id === task.assignee);
-      if (person) {
-        const personId = `person-${person.id}`;
-        if (!n.some((x) => x.id === personId)) {
-          n.push({ id: personId, type: "person", label: person.name });
-        }
-        addEdge(taskNodeId, personId, "assigned");
-      }
-    }
-
-    return { nodes: n, edges: e };
-  }, [workspace]);
-
-  return (
-    <div className="h-full flex flex-col rounded-xl border border-zinc-800 bg-zinc-950 overflow-hidden">
-      <div className="border-b border-zinc-800 px-4 py-2.5">
-        <p className="text-[11px] uppercase tracking-wider text-zinc-600">Graph</p>
-        <p className="text-xs text-zinc-500">Relationship view</p>
-      </div>
-      <div className="flex-1 flex flex-col min-h-0">
-        <GraphView
-          ref={graphRef}
-          nodes={nodes}
-          edges={edges}
-          selectedNoteIds={[]}
-          searchQuery=""
-          onNoteSelect={() => {}}
-        />
-      </div>
-    </div>
-  );
-}

package/components/landing/kanban-sandbox.test.tsx

@@ -1,24 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { createMockWorkspace } from "@/components/landing/mock-workspace";
-import { KanbanSandbox } from "@/components/landing/kanban-sandbox";
-
-describe("KanbanSandbox", () => {
-  it("groups mock tasks by status", () => {
-    render(<KanbanSandbox workspace={createMockWorkspace()} />);
-
-    expect(screen.getByText("Open")).toBeInTheDocument();
-    expect(screen.getByText("In Progress")).toBeInTheDocument();
-    expect(screen.getByText("Review")).toBeInTheDocument();
-    expect(screen.getByText("Done")).toBeInTheDocument();
-    expect(screen.getByText("Build interactive showcase")).toBeInTheDocument();
-  });
-
-  it("shows app-like board metadata on task cards", () => {
-    render(<KanbanSandbox workspace={createMockWorkspace()} />);
-
-    expect(screen.getAllByText("@agent").length).toBeGreaterThan(0);
-    expect(screen.getAllByText("2026-06-15").length).toBeGreaterThan(0);
-  });
-});

package/components/landing/kanban-sandbox.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import type { MockTask, MockTaskStatus, MockWorkspace } from "@/components/landing/mock-workspace";
-
-const STATUSES: MockTaskStatus[] = ["Open", "In Progress", "Review", "Done"];
-
-export function KanbanSandbox({ workspace }: { workspace: MockWorkspace }) {
-  const [tasks, setTasks] = useState(workspace.tasks);
-  const [draggingId, setDraggingId] = useState<string | null>(null);
-
-  const grouped = useMemo(() => {
-    return Object.fromEntries(
-      STATUSES.map((status) => [status, tasks.filter((task) => task.status === status)])
-    ) as Record<MockTaskStatus, MockTask[]>;
-  }, [tasks]);
-
-  function moveTask(taskId: string, status: MockTaskStatus) {
-    setTasks((current) =>
-      current.map((task) => (task.id === taskId ? { ...task, status } : task))
-    );
-  }
-
-  const getPriorityColor = (priority?: string) => {
-    switch (priority) {
-      case "high":
-        return "bg-red-900/30 text-red-400 border-red-900/50";
-      case "medium":
-        return "bg-amber-900/30 text-amber-400 border-amber-900/50";
-      case "low":
-        return "bg-zinc-800 text-zinc-400 border-zinc-700";
-      default:
-        return "bg-zinc-800 text-zinc-500 border-zinc-700";
-    }
-  };
-
-  const getAssigneeColor = (assignee: string) => {
-    if (assignee === "agent") {
-      return "bg-blue-900/30 text-blue-400 border-blue-900/50";
-    }
-    return "bg-zinc-800 text-zinc-400 border-zinc-700";
-  };
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="grid gap-3 xl:grid-cols-4 flex-1">
-      {STATUSES.map((status) => (
-        <div
-          key={status}
-          onDragOver={(e) => e.preventDefault()}
-          onDrop={() => {
-            if (draggingId) moveTask(draggingId, status);
-            setDraggingId(null);
-          }}
-          className="rounded-xl border border-zinc-800 bg-zinc-950/80 p-3"
-        >
-          <div className="mb-3 flex items-center justify-between">
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-zinc-500">{status}</h3>
-            <span className="rounded-full border border-zinc-800 px-2 py-0.5 text-[11px] text-zinc-400">
-              {grouped[status].length}
-            </span>
-          </div>
-
-          <div className="min-h-[300px] space-y-2 rounded-lg bg-zinc-900/60 p-2">
-            {grouped[status].map((task) => (
-              <div
-                key={task.id}
-                draggable
-                onDragStart={() => setDraggingId(task.id)}
-                onDragEnd={() => setDraggingId(null)}
-                className="cursor-grab rounded-xl border border-zinc-800 bg-zinc-900 p-3 text-sm text-zinc-200 shadow-sm active:cursor-grabbing hover:border-zinc-700 transition-colors"
-              >
-                <div className="flex items-start justify-between gap-2 mb-2">
-                  <p className="text-sm text-zinc-100 leading-snug">{task.title}</p>
-                  {task.fileRef && (
-                    <span className="shrink-0 rounded border border-emerald-900/50 bg-emerald-900/20 px-1.5 py-0.5 text-[10px] text-emerald-400">
-                      &lt;{task.fileRef}&gt;
-                    </span>
-                  )}
-                </div>
-                <div className="flex flex-wrap items-center gap-2 mt-3">
-                  <span className={`rounded-full border px-2 py-0.5 text-[10px] font-medium ${getAssigneeColor(task.assignee)}`}>
-                    @{task.assignee}
-                  </span>
-                  {task.priority && (
-                    <span className={`rounded border px-1.5 py-0.5 text-[10px] font-medium ${getPriorityColor(task.priority)}`}>
-                      !{task.priority}
-                    </span>
-                  )}
-                  <span className="text-[10px] text-zinc-500">{task.dueDate}</span>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-      </div>
-
-    </div>
-  );
-}

package/components/landing/landing-showcase.test.tsx

@@ -1,21 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { WEB_ICON_PATH } from "@/lib/brand-icons";
-import { LandingShowcase } from "@/components/landing/landing-showcase";
-
-describe("LandingShowcase", () => {
-  it("prefers the dark icon asset for web metadata", () => {
-    expect(WEB_ICON_PATH).toBe("/icon_dark.svg");
-  });
-
-  it("renders four interactive tabs for the landing demo", () => {
-    render(<LandingShowcase />);
-
-    expect(screen.getByRole("tab", { name: "Notes" })).toBeInTheDocument();
-    expect(screen.getByRole("tab", { name: "Kanban" })).toBeInTheDocument();
-    expect(screen.getByRole("tab", { name: "List" })).toBeInTheDocument();
-    expect(screen.getByRole("tab", { name: "Calendar" })).toBeInTheDocument();
-    expect(screen.getByRole("tab", { name: "Graph" })).toBeInTheDocument();
-  });
-});

package/components/landing/landing-showcase.tsx

@@ -1,54 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { createMockWorkspace } from "@/components/landing/mock-workspace";
-import { NotesSandbox } from "@/components/landing/notes-sandbox";
-import { KanbanSandbox } from "@/components/landing/kanban-sandbox";
-import { CalendarSandbox } from "@/components/landing/calendar-sandbox";
-import { GraphSandbox } from "@/components/landing/graph-sandbox";
-import { AppLogo } from "@/components/branding/app-logo";
-import { ListSandbox } from "@/components/landing/list-sandbox";
-
-const TABS = ["Notes", "Kanban", "List", "Calendar", "Graph"] as const;
-type Tab = (typeof TABS)[number];
-
-export function LandingShowcase() {
-  const [activeTab, setActiveTab] = useState<Tab>("Notes");
-  const workspace = useMemo(() => createMockWorkspace(), []);
-
-  return (
-    <div className="overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900 shadow-[0_24px_80px_rgba(0,0,0,0.35)]">
-      <div className="border-b border-zinc-800 px-4 py-3 sm:flex sm:items-center sm:justify-between">
-        <div className="mb-3 sm:mb-0">
-          <AppLogo className="h-5 w-auto" />
-        </div>
-        <div className="inline-flex rounded-lg border border-zinc-800 bg-zinc-950 p-1">
-          {TABS.map((tab) => (
-            <button
-              key={tab}
-              type="button"
-              role="tab"
-              aria-selected={activeTab === tab}
-              onClick={() => setActiveTab(tab)}
-              className={`rounded-md px-3 py-1.5 text-xs transition-colors ${
-                activeTab === tab
-                  ? "bg-zinc-800 text-zinc-100"
-                  : "text-zinc-500 hover:text-zinc-300"
-              }`}
-            >
-              {tab}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div className="h-[420px] overflow-hidden bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.04),transparent_40%)] p-4 sm:p-6">
-        {activeTab === "Notes" && <NotesSandbox workspace={workspace} />}
-        {activeTab === "Kanban" && <KanbanSandbox workspace={workspace} />}
-        {activeTab === "List" && <ListSandbox workspace={workspace} />}
-        {activeTab === "Calendar" && <CalendarSandbox workspace={workspace} />}
-        {activeTab === "Graph" && <GraphSandbox workspace={workspace} />}
-      </div>
-    </div>
-  );
-}

package/components/landing/list-sandbox.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import type { MockWorkspace } from "@/components/landing/mock-workspace";
-
-export function ListSandbox({ workspace }: { workspace: MockWorkspace }) {
-  const groupedByNote = useMemo(() => {
-    return workspace.notes.map((note) => ({
-      note,
-      tasks: workspace.tasks.filter((task) => task.noteId === note.id),
-    }));
-  }, [workspace]);
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case "Open":
-        return "border-zinc-700 bg-zinc-900 text-zinc-300";
-      case "In Progress":
-        return "border-blue-900/50 bg-blue-950/40 text-blue-300";
-      case "Review":
-        return "border-amber-900/50 bg-amber-950/40 text-amber-300";
-      case "Done":
-        return "border-emerald-900/50 bg-emerald-950/40 text-emerald-300";
-      default:
-        return "border-zinc-700 bg-zinc-900 text-zinc-300";
-    }
-  };
-
-  return (
-    <div className="flex h-full flex-col overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
-      <div className="border-b border-zinc-800 px-4 py-2.5">
-        <p className="text-[11px] uppercase tracking-wider text-zinc-600">All tasks</p>
-        <p className="text-xs text-zinc-500">{workspace.tasks.length} tasks · {workspace.notes.length} notes</p>
-      </div>
-
-      <div className="flex-1 overflow-y-auto">
-        {groupedByNote.map(({ note, tasks }) => (
-          <div key={note.id} className="px-3 md:px-6 py-3 border-b border-zinc-800/60">
-            <div className="mb-2 flex items-center gap-2">
-              <span className="text-xs font-medium text-zinc-400">{note.title}</span>
-              <span className="text-[11px] text-zinc-600">{tasks.length}</span>
-            </div>
-            <div className="space-y-0.5">
-              {tasks.map((task) => {
-                const assigneeLabel =
-                  task.assignee === "agent"
-                    ? "@agent"
-                    : `@${task.assignee}`;
-                const dueStr = task.dueDate
-                  ? new Date(task.dueDate).toLocaleDateString(undefined, { month: "short", day: "numeric" })
-                  : null;
-
-                return (
-                  <div
-                    key={task.id}
-                    className="flex items-start gap-3 rounded-md px-2 py-2 transition-colors hover:bg-zinc-800/40"
-                  >
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm truncate text-zinc-200">{task.title}</p>
-                      <div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-500">
-                        <span className="truncate text-zinc-600">{note.folder}</span>
-                        {dueStr && (
-                          <>
-                            <span>·</span>
-                            <span className="text-zinc-500">{dueStr}</span>
-                          </>
-                        )}
-                        <span>·</span>
-                        <span className={task.assignee === "agent" ? "text-blue-400" : "text-zinc-500"}>
-                          {assigneeLabel}
-                        </span>
-                      </div>
-                    </div>
-                    <span className={`shrink-0 rounded border px-2 py-0.5 text-[10px] font-medium ${getStatusColor(task.status)}`}>
-                      {task.status}
-                    </span>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}