@knotpad/app 0.1.5 → 0.1.6

package/components/calendar/calendar-agenda.tsx

@@ -0,0 +1,150 @@
+"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

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

package/components/calendar/calendar-grid.tsx

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