Pushing to merge Reeces changes. Added the right rail and made minimal changes to the selection logic on page editor, file manager and thumbnail

frontend/src/components/shared/TopControls.tsx

@@ -1,51 +1,49 @@
 import React, { useState, useCallback } from "react";
-import { Button, SegmentedControl, Loader } from "@mantine/core";
+import { SegmentedControl, Loader } from "@mantine/core";
 import { useRainbowThemeContext } from "./RainbowThemeProvider";
-import LanguageSelector from "./LanguageSelector";
 import rainbowStyles from '../../styles/rainbow.module.css';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import LightModeIcon from '@mui/icons-material/LightMode';
-import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import EditNoteIcon from "@mui/icons-material/EditNote";
 import FolderIcon from "@mui/icons-material/Folder";
-import { Group } from "@mantine/core";
 
-// This will be created inside the component to access switchingTo
+// Create view options with icons and loading states
 const createViewOptions = (switchingTo: string | null) => [
   {
     label: (
-      <Group gap={5}>
+      <div style={{ display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: 6, whiteSpace: 'nowrap'}}>
         {switchingTo === "viewer" ? (
           <Loader size="xs" />
         ) : (
           <VisibilityIcon fontSize="small" />
         )}
-      </Group>
+        <span>Read</span>
+      </div>
     ),
     value: "viewer",
   },
   {
     label: (
-      <Group gap={4}>
+      <div style={{ display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
         {switchingTo === "pageEditor" ? (
           <Loader size="xs" />
         ) : (
           <EditNoteIcon fontSize="small" />
         )}
-      </Group>
+        <span>Page Editor</span>
+      </div>
     ),
     value: "pageEditor",
   },
   {
     label: (
-      <Group gap={4}>
+      <div style={{ display: 'inline-flex', flexDirection: 'row', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
         {switchingTo === "fileEditor" ? (
           <Loader size="xs" />
         ) : (
           <FolderIcon fontSize="small" />
         )}
-      </Group>
+        <span>File Manager</span>
+      </div>
     ),
     value: "fileEditor",
   },
@@ -62,7 +60,7 @@ const TopControls = ({
   setCurrentView,
   selectedToolKey,
 }: TopControlsProps) => {
-  const { themeMode, isRainbowMode, isToggleDisabled, toggleTheme } = useRainbowThemeContext();
+  const { isRainbowMode } = useRainbowThemeContext();
   const [switchingTo, setSwitchingTo] = useState<string | null>(null);
 
   const isToolSelected = selectedToolKey !== null;
@@ -83,52 +81,33 @@ const TopControls = ({
     });
   }, [setCurrentView]);
 
-  const getThemeIcon = () => {
-    if (isRainbowMode) return <AutoAwesomeIcon className={rainbowStyles.rainbowText} />;
-    if (themeMode === "dark") return <LightModeIcon />;
-    return <DarkModeIcon />;
-  };
-
   return (
     <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
-      <div className={`absolute left-4 pointer-events-auto flex gap-2 items-center ${
-        isToolSelected ? 'top-4' : 'top-1/2 -translate-y-1/2'
-      }`}>
-        <Button
-          onClick={toggleTheme}
-          variant="subtle"
-          size="md"
-          aria-label="Toggle theme"
-          disabled={isToggleDisabled}
-          className={isRainbowMode ? rainbowStyles.rainbowButton : ''}
-          title={
-            isToggleDisabled
-              ? "Button disabled for 3 seconds..."
-              : isRainbowMode
-                ? "Rainbow Mode Active! Click to exit"
-                : "Toggle theme (click rapidly 6 times for a surprise!)"
-          }
-          style={isToggleDisabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
-        >
-          {getThemeIcon()}
-        </Button>
-        <LanguageSelector />
-      </div>
       {!isToolSelected && (
-        <div className="flex justify-center items-center h-full pointer-events-auto">
+        <div className="flex justify-center items-center h-full pointer-events-auto mt-[0.5rem] rounded-full">
             <SegmentedControl
               data={createViewOptions(switchingTo)}
               value={currentView}
               onChange={handleViewChange}
               color="blue"
               radius="xl"
-              size="md"
               fullWidth
               className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
               style={{
                 transition: 'all 0.2s ease',
                 opacity: switchingTo ? 0.8 : 1,
               }}
+              styles={{
+                root: {
+                  borderRadius: 9999,
+                },
+                control: {
+                  borderRadius: 9999,
+                },
+                indicator: {
+                  borderRadius: 9999,
+                },
+              }}
             />
         </div>
       )}