@knotpad/app 0.1.5 → 0.1.6

package/components/notes/note-preview-pane.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import React, { useRef } from "react";
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { NoteRef, TaskRef } from "./note-types";
+import { CALLOUTS, formatDatesForDisplay } from "./note-types";
+
+export function PreviewPane({
+  title,
+  content,
+  notesList,
+  tasksList,
+  onToggleTask,
+}: {
+  title: string;
+  content: string;
+  notesList: NoteRef[];
+  tasksList: TaskRef[];
+  onToggleTask: (index: number) => void;
+}) {
+  const checkboxIndex = useRef(0);
+  checkboxIndex.current = 0;
+
+  function linkifyRefs(md: string): string {
+    return md
+      .replace(/\[\[([^\]]+)\]\]/g, (full, t) => {
+        const n = notesList.find((x) => x.title === String(t).trim());
+        return n ? `[${t}](/notes/${n.id})` : full;
+      })
+      .replace(/\(\(([^)]+)\)\)/g, (full, t) => {
+        const task = tasksList.find((x) => x.title === String(t).trim());
+        return task ? `[${t}](/tasks/${task.id})` : full;
+      });
+  }
+
+  return (
+    <div className="h-full min-w-0 overflow-y-auto px-6 py-6">
+      <h1 className="mb-6 text-2xl font-semibold text-zinc-100">{title || "Untitled"}</h1>
+      <div className="prose-brief">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            h1: ({ children }) => <h1 className="mb-4 mt-6 text-xl font-bold text-zinc-100">{children}</h1>,
+            h2: ({ children }) => <h2 className="mb-3 mt-5 text-lg font-bold text-zinc-100">{children}</h2>,
+            h3: ({ children }) => <h3 className="mb-2 mt-4 text-base font-semibold text-zinc-200">{children}</h3>,
+            p: ({ children }) => <p className="mb-3 leading-7 text-zinc-300">{children}</p>,
+            ul: ({ children }) => <ul className="mb-3 ml-4 list-disc space-y-1 text-zinc-300">{children}</ul>,
+            ol: ({ children }) => <ol className="mb-3 ml-4 list-decimal space-y-1 text-zinc-300">{children}</ol>,
+            li: ({ children }) => <li className="leading-6 text-zinc-300">{children}</li>,
+            input: ({ type, checked, disabled }) => {
+              if (type !== "checkbox") return null;
+              const idx = checkboxIndex.current++;
+              return (
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  disabled={disabled}
+                  onChange={() => onToggleTask(idx)}
+                  className="mr-1.5 accent-blue-500 align-middle cursor-pointer"
+                />
+              );
+            },
+            code: ({ children, className }) => {
+              const isBlock = className?.startsWith("language-");
+              return isBlock ? (
+                <code className="block">{children}</code>
+              ) : (
+                <code className="rounded bg-zinc-800 px-1 py-0.5 font-mono text-sm text-emerald-400">{children}</code>
+              );
+            },
+            pre: ({ children }) => (
+              <pre className="mb-3 overflow-x-auto rounded-md border border-zinc-800 bg-zinc-900 p-4 font-mono text-sm text-zinc-300">{children}</pre>
+            ),
+            blockquote: ({ children }) => {
+              let matchedType: keyof typeof CALLOUTS | null = null;
+              let bodyChildren = children;
+              const firstP = React.Children.toArray(children)[0];
+              if (
+                firstP &&
+                typeof firstP === "object" &&
+                "type" in firstP &&
+                (firstP as React.ReactElement<{ children?: React.ReactNode }>).type === "p"
+              ) {
+                const pChildren = React.Children.toArray(
+                  (firstP as React.ReactElement<{ children?: React.ReactNode }>).props.children
+                );
+                const firstText = pChildren[0];
+                if (typeof firstText === "string") {
+                  const marker = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*/.exec(firstText);
+                  if (marker) {
+                    matchedType = marker[1] as keyof typeof CALLOUTS;
+                    const rest = firstText.slice(marker[0].length);
+                    const restOfP = [...pChildren.slice(1)];
+                    const newFirstP = rest || restOfP.length > 0
+                      ? <p key="callout-body" className="mb-1 leading-7">{rest}{restOfP}</p>
+                      : null;
+                    bodyChildren = newFirstP
+                      ? [newFirstP, ...React.Children.toArray(children).slice(1)]
+                      : React.Children.toArray(children).slice(1);
+                  }
+                }
+              }
+              if (matchedType) {
+                const c = CALLOUTS[matchedType];
+                const Icon = c.icon;
+                return (
+                  <div className={`mb-3 rounded-md border p-3 ${c.border} ${c.bg}`}>
+                    <div className={`mb-1 flex items-center gap-1.5 text-sm font-medium ${c.heading}`}>
+                      <Icon size={14} /> {c.label}
+                    </div>
+                    <div className={`text-sm ${c.body}`}>{bodyChildren}</div>
+                  </div>
+                );
+              }
+              return (
+                <blockquote className="mb-3 border-l-2 border-zinc-600 pl-4 italic text-zinc-500">{children}</blockquote>
+              );
+            },
+            strong: ({ children }) => <strong className="font-semibold text-zinc-100">{children}</strong>,
+            em: ({ children }) => <em className="italic text-zinc-300">{children}</em>,
+            hr: () => <hr className="my-4 border-zinc-800" />,
+            a: ({ href, children }) => {
+              const internal = typeof href === "string" && href.startsWith("/");
+              if (internal) {
+                return (
+                  <Link href={href} className="text-violet-400 underline decoration-dotted hover:text-violet-300">
+                    {children}
+                  </Link>
+                );
+              }
+              return (
+                <a href={href} target="_blank" rel="noopener noreferrer" className="text-blue-400 underline hover:text-blue-300">
+                  {children}
+                </a>
+              );
+            },
+            table: ({ children }) => (
+              <div className="mb-3 overflow-x-auto rounded-md border border-zinc-800">
+                <table className="w-full border-collapse text-sm text-zinc-300">{children}</table>
+              </div>
+            ),
+            thead: ({ children }) => <thead className="border-b border-zinc-700 bg-zinc-900 text-zinc-200">{children}</thead>,
+            tbody: ({ children }) => <tbody className="divide-y divide-zinc-800/40">{children}</tbody>,
+            tr: ({ children }) => <tr className="hover:bg-zinc-800/30">{children}</tr>,
+            th: ({ children }) => <th className="px-3 py-1.5 text-left font-medium">{children}</th>,
+            td: ({ children }) => <td className="px-3 py-1.5">{children}</td>,
+          }}
+        >
+          {linkifyRefs(formatDatesForDisplay(content))}
+        </ReactMarkdown>
+      </div>
+    </div>
+  );
+}

