Files

uroma efb506009a 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>

2026-01-22 12:28:18 +00:00

1.9 KiB

Raw Blame History

Claude IDE Tab Close Buttons - Scratchpad

Task Overview

Fix the missing 'x' close button on session/project tabs in the Claude IDE. Issue URL: https://rommark.dev/claude/ide/session/session-1769083280612-mdof554ot

Progress

Iteration 1 - Add Close Buttons to Project Tabs - COMPLETED

Discovery:

Session tabs (Level 2) already had close buttons implemented in session-tabs.js line 100
Project tabs (Level 1) were missing close buttons entirely

Changes Made:

project-manager.js - Added close button to project tabs:
- Modified renderProjectTab() to include close button element (line 192)
- Added closeProject() method with confirmation dialog
- Added getSessionName() helper method for displaying session names in confirmation
- Close button removes project tab but keeps sessions accessible
- Auto-switches to next available project when active project is closed
project-tabs.css - Added styling for project tab close buttons:
- Added .project-tab .tab-close styles (lines 101-122)
- Close button hidden by default, shows on hover
- Red highlight on hover with rotation effect
- Added mobile responsive styles to always show close button on small screens

Implementation Details:

Close button uses × (multiplication sign) character
Click event stops propagation to prevent triggering project switch
Confirmation dialog shows session count and list for non-empty projects
Graceful handling when last project is closed (shows empty state)

Next Steps

Test the implementation in browser
Verify close buttons work on both project and session tabs
Ensure responsive behavior on mobile devices

Files Modified

/home/uroma/obsidian-web-interface/public/claude-ide/project-manager.js
/home/uroma/obsidian-web-interface/public/claude-ide/project-tabs.css

Files Verified (No Changes Needed)

/home/uroma/obsidian-web-interface/public/claude-ide/session-tabs.js (already had close buttons)

1.9 KiB Raw Blame History Unescape Escape