diff --git a/client/app.js b/client/app.js index 1133fa74..1115e343 100644 --- a/client/app.js +++ b/client/app.js @@ -869,18 +869,31 @@ class ClaudeOrchestrator { updateSidebarToggleIcon() { const toggle = document.getElementById('sidebar-toggle'); - if (!toggle) return; + const mobileToggle = document.getElementById('mobile-sidebar-toggle'); + if (!toggle && !mobileToggle) return; - const isCollapsed = this.isMobileLayout() - ? !document.body.classList.contains('sidebar-open') - : document.body.classList.contains('sidebar-collapsed'); - const shouldBeExpanded = !isCollapsed; - const label = shouldBeExpanded ? 'Collapse sidebar' : 'Expand sidebar'; + const isMobile = this.isMobileLayout(); + const isExpanded = isMobile + ? document.body.classList.contains('sidebar-open') + : !document.body.classList.contains('sidebar-collapsed'); + const isCollapsed = !isExpanded; + const label = isCollapsed + ? (isMobile ? 'Show worktrees' : 'Expand sidebar') + : (isMobile ? 'Hide worktrees' : 'Collapse sidebar'); + + if (toggle) { + toggle.classList.toggle('is-collapsed', isCollapsed); + toggle.title = label; + toggle.setAttribute('aria-label', label); + toggle.setAttribute('aria-expanded', String(isExpanded)); + } - toggle.classList.toggle('is-collapsed', isCollapsed); - toggle.title = label; - toggle.setAttribute('aria-label', label); - toggle.setAttribute('aria-expanded', String(shouldBeExpanded)); + if (mobileToggle) { + mobileToggle.classList.toggle('is-collapsed', isCollapsed); + mobileToggle.title = label; + mobileToggle.setAttribute('aria-label', label); + mobileToggle.setAttribute('aria-expanded', String(isExpanded)); + } } getSidebarDesktopCollapsedPref() { @@ -1884,10 +1897,6 @@ class ClaudeOrchestrator { this.toggleWorktreeVisibility(worktreeId); } - // On mobile, hide sidebar after selection so the terminals are visible. - if (this.isMobileLayout()) { - this.closeSidebar(); - } } }); } @@ -1900,6 +1909,14 @@ class ClaudeOrchestrator { }); } + const mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle'); + if (mobileSidebarToggle) { + mobileSidebarToggle.addEventListener('click', (e) => { + e.preventDefault(); + this.toggleSidebar(); + }); + } + const sidebarBackdrop = document.getElementById('sidebar-backdrop'); if (sidebarBackdrop) { sidebarBackdrop.addEventListener('click', (e) => { diff --git a/client/index.html b/client/index.html index 2e88a612..0556aad7 100644 --- a/client/index.html +++ b/client/index.html @@ -51,10 +51,11 @@

Worktrees

- +
+ diff --git a/client/styles.css b/client/styles.css index cea68fdf..47292528 100644 --- a/client/styles.css +++ b/client/styles.css @@ -1247,6 +1247,10 @@ header { will-change: transform; } +.mobile-sidebar-toggle { + display: none; +} + .sidebar-toggle.is-collapsed .sidebar-toggle-icon { transform: rotate(180deg); } @@ -7361,6 +7365,24 @@ body.dependency-onboarding-active #dependency-setup-modal { min-height: 70vh; } + .mobile-sidebar-toggle { + display: inline-flex; + width: 36px; + height: 32px; + margin: 0; + padding: 0; + align-items: center; + justify-content: center; + font-size: 1.05rem; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + background: var(--bg-tertiary); + } + + .mobile-sidebar-toggle:hover { + background: var(--bg-primary); + } + .sidebar-toggle { display: inline-flex; }