feat(visualization): add collapsible mode to File Explorer sidebar

Adds an in-memory collapse toggle for the left-side File Explorer drawer:

- A new `«` button at the right end of the EXPLORER header collapses the
  sidebar to a small floating row pinned at the top-left, freeing the
  codemap area. The collapsed widget contains a folder-tree expand
  button plus the existing search input, clear button, and kebab menu
  (Flatten / Exclude). Re-expand returns to the full layout.
- State lives in a root-provided signal-backed `ExplorerCollapseService`;
  no persistence — the sidebar opens expanded on every reload.
- The search-bar kebab is migrated from DaisyUI's `dropdown` (clipped by
  the host's `overflow-hidden` in collapsed mode) to the native
  `[popover]` API + CSS anchor positioning, matching the pattern used by
  the FLATTENED / HIDDEN rule popovers. The menu now renders in the
  browser's top-layer and works in both modes.
- Feature components stay zoneless-compatible (signals only, OnPush, no
  setTimeout/NgZone/CDR).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 2 people

plans/2026-05-05-collapsible-sidebar-explorer.md

@@ -1,5 +1,14 @@
-<div class="flex items-center px-2 py-2 border-b border-base-300">
+<div class="flex items-center justify-between px-2 py-2 border-b border-base-300">
     <span class="text-xs font-semibold uppercase tracking-wide">Explorer</span>
+    <button
+        type="button"
+        class="btn btn-ghost btn-xs btn-square"
+        (click)="collapse()"
+        title="Collapse explorer"
+        data-testid="explorer-collapse-button"
+    >
+        <i class="fa fa-angle-double-left"></i>
+    </button>
 </div>
 
 <div class="flex items-stretch border border-base-300 mx-2 mt-2 rounded-md overflow-hidden divide-x divide-base-300">

visualization/app/codeCharta/features/sidebarExplorer/components/explorerHeader/explorerHeader.component.html

@@ -1,8 +1,10 @@
 import { TestBed } from "@angular/core/testing"
 import { provideMockStore } from "@ngrx/store/testing"
 import { render, screen } from "@testing-library/angular"
+import userEvent from "@testing-library/user-event"
 import { defaultState } from "../../../../state/store/state.manager"
 import { explorerCountsSelector } from "../../selectors/sidebarExplorer.selectors"
+import { ExplorerCollapseService } from "../../services/explorerCollapse.service"
 import { ExplorerHeaderComponent } from "./explorerHeader.component"
 
 describe("ExplorerHeaderComponent", () => {
@@ -53,4 +55,17 @@ describe("ExplorerHeaderComponent", () => {
         expect(flattenedChip.querySelector("[popovertarget='explorer-flatten-rules']")).not.toBe(null)
         expect(hiddenChip.querySelector("[popovertarget='explorer-hidden-rules']")).not.toBe(null)
     })
+
+    it("should toggle the ExplorerCollapseService when the collapse button is clicked", async () => {
+        // Arrange
+        await render(ExplorerHeaderComponent)
+        const collapseService = TestBed.inject(ExplorerCollapseService)
+        expect(collapseService.isCollapsed()).toBe(false)
+
+        // Act
+        await userEvent.click(screen.getByTestId("explorer-collapse-button"))
+
+        // Assert
+        expect(collapseService.isCollapsed()).toBe(true)
+    })
 })

visualization/app/codeCharta/features/sidebarExplorer/components/explorerHeader/explorerHeader.component.spec.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, inject } from "@angular/core"
 import { toSignal } from "@angular/core/rxjs-interop"
+import { ExplorerCollapseService } from "../../services/explorerCollapse.service"
 import { ExplorerCountsService } from "../../services/explorerCounts.service"
 import { ExplorerCountChipComponent } from "../explorerCountChip/explorerCountChip.component"
 
