45 lines
1.9 KiB
Markdown
45 lines
1.9 KiB
Markdown
# Collection Window Feature
|
||
|
||
**Purpose**: Provide an overview list or tree of objects within a namespace or category (e.g., "All Pods", "ns/payments").
|
||
|
||
**Size**: Default 540 × 480 px.
|
||
|
||
**Header**:
|
||
- Title (e.g., "pods · ns/payments") with status summary badges (✓ N / ⚠ N / ✗ N).
|
||
- Filter input (auto‑focused on open) using `IBM Plex Mono` at 12 px.
|
||
- Keyboard hint (`↑↓ ⌥L/S/D/Y`).
|
||
- Buttons to toggle **List** vs **Tree** view.
|
||
|
||
**List Mode**:
|
||
- Row shows shape glyph, name, relation tag (muted), health metric, type badge, view shortcuts (⌥L/S/D/Y), status dot.
|
||
- Selected row: `background: accentDim; border-left: 2px solid accent`.
|
||
- Hover row: `background: rgba(255,255,255,.04)`.
|
||
- Sorting: degraded/failed first, then pending, then ready; alphabetical within groups.
|
||
|
||
**Tree Mode**:
|
||
- Hierarchical view similar to k9s "xray".
|
||
- Workloads expand to show their pods; pods expand to show ConfigMaps, Secrets, PVCs.
|
||
- Services/Ingresses expand to show targets.
|
||
- Relation tags: `pod`, `configMap`, `secret`, `volume`, `selects`, `routes`, `used by`.
|
||
- Indentation `20 px × depth` with L‑shaped connector border.
|
||
- Filtering retains matching nodes **and** all ancestors so hierarchy stays readable.
|
||
|
||
**Interaction**:
|
||
- Typing filters instantly (no mode switch).
|
||
- `↑/↓` moves selection highlight.
|
||
- `⌥L/S/D/Y` opens the respective view for the selected row (same shortcuts as Spotlight).
|
||
- `Enter` opens the default view for the selected row.
|
||
- `Escape` blurs the filter input.
|
||
- Mouse‑over the collection window and start typing focuses the filter input.
|
||
- Resizing follows the same rules as other Detail Windows (sibling windows resize proportionally).
|
||
|
||
**State** (`CollectionState` interface in design docs):
|
||
```typescript
|
||
interface CollectionState {
|
||
[wid: string]: {
|
||
search: string;
|
||
view: 'list' | 'tree';
|
||
sel: number; // selected row index
|
||
}
|
||
}
|
||
``` |