@knotpad/app 0.1.0 → 0.1.1

package/components/landing/mock-workspace.ts

@@ -1,168 +0,0 @@
-export type MockTaskStatus = "Open" | "In Progress" | "Review" | "Done";
-
-export type MockTask = {
-  id: string;
-  title: string;
-  status: MockTaskStatus;
-  dueDate: string;
-  assignee: string;
-  noteId: string;
-  priority?: "high" | "medium" | "low";
-  fileRef?: string;
-};
-
-export type MockNote = {
-  id: string;
-  title: string;
-  content: string;
-  folder: string;
-  references: string[];
-};
-
-export type MockWorkspace = {
-  folder: { id: string; name: string };
-  notes: MockNote[];
-  tasks: MockTask[];
-  busyBlocks: Array<{ id: string; label: string; date: string }>;
-  team: Array<{ id: string; name: string; role: string }>;
-};
-
-export function createMockWorkspace(): MockWorkspace {
-  return {
-    folder: { id: "folder_launch", name: "Launch" },
-    notes: [
-      {
-        id: "note_launch_page",
-        title: "Landing page improvements",
-        folder: "Launch",
-        references: ["Brand refresh", "Pricing cleanup"],
-        content: [
-          "## Landing page improvements",
-          "",
-          "Ship a stronger first impression for Knotpad.",
-          "",
-          "### Tasks",
-          "- [ ] Tighten hero copy @maya !high",
-          "- [ ] Build interactive showcase @agent <plan.md>",
-          "- [ ] Review pricing language @alex +today",
-          "- [x] Design new hero section @maya",
-        ].join("\n"),
-      },
-      {
-        id: "note_api_auth",
-        title: "API authentication flow",
-        folder: "Backend",
-        references: ["api-spec.md", "security-audit.md"],
-        content: [
-          "## API authentication flow",
-          "",
-          "Implement secure JWT-based authentication for the API.",
-          "",
-          "### Tasks",
-          "- [ ] Design token refresh strategy @agent <api-spec.md> !high",
-          "- [ ] Implement login endpoint @sarah +tomorrow",
-          "- [ ] Add rate limiting @agent !medium",
-          "- [ ] Write integration tests @alex +next-week",
-          "- [ ] Security review @security-team",
-        ].join("\n"),
-      },
-    ],
-    tasks: [
-      {
-        id: "task_1",
-        title: "Tighten hero copy",
-        status: "Open",
-        dueDate: "2026-06-14",
-        assignee: "maya",
-        noteId: "note_launch_page",
-        priority: "high",
-      },
-      {
-        id: "task_2",
-        title: "Build interactive showcase",
-        status: "In Progress",
-        dueDate: "2026-06-15",
-        assignee: "agent",
-        noteId: "note_launch_page",
-        priority: "medium",
-        fileRef: "plan.md",
-      },
-      {
-        id: "task_3",
-        title: "Review pricing language",
-        status: "Review",
-        dueDate: "2026-06-16",
-        assignee: "alex",
-        noteId: "note_launch_page",
-        priority: "low",
-      },
-      {
-        id: "task_4",
-        title: "Design new hero section",
-        status: "Done",
-        dueDate: "2026-06-13",
-        assignee: "maya",
-        noteId: "note_launch_page",
-        priority: "high",
-      },
-      {
-        id: "task_5",
-        title: "Design token refresh strategy",
-        status: "Open",
-        dueDate: "2026-06-17",
-        assignee: "agent",
-        noteId: "note_api_auth",
-        priority: "high",
-        fileRef: "api-spec.md",
-      },
-      {
-        id: "task_6",
-        title: "Implement login endpoint",
-        status: "In Progress",
-        dueDate: "2026-06-18",
-        assignee: "sarah",
-        noteId: "note_api_auth",
-        priority: "high",
-      },
-      {
-        id: "task_7",
-        title: "Add rate limiting",
-        status: "Open",
-        dueDate: "2026-06-19",
-        assignee: "agent",
-        noteId: "note_api_auth",
-        priority: "medium",
-      },
-      {
-        id: "task_8",
-        title: "Write integration tests",
-        status: "Open",
-        dueDate: "2026-06-21",
-        assignee: "alex",
-        noteId: "note_api_auth",
-        priority: "low",
-      },
-      {
-        id: "task_9",
-        title: "Security review",
-        status: "Review",
-        dueDate: "2026-06-20",
-        assignee: "security-team",
-        noteId: "note_api_auth",
-        priority: "high",
-      },
-    ],
-    busyBlocks: [
-      { id: "busy_1", label: "Design review", date: "2026-06-14" },
-      { id: "busy_2", label: "Sprint planning", date: "2026-06-16" },
-      { id: "busy_3", label: "Team sync", date: "2026-06-17" },
-      { id: "busy_4", label: "Focus time", date: "2026-06-18" },
-    ],
-    team: [
-      { id: "maya", name: "Maya", role: "Designer" },
-      { id: "alex", name: "Alex", role: "Developer" },
-      { id: "sarah", name: "Sarah", role: "Backend Lead" },
-      { id: "security-team", name: "Security Team", role: "Reviewer" },
-    ],
-  };
-}

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

