Status Bar
The Status Bar at the bottom of the Hibiscus window provides essential information and quick controls for workspace management, theming, and layout toggles.
Layout
┌─────────────────────────────────────────────────────────────────────────────────┐
│ 📁 workspace-name 🔍 Focus Ln 12, Col 34 file.md ⏱️ 24:32 🎨 ⚙️ │
│ │
│ [Left Info] [Center Info] [Right Controls] │
└─────────────────────────────────────────────────────────────────────────────────┘
Left Section
Workspace Indicator
- Shows current workspace folder name
- Truncated path for long names
- Click to reveal full path in tooltip
Focus Mode Indicator
- Appears only when Focus Mode is active
- Accent color to draw attention
- Reminds user they're in distraction-free mode
Center Section
Cursor Position
- Updates in real-time as you type
- Line and column numbers (1-indexed)
- Only visible when editor has focus
Current File
- Name of active file
- Gray/muted styling
- Updates on tab switch
Right Section
Pomodoro Mini Timer
- Compact circular progress indicator
- Shows remaining time
- Click to open Pomodoro panel
- Only visible when timer is running
Theme Selector
- Quick theme switching without opening Settings
- Lists all installed themes:
- Midnight
- Dawn
- Forest
- Custom themes...
- Instant application (no restart)
- Persists across sessions
Dropdown Interface:
┌─────────────┐
│ 🌙 Midnight │
│ 🌅 Dawn │
│ 🌲 Forest │
│ ─────────── │
│ + Custom... │
└─────────────┘
Layout Toggle
- Two toggle buttons for panel visibility
- Pressed state = panel visible
- Unpressed state = panel hidden
- Tooltips on hover
Explorer Toggle:
- Shows/hides left file tree panel
- Syncs with Ctrl+B shortcut
Right Panel Toggle:
- Shows/hides right sidebar
- Syncs with Ctrl+J shortcut
Version Info
- Current application version
- Subtle/gray styling
- Click for about dialog (planned)
Layout Toggle Component
The LayoutToggle provides visual control over panel visibility:
Features
- Icon-based: Clean SVG icons for each panel
- State Indication: Active panels highlighted
- Hover Effects: Subtle background change
- Click Action: Toggle panel visibility
Implementation
interface LayoutToggleProps {
showLeftPanel: boolean
showRightPanel: boolean
onToggleLeftPanel: () => void
onToggleRightPanel: () => void
}
Theme Selector Component
The ThemeSelector dropdown allows instant theme switching:
Features
- Dropdown Interface: Clean select dropdown
- Theme List: All available themes
- Preview: Colors shown in dropdown items
- Persistence: Saves to localStorage and backend
Custom Themes
Access the Theme Editor:
- Select "+ Custom..." from dropdown
- Or open via Settings → Themes
See Theming System for theme creation details.
Shortcut Overlay Trigger
The status bar can trigger the keyboard shortcuts help:
Access: Click the ? icon or press Ctrl+?
Screenshots
[PHOTO PLACEHOLDER: Status Bar Full View] Add screenshot showing the complete status bar with all elements visible
[PHOTO PLACEHOLDER: Theme Selector Dropdown] Add screenshot showing the theme selector dropdown open with theme options
[PHOTO PLACEHOLDER: Pomodoro Timer in Status Bar] Add screenshot showing the mini pomodoro timer active in the status bar
Troubleshooting
Status Bar Not Visible
- Check if window is maximized (might be off-screen)
- Restart Hibiscus
- Check CSS for
.status-bardisplay property
Theme Selector Not Working
- Verify theme files exist
- Check localStorage permissions
- Try manual theme change in Settings
Pomodoro Timer Missing
- Timer only shows when running
- Start a Pomodoro session to see it
- Check if mini-timer is enabled in settings
Version Not Showing
- Check
version.jsonexists - Verify build process included version
- May be hidden on very small windows
Related Documentation
- Theming System - Theme customization
- Study Tools - Pomodoro timer details
- Keyboard Shortcuts - Shortcut overlay