@@ -11,6 +12,7 @@ import { ExplorerCountChipComponent } from "../explorerCountChip/explorerCountCh
 })
 export class ExplorerHeaderComponent {
     private readonly countsService = inject(ExplorerCountsService)
+    private readonly collapseService = inject(ExplorerCollapseService)
 
     readonly counts = toSignal(this.countsService.counts$, { requireSync: true })
 
@@ -19,4 +21,8 @@ export class ExplorerHeaderComponent {
     readonly hidden = computed(() => this.counts().hidden)
     readonly noArea = computed(() => this.counts().noArea)
     readonly shownTooltip = computed(() => `${this.shown()} visible · ${this.noArea()} with no area in current metric`)
+
+    collapse() {
+        this.collapseService.toggle()
+    }
 }

visualization/app/codeCharta/features/sidebarExplorer/components/explorerHeader/explorerHeader.component.ts

@@ -21,36 +21,51 @@
         }
     </label>
 
-    <div class="dropdown dropdown-end">
-        <button type="button" tabindex="0" class="btn btn-ghost btn-sm btn-square" title="Add to Blacklist">
-            <i class="fa fa-ellipsis-v"></i>
-        </button>
-        <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-10 w-44 p-2 shadow">
-            @if (isSearchPatternEmpty()) {
-                <li class="px-2 py-1 text-xs opacity-60">Enter a pattern to enable Flatten/Exclude</li>
-            }
-            <li>
-                <button
-                    type="button"
-                    data-testid="search-bar-flatten-button"
-                    [disabled]="isFlattenPatternDisabled()"
-                    (click)="flattenPattern()"
-                >
-                    <i class="fa fa-eye-slash"></i>
-                    Flatten
-                </button>
-            </li>
-            <li>
-                <button
-                    type="button"
-                    data-testid="search-bar-exclude-button"
-                    [disabled]="isExcludePatternDisabled()"
-                    (click)="excludePattern()"
-                >
-                    <i class="fa fa-ban"></i>
-                    Exclude
-                </button>
-            </li>
-        </ul>
-    </div>
+    <button
+        type="button"
+        class="btn btn-ghost btn-sm btn-square"
+        popovertarget="explorer-search-actions"
+        style="anchor-name: --explorer-search-actions"
+        title="Add to Blacklist"
+        data-testid="search-bar-actions-trigger"
+    >
+        <i class="fa fa-ellipsis-v"></i>
+    </button>
+
+    <ul
+        popover
+        id="explorer-search-actions"
+        style="position-anchor: --explorer-search-actions"
+        class="dropdown menu bg-base-100 rounded-box w-44 p-2 shadow-lg"
+    >
+        @if (isSearchPatternEmpty()) {
+            <li class="px-2 py-1 text-xs opacity-60">Enter a pattern to enable Flatten/Exclude</li>
+        }
+        <li>
+            <button
+                type="button"
+                data-testid="search-bar-flatten-button"
+                popovertarget="explorer-search-actions"
+                popovertargetaction="hide"
+                [disabled]="isFlattenPatternDisabled()"
+                (click)="flattenPattern()"
+            >
+                <i class="fa fa-eye-slash"></i>
+                Flatten
+            </button>
+        </li>
+        <li>
+            <button
+                type="button"
+                data-testid="search-bar-exclude-button"
+                popovertarget="explorer-search-actions"
+                popovertargetaction="hide"
+                [disabled]="isExcludePatternDisabled()"
+                (click)="excludePattern()"
+            >
+                <i class="fa fa-ban"></i>
+                Exclude
+            </button>
+        </li>
+    </ul>
 </div>

visualization/app/codeCharta/features/sidebarExplorer/components/explorerSearchBar/explorerSearchBar.component.html

