20 lines
1.1 KiB
Markdown
20 lines
1.1 KiB
Markdown
# Top Bar Feature
|
||
|
||
**Purpose**: Persistent UI overlay providing cluster status, krate count, sync indicator, admin controls, and user roster.
|
||
|
||
**Layout**:
|
||
- `display: flex; align-items: center; padding: 13px 18px;` transparent over canvas.
|
||
- **Left side**:
|
||
- **Logo pill** (`krates / yard`): background `rgba(14,18,25,.82)`, border `1px solid rgba(140,165,200,.18)`, border‑radius `9px`, padding `7px 12px`, backdrop‑filter `blur(6px)`. Diamond glyph with `clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%)` in accent color.
|
||
- **Cluster pill**: shows cluster name, green health dot (`#4ad07a`) with `box-shadow: 0 0 8px #4ad07a`.
|
||
- **Krate count pill**: visible when krates exist.
|
||
- **Right side**:
|
||
- **Synced pill**: pulsing accent dot + text "synced".
|
||
- **Admin button**: `◉ admin` – outlined when active, muted otherwise.
|
||
- **Roster avatars**: overlapping circles (`margin-left: -7px`), 30×30 px, colored per user, initials (★ for self).
|
||
|
||
**Behavior**:
|
||
- Stays fixed at top; does not scroll with canvas.
|
||
- Clicking **Admin button** toggles the Admin Drawer.
|
||
- Avatars show presence via Yjs awareness; hovering shows tooltip with username.
|