Components
Wallpaper catalog
A selectable image catalog can supply a subdued dashboard background.
On this page
Purpose and placement
A selectable image catalog can supply a subdued dashboard background.
Anatomy
- Thumbnail button
- Display name
- Selected check badge
- Background load-ready state
Contract
| Input or boundary | Behavior |
|---|---|
| Catalog | GET /api/backgrounds returns fileName, displayName, url |
| Selection | Save backgroundImage filename; dispatch URL for immediate display |
| Auto default | First available item selected when no saved filename |
States and feedback
- Catalog not loaded
- Populated options
- Empty provider response
- Wallpaper loading / ready / failed
Interaction and composition
Style selection is a filename preference, while presentation uses a signed or public URL. ThemeProvider loads the actual image before applying ready state. Keep storage identity separate from delivery URLs.
Responsive behavior
Thumbnail grid uses two columns, then three at sm. Dashboard wallpaper covers the canvas and is toned down with opacity/filter.
Accessibility contract
The source thumbnail buttons have display-name text but no pressed selection semantics. Text contrast must be checked on the resulting composed canvas.
Known implementation gaps
No provider catalog was used for these captures. Empty examples are intentional and no fabricated image options are shown; B2 integration is source-audited only.
Source references
| Repository file | Responsibility |
|---|---|
| app/settings/style/page.tsx | Catalog UI |
| lib/backgrounds.ts | Provider catalog and URLs |
| components/ThemeProvider.tsx | Image readiness |
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