freezmo/components/FolderBar.tsx

"use client";

import { useRef, useState } from "react";

import { FolderIcon, PlusIcon } from "@/components/icons";
import { createFolder } from "@/lib/folders";
import type { Folder } from "@/lib/schemas";
import { cn } from "@/lib/utils";

export const ALL_FOLDERS = "all";

/**
 * Folder switcher. Reads like a row of quiet pills (ChatGPT sidebar items):
 * the active one is filled, the rest are text with a hover wash.
 */
export function FolderBar({
  folders,
  counts,
  selected,
  onSelect,
  onCreated,
  className,
}: {
  folders: Folder[];
  counts: Record<string, number>;
  selected: string;
  onSelect: (id: string) => void;
  onCreated: (id: string) => void;
  className?: string;
}) {
  const [creating, setCreating] = useState(false);
  const [draft, setDraft] = useState("");
  const [error, setError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  const submit = () => {
    const result = createFolder(draft);
    if ("error" in result) {
      setError(result.error);
      return;
    }
    onCreated(result.folder.id);
    setDraft("");
    setError(null);
    setCreating(false);
  };

  const pill = (active: boolean) =>
    cn(
      "inline-flex shrink-0 items-center gap-2 rounded-full px-3.5 py-1.5 text-[13px] font-medium transition",
      active
        ? "bg-[var(--surface-sunken)] text-[var(--text)]"
        : "text-[var(--text-muted)] hover:bg-[var(--hover)] hover:text-[var(--text)]",
    );

  return (
    <div className={cn("no-scrollbar -mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0", className)}>
      <div className="flex items-center gap-1.5">
        <button
          type="button"
          onClick={() => onSelect(ALL_FOLDERS)}
          aria-pressed={selected === ALL_FOLDERS}
          className={pill(selected === ALL_FOLDERS)}
        >
          All decks
        </button>

        {folders.map((folder) => (
          <button
            key={folder.id}
            type="button"
            onClick={() => onSelect(folder.id)}
            aria-pressed={selected === folder.id}
            className={pill(selected === folder.id)}
          >
            <FolderIcon className="size-4 opacity-80" />
            {folder.name}
            <span className={cn("tabular-nums", selected === folder.id ? "opacity-70" : "text-[var(--text-subtle)]")}>
              {counts[folder.id] ?? 0}
            </span>
          </button>
        ))}

        {creating ? (
          <span className="inline-flex shrink-0 items-center gap-1 rounded-full border border-[var(--hairline)] bg-[var(--surface-strong)] py-1 pl-3 pr-1">
            <input
              ref={inputRef}
              autoFocus
              value={draft}
              onChange={(event) => setDraft(event.target.value)}
              onKeyDown={(event) => {
                event.stopPropagation();
                if (event.key === "Enter") submit();
                if (event.key === "Escape") {
                  setCreating(false);
                  setDraft("");
                  setError(null);
                }
              }}
              placeholder="Folder name"
              aria-label="New folder name"
              maxLength={60}
              className="w-28 bg-transparent text-[13px] text-[var(--text)] outline-none placeholder:text-[var(--text-subtle)]"
            />
            <button
              type="button"
              onClick={submit}
              className="btn-primary h-7 px-3 text-[12px]"
            >
              Add
            </button>
          </span>
        ) : (
          <button
            type="button"
            onClick={() => setCreating(true)}
            className="inline-flex shrink-0 items-center gap-2 rounded-full px-3.5 py-1.5 text-[13px] font-medium text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]"
          >
            <PlusIcon className="size-4" />
            New folder
          </button>
        )}
      </div>
      {error ? <p className="pt-1 text-xs font-medium text-rose-600 dark:text-rose-300">{error}</p> : null}
    </div>
  );
}