vibetunnel/mac/VibeTunnel/Presentation/Components/VisualIndicatorExamples.md

72 lines
No EOL
1.8 KiB
Markdown

# Visual Indicator Styles for VibeTunnel Menu Bar
## Current Implementation
The menu bar now shows session status using visual indicators instead of cryptic numbers. Here are the available styles:
### 1. **Dots Style** (Default)
```
No sessions: [empty]
Only idle: 3
Only active: ●●●
Mixed (2/5): ●● 5
Many active: ●●●+ 8
```
- Filled dots (●) represent active sessions
- Shows up to 3 dots, then adds "+"
- Total count shown only when idle sessions exist
### 2. **Bars Style**
```
No sessions: [empty]
Only idle: ▫︎▫︎▫︎
Only active: ▪︎▪︎▪︎
Mixed (2/5): ▪︎▪︎▫︎▫︎▫︎
Many (3/7): ▪︎▪︎▪︎▫︎▫︎+
```
- Filled squares (▪︎) for active sessions
- Empty squares (▫︎) for idle sessions
- Shows up to 5 bars total
### 3. **Compact Style**
```
No sessions: [empty]
Only idle: ◯3
Only active: ◆2
Mixed (2/5): 2◆5
```
- Diamond (◆) as separator/indicator
- Most space-efficient option
### 4. **Minimalist Style**
```
No sessions: [empty]
Only idle: 3
Only active: ●2
Mixed (2/5): 2|5
```
- Simple vertical bar separator
- Dot prefix for active-only
### 5. **Meter Style**
```
No sessions: [empty]
Only idle: [□□□□□]
Only active: [■■■■■]
Mixed (2/5): [■■□□□]
Mixed (1/3): [■■□□□]
```
- Progress bar visualization
- Shows active/total ratio
## Changing Styles
To change the indicator style, modify line 144 in `StatusBarController.swift`:
```swift
let indicatorStyle: IndicatorStyle = .dots // Change to .bars, .compact, etc.
```
## Button Highlighting
The menu bar button now properly highlights when the dropdown is open, providing clear visual feedback that the menu is active.