package/components/notes/note-tabs.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import Link from "next/link";
+import { X, Plus } from "lucide-react";
+
+type NoteRef = { id: string; title: string };
+
+const STORAGE_KEY = "brief_open_tabs";
+
+/**
+ * Browser-style tabs for open notes. The open set is persisted per device in
+ * localStorage; tabs for notes that no longer exist in the active workspace
+ * (deleted, or belonging to another workspace) are pruned automatically.
+ */
+export function NoteTabs({ notes }: { notes: NoteRef[] }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const activeId = pathname.startsWith("/notes/") ? pathname.split("/")[2] : null;
+
+  const titleById = new Map(notes.map((n) => [n.id, n.title]));
+  const [openIds, setOpenIds] = useState<string[]>([]);
+  const [loaded, setLoaded] = useState(false);
+
+  // Load persisted tabs on mount.
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (raw) setOpenIds(JSON.parse(raw));
+    } catch {
+      /* ignore */
+    }
+    setLoaded(true);
+  }, []);
+
+  // Ensure the active note is an open tab; prune tabs that no longer exist.
+  useEffect(() => {
+    if (!loaded) return;
+    setOpenIds((prev) => {
+      let next = prev.filter((id) => titleById.has(id));
+      if (activeId && titleById.has(activeId) && !next.includes(activeId)) {
+        next = [...next, activeId];
+      }
+      if (next.length !== prev.length || next.some((id, i) => id !== prev[i])) {
+        try { localStorage.setItem(STORAGE_KEY, JSON.stringify(next)); } catch { /* ignore */ }
+        return next;
+      }
+      return prev;
+    });
+  }, [activeId, loaded, notes]);
+
+  function persist(next: string[]) {
+    setOpenIds(next);
+    try { localStorage.setItem(STORAGE_KEY, JSON.stringify(next)); } catch { /* ignore */ }
+  }
+
+  function closeTab(e: React.MouseEvent, id: string) {
+    e.preventDefault();
+    e.stopPropagation();
+    const idx = openIds.indexOf(id);
+    const next = openIds.filter((x) => x !== id);
+    persist(next);
+    if (id === activeId) {
+      const fallback = next[idx] ?? next[idx - 1] ?? next[next.length - 1];
+      router.push(fallback ? `/notes/${fallback}` : "/notes");
+    }
+  }
+
+  if (!loaded || openIds.length === 0) return null;
+
+  return (
+    <div className="flex items-stretch gap-px overflow-x-auto border-b border-zinc-800 bg-zinc-950 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+      {openIds
+        .filter((id) => titleById.has(id))
+        .map((id) => {
+          const active = id === activeId;
+          return (
+            <Link
+              key={id}
+              href={`/notes/${id}`}
+              className={`group/tab flex max-w-[180px] shrink-0 items-center gap-1.5 border-r border-zinc-800 px-3 py-1.5 text-xs transition-colors ${
+                active
+                  ? "bg-zinc-900 text-zinc-100"
+                  : "text-zinc-500 hover:bg-zinc-900/60 hover:text-zinc-300"
+              }`}
+            >
+              <span className="truncate">{titleById.get(id) || "Untitled"}</span>
+              <button
+                onClick={(e) => closeTab(e, id)}
+                className="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded text-zinc-600 opacity-0 hover:bg-zinc-700 hover:text-zinc-200 group-hover/tab:opacity-100"
+                title="Close tab"
+              >
+                <X size={11} />
+              </button>
+            </Link>
+          );
+        })}
+      <button
+        onClick={async () => {
+          try {
+            const res = await fetch("/api/notes", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ title: "Untitled", content: "" }),
+            });
+            if (res.ok) {
+              const note = await res.json();
+              router.push(`/notes/${note.id}`);
+            }
+          } catch { /* ignore */ }
+        }}
+        title="New note"
+        className="flex shrink-0 items-center gap-1 border-r border-zinc-800 px-3 py-1.5 text-xs text-zinc-500 hover:bg-zinc-900/60 hover:text-zinc-300 transition-colors"
+      >
+        <Plus size={12} />
+      </button>
+    </div>
+  );
+}

