Add close button functionality to project tabs in Claude IDE

Fix missing 'x' close buttons on project tabs (Level 1). Session tabs
( Level 2) already had close buttons implemented.

Changes:
- project-manager.js: Added close button element to renderProjectTab()
- Added closeProject() method with confirmation dialog
- Added getSessionName() helper for session name display
- Auto-switches to next project when active project is closed
- project-tabs.css: Added .tab-close styling for project tabs
- Close button shows on hover, red highlight on hover
- Mobile responsive: always visible on small screens

The close button removes project tab from view but sessions remain
accessible via API/reload. Confirmation shows session count and list
for non-empty projects.

Resolves: https://rommark.dev/claude/ide/session/session-1769083280612-mdof554ot

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
2026-01-22 12:28:18 +00:00
Unverified
parent 2419d2646e
commit efb506009a
3 changed files with 138 additions and 103 deletions

View File

@@ -98,6 +98,29 @@
color: #4a9eff;
}
.project-tab .tab-close {
opacity: 0;
font-size: 16px;
line-height: 1;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
flex-shrink: 0;
transition: all 0.2s ease;
}
.project-tab:hover .tab-close {
opacity: 1;
}
.project-tab .tab-close:hover {
background: rgba(255, 107, 107, 0.2);
color: #ff6b6b;
}
/* New Project Tab */
.project-tab-new {
color: #51cf66;
@@ -391,6 +414,10 @@
display: none;
}
.project-tab .tab-close {
opacity: 1;
}
.session-tab .tab-close {
opacity: 1;
}