feat: use designer pen-nib SVG for design-mode toggle button

- Inline the SVG in index.html so it renders on first paint without a
  blank-button flash.
- Switch fills/strokes to currentColor so the icon picks up the CCB
  button color and hover/active states.
- Cache the rendered SVG HTML at init; the toggle swaps it with an
  fa-code icon for design-mode state and restores the cached SVG on
  return to editor mode.
- Size the inline SVG to 15px via CSS to match neighboring FA icons.

Author: abose

src/index.html

@@ -937,7 +937,10 @@
     <div id="centralControlBar" class="no-focus">
         <div class="ccb-group ccb-group-top">
             <a href="#" id="ccbCollapseEditorBtn" class="ccb-btn" title="Switch to Design Mode">
-                <i class="fa-solid fa-pen-nib fa-rotate-90"></i>
+                <svg class="ccb-pen-nib-icon" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                    <path d="M19.8301 13.3181L19.8253 13.2941L17.7493 6.36938C17.461 5.41309 16.7305 4.65382 15.7791 4.33666L3.07815 0.0790007C2.66007 -0.0603584 2.20355 -0.0123035 1.82872 0.199138L9.29645 7.66686C9.48867 7.614 9.68569 7.58998 9.89233 7.58998C11.1658 7.58998 12.199 8.62316 12.199 9.89661C12.199 11.1701 11.1658 12.2032 9.89233 12.2032C8.61888 12.2032 7.5857 11.1701 7.5857 9.89661C7.5857 9.68997 7.61453 9.48814 7.66258 9.30073L0.199661 1.833C-0.0117809 2.20783 -0.0598357 2.65955 0.0795234 3.08243L4.33718 15.7833C4.65435 16.73 5.41362 17.4653 6.36991 17.7536L13.2946 19.8295L13.3186 19.8344L19.8301 13.3229V13.3181Z" fill="currentColor"/>
+                    <line x1="14.1513" y1="20.5938" x2="20.5906" y2="14.1064" stroke="currentColor" stroke-width="1.15332"/>
+                </svg>
             </a>
             <a href="#" id="ccbSidebarToggleBtn" class="ccb-btn" title="Toggle sidebar">
                 <i class="fa-solid fa-angles-left"></i>

src/styles/CentralControlBar.less

@@ -101,6 +101,12 @@
     /* Nudge the collapse-editor icon up so it visually aligns with titlebar icons */
     #ccbCollapseEditorBtn {
         margin-top: -2px;
+
+        svg {
+            width: 15px;
+            height: 15px;
+            pointer-events: none;
+        }
     }
 
     /* Nav buttons: suppress legacy sprite styles (NavigationProvider toggles enabled/disabled class) */

src/styles/images/pen_nib.svg

@@ -40,6 +40,7 @@ define(function (require, exports, module) {
     let livePreviewWasOpen = false;
     let savedSidebarMaxSize = null;
     let applyingCollapsedLayout = false;
+    let penNibIconHTML = null;
 
     function _getRenderedSidebarWidth() {
         // Use offsetWidth (not jQuery's outerWidth) to force a synchronous reflow
@@ -238,7 +239,7 @@ define(function (require, exports, module) {
         const $collapseBtn = $("#ccbCollapseEditorBtn");
         $collapseBtn.toggleClass("is-active", editorCollapsed)
             .attr("title", editorCollapsed ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE);
-        $collapseBtn.find("i").attr("class", editorCollapsed ? "fa-solid fa-code" : "fa-solid fa-pen-nib fa-rotate-90");
+        $collapseBtn.html(editorCollapsed ? '<i class="fa-solid fa-code"></i>' : penNibIconHTML);
         if (_toggleDesignModeCommand) {
             _toggleDesignModeCommand.setChecked(editorCollapsed);
         }
@@ -303,6 +304,10 @@ define(function (require, exports, module) {
         $fileLabel = $("#ccbFileLabel");
         $fileName = $fileLabel.find(".ccb-file-name");
 
+        // Cache the authored pen-nib SVG from the DOM so the toggle handler
+        // can restore it after swapping in the fa-code icon for design mode.
+        penNibIconHTML = $("#ccbCollapseEditorBtn").html();
+
         _wireButtons();
         // The HTML titles on the control-bar buttons are fallback English
         // strings; set the localized versions up front so the initial render