package/components/notes/note-types.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import {
+  MessageSquare, TriangleAlert, LayoutTemplate, Info,
+  Lightbulb, MessageSquareWarning, OctagonAlert,
+} from "lucide-react";
+
+export type Task = {
+  id: string;
+  title: string;
+  status: string;
+  assigneeType: "HUMAN" | "AGENT";
+  assignee: { id: string; name: string | null; email: string | null } | null;
+};
+
+export type Member = { handle: string; label: string; isAgent: boolean };
+export type NoteRef = { id: string; title: string };
+export type TaskRef = { id: string; title: string; noteTitle: string };
+
+export type Note = {
+  id: string;
+  title: string;
+  content: string;
+  isLocked: boolean;
+  version: number;
+  tasks: Task[];
+  folder?: { id: string; name: string } | null;
+};
+
+export type Props = {
+  note: Note;
+  members?: Member[];
+  notesList?: NoteRef[];
+  tasksList?: TaskRef[];
+  highlight?: string;
+};
+
+export type SlashCommandId = "todo" | "bullet" | "numbered" | "h1" | "h2" | "h3" | "bold" | "italic" | "strike" | "quote" | "code" | "table" | "callout" | "warning" | "hr" | "template";
+
+export const SAVE_DEBOUNCE_MS = 1000;
+export const TASK_LINE_REGEX = /^(\s*-\s+\[[ x]\]\s+)(.+)$/;
+export const MENTION_REGEX = /@[\w-]+/g;
+export const FILEREF_REGEX = /<[^>]+>/g;
+export const BADGE_COMMENT_REGEX = /\s*<!--task::[A-Z_]+-->/g;
+export const PRIORITY_TAG_REGEX = /!(low|medium|high|critical)\b/gi;
+
+export type PriorityLevel = "critical" | "high" | "medium" | "low";
+
+export const PRIORITY_LEVELS: { id: PriorityLevel; label: string; color: string }[] = [
+  { id: "critical", label: "Critical", color: "text-red-500" },
+  { id: "high",     label: "High",     color: "text-red-400" },
+  { id: "medium",   label: "Medium",   color: "text-yellow-400" },
+  { id: "low",      label: "Low",      color: "text-green-400" },
+];
+
+export const CALLOUTS = {
+  NOTE:      { label: "Note",      icon: Info,                 border: "border-blue-500/30",    bg: "bg-blue-950/30",    heading: "text-blue-400",    body: "text-blue-100/80" },
+  TIP:       { label: "Tip",       icon: Lightbulb,            border: "border-emerald-500/30", bg: "bg-emerald-950/30", heading: "text-emerald-400", body: "text-emerald-100/80" },
+  IMPORTANT: { label: "Important", icon: MessageSquareWarning, border: "border-violet-500/30",  bg: "bg-violet-950/30",  heading: "text-violet-400",  body: "text-violet-100/80" },
+  WARNING:   { label: "Warning",   icon: TriangleAlert,        border: "border-amber-500/30",   bg: "bg-amber-950/30",   heading: "text-amber-400",   body: "text-amber-100/80" },
+  CAUTION:   { label: "Caution",   icon: OctagonAlert,         border: "border-rose-500/30",    bg: "bg-rose-950/30",    heading: "text-rose-400",    body: "text-rose-100/80" },
+} as const;
+
+export const AGENT_HANDLES: Member[] = [
+  { handle: "@agent", label: "AI agent — any connected tool", isAgent: true },
+];
+
+export const SLASH_COMMANDS: { id: SlashCommandId; icon: React.ReactNode; label: string; hint: string }[] = [
+  { id: "todo",     icon: "☐",  label: "Task",          hint: "- [ ] task line" },
+  { id: "bullet",   icon: "•",  label: "Bullet",        hint: "- list item" },
+  { id: "numbered", icon: "1.", label: "Numbered list", hint: "1. ordered item" },
+  { id: "h1",       icon: "H1", label: "Heading 1",     hint: "# Large heading" },
+  { id: "h2",       icon: "H2", label: "Heading 2",     hint: "## Medium heading" },
+  { id: "h3",       icon: "H3", label: "Heading 3",     hint: "### Small heading" },
+  { id: "bold",     icon: "B",  label: "Bold",          hint: "**bold text**" },
+  { id: "italic",   icon: "I",  label: "Italic",        hint: "_italic text_" },
+  { id: "strike",   icon: "S",  label: "Strikethrough", hint: "~~struck text~~" },
+  { id: "quote",    icon: "❝",  label: "Quote",         hint: "> blockquote" },
+  { id: "code",     icon: "<>", label: "Code block",    hint: "Fenced ``` block" },
+  { id: "table",    icon: "⊞",  label: "Table",         hint: "| Col | Col |" },
+  { id: "callout",  icon: <MessageSquare size={14} />, label: "Callout",  hint: "> [!NOTE]" },
+  { id: "warning",  icon: <TriangleAlert size={14} />, label: "Warning",  hint: "> [!WARNING]" },
+  { id: "hr",       icon: "—",  label: "Divider",       hint: "Horizontal rule" },
+  { id: "template", icon: <LayoutTemplate size={14} />, label: "Template", hint: "Insert a template" },
+];
+
+export const TEMPLATES = [
+  { id: "standup", label: "Standup",      content: "**Yesterday**\n- \n\n**Today**\n- \n\n**Blockers**\n- " },
+  { id: "sprint",  label: "Sprint plan",  content: "## Sprint Goal\n\n## Deliverables\n- [ ] \n\n## Out of scope\n- " },
+  { id: "meeting", label: "Meeting notes",content: "## Attendees\n- \n\n## Agenda\n- \n\n## Decisions\n- \n\n## Actions\n- [ ] " },
+  { id: "prd",     label: "PRD",          content: "## Problem\n\n## Solution\n\n## Success metrics\n\n## Out of scope\n" },
+];
+
+const EDITOR_DATE_RANGE_REGEX = /\d{4}-\d{2}-\d{2}\.\.\d{4}-\d{2}-\d{2}/g;
+const EDITOR_DATE_REGEX       = /\d{4}-\d{2}-\d{2}/g;
+
+const MONTH_NAMES = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December",
+];
+
+const MONTH_SHORT = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+
+export function formatDateChip(iso: string): string {
+  const [y, m, d] = iso.split("-").map(Number);
+  return `${d} ${MONTH_SHORT[m - 1]} ${y}`;
+}
+
+export function formatDateRangeChip(s: string, e: string): string {
+  const [sy, sm, sd] = s.split("-").map(Number);
+  const [ey, em, ed] = e.split("-").map(Number);
+  const sm_ = MONTH_SHORT[sm - 1], em_ = MONTH_SHORT[em - 1];
+  if (sy === ey && sm === em) return `${sd}–${ed} ${sm_} ${sy}`;
+  if (sy === ey)             return `${sd} ${sm_} – ${ed} ${em_} ${sy}`;
+  return `${sd} ${sm_} '${String(sy).slice(2)} – ${ed} ${em_} '${String(ey).slice(2)}`;
+}
+
+export function formatReadableDate(iso: string): string {
+  const [y, m, d] = iso.split("-").map(Number);
+  return `${d} ${MONTH_NAMES[m - 1]} ${y}`;
+}
+
+export function formatDatesForDisplay(md: string): string {
+  return md
+    .replace(EDITOR_DATE_RANGE_REGEX, (range) => {
+      const [start, end] = range.split("..");
+      return `${formatReadableDate(start)} → ${formatReadableDate(end)}`;
+    })
+    .replace(EDITOR_DATE_REGEX, (date) => formatReadableDate(date));
+}
+
+export function formatTodayHeader(): string {
+  return new Date().toLocaleDateString("en-GB", {
+    weekday: "long", day: "numeric", month: "long", year: "numeric",
+  });
+}
+
+export function extractTaskTitleFromLine(line: string): string | null {
+  const m = TASK_LINE_REGEX.exec(line);
+  if (!m) return null;
+  return m[2]
+    .replace(/\[\[[^\]]*\]\]/g, "")
+    .replace(/\(\([^)]*\)\)/g, "")
+    .replace(MENTION_REGEX, "")
+    .replace(FILEREF_REGEX, "")
+    .replace(EDITOR_DATE_RANGE_REGEX, "")
+    .replace(EDITOR_DATE_REGEX, "")
+    .replace(BADGE_COMMENT_REGEX, "")
+    .replace(PRIORITY_TAG_REGEX, "")
+    .trim();
+}
+
+export function stripBadgeComments(content: string): string {
+  return content
+    .split("\n")
+    .map((line) => line.replace(BADGE_COMMENT_REGEX, ""))
+    .join("\n");
+}

