@knotpad/app 0.1.5 → 0.1.7

package/app/(app)/calendar/page.tsx

@@ -0,0 +1,57 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { CalendarView } from "@/components/calendar/calendar-view";
+
+export default async function CalendarPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ note?: string; month?: string; folder?: string }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { note: filterNoteId, month, folder: filterFolderId } = await searchParams;
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  if (!workspaceId) redirect("/login");
+
+  const tasks = await prisma.task.findMany({
+    where: {
+      workspaceId,
+      ...(filterNoteId ? { noteId: filterNoteId } : {}),
+      ...(filterFolderId && { note: { folderId: filterFolderId } }),
+      status: { not: "DONE" },
+    },
+    orderBy: { dueDate: "asc" },
+    include: {
+      note: { select: { id: true, title: true } },
+      assignee: { select: { id: true, name: true } },
+    },
+  });
+
+  const serialized = tasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    status: t.status,
+    startDate: t.startDate?.toISOString() ?? null,
+    dueDate: t.dueDate?.toISOString() ?? null,
+    noteId: t.noteId,
+    noteTitle: t.note.title,
+    assigneeName: t.assignee?.name ?? null,
+    assigneeType: t.assigneeType,
+    claimedByAlias: t.claimedByAlias,
+  }));
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <h1 className="text-sm font-semibold text-zinc-300">
+          {filterFolderId ? "Filtered tasks" : "Calendar"}
+        </h1>
+      </div>
+      <CalendarView tasks={serialized} initialMonth={month} filterNoteId={filterNoteId} filterFolderId={filterFolderId} />
+    </div>
+  );
+}

package/app/(app)/error.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useEffect } from "react";
+import { AlertTriangle } from "lucide-react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Surfaces in the server/console; hook a real error tracker here later.
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center">
+      <AlertTriangle size={28} className="text-amber-500" />
+      <div className="space-y-1">
+        <p className="text-sm font-medium text-zinc-300">Something went wrong</p>
+        <p className="max-w-sm text-xs text-zinc-600">
+          This view failed to load. You can retry, or head back to your notes.
+        </p>
+      </div>
+      <button
+        onClick={reset}
+        className="rounded-md border border-zinc-700 px-3 py-1.5 text-sm text-zinc-300 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-100"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/app/(app)/graph/page.tsx

@@ -0,0 +1,32 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { GraphPage } from "@/components/graph/graph-page";
+
+export default async function GraphRoute({
+  searchParams,
+}: {
+  searchParams: Promise<{ notes?: string }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { notes: notesParam } = await searchParams;
+  const selectedNoteIds = notesParam ? notesParam.split(",").filter(Boolean) : [];
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <h1 className="text-sm font-semibold text-zinc-300">
+          Graph
+          {selectedNoteIds.length > 0 && (
+            <span className="ml-2 text-xs font-normal text-zinc-500">
+              — {selectedNoteIds.length} note{selectedNoteIds.length > 1 ? "s" : ""} selected
+            </span>
+          )}
+        </h1>
+      </div>
+      <GraphPage selectedNoteIds={selectedNoteIds} />
+    </div>
+  );
+}

package/app/(app)/guide/page.tsx

@@ -0,0 +1,21 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { GuideView } from "@/components/guide/guide-view";
+
+export const metadata = {
+  title: "User Guide - Knotpad",
+};
+
+export default async function GuidePage() {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <h1 className="text-sm font-semibold text-zinc-300">User Guide</h1>
+      </div>
+      <GuideView />
+    </div>
+  );
+}

package/app/(app)/kanban/loading.tsx

