freezmo/components/TabBar.tsx

"use client";

import { motion, useReducedMotion } from "framer-motion";
import Link from "next/link";
import { usePathname } from "next/navigation";

import { GearIcon, HomeIcon, PlusIcon } from "@/components/icons";
import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";
import { springSnappy } from "@/lib/motion";
import { openSettings } from "@/lib/ui-events";
import { cn } from "@/lib/utils";

/**
 * iOS-style bottom tab bar. Rendered on the library and create screens on
 * phones; hidden on desktop (the header carries the same actions there) and on
 * the full-screen study feed.
 *
 * The active item sits on a sliding pill (shared `layoutId`), and its icon
 * gives a small bounce when you land on it.
 */
export function TabBar() {
  const pathname = usePathname();
  const { t } = useI18n();
  const reduceMotion = useReducedMotion();

  const item =
    "relative flex flex-1 flex-col items-center justify-center gap-1 py-2 text-[11px] font-medium transition-colors";
  const active = "text-[var(--text)]";
  const idle = "text-[var(--text-subtle)]";

  /** The pill glides between items; hidden under reduced motion. */
  const pill = (isActive: boolean) =>
    isActive && !reduceMotion ? (
      <motion.span
        aria-hidden
        layoutId="tabbar-active"
        transition={springSnappy}
        className="absolute inset-x-2 inset-y-0.5 rounded-2xl bg-[var(--nav-active-bg)] shadow-[inset_0_0_0_1px_var(--nav-active-border)]"
      />
    ) : null;

  /** Small icon bounce on the item you just selected. */
  const icon = (children: React.ReactNode, isActive: boolean, key: string) => (
    <motion.span
      key={`${key}-${isActive ? pathname : "idle"}`}
      animate={isActive && !reduceMotion ? { scale: [1, 1.16, 1] } : { scale: 1 }}
      transition={springSnappy}
      className="relative z-10 grid place-items-center"
    >
      {children}
    </motion.span>
  );

  const label = (text: string, isActive: boolean) => (
    <span className={cn("relative z-10", isActive ? active : idle)}>{text}</span>
  );

  const libraryActive = pathname === "/";
  const createActive = pathname === "/create";

  return (
    <nav
      aria-label={t("tabbar.main")}
      className="tabbar fixed inset-x-0 bottom-0 z-40 flex items-stretch pb-safe sm:hidden"
    >
      <Link
        href="/"
        aria-current={libraryActive ? "page" : undefined}
        className={cn(item, libraryActive ? active : idle)}
        onClick={(event) => {
          haptic("tap");
          // Re-tapping the active tab scrolls back to the top.
          if (libraryActive) {
            event.preventDefault();
            window.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
          }
        }}
      >
        {pill(libraryActive)}
        {icon(<HomeIcon className="size-6" />, libraryActive, "library")}
        {label(t("common.library"), libraryActive)}
      </Link>
      <Link
        href="/create"
        aria-current={createActive ? "page" : undefined}
        className={cn(item, createActive ? active : idle)}
        onClick={(event) => {
          haptic("tap");
          if (createActive) {
            event.preventDefault();
            window.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
          }
        }}
      >
        {pill(createActive)}
        {icon(
          <span className="grad-ice grid size-6 place-items-center rounded-full text-[#06111f]">
            <PlusIcon className="size-4" />
          </span>,
          createActive,
          "create",
        )}
        {label(t("common.newDeck"), createActive)}
      </Link>
      <button
        type="button"
        onClick={() => {
          haptic("tap");
          openSettings();
        }}
        className={cn(item, idle)}
      >
        {icon(<GearIcon className="size-6" />, false, "settings")}
        {label(t("common.settings"), false)}
      </button>
    </nav>
  );
}