Added quick access bar consolodated sidebars

frontend/src/components/QuickAccessBar.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { ActionIcon, Stack, Tooltip } from "@mantine/core";
+import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
+import ContentCutIcon from "@mui/icons-material/ContentCut";
+import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import AppsIcon from "@mui/icons-material/Apps";
+import { useRainbowThemeContext } from "./RainbowThemeProvider";
+import rainbowStyles from '../styles/rainbow.module.css';
+
+interface QuickAccessBarProps {
+  onToolsClick: () => void;
+  onReaderToggle: () => void;
+  selectedToolKey?: string;
+  toolRegistry: any;
+  leftPanelView: 'toolPicker' | 'toolContent';
+  readerMode: boolean;
+}
+
+const QuickAccessBar: React.FC<QuickAccessBarProps> = ({
+  onToolsClick,
+  onReaderToggle,
+  selectedToolKey,
+  toolRegistry,
+  leftPanelView,
+  readerMode,
+}) => {
+  const { isRainbowMode } = useRainbowThemeContext();
+
+  return (
+    <div
+      className={`h-screen flex flex-col w-20 ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
+      style={{ 
+        padding: '1rem 0.5rem',
+        backgroundColor: 'var(--bg-muted)'
+      }}
+    >
+      <Stack gap="lg" align="center" className="flex-1">
+        {/* All Tools Button */}
+        <div className="flex flex-col items-center gap-1">
+          <ActionIcon
+            size="xl"
+            variant={leftPanelView === 'toolPicker' && !readerMode ? "filled" : "subtle"}
+            onClick={onToolsClick}
+          >
+            <AppsIcon sx={{ fontSize: 28 }} />
+          </ActionIcon>
+          <span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Tools</span>
+        </div>
+
+        {/* Reader Mode Button */}
+        <div className="flex flex-col items-center gap-1">
+          <ActionIcon
+            size="xl"
+            variant={readerMode ? "filled" : "subtle"}
+            onClick={onReaderToggle}
+          >
+            <MenuBookIcon sx={{ fontSize: 28 }} />
+          </ActionIcon>
+          <span className="text-xs text-center leading-tight" style={{ color: 'var(--text-secondary)' }}>Read</span>
+        </div>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+      </Stack>
+    </div>
+  );
+};
+
+export default QuickAccessBar;

frontend/src/pages/HomePage.tsx

@@ -18,6 +18,7 @@ import PageEditor from "../components/PageEditor";
 import Viewer from "../components/Viewer";
 import TopControls from "../components/TopControls";
 import ToolRenderer from "../components/ToolRenderer";
+import QuickAccessBar from "../components/QuickAccessBar";
 
 type ToolRegistryEntry = {
   icon: React.ReactNode;
@@ -52,6 +53,8 @@ export default function HomePage() {
   const [files, setFiles] = useState<any[]>([]);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
   const [sidebarsVisible, setSidebarsVisible] = useState(true);
+  const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
+  const [readerMode, setReaderMode] = useState(false);
 
   // URL parameter management
   const { toolParams, updateParams } = useToolParams(selectedToolKey, currentView);
@@ -68,10 +71,23 @@ export default function HomePage() {
     (id: string) => {
       setSelectedToolKey(id);
       if (toolRegistry[id]?.view) setCurrentView(toolRegistry[id].view);
+      setLeftPanelView('toolContent'); // Switch to tool content view when a tool is selected
+      setReaderMode(false); // Exit reader mode when selecting a tool
     },
     [toolRegistry]
   );
 
+  // Handle quick access actions
+  const handleQuickAccessTools = useCallback(() => {
+    setLeftPanelView('toolPicker');
+    setReaderMode(false);
+  }, []);
+
+
+  const handleReaderToggle = useCallback(() => {
+    setReaderMode(!readerMode);
+  }, [readerMode]);
+
   const selectedTool = toolRegistry[selectedToolKey];
 
   return (
@@ -80,22 +96,78 @@ export default function HomePage() {
       gap={0}
       className="min-h-screen w-screen overflow-hidden flex-nowrap flex"
     >
-      {/* Left: Tool Picker */}
+      {/* Quick Access Bar */}
-      {sidebarsVisible && (
+      <QuickAccessBar
+        onToolsClick={handleQuickAccessTools}
+        onReaderToggle={handleReaderToggle}
+        selectedToolKey={selectedToolKey}
+        toolRegistry={toolRegistry}
+        leftPanelView={leftPanelView}
+        readerMode={readerMode}
+      />
+
+      {/* Left: Tool Picker OR Selected Tool Panel */}
+      {sidebarsVisible && !readerMode && (
         <div
-          className={`h-screen z-sticky flex flex-col bg-surface border-r border-border min-w-[180px] max-w-[240px] w-[16vw] ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
+          className={`h-screen z-sticky flex flex-col min-w-[300px] max-w-[450px] w-[25vw] ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
-          style={{ padding: '1rem' }}
+          style={{
+            backgroundColor: 'var(--bg-surface)',
+            borderRight: '1px solid var(--border-subtle)',
+            padding: '1rem'
+          }}
         >
+          {leftPanelView === 'toolPicker' ? (
+            // Tool Picker View
+            <div className="flex-1 flex flex-col">
               <ToolPicker
                 selectedToolKey={selectedToolKey}
                 onSelect={handleToolSelect}
                 toolRegistry={toolRegistry}
               />
             </div>
+          ) : (
+            // Selected Tool Content View
+            <div className="flex-1 flex flex-col">
+              {/* Back button */}
+              <div className="mb-4">
+                <Button
+                  variant="subtle"
+                  size="sm"
+                  onClick={() => setLeftPanelView('toolPicker')}
+                  className="text-sm"
+                >
+                  ← Back to Tools
+                </Button>
+              </div>
+              
+              {/* Tool title */}
+              <div className="mb-4">
+                <h2 className="text-lg font-semibold">{selectedTool?.name}</h2>
+              </div>
+              
+              {/* Tool content */}
+              <div className="flex-1 min-h-0">
+                <ToolRenderer
+                  selectedToolKey={selectedToolKey}
+                  selectedTool={selectedTool}
+                  pdfFile={pdfFile}
+                  files={files}
+                  downloadUrl={downloadUrl}
+                  setDownloadUrl={setDownloadUrl}
+                  toolParams={toolParams}
+                  updateParams={updateParams}
+                />
+              </div>
+            </div>
+          )}
+        </div>
       )}
 
-      {/* Middle: Main View */}
+      {/* Main View */}
-      <Box className="flex-1 h-screen min-w-80 relative flex flex-col transition-all duration-300 bg-background">
+      <Box 
+        className="flex-1 h-screen min-w-80 relative flex flex-col transition-all duration-300"
+        style={{ backgroundColor: 'var(--bg-background)' }}
+      >
         {/* Top Controls */}
         <TopControls
           currentView={currentView}
@@ -134,25 +206,6 @@ export default function HomePage() {
             )}
           </Box>
       </Box>
-
-      {/* Right: Tool Interaction */}
-      {sidebarsVisible && (
-        <div
-          className={`h-screen bg-surface border-l border-border gap-6 z-sticky flex flex-col min-w-[260px] max-w-[400px] w-[22vw] ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
-          style={{ padding: '1.5rem' }}
-        >
-          <ToolRenderer
-            selectedToolKey={selectedToolKey}
-            selectedTool={selectedTool}
-            pdfFile={pdfFile}
-            files={files}
-            downloadUrl={downloadUrl}
-            setDownloadUrl={setDownloadUrl}
-            toolParams={toolParams}
-            updateParams={updateParams}
-          />
-        </div>
-      )}
     </Group>
   );
 }