feat(ui): visual improvements across toolbar and panel components

- DropdownMenu: replace static ▼ with animated SVG chevron that rotates when open
- Navbar: replace emoji sun/moon with proper SVG icons and add hover background
- ExecutionOutput: Stop button only visible when running, with stop icon; header/content separated by divider; empty-result italicised hint
- ModelInformation: add section header label; add hover and transition to Syntax Validation button
- FeatureTree: add "Configuration Panel" section header
- ModelProperties: reduce oversized h2 (text-2xl → text-lg)
- EditorPage toolbar: add transition-colors and hover states to all tab buttons (View, Solver, Compute); fix missing dark:border-gray-600 on Export group; replace ⚙ text with gear SVG icon; replace rotated-text hide/show panel buttons with compact chevron arrow buttons

https://claude.ai/code/session_01Kp6RLceBS9Eb8x8CPiQ7dx

Author: claude

src/components/DropdownMenu.jsx

@@ -87,7 +87,15 @@ const DropdownMenu = ({
         aria-expanded={isOpen}
       >
         {buttonLabel}
-        <span className="ml-2">&#9660;</span>
+        <svg
+          className={`ml-2 w-3 h-3 shrink-0 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 9l-7 7-7-7" />
+        </svg>
       </button>
 
       {isOpen && (

src/components/ExecutionOutput.jsx

@@ -28,26 +28,28 @@ const ExecutionOutput = ({
       resizeHandles={["n"]}
       onResize={handleResize}
     >
-      <div className="overflow-auto h-full">
-        <button
-          onClick={handleStop}
-          className="absolute top-0 right-0 m-2 p-2 bg-red-600 text-white rounded"
-        >
-          Stop
-        </button>
-        <div className="flex items-center font-semibold text-xl">
-          {isAwaiting ? (
-            <>
-              <Spinner /> {children.label}
-            </>
-          ) : (
-            children.label
+      <div className="flex flex-col h-full overflow-hidden">
+        <div className="flex items-center justify-between shrink-0 pb-2 border-b border-gray-500 dark:border-gray-600">
+          <div className="flex items-center gap-2 font-semibold text-base leading-tight">
+            {isAwaiting && <Spinner />}
+            <span>{children.label}</span>
+          </div>
+          {isAwaiting && (
+            <button
+              onClick={handleStop}
+              className="flex items-center gap-1 px-3 py-1 text-sm bg-red-600 hover:bg-red-700 active:bg-red-800 text-white rounded transition-colors duration-150"
+            >
+              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <rect x="4" y="4" width="16" height="16" rx="2" />
+              </svg>
+              Stop
+            </button>
           )}
         </div>
-        <div className="font-mono text-sm">
+        <div className="font-mono text-sm mt-2 overflow-auto flex-1">
           {children.result == null ||
           (Array.isArray(children.result) && children.result.length === 0) ? (
-            <div>There are no {children.label}.</div>
+            <div className="text-gray-400 italic">There are no {children.label}.</div>
           ) : Array.isArray(children.result) ? (
             children.result.map((item, index) => (
               <div key={index}>{item.toString()}</div>

src/components/FeatureTree.jsx

@@ -126,6 +126,9 @@ const TreeView = ({ treeData, executeAction, operations, history }) => {
       }
     >
       <div className="space-y-4 h-full">
+        <h2 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-widest">
+          Configuration Panel
+        </h2>
         <DropdownMenu
           buttonLabel={"Configuration Operations"}
           options={operations}

src/components/ModelInformation.jsx

@@ -24,8 +24,11 @@ const ModelInformation = ({
       resizeHandles={["w"]}
     >
       <div>
+        <h2 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-widest mb-3">
+          Model Information
+        </h2>
         <button
-          className="w-full bg-[#356C99] text-white py-2 px-4 rounded active:bg-[#0D486C] shadow-lg"
+          className="w-full bg-[#356C99] hover:bg-[#0D486C] active:bg-[#0a3a57] text-white py-2 px-4 rounded shadow-lg transition-colors duration-150"
           onClick={onValidateModel}
         >
           {buttonText}

src/components/ModelProperties.jsx

@@ -8,7 +8,7 @@ const ModelProperties = ({ modelProperties }) => {
         The model is syntactically valid
       </div>
 
-      <h2 className="text-[#0D486C] dark:text-blue-300 font-bold text-2xl mb-4">
+      <h2 className="text-[#0D486C] dark:text-blue-300 font-bold text-lg mb-3">
         Model Information
       </h2>
 

src/components/Navbar.jsx

@@ -29,9 +29,17 @@ function Navbar({ children, controls, darkMode, toggleDark }) {
         <button
           onClick={toggleDark}
           aria-label="Toggle dark mode"
-          className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors text-lg"
+          className="p-1.5 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
         >
-          {darkMode ? "☀️" : "🌙"}
+          {darkMode ? (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707M17.657 17.657l-.707-.707M6.343 6.343l-.707-.707M12 7a5 5 0 110 10A5 5 0 0112 7z" />
+            </svg>
+          ) : (
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+            </svg>
+          )}
         </button>
       </div>
     </nav>

src/pages/editor/EditorPage.jsx

@@ -747,8 +747,10 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
               {viewOptions.map((option) => (
                 <button
                   key={option.value}
-                  className={`px-2.5 py-2 text-sm ${
-                    currentView === option.value ? "bg-[#356C99] text-white" : "bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200"
+                  className={`px-2.5 py-2 text-sm transition-colors duration-150 ${
+                    currentView === option.value
+                      ? "bg-[#356C99] text-white"
+                      : "bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
                   }`}
                   onClick={() => toggleView(option)}
                 >
@@ -760,7 +762,7 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
                   buttonLabel="Metrics"
                   options={metricsOptions}
                   executeAction={toggleView}
-                  className="bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 px-3 rounded-none shadow-none w-[100px] justify-between border-l border-gray-300 dark:border-gray-600"
+                  className="bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 px-3 rounded-none shadow-none w-[100px] justify-between border-l border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-150"
                 />
               )}
             </div>
@@ -774,7 +776,7 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
                 buttonLabel="Structural operation"
                 options={STRUCTURAL_OPERATIONS}
                 executeAction={executeAction}
-                className="bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 px-3 rounded-none shadow-none w-[170px] justify-between"
+                className="bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 px-3 rounded-none shadow-none w-[170px] justify-between hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-150"
               />
             </div>
           </div>
@@ -786,8 +788,10 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
               {solverOptions.map((option) => (
                 <button
                   key={option.value}
-                  className={`px-2.5 py-2 text-sm min-w-[60px] ${
-                    selectedSolver === option.value ? "bg-[#356C99] text-white" : "bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200"
+                  className={`px-2.5 py-2 text-sm min-w-[60px] transition-colors duration-150 ${
+                    selectedSolver === option.value
+                      ? "bg-[#356C99] text-white"
+                      : "bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
                   }`}
                   onClick={() => setSelectedSolver(option.value)}
                 >
@@ -798,7 +802,7 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
                 buttonLabel="Analysis operation"
                 options={operationsForSolver(selectedSolver)}
                 executeAction={executeAction}
-                className="bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 px-3 rounded-none shadow-none w-[170px] justify-between border-l"
+                className="bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 px-3 rounded-none shadow-none w-[170px] justify-between border-l border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-150"
               />
             </div>
           </div>
@@ -808,17 +812,21 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
             <div className="h-px bg-gray-300 dark:bg-gray-600 w-full" />
             <div className="flex items-stretch rounded overflow-hidden border border-gray-300 dark:border-gray-600">
               <button
-                className={`px-2.5 py-2 text-sm ${
-                  computeBackend === WASM ? "bg-[#356C99] text-white" : "bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200"
+                className={`px-2.5 py-2 text-sm transition-colors duration-150 ${
+                  computeBackend === WASM
+                    ? "bg-[#356C99] text-white"
+                    : "bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
                 }`}
                 onClick={() => selectBackend(WASM)}
                 title="Run analysis operations in your browser (WebAssembly)"
               >
                 In-browser
               </button>
               <button
-                className={`px-2.5 py-2 text-sm border-l border-gray-300 dark:border-gray-600 ${
-                  computeBackend === REST ? "bg-[#356C99] text-white" : "bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200"
+                className={`px-2.5 py-2 text-sm border-l border-gray-300 dark:border-gray-600 transition-colors duration-150 ${
+                  computeBackend === REST
+                    ? "bg-[#356C99] text-white"
+                    : "bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
                 }`}
                 onClick={() => selectBackend(REST)}
                 title="Run analysis operations on a remote flamapy-rest API"
@@ -827,11 +835,14 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
               </button>
               {computeBackend === REST && (
                 <button
-                  className="px-2.5 py-2 text-sm border-l border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200"
+                  className="px-2.5 py-2 text-sm border-l border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-150"
                   onClick={() => setIsBackendModalOpen(true)}
                   title={`Configure the API URL (current: ${restApiUrl})`}
                 >
-                  ⚙
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
                 </button>
               )}
             </div>
@@ -840,12 +851,12 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
           <div className="flex flex-col gap-1 whitespace-nowrap">
             <span className="text-[11px] text-gray-600 dark:text-gray-300 text-center w-full">Export</span>
             <div className="h-px bg-gray-300 dark:bg-gray-600 w-full" />
-            <div className="flex rounded overflow-hidden border border-gray-300">
+            <div className="flex rounded overflow-hidden border border-gray-300 dark:border-gray-600">
               <DropdownMenu
                 buttonLabel="Export"
                 options={EXPORT_OPERATIONS}
                 executeAction={downloadFile}
-                className="bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 px-3 rounded-none shadow-none w-[120px] justify-between"
+                className="bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 py-2 px-3 rounded-none shadow-none w-[120px] justify-between hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-150"
               />
             </div>
           </div>
@@ -938,20 +949,28 @@ function EditorPage({ selectedFile, setNavControls, darkMode }) {
             <TreeView treeData={featureTree} executeAction={executeActionWithConf} operations={CONFIG_OPERATIONS} history={history} />
             {currentView !== "configurator" && (
               <button
-                className="absolute right-[-12px] top-1/2 -translate-y-1/2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 text-[10px] px-1 py-10 rounded-r shadow hover:bg-gray-400 dark:hover:bg-gray-500 rotate-180 [writing-mode:vertical-rl]"
+                aria-label="Hide configuration panel"
+                title="Hide configuration panel"
+                className="absolute right-[-14px] top-1/2 -translate-y-1/2 z-20 flex items-center justify-center w-7 h-10 bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-r shadow hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-150"
                 onClick={() => setShowConfiguratorPanel(false)}
               >
-                Hide configuration panel
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                </svg>
               </button>
             )}
           </div>
         )}
         {!showConfiguratorPanel && currentView !== "configurator" && (
           <button
-            className="absolute left-0 top-1/2 -translate-y-1/2 bg-gray-300 dark:bg-gray-600 text-gray-700 dark:text-gray-200 text-[10px] px-1 py-10 rounded-r shadow hover:bg-gray-400 dark:hover:bg-gray-500 z-40 rotate-180 [writing-mode:vertical-rl]"
+            aria-label="Show configuration panel"
+            title="Show configuration panel"
+            className="absolute left-0 top-1/2 -translate-y-1/2 z-40 flex items-center justify-center w-7 h-10 bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-r shadow hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-150"
             onClick={() => setShowConfiguratorPanel(true)}
           >
-            Show configuration panel
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
           </button>
         )}