@@ -1,8 +1,23 @@
-<cc-explorer-header></cc-explorer-header>
-<cc-explorer-search-bar></cc-explorer-search-bar>
-<cc-explorer-sort-control></cc-explorer-sort-control>
-<div id="explorer-scroll" class="flex-1 overflow-auto px-1 py-1">
-    <cc-explorer-tree></cc-explorer-tree>
-</div>
-<cc-rules-popover kind="flatten" popoverId="explorer-flatten-rules" anchorName="explorer-flat-chip"></cc-rules-popover>
-<cc-rules-popover kind="exclude" popoverId="explorer-hidden-rules" anchorName="explorer-hidden-chip"></cc-rules-popover>
+@if (isCollapsed()) {
+    <div class="flex items-center gap-1 px-2 py-1">
+        <button
+            type="button"
+            class="btn btn-ghost btn-sm btn-square"
+            (click)="toggle()"
+            title="Expand explorer"
+            data-testid="explorer-expand-button"
+        >
+            <i class="fa-solid fa-folder-tree"></i>
+        </button>
+        <cc-explorer-search-bar class="flex-1"></cc-explorer-search-bar>
+    </div>
+} @else {
+    <cc-explorer-header></cc-explorer-header>
+    <cc-explorer-search-bar></cc-explorer-search-bar>
+    <cc-explorer-sort-control></cc-explorer-sort-control>
+    <div id="explorer-scroll" class="flex-1 overflow-auto px-1 py-1">
+        <cc-explorer-tree></cc-explorer-tree>
+    </div>
+    <cc-rules-popover kind="flatten" popoverId="explorer-flatten-rules" anchorName="explorer-flat-chip"></cc-rules-popover>
+    <cc-rules-popover kind="exclude" popoverId="explorer-hidden-rules" anchorName="explorer-hidden-chip"></cc-rules-popover>
+}

visualization/app/codeCharta/features/sidebarExplorer/components/sidebarExplorer/sidebarExplorer.component.html

@@ -1,7 +1,8 @@
 import { TestBed } from "@angular/core/testing"
 import { State } from "@ngrx/store"
 import { provideMockStore } from "@ngrx/store/testing"
-import { render } from "@testing-library/angular"
+import { render, screen } from "@testing-library/angular"
+import userEvent from "@testing-library/user-event"
 import { of } from "rxjs"
 import { CodeMapNode, NodeType } from "../../../../codeCharta.model"
 import { IdToBuildingService } from "../../../../services/idToBuilding/idToBuilding.service"
@@ -11,6 +12,7 @@ import { ThreeRendererService } from "../../../../ui/codeMap/threeViewer/threeRe
 import { ThreeSceneService } from "../../../../ui/codeMap/threeViewer/threeSceneService"
 import { explorerTreeNodeSelector } from "../../selectors/explorerTreeNode.selector"
 import { explorerCountsSelector } from "../../selectors/sidebarExplorer.selectors"
+import { ExplorerCollapseService } from "../../services/explorerCollapse.service"
 import { SidebarExplorerComponent } from "./sidebarExplorer.component"
 
 const ROOT: CodeMapNode = {
@@ -45,7 +47,7 @@ describe("SidebarExplorerComponent", () => {
         })
     })
 
