@knotpad/app 0.1.0

package/components/calendar/calendar-toolbar.tsx

@@ -0,0 +1,291 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, CalendarDays, RefreshCw, ChevronDown, Globe, AlertCircle, ChevronDown as ChevronDownIcon } from "lucide-react";
+import { useRef, useEffect } from "react";
+import type { FeedMeta } from "./calendar-types";
+import { FEED_COLORS, countryFlag } from "./calendar-types";
+
+export function CalendarToolbar({
+  monthLabel,
+  filterNoteId,
+  filterFolderId,
+  onPrevMonth,
+  onNextMonth,
+  onJumpToToday,
+  // Holiday state
+  holidaysEnabled,
+  holidayModuleEnabled,
+  holidaysVisible,
+  holidayCountry,
+  holidaysLoading,
+  holidayError,
+  onToggleHolidays,
+  // Busy blocks state
+  feeds,
+  visibleFeedIds,
+  busyEnabled,
+  busyLoading,
+  busyDropdownOpen,
+  setBusyDropdownOpen,
+  syncingFeedId,
+  syncingAll,
+  onToggleFeedVisibility,
+  onSyncFeed,
+  onSyncAllFeeds,
+  onToggleBusyBlocks,
+  busyLimit,
+  onBusyLimitChange,
+  // Month dropdown state
+  monthDropdownOpen,
+  setMonthDropdownOpen,
+  currentMonthParam,
+  monthJumpOptions,
+  onMonthSelect,
+}: {
+  monthLabel: string;
+  filterNoteId?: string;
+  filterFolderId?: string;
+  onPrevMonth: () => void;
+  onNextMonth: () => void;
+  onJumpToToday: () => void;
+  holidaysEnabled: boolean;
+  holidayModuleEnabled?: boolean;
+  holidaysVisible?: boolean;
+  holidayCountry: string;
+  holidaysLoading: boolean;
+  holidayError: boolean;
+  onToggleHolidays: () => void;
+  feeds: FeedMeta[];
+  visibleFeedIds: Set<string>;
+  busyEnabled: boolean;
+  busyLoading: boolean;
+  busyDropdownOpen: boolean;
+  setBusyDropdownOpen: (v: boolean | ((prev: boolean) => boolean)) => void;
+  syncingFeedId: string | null;
+  syncingAll: boolean;
+  onToggleFeedVisibility: (feedId: string) => void;
+  onSyncFeed: (feedId: string) => void;
+  onSyncAllFeeds: () => void;
+  onToggleBusyBlocks: () => void;
+  busyLimit: number;
+  onBusyLimitChange: (n: number) => void;
+  monthDropdownOpen: boolean;
+  setMonthDropdownOpen: (v: boolean) => void;
+  currentMonthParam: string;
+  monthJumpOptions: { value: string; label: string }[];
+  onMonthSelect: (value: string) => void;
+}) {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const monthDropdownRef = useRef<HTMLDivElement>(null);
+  const holidayModuleIsEnabled = holidayModuleEnabled ?? holidaysEnabled;
+  const holidayToggleIsVisible = holidaysVisible ?? holidaysEnabled;
+
+  // Close dropdowns on outside click
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setBusyDropdownOpen(false);
+      }
+      if (monthDropdownRef.current && !monthDropdownRef.current.contains(event.target as Node)) {
+        setMonthDropdownOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [setBusyDropdownOpen, setMonthDropdownOpen]);
+
+  return (
+    <div className="flex flex-wrap items-center justify-between gap-y-2 border-b border-zinc-800 px-4 py-2.5">
+      <div className="flex items-center gap-1">
+        <button
+          onClick={onPrevMonth}
+          className="flex h-7 w-7 items-center justify-center rounded text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
+        >
+          <ChevronLeft size={16} />
+        </button>
+        <button
+          onClick={onNextMonth}
+          className="flex h-7 w-7 items-center justify-center rounded text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300"
+        >
+          <ChevronRight size={16} />
+        </button>
+        <div className="relative" ref={monthDropdownRef}>
+          <button
+            onClick={() => setMonthDropdownOpen(!monthDropdownOpen)}
+            className="ml-2 flex items-center gap-1 text-sm font-medium text-zinc-300 hover:text-zinc-200"
+          >
+            {monthLabel}
+            <ChevronDownIcon size={12} className={`transition-transform ${monthDropdownOpen ? 'rotate-180' : ''}`} />
+          </button>
+          {monthDropdownOpen && (
+            <div className="absolute left-0 top-full z-50 mt-1 w-48 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl shadow-black/40 max-h-64 overflow-y-auto">
+              {monthJumpOptions.map((option) => (
+                <button
+                  key={option.value}
+                  onClick={() => onMonthSelect(option.value)}
+                  className={`block w-full px-3 py-2 text-left text-xs transition-colors ${
+                    option.value === currentMonthParam
+                      ? 'bg-zinc-800 text-zinc-200'
+                      : 'text-zinc-400 hover:bg-zinc-800/60 hover:text-zinc-200'
+                  }`}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        {(filterNoteId || filterFolderId) && (
+          <span className="ml-3 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] text-zinc-400">
+            Filtered
+          </span>
+        )}
+      </div>
+      <div className="flex flex-wrap items-center justify-end gap-2">
+        {/* Public holiday toggle */}
+        {holidayModuleIsEnabled && (
+          <button
+            type="button"
+            onClick={onToggleHolidays}
+            title={holidayToggleIsVisible ? "Hide public holidays" : "Show public holidays"}
+            className={`flex items-center gap-1.5 rounded border px-2.5 py-1 text-xs transition-colors ${
+              holidayError
+                ? "border-red-700/60 bg-red-950/30 text-red-400 hover:bg-red-950/50"
+                : holidayToggleIsVisible
+                  ? "border-amber-700/70 bg-amber-950/40 text-amber-300 hover:bg-amber-950/60"
+                  : "border-zinc-700 text-zinc-500 hover:border-zinc-600 hover:text-zinc-300"
+            }`}
+          >
+            {holidayError ? (
+              <AlertCircle size={12} />
+            ) : holidayToggleIsVisible ? (
+              <span className="text-[13px] leading-none">{countryFlag(holidayCountry)}</span>
+            ) : (
+              <Globe size={12} />
+            )}
+            <span>Holidays</span>
+            {holidaysLoading && (
+              <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-400" />
+            )}
+          </button>
+        )}
+
+        {/* External calendar feeds dropdown */}
+        <div className="relative" ref={dropdownRef}>
+          <button
+            type="button"
+            onClick={() => setBusyDropdownOpen((v: boolean) => !v)}
+            title="Manage connected calendar feeds"
+            className="flex items-center gap-1.5 rounded border border-zinc-700 px-2.5 py-1 text-xs text-zinc-300 transition-colors hover:border-zinc-600 hover:bg-zinc-800/60"
+          >
+            <CalendarDays size={12} />
+            <span>Calendar feeds</span>
+            <ChevronDown size={10} className={`transition-transform ${busyDropdownOpen ? "rotate-180" : ""}`} />
+          </button>
+
+          {busyDropdownOpen && (
+            <div className="absolute right-0 top-full z-50 mt-1.5 w-64 rounded-lg border border-zinc-700 bg-zinc-900 shadow-xl shadow-black/40">
+              {feeds.length === 0 ? (
+                <div className="p-3 text-xs text-zinc-500">
+                  <p>No calendars connected yet.</p>
+                  <p className="mt-1 text-zinc-600">Add one in Settings → Calendar.</p>
+                </div>
+              ) : (
+                <>
+                  <div className="flex items-center justify-between border-b border-zinc-800 px-3 py-2">
+                    <button
+                      type="button"
+                      onClick={onToggleBusyBlocks}
+                      className="text-xs text-zinc-400 hover:text-zinc-200 transition-colors"
+                    >
+                      {feeds.every((f) => visibleFeedIds.has(f.id)) ? "Hide all" : "Show all"}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={onSyncAllFeeds}
+                      disabled={syncingAll}
+                      className="flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-50"
+                      title="Refresh all feeds"
+                    >
+                      <RefreshCw size={11} className={syncingAll ? "animate-spin" : ""} />
+                      <span>{syncingAll ? "Syncing…" : "Sync all"}</span>
+                    </button>
+                  </div>
+
+                  <div className="max-h-60 overflow-y-auto py-1">
+                    {feeds.map((feed) => {
+                      const fc = (FEED_COLORS as Record<string, { bg: string; text: string }>)[feed.color] ?? FEED_COLORS.sky;
+                      const visible = visibleFeedIds.has(feed.id);
+                      return (
+                        <div
+                          key={feed.id}
+                          className="flex items-center gap-2 px-3 py-1.5 hover:bg-zinc-800/60 transition-colors"
+                        >
+                          <button
+                            type="button"
+                            onClick={() => onToggleFeedVisibility(feed.id)}
+                            className="flex flex-1 items-center gap-2 min-w-0"
+                          >
+                            <span
+                              className={`h-3 w-3 shrink-0 rounded-full transition-opacity ${fc.bg} ${
+                                visible ? "opacity-100" : "opacity-30"
+                              }`}
+                            />
+                            <span className={`truncate text-xs ${visible ? "text-zinc-200" : "text-zinc-600"}`}>
+                              {feed.label}
+                            </span>
+                          </button>
+
+                          <button
+                            type="button"
+                            onClick={() => onSyncFeed(feed.id)}
+                            disabled={syncingFeedId === feed.id}
+                            title={`Refresh ${feed.label}`}
+                            className="shrink-0 text-zinc-600 hover:text-zinc-300 transition-colors disabled:opacity-50"
+                          >
+                            <RefreshCw size={11} className={syncingFeedId === feed.id ? "animate-spin" : ""} />
+                          </button>
+                        </div>
+                      );
+                    })}
+                  </div>
+
+                  <div className="flex items-center justify-between border-t border-zinc-800 px-3 py-2">
+                    <span className="text-xs text-zinc-500">Show per day</span>
+                    <div className="flex items-center gap-1.5">
+                      <button
+                        type="button"
+                        onClick={() => onBusyLimitChange(busyLimit - 1)}
+                        disabled={busyLimit <= 1}
+                        className="flex h-5 w-5 items-center justify-center rounded border border-zinc-700 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200 disabled:opacity-30 disabled:hover:bg-transparent"
+                      >
+                        −
+                      </button>
+                      <span className="w-4 text-center text-xs text-zinc-300">{busyLimit}</span>
+                      <button
+                        type="button"
+                        onClick={() => onBusyLimitChange(busyLimit + 1)}
+                        disabled={busyLimit >= 5}
+                        className="flex h-5 w-5 items-center justify-center rounded border border-zinc-700 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200 disabled:opacity-30 disabled:hover:bg-transparent"
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+
+        <button
+          type="button"
+          onClick={onJumpToToday}
+          className="rounded border border-zinc-700 px-2.5 py-1 text-xs text-zinc-400 hover:border-zinc-600 hover:text-zinc-200 transition-colors"
+        >
+          Today
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/calendar/calendar-types.ts

@@ -0,0 +1,148 @@
+import { FEED_COLORS } from "@/lib/limits";
+
+export type CalTask = {
+  id: string;
+  title: string;
+  status: string;
+  startDate: string | null;
+  dueDate: string | null;
+  noteId: string;
+  noteTitle: string;
+  assigneeName: string | null;
+  assigneeType: string;
+  claimedByAlias: string | null;
+};
+
+export type HolidayEntry = { name: string; is_subject_to_change: boolean };
+export type BusyBlockEntry = { title: string; start: string; end: string; allDay: boolean; feedId: string; feedLabel: string; feedColor: string };
+export type FeedMeta = { id: string; label: string; color: string };
+
+export type Props = {
+  tasks: CalTask[];
+  initialMonth?: string;
+  filterNoteId?: string;
+  filterFolderId?: string;
+};
+
+export const COLOR_MAP: Record<string, string> = {
+  "border-zinc-700": "bg-zinc-600",
+  "border-red-700": "bg-red-600",
+  "border-orange-700": "bg-orange-600",
+  "border-amber-700": "bg-amber-600",
+  "border-yellow-700": "bg-yellow-600",
+  "border-lime-700": "bg-lime-600",
+  "border-green-700": "bg-green-600",
+  "border-emerald-700": "bg-emerald-600",
+  "border-teal-700": "bg-teal-600",
+  "border-cyan-700": "bg-cyan-600",
+  "border-sky-700": "bg-sky-600",
+  "border-blue-700": "bg-blue-600",
+  "border-indigo-700": "bg-indigo-600",
+  "border-violet-700": "bg-violet-600",
+  "border-purple-700": "bg-purple-600",
+  "border-fuchsia-700": "bg-fuchsia-600",
+  "border-pink-700": "bg-pink-600",
+  "border-rose-700": "bg-rose-600",
+};
+
+export const DOT_MAP: Record<string, string> = {
+  "border-zinc-700": "bg-zinc-500",
+  "border-red-700": "bg-red-500",
+  "border-orange-700": "bg-orange-500",
+  "border-amber-700": "bg-amber-500",
+  "border-yellow-700": "bg-yellow-500",
+  "border-lime-700": "bg-lime-500",
+  "border-green-700": "bg-green-500",
+  "border-emerald-700": "bg-emerald-500",
+  "border-teal-700": "bg-teal-500",
+  "border-cyan-700": "bg-cyan-500",
+  "border-sky-700": "bg-sky-500",
+  "border-blue-700": "bg-blue-500",
+  "border-indigo-700": "bg-indigo-500",
+  "border-violet-700": "bg-violet-500",
+  "border-purple-700": "bg-purple-500",
+  "border-fuchsia-700": "bg-fuchsia-500",
+  "border-pink-700": "bg-pink-500",
+  "border-rose-700": "bg-rose-500",
+};
+
+export const MY_STATES = [
+  { code: "FED", name: "Federal (All Territories)", short: "Federal" },
+  { code: "KUL", name: "W.P. Kuala Lumpur", short: "KL" },
+  { code: "PJY", name: "W.P. Putrajaya", short: "Putrajaya" },
+  { code: "LBN", name: "W.P. Labuan", short: "Labuan" },
+  { code: "SGR", name: "Selangor", short: "Selangor" },
+  { code: "JHR", name: "Johor", short: "Johor" },
+  { code: "KDH", name: "Kedah", short: "Kedah" },
+  { code: "KLN", name: "Kelantan", short: "Kelantan" },
+  { code: "MLK", name: "Melaka", short: "Melaka" },
+  { code: "NSN", name: "Negeri Sembilan", short: "N. Sembilan" },
+  { code: "PHG", name: "Pahang", short: "Pahang" },
+  { code: "PNG", name: "Pulau Pinang", short: "Penang" },
+  { code: "PRK", name: "Perak", short: "Perak" },
+  { code: "PLS", name: "Perlis", short: "Perlis" },
+  { code: "SBH", name: "Sabah", short: "Sabah" },
+  { code: "SWK", name: "Sarawak", short: "Sarawak" },
+  { code: "TRG", name: "Terengganu", short: "Terengganu" },
+] as const;
+
+export const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+export function getOrderedDays(firstDayOfWeek: number): string[] {
+  return [...DAYS.slice(firstDayOfWeek), ...DAYS.slice(0, firstDayOfWeek)];
+}
+
+/** Look up a feed colour's Tailwind classes, falling back to "sky". */
+export function feedBg(color: string): string {
+  const c = (FEED_COLORS as Record<string, { bgLight: string; border: string; text: string }>)[color];
+  return c ? `${c.bgLight} ${c.border}` : "bg-sky-600/20 border-sky-500/30";
+}
+export function feedText(color: string): string {
+  const c = (FEED_COLORS as Record<string, { text: string }>)[color];
+  return c ? c.text : "text-sky-300";
+}
+
+export function getStatusColor(kanbanStatuses: { key: string; color: string }[], status: string): string {
+  const config = kanbanStatuses.find((s) => s.key === status);
+  return config ? (COLOR_MAP[config.color] ?? "bg-zinc-600") : "bg-zinc-600";
+}
+
+export function getStatusDot(kanbanStatuses: { key: string; color: string }[], status: string): string {
+  const config = kanbanStatuses.find((s) => s.key === status);
+  return config ? (DOT_MAP[config.color] ?? "bg-zinc-500") : "bg-zinc-500";
+}
+
+export function toYMD(date: Date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+
+export function parseYM(s?: string): { year: number; month: number } {
+  if (s && /^\d{4}-\d{2}$/.test(s)) {
+    const [y, m] = s.split("-").map(Number);
+    return { year: y, month: m - 1 };
+  }
+  const now = new Date();
+  return { year: now.getFullYear(), month: now.getMonth() };
+}
+
+// Effective date range for a task (with optimistic overrides)
+export function effectiveDates(
+  task: CalTask,
+  optimistic: Record<string, { startDate?: string | null; dueDate?: string | null }>,
+  mode?: "due" | "start"
+): { start: string | null; end: string | null } {
+  const o = optimistic[task.id] ?? {};
+  const start = "startDate" in o ? o.startDate : task.startDate;
+  const end   = "dueDate"   in o ? o.dueDate   : task.dueDate;
+  // Normalise: start defaults to end for single-day tasks
+  const s = (start ?? end)?.slice(0, 10) ?? null;
+  const e = (end ?? start)?.slice(0, 10) ?? null;
+  return { start: s, end: e };
+}
+
+export function countryFlag(code: string): string {
+  if (!/^[A-Z]{2}$/.test(code)) return "🌍";
+  return String.fromCodePoint(...code.split("").map((c) => 0x1f1e6 + c.charCodeAt(0) - 65));
+}
+
+export { FEED_COLORS };