package/components/settings/accept-invite.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+type Role = "OWNER" | "ADMIN" | "MEMBER";
+const ROLE_LABELS: Record<Role, string> = { OWNER: "Owner", ADMIN: "Admin", MEMBER: "Member" };
+
+export function AcceptInvite({
+  token,
+  email,
+  workspaceName,
+  invitedBy,
+  role,
+  isLoggedIn,
+  isLoggedInAsInvitee,
+}: {
+  token: string;
+  email: string;
+  workspaceName: string;
+  invitedBy: string;
+  role: Role;
+  isLoggedIn: boolean;
+  isLoggedInAsInvitee: boolean;
+}) {
+  const router = useRouter();
+  const [accepting, setAccepting] = useState(false);
+  const [error, setError] = useState("");
+
+  async function accept() {
+    setAccepting(true);
+    setError("");
+    const res = await fetch(`/api/invites/${token}`, { method: "POST" });
+    if (res.ok) {
+      router.push("/notes");
+      router.refresh();
+    } else {
+      const d = await res.json();
+      setError(d.error ?? "Failed to accept invite");
+      setAccepting(false);
+    }
+  }
+
+  return (
+    <div className="w-full max-w-sm space-y-6">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-semibold tracking-tight">You're invited</h1>
+        <p className="text-sm text-zinc-400">
+          <span className="text-zinc-300">{invitedBy}</span> invited you to join{" "}
+          <span className="text-zinc-300">{workspaceName}</span> as a{" "}
+          <span className="text-zinc-300">{ROLE_LABELS[role]}</span>.
+        </p>
+      </div>
+
+      <div className="rounded-md border border-zinc-800 bg-zinc-900 px-4 py-3 text-sm text-zinc-500">
+        Invite sent to: <span className="text-zinc-300">{email}</span>
+      </div>
+
+      {error && <p className="text-sm text-red-400">{error}</p>}
+
+      {!isLoggedIn && (
+        <div className="space-y-3">
+          <p className="text-sm text-zinc-500">Sign in or register to accept this invite.</p>
+          <div className="flex gap-3">
+            <Link
+              href={`/login?next=/invite/${token}`}
+              className="flex-1 rounded-md bg-zinc-100 px-4 py-2 text-center text-sm font-medium text-zinc-900 hover:bg-zinc-200"
+            >
+              Sign in
+            </Link>
+            <Link
+              href={`/register?next=/invite/${token}`}
+              className="flex-1 rounded-md border border-zinc-700 px-4 py-2 text-center text-sm text-zinc-300 hover:bg-zinc-800"
+            >
+              Register
+            </Link>
+          </div>
+        </div>
+      )}
+
+      {isLoggedIn && !isLoggedInAsInvitee && (
+        <div className="space-y-3">
+          <p className="text-sm text-amber-400">
+            You're signed in with a different account. This invite was sent to{" "}
+            <span className="font-medium">{email}</span>.
+          </p>
+          <Link
+            href={`/login?next=/invite/${token}`}
+            className="block rounded-md border border-zinc-700 px-4 py-2 text-center text-sm text-zinc-300 hover:bg-zinc-800"
+          >
+            Sign in as {email}
+          </Link>
+        </div>
+      )}
+
+      {isLoggedIn && isLoggedInAsInvitee && (
+        <button
+          onClick={accept}
+          disabled={accepting}
+          className="w-full rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50"
+        >
+          {accepting ? "Joining…" : `Join ${workspaceName}`}
+        </button>
+      )}
+    </div>
+  );
+}