mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-07-27 07:35:22 +00:00
Added quick access bar consolodated sidebars
This commit is contained in:
Reece
parent
bf6a74210f
commit
ae508730c3
70
frontend/src/components/QuickAccessBar.tsx
Normal file
70
frontend/src/components/QuickAccessBar.tsx
Normal file
@ -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;
|
||||
@ -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 */}
|
||||
{sidebarsVisible && (
|
||||
{/* Quick Access Bar */}
|
||||
<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 : ''}`}
|
||||
style={{ padding: '1rem' }}
|
||||
className={`h-screen z-sticky flex flex-col min-w-[300px] max-w-[450px] w-[25vw] ${isRainbowMode ? rainbowStyles.rainbowPaper : ''}`}
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-surface)',
|
||||
borderRight: '1px solid var(--border-subtle)',
|
||||
padding: '1rem'
|
||||
}}
|
||||
>
|
||||
<ToolPicker
|
||||
selectedToolKey={selectedToolKey}
|
||||
onSelect={handleToolSelect}
|
||||
toolRegistry={toolRegistry}
|
||||
/>
|
||||
{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 */}
|
||||
<Box className="flex-1 h-screen min-w-80 relative flex flex-col transition-all duration-300 bg-background">
|
||||
{/* Main View */}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user