test: fix .content-left expectation for CCB offset and add coverage plan

The central control bar now sits between #sidebar and .content, so the
"should update the .content left offset" SidebarTabs spec — which used
to assert sidebar.width — must add #centralControlBar.outerWidth() to
match the new layout. Computed from the live CCB width so the test
stays correct regardless of control-bar width changes.

Add test/control-bar-tests-todo.md with the full mainview: suite we
plan to write for the control bar + design-mode feature set. Serves
as a running checklist; we'll land the actual tests in follow-ups.

Author: abose

test/control-bar-tests-todo.md

@@ -0,0 +1,203 @@
+# Central Control Bar & Design Mode — Tests TODO
+
+Planned as `mainview`-category integration tests (spawns full Phoenix iframe so
+sidebar, CCB, live-preview panel, and main-toolbar are all real). Single suite:
+
+```js
+describe("mainview: central control bar + design mode", function () { … });
+```
+
+Keep this file updated as we add coverage; remove lines as suites land.
+
+---
+
+## 1. Layout / DOM structure
+
+- [ ] `#centralControlBar` exists at boot, positioned between sidebar and
+      `.content`, 30px wide.
+- [ ] CCB groups render in order: collapse-editor, sidebar-toggle, undo/redo,
+      save, nav (search / back / forward), vertical filename label.
+- [ ] Sidebar's `data-minsize` is `30` (so drag can't auto-collapse below CCB).
+- [ ] Sidebar's resizer handle is shifted right of the CCB via CSS
+      `transform: translateX(30px)` — clicking at `sidebar.right + 30` lands
+      on the resizer element.
+- [ ] When the sidebar is hidden, the Resizer moves the handle to be a sibling
+      of `#sidebar` inside `.main-view`; the same shift still applies.
+
+## 2. CCB buttons
+
+- [ ] Undo / Redo / Save buttons fire `Commands.EDIT_UNDO`, `EDIT_REDO`,
+      `FILE_SAVE` respectively.
+- [ ] Search / Back / Forward / Show-in-Tree buttons still trigger the
+      `NavigationProvider` behaviors after being moved out of `#mainNavBarRight`.
+- [ ] `#ccbSidebarToggleBtn` executes `VIEW_HIDE_SIDEBAR` and the icon flips
+      `fa-angles-left` ↔ `fa-angles-right` on panelCollapsed/panelExpanded.
+- [ ] The old `#sidebar-toggle-btn` in the menubar is NOT in the DOM.
+- [ ] Clicking `#ccbFileLabel` executes `NAVIGATE_SHOW_IN_FILE_TREE` and (if
+      sidebar was hidden) re-opens the sidebar as part of that command.
+- [ ] File label shows the current doc's `file.name` and uses
+      `Phoenix.app.getDisplayPath` for its tooltip.
+- [ ] Dirty indicator dot toggles with `DocumentManager`'s `dirtyFlagChange`.
+
+## 3. Toggle Design Mode command
+
+- [ ] `Commands.VIEW_TOGGLE_DESIGN_MODE === "view.toggleDesignMode"` is
+      registered at module load, visible via `CommandManager.get`.
+- [ ] Default keybinding: `Ctrl-F11` (from `base-config/keyboard.json`).
+- [ ] File menu has "Toggle Design Mode" directly below "Live Preview" and
+      above "Reload Live Preview".
+- [ ] Command's checked state mirrors `WorkspaceManager.isInDesignMode()` on
+      both entry and exit.
+- [ ] Clicking `#ccbCollapseEditorBtn` routes through the command
+      (verify via a spy on `CommandManager.execute`).
+- [ ] Icon swap: `fa-feather` (expanded) ↔ `fa-code` (design mode). Title
+      swap: "Switch to Visual Edit" ↔ "Switch to Code Editor".
+
+## 4. Enter design mode
+
+- [ ] With live preview closed: executing the toggle first opens LP (verify a
+      single execution of `FILE_LIVE_FILE_PREVIEW`), then applies collapsed
+      layout on its `.always()`.
+- [ ] With live preview open: sidebar width is preserved, `.content` goes to
+      `width: 0`, `#main-toolbar` gets `left: sidebarW + 30`, `width:
+      innerWidth - sidebarW - 30` with `!important`, `right: auto`.
+- [ ] `savedToolbarWidth` captures pre-collapse `#main-toolbar.outerWidth` for
+      later restore (only when LP was already open).
+- [ ] `$sidebar.data("maxsize")` is stored and replaced with `"1000%"` so
+      `Resizer.updateResizeLimits` doesn't shrink the sidebar on subsequent
+      window resizes.
+- [ ] `#main-toolbar > .horz-resizer` gets `display: none` via CSS.
+- [ ] `document.body` gets class `ccb-editor-collapsed`.
+- [ ] `WorkspaceManager.isInDesignMode()` returns `true` and
+      `EVENT_WORKSPACE_DESIGN_MODE_CHANGE` fires with `true`.
+
+## 5. Exit design mode
+
+- [ ] Before flipping the body class, `sidebar.style.width` is pinned to the
+      currently rendered (max-width-capped) value so removing the cap
+      doesn't cause the sidebar to snap back to the stale uncapped width.
+- [ ] `Resizer.resyncSizer` runs after the pin so the handle follows.
+- [ ] Normal exit restores `#main-toolbar` to `savedToolbarWidth` (LP had
+      been open pre-collapse) or `innerWidth / 2.5` default (LP was opened by
+      the toggle itself). Never closes LP.
+- [ ] Exit clamps: sidebar + CCB + toolbar + 200 (min editor) ≤ window; if
+      the pre-collapse toolbar width would overflow, trim the sidebar first
+      and `data("resyncSizer")()` afterwards.
+- [ ] `livePanel.minWidth + iconsBar` lower bound is honored when picking
+      the restored toolbar width.
+- [ ] `$sidebar.data("maxsize")` is restored to its saved percentage.
+- [ ] `WorkspaceManager.isInDesignMode()` returns `false`, event fires with
+      `false`.
+
+## 6. Exit triggered by hiding live preview
+
+- [ ] Clicking `#toolbar-go-live` while in design mode:
+  - LP panel hides.
+  - `_restoreExpandedLayout` is called with `skipToolbarRestore: true`.
+  - `#main-toolbar` ends at the icon-bar-only width (WSM's
+    `_hidePluginSidePanel` width), not the pre-collapse LP size.
+  - `body.ccb-editor-collapsed` is removed.
+
+## 7. Sidebar drag in design mode
+
+- [ ] Dragging the sidebar resizer rightward grows the sidebar linearly
+      (1:1 with mouse delta) up to the CSS max-width cap.
+- [ ] CSS cap is `calc(100vw - 230px)`: on a 1500px viewport the rendered
+      sidebar never exceeds ~1270px even if style.width is much larger.
+- [ ] During a capped drag, `style.width` may exceed the render width (this
+      is expected); no ResizeObserver warnings land in `console.error`.
+- [ ] Dragging back left respects `data-minsize: 30` (no auto-collapse via
+      drag — only via the sidebar-toggle button).
+- [ ] During the drag, `panelResizeStart` / `panelResizeUpdate` /
+      `panelResizeEnd` are re-fired on `#main-toolbar` so
+      `lpedit-helper/resize-ruler-edit` activates the media-query ruler.
+
+## 8. Window resize while in design mode
+
+- [ ] After 20 synthetic `window.dispatchEvent(new Event("resize"))` bursts,
+      sidebar width is unchanged (`"1000%"` short-circuits the Resizer
+      shrink loop).
+- [ ] `#main-toolbar` stays flush with the window's right edge; the
+      `applyingCollapsedLayout` guard keeps our reassertion from recursing
+      through `EVENT_WORKSPACE_UPDATE_LAYOUT`.
+- [ ] With sidebar hidden, `main-toolbar` width tracks the full available
+      width (no ~70–300px gap from WSM clamping).
+
+## 9. Plugin toolbar resizer in design mode
+
+- [ ] `#main-toolbar > .horz-resizer` has `display: none` while collapsed —
+      user never sees / grabs it; sidebar resizer is the only splitter.
+- [ ] Normal mode: main-toolbar resizer is visible and draggable as usual.
+
+## 10. `WorkspaceManager.setPluginPanelWidth` in design mode
+
+- [ ] Setting width W while collapsed resizes the sidebar to
+      `window - W - pluginIcons - 30 (CCB)` (clamped to ≥ 0) and derives
+      main-toolbar width accordingly.
+- [ ] Setting width W in normal mode falls through to the original
+      implementation (which clamps against 75% window / `window - sidebar
+      - 100`).
+
+## 11. Cycle stability
+
+- [ ] Enter design → drag sidebar past cap → exit → re-enter: CCB,
+      main-toolbar, sidebar all end up aligned (`ccb.left === sidebar.right`,
+      `mainToolbar.left === sidebar.right + 30`).
+- [ ] After the cycle, `sidebar.style.width === sidebar.offsetWidth + "px"`
+      (pinned at the capped value, not the uncapped Resizer value).
+- [ ] Toggle back to normal mode preserves live preview (panel stays open
+      at `savedToolbarWidth` or the default).
+
+## 12. Integration with NoDistractions
+
+- [ ] Design mode + toggling `noDistractions` preference to `true`:
+  - sidebar hides,
+  - main-toolbar and bottom panels stay visible,
+  - `_hidePanelsIfRequired` is NOT invoked (spy).
+- [ ] Design mode + toggling `noDistractions` to `false`:
+  - sidebar shows,
+  - `_showPanelsIfRequired` is NOT invoked.
+- [ ] Normal mode + toggling `noDistractions`: original behavior —
+      `ViewUtils.hideMainToolBar()`, sidebar hide, panels hidden.
+
+## 13. Command / event surface
+
+- [ ] `WorkspaceManager.isInDesignMode` exists and returns the current state.
+- [ ] `WorkspaceManager.setDesignMode(true/false)` triggers
+      `EVENT_WORKSPACE_DESIGN_MODE_CHANGE` with the new boolean.
+- [ ] Repeat calls to `setDesignMode` with the same value do NOT fire the
+      event.
+- [ ] `exports.isEditorCollapsed()` / `setEditorCollapsed()` on CCB still
+      work (back-compat surface).
+
+## 14. Theming / colors
+
+- [ ] CCB background is `#222` regardless of theme (sanity check with a
+      forced light-theme and dark-theme load).
+- [ ] Icon color is `@project-panel-text-2`; hover transitions to
+      `@project-panel-text-1` + `rgba(255,255,255,0.08)` overlay.
+- [ ] File label has `cursor: pointer` and hover adds underline.
+
+## 15. Accessibility / titles
+
+- [ ] Each CCB button has a `title` attribute (collapse, sidebar toggle,
+      undo, redo, save, search, back, forward).
+- [ ] `ccbCollapseEditorBtn` title changes with state.
+- [ ] `ccbSidebarToggleBtn` title changes with sidebar visibility.
+
+---
+
+## Test harness notes
+
+- The suite is expected to run under the `mainview` category (embedded
+  Phoenix iframe). Use `SpecRunnerUtils.createWindowAndRun` or the existing
+  mainview bootstrap.
+- Never use `awaits(number)` — every "wait for X" must be `awaitsFor` on a
+  boolean condition.
+- Clean up between tests:
+  - `_setEditorCollapsed(false)` (if currently collapsed),
+  - close live preview via `FILE_LIVE_FILE_PREVIEW`,
+  - reset sidebar width via `$("#sidebar").width("")`.
+- Prefer `editor.*` / `WorkspaceManager.*` APIs over reading inline styles
+  directly; fall back to `offsetWidth` only where CSS `max-width` can make
+  `style.width` misleading.

test/spec/SidebarTabs-integ-test.js

@@ -527,7 +527,10 @@ define(function (require, exports, module) {
 
             it("should update the .content left offset", function () {
                 SidebarView.resize(350);
-                expect(parseInt(_$(".content").css("left"), 10)).toBe(350);
+                // The central control bar (#centralControlBar) sits between the
+                // sidebar and .content, so .content.left is offset by its width.
+                const ccbWidth = _$("#centralControlBar").outerWidth() || 0;
+                expect(parseInt(_$(".content").css("left"), 10)).toBe(350 + ccbWidth);
             });
 
             it("should persist the width in view state", function () {