Draft
Feed
What happened lately, by day, with a side rail.
A stream of what happened, newest first, grouped by day, with filters above it and a side rail of related lists. It's Bridge's home after signing in (Activity).
Use it for
- What's happened lately across your network.
Built on this
| Screen | Route | Fit |
|---|---|---|
| Activity | /activity | Exact |
From the Bridge OS app page .
Composition
Live composition
Real package components on the sample network. Try the widths.
Welcome back, Ana
What's happened in your network.
Anatomy
- Header. A greeting as the 22px title (the first name in blue), subtitle, and Make intro.
- Filters. FilterChips: All / To do / Updates.
- Feed. Groups by day: an 11px capitals label with a fading line, then items 10px apart. Each item is its own tile (12px corners).
- Side panel. Recently met, against the window edge, with its own tabs.
Measurements
| What | Value | From |
|---|---|---|
| Width | 1280px (shell) | Bridge OS `(shell)/layout.tsx` |
| Page padding (from the shell) | 16px phone · 24px from 640px · 32px from 1024px; 32px top | Bridge OS `(shell)/layout.tsx` |
| Page title | 22px Bold, 4px to a 14px --text-body subtitle, 24px below the header | Bridge OS (6 pages); pick 2026-11-02 |
| Feed item | 12px corners, 20px sides, 16px top and bottom, 48px avatar | Bridge OS `activity-feed-item.tsx` |
| Rail | 426px, collapses to 40px; inline under 1024px | Bridge OS `recently-met-rail.tsx` |
Responsive
| Width | What happens |
|---|---|
| Under 1024px | The rail becomes a section under the feed. |
| 1024px and up | The rail sits on the right. |
States by region
| Region | Loading | Empty | Error |
|---|---|---|---|
| Feed | Item skeletons | Says what will appear and how | Couldn't load activity + Try again |
| Rail | Row skeletons; rows wait for every source so nothing reflows | Per tab | Per tab |
Do and don't
| Do | Don't |
|---|---|
| Reserve the filter row's space from the first paint. | Let filters appear late and push the feed down. |
Known gaps
Where Bridge OS differs from this template today. Follow the template, not the gap.
- Feed items' Send and Skip are hand-made buttons; they become Button.
- Bridge OS's rail is fixed to the window (not part of the page grid), which breaks the top bar's blur in Safari.
Sources
- Survey of Bridge OS routes (2026-11-02)
- Bridge OS
activity-page-content.tsx,recently-met-rail.tsx; DESIGN.md → principle 7.