Make top controls always visible, but only allow page editor outside of tools

frontend/src/components/shared/TopControls.tsx

@@ -19,7 +19,8 @@ const viewOptionStyle = {
 
 
 // Build view options showing text always
-const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchType | null) => [
+const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchType | null, isToolSelected: boolean) => {
+  const options = [
     {
       label: (
         <div style={viewOptionStyle as React.CSSProperties}>
@@ -33,24 +34,6 @@ const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchTyp
       ),
       value: "viewer",
     },
-  {
-    label: (
-      <div style={viewOptionStyle as React.CSSProperties}>
-        {currentView === "pageEditor" ? (
-          <>
-            {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
-            <span>Page Editor</span>
-          </>
-        ) : (
-          <>
-            {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
-            <span>Page Editor</span>
-          </>
-        )}
-      </div>
-    ),
-    value: "pageEditor",
-  },
     {
       label: (
         <div style={viewOptionStyle as React.CSSProperties}>
@@ -71,6 +54,31 @@ const createViewOptions = (currentView: WorkbenchType, switchingTo: WorkbenchTyp
     },
   ];
 
+  // Only add Page Editor option when not in a tool
+  if (!isToolSelected) {
+    options.splice(1, 0, {
+      label: (
+        <div style={viewOptionStyle as React.CSSProperties}>
+          {currentView === "pageEditor" ? (
+            <>
+              {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
+              <span>Page Editor</span>
+            </>
+          ) : (
+            <>
+              {switchingTo === "pageEditor" ? <Loader size="xs" /> : <EditNoteIcon fontSize="small" />}
+              <span>Page Editor</span>
+            </>
+          )}
+        </div>
+      ),
+      value: "pageEditor",
+    });
+  }
+
+  return options;
+};
+
 interface TopControlsProps {
   currentView: WorkbenchType;
   setCurrentView: (view: WorkbenchType) => void;
@@ -111,10 +119,9 @@ const TopControls = ({
 
   return (
     <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
-      {!isToolSelected && (
       <div className="flex justify-center mt-[0.5rem]">
         <SegmentedControl
-              data={createViewOptions(currentView, switchingTo)}
+          data={createViewOptions(currentView, switchingTo, isToolSelected)}
           value={currentView}
           onChange={handleViewChange}
           color="blue"
@@ -143,7 +150,6 @@ const TopControls = ({
           }}
         />
       </div>
-      )}
     </div>
   );
 };