@knotpad/app 0.1.0 → 0.1.1

package/components/calendar/calendar-toolbar.tsx

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

@@ -1,148 +0,0 @@
-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 };