Problem: Users had to rename folders on each host individually, which was
time-consuming and error-prone when managing multiple hosts in folders.
Solution: Complete folder management integration directly in Host Viewer with:
**Core Features:**
- Remove folder buttons: Hosts in folders show "X" buttons to move them to "no folder"
- Inline folder editing: Click folder names to edit directly (with pencil icon hint)
- Drag & drop: Drag host cards between folders with visual feedback
- Centralized renaming: Rename folders once, automatically updates all hosts
**UI/UX Enhancements:**
- Visual feedback: Drag states, hover effects, loading indicators
- Smart buttons: Only show remove buttons for hosts actually in folders
- Confirmation dialogs: Prevent accidental operations
- Real-time updates: Immediate UI refresh after operations
- Touch-friendly: Works well with drag & drop on different devices
**Technical Implementation:**
- HTML5 drag & drop API for cross-browser compatibility
- Integrated with existing Host Viewer without separate pages
- Reuses backend APIs for folder operations and host updates
- Comprehensive error handling and user feedback
- Event-driven updates for seamless state synchronization
**Backend Support:**
- Added folder statistics API: GET /ssh/db/folders/with-stats
- Added bulk rename API: PUT /ssh/db/folders/rename
- Fixed encryption key issue: Added CREDENTIAL_ENCRYPTION_KEY to .env
**Removed Components:**
- Eliminated separate "Folder Manager" tab for cleaner UX
- FolderManager.tsx kept for potential future use but not integrated
**Internationalization:**
- Complete English/Chinese support for all new features
- Contextual messages with dynamic content (host names, folder names)
This solution transforms folder management from a tedious multi-step process
into an intuitive, visual experience integrated directly into the main host
management workflow.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
ZacharyZcRandClaude
f3732c091a
