View and date in the URL

"use client";

import { useEffect, useMemo, useState } from "react";
import { usePathname } from "next/navigation";
import {
  buildSeedEvents,
  Kloq,
  MAX_N_DAY_VIEW,
  MIN_N_DAY_VIEW,
  parseInstant,
  toDateOnlyString,
  type KloqView,
} from "kloq";
import { CopyButton } from "@/components/site/copy-button";
import { Bar } from "../parts";

const NAMED: KloqView[] = ["day", "week", "workweek", "month", "agenda", "year"];

function parseView(s: string | null): KloqView | null {
  if (NAMED.includes(s as KloqView)) return s as KloqView;
  const n = Number(s);
  return Number.isInteger(n) && n >= MIN_N_DAY_VIEW && n <= MAX_N_DAY_VIEW ? n : null;
}

/** `YYYY-MM-DD` at local midnight; anything else — including a rolled-over 2026-02-31 — is rejected. */
function parseDate(s: string | null): Date | null {
  if (!s) return null;
  const d = new Date(parseInstant(s));
  return Number.isNaN(d.getTime()) || toDateOnlyString(d) !== s ? null : d;
}

function fromQuery(search: string) {
  const params = new URLSearchParams(search);
  return {
    view: parseView(params.get("view")) ?? "week",
    date: parseDate(params.get("date")) ?? new Date(),
  };
}

const toQuery = (view: KloqView, date: Date) => `?view=${view}&date=${toDateOnlyString(date)}`;

export default function UrlStateExample() {
  const pathname = usePathname();
  // the query string is the state; null until the location has been read
  const [search, setSearch] = useState<string | null>(null);
  const { view, date } = useMemo(() => fromQuery(search ?? ""), [search]);
  const [seeds] = useState(() => buildSeedEvents());

  useEffect(() => {
    const read = () => setSearch(window.location.search);
    // normalise the incoming link: missing or invalid params become today's week
    const initial = fromQuery(window.location.search);
    window.history.replaceState(null, "", toQuery(initial.view, initial.date));
    read();
    window.addEventListener("popstate", read);
    return () => window.removeEventListener("popstate", read);
  }, []);

  // a date is somewhere you went, so it gets a history entry; a view is how you are looking at it —
  // and a narrow box reports the view it collapsed to — so it rewrites the entry it is on
  const navigate = (next: { view?: KloqView; date?: Date }) => {
    const query = toQuery(next.view ?? view, next.date ?? date);
    if (query === search) return;
    if (next.date) window.history.pushState(null, "", query);
    else window.history.replaceState(null, "", query);
    setSearch(query);
  };

  return (
    <div className="@container flex flex-col">
      <div className="h-104">
        <Kloq
          view={view}
          onViewChange={(v) => navigate({ view: v })}
          date={date}
          onDateChange={(d) => navigate({ date: d })}
          defaultEvents={seeds}
          persistence={false}
          storage={false}
          designMode={false}
        >
          <Kloq.Toolbar />
        </Kloq>
      </div>

      <Bar edge="top">
        <span className="min-w-0 flex-1 wrap-anywhere">
          {pathname}
          <span className="text-foreground">{search ?? ""}</span>
        </span>
        <CopyButton
          size="xs"
          variant="outline"
          showLabel
          label="Copy link"
          text={() => window.location.href}
        />
      </Bar>
    </div>
  );
}

"use client";

import type { ComponentProps } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { formatViewTitle, useIsClient, useKloq } from "kloq";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** The strip an example hangs its controls and readouts on; same box as `Kloq.Toolbar`. */
export function Bar({
  edge = "bottom",
  className,
  ...props
}: ComponentProps<"div"> & { edge?: "top" | "bottom" }) {
  return (
    <div
      {...props}
      className={cn(
        "flex min-h-11 shrink-0 flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5 font-mono text-xs text-muted-foreground",
        edge === "bottom" ? "border-b" : "border-t",
        className,
      )}
    />
  );
}

export function Dot({ live, className, ...props }: ComponentProps<"span"> & { live?: boolean }) {
  return (
    <span
      aria-hidden
      {...props}
      className={cn(
        "size-1.5 shrink-0 rounded-full",
        live ? "bg-brand motion-safe:animate-pulse" : "bg-border",
        className,
      )}
    />
  );
}

/** Previous / next / today for a calendar whose view is fixed. Must render inside `<Kloq>`. */
export function Nav({ locale }: { locale?: string }) {
  const k = useKloq();
  const isClient = useIsClient();
  return (
    <div className="flex min-w-0 items-center gap-1">
      <Button variant="ghost" size="icon-xs" aria-label="Previous" onClick={() => k.step(-1)}>
        <ChevronLeft />
      </Button>
      <Button variant="ghost" size="icon-xs" aria-label="Next" onClick={() => k.step(1)}>
        <ChevronRight />
      </Button>
      <Button variant="ghost" size="xs" className={cn(k.atToday && "text-muted-foreground")} onClick={k.goToday}>
        Today
      </Button>
      <span className="ms-1 truncate text-sm font-medium text-foreground tabular-nums sm:text-xs">
        {isClient ? formatViewTitle(k.view, locale, { short: k.narrow }) : null}
      </span>
    </div>
  );
}