@knotpad/app 0.1.0 → 0.1.2

package/components/tasks/task-row.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
-import type { Task } from "./task-list-types";
-
-export function TaskRow({
-  task,
-  status,
-  overdue,
-  updating,
-  detailHref,
-  onStatusChange,
-}: {
-  task: Task;
-  status: string;
-  overdue: boolean;
-  updating: boolean;
-  detailHref: string;
-  onStatusChange: (id: string, s: string) => void;
-}) {
-  const kanbanStatuses = useKanbanStatuses();
-
-  const assigneeLabel =
-    task.assigneeType === "AGENT"
-      ? task.claimedByAlias
-        ? `@agent:${task.claimedByAlias}`
-        : "@agent"
-      : task.assignee?.name
-      ? `@${task.assignee.name}`
-      : null;
-
-  const dueDateStr = task.dueDate
-    ? new Date(task.dueDate).toLocaleDateString(undefined, { month: "short", day: "numeric" })
-    : null;
-
-  return (
-    <div className={`flex items-start gap-3 rounded-md px-3 py-2.5 transition-colors group ${overdue ? "bg-red-950/20 hover:bg-red-950/30" : "hover:bg-zinc-800/50"}`}>
-      <div className="flex-1 min-w-0">
-        <Link href={detailHref} className="block group-hover:text-white transition-colors">
-          <p className={`text-sm truncate ${overdue ? "text-red-300" : "text-zinc-200"}`}>
-            {overdue && <span className="mr-1.5 text-red-400">!</span>}
-            {task.title}
-          </p>
-          <div className="mt-0.5 flex items-center gap-2 text-xs text-zinc-600">
-            <span className="truncate">{task.note.title}</span>
-            {dueDateStr && (
-              <>
-                <span>·</span>
-                <span className={overdue ? "text-red-400 font-medium" : "text-zinc-500"}>
-                  {overdue ? "Due " : ""}{dueDateStr}
-                </span>
-              </>
-            )}
-            {assigneeLabel && (
-              <>
-                <span>·</span>
-                <span className={task.assigneeType === "AGENT" ? "text-blue-500" : "text-zinc-500"}>
-                  {assigneeLabel}
-                </span>
-              </>
-            )}
-          </div>
-        </Link>
-      </div>
-
-      <select
-        value={status}
-        disabled={updating}
-        onChange={(e) => onStatusChange(task.id, e.target.value)}
-        className={`rounded border px-2 py-1 text-xs focus:outline-none ring-focus disabled:opacity-50 cursor-pointer ${
-          overdue
-            ? "border-red-800/60 bg-red-950/40 text-red-300"
-            : "border-zinc-700 bg-zinc-900 text-zinc-400"
-        }`}
-      >
-        {kanbanStatuses.map((s) => (
-          <option key={s.key} value={s.key}>
-            {s.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-}

package/components/tasks/task-table-row.tsx

@@ -1,259 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import Link from "next/link";
-import type { Task } from "./task-list-types";
-
-export function TaskTableRow({
-  task,
-  status,
-  overdue,
-  updating,
-  onStatusChange,
-  isSelected,
-  onSelect,
-  kanbanStatuses,
-  detailHref,
-  onUpdateDueDate,
-  onUpdateAssignee,
-}: {
-  task: Task;
-  status: string;
-  overdue: boolean;
-  updating: boolean;
-  onStatusChange: (taskId: string, newStatus: string) => void;
-  isSelected: boolean;
-  onSelect: () => void;
-  kanbanStatuses: { key: string; label: string; color?: string }[];
-  detailHref: string;
-  onUpdateDueDate?: (taskId: string, dueDate: string | null) => void;
-  onUpdateAssignee?: (taskId: string, assigneeType: "HUMAN" | "AGENT", assigneeId?: string) => void;
-}) {
-  // Format relative time (e.g., "2h ago", "3d ago")
-  function formatRelativeTime(date: string | Date | undefined): string {
-    if (!date) return "-";
-    const then = new Date(date);
-    const now = new Date();
-    const diffMs = now.getTime() - then.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-    const diffDays = Math.floor(diffMs / 86400000);
-
-    if (diffMins < 60) return `${diffMins}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 7) return `${diffDays}d ago`;
-    return then.toLocaleDateString();
-  }
-
-  // Get priority badge color
-  function getPriorityColor(priority?: string | null): string {
-    switch (priority?.toLowerCase()) {
-      case "critical": return "text-red-500 font-semibold";
-      case "high": return "text-red-400";
-      case "medium": return "text-yellow-400";
-      case "low": return "text-green-400";
-      default: return "text-zinc-500";
-    }
-  }
-
-  // Get assignee label
-  // Inline edit states
-  const [editingDueDate, setEditingDueDate] = useState(false);
-  const [editingAssignee, setEditingAssignee] = useState(false);
-  const [tempDueDate, setTempDueDate] = useState<string>("");
-  const [tempAssignee, setTempAssignee] = useState<string>("");
-  const [saving, setSaving] = useState(false);
-
-  const assigneeLabel =
-    task.assigneeType === "AGENT"
-      ? task.claimedByAlias
-        ? `@agent:${task.claimedByAlias}`
-        : "@agent"
-      : task.assignee?.name
-      ? `@${task.assignee.name}`
-      : task.assignee?.email
-      ? `@${task.assignee.email.split("@")[0]}`
-      : "-";
-
-  const rowClassName = isSelected
-    ? `ring-1 ring-inset ring-blue-900/30 ${overdue ? "bg-red-950/10" : "bg-blue-950/20"}`
-    : overdue
-      ? "bg-red-950/10 hover:bg-red-950/20"
-      : "hover:bg-zinc-800/30";
-
-  return (
-    <tr className={rowClassName}>
-      {/* Checkbox */}
-      <td className="px-3 py-2">
-        <input
-          type="checkbox"
-          checked={isSelected}
-          onChange={onSelect}
-          className="rounded border-zinc-600 bg-zinc-800 text-blue-600"
-        />
-      </td>
-
-      {/* Title */}
-      <td className="px-4 py-2">
-        <div className="flex items-center gap-2">
-          <Link
-            href={detailHref}
-            className="block truncate text-left text-sm text-zinc-200 hover:text-zinc-100"
-            title={task.title}
-          >
-              {task.title}
-          </Link>
-          {overdue && <span className="text-xs text-red-400">overdue</span>}
-        </div>
-      </td>
-
-      {/* Status dropdown */}
-      <td className="px-4 py-2">
-        <select
-          value={status}
-          disabled={updating}
-          onChange={(e) => onStatusChange(task.id, e.target.value)}
-          className={`text-xs rounded border px-2 py-1 bg-zinc-900 border-zinc-700 text-zinc-300 ${
-            updating ? "opacity-50" : ""
-          }`}
-        >
-          {kanbanStatuses.map((s) => (
-            <option key={s.key} value={s.key}>
-              {s.label}
-            </option>
-          ))}
-        </select>
-      </td>
-
-      {/* Due date - inline editable */}
-      <td className="px-4 py-2">
-        {editingDueDate ? (
-          <div className="flex items-center gap-1">
-            <input
-              type="date"
-              value={tempDueDate}
-              onChange={(e) => setTempDueDate(e.target.value)}
-              className="text-xs bg-zinc-800 border border-zinc-700 rounded px-1 py-0.5 text-zinc-300 w-28"
-              autoFocus
-            />
-            <button
-              onClick={async () => {
-                setSaving(true);
-                await onUpdateDueDate?.(task.id, tempDueDate || null);
-                setSaving(false);
-                setEditingDueDate(false);
-              }}
-              disabled={saving}
-              className="text-xs text-green-500 hover:text-green-400"
-            >
-              ✓
-            </button>
-            <button
-              onClick={() => setEditingDueDate(false)}
-              className="text-xs text-red-500 hover:text-red-400"
-            >
-              ✕
-            </button>
-          </div>
-        ) : (
-          <button
-            onClick={() => {
-              setTempDueDate(task.dueDate ? new Date(task.dueDate).toISOString().split("T")[0] : "");
-              setEditingDueDate(true);
-            }}
-            className={`text-xs ${overdue ? "text-red-400 font-medium" : "text-zinc-400"} hover:text-zinc-200 transition-colors text-left`}
-          >
-            {task.dueDate
-              ? new Date(task.dueDate).toLocaleDateString(undefined, { month: "short", day: "numeric" })
-              : "-"}
-          </button>
-        )}
-      </td>
-
-      {/* Priority */}
-      <td className="px-4 py-2">
-        <span className={`text-xs ${getPriorityColor(task.priority)}`}>
-          {task.priority || "-"}
-        </span>
-      </td>
-
-      {/* Assignee - inline editable */}
-      <td className="px-4 py-2">
-        {editingAssignee ? (
-          <div className="flex items-center gap-1">
-            <select
-              value={tempAssignee}
-              onChange={(e) => setTempAssignee(e.target.value)}
-              className="text-xs bg-zinc-800 border border-zinc-700 rounded px-1 py-0.5 text-zinc-300"
-              autoFocus
-            >
-              <option value="">Unassigned</option>
-              <option value="AGENT">@agent</option>
-              <option value="HUMAN">Human</option>
-            </select>
-            <button
-              onClick={async () => {
-                setSaving(true);
-                // "" = unassigned (HUMAN with no assignee), "AGENT" = agent task,
-                // "HUMAN:<id>" = assigned to specific human
-                const assigneeType = tempAssignee === "" ? "HUMAN" : tempAssignee.split(":")[0] as "HUMAN" | "AGENT";
-                const assigneeId = tempAssignee.includes(":") ? tempAssignee.split(":")[1] : null;
-                await onUpdateAssignee?.(task.id, assigneeType, assigneeId ?? undefined);
-                setSaving(false);
-                setEditingAssignee(false);
-              }}
-              disabled={saving}
-              className="text-xs text-green-500 hover:text-green-400"
-            >
-              ✓
-            </button>
-            <button
-              onClick={() => setEditingAssignee(false)}
-              className="text-xs text-red-500 hover:text-red-400"
-            >
-              ✕
-            </button>
-          </div>
-        ) : (
-          <button
-            onClick={() => {
-              const currentAssignee = task.assigneeType === "AGENT"
-                ? task.claimedByAlias
-                  ? `AGENT:${task.claimedBy}`
-                  : "AGENT"
-                : task.assignee?.id
-                  ? `HUMAN:${task.assignee.id}`
-                  : "";
-              setTempAssignee(currentAssignee);
-              setEditingAssignee(true);
-            }}
-            className={`text-xs ${task.assigneeType === "AGENT" ? "text-blue-400" : "text-zinc-400"} hover:text-zinc-200 transition-colors text-left`}
-          >
-            {assigneeLabel}
-          </button>
-        )}
-      </td>
-
-      {/* Note/Folder */}
-      <td className="px-4 py-2">
-        <Link
-          href={`/notes/${task.note.id}`}
-          className="block text-xs text-zinc-500 hover:text-zinc-300 truncate max-w-[150px]"
-          title={task.note.title}
-        >
-          {task.note.folder && (
-            <span className="text-zinc-600">{task.note.folder.name} / </span>
-          )}
-          {task.note.title}
-        </Link>
-      </td>
-
-      {/* Updated */}
-      <td className="px-4 py-2">
-        <span className="text-xs text-zinc-500">
-          {formatRelativeTime(task.updatedAt)}
-        </span>
-      </td>
-    </tr>
-  );
-}

package/components/ui/skeleton.tsx

@@ -1,3 +0,0 @@
-export function Skeleton({ className = "" }: { className?: string }) {
-  return <div className={`animate-pulse rounded bg-zinc-800/70 ${className}`} />;
-}

package/components/ui/toast.test.tsx

@@ -1,42 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ToastProvider, useToast } from "./toast";
-
-function Trigger() {
-  const toast = useToast();
-  return <button onClick={() => toast("Saved!", "success")}>fire</button>;
-}
-
-describe("ToastProvider", () => {
-  it("shows a toast when triggered, then dismisses it", async () => {
-    const user = userEvent.setup();
-    render(
-      <ToastProvider>
-        <Trigger />
-      </ToastProvider>
-    );
-
-    // Nothing shown initially.
-    expect(screen.queryByText("Saved!")).toBeNull();
-
-    // Firing a toast renders its message.
-    await user.click(screen.getByText("fire"));
-    expect(await screen.findByText("Saved!")).toBeInTheDocument();
-
-    // Clicking dismiss removes it.
-    await user.click(screen.getByLabelText("Dismiss"));
-    await waitFor(() => expect(screen.queryByText("Saved!")).toBeNull());
-  });
-
-  it("is a no-op outside a provider (default context)", () => {
-    // useToast falls back to a noop so consumers never crash if unwrapped.
-    function Lone() {
-      const toast = useToast();
-      return <button onClick={() => toast("x")}>ok</button>;
-    }
-    render(<Lone />);
-    expect(screen.getByText("ok")).toBeInTheDocument();
-  });
-});

package/components/ui/toast.tsx

@@ -1,70 +0,0 @@
-"use client";
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-} from "react";
-import { Check, AlertTriangle, Info, X } from "lucide-react";
-
-type Variant = "success" | "error" | "info";
-type Toast = { id: number; message: string; variant: Variant };
-
-const ToastCtx = createContext<(message: string, variant?: Variant) => void>(
-  () => {}
-);
-
-export function useToast() {
-  return useContext(ToastCtx);
-}
-
-const VARIANT: Record<Variant, { ring: string; icon: React.ReactNode }> = {
-  success: { ring: "border-emerald-700/60", icon: <Check size={15} className="text-emerald-400" /> },
-  error: { ring: "border-red-700/60", icon: <AlertTriangle size={15} className="text-red-400" /> },
-  info: { ring: "border-zinc-700", icon: <Info size={15} className="text-zinc-400" /> },
-};
-
-export function ToastProvider({ children }: { children: React.ReactNode }) {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-
-  const toast = useCallback((message: string, variant: Variant = "info") => {
-    const id = Date.now() + Math.random();
-    setToasts((t) => [...t, { id, message, variant }]);
-    setTimeout(() => {
-      setToasts((t) => t.filter((x) => x.id !== id));
-    }, 4000);
-  }, []);
-
-  const dismiss = (id: number) => setToasts((t) => t.filter((x) => x.id !== id));
-
-  return (
-    <ToastCtx.Provider value={toast}>
-      {children}
-      {/* Sits above the mobile bottom-nav (bottom-20) and bottom-right on desktop. */}
-      <div
-        className="pointer-events-none fixed inset-x-0 bottom-20 z-[200] flex flex-col items-center gap-2 px-4 md:inset-x-auto md:right-4 md:bottom-4 md:items-end"
-        role="region"
-        aria-live="polite"
-        aria-label="Notifications"
-      >
-        {toasts.map((t) => (
-          <div
-            key={t.id}
-            className={`pointer-events-auto flex w-full max-w-sm items-center gap-2.5 rounded-lg border bg-zinc-900 px-3 py-2.5 shadow-xl ${VARIANT[t.variant].ring}`}
-          >
-            <span className="shrink-0">{VARIANT[t.variant].icon}</span>
-            <span className="flex-1 text-sm text-zinc-200">{t.message}</span>
-            <button
-              onClick={() => dismiss(t.id)}
-              aria-label="Dismiss"
-              className="shrink-0 text-zinc-600 transition-colors hover:text-zinc-300"
-            >
-              <X size={14} />
-            </button>
-          </div>
-        ))}
-      </div>
-    </ToastCtx.Provider>
-  );
-}