);
};
interface CategoryPanelProps {
/** Category, raw API shape. */
category: any;
onSelect: (category: any) => void;
}
interface PopoverPosition {
top: number;
left: number;
}
// Modern category tile: large image header, name + total-subcategory count,
// and an expand toggle that reveals the full descendant tree inline. Keeps
// every nested level reachable while defaulting to a clean, image-led grid.
const CategoryPanel = ({ category, onSelect }: CategoryPanelProps) => {
const columns = childrenOf(category);
const hasChildren = columns.length > 0;
const [expanded, setExpanded] = useState(false);
// Portal target — only after mount (SSR-safe). The mobile sheet is portalled
// to so a transformed ancestor (card hover -translate) can't trap its
// position: fixed and squash it into a thin strip.
const [mounted, setMounted] = useState(false);
useEffect(() => {
// intentional: flips mounted flag exactly once after mount so the portal
// target (document.body) is only used client-side, see doc comment above.
// eslint-disable-next-line react-hooks/set-state-in-effect
setMounted(true);
}, []);
// Desktop popover is portalled + positioned from the card's rect so it never
// clips at the grid edges. `left-1/2 -translate-x-1/2` centered it under the
// card, which overflowed the viewport for right-column cards. We now clamp the
// popover's left within [8px, viewportWidth - width - 8px].
const cardRef = useRef(null);
const [pos, setPos] = useState(null);
const POPOVER_W = 256; // matches w-64
useLayoutEffect(() => {
if (!expanded || !cardRef.current) return;
const measure = () => {
const r = cardRef.current?.getBoundingClientRect();
if (!r) return;
const centered = r.left + r.width / 2 - POPOVER_W / 2;
const left = Math.max(
8,
Math.min(centered, window.innerWidth - POPOVER_W - 8),
);
setPos({ top: r.bottom + 8, left });
};
measure();
window.addEventListener("resize", measure);
window.addEventListener("scroll", measure, true);
return () => {
window.removeEventListener("resize", measure);
window.removeEventListener("scroll", measure, true);
};
}, [expanded]);
return (
{/* Soft gradient glow that intensifies on hover */}
{/* Image overhangs the card top — half out, half in — anchored to the
top edge and pulled up 50% of its own height. */}
{/* Expand toggle — floats the tree as an overlay so the card keeps a
fixed, uniform size across the grid. */}
{hasChildren && (
<>
{/* Desktop (sm+): popover portalled to , positioned from the
card rect and clamped to the viewport so edge cards don't clip. */}
{expanded &&
mounted &&
pos &&
createPortal(
,
document.body,
)}
{/* Mobile ( so a transformed
ancestor can't trap its fixed positioning. Dim backdrop closes it. */}
{expanded &&
mounted &&
createPortal(