@knotpad/app 0.1.0 → 0.1.1

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

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

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