@knotpad/app 0.1.0 → 0.1.1

package/components/branding/app-logo.test.tsx

@@ -1,20 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { AppLogo } from "@/components/branding/app-logo";
-
-describe("AppLogo", () => {
-  it("renders the full Knotpad logo by default", () => {
-    render(<AppLogo />);
-
-    const image = screen.getByAltText("Knotpad");
-    expect(image).toHaveAttribute("src", "/knotpad_logo_full.svg");
-  });
-
-  it("renders the icon variant when requested", () => {
-    render(<AppLogo variant="icon" />);
-
-    const image = screen.getByAltText("Knotpad icon");
-    expect(image).toHaveAttribute("src", "/icon_dark.svg");
-  });
-});

package/components/branding/app-logo.tsx

@@ -1,25 +0,0 @@
-type AppLogoProps = {
-  variant?: "full" | "icon";
-  className?: string;
-  alt?: string;
-};
-
-export function AppLogo({
-  variant = "full",
-  className,
-  alt,
-}: AppLogoProps) {
-  const src = variant === "icon" ? "/icon_dark.svg" : "/knotpad_logo_full.svg";
-  const fallbackAlt = variant === "icon" ? "Knotpad icon" : "Knotpad";
-
-  return (
-    // The logo assets are static SVG brand files that should render as-authored.
-    // `img` keeps their intrinsic SVG behavior without extra optimization layers.
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={src}
-      alt={alt ?? fallbackAlt}
-      className={className}
-    />
-  );
-}

package/components/calendar/calendar-agenda.tsx

@@ -1,150 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { CalendarDays } from "lucide-react";
-import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
-import type { CalTask, HolidayEntry, BusyBlockEntry } from "./calendar-types";
-import { getStatusDot, feedBg, feedText, countryFlag } from "./calendar-types";
-
-export function CalendarAgenda({
-  agendaDayKeys,
-  agendaByDay,
-  today,
-  holidaysEnabled,
-  holidays,
-  holidayCountry = "MY",
-  busyEnabled,
-  busyBlocks,
-  unscheduled,
-  kanbanStatuses: _kanbanStatuses,
-  isOverdue,
-  taskHref,
-  busyLimit,
-  onShowDayDetail,
-}: {
-  agendaDayKeys: string[];
-  agendaByDay: Record<string, CalTask[]>;
-  today: string;
-  holidaysEnabled: boolean;
-  holidays: Record<string, HolidayEntry[]>;
-  holidayCountry?: string;
-  busyEnabled: boolean;
-  busyBlocks: Record<string, BusyBlockEntry[]>;
-  unscheduled: CalTask[];
-  kanbanStatuses: { key: string; color: string }[];
-  isOverdue: (task: CalTask) => boolean;
-  taskHref: (taskId: string) => string;
-  busyLimit: number;
-  onShowDayDetail: (dateKey: string, kind: "busy" | "tasks" | "holidays", anchorRect: DOMRect | null) => void;
-}) {
-  const kanbanStatuses = useKanbanStatuses();
-
-  return (
-    <div className="flex flex-1 flex-col overflow-y-auto md:hidden">
-      {/* Unscheduled tasks (mobile) - moved to top for visibility */}
-      {unscheduled.length > 0 && (
-        <div className="border-b border-zinc-800 px-4 py-3">
-          <div className="mb-2 flex items-center gap-2">
-            <CalendarDays size={13} className="text-zinc-600" />
-            <span className="text-xs font-medium text-zinc-500">No due date ({unscheduled.length})</span>
-          </div>
-          <div className="flex flex-col">
-            {unscheduled.map((task) => (
-              <Link
-                key={task.id}
-                href={taskHref(task.id)}
-                className="flex items-center gap-2.5 py-2 transition-colors active:bg-zinc-800/60"
-              >
-                <span className={`h-2 w-2 shrink-0 rounded-full ${getStatusDot(kanbanStatuses, task.status)}`} />
-                <span className="flex-1 truncate text-sm text-zinc-300">{task.title}</span>
-                <span className="shrink-0 truncate text-xs text-zinc-600 max-w-[90px]">{task.noteTitle}</span>
-              </Link>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {agendaDayKeys.length === 0 && unscheduled.length === 0 ? (
-        <div className="flex flex-1 flex-col items-center justify-center gap-2 p-10 text-center">
-          <CalendarDays size={20} className="text-zinc-700" />
-          <p className="text-sm text-zinc-500">Nothing scheduled this month.</p>
-          <p className="text-xs text-zinc-700">Set a due date on a task to see it here.</p>
-        </div>
-      ) : (
-        agendaDayKeys.map((key) => {
-          const d = new Date(key + "T00:00:00");
-          const isToday = key === today;
-          const dayTasks = agendaByDay[key] ?? [];
-          const dayHolidays = holidaysEnabled ? holidays[key] ?? [] : [];
-          return (
-            <div key={key} className="border-b border-zinc-800/60">
-              <div className="sticky top-0 z-10 flex items-baseline gap-2 bg-zinc-950/95 px-4 py-2 backdrop-blur">
-                <span className={`text-sm font-semibold ${isToday ? "text-blue-400" : "text-zinc-300"}`}>
-                  {d.getDate()}
-                </span>
-                <span className="text-xs text-zinc-500">
-                  {d.toLocaleDateString(undefined, { weekday: "long" })}
-                </span>
-                {isToday && (
-                  <span className="rounded-full bg-blue-500/20 px-2 py-0.5 text-[10px] font-medium text-blue-300">
-                    Today
-                  </span>
-                )}
-              </div>
-              <div className="flex flex-col pb-1">
-                {dayHolidays.map((h) => (
-                  <div
-                    key={h.name}
-                    className="mx-3 mb-1 flex items-center gap-1.5 rounded border border-amber-800/40 bg-amber-950/40 px-2.5 py-1.5 text-xs text-amber-300"
-                  >
-                    <span className="shrink-0">{countryFlag(holidayCountry)}</span>
-                    <span className="truncate">{h.name}{h.is_subject_to_change ? " *" : ""}</span>
-                  </div>
-                ))}
-                {busyEnabled && (busyBlocks[key] ?? []).slice(0, busyLimit).map((b, i) => (
-                  <div
-                    key={`${b.title}-${i}`}
-                    className={`mx-3 mb-1 flex items-center gap-1.5 rounded border px-2.5 py-1.5 text-xs ${feedBg(b.feedColor)} ${feedText(b.feedColor)}`}
-                  >
-                    <span className="shrink-0 truncate">
-                      {b.allDay ? b.title : `${new Date(b.start).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })} ${b.title}`}
-                    </span>
-                    <span className="shrink-0 truncate opacity-60">· {b.feedLabel}</span>
-                  </div>
-                ))}
-                {busyEnabled && (busyBlocks[key]?.length ?? 0) > busyLimit && (
-                  <button
-                    type="button"
-                    onClick={() => onShowDayDetail(key, "busy", null)}
-                    className="mx-3 mb-1 text-left text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
-                  >
-                    +{(busyBlocks[key]?.length ?? 0) - busyLimit} more events
-                  </button>
-                )}
-                {dayTasks.map((task) => {
-                  const overdue = isOverdue(task);
-                  return (
-                    <Link
-                      key={task.id}
-                      href={taskHref(task.id)}
-                      className="flex items-center gap-2.5 px-4 py-2.5 transition-colors active:bg-zinc-800/60"
-                    >
-                      <span
-                        className={`h-2 w-2 shrink-0 rounded-full ${overdue ? "bg-red-400" : getStatusDot(kanbanStatuses, task.status)}`}
-                      />
-                      <span className={`flex-1 truncate text-sm ${overdue ? "text-red-300" : "text-zinc-200"}`}>
-                        {task.title}
-                      </span>
-                      {overdue && <span className="shrink-0 text-xs font-medium text-red-400">Overdue</span>}
-                      <span className="shrink-0 truncate text-xs text-zinc-600 max-w-[90px]">{task.noteTitle}</span>
-                    </Link>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })
-      )}
-    </div>
-  );
-}

package/components/calendar/calendar-drag.test.tsx

@@ -1,177 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { CalendarView } from "@/components/calendar/calendar-view";
-
-const pushMock = vi.fn();
-const refreshMock = vi.fn();
-
-vi.mock("next/navigation", () => ({
-  useRouter: () => ({ push: pushMock, refresh: refreshMock }),
-}));
-
-vi.mock("@/components/kanban/kanban-status-context", () => ({
-  useKanbanStatuses: () => [{ key: "OPEN", color: "border-sky-700" }],
-}));
-
-// Use the REAL useCalendarDrag, mock only the data-fetching hooks.
-vi.mock("@/components/calendar/calendar-hooks", async (importActual) => {
-  const actual = await importActual<typeof import("@/components/calendar/calendar-hooks")>();
-  return {
-    ...actual,
-    useHolidays: () => ({
-      holidayModuleEnabled: false,
-      holidaysVisible: false,
-      holidayCountry: "MY",
-      holidays: {},
-      holidaysLoading: false,
-      holidayError: false,
-      toggleHolidayVisibility: vi.fn(),
-    }),
-    useCalendarFeeds: () => ({
-      feeds: [],
-      visibleFeedIds: new Set<string>(),
-      busyEnabled: false,
-      busyLoading: false,
-      busyDropdownOpen: false,
-      setBusyDropdownOpen: vi.fn(),
-      syncingFeedId: null,
-      syncingAll: false,
-      toggleFeedVisibility: vi.fn(),
-      syncFeed: vi.fn(),
-      syncAllFeeds: vi.fn(),
-      toggleBusyBlocks: vi.fn(),
-      busyBlocks: {},
-    }),
-    useBusyLimit: () => ({ busyLimit: 2, setBusyLimit: vi.fn() }),
-  };
-});
-
-let fetchMock: ReturnType<typeof vi.fn>;
-
-beforeEach(() => {
-  pushMock.mockReset();
-  refreshMock.mockReset();
-  fetchMock = vi.fn().mockResolvedValue({ ok: true, json: async () => ({}) });
-  vi.stubGlobal("fetch", fetchMock);
-});
-
-afterEach(() => {
-  window.localStorage.clear();
-  vi.unstubAllGlobals();
-  cleanup();
-});
-
-function makeDataTransfer() {
-  return { setData: vi.fn(), getData: vi.fn(), effectAllowed: "", dropEffect: "" };
-}
-
-const rangedTask = {
-  id: "t-range",
-  title: "Ranged task",
-  status: "OPEN",
-  startDate: "2026-06-12",
-  dueDate: "2026-06-14",
-  noteId: "n1",
-  noteTitle: "Launch",
-  assigneeName: null,
-  assigneeType: "HUMAN",
-  claimedByAlias: null,
-};
-
-describe("CalendarView edge drag", () => {
-  it("dragging the END handle and dropping on a day updates dueDate", async () => {
-    render(<CalendarView initialMonth="2026-06" tasks={[rangedTask]} />);
-
-    const endHandle = screen.getByLabelText("Resize end for Ranged task");
-    const dt = makeDataTransfer();
-
-    fireEvent.dragStart(endHandle, { dataTransfer: dt });
-
-    // Drop on the cell for June 20.
-    const targetCell = screen.getByText("20");
-    fireEvent.dragOver(targetCell, { dataTransfer: dt });
-    fireEvent.drop(targetCell, { dataTransfer: dt });
-
-    await waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledWith(
-        "/api/tasks/t-range",
-        expect.objectContaining({
-          method: "PATCH",
-          body: JSON.stringify({ startDate: "2026-06-12", dueDate: "2026-06-20" }),
-        })
-      );
-    });
-  });
-
-  it("dragging the START handle and dropping on a day updates startDate", async () => {
-    render(<CalendarView initialMonth="2026-06" tasks={[rangedTask]} />);
-
-    const startHandle = screen.getByLabelText("Resize start for Ranged task");
-    const dt = makeDataTransfer();
-
-    fireEvent.dragStart(startHandle, { dataTransfer: dt });
-
-    const targetCell = screen.getByText("10");
-    fireEvent.dragOver(targetCell, { dataTransfer: dt });
-    fireEvent.drop(targetCell, { dataTransfer: dt });
-
-    await waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledWith(
-        "/api/tasks/t-range",
-        expect.objectContaining({
-          method: "PATCH",
-          body: JSON.stringify({ startDate: "2026-06-10", dueDate: "2026-06-14" }),
-        })
-      );
-    });
-  });
-
-  it("resizing a single-day task by its END handle creates a start..due range", async () => {
-    // A task with only a due date renders as a point chip with resize handles.
-    const pointTask = { ...rangedTask, id: "t-point", title: "Point task", startDate: null, dueDate: "2026-06-14" };
-    render(<CalendarView initialMonth="2026-06" tasks={[pointTask]} />);
-
-    const endHandle = screen.getByLabelText("Resize end for Point task");
-    const dt = makeDataTransfer();
-
-    fireEvent.dragStart(endHandle, { dataTransfer: dt });
-    const targetCell = screen.getByText("16");
-    fireEvent.dragOver(targetCell, { dataTransfer: dt });
-    fireEvent.drop(targetCell, { dataTransfer: dt });
-
-    // Anchors the existing day (14) as start and the dropped day (16) as due.
-    await waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledWith(
-        "/api/tasks/t-point",
-        expect.objectContaining({
-          method: "PATCH",
-          body: JSON.stringify({ startDate: "2026-06-14", dueDate: "2026-06-16" }),
-        })
-      );
-    });
-  });
-
-  it("resizing a single-day task by its START handle anchors the due date", async () => {
-    const pointTask = { ...rangedTask, id: "t-point2", title: "Point two", startDate: null, dueDate: "2026-06-14" };
-    render(<CalendarView initialMonth="2026-06" tasks={[pointTask]} />);
-
-    const startHandle = screen.getByLabelText("Resize start for Point two");
-    const dt = makeDataTransfer();
-
-    fireEvent.dragStart(startHandle, { dataTransfer: dt });
-    const targetCell = screen.getByText("11");
-    fireEvent.dragOver(targetCell, { dataTransfer: dt });
-    fireEvent.drop(targetCell, { dataTransfer: dt });
-
-    await waitFor(() => {
-      expect(fetchMock).toHaveBeenCalledWith(
-        "/api/tasks/t-point2",
-        expect.objectContaining({
-          method: "PATCH",
-          body: JSON.stringify({ startDate: "2026-06-11", dueDate: "2026-06-14" }),
-        })
-      );
-    });
-  });
-});