feat: make no-distractions mode work cleanly in design mode

Expose WorkspaceManager.isInDesignMode() / setDesignMode() and a
new EVENT_WORKSPACE_DESIGN_MODE_CHANGE so other modules can react
to the full-live-preview layout without reaching into the control
bar. CentralControlBar mirrors its editorCollapsed flag into the
workspace manager on every toggle.

NoDistractions now checks isInDesignMode(): in design mode
entering/exiting only toggles the sidebar (the main toolbar and
panels are part of the editing surface and hiding them would
blank the live preview area). In the normal editor layout the
previous behavior — hide sidebar + main toolbar + panels — still
applies.

Author: abose

src/extensionsIntegrated/NoDistractions/main.js

@@ -168,14 +168,27 @@ define(function (require, exports, module) {
         KeyBindingManager.addBinding(CMD_TOGGLE_PANELS, [ {key: togglePanelsKey_EN}, {key: togglePanelsKeyMac_EN, platform: "mac"} ]);
 
         PreferencesManager.on("change", PREFS_PURE_CODE, function () {
+            const inDesignMode = WorkspaceManager.isInDesignMode &&
+                WorkspaceManager.isInDesignMode();
             if (PreferencesManager.get(PREFS_PURE_CODE)) {
-                ViewUtils.hideMainToolBar();
-                CommandManager.execute(Commands.HIDE_SIDEBAR);
-                _hidePanelsIfRequired();
+                if (inDesignMode) {
+                    // In design mode the live preview already fills the editor
+                    // area and the main toolbar is the visible surface; just
+                    // collapse the sidebar so LP can stretch to the full width.
+                    CommandManager.execute(Commands.HIDE_SIDEBAR);
+                } else {
+                    ViewUtils.hideMainToolBar();
+                    CommandManager.execute(Commands.HIDE_SIDEBAR);
+                    _hidePanelsIfRequired();
+                }
             } else {
-                ViewUtils.showMainToolBar();
-                CommandManager.execute(Commands.SHOW_SIDEBAR);
-                _showPanelsIfRequired();
+                if (inDesignMode) {
+                    CommandManager.execute(Commands.SHOW_SIDEBAR);
+                } else {
+                    ViewUtils.showMainToolBar();
+                    CommandManager.execute(Commands.SHOW_SIDEBAR);
+                    _showPanelsIfRequired();
+                }
             }
             _updateCheckedState();
         });

src/view/CentralControlBar.js

@@ -242,6 +242,9 @@ define(function (require, exports, module) {
         if (_toggleDesignModeCommand) {
             _toggleDesignModeCommand.setChecked(editorCollapsed);
         }
+        if (WorkspaceManager.setDesignMode) {
+            WorkspaceManager.setDesignMode(editorCollapsed);
+        }
 
         if (editorCollapsed) {
             livePreviewWasOpen = _isLivePreviewOpen();

src/view/WorkspaceManager.js

@@ -74,6 +74,13 @@ define(function (require, exports, module) {
      */
     const EVENT_WORKSPACE_PANEL_HIDDEN = PanelView.EVENT_PANEL_HIDDEN;
 
+    /**
+     * Event triggered when design mode (editor collapsed, full live preview) is
+     * entered or exited. Payload: `(active: boolean)`.
+     * @const
+     */
+    const EVENT_WORKSPACE_DESIGN_MODE_CHANGE = "workspaceDesignModeChange";
+
     /**
      * Width of the main toolbar in pixels.
      * @const
@@ -619,6 +626,35 @@ define(function (require, exports, module) {
         recomputeLayout(true);
     }
 
+    // Design mode tracks whether the editor is fully collapsed to show only the
+    // live-preview panel. The flag is owned by view/CentralControlBar but mirrored
+    // here so other modules don't need to reach into the control bar.
+    let _isInDesignMode = false;
+
+    /**
+     * Returns true while the workspace is in design mode (editor collapsed and
+     * live preview expanded to fill the editor area).
+     * @returns {boolean}
+     */
+    function isInDesignMode() {
+        return _isInDesignMode;
+    }
+
+    /**
+     * Sets the design-mode flag and fires EVENT_WORKSPACE_DESIGN_MODE_CHANGE when
+     * the value actually changes. Intended to be called by the control bar; other
+     * callers should use the dedicated toggle command instead.
+     * @param {boolean} active
+     */
+    function setDesignMode(active) {
+        const next = !!active;
+        if (_isInDesignMode === next) {
+            return;
+        }
+        _isInDesignMode = next;
+        exports.trigger(EVENT_WORKSPACE_DESIGN_MODE_CHANGE, _isInDesignMode);
+    }
+
     // Escape key and toggle panel special handling
     let _escapeKeyConsumers = {};
 
@@ -776,6 +812,9 @@ define(function (require, exports, module) {
     exports.EVENT_WORKSPACE_UPDATE_LAYOUT   = EVENT_WORKSPACE_UPDATE_LAYOUT;
     exports.EVENT_WORKSPACE_PANEL_SHOWN     = EVENT_WORKSPACE_PANEL_SHOWN;
     exports.EVENT_WORKSPACE_PANEL_HIDDEN    = EVENT_WORKSPACE_PANEL_HIDDEN;
+    exports.EVENT_WORKSPACE_DESIGN_MODE_CHANGE = EVENT_WORKSPACE_DESIGN_MODE_CHANGE;
+    exports.isInDesignMode                  = isInDesignMode;
+    exports.setDesignMode                   = setDesignMode;
     exports.DEFAULT_PANEL_ID                = DEFAULT_PANEL_ID;
 
     /**