@knotpad/app 0.1.0 → 0.1.1

package/components/calendar/calendar-grid.tsx

@@ -1,357 +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 { getStatusColor, feedBg, feedText, effectiveDates, countryFlag } from "./calendar-types";
-import { TaskChip } from "./task-chip";
-
-export function CalendarGrid({
-  weeks,
-  today,
-  scheduled,
-  unscheduled,
-  pointByDate,
-  optimistic,
-  holidays,
-  holidayCountry = "MY",
-  orderedDays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  busyEnabled,
-  busyBlocks,
-  saving,
-  dragOverDate,
-  isOverdue,
-  taskHref,
-  handleDragStart,
-  handleDragOver,
-  handleDrop,
-  handleDragEnd,
-  pointTaskEdge,
-  reschedule,
-  dragTaskId,
-  busyLimit,
-  onShowDayDetail,
-}: {
-  weeks: (string | null)[][];
-  today: string;
-  scheduled: CalTask[];
-  unscheduled: CalTask[];
-  pointByDate: Record<string, CalTask[]>;
-  optimistic: Record<string, { startDate?: string | null; dueDate?: string | null }>;
-  holidays: Record<string, HolidayEntry[]>;
-  holidayCountry?: string;
-  orderedDays?: string[];
-  busyEnabled: boolean;
-  busyBlocks: Record<string, BusyBlockEntry[]>;
-  saving: string | null;
-  dragOverDate: string | null;
-  isOverdue: (task: CalTask) => boolean;
-  taskHref: (taskId: string) => string;
-  handleDragStart: (e: React.DragEvent, taskId: string, edge: "start" | "end" | "both") => void;
-  handleDragOver: (e: React.DragEvent, dateKey: string | null) => void;
-  handleDrop: (e: React.DragEvent, dateKey: string | null) => void;
-  handleDragEnd: () => void;
-  pointTaskEdge: (task: CalTask) => "start" | "end" | "both";
-  reschedule: (taskId: string, edge: "start" | "end" | "both", newDate: string | null) => void;
-  dragTaskId: string | null;
-  busyLimit: number;
-  onShowDayDetail: (dateKey: string, kind: "busy" | "tasks" | "holidays", anchorRect: DOMRect | null) => void;
-}) {
-  const kanbanStatuses = useKanbanStatuses();
-
-  return (
-    <div className="hidden flex-1 flex-col overflow-y-auto md:flex">
-      {/* Day-of-week headers */}
-      <div className="grid grid-cols-7 border-b border-zinc-800">
-        {orderedDays.map((d) => (
-          <div key={d} className="py-2 text-center text-[11px] font-medium text-zinc-600">{d}</div>
-        ))}
-      </div>
-
-      {/* Calendar weeks */}
-      {weeks.map((week, wi) => {
-        const spans = scheduled
-          .map((task) => {
-            const { start, end } = effectiveDates(task, optimistic);
-            if (!start || !end) return null;
-            if (start === end) return null;
-            const weekDays = week.filter(Boolean) as string[];
-            if (!weekDays.length) return null;
-            const weekStart = weekDays[0];
-            const weekEnd   = weekDays[weekDays.length - 1];
-            if (end < weekStart || start > weekEnd) return null;
-
-            const clippedStart = start < weekStart ? weekStart : start;
-            const clippedEnd   = end   > weekEnd   ? weekEnd   : end;
-
-            const colStart = week.indexOf(clippedStart);
-            const colEnd   = week.indexOf(clippedEnd);
-            if (colStart === -1 || colEnd === -1) return null;
-
-            return {
-              task,
-              colStart,
-              colEnd,
-              isRealStart: clippedStart === start,
-              isRealEnd:   clippedEnd   === end,
-            };
-          })
-          .filter(Boolean) as {
-            task: CalTask;
-            colStart: number;
-            colEnd: number;
-            isRealStart: boolean;
-            isRealEnd: boolean;
-          }[];
-
-        type SpanWithRow = (typeof spans)[0] & { row: number };
-        const spansWithRow: SpanWithRow[] = [];
-        for (const s of spans) {
-          const rowBlocked: boolean[] = [];
-          for (const prev of spansWithRow) {
-            if (prev.colStart <= s.colEnd && prev.colEnd >= s.colStart) {
-              rowBlocked[prev.row] = true;
-            }
-          }
-          const row = rowBlocked.findIndex((v) => !v);
-          spansWithRow.push({ ...s, row: row === -1 ? rowBlocked.length : row });
-        }
-        const maxRow = spansWithRow.reduce((m, s) => Math.max(m, s.row), -1);
-        const barsHeight = (maxRow + 1) * 24;
-
-        return (
-          <div key={wi} className="relative border-b border-zinc-800/40">
-            {spansWithRow.length > 0 && (
-              <div
-                className="absolute inset-x-0 top-0 z-10 grid grid-cols-7"
-                style={{ height: `${barsHeight}px`, gridTemplateRows: `repeat(${maxRow + 1}, 24px)` }}
-                onDragOver={(e) => {
-                  const rect = e.currentTarget.getBoundingClientRect();
-                  const colIndex = Math.min(6, Math.max(0, Math.floor((e.clientX - rect.left) / (rect.width / 7))));
-                  const dateKey = week[colIndex];
-                  if (dateKey) handleDragOver(e, dateKey);
-                  else e.preventDefault();
-                }}
-                onDrop={(e) => {
-                  const rect = e.currentTarget.getBoundingClientRect();
-                  const colIndex = Math.min(6, Math.max(0, Math.floor((e.clientX - rect.left) / (rect.width / 7))));
-                  const dateKey = week[colIndex];
-                  // Dropping on a day outside this month (null cell) should
-                  // cancel rather than clear the task's dates.
-                  if (dateKey) handleDrop(e, dateKey);
-                  else handleDragEnd();
-                }}
-              >
-                {spansWithRow.map(({ task, colStart, colEnd, isRealStart, isRealEnd, row }) => {
-                  const color = getStatusColor(kanbanStatuses, task.status);
-                  const span  = colEnd - colStart + 1;
-                  return (
-                    <div
-                      key={task.id}
-                      style={{
-                        gridColumn: `${colStart + 1} / span ${span}`,
-                        gridRow: row + 1,
-                      }}
-                      className={`mx-0.5 my-0.5 flex items-center overflow-hidden rounded border text-[10px] text-white ${
-                        isOverdue(task) ? "border-red-700/70 bg-red-800" : "border-black/20"
-                      } ${isOverdue(task) ? "" : color}`}
-                    >
-                      {isRealStart && (
-                        <span
-                          draggable
-                          onDragStart={(e) => { e.stopPropagation(); handleDragStart(e, task.id, "start"); }}
-                          onDragEnd={handleDragEnd}
-                          aria-label={`Resize start for ${task.title}`}
-                          className="flex w-5 min-w-[20px] shrink-0 cursor-ew-resize items-center justify-center self-stretch border-r border-white/15 bg-zinc-950/45 hover:bg-zinc-950/70"
-                          title="Drag to change start date"
-                        >
-                          <span className="rounded-sm border border-white/25 bg-white/10 px-1 text-[8px] font-semibold leading-4 text-white/80">
-                            &lt;
-                          </span>
-                        </span>
-                      )}
-                      <div
-                        draggable
-                        onDragStart={(e) => { e.stopPropagation(); handleDragStart(e, task.id, "both"); }}
-                        onDragEnd={handleDragEnd}
-                        className="flex min-w-0 flex-1 cursor-grab items-center gap-1 px-1 active:cursor-grabbing"
-                        title={`${task.title} · ${task.noteTitle}`}
-                      >
-                        <Link
-                          href={taskHref(task.id)}
-                          draggable={false}
-                          onClick={(e) => e.stopPropagation()}
-                          className="min-w-0 flex-1 truncate"
-                        >
-                          {isRealStart ? task.title : task.title}
-                        </Link>
-                      </div>
-                      {isRealEnd && (
-                        <span
-                          draggable
-                          onDragStart={(e) => { e.stopPropagation(); handleDragStart(e, task.id, "end"); }}
-                          onDragEnd={handleDragEnd}
-                          aria-label={`Resize end for ${task.title}`}
-                          className="flex w-5 min-w-[20px] shrink-0 cursor-ew-resize items-center justify-center self-stretch border-l border-white/15 bg-zinc-950/45 hover:bg-zinc-950/70"
-                          title="Drag to change end date"
-                        >
-                          <span className="rounded-sm border border-white/25 bg-white/10 px-1 text-[8px] font-semibold leading-4 text-white/80">
-                            &gt;
-                          </span>
-                        </span>
-                      )}
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-
-            <div className="grid grid-cols-7" style={{ gridAutoRows: "minmax(80px, 1fr)", paddingTop: `${barsHeight}px` }}>
-              {week.map((key, di) => {
-                const isToday        = key === today;
-                const isDragOver     = dragOverDate === key;
-                const isCurrentMonth = key !== null;
-                const dayTasks       = key ? (pointByDate[key] ?? []) : [];
-
-                return (
-                  <div
-                    key={di}
-                    onDragOver={(e) => isCurrentMonth && handleDragOver(e, key)}
-                    onDrop={(e) => isCurrentMonth && handleDrop(e, key)}
-                    className={`min-h-[80px] border-r border-zinc-800/60 p-1.5 transition-colors ${
-                      !isCurrentMonth
-                        ? "bg-zinc-900/20"
-                        : isDragOver
-                          ? "bg-zinc-700/20 ring-1 ring-inset ring-zinc-500/50"
-                          : ""
-                    }`}
-                  >
-                    {key && (
-                      <>
-                        <div
-                          className={`mb-1 flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-medium ${
-                            isToday ? "bg-blue-500 text-white" : "text-zinc-600"
-                          }`}
-                        >
-                          {new Date(key + "T00:00:00").getDate()}
-                        </div>
-                        {(holidays[key] ?? []).slice(0, 3).map((h) => (
-                          <div
-                            key={h.name}
-                            title={h.name + (h.is_subject_to_change ? " · Date subject to change" : "")}
-                            className="mb-0.5 flex items-center gap-1 rounded border border-amber-800/40 bg-amber-950/50 px-1 py-0.5 text-[10px] leading-tight text-amber-300"
-                          >
-                            <span className="shrink-0 text-[9px]">{countryFlag(holidayCountry)}</span>
-                            <span className="truncate">{h.name}{h.is_subject_to_change ? " *" : ""}</span>
-                          </div>
-                        ))}
-                        {(holidays[key] ?? []).length > 3 && (
-                          <button
-                            type="button"
-                            onClick={(e) => onShowDayDetail(key, "holidays", e.currentTarget.getBoundingClientRect())}
-                            className="block w-full text-left text-[10px] text-amber-500 pl-1 hover:text-amber-400 transition-colors mb-0.5"
-                          >
-                            +{(holidays[key] ?? []).length - 3} holidays
-                          </button>
-                        )}
-
-                        {busyEnabled && (busyBlocks[key] ?? []).slice(0, busyLimit).map((b, i) => (
-                          <div
-                            key={`${b.title}-${i}`}
-                            title={`${b.title} · ${b.feedLabel}`}
-                            className={`mb-0.5 truncate rounded border px-1 py-0.5 text-[10px] leading-tight ${feedBg(b.feedColor)} ${feedText(b.feedColor)}`}
-                          >
-                            {b.allDay ? b.title : `${new Date(b.start).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })} ${b.title}`}
-                          </div>
-                        ))}
-                        {busyEnabled && (busyBlocks[key]?.length ?? 0) > busyLimit && (
-                          <button
-                            type="button"
-                            onClick={(e) => onShowDayDetail(key, "busy", e.currentTarget.getBoundingClientRect())}
-                            className="block w-full text-left text-[10px] text-zinc-600 pl-1 hover:text-zinc-400 transition-colors"
-                          >
-                            +{(busyBlocks[key]?.length ?? 0) - busyLimit} busy
-                          </button>
-                        )}
-
-                        <div className="space-y-0.5">
-                          {dayTasks.slice(0, 3).map((task) => (
-                            <TaskChip
-                              key={task.id}
-                              task={task}
-                              href={taskHref(task.id)}
-                              isSaving={saving === task.id}
-                              isOverdue={isOverdue(task)}
-                              resizable
-                              onDragStart={(e) => handleDragStart(e, task.id, pointTaskEdge(task))}
-                              onEdgeDragStart={(e, edge) => handleDragStart(e, task.id, edge)}
-                              onDragEnd={handleDragEnd}
-                            />
-                          ))}
-                          {dayTasks.length > 3 && (
-                            <button
-                              type="button"
-                              onClick={(e) => onShowDayDetail(key, "tasks", e.currentTarget.getBoundingClientRect())}
-                              className="block w-full text-left text-[10px] text-zinc-600 pl-1 hover:text-zinc-400 transition-colors"
-                            >
-                              +{dayTasks.length - 3} more
-                            </button>
-                          )}
-                        </div>
-                      </>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        );
-      })}
-
-      {/* Unscheduled tasks */}
-      <div
-        className={`border-t border-zinc-800 px-4 transition-colors ${
-          dragOverDate === "__unscheduled__"
-            ? "bg-zinc-700/20 py-3 ring-1 ring-inset ring-zinc-500/60"
-            : unscheduled.length === 0
-              ? "bg-zinc-950/30 py-2"
-              : "py-3"
-        }`}
-        onDragOver={(e) => handleDragOver(e, "__unscheduled__")}
-        onDrop={(e) => {
-          e.preventDefault();
-          if (dragTaskId) reschedule(dragTaskId, "both", null);
-        }}
-      >
-        <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>
-          <span className="text-[10px] text-zinc-700">drag here to clear date</span>
-        </div>
-        {unscheduled.length > 0 ? (
-          <div className="flex flex-wrap gap-1.5">
-            {unscheduled.map((task) => (
-              <TaskChip
-                key={task.id}
-                task={task}
-                href={taskHref(task.id)}
-                isSaving={saving === task.id}
-                isOverdue={false}
-                onDragStart={(e) => handleDragStart(e, task.id, "both")}
-                onDragEnd={handleDragEnd}
-                compact
-              />
-            ))}
-          </div>
-        ) : (
-          <p className="text-[11px] text-zinc-600">
-            Drop a task here or use Unassign to clear its dates.
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

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

@@ -1,27 +0,0 @@
-// @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();
-  });
-});