Add tab navigation dropdown menu for better multi-tab management

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>
This commit is contained in:
ZacharyZcR
2025-09-07 16:35:09 +08:00
parent bfd441e1f3
commit d1635c35f3
5 changed files with 316 additions and 2 deletions
+2 -1
View File
@@ -259,7 +259,8 @@
"closeTab": "Close Tab",
"sshManager": "SSH Manager",
"hostManager": "Host Manager",
"cannotSplitTab": "Cannot split this tab"
"cannotSplitTab": "Cannot split this tab",
"tabNavigation": "Tab Navigation"
},
"admin": {
"title": "Admin Settings",