@knotpad/app 0.1.4 → 0.1.6

package/components/settings/calendar-feeds-settings.tsx

@@ -0,0 +1,489 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Trash2,
+  RefreshCw,
+  AlertTriangle,
+  CheckCircle2,
+  ExternalLink,
+  ClipboardPaste,
+  ChevronDown,
+  ChevronUp,
+} from "lucide-react";
+import { useToast } from "@/components/ui/toast";
+import { ConfirmDangerAction } from "@/components/settings/confirm-danger-action";
+import { MAX_CALENDAR_FEEDS, MAX_FEED_LABEL_LEN, FEED_COLORS, FEED_COLOR_KEYS, DEFAULT_FEED_COLOR, type FeedColorKey } from "@/lib/limits";
+
+/** Quick-connect providers: label, settings deep-link, and a hint for finding the iCal URL. */
+const PROVIDERS = [
+  {
+    id: "google",
+    name: "Google Calendar",
+    href: "https://calendar.google.com/calendar/u/0/r/settings",
+    hint: "Settings → pick a calendar → scroll to \"Secret address in iCal format\" → copy the URL.",
+  },
+  {
+    id: "apple",
+    name: "Apple iCloud",
+    href: "https://www.icloud.com/calendar",
+    hint: "Click the share icon next to a calendar → enable \"Public Calendar\" → copy the link.",
+  },
+  {
+    id: "outlook",
+    name: "Outlook / Microsoft 365",
+    href: "https://outlook.live.com/calendar/0/options/calendar/SharedCalendars",
+    hint: "Settings → Calendar → Shared calendars → Publish a calendar → copy the ICS link.",
+  },
+] as const;
+
+/** Returns true if the string looks like an iCal subscription URL. */
+function looksLikeIcsUrl(s: string): boolean {
+  const trimmed = s.trim();
+  return /^https?:\/\/\S+\.ics(\b|$)/i.test(trimmed) || trimmed.includes("/ical/") || trimmed.includes("/caldav/");
+}
+
+type Feed = {
+  id: string;
+  label: string;
+  color: string;
+  enabled: boolean;
+  lastFetchedAt: string | null;
+  lastError: string | null;
+};
+
+type Props = { feeds: Feed[] };
+
+export function CalendarFeedsSettings({ feeds: initialFeeds }: Props) {
+  const router = useRouter();
+  const toast = useToast();
+  const [feeds, setFeeds] = useState<Feed[]>(initialFeeds);
+  const [label, setLabel] = useState("");
+  const [url, setUrl] = useState("");
+  const [color, setColor] = useState<FeedColorKey>(DEFAULT_FEED_COLOR);
+  const [adding, setAdding] = useState(false);
+  const [syncingId, setSyncingId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [editingColorId, setEditingColorId] = useState<string | null>(null);
+  const [providerHint, setProviderHint] = useState<string | null>(null);
+  const [clipboardNotice, setClipboardNotice] = useState(false);
+  const [showInstructions, setShowInstructions] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<{ open: boolean; feedId: string }>({ open: false, feedId: "" });
+
+  const atLimit = feeds.length >= MAX_CALENDAR_FEEDS;
+
+  // Auto-detect .ics URL on clipboard when the URL field is focused.
+  const handleUrlFocus = useCallback(async () => {
+    if (url) return; // field already has content
+    try {
+      const text = await navigator.clipboard.readText();
+      if (looksLikeIcsUrl(text)) {
+        setUrl(text.trim());
+        setClipboardNotice(true);
+        // Auto-fill label if empty — try to guess from URL
+        if (!label) {
+          if (text.includes("google")) setLabel("Google Calendar");
+          else if (text.includes("outlook") || text.includes("office") || text.includes("live")) setLabel("Outlook Calendar");
+          else if (text.includes("icloud") || text.includes("apple")) setLabel("Apple Calendar");
+          else setLabel("My Calendar");
+        }
+        setTimeout(() => setClipboardNotice(false), 4000);
+      }
+    } catch {
+      // Clipboard permission denied — that's fine, user can paste manually
+    }
+  }, [url, label]);
+
+  // Dismiss clipboard notice when URL changes
+  useEffect(() => {
+    if (clipboardNotice && url) {
+      const t = setTimeout(() => setClipboardNotice(false), 3000);
+      return () => clearTimeout(t);
+    }
+  }, [clipboardNotice, url]);
+
+  async function handleAdd(e: React.FormEvent) {
+    e.preventDefault();
+    if (!label.trim() || !url.trim()) return;
+
+    setAdding(true);
+    try {
+      const res = await fetch("/api/calendar-feeds", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ label: label.trim(), url: url.trim(), color }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast(data.error ?? "Failed to add calendar", "error");
+        return;
+      }
+      setFeeds((prev) => [...prev, data]);
+      setLabel("");
+      setUrl("");
+      setColor(DEFAULT_FEED_COLOR);
+      setProviderHint(null);
+      if (data.lastError) {
+        toast(`Calendar added, but the first sync failed: ${data.lastError}`, "error");
+      } else {
+        toast("Calendar connected and synced", "success");
+      }
+      router.refresh();
+    } catch {
+      toast("Failed to add calendar", "error");
+    } finally {
+      setAdding(false);
+    }
+  }
+
+  async function handleToggle(feed: Feed) {
+    const next = !feed.enabled;
+    setFeeds((prev) => prev.map((f) => (f.id === feed.id ? { ...f, enabled: next } : f)));
+    try {
+      const res = await fetch(`/api/calendar-feeds/${feed.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ enabled: next }),
+      });
+      if (!res.ok) throw new Error();
+      router.refresh();
+    } catch {
+      setFeeds((prev) => prev.map((f) => (f.id === feed.id ? { ...f, enabled: !next } : f)));
+      toast("Failed to update calendar", "error");
+    }
+  }
+
+  async function handleSync(feedId: string) {
+    setSyncingId(feedId);
+    try {
+      const res = await fetch(`/api/calendar-feeds/${feedId}/sync`, { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) {
+        toast(data.error ?? "Sync failed", "error");
+        return;
+      }
+      setFeeds((prev) => prev.map((f) => (f.id === feedId ? { ...f, ...data } : f)));
+      if (data.lastError) {
+        toast(`Sync failed: ${data.lastError}`, "error");
+      } else {
+        toast("Calendar synced", "success");
+      }
+      router.refresh();
+    } catch {
+      toast("Sync failed", "error");
+    } finally {
+      setSyncingId(null);
+    }
+  }
+
+  async function handleDelete(feedId: string) {
+    setDeleteConfirm({ open: true, feedId });
+  }
+
+  async function confirmDeleteFeed() {
+    const { feedId } = deleteConfirm;
+    setDeletingId(feedId);
+    try {
+      const res = await fetch(`/api/calendar-feeds/${feedId}`, { method: "DELETE" });
+      if (!res.ok) throw new Error();
+      setFeeds((prev) => prev.filter((f) => f.id !== feedId));
+      router.refresh();
+    } catch {
+      toast("Failed to remove calendar", "error");
+    } finally {
+      setDeletingId(null);
+      setDeleteConfirm({ open: false, feedId: "" });
+    }
+  }
+
+  async function handleColorChange(feedId: string, newColor: FeedColorKey) {
+    setFeeds((prev) => prev.map((f) => (f.id === feedId ? { ...f, color: newColor } : f)));
+    setEditingColorId(null);
+    try {
+      await fetch(`/api/calendar-feeds/${feedId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ color: newColor }),
+      });
+      router.refresh();
+    } catch {
+      toast("Failed to update colour", "error");
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Connected feeds list */}
+      {feeds.length > 0 && (
+        <div className="space-y-2">
+          {feeds.map((feed) => {
+            const fc =
+              (FEED_COLORS as Record<string, { bg: string; bgLight: string; border: string; text: string; label: string }>)[
+                feed.color
+              ] ?? FEED_COLORS.sky;
+            return (
+            <div
+              key={feed.id}
+              className="relative rounded-md border border-zinc-800 bg-zinc-900/40 px-3 py-2.5"
+            >
+              <div className="flex items-center gap-3">
+                {/* Colour dot — click to open picker */}
+                <button
+                  type="button"
+                  onClick={() => setEditingColorId(editingColorId === feed.id ? null : feed.id)}
+                  title="Change colour"
+                  className={`h-4 w-4 shrink-0 rounded-full ring-2 ring-transparent hover:ring-zinc-600 transition-all ${fc.bg}`}
+                />
+
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={feed.enabled}
+                  onClick={() => handleToggle(feed)}
+                  title={feed.enabled ? "Disable" : "Enable"}
+                  className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 ${
+                    feed.enabled ? "bg-emerald-600" : "bg-zinc-700"
+                  }`}
+                >
+                  <span
+                    className={`inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
+                      feed.enabled ? "translate-x-6" : "translate-x-1"
+                    }`}
+                  />
+                </button>
+
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm text-zinc-200">{feed.label}</p>
+                  {feed.lastError ? (
+                    <p className="flex items-center gap-1 text-xs text-red-400">
+                      <AlertTriangle size={11} className="shrink-0" />
+                      <span className="truncate">{feed.lastError}</span>
+                    </p>
+                  ) : feed.lastFetchedAt ? (
+                    <p className="flex items-center gap-1 text-xs text-zinc-600">
+                      <CheckCircle2 size={11} className="shrink-0 text-emerald-500" />
+                      Synced {new Date(feed.lastFetchedAt).toLocaleString()}
+                    </p>
+                  ) : (
+                    <p className="text-xs text-zinc-600">Not synced yet</p>
+                  )}
+                </div>
+
+                <button
+                  type="button"
+                  onClick={() => handleSync(feed.id)}
+                  disabled={syncingId === feed.id}
+                  title="Sync now"
+                  className="text-zinc-500 hover:text-zinc-200 transition-colors disabled:opacity-50"
+                >
+                  <RefreshCw size={14} className={syncingId === feed.id ? "animate-spin" : ""} />
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => handleDelete(feed.id)}
+                  disabled={deletingId === feed.id}
+                  title="Remove calendar"
+                  className="text-zinc-600 hover:text-red-400 transition-colors disabled:opacity-50"
+                >
+                  <Trash2 size={14} />
+                </button>
+              </div>
+
+              {/* Inline colour picker popover */}
+              {editingColorId === feed.id && (
+                <div className="mt-2 flex flex-wrap gap-1.5 pl-7">
+                  {FEED_COLOR_KEYS.map((key) => {
+                    const c = FEED_COLORS[key];
+                    const selected = feed.color === key;
+                    return (
+                      <button
+                        key={key}
+                        type="button"
+                        onClick={() => handleColorChange(feed.id, key)}
+                        title={c.label}
+                        className={`h-5 w-5 rounded-full transition-all ${c.bg} ${
+                          selected
+                            ? "ring-2 ring-white ring-offset-2 ring-offset-zinc-900 scale-110"
+                            : "ring-1 ring-zinc-700 hover:ring-zinc-500 hover:scale-110"
+                        }`}
+                      />
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+            );
+          })}
+        </div>
+      )}
+
+      {atLimit ? (
+        <p className="text-sm text-zinc-500">
+          You&apos;ve connected the maximum of {MAX_CALENDAR_FEEDS} calendars. Remove one to add another.
+        </p>
+      ) : (
+        <form onSubmit={handleAdd} className="space-y-4 rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
+          {/* Quick-connect provider buttons */}
+          <div className="space-y-2">
+            <p className="text-xs font-medium text-zinc-500 uppercase tracking-wide">1. Get your calendar URL</p>
+            <div className="flex flex-wrap gap-2">
+              {PROVIDERS.map((p) => (
+                <button
+                  key={p.id}
+                  type="button"
+                  onClick={() => {
+                    window.open(p.href, "_blank", "noopener,noreferrer");
+                    setProviderHint(p.hint);
+                    // Auto-fill label if empty
+                    if (!label) setLabel(p.name);
+                  }}
+                  className={`flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs transition-colors ${
+                    providerHint === p.hint
+                      ? "border-zinc-500 bg-zinc-800 text-zinc-200"
+                      : "border-zinc-700 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200 hover:bg-zinc-800/60"
+                  }`}
+                >
+                  <ExternalLink size={11} />
+                  <span>{p.name}</span>
+                </button>
+              ))}
+            </div>
+            {providerHint && (
+              <p className="text-xs text-zinc-400 bg-zinc-800/60 rounded-md px-3 py-2 border border-zinc-700/50">
+                {providerHint}
+              </p>
+            )}
+          </div>
+
+          {/* Paste URL */}
+          <div className="space-y-2">
+            <p className="text-xs font-medium text-zinc-500 uppercase tracking-wide">2. Paste the URL here</p>
+            <div className="space-y-1">
+              <div className="relative">
+                <input
+                  value={url}
+                  onChange={(e) => { setUrl(e.target.value); setClipboardNotice(false); }}
+                  onFocus={handleUrlFocus}
+                  placeholder="https://calendar.google.com/calendar/ical/.../basic.ics"
+                  className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 pr-9 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none ring-focus"
+                />
+                {!url && (
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      try {
+                        const text = await navigator.clipboard.readText();
+                        if (looksLikeIcsUrl(text)) {
+                          setUrl(text.trim());
+                          if (!label) {
+                            if (text.includes("google")) setLabel("Google Calendar");
+                            else if (text.includes("outlook") || text.includes("office") || text.includes("live")) setLabel("Outlook Calendar");
+                            else if (text.includes("icloud") || text.includes("apple")) setLabel("Apple Calendar");
+                            else setLabel("My Calendar");
+                          }
+                          toast("Pasted iCal URL from clipboard", "success");
+                        } else if (text) {
+                          setUrl(text.trim());
+                          toast("Pasted from clipboard", "success");
+                        }
+                      } catch {
+                        toast("Could not read clipboard", "error");
+                      }
+                    }}
+                    title="Paste from clipboard"
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-600 hover:text-zinc-300 transition-colors"
+                  >
+                    <ClipboardPaste size={14} />
+                  </button>
+                )}
+              </div>
+              {clipboardNotice && (
+                <p className="text-xs text-emerald-400 flex items-center gap-1">
+                  <CheckCircle2 size={11} />
+                  Auto-detected iCal URL from your clipboard
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Name */}
+          <div className="space-y-1">
+            <label className="text-xs font-medium text-zinc-500 uppercase tracking-wide">Calendar name</label>
+            <input
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              maxLength={MAX_FEED_LABEL_LEN}
+              placeholder="e.g. Work Calendar"
+              className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 focus:border-zinc-500 focus:outline-none ring-focus"
+            />
+          </div>
+
+          {/* Colour */}
+          <div className="space-y-2">
+            <label className="text-xs font-medium text-zinc-500 uppercase tracking-wide">Colour</label>
+            <div className="flex flex-wrap gap-2">
+              {FEED_COLOR_KEYS.map((key) => {
+                const c = FEED_COLORS[key];
+                const selected = color === key;
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={() => setColor(key)}
+                    title={c.label}
+                    className={`h-6 w-6 rounded-full transition-all ${c.bg} ${
+                      selected
+                        ? "ring-2 ring-white ring-offset-2 ring-offset-zinc-900 scale-110"
+                        : "ring-1 ring-zinc-700 hover:ring-zinc-500 hover:scale-110"
+                    }`}
+                  />
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Submit */}
+          <button
+            type="submit"
+            disabled={adding || !label.trim() || !url.trim()}
+            className="rounded-md bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-200 disabled:opacity-50 transition-colors"
+          >
+            {adding ? "Connecting…" : "Connect calendar"}
+          </button>
+
+          {/* Collapsible: how it works */}
+          <button
+            type="button"
+            onClick={() => setShowInstructions((v) => !v)}
+            className="flex items-center gap-1 text-xs text-zinc-600 hover:text-zinc-400 transition-colors"
+          >
+            {showInstructions ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+            <span>How does this work?</span>
+          </button>
+          {showInstructions && (
+            <div className="rounded-md border border-zinc-800 bg-zinc-900/60 p-3 text-xs text-zinc-500 space-y-1.5">
+              <p>Knotpad connects to your calendar using a <span className="text-zinc-400">read-only subscription URL</span> (iCal/ICS format). This is a one-way sync — events from your calendar appear as &ldquo;busy blocks&rdquo; in Knotpad&apos;s calendar view.</p>
+              <p>Your calendar provider never sees your Knotpad data. The URL is encrypted at rest.</p>
+              <p className="text-zinc-600 pt-1 border-t border-zinc-800">
+                Events sync automatically every few hours, or you can tap the refresh icon to sync on demand.
+              </p>
+            </div>
+          )}
+        </form>
+      )}
+
+      {/* Confirmation dialog */}
+      <ConfirmDangerAction
+        open={deleteConfirm.open}
+        title="Remove Calendar"
+        body="Remove this calendar? Cached events will be deleted."
+        confirmLabel="Remove"
+        cancelLabel="Cancel"
+        onConfirm={confirmDeleteFeed}
+        onClose={() => setDeleteConfirm({ open: false, feedId: "" })}
+      />
+    </div>
+  );
+}

package/components/settings/calendar-general-settings.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+export function CalendarGeneralSettings() {
+  const router = useRouter();
+
+  // Public holidays state
+  const [holidaysEnabled, setHolidaysEnabled] = useState(false);
+  const [holidayCountry, setHolidayCountry] = useState("MY");
+  const [holidayRegion, setHolidayRegion] = useState("");
+  const [countries, setCountries] = useState<{ code: string; name: string }[]>([]);
+  const [regions, setRegions] = useState<{ code: string; name: string }[]>([]);
+
+  // First day of week state
+  const [firstDayOfWeek, setFirstDayOfWeek] = useState("Sun"); // "Sun" | "Mon" | "Sat"
+
+  // Initial load — persist defaults to localStorage so other pages (calendar)
+  // always find an explicit value instead of falling back to browser locale.
+  useEffect(() => {
+    const storedCountry = localStorage.getItem("brief:holidays-country");
+    if (!storedCountry) localStorage.setItem("brief:holidays-country", "MY");
+    setHolidaysEnabled(localStorage.getItem("brief:holidays") === "true");
+    setHolidayCountry(storedCountry ?? "MY");
+    setHolidayRegion(localStorage.getItem("brief:holidays-region") ?? "");
+    setFirstDayOfWeek(localStorage.getItem("brief:first-day-of-week") ?? "Sun");
+
+    // Fetch countries
+    fetch("/api/holidays/countries")
+      .then((r) => (r.ok ? r.json() : { countries: [] }))
+      .then((d: { countries: { code: string; name: string }[] }) => {
+        setCountries(d.countries);
+      })
+      .catch(() => {});
+  }, []);
+
+  // Fetch regions when country changes
+  useEffect(() => {
+    if (!holidayCountry) {
+      setRegions([]);
+      return;
+    }
+    fetch(`/api/holidays/states?country=${holidayCountry}`)
+      .then((r) => (r.ok ? r.json() : { states: [] }))
+      .then((d: { states: { code: string; name: string }[] }) => {
+        setRegions(d.states ?? []);
+      })
+      .catch(() => setRegions([]));
+  }, [holidayCountry]);
+
+  // Handle holiday toggle
+  function handleToggleHolidays() {
+    const next = !holidaysEnabled;
+    setHolidaysEnabled(next);
+    localStorage.setItem("brief:holidays", String(next));
+    window.dispatchEvent(new Event("brief:holidays-settings-changed"));
+    router.refresh();
+  }
+
+  // Handle country change
+  function handleCountryChange(code: string) {
+    setHolidayCountry(code);
+    setHolidayRegion("");
+    localStorage.setItem("brief:holidays-country", code);
+    localStorage.removeItem("brief:holidays-region");
+    window.dispatchEvent(new Event("brief:holidays-settings-changed"));
+    router.refresh();
+  }
+
+  // Handle region change
+  function handleRegionChange(code: string) {
+    setHolidayRegion(code);
+    localStorage.setItem("brief:holidays-region", code);
+    window.dispatchEvent(new Event("brief:holidays-settings-changed"));
+    router.refresh();
+  }
+
+  // Handle first day of week change
+  function handleFirstDayOfWeekChange(val: string) {
+    setFirstDayOfWeek(val);
+    localStorage.setItem("brief:first-day-of-week", val);
+    router.refresh();
+  }
+
+  return (
+    <div className="space-y-6 rounded-lg border border-zinc-800 bg-zinc-900/30 p-4">
+      {/* General Calendar Preferences */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-semibold text-zinc-300">Preferences</h3>
+        
+        <div className="flex flex-col gap-1.5">
+          <label className="text-xs font-medium text-zinc-400">First day of week</label>
+          <select
+            value={firstDayOfWeek}
+            onChange={(e) => handleFirstDayOfWeekChange(e.target.value)}
+            className="w-full max-w-xs rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:border-zinc-500"
+          >
+            <option value="Sun">Sunday</option>
+            <option value="Mon">Monday</option>
+            <option value="Sat">Saturday</option>
+          </select>
+        </div>
+      </div>
+
+      <hr className="border-zinc-800" />
+
+      {/* Public Holidays Section */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="space-y-0.5">
+            <h3 className="text-sm font-semibold text-zinc-300">Public Holidays</h3>
+            <p className="text-xs text-zinc-500">
+              Display official public holidays directly on your calendar grid.
+            </p>
+          </div>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={holidaysEnabled}
+            onClick={handleToggleHolidays}
+            title={holidaysEnabled ? "Disable" : "Enable"}
+            className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900 ${
+              holidaysEnabled ? "bg-emerald-600" : "bg-zinc-700"
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
+                holidaysEnabled ? "translate-x-6" : "translate-x-1"
+              }`}
+            />
+          </button>
+        </div>
+
+        {holidaysEnabled && (
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="flex flex-col gap-1.5">
+              <label className="text-xs font-medium text-zinc-400">Country</label>
+              <select
+                value={holidayCountry}
+                onChange={(e) => handleCountryChange(e.target.value)}
+                className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:border-zinc-500"
+              >
+                {countries.map((c) => (
+                  <option key={c.code} value={c.code}>
+                    {c.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {regions.length > 0 && (
+              <div className="flex flex-col gap-1.5">
+                <label className="text-xs font-medium text-zinc-400">State / Region (Optional)</label>
+                <select
+                  value={holidayRegion}
+                  onChange={(e) => handleRegionChange(e.target.value)}
+                  className="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-300 focus:outline-none focus:border-zinc-500"
+                >
+                  <option value="">All Regions</option>
+                  {regions.map((r) => (
+                    <option key={r.code} value={r.code}>
+                      {r.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}