pinkudex/components/grid/ViewToggle.tsx

"use client";
import { useRouter, useSearchParams } from "next/navigation";
import { useTransition } from "react";
import { RectangleVertical, RectangleHorizontal } from "lucide-react";
import { cn } from "@/lib/utils";

export type LibraryView = "portrait" | "landscape";

export function ViewToggle({ current }: { current: LibraryView }) {
  const router = useRouter();
  const params = useSearchParams();
  const [, start] = useTransition();

  function set(view: LibraryView) {
    if (view === current) return;
    const sp = new URLSearchParams(params.toString());
    if (view === "portrait") sp.set("view", "portrait");
    else sp.delete("view");
    const y = typeof window !== "undefined" ? window.scrollY : 0;
    start(() => {
      const qs = sp.toString();
      router.push(qs ? `?${qs}` : `?`, { scroll: false });
      requestAnimationFrame(() => window.scrollTo({ top: y, left: 0, behavior: "instant" as ScrollBehavior }));
    });
  }

  return (
    <div className="flex items-center rounded-lg glass overflow-hidden text-xs">
      <button
        type="button"
        onClick={() => set("landscape")}
        className={cn(
          "flex items-center gap-1 px-2.5 py-1.5",
          current === "landscape"
            ? "bg-[var(--color-cyan)] text-black font-medium"
            : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
        )}
        title="Full cover (landscape)"
      >
        <RectangleHorizontal className="w-3.5 h-3.5" /> L
      </button>
      <button
        type="button"
        onClick={() => set("portrait")}
        className={cn(
          "flex items-center gap-1 px-2.5 py-1.5",
          current === "portrait"
            ? "bg-[var(--color-cyan)] text-black font-medium"
            : "text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]",
        )}
        title="Front cover only (portrait)"
      >
        <RectangleVertical className="w-3.5 h-3.5" /> P
      </button>
    </div>
  );
}