@knotpad/app 0.1.0 → 0.1.1

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

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

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