"use client"; import { useState } from "react"; import { useBodyClass } from "@/lib/useBodyClass"; /** * The project listing's filter panel. * * Every href here was built by the backend's UrlBuilder — chips, sort options, * clear links, all of them. This component renders labels, counts and flags. It * does not know how a listing URL is spelled, which is the point: with Arabic * slugs and four dimensions there would otherwise be forty chances per page to * encode one differently from the canonical tag it leads to. * * Structure follows the Blade component: * * - a quick bar of presets, then the advanced panel behind a trigger. The panel * used to be the whole filter, forty chips deep, which is what the client was * reacting to. * - `
` for the sort menu, because it opens, closes and is keyboard * operable with no JavaScript, and every option inside is a real link. * - the advanced panel is a button plus a sibling panel rather than another * `
`: `
` keeps its content inside itself, so the trigger had * to become a full-width row for the panel to have any width, which threw the * word out of the line it belongs at the end of. * - the panel ships open and collapses on mount, so with scripting off every * filter is present rather than behind a control that cannot be pressed. */ export default function ProjectFilters({ panel }: { panel: any }) { const [open, setOpen] = useState(Boolean(panel?.advancedOpen)); /* * The panel is collapsed by `body.filters-collapsed`, not by an attribute on * the panel itself — the panel element is replaced on every filter change and * a class on survives that. * * It ships open and is collapsed here, so a reader without scripting gets all * the filters rather than a control they cannot press. */ useBodyClass("filters-collapsed", !open); if (!panel) { return null; } /* * Labels arrive resolved from the API. * * This is a Client Component — it owns the advanced panel's open state — and a * translator function cannot be passed across the server/client boundary in * the App Router. Resolving them on the server is also where they belong: they * come from lang/{ar,en}/, the same files the Blade component read. */ const L = panel.labels; return (

{L.resultsCount}

{L.sortBy} {panel.sortLabel}
{/* The tabs are direct children rather than wrapped in a
); }