Layout
PageHeader
The topbar names the page, so a list page never repeats its title. PageHeader holds the tabs or a summary line on the left, then the guide, the secondary actions, the ⋯ menu and the primary action, last. On a phone it is one row: the search, one Filter button that opens the tabs and filters in a drawer, the ⋯ and the primary action.
import { PageHeader } from "@/components/ui/page-header"