-    it("should compose header, search bar, sort control and tree", async () => {
+    it("should compose header, search bar, sort control and tree by default", async () => {
         // Arrange & Act
         const { container } = await render(SidebarExplorerComponent)
 
@@ -55,4 +57,38 @@ describe("SidebarExplorerComponent", () => {
         expect(container.querySelector("cc-explorer-sort-control")).not.toBe(null)
         expect(container.querySelector("cc-explorer-tree")).not.toBe(null)
     })
+
+    it("should render only the expand button and search bar when collapsed", async () => {
+        // Arrange
+        const { container, detectChanges } = await render(SidebarExplorerComponent)
+        const collapseService = TestBed.inject(ExplorerCollapseService)
+
+        // Act
+        collapseService.toggle()
+        detectChanges()
+
+        // Assert
+        expect(container.querySelector("cc-explorer-search-bar")).not.toBe(null)
+        expect(screen.getByTestId("explorer-expand-button")).not.toBe(null)
+        expect(container.querySelector("cc-explorer-header")).toBe(null)
+        expect(container.querySelector("cc-explorer-sort-control")).toBe(null)
+        expect(container.querySelector("cc-explorer-tree")).toBe(null)
+    })
+
+    it("should expand back to the full layout when the expand button is clicked", async () => {
+        // Arrange
+        const { container, detectChanges } = await render(SidebarExplorerComponent)
+        const collapseService = TestBed.inject(ExplorerCollapseService)
+        collapseService.toggle()
+        detectChanges()
+
+        // Act
+        await userEvent.click(screen.getByTestId("explorer-expand-button"))
+        detectChanges()
+
+        // Assert
+        expect(collapseService.isCollapsed()).toBe(false)
+        expect(container.querySelector("cc-explorer-header")).not.toBe(null)
+        expect(container.querySelector("cc-explorer-tree")).not.toBe(null)
+    })
 })

visualization/app/codeCharta/features/sidebarExplorer/components/sidebarExplorer/sidebarExplorer.component.spec.ts

@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component } from "@angular/core"
+import { ChangeDetectionStrategy, Component, inject } from "@angular/core"
+import { ExplorerCollapseService } from "../../services/explorerCollapse.service"
 import { ExplorerHeaderComponent } from "../explorerHeader/explorerHeader.component"
 import { ExplorerSearchBarComponent } from "../explorerSearchBar/explorerSearchBar.component"
 import { ExplorerSortControlComponent } from "../explorerSortControl/explorerSortControl.component"
@@ -18,7 +19,17 @@ import { RulesPopoverComponent } from "../rulesPopover/rulesPopover.component"
     ],
     host: {
         class: "fixed left-0 w-72 bg-base-100 overflow-hidden flex flex-col shadow-[2px_0_8px_-2px_rgba(0,0,0,0.15)]",
-        style: "top: var(--cc-bars-height, 98px); height: calc(100vh - var(--cc-bars-height, 98px))"
+        "[class.rounded-br-md]": "isCollapsed()",
+        "[style.top]": "'var(--cc-bars-height, 98px)'",
+        "[style.height]": "isCollapsed() ? 'auto' : 'calc(100vh - var(--cc-bars-height, 98px))'"
     }
 })
-export class SidebarExplorerComponent {}
+export class SidebarExplorerComponent {
+    private readonly collapseService = inject(ExplorerCollapseService)
+
+    readonly isCollapsed = this.collapseService.isCollapsed
+
+    toggle() {
+        this.collapseService.toggle()
+    }
+}

visualization/app/codeCharta/features/sidebarExplorer/components/sidebarExplorer/sidebarExplorer.component.ts

@@ -0,0 +1,35 @@
+import { TestBed } from "@angular/core/testing"
+import { ExplorerCollapseService } from "./explorerCollapse.service"
+
+describe("ExplorerCollapseService", () => {
+    let service: ExplorerCollapseService
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({})
+        service = TestBed.inject(ExplorerCollapseService)
+    })
+
+    it("should default to expanded (isCollapsed false)", () => {
+        // Arrange & Act & Assert
+        expect(service.isCollapsed()).toBe(false)
+    })
+
+    it("should flip isCollapsed to true on toggle()", () => {
+        // Arrange & Act
+        service.toggle()
+
+        // Assert
+        expect(service.isCollapsed()).toBe(true)
+    })
+
+    it("should flip isCollapsed back to false on a second toggle()", () => {
+        // Arrange
+        service.toggle()
+
+        // Act
+        service.toggle()
+
+        // Assert
+        expect(service.isCollapsed()).toBe(false)
+    })
+})

visualization/app/codeCharta/features/sidebarExplorer/services/explorerCollapse.service.spec.ts

@@ -0,0 +1,10 @@
+import { Injectable, signal } from "@angular/core"
+
+@Injectable({ providedIn: "root" })
+export class ExplorerCollapseService {
+    readonly isCollapsed = signal(false)
+
+    toggle() {
+        this.isCollapsed.update(value => !value)
+    }
+}