@@ -0,0 +1,24 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function KanbanLoading() {
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <Skeleton className="h-4 w-20" />
+      </div>
+      <div className="flex flex-1 flex-col gap-3 overflow-hidden p-3 md:flex-row md:p-4">
+        {[0, 1, 2].map((c) => (
+          <div
+            key={c}
+            className="flex w-full shrink-0 flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/40 p-2 md:w-64"
+          >
+            <Skeleton className="mb-1 h-4 w-24" />
+            {[0, 1, 2].map((card) => (
+              <Skeleton key={card} className="h-14 w-full" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/(app)/kanban/page.tsx

@@ -0,0 +1,59 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { KanbanBoard } from "@/components/kanban/kanban-board";
+
+export default async function KanbanPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ note?: string; folder?: string }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { note: filterNoteId, folder: filterFolderId } = await searchParams;
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  if (!workspaceId) redirect("/login");
+
+  const tasks = await prisma.task.findMany({
+    where: {
+      workspaceId,
+      ...(filterNoteId && { noteId: filterNoteId }),
+      ...(filterFolderId && { note: { folderId: filterFolderId } }),
+    },
+    orderBy: { createdAt: "asc" },
+    include: {
+      note: { select: { id: true, title: true, folder: { select: { id: true, name: true } } } },
+      assignee: { select: { id: true, name: true, email: true } },
+    },
+  });
+
+  // Serialize dates for the client component
+  const serialized = tasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    status: t.status,
+    claimedBy: t.claimedBy,
+    claimedByAlias: t.claimedByAlias,
+    lastHeartbeat: t.lastHeartbeat?.toISOString() ?? null,
+    assigneeType: t.assigneeType,
+    assignee: t.assignee,
+    note: t.note,
+    dueDate: t.dueDate?.toISOString() ?? null,
+  }));
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-6 py-3">
+        <h1 className="text-sm font-semibold text-zinc-300">
+          {filterNoteId || filterFolderId ? "Filtered tasks" : "Kanban"}
+        </h1>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <KanbanBoard tasks={serialized} filterNoteId={filterNoteId} filterFolderId={filterFolderId} />
+      </div>
+    </div>
+  );
+}

package/app/(app)/layout.tsx

@@ -0,0 +1,122 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { IconBar } from "@/components/layout/icon-bar";
+import { NotesPanel } from "@/components/layout/notes-panel";
+import { ProBanner } from "@/components/layout/pro-banner";
+import { AppShell } from "@/components/layout/app-shell";
+import { PaywallScreen } from "@/components/layout/paywall-screen";
+import { SessionProvider } from "next-auth/react";
+import { getActiveWorkspaceId, listUserWorkspaces } from "@/lib/workspace";
+import { getKanbanStatuses } from "@/lib/kanban-status";
+import { isWorkspacePro } from "@/lib/license";
+import { KanbanStatusProvider } from "@/components/kanban/kanban-status-context";
+import { CommandPaletteProvider } from "@/components/command/command-palette";
+import { BackupScheduler } from "@/components/layout/backup-scheduler";
+
+// Cap the shell's eager note/task fetch so navigation stays fast at scale.
+const LAYOUT_LIST_CAP = 500;
+
+const IS_CLOUD = process.env.IS_CLOUD === "true";
+
+export default async function AppLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const [workspaceId, allWorkspaces] = await Promise.all([
+    getActiveWorkspaceId(session.user.id),
+    listUserWorkspaces(session.user.id),
+  ]);
+
+  if (!workspaceId) {
+    // On cloud, a user with no Pro-accessible workspace isn't missing
+    // membership — they're FREE-only and must upgrade or be invited to a team.
+    if (IS_CLOUD) return <PaywallScreen />;
+    redirect("/login");
+  }
+
+  const workspaces = IS_CLOUD ? allWorkspaces.filter((w) => w.isPro) : allWorkspaces;
+
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id, workspaceId },
+    include: {
+      workspace: {
+        include: {
+          notes: {
+            orderBy: { updatedAt: "desc" },
+            // Bounded so the shell (and command-palette index) stay fast on
+            // large workspaces. Matches the cap on GET /api/notes.
+            take: LAYOUT_LIST_CAP,
+            include: {
+              folder: { select: { id: true, name: true } },
+              _count: { select: { tasks: true } },
+              tasks: {
+                where: { status: { in: ["CLAIMED", "IN_PROGRESS", "REVIEW"] } },
+                select: { id: true },
+              },
+            },
+          },
+          folders: { orderBy: { name: "asc" }, select: { id: true, name: true } },
+          tasks: {
+            orderBy: { updatedAt: "desc" },
+            take: LAYOUT_LIST_CAP,
+            select: {
+              id: true,
+              title: true,
+              status: true,
+              note: { select: { id: true, title: true } },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  if (!member) redirect("/login");
+
+  const notes = member.workspace.notes.map((n) => ({
+    id: n.id,
+    title: n.title,
+    taskCount: n._count.tasks,
+    activeTaskCount: n.tasks.length,
+    isLocked: n.isLocked,
+    folderId: n.folderId,
+  }));
+  const folders = member.workspace.folders;
+  const tasks = member.workspace.tasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    status: t.status,
+    note: t.note,
+  }));
+  const latestNoteId = notes[0]?.id;
+  const notesHref = latestNoteId ? `/notes/${latestNoteId}` : "/notes";
+
+  const commandData = {
+    notes: notes.map((n) => ({ id: n.id, title: n.title })),
+    tasks: tasks.map((t) => ({ id: t.id, title: t.title, note: t.note })),
+    folders,
+    notesHref,
+  };
+
+  const kanbanStatuses = await getKanbanStatuses(workspaceId);
+
+  return (
+    <SessionProvider>
+      <BackupScheduler />
+      <KanbanStatusProvider statuses={kanbanStatuses}>
+        <CommandPaletteProvider data={commandData}>
+          <div className="flex h-full flex-col overflow-hidden">
+            <ProBanner initialIsPro={isWorkspacePro(member.workspace)} />
+            <div className="flex flex-1 min-h-0 overflow-hidden">
+              <IconBar latestNoteId={latestNoteId} />
+              <AppShell panel={<NotesPanel notes={notes} folders={folders} tasks={tasks} workspaces={workspaces} activeWorkspaceId={workspaceId} />}>
+                {children}
+              </AppShell>
+            </div>
+          </div>
+        </CommandPaletteProvider>
+      </KanbanStatusProvider>
+    </SessionProvider>
+  );
+}

package/app/(app)/list/loading.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ListLoading() {
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="border-b border-zinc-800 px-3 py-3 md:px-6">
+        <Skeleton className="h-4 w-24" />
+      </div>
+      <div className="flex flex-col gap-4 px-3 py-4 md:px-6">
+        {[0, 1, 2].map((g) => (
+          <div key={g} className="space-y-2">
+            <Skeleton className="h-3 w-20" />
+            {[0, 1, 2].map((r) => (
+              <Skeleton key={r} className="h-10 w-full" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/(app)/list/page.tsx

@@ -0,0 +1,137 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { TaskList } from "@/components/tasks/task-list";
+import { TaskListFilters } from "@/components/tasks/task-list-filters";
+import { TaskStatus } from "@/app/generated/prisma/client";
+
+export default async function ListPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ 
+    note?: string; 
+    sort?: string; 
+    folder?: string; 
+    status?: string;
+    assigneeType?: string;
+    overdue?: string;
+    hasDueDate?: string;
+  }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { 
+    note: filterNoteId, 
+    sort = "status", 
+    folder: filterFolderId,
+    status: statusFilter,
+    assigneeType: assigneeFilter,
+    overdue: overdueOnly,
+    hasDueDate: hasDueDateFilter,
+  } = await searchParams;
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  if (!workspaceId) redirect("/login");
+
+  // Build status filter condition
+  const statusFilterCondition = statusFilter
+    ? { status: { in: statusFilter.split(",") as TaskStatus[] } }
+    : {};
+
+  // Build assignee filter condition
+  const assigneeFilterCondition = assigneeFilter
+    ? { assigneeType: assigneeFilter as "HUMAN" | "AGENT" }
+    : {};
+
+  // Build overdue filter condition
+  const now = new Date();
+  const overdueFilterCondition = overdueOnly === "true"
+    ? { dueDate: { lt: now }, NOT: { status: "DONE" as TaskStatus } }
+    : {};
+
+  // Build hasDueDate filter condition
+  const hasDueDateCondition = hasDueDateFilter === "true"
+    ? { dueDate: { not: null } }
+    : {};
+
+  // Get folders for filter dropdown
+  const foldersPromise = prisma.folder.findMany({
+    where: { workspaceId },
+    select: { id: true, name: true },
+    orderBy: { name: "asc" },
+  });
+
+  const [tasks, filterNote, folders] = await Promise.all([
+    prisma.task.findMany({
+      where: {
+        workspaceId,
+        ...(filterNoteId && { noteId: filterNoteId }),
+        ...(filterFolderId && { note: { folderId: filterFolderId } }),
+        ...statusFilterCondition,
+        ...assigneeFilterCondition,
+        ...overdueFilterCondition,
+        ...hasDueDateCondition,
+      },
+      orderBy: { createdAt: "desc" },
+      include: {
+        note: { select: { id: true, title: true, folder: { select: { id: true, name: true } } } },
+        assignee: { select: { id: true, name: true, email: true, image: true } },
+      },
+    }),
+    filterNoteId
+      ? prisma.note.findFirst({ where: { id: filterNoteId, workspaceId }, select: { title: true } })
+      : Promise.resolve(null),
+    foldersPromise,
+  ]);
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className="flex items-center justify-between border-b border-zinc-800 px-3 md:px-6 py-3">
+        <div className="flex items-center gap-2">
+          <h1 className="text-sm font-semibold text-zinc-300">
+            {filterNoteId || filterFolderId ? "Filtered tasks" : "All Tasks"}
+          </h1>
+          {filterNote && (
+            <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400">
+              {filterNote.title}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2 text-xs text-zinc-500">
+          <span>Sort:</span>
+          {(() => {
+            const params = new URLSearchParams();
+            if (filterNoteId) params.set("note", filterNoteId);
+            if (filterFolderId) params.set("folder", filterFolderId);
+            const baseQuery = params.toString();
+            return (
+              <>
+                <a href={`?${baseQuery ? baseQuery + "&" : ""}sort=status`}
+                  className={sort === "status" ? "text-zinc-300" : "hover:text-zinc-300"}>Status</a>
+                <span>/</span>
+                <a href={`?${baseQuery ? baseQuery + "&" : ""}sort=note`}
+                  className={sort === "note" ? "text-zinc-300" : "hover:text-zinc-300"}>Note</a>
+              </>
+            );
+          })()}
+        </div>
+      </div>
+
+      {/* Filter Bar - Tasks 2.4.1-2.4.5 */}
+      <TaskListFilters
+        folders={folders}
+        filterFolderId={filterFolderId}
+        statusFilter={statusFilter}
+        assigneeFilter={assigneeFilter}
+        overdueOnly={overdueOnly}
+        hasDueDateFilter={hasDueDateFilter}
+      />
+
+      <div className="flex-1 overflow-y-auto">
+        <TaskList tasks={tasks} groupBy={sort === "note" ? "note" : "status"} />
+      </div>
+    </div>
+  );
+}

package/app/(app)/loading.tsx

@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-4 px-6">
+      <Image
+        src="/knotpad_logo_full.svg"
+        alt="Knotpad"
+        width={200}
+        height={60}
+        className="h-16 w-auto"
+        priority
+      />
+      <p className="text-sm text-zinc-500">Welcome to Knotpad</p>
+      <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-700 border-t-zinc-400" />
+    </div>
+  );
+}

package/app/(app)/notes/[noteId]/page.tsx

@@ -0,0 +1,84 @@
+import { auth } from "@/auth";
+import { redirect, notFound } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { decryptContent } from "@/lib/note-crypto";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { NoteEditor } from "@/components/notes/note-editor";
+
+export default async function NotePage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ noteId: string }>;
+  searchParams: Promise<{ q?: string }>;
+}) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const { noteId } = await params;
+  const { q: highlight } = await searchParams;
+
+  const activeWs = await getActiveWorkspaceId(session.user.id);
+  const member = await prisma.workspaceMember.findFirst({
+    where: { userId: session.user.id, workspaceId: activeWs ?? undefined },
+    include: {
+      workspace: {
+        include: {
+          members: {
+            include: { user: { select: { id: true, name: true, email: true } } },
+          },
+        },
+      },
+    },
+  });
+  if (!member) redirect("/login");
+
+  const [note, allNotes, allTasks] = await Promise.all([
+    prisma.note.findFirst({
+      where: { id: noteId, workspaceId: member.workspaceId },
+      include: {
+        folder: { select: { id: true, name: true } },
+        tasks: {
+          orderBy: { createdAt: "asc" },
+          include: { assignee: { select: { id: true, name: true, email: true } } },
+        },
+      },
+    }),
+    prisma.note.findMany({
+      where: { workspaceId: member.workspaceId },
+      orderBy: { updatedAt: "desc" },
+      select: { id: true, title: true },
+    }),
+    prisma.task.findMany({
+      where: { workspaceId: member.workspaceId, status: { not: "DONE" } },
+      orderBy: { createdAt: "desc" },
+      take: 200,
+      select: { id: true, title: true, note: { select: { title: true } } },
+    }),
+  ]);
+
+  if (!note) notFound();
+
+  const decryptedContent = await decryptContent(note.content, member.workspaceId);
+
+  const members = member.workspace.members
+    .map((m) => ({
+      handle: `@${(m.user.name ?? m.user.email ?? "user").toLowerCase().replace(/\s+/g, "")}`,
+      label: (m.user.name ?? m.user.email ?? "Unknown") + (m.userId === session.user.id ? " (you)" : ""),
+      isAgent: false,
+    }));
+
+  const notesList = allNotes
+    .filter((n) => n.id !== noteId)
+    .map((n) => ({ id: n.id, title: n.title }));
+
+  const tasksList = allTasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    noteTitle: t.note.title,
+  }));
+
+  // key by note id so the editor fully remounts (fresh state + flush of the
+  // previous note's pending save) when navigating between notes via tabs/links.
+  return <NoteEditor key={note.id} note={{ ...note, content: decryptedContent }} members={members} notesList={notesList} tasksList={tasksList} highlight={highlight} />;
+}

package/app/(app)/notes/layout.tsx

@@ -0,0 +1,30 @@
+import { auth } from "@/auth";
+import { redirect } from "next/navigation";
+import { prisma } from "@/lib/prisma";
+import { getActiveWorkspaceId } from "@/lib/workspace";
+import { NoteTabs } from "@/components/notes/note-tabs";
+
+/**
+ * Wraps the notes routes with a browser-style tab strip. Only mounts on
+ * /notes/* so the board/list/calendar views stay tab-free.
+ */
+export default async function NotesLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session) redirect("/login");
+
+  const workspaceId = await getActiveWorkspaceId(session.user.id);
+  const notes = workspaceId
+    ? await prisma.note.findMany({
+        where: { workspaceId },
+        orderBy: { updatedAt: "desc" },
+        select: { id: true, title: true },
+      })
+    : [];
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <NoteTabs notes={notes} />
+      <div className="flex flex-1 flex-col overflow-hidden">{children}</div>
+    </div>
+  );
+}