feat(Icons): replace sidebar icon with collapse and expand icons for editor pane toggle

Author: dontry

src/components/Icons.jsx

@@ -330,8 +330,11 @@ export function Icons() {
             fill="#FDC709"
           />
         </symbol>
-        <symbol id="icon-sidebar" viewBox="0 0 24 24">
-         <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3.5v17M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6z"/>
+        <symbol id="icon-collapse" viewBox="0 0 24 24">
+          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18m7-6l-3-3l3-3"/></g>
+        </symbol>
+        <symbol id="icon-expand" viewBox="0 0 24 24">
+          <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18m5-12l3 3l-3 3"/></g>
         </symbol>
       </symbol>
     </svg>

src/components/MainHeader.jsx

@@ -62,6 +62,22 @@ export function MainHeader(props) {
   return (
     <div className="main-header text-gray-400 py-2 px-8 flex justify-between border-b border-black-700 bg-black-500">
       <div className="flex items-center gap-4">
+         <button
+          className="py-1.5 duration-200 font-semibold flex items-center gap-2 rounded-lg"
+          aria-label="Toggle editor pane"
+          title={props.isEditorCollapsed ? "Expand editor pane" : "Collapse editor pane"}
+          onClick={props.onToggleEditorCollapse}
+        >
+          <svg 
+            className={`h-8 w-8 transition-transform duration-200 ${
+              props.currentLayoutMode === 2 ? 'rotate-90' : 
+              props.currentLayoutMode === 3 ? 'rotate-180' : 
+              'rotate-0'
+            }`}
+          >
+            <use xlinkHref={props.isEditorCollapsed ? "#icon-expand" : "#icon-collapse"} />
+          </svg>
+        </button>
         <DropdownMenu.Root>
           <DropdownMenu.Trigger asChild>
             <div className="flex items-center p-1 hover:bg-gray-700 data-[state=open]:bg-[#454856] rounded-lg cursor-pointer duration-200">
@@ -137,26 +153,6 @@ export function MainHeader(props) {
           </svg>
           <span>My library</span>
         </button>
-        <button
-          className={`px-4 py-1.5 bg-black-600 duration-200 font-semibold flex items-center gap-2 rounded-lg ${
-            props.isEditorCollapsed 
-              ? 'hover:opacity-80' 
-              : 'hover:bg-primary-700 text-white'
-          }`}
-          aria-label="Toggle editor pane"
-          title={props.isEditorCollapsed ? "Expand editor pane" : "Collapse editor pane"}
-          onClick={props.onToggleEditorCollapse}
-        >
-          <svg 
-            className={`h-5 w-5 transition-transform duration-200 ${
-              props.currentLayoutMode === 2 ? 'rotate-90' : 
-              props.currentLayoutMode === 3 ? 'rotate-180' : 
-              'rotate-0'
-            }`}
-          >
-            <use xlinkHref="#icon-sidebar" />
-          </svg>
-        </button>
       </div>
       <div>
         {isEditing ? (