@@ -1,14 +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 { NotesSandbox } from "@/components/landing/notes-sandbox";
-
-describe("NotesSandbox", () => {
-  it("renders note title and folder with syntax-highlighted content", () => {
-    render(<NotesSandbox workspace={createMockWorkspace()} />);
-
-    expect(screen.getByText("Landing page improvements")).toBeInTheDocument();
-    expect(screen.getByText("Launch")).toBeInTheDocument();
-  });
-});

package/components/landing/notes-sandbox.tsx

@@ -1,88 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import type { MockWorkspace } from "@/components/landing/mock-workspace";
-
-const STATUS_DOT_COLORS: Record<string, string> = {
-  Open: "bg-zinc-500",
-  "In Progress": "bg-blue-500",
-  Review: "bg-amber-500",
-  Done: "bg-emerald-500",
-};
-
-function StatusDot({ status }: { status: string }) {
-  const color = STATUS_DOT_COLORS[status] ?? "bg-zinc-500";
-  return <span className={`inline-block h-2 w-2 rounded-full ${color}`} />;
-}
-
-export function NotesSandbox({ workspace }: { workspace: MockWorkspace }) {
-  const note = workspace.notes[0];
-  const tasksByLine = useMemo(() => {
-    const lines = note.content.split("\n");
-    const map: Record<number, { taskId: string; status: string }> = {};
-    lines.forEach((line, i) => {
-      const match = line.match(/^\s*-?\s*\[[ x]\]\s+(.+)$/);
-      if (match) {
-        const title = match[1]
-          .replace(/@[\w-]+/g, "")
-          .replace(/![\w-]+/g, "")
-          .replace(/<[^>]+>/g, "")
-          .replace(/\+\w+/g, "")
-          .trim();
-        const task = workspace.tasks.find(
-          (t) => t.title.toLowerCase() === title.toLowerCase()
-        );
-        if (task) {
-          map[i] = { taskId: task.id, status: task.status };
-        }
-      }
-    });
-    return map;
-  }, [note.content, workspace.tasks]);
-
-  const highlightedContent = useMemo(() => {
-    let html = note.content
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;");
-
-    html = html.replace(/(@[\w-]+)/g, '<span class="text-blue-400 font-medium">$1</span>');
-    html = html.replace(/(!high|!medium|!low)/g, '<span class="text-red-400 font-medium">$1</span>');
-    html = html.replace(/(\+\w+)/g, '<span class="text-amber-400 font-medium">$1</span>');
-    html = html.replace(/(&lt;[\w.-]+&gt;)/g, '<span class="text-emerald-400 font-medium">$1</span>');
-    html = html.replace(/\[x\]/g, '<span class="text-emerald-400">[x]</span>');
-    html = html.replace(/\[ \]/g, '<span class="text-zinc-400">[ ]</span>');
-    html = html.replace(/\n/g, '<br>');
-
-    return html;
-  }, [note.content]);
-
-  const lineCount = note.content.split("\n").length;
-
-  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">{note.folder}</p>
-        <h3 className="text-sm font-semibold text-zinc-100">{note.title}</h3>
-      </div>
-
-      <div className="flex flex-1 overflow-y-auto px-4 py-4">
-        <div className="relative shrink-0 border-r border-zinc-800/60 pr-3" style={{ width: 20 }}>
-          {Array.from({ length: lineCount }).map((_, i) => {
-            const taskInfo = tasksByLine[i];
-            return (
-              <div key={i} className="flex items-center justify-end" style={{ height: 24 }}>
-                {taskInfo && <StatusDot status={taskInfo.status} />}
-              </div>
-            );
-          })}
-        </div>
-
-        <div
-          className="flex-1 pl-3 text-sm leading-6 text-zinc-300 font-mono whitespace-pre-wrap break-words"
-          dangerouslySetInnerHTML={{ __html: highlightedContent }}
-        />
-      </div>
-    </div>
-  );
-}

package/components/layout/app-shell.tsx

@@ -1,83 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { usePathname } from "next/navigation";
-import { useIsMobile } from "@/lib/use-is-mobile";
-import { MobileTopBar } from "./mobile-top-bar";
-import { BottomNav } from "./bottom-nav";
-
-type Props = {
-  panel: React.ReactNode;
-  children: React.ReactNode;
-};
-
-export function AppShell({ panel, children }: Props) {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  const isMobile = useIsMobile();
-  const pathname = usePathname();
-
-  useEffect(() => {
-    setDrawerOpen(false);
-  }, [pathname]);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // On mobile (after mount) we animate the panel with an inline transform —
-  // reliable across Tailwind v4's translate-var handling, and SSR-flash-safe
-  // because before mount we fall back to the visibility classes below.
-  const useInline = mounted && isMobile;
-  const panelStyle = useInline
-    ? {
-        transform: drawerOpen ? "translateX(0)" : "translateX(-100%)",
-        opacity: drawerOpen ? 1 : 0,
-      }
-    : undefined;
-
-  return (
-    <div className="flex min-w-0 flex-1 min-h-0">
-      {/* Backdrop — fades in/out on mobile when the drawer is open */}
-      <div
-        aria-hidden
-        onClick={() => setDrawerOpen(false)}
-        className={`fixed inset-0 z-40 bg-black/60 transition-opacity duration-200 md:hidden ${
-          drawerOpen ? "opacity-100" : "pointer-events-none opacity-0"
-        }`}
-      />
-
-      {/*
-        Notes panel.
-        Desktop: relative sidebar, always visible.
-        Mobile: fixed overlay that slides + fades in from the left.
-      */}
-      <div
-        style={panelStyle}
-        aria-hidden={useInline && !drawerOpen}
-        className={[
-          "fixed inset-y-0 left-0 z-50 flex w-[272px] flex-col transition-[transform,opacity] duration-200 ease-out",
-          "md:relative md:inset-y-auto md:left-auto md:z-auto md:w-[200px] md:transition-none",
-          useInline
-            ? drawerOpen
-              ? "pointer-events-auto"
-              : "pointer-events-none"
-            : drawerOpen
-            ? "visible pointer-events-auto"
-            : "invisible pointer-events-none md:visible md:pointer-events-auto",
-        ].join(" ")}
-      >
-        {panel}
-      </div>
-
-      {/* Main area */}
-      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-        <MobileTopBar onMenuClick={() => setDrawerOpen(true)} />
-        <main className="flex min-w-0 flex-1 flex-col overflow-hidden">
-          {children}
-        </main>
-        <BottomNav />
-      </div>
-    </div>
-  );
-}

package/components/layout/backup-scheduler.tsx

@@ -1,122 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { shouldRunScheduledBackup } from "@/lib/backup/backup-runner";
-import { useIsElectron } from "@/lib/use-is-electron";
-import type { BackupCadence } from "@/lib/backup/types";
-
-type BackupSettingsResponse = {
-  workspace?: {
-    isCloud: boolean;
-  };
-  settings?: {
-    scheduleEnabled: boolean;
-    scheduleCadence: BackupCadence;
-    destinationPath: string | null;
-    includeMarkdownZip: boolean;
-    lastBackupAt: string | null;
-  } | null;
-};
-
-type ElectronBackupFile = {
-  name: string;
-  bytes: number[];
-};
-
-export function BackupScheduler() {
-  const isElectron = useIsElectron();
-  const runningRef = useRef(false);
-
-  useEffect(() => {
-    if (!isElectron) return;
-
-    const runIfDue = async () => {
-      if (runningRef.current) return;
-      runningRef.current = true;
-
-      let settingsData: BackupSettingsResponse | null = null;
-
-      try {
-        const settingsRes = await fetch("/api/backup/settings", { cache: "no-store" });
-        if (!settingsRes.ok) return;
-
-        settingsData = (await settingsRes.json()) as BackupSettingsResponse;
-        const settings = settingsData.settings;
-        if (!settings) return;
-
-        const shouldRun = shouldRunScheduledBackup({
-          isElectron,
-          isCloudWorkspace: settingsData.workspace?.isCloud ?? false,
-          scheduleEnabled: settings.scheduleEnabled,
-          destinationPath: settings.destinationPath,
-          cadence: settings.scheduleCadence,
-          lastBackupAt: settings.lastBackupAt ? new Date(settings.lastBackupAt) : null,
-        });
-        if (!shouldRun || !settings.destinationPath) return;
-
-        const files: ElectronBackupFile[] = [];
-
-        const dbResponse = await fetch("/api/backup/download/db");
-        if (!dbResponse.ok) {
-          throw new Error("Failed to download database backup.");
-        }
-
-        const dbBytes = new Uint8Array(await dbResponse.arrayBuffer());
-        files.push({
-          name: dbResponse.headers.get("x-brief-filename") ?? "brief-backup.json",
-          bytes: Array.from(dbBytes),
-        });
-
-        if (settings.includeMarkdownZip) {
-          const notesResponse = await fetch("/api/backup/download/notes");
-          if (!notesResponse.ok) {
-            throw new Error("Failed to download notes ZIP.");
-          }
-
-          const notesBytes = new Uint8Array(await notesResponse.arrayBuffer());
-          files.push({
-            name: notesResponse.headers.get("x-brief-filename") ?? "brief-notes.zip",
-            bytes: Array.from(notesBytes),
-          });
-        }
-
-        await window.electronAPI.writeBackupFiles(settings.destinationPath, files);
-
-        await fetch("/api/backup/settings", {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            ...settings,
-            lastBackupAt: new Date().toISOString(),
-            lastBackupStatus: "success",
-            lastBackupError: null,
-          }),
-        });
-      } catch (error) {
-        if (settingsData?.settings) {
-          await fetch("/api/backup/settings", {
-            method: "PUT",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              ...settingsData.settings,
-              lastBackupStatus: "error",
-              lastBackupError:
-                error instanceof Error ? error.message : "Scheduled backup failed.",
-            }),
-          }).catch(() => {});
-        }
-      } finally {
-        runningRef.current = false;
-      }
-    };
-
-    void runIfDue();
-    const timer = window.setInterval(() => {
-      void runIfDue();
-    }, 5 * 60 * 1000);
-
-    return () => window.clearInterval(timer);
-  }, [isElectron]);
-
-  return null;
-}

package/components/layout/bottom-nav.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { FileText, List, Kanban, Calendar, Network, Settings } from "lucide-react";
-
-const NAV_ITEMS = [
-  { href: "/notes", icon: FileText, label: "Notes" },
-  { href: "/list", icon: List, label: "List" },
-  { href: "/kanban", icon: Kanban, label: "Kanban" },
-  { href: "/calendar", icon: Calendar, label: "Calendar" },
-  { href: "/graph", icon: Network, label: "Graph" },
-  { href: "/settings", icon: Settings, label: "Settings" },
-];
-
-export function BottomNav() {
-  const pathname = usePathname();
-
-  function isActive(href: string) {
-    if (href === "/notes") return pathname === "/" || pathname.startsWith("/notes");
-    return pathname.startsWith(href);
-  }
-
-  return (
-    <nav className="flex md:hidden items-stretch border-t border-zinc-800 bg-zinc-950" style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }}>
-      {NAV_ITEMS.map(({ href, icon: Icon, label }) => {
-        const active = isActive(href);
-        return (
-          <Link
-            key={href}
-            href={href}
-            className={`flex flex-1 flex-col items-center justify-center gap-0.5 py-2.5 text-[10px] font-medium transition-colors min-h-[56px] ${
-              active ? "text-zinc-100" : "text-zinc-500 hover:text-zinc-300"
-            }`}
-          >
-            <Icon size={20} strokeWidth={active ? 2.5 : 1.75} />
-            <span>{label}</span>
-          </Link>
-        );
-      })}
-    </nav>
-  );
-}

package/components/layout/icon-bar.test.tsx

@@ -1,29 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { IconBar } from "@/components/layout/icon-bar";
-
-vi.mock("next/navigation", () => ({
-  usePathname: () => "/calendar",
-}));
-
-vi.mock("next-auth/react", () => ({
-  signOut: vi.fn(),
-}));
-
-vi.mock("@/components/layout/notification-bell", () => ({
-  NotificationBell: () => <div>Bell</div>,
-}));
-
-vi.mock("@/components/command/command-palette", () => ({
-  useCommandPalette: () => ({ open: vi.fn() }),
-}));
-
-describe("IconBar", () => {
-  it("renders the active module as icon-only navigation", () => {
-    render(<IconBar latestNoteId="n1" />);
-
-    expect(screen.getByLabelText("Calendar")).toBeInTheDocument();
-    expect(screen.queryByText("Calendar")).not.toBeInTheDocument();
-  });
-});

package/components/layout/icon-bar.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import {
-  FileText,
-  Kanban,
-  List,
-  Calendar,
-  Network,
-  Settings,
-  LogOut,
-  Search,
-  BookOpen,
-} from "lucide-react";
-import { signOut } from "next-auth/react";
-import { AppLogo } from "@/components/branding/app-logo";
-import { NotificationBell } from "@/components/layout/notification-bell";
-import { FeedbackPopup } from "@/components/feedback/feedback-popup";
-import { useCommandPalette } from "@/components/command/command-palette";
-
-const staticNavItems = [
-  { href: "/kanban", icon: Kanban, label: "Kanban" },
-  { href: "/list", icon: List, label: "List" },
-  { href: "/calendar", icon: Calendar, label: "Calendar" },
-  { href: "/graph", icon: Network, label: "Graph" },
-];
-
-type IconBarProps = { latestNoteId?: string };
-
-export function IconBar({ latestNoteId }: IconBarProps) {
-  const pathname = usePathname();
-  const palette = useCommandPalette();
-
-  function isActive(href: string) {
-    if (href.startsWith("/notes")) return pathname === "/" || pathname.startsWith("/notes");
-    return pathname.startsWith(href);
-  }
-
-  const notesHref = latestNoteId ? `/notes/${latestNoteId}` : "/notes";
-  const navLinkClassName = (active: boolean) =>
-    `flex h-10 w-10 self-center items-center justify-center rounded-md transition-colors ring-focus ${
-      active
-        ? "bg-zinc-800 text-zinc-100"
-        : "text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
-    }`;
-
-  return (
-    <aside className="hidden md:flex w-14 flex-col border-r border-zinc-800 bg-zinc-950 px-2 py-3">
-      <nav className="flex flex-1 flex-col items-stretch gap-1">
-        <Link
-          href={notesHref}
-          title="Knotpad"
-          aria-label="Knotpad"
-          className="mb-2 flex h-10 w-10 self-center items-center justify-center rounded-md transition-colors ring-focus hover:bg-zinc-800"
-        >
-          <AppLogo variant="icon" className="h-6 w-6 rounded-md" />
-        </Link>
-        <button
-          onClick={palette.open}
-          title="Search  (⌘K)"
-          aria-label="Search"
-          className="mb-1 flex h-10 w-10 self-center items-center justify-center rounded-md text-zinc-500 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-300"
-        >
-          <Search size={18} />
-        </button>
-        <Link
-          href={notesHref}
-          title="Notes"
-          aria-label="Notes"
-          className={navLinkClassName(isActive(notesHref))}
-        >
-          <FileText size={18} />
-        </Link>
-        {staticNavItems.map(({ href, icon: Icon, label }) => (
-          <Link
-            key={href}
-            href={href}
-            title={label}
-            aria-label={label}
-            className={navLinkClassName(isActive(href))}
-          >
-            <Icon size={18} />
-          </Link>
-        ))}
-      </nav>
-
-      <div className="flex flex-col items-stretch gap-1">
-        <NotificationBell />
-        <FeedbackPopup />
-        <Link
-          href="/guide"
-          title="User Guide"
-          aria-label="User Guide"
-          className={navLinkClassName(isActive("/guide"))}
-        >
-          <BookOpen size={18} />
-        </Link>
-        <Link
-          href="/settings"
-          title="Settings"
-          aria-label="Settings"
-          className={navLinkClassName(isActive("/settings"))}
-        >
-          <Settings size={18} />
-        </Link>
-        <button
-          onClick={() => signOut({ callbackUrl: `${window.location.origin}/login` })}
-          title="Sign out"
-          aria-label="Sign out"
-          className="flex h-10 w-10 self-center items-center justify-center rounded-md text-zinc-500 transition-colors ring-focus hover:bg-zinc-800 hover:text-zinc-300"
-        >
-          <LogOut size={18} />
-        </button>
-      </div>
-    </aside>
-  );
-}