Components
Board navigation
A small set of board chips makes the current collection easy to switch.
On this page
Purpose and placement
A small set of board chips makes the current collection easy to switch.
Anatomy
- First five board chips
- Active accent treatment
- Overflow Boards trigger
- Edit-mode toggle
Contract
| Input or boundary | Behavior |
|---|---|
| boards | Ordered BoardItem array |
| activeBoardId | Initial preferred board or home fallback |
| Selection | Load links; PATCH currentBoardId preference |
States and feedback
- Selected versus unselected chip
- Overflow menu open/closed
- Empty board selected
- Loading links during board change
Interaction and composition
Selecting a board changes the active ID immediately, closes overflow, requests links and then persists the preference. The source catches preference failure without visible feedback. Keep this behavior distinct from board editing.
Responsive behavior
Chips wrap at narrow widths. Only the first five are direct chips; the remainder are menu items, preserving the source ordering.
Accessibility contract
Native buttons provide keyboard activation, but selected chips do not expose aria-pressed or tab semantics. Menus expose expanded state but are not ARIA menu widgets.
Known implementation gaps
If fetching board links fails, the selected board can show an empty or stale state. No retry action or announced selected-board change is implemented.
Source references
| Repository file | Responsibility |
|---|---|
| app/(home)/AppHome.tsx | Selection flow and board chips |
| app/api/preferences/route.ts | Preference validation |
Examples from the app
Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0