Implement Issue #130 suggestion: Add dropdown menu in top tab bar to help
users quickly navigate between open hosts/tabs when many are open.
Features:
- Smart visibility: Only shows when multiple tabs are open
- Visual identification: Each tab type has corresponding icon (Home, Terminal, Server, etc.)
- Active tab indicator: Current tab highlighted with blue dot
- Quick switching: Click any tab to switch instantly
- Seamless integration: Positioned in top navbar without disrupting existing UI
New Components:
- src/components/ui/dropdown-menu.tsx: Radix UI based dropdown component
- src/ui/Desktop/Navigation/Tabs/TabDropdown.tsx: Tab navigation dropdown logic
- Updated TopNavbar.tsx with integrated dropdown
UI/UX Improvements:
- Consistent dark theme styling (#18181b background, #303032 borders)
- 30x30px button size matching existing toolbar buttons
- Right-aligned dropdown to avoid screen boundary issues
- Hover effects and smooth transitions
- Responsive design for different screen sizes
i18n Support:
- Added "tabNavigation" key in both English and Chinese translations
- Accessible tooltips and labels
Technical Implementation:
- Zero breaking changes: Pure incremental feature
- Reuses existing tab context and switching logic
- TypeScript safe with proper type definitions
- Performance optimized: Only renders when needed
- Follows existing code patterns and conventions
This enhancement significantly improves the user experience when managing
multiple host connections, providing quick access to any tab without scrolling.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
ZacharyZcR
d1635c35f3