@knotpad/app 0.1.0

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

@@ -0,0 +1,295 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CalendarView } from "@/components/calendar/calendar-view";
+
+const holidayState = {
+  holidayModuleEnabled: false,
+  holidaysVisible: false,
+  holidayCountry: "MY",
+  holidays: { "2026-06-15": [{ name: "Holiday", is_subject_to_change: false }] },
+  holidaysLoading: false,
+  holidayError: false,
+};
+
+const feedState = {
+  feeds: [],
+  visibleFeedIds: new Set<string>(),
+  busyEnabled: false,
+  busyLoading: false,
+  busyDropdownOpen: false,
+  syncingFeedId: null as string | null,
+  syncingAll: false,
+  busyBlocks: {} as Record<
+    string,
+    Array<{
+      title: string;
+      feedLabel: string;
+      feedColor: string;
+      allDay: boolean;
+      start: string;
+    }>
+  >,
+};
+
+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: () => [],
+}));
+
+vi.mock("@/components/calendar/calendar-hooks", () => ({
+  useHolidays: () => ({
+    holidayModuleEnabled: holidayState.holidayModuleEnabled,
+    holidaysVisible: holidayState.holidaysVisible,
+    holidayCountry: holidayState.holidayCountry,
+    holidays: holidayState.holidays,
+    holidaysLoading: holidayState.holidaysLoading,
+    holidayError: holidayState.holidayError,
+    toggleHolidayVisibility: vi.fn(),
+    holidaysEnabled: false,
+    toggleHolidays: vi.fn(),
+  }),
+  useCalendarFeeds: () => ({
+    feeds: feedState.feeds,
+    visibleFeedIds: feedState.visibleFeedIds,
+    busyEnabled: feedState.busyEnabled,
+    busyLoading: feedState.busyLoading,
+    busyDropdownOpen: feedState.busyDropdownOpen,
+    setBusyDropdownOpen: vi.fn(),
+    syncingFeedId: feedState.syncingFeedId,
+    syncingAll: feedState.syncingAll,
+    toggleFeedVisibility: vi.fn(),
+    syncFeed: vi.fn(),
+    syncAllFeeds: vi.fn(),
+    toggleBusyBlocks: vi.fn(),
+    busyBlocks: feedState.busyBlocks,
+  }),
+  useCalendarDrag: () => ({
+    saving: null,
+    dragOverDate: null,
+    handleDragStart: vi.fn(),
+    handleDragOver: vi.fn(),
+    handleDrop: vi.fn(),
+    handleDragEnd: vi.fn(),
+    pointTaskEdge: vi.fn(),
+    reschedule: vi.fn(),
+    dragEdge: "end",
+    dragTaskId: null,
+  }),
+  useBusyLimit: () => ({ busyLimit: 2, setBusyLimit: vi.fn() }),
+}));
+
+beforeEach(() => {
+  pushMock.mockReset();
+  refreshMock.mockReset();
+  vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true }));
+});
+
+afterEach(() => {
+  holidayState.holidayModuleEnabled = false;
+  holidayState.holidaysVisible = false;
+  holidayState.holidayCountry = "MY";
+  holidayState.holidays = { "2026-06-15": [{ name: "Holiday", is_subject_to_change: false }] };
+  holidayState.holidaysLoading = false;
+  holidayState.holidayError = false;
+  feedState.feeds = [];
+  feedState.visibleFeedIds = new Set<string>();
+  feedState.busyEnabled = false;
+  feedState.busyLoading = false;
+  feedState.busyDropdownOpen = false;
+  feedState.syncingFeedId = null;
+  feedState.syncingAll = false;
+  feedState.busyBlocks = {};
+  window.localStorage.clear();
+  vi.unstubAllGlobals();
+  cleanup();
+});
+
+describe("CalendarView", () => {
+  it("jumps directly to a selected month without a server refetch", async () => {
+    const user = userEvent.setup();
+    const pushStateSpy = vi.spyOn(window.history, "pushState");
+
+    render(<CalendarView initialMonth="2026-06" tasks={[]} />);
+
+    await user.selectOptions(screen.getByLabelText("Jump to month"), "2026-09");
+
+    // URL syncs via the native History API (no router.push flash / refetch).
+    expect(pushStateSpy).toHaveBeenCalledWith(null, "", "/calendar?month=2026-09");
+    expect(pushMock).not.toHaveBeenCalled();
+    pushStateSpy.mockRestore();
+  });
+
+  it("shows the no due date tray for unscheduled tasks", () => {
+    render(
+      <CalendarView
+        initialMonth="2026-06"
+        tasks={[
+          {
+            id: "t-unscheduled",
+            title: "Inbox task",
+            status: "OPEN",
+            startDate: null,
+            dueDate: null,
+            noteId: "n1",
+            noteTitle: "Launch",
+            assigneeName: null,
+            assigneeType: "HUMAN",
+            claimedByAlias: null,
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getAllByText(/No due date \(1\)/i).length).toBeGreaterThan(0);
+    expect(screen.queryByRole("button", { name: "Schedule for today" })).not.toBeInTheDocument();
+    expect(screen.queryByText(/does not have a date yet\./i)).not.toBeInTheDocument();
+  });
+
+  it("does not render holiday controls or entries when the module is disabled", () => {
+    render(<CalendarView tasks={[]} initialMonth="2026-06" />);
+
+    expect(screen.queryByText("Holidays")).not.toBeInTheDocument();
+    expect(screen.queryByText("Holiday")).not.toBeInTheDocument();
+  });
+
+  it("shows the bottom no due date tray when tasks have no dates", () => {
+    render(
+      <CalendarView
+        initialMonth="2026-06"
+        tasks={[
+          {
+            id: "t1",
+            title: "No date task",
+            status: "OPEN",
+            startDate: null,
+            dueDate: null,
+            noteId: "n1",
+            noteTitle: "Launch",
+            assigneeName: null,
+            assigneeType: "HUMAN",
+            claimedByAlias: null,
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getByText("Showing due dates")).toBeInTheDocument();
+    expect(screen.getAllByText(/No due date \(1\)/i).length).toBeGreaterThan(0);
+    expect(screen.queryByRole("button", { name: "Review tasks" })).not.toBeInTheDocument();
+  });
+
+  it("keeps the no due date tray visible when every task is scheduled", () => {
+    render(
+      <CalendarView
+        initialMonth="2026-06"
+        tasks={[
+          {
+            id: "t-scheduled",
+            title: "Scheduled task",
+            status: "OPEN",
+            startDate: null,
+            dueDate: "2026-06-12",
+            noteId: "n1",
+            noteTitle: "Launch",
+            assigneeName: null,
+            assigneeType: "HUMAN",
+            claimedByAlias: null,
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getByText(/No due date \(0\)/i)).toBeInTheDocument();
+    expect(screen.getByText(/Drop a task here or use Unassign to clear its dates\./i)).toBeInTheDocument();
+  });
+
+  it("does not duplicate the unscheduled tray with a top summary section", () => {
+    render(
+      <CalendarView
+        initialMonth="2026-06"
+        tasks={[
+          {
+            id: "t-unscheduled-2",
+            title: "Inbox task",
+            status: "OPEN",
+            startDate: null,
+            dueDate: null,
+            noteId: "n1",
+            noteTitle: "Launch",
+            assigneeName: null,
+            assigneeType: "HUMAN",
+            claimedByAlias: null,
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getAllByText(/No due date/i).length).toBeGreaterThan(0);
+    expect(screen.queryByText("Unscheduled")).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Review tasks" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Schedule for today" })).not.toBeInTheDocument();
+    expect(screen.queryByText(/does not have a date yet\./i)).not.toBeInTheDocument();
+  });
+
+  it("shows visible left and right resize handles for ranged tasks", () => {
+    render(
+      <CalendarView
+        initialMonth="2026-06"
+        tasks={[
+          {
+            id: "t-range",
+            title: "Mapped task",
+            status: "OPEN",
+            startDate: "2026-06-12",
+            dueDate: "2026-06-14",
+            noteId: "n1",
+            noteTitle: "Launch",
+            assigneeName: null,
+            assigneeType: "HUMAN",
+            claimedByAlias: null,
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getByLabelText("Resize start for Mapped task")).toBeInTheDocument();
+    expect(screen.getByLabelText("Resize end for Mapped task")).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Task actions for Mapped task" })).not.toBeInTheDocument();
+  });
+
+  it("hides holidays and busy blocks in the tasks-only lens", async () => {
+    const user = userEvent.setup();
+    holidayState.holidayModuleEnabled = true;
+    holidayState.holidaysVisible = true;
+    holidayState.holidays = {
+      "2026-06-15": [{ name: "Holiday", is_subject_to_change: false }],
+    };
+    feedState.busyEnabled = true;
+    feedState.busyBlocks = {
+      "2026-06-15": [
+        {
+          title: "Design review",
+          feedLabel: "Team Calendar",
+          feedColor: "sky",
+          allDay: false,
+          start: "2026-06-15T14:00:00.000Z",
+        },
+      ],
+    };
+
+    render(<CalendarView initialMonth="2026-06" tasks={[]} />);
+
+    await user.click(screen.getByRole("button", { name: "Tasks only" }));
+
+    expect(screen.queryByText("Holiday")).not.toBeInTheDocument();
+    expect(screen.queryByText("Design review")).not.toBeInTheDocument();
+  });
+});

package/components/calendar/calendar-view.tsx

@@ -0,0 +1,307 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useKanbanStatuses } from "@/components/kanban/kanban-status-context";
+import type { Props, CalTask } from "./calendar-types";
+import { parseYM, toYMD, effectiveDates, getOrderedDays } from "./calendar-types";
+import { useHolidays, useCalendarFeeds, useCalendarDrag, useBusyLimit } from "./calendar-hooks";
+import { CalendarToolbar } from "./calendar-toolbar";
+import { CalendarGrid } from "./calendar-grid";
+import { CalendarAgenda } from "./calendar-agenda";
+import { DayDetailPopover } from "./day-detail-popover";
+import { loadPreference, savePreference } from "@/lib/view-preferences";
+
+export function CalendarView({ tasks, initialMonth, filterNoteId, filterFolderId }: Props) {
+  const router = useRouter();
+  const kanbanStatuses = useKanbanStatuses();
+  const [ym, setYm] = useState(() => parseYM(initialMonth));
+  const [scheduleLens, setScheduleLens] = useState<"tasks" | "tasks-and-holidays" | "all">(() =>
+    loadPreference("brief:calendar-schedule-lens", "all")
+  );
+  const [optimistic, setOptimistic] = useState<
+    Record<string, { startDate?: string | null; dueDate?: string | null }>
+  >({});
+  const [dayDetail, setDayDetail] = useState<{
+    dateKey: string;
+    kind: "busy" | "tasks" | "holidays";
+    anchorRect: DOMRect | null;
+  } | null>(null);
+  const [monthDropdownOpen, setMonthDropdownOpen] = useState(false);
+  // Task 3.1.5: Start/Due date view toggle
+  const [dateViewMode] = useState<"due" | "start">("due");
+  const [firstDayOfWeek, setFirstDayOfWeek] = useState(0); // 0 = Sunday, 1 = Monday, 6 = Saturday
+
+  useEffect(() => {
+    const val = localStorage.getItem("brief:first-day-of-week");
+    if (val === "Mon") setFirstDayOfWeek(1);
+    else if (val === "Sat") setFirstDayOfWeek(6);
+    else setFirstDayOfWeek(0);
+  }, []);
+
+  useEffect(() => {
+    savePreference("brief:calendar-schedule-lens", scheduleLens);
+  }, [scheduleLens]);
+
+  const { year, month } = ym;
+  const firstDay = new Date(year, month, 1);
+  const lastDay  = new Date(year, month + 1, 0);
+  const startDow = (firstDay.getDay() - firstDayOfWeek + 7) % 7;
+  const totalCells = Math.ceil((startDow + lastDay.getDate()) / 7) * 7;
+
+  const cellKeys: (string | null)[] = Array.from({ length: totalCells }, (_, i) => {
+    const d = i - startDow + 1;
+    if (d < 1 || d > lastDay.getDate()) return null;
+    return toYMD(new Date(year, month, d));
+  });
+
+  const weeks: (string | null)[][] = [];
+  for (let i = 0; i < cellKeys.length; i += 7) weeks.push(cellKeys.slice(i, i + 7));
+
+  const orderedDays = getOrderedDays(firstDayOfWeek);
+
+  const scheduled: CalTask[] = [];
+  const unscheduled: CalTask[] = [];
+  for (const t of tasks) {
+    const dates = effectiveDates(t, optimistic, dateViewMode);
+    if (dates.start || dates.end) scheduled.push(t);
+    else unscheduled.push(t);
+  }
+
+  const pointByDate: Record<string, CalTask[]> = {};
+  for (const t of scheduled) {
+    const { start, end } = effectiveDates(t, optimistic, dateViewMode);
+    if (start && end && start === end) {
+      (pointByDate[end] ??= []).push(t);
+    }
+  }
+
+  function navigateToYM(newYm: { year: number; month: number }) {
+    setYm(newYm);
+    const monthStr = `${newYm.year}-${String(newYm.month + 1).padStart(2, "0")}`;
+    const params = new URLSearchParams();
+    params.set("month", monthStr);
+    if (filterNoteId) params.set("note", filterNoteId);
+    if (filterFolderId) params.set("folder", filterFolderId);
+    // Sync the URL without triggering a server re-fetch. Tasks are loaded for
+    // the whole workspace (not per-month) and holidays/busy blocks are fetched
+    // client-side, so a full navigation would only cause an avoidable refresh
+    // flash. window.history integrates with the Next.js Router.
+    window.history.pushState(null, "", `/calendar?${params.toString()}`);
+  }
+
+  function prevMonth() {
+    const { year, month } = ym;
+    navigateToYM(month === 0 ? { year: year - 1, month: 11 } : { year, month: month - 1 });
+  }
+  function nextMonth() {
+    const { year, month } = ym;
+    navigateToYM(month === 11 ? { year: year + 1, month: 0 } : { year, month: month + 1 });
+  }
+  function jumpToToday() {
+    const now = new Date();
+    navigateToYM({ year: now.getFullYear(), month: now.getMonth() });
+  }
+
+  const holidays = useHolidays(year, month);
+  const feeds = useCalendarFeeds(year, month);
+  const drag = useCalendarDrag(tasks, optimistic, setOptimistic, () => router.refresh());
+  const { busyLimit, setBusyLimit } = useBusyLimit();
+  const holidaysAreVisible = holidays.holidayModuleEnabled && holidays.holidaysVisible;
+  const showHolidays = scheduleLens === "tasks-and-holidays" || scheduleLens === "all";
+  const showBusyBlocks = scheduleLens === "all";
+  const holidaysEnabledForLens = holidaysAreVisible && showHolidays;
+  const busyEnabledForLens = feeds.busyEnabled && showBusyBlocks;
+  const visibleHolidayData = holidaysEnabledForLens ? holidays.holidays : {};
+  const visibleBusyBlocks = busyEnabledForLens ? feeds.busyBlocks : {};
+  const lensLabel = dateViewMode === "due" ? "Showing due dates" : "Showing start dates";
+
+  function onShowDayDetail(dateKey: string, kind: "busy" | "tasks" | "holidays", anchorRect: DOMRect | null) {
+    setDayDetail({ dateKey, kind, anchorRect });
+  }
+
+  // Close day-detail popover when navigating months
+  useEffect(() => {
+    setDayDetail(null);
+  }, [ym]);
+
+  // Close dropdowns on outside click
+  useEffect(() => {
+    if (!feeds.busyDropdownOpen) return;
+    // The toolbar manages its own refs; we rely on click-away in the toolbar component
+  }, [feeds.busyDropdownOpen]);
+
+  const today = toYMD(new Date());
+  const monthLabel = firstDay.toLocaleString("default", { month: "long", year: "numeric" });
+  const monthJumpOptions = Array.from({ length: 24 }, (_, index) => {
+    const optionDate = new Date(year, month - 6 + index, 1);
+    return {
+      value: `${optionDate.getFullYear()}-${String(optionDate.getMonth() + 1).padStart(2, "0")}`,
+      label: optionDate.toLocaleString("default", { month: "long", year: "numeric" }),
+    };
+  });
+
+  function isOverdue(task: CalTask): boolean {
+    if (task.status === "DONE") return false;
+    const { end } = effectiveDates(task, optimistic, dateViewMode);
+    return !!end && end < today;
+  }
+
+  const currentMonthParam = `${year}-${String(month + 1).padStart(2, "0")}`;
+  function taskHref(taskId: string) {
+    const params = new URLSearchParams();
+    params.set("month", currentMonthParam);
+    if (filterNoteId) params.set("note", filterNoteId);
+    if (filterFolderId) params.set("folder", filterFolderId);
+    const from = `/calendar?${params.toString()}`;
+    return `/tasks/${taskId}?from=${encodeURIComponent(from)}`;
+  }
+
+  // Mobile agenda data
+  const agendaByDay: Record<string, CalTask[]> = {};
+  for (const t of scheduled) {
+    const { end } = effectiveDates(t, optimistic);
+    if (!end || !end.startsWith(currentMonthParam)) continue;
+    (agendaByDay[end] ??= []).push(t);
+  }
+  const agendaDayKeys = Array.from(
+    new Set([
+      ...Object.keys(agendaByDay),
+      ...(holidaysEnabledForLens
+        ? Object.keys(visibleHolidayData).filter((d) => d.startsWith(currentMonthParam))
+        : []),
+      ...(busyEnabledForLens
+        ? Object.keys(visibleBusyBlocks).filter((d) => d.startsWith(currentMonthParam))
+        : []),
+    ])
+  ).sort();
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <CalendarToolbar
+        monthLabel={monthLabel}
+        filterNoteId={filterNoteId}
+        filterFolderId={filterFolderId}
+        onPrevMonth={prevMonth}
+        onNextMonth={nextMonth}
+        onJumpToToday={jumpToToday}
+        holidaysEnabled={holidaysAreVisible}
+        holidayModuleEnabled={holidays.holidayModuleEnabled}
+        holidaysVisible={holidays.holidaysVisible}
+        holidayCountry={holidays.holidayCountry}
+        holidaysLoading={holidays.holidaysLoading}
+        holidayError={holidays.holidayError}
+        onToggleHolidays={holidays.toggleHolidayVisibility}
+        feeds={feeds.feeds}
+        visibleFeedIds={feeds.visibleFeedIds}
+        busyEnabled={feeds.busyEnabled}
+        busyLoading={feeds.busyLoading}
+        busyDropdownOpen={feeds.busyDropdownOpen}
+        setBusyDropdownOpen={feeds.setBusyDropdownOpen}
+        syncingFeedId={feeds.syncingFeedId}
+        syncingAll={feeds.syncingAll}
+        onToggleFeedVisibility={feeds.toggleFeedVisibility}
+        onSyncFeed={feeds.syncFeed}
+        onSyncAllFeeds={feeds.syncAllFeeds}
+        onToggleBusyBlocks={feeds.toggleBusyBlocks}
+        busyLimit={busyLimit}
+        onBusyLimitChange={setBusyLimit}
+        monthDropdownOpen={monthDropdownOpen}
+        setMonthDropdownOpen={setMonthDropdownOpen}
+        currentMonthParam={currentMonthParam}
+        monthJumpOptions={monthJumpOptions}
+        onMonthSelect={(value) => {
+          const [nextYear, nextMonth] = value.split("-").map(Number);
+          navigateToYM({ year: nextYear, month: nextMonth - 1 });
+          setMonthDropdownOpen(false);
+        }}
+      />
+
+      <div className="border-b border-zinc-800 px-3 py-2 text-xs text-zinc-500 md:px-4">
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <span>{lensLabel}</span>
+          <div className="inline-flex rounded-md border border-zinc-800 bg-zinc-950 p-1">
+            {[
+              { key: "tasks", label: "Tasks only" },
+              { key: "tasks-and-holidays", label: "Tasks + holidays" },
+              { key: "all", label: "All schedule" },
+            ].map((option) => (
+              <button
+                key={option.key}
+                type="button"
+                onClick={() => setScheduleLens(option.key as "tasks" | "tasks-and-holidays" | "all")}
+                className={`rounded px-2 py-1 text-xs transition-colors ${
+                  scheduleLens === option.key
+                    ? "bg-zinc-800 text-zinc-200"
+                    : "text-zinc-500 hover:text-zinc-300"
+                }`}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div id="calendar-unscheduled" className="contents">
+        <CalendarGrid
+          weeks={weeks}
+          today={today}
+          scheduled={scheduled}
+          unscheduled={unscheduled}
+          pointByDate={pointByDate}
+          optimistic={optimistic}
+          holidays={visibleHolidayData}
+          holidayCountry={holidays.holidayCountry}
+          orderedDays={orderedDays}
+          busyEnabled={busyEnabledForLens}
+          busyBlocks={visibleBusyBlocks}
+          saving={drag.saving}
+          dragOverDate={drag.dragOverDate}
+          isOverdue={isOverdue}
+          taskHref={taskHref}
+          handleDragStart={drag.handleDragStart}
+          handleDragOver={drag.handleDragOver}
+          handleDrop={drag.handleDrop}
+          handleDragEnd={drag.handleDragEnd}
+          pointTaskEdge={drag.pointTaskEdge}
+          reschedule={drag.reschedule}
+          dragTaskId={drag.dragTaskId}
+          busyLimit={busyLimit}
+          onShowDayDetail={onShowDayDetail}
+        />
+
+        <CalendarAgenda
+          agendaDayKeys={agendaDayKeys}
+          agendaByDay={agendaByDay}
+          today={today}
+          holidaysEnabled={holidaysEnabledForLens}
+          holidays={visibleHolidayData}
+          holidayCountry={holidays.holidayCountry}
+          busyEnabled={busyEnabledForLens}
+          busyBlocks={visibleBusyBlocks}
+          unscheduled={unscheduled}
+          kanbanStatuses={kanbanStatuses}
+          isOverdue={isOverdue}
+          taskHref={taskHref}
+          busyLimit={busyLimit}
+          onShowDayDetail={onShowDayDetail}
+        />
+      </div>
+
+      <DayDetailPopover
+        open={dayDetail !== null}
+        onClose={() => setDayDetail(null)}
+        dateKey={dayDetail?.dateKey ?? null}
+        kind={dayDetail?.kind ?? "busy"}
+        busyBlocks={dayDetail ? visibleBusyBlocks[dayDetail.dateKey] ?? [] : []}
+        tasks={dayDetail ? pointByDate[dayDetail.dateKey] ?? [] : []}
+        holidays={dayDetail ? visibleHolidayData[dayDetail.dateKey] ?? [] : []}
+        holidayCountry={holidays.holidayCountry}
+        taskHref={taskHref}
+        isOverdue={isOverdue}
+        anchorRect={dayDetail?.anchorRect ?? null}
+      />
+    </div>
+  );
+}