feat(lp): fa reload icon + design-mode toggle on the live preview toolbar

- Replace the sprite-backed reload button with fa-arrow-rotate-right so
  it matches the weight of the other FA buttons in the toolbar.
- Add #designModeToggleLivePreviewButton between reload and preview-mode
  that dispatches VIEW_TOGGLE_DESIGN_MODE, letting the user enter/exit
  design mode from the live-preview panel itself without reaching to
  the CCB. Icon swaps fa-expand ↔ fa-compress based on the current
  design-mode state, title swaps between CCB_SWITCH_TO_DESIGN_MODE and
  CCB_SWITCH_TO_CODE_EDITOR.
- Hide #livePreviewModeBtn (the preview-mode dropdown) while in design
  mode — its options aren't meaningful when the editor is collapsed.

Author: abose

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -202,6 +202,16 @@
 }
 
 #reloadLivePreviewButton {
+    color: #a0a0a0;
+    margin-left: 3px;
+    margin-top: 0;
+    width: 30px;
+    height: 22px;
+    flex-shrink: 0;
+}
+
+#designModeToggleLivePreviewButton {
+    color: #a0a0a0;
     margin-left: 3px;
     margin-top: 0;
     width: 30px;

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -169,7 +169,8 @@ define(function (require, exports, module) {
         $firefoxButtonBallast,
         $panelTitle,
         $modeBtn,
-        $previewBtn;
+        $previewBtn,
+        $designModeBtn;
 
     let customLivePreviewBannerShown = false;
 
@@ -341,11 +342,15 @@ define(function (require, exports, module) {
      * Does not hide in custom server mode (handled by _isMdviewrActive being false).
      */
     function _updateLPControlsForMdviewer() {
+        const inDesignMode = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode();
         if ($previewBtn) {
             $previewBtn.toggle(!_isMdviewrActive);
         }
         if ($modeBtn) {
-            $modeBtn.toggle(!_isMdviewrActive);
+            // Also hidden in design mode (see $designModeBtn wiring in
+            // _createExtensionPanel) because the preview-mode dropdown is moot
+            // when the editor is fully collapsed.
+            $modeBtn.toggle(!_isMdviewrActive && !inDesignMode);
         }
     }
 
@@ -761,6 +766,7 @@ define(function (require, exports, module) {
             livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
             clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
             clickToPreview: Strings.LIVE_PREVIEW_MODE_TOGGLE_PREVIEW,
+            switchToDesignMode: Strings.CCB_SWITCH_TO_DESIGN_MODE,
             livePreviewSettings: Strings.LIVE_DEV_SETTINGS,
             livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES,
             clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT,
@@ -792,6 +798,7 @@ define(function (require, exports, module) {
         $settingsIcon = $panel.find("#livePreviewSettingsBtn");
         $modeBtn = $panel.find("#livePreviewModeBtn");
         $previewBtn = $panel.find("#previewModeLivePreviewButton");
+        $designModeBtn = $panel.find("#designModeToggleLivePreviewButton");
 
         // Markdown theme toggle — persist user choice
         MarkdownSync.setThemeToggleHandler((theme) => {
@@ -871,6 +878,31 @@ define(function (require, exports, module) {
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "reloadBtn", "click");
         });
 
+        // Design-mode toggle: mirrors the CCB's pen-nib button so the user can
+        // enter/exit design mode without moving focus to the sidebar strip.
+        // Icon swaps between fa-expand (enter) and fa-compress (exit); while
+        // design mode is on, hide #livePreviewModeBtn (the preview-mode dropdown)
+        // since its options are moot when the editor is fully collapsed.
+        function _updateDesignModeButton() {
+            const on = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode();
+            const $icon = $designModeBtn.find("i");
+            $icon.removeClass("fa-expand fa-compress")
+                .addClass(on ? "fa-compress" : "fa-expand");
+            $designModeBtn.attr("title",
+                on ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE);
+            if ($modeBtn) {
+                $modeBtn.toggle(!on && !_isMdviewrActive);
+            }
+        }
+        $designModeBtn.click(()=>{
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+            Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "designModeBtn", "click");
+        });
+        WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview");
+        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview",
+            _updateDesignModeButton);
+        _updateDesignModeButton();
+
         // init the status overlay
         _initOverlay();
     }

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -1,7 +1,12 @@
 <div id="panel-live-preview">
     <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
         <div style="width: 20%;display: flex;">
-            <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
+            <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button">
+	            <i class="fa-solid fa-arrow-rotate-right"></i>
+	        </button>
+	        <button id="designModeToggleLivePreviewButton" title="{{switchToDesignMode}}" class="btn-alt-quiet toolbar-button">
+	            <i class="fa-solid fa-expand"></i>
+	        </button>
 	        <button id="previewModeLivePreviewButton" title="{{clickToPreview}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-play"></i>
 	        </button>