@knotpad/app 0.1.5 → 0.1.7

package/components/landing/mock-workspace.ts

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

@@ -0,0 +1,14 @@
+// @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

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

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

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

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

@@ -0,0 +1,29 @@
+// @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

@@ -0,0 +1,118 @@
+"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>
+  );
+}