Collapsible List Awards Block for React

Edit GROUPS at the top of the file: each group has a name, a mark (one of the five drawings above it) and its awards, each with a title, a programme and a fixed year. The counts in the rows and the header's tally come from the list. List the ids of the groups to open on load in FIRST_OPEN.

The open groups are a list of ids held in one piece of state, so opening a group never closes another; "Expand all" sets the whole list and "Collapse all" empties it. For one group at a time, hold a single id instead (see awards-peek-drawer). Each Collapsible takes open and onOpenChange(next).

A button whose label changes ("Expand all", then "Collapse all") already says what it will do, and a label that changes together with aria-expanded is read twice over. The count line under it, "2 of 5 categories open", is a polite status, so a screen reader hears the result of every click.

Yes: closed groups keep their awards in the page, hidden, so they are not read or reachable until the group opens.

No. Atlasfold is a made-up booking engine and Shoalbrook, Alderquist, Gildersby, Marlowcombe, Juniperfold, Nettlebrook, Orrinmere, Umberfield, Penwhistle and Elderquay are made-up programmes. The category marks are drawn by the block.

The split collapses to one column: the header, the button and the count, then a rule and the groups, each row a full-width button with the mark, name and count. Open lists keep their indent and hairline. In a right-to-left layout the indent, the hairline and the divider move to the other side and the chevron keeps turning.