@knotpad/app 0.1.4 → 0.1.6

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

@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+import { renderHook, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useHolidays } from "@/components/calendar/calendar-hooks";
+
+describe("useHolidays", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("does not enable or fetch holidays when Settings is off", async () => {
+    const fetchSpy = vi.spyOn(global, "fetch");
+    localStorage.setItem("brief:holidays", "false");
+    localStorage.setItem("brief:holidays-country", "MY");
+
+    const { result } = renderHook(() => useHolidays(2026, 5));
+
+    await waitFor(() => {
+      expect(result.current.holidayModuleEnabled).toBe(false);
+      expect(result.current.holidaysVisible).toBe(false);
+      expect(result.current.holidays).toEqual({});
+    });
+
+    expect(fetchSpy).not.toHaveBeenCalled();
+  });
+});

package/components/calendar/calendar-hooks.ts

@@ -0,0 +1,351 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import type { HolidayEntry, BusyBlockEntry, FeedMeta, CalTask } from "./calendar-types";
+import { toYMD, effectiveDates } from "./calendar-types";
+
+export function useHolidays(year: number, month: number) {
+  const [holidayModuleEnabled, setHolidayModuleEnabled] = useState(false);
+  const [holidaysVisible, setHolidaysVisible] = useState(false);
+  const [holidayCountry, setHolidayCountry] = useState("MY");
+  const [holidayRegion, setHolidayRegion] = useState("");
+  const [holidays, setHolidays] = useState<Record<string, HolidayEntry[]>>({});
+  const [holidaysLoading, setHolidaysLoading] = useState(false);
+  const [holidayError, setHolidayError] = useState(false);
+
+  // Rehydrate from localStorage whenever Settings updates holiday prefs.
+  useEffect(() => {
+    function rehydrate() {
+      const enabled = localStorage.getItem("brief:holidays") === "true";
+      const storedCountry = localStorage.getItem("brief:holidays-country");
+      const storedRegion = localStorage.getItem("brief:holidays-region") ?? "";
+      setHolidayModuleEnabled(enabled);
+      setHolidaysVisible(enabled);
+      setHolidayCountry(storedCountry ?? "MY");
+      setHolidayRegion(storedRegion);
+    }
+    rehydrate();
+    window.addEventListener("brief:holidays-settings-changed", rehydrate);
+    return () => window.removeEventListener("brief:holidays-settings-changed", rehydrate);
+  }, []);
+
+  useEffect(() => {
+    if (!holidayModuleEnabled || !holidaysVisible) {
+      setHolidays({});
+      setHolidaysLoading(false);
+      setHolidayError(false);
+      return;
+    }
+    let cancelled = false;
+    setHolidaysLoading(true);
+    setHolidayError(false);
+
+    const yearsToFetch = [year];
+    if (month === 0) {
+      yearsToFetch.push(year - 1);
+    } else if (month === 11) {
+      yearsToFetch.push(year + 1);
+    }
+
+    const fetches = yearsToFetch.map((y) => {
+      const params = new URLSearchParams({ country: holidayCountry, year: String(y) });
+      if (holidayRegion) params.set("state", holidayRegion);
+      return fetch(`/api/holidays?${params}`).then((r) =>
+        r.ok ? r.json() : Promise.reject(r.status)
+      );
+    });
+
+    Promise.all(fetches)
+      .then((results) => {
+        if (cancelled) return;
+        const byDate: Record<string, HolidayEntry[]> = {};
+        for (const data of results) {
+          for (const h of data.holidays ?? []) {
+            (byDate[h.date] ??= []).push({ name: h.name, is_subject_to_change: h.is_subject_to_change });
+          }
+        }
+        setHolidays(byDate);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setHolidays({});
+          setHolidayError(true);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) setHolidaysLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [holidayModuleEnabled, holidaysVisible, holidayCountry, holidayRegion, year, month]);
+
+  function toggleHolidayVisibility() {
+    if (!holidayModuleEnabled) return;
+    setHolidaysVisible((prev) => !prev);
+  }
+
+  return {
+    holidayModuleEnabled,
+    holidaysVisible,
+    holidayCountry,
+    holidayRegion,
+    holidays,
+    holidaysLoading,
+    holidayError,
+    toggleHolidayVisibility,
+    holidaysEnabled: holidayModuleEnabled && holidaysVisible,
+    toggleHolidays: toggleHolidayVisibility,
+  };
+}
+
+export function useBusyLimit() {
+  const [busyLimit, setBusyLimitState] = useState(2);
+
+  useEffect(() => {
+    const stored = parseInt(localStorage.getItem("brief:busy-limit") ?? "", 10);
+    if (!Number.isNaN(stored)) {
+      setBusyLimitState(Math.min(10, Math.max(1, stored)));
+    }
+  }, []);
+
+  function setBusyLimit(n: number) {
+    const clamped = Math.min(10, Math.max(1, n));
+    setBusyLimitState(clamped);
+    localStorage.setItem("brief:busy-limit", String(clamped));
+  }
+
+  return { busyLimit, setBusyLimit };
+}
+
+export function useCalendarFeeds(year: number, month: number) {
+  const [feeds, setFeeds] = useState<FeedMeta[]>([]);
+  const [visibleFeedIds, setVisibleFeedIds] = useState<Set<string>>(new Set());
+  const [busyDropdownOpen, setBusyDropdownOpen] = useState(false);
+  const [busyEvents, setBusyEvents] = useState<Record<string, BusyBlockEntry[]>>({});
+  const [busyLoading, setBusyLoading] = useState(false);
+  const [syncingFeedId, setSyncingFeedId] = useState<string | null>(null);
+  const [syncingAll, setSyncingAll] = useState(false);
+
+  // Fetch connected feeds on mount
+  useEffect(() => {
+    fetch("/api/calendar-feeds")
+      .then((r) => (r.ok ? r.json() : []))
+      .then((data: FeedMeta[]) => {
+        setFeeds(data);
+        // Rehydrate visible feed IDs from localStorage (default: all visible)
+        try {
+          const stored = localStorage.getItem("brief:busy-feeds");
+          if (stored) {
+            const ids = new Set<string>(JSON.parse(stored));
+            setVisibleFeedIds(new Set(data.filter((f) => ids.has(f.id)).map((f) => f.id)));
+          } else {
+            setVisibleFeedIds(new Set(data.map((f) => f.id)));
+          }
+        } catch {
+          setVisibleFeedIds(new Set(data.map((f) => f.id)));
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  const busyEnabled = visibleFeedIds.size > 0;
+
+  function toggleFeedVisibility(feedId: string) {
+    setVisibleFeedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(feedId)) next.delete(feedId);
+      else next.add(feedId);
+      localStorage.setItem("brief:busy-feeds", JSON.stringify([...next]));
+      return next;
+    });
+  }
+
+  // Fetch busy blocks for the visible month
+  useEffect(() => {
+    if (!busyEnabled) { setBusyEvents({}); return; }
+    let cancelled = false;
+    setBusyLoading(true);
+    const rangeStart = toYMD(new Date(year, month, 1));
+    const rangeEnd = toYMD(new Date(year, month + 1, 0));
+    fetch(`/api/calendar-feeds/events?start=${rangeStart}&end=${rangeEnd}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
+      .then((data: { events: Record<string, BusyBlockEntry[]> }) => {
+        if (cancelled) return;
+        setBusyEvents(data.events ?? {});
+      })
+      .catch(() => { if (!cancelled) setBusyEvents({}); })
+      .finally(() => { if (!cancelled) setBusyLoading(false); });
+    return () => { cancelled = true; };
+  }, [busyEnabled, year, month]);
+
+  // Filter busy events by visible feeds
+  const busyBlocks: Record<string, BusyBlockEntry[]> = {};
+  if (busyEnabled) {
+    for (const [date, events] of Object.entries(busyEvents)) {
+      const filtered = events.filter((e) => visibleFeedIds.has(e.feedId));
+      if (filtered.length > 0) busyBlocks[date] = filtered;
+    }
+  }
+
+  async function syncFeed(feedId: string) {
+    setSyncingFeedId(feedId);
+    try {
+      await fetch(`/api/calendar-feeds/${feedId}/sync`, { method: "POST" });
+      const rangeStart = toYMD(new Date(year, month, 1));
+      const rangeEnd = toYMD(new Date(year, month + 1, 0));
+      const res = await fetch(`/api/calendar-feeds/events?start=${rangeStart}&end=${rangeEnd}`);
+      if (res.ok) {
+        const data = await res.json();
+        setBusyEvents(data.events ?? {});
+      }
+    } catch { /* ignore */ }
+    finally { setSyncingFeedId(null); }
+  }
+
+  async function syncAllFeeds() {
+    setSyncingAll(true);
+    try {
+      await fetch("/api/calendar-feeds/sync-all", { method: "POST" });
+      const rangeStart = toYMD(new Date(year, month, 1));
+      const rangeEnd = toYMD(new Date(year, month + 1, 0));
+      const res = await fetch(`/api/calendar-feeds/events?start=${rangeStart}&end=${rangeEnd}`);
+      if (res.ok) {
+        const data = await res.json();
+        setBusyEvents(data.events ?? {});
+      }
+    } catch { /* ignore */ }
+    finally { setSyncingAll(false); }
+  }
+
+  function toggleBusyBlocks() {
+    const allVisible = feeds.every((f) => visibleFeedIds.has(f.id));
+    const next = allVisible ? new Set<string>() : new Set(feeds.map((f) => f.id));
+    setVisibleFeedIds(next);
+    localStorage.setItem("brief:busy-feeds", JSON.stringify([...next]));
+  }
+
+  return {
+    feeds, visibleFeedIds, busyDropdownOpen, setBusyDropdownOpen,
+    busyEvents, busyLoading, busyBlocks, busyEnabled,
+    syncingFeedId, syncingAll,
+    toggleFeedVisibility, syncFeed, syncAllFeeds, toggleBusyBlocks,
+  };
+}
+
+export function useCalendarDrag(
+  tasks: CalTask[],
+  optimistic: Record<string, { startDate?: string | null; dueDate?: string | null }>,
+  setOptimistic: React.Dispatch<React.SetStateAction<Record<string, { startDate?: string | null; dueDate?: string | null }>>>,
+  routerRefresh: () => void,
+) {
+  const [dragTaskId, setDragTaskId] = useState<string | null>(null);
+  const [dragEdge, setDragEdge] = useState<"start" | "end" | "both">("end");
+  const [dragOverDate, setDragOverDate] = useState<string | null>(null);
+  const [saving, setSaving] = useState<string | null>(null);
+
+  const reschedule = useCallback(
+    async (taskId: string, edge: "start" | "end" | "both", newDate: string | null) => {
+      const prevOptimistic = optimistic;
+      const task = tasks.find((item) => item.id === taskId);
+      const { start, end } = task
+        ? effectiveDates(task, optimistic)
+        : { start: null, end: null };
+      let patch: { startDate?: string | null; dueDate?: string | null };
+
+      if (edge === "both" && newDate !== null) {
+        if (task?.startDate && task.dueDate && start && end && start !== end) {
+          const startTime = new Date(`${start}T00:00:00`).getTime();
+          const endTime = new Date(`${end}T00:00:00`).getTime();
+          const daySpan = Math.max(0, Math.round((endTime - startTime) / 86_400_000));
+          const nextEnd = new Date(`${newDate}T00:00:00`);
+          nextEnd.setDate(nextEnd.getDate() + daySpan);
+          patch = { startDate: newDate, dueDate: toYMD(nextEnd) };
+        } else if (task?.startDate && !task.dueDate) {
+          patch = { startDate: newDate };
+        } else if (!task?.startDate && task?.dueDate) {
+          patch = { dueDate: newDate };
+        } else if (task?.startDate && task.dueDate) {
+          patch = { startDate: newDate, dueDate: newDate };
+        } else {
+          patch = { dueDate: newDate };
+        }
+      } else if (edge === "both") {
+        patch = { startDate: null, dueDate: null };
+      } else {
+        // Resize a single edge, keeping the opposite edge anchored at its
+        // current effective date. This lets a single-day task be stretched
+        // into a range (and vice versa), and always keeps startDate <= dueDate.
+        const anchor = edge === "start" ? end : start;
+        if (newDate === null || anchor === null) {
+          patch = edge === "start" ? { startDate: newDate } : { dueDate: newDate };
+        } else {
+          const lo = newDate < anchor ? newDate : anchor;
+          const hi = newDate < anchor ? anchor : newDate;
+          patch = { startDate: lo, dueDate: hi };
+        }
+      }
+
+      setOptimistic((prev) => ({
+        ...prev,
+        [taskId]: { ...(prev[taskId] ?? {}), ...patch },
+      }));
+      setSaving(taskId);
+      try {
+        const res = await fetch(`/api/tasks/${taskId}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(patch),
+        });
+        if (!res.ok) throw new Error("patch failed");
+        routerRefresh();
+      } catch {
+        setOptimistic(prevOptimistic);
+      } finally {
+        setSaving(null);
+      }
+    },
+    [routerRefresh, optimistic, setOptimistic, tasks]
+  );
+
+  function handleDragStart(e: React.DragEvent, taskId: string, edge: "start" | "end" | "both") {
+    setDragTaskId(taskId);
+    setDragEdge(edge);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", taskId);
+  }
+
+  function handleDragOver(e: React.DragEvent, dateKey: string | null) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    setDragOverDate(dateKey);
+  }
+
+  function handleDrop(e: React.DragEvent, dateKey: string | null) {
+    e.preventDefault();
+    if (dragTaskId) {
+      reschedule(dragTaskId, dragEdge, dateKey);
+    }
+    setDragTaskId(null);
+    setDragOverDate(null);
+  }
+
+  function handleDragEnd() {
+    setDragTaskId(null);
+    setDragOverDate(null);
+  }
+
+  // Dragging the body of a point task should move it (shift whichever dates are
+  // set). Resizing into a range is handled separately by the edge handles, which
+  // use the "start"/"end" edges. Using "both" here keeps move and resize distinct.
+  function pointTaskEdge(): "start" | "end" | "both" {
+    return "both";
+  }
+
+  return {
+    dragTaskId, dragEdge, dragOverDate, saving,
+    reschedule, handleDragStart, handleDragOver, handleDrop, handleDragEnd,
+    pointTaskEdge,
+  };
+}

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

@@ -0,0 +1,68 @@
+// @vitest-environment jsdom
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { CalendarToolbar } from "@/components/calendar/calendar-toolbar";
+
+afterEach(() => {
+  cleanup();
+});
+
+function renderToolbar(
+  props: Partial<React.ComponentProps<typeof CalendarToolbar>> = {}
+) {
+  return render(
+    <CalendarToolbar
+      monthLabel="June 2026"
+      onPrevMonth={vi.fn()}
+      onNextMonth={vi.fn()}
+      onJumpToToday={vi.fn()}
+      holidaysEnabled={false}
+      holidayModuleEnabled={false}
+      holidaysVisible={false}
+      holidayCountry="MY"
+      holidaysLoading={false}
+      holidayError={false}
+      onToggleHolidays={vi.fn()}
+      feeds={[]}
+      visibleFeedIds={new Set()}
+      busyEnabled={false}
+      busyLoading={false}
+      busyDropdownOpen={false}
+      setBusyDropdownOpen={vi.fn()}
+      syncingFeedId={null}
+      syncingAll={false}
+      onToggleFeedVisibility={vi.fn()}
+      onSyncFeed={vi.fn()}
+      onSyncAllFeeds={vi.fn()}
+      onToggleBusyBlocks={vi.fn()}
+      busyLimit={2}
+      onBusyLimitChange={vi.fn()}
+      monthDropdownOpen={false}
+      setMonthDropdownOpen={vi.fn()}
+      currentMonthParam="2026-06"
+      monthJumpOptions={[]}
+      onMonthSelect={vi.fn()}
+      {...props}
+    />
+  );
+}
+
+describe("CalendarToolbar", () => {
+  it("hides the holiday button when the module is disabled", () => {
+    renderToolbar();
+
+    expect(screen.queryByText("Holidays")).not.toBeInTheDocument();
+  });
+
+  it("shows simplified calendar controls when the module is enabled", () => {
+    renderToolbar({
+      holidaysEnabled: true,
+      holidayModuleEnabled: true,
+      holidaysVisible: true,
+    });
+
+    expect(screen.getByRole("button", { name: /holidays/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /busy time/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /calendar feeds/i })).toBeInTheDocument();
+  });
+});