322 lines
11 KiB
TypeScript
322 lines
11 KiB
TypeScript
import React, { useState, useRef, forwardRef, useEffect } from "react";
|
|
import { ActionIcon, Stack, Divider, Menu } from "@mantine/core";
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import LocalIcon from '@app/components/shared/LocalIcon';
|
|
import { useRainbowThemeContext } from "@app/components/shared/RainbowThemeProvider";
|
|
import { useIsOverflowing } from '@app/hooks/useIsOverflowing';
|
|
import { useFilesModalContext } from '@app/contexts/FilesModalContext';
|
|
import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
|
|
import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
|
|
import { handleUnlessSpecialClick } from '@app/utils/clickHandlers';
|
|
import { ButtonConfig } from '@app/types/sidebar';
|
|
import '@app/components/shared/quickAccessBar/QuickAccessBar.css';
|
|
import AllToolsNavButton from '@app/components/shared/AllToolsNavButton';
|
|
import ActiveToolButton from "@app/components/shared/quickAccessBar/ActiveToolButton";
|
|
import AppConfigModal from '@app/components/shared/AppConfigModal';
|
|
import { useAppConfig } from '@app/contexts/AppConfigContext';
|
|
import { useOnboarding } from '@app/contexts/OnboardingContext';
|
|
import {
|
|
isNavButtonActive,
|
|
getNavButtonStyle,
|
|
getActiveNavButton,
|
|
} from '@app/components/shared/quickAccessBar/QuickAccessBar';
|
|
|
|
const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const { isRainbowMode } = useRainbowThemeContext();
|
|
const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
|
|
const { handleReaderToggle, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
|
|
const { getToolNavigation } = useSidebarNavigation();
|
|
const { config } = useAppConfig();
|
|
const { startTour } = useOnboarding();
|
|
const [configModalOpen, setConfigModalOpen] = useState(false);
|
|
const [activeButton, setActiveButton] = useState<string>('tools');
|
|
const scrollableRef = useRef<HTMLDivElement>(null);
|
|
const isOverflow = useIsOverflowing(scrollableRef);
|
|
|
|
// Open modal if URL is at /settings/*
|
|
useEffect(() => {
|
|
const isSettings = location.pathname.startsWith('/settings');
|
|
setConfigModalOpen(isSettings);
|
|
}, [location.pathname]);
|
|
|
|
useEffect(() => {
|
|
const next = getActiveNavButton(selectedToolKey, readerMode);
|
|
setActiveButton(next);
|
|
}, [leftPanelView, selectedToolKey, toolRegistry, readerMode]);
|
|
|
|
const handleFilesButtonClick = () => {
|
|
openFilesModal();
|
|
};
|
|
|
|
// Helper function to render navigation buttons with URL support
|
|
const renderNavButton = (config: ButtonConfig, index: number) => {
|
|
const isActive = isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView);
|
|
|
|
// Check if this button has URL navigation support
|
|
const navProps = config.type === 'navigation' && (config.id === 'read' || config.id === 'automate')
|
|
? getToolNavigation(config.id)
|
|
: null;
|
|
|
|
const handleClick = (e?: React.MouseEvent) => {
|
|
if (navProps && e) {
|
|
handleUnlessSpecialClick(e, config.onClick);
|
|
} else {
|
|
config.onClick();
|
|
}
|
|
};
|
|
|
|
// Render navigation button with conditional URL support
|
|
return (
|
|
<div
|
|
key={config.id}
|
|
className="flex flex-col items-center gap-1"
|
|
style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}
|
|
data-tour={`${config.id}-button`}
|
|
>
|
|
<ActionIcon
|
|
{...(navProps ? {
|
|
component: "a" as const,
|
|
href: navProps.href,
|
|
onClick: (e: React.MouseEvent) => handleClick(e),
|
|
'aria-label': config.name
|
|
} : {
|
|
onClick: () => handleClick(),
|
|
'aria-label': config.name
|
|
})}
|
|
size={isActive ? (config.size || 'lg') : 'lg'}
|
|
variant="subtle"
|
|
style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
|
|
className={isActive ? 'activeIconScale' : ''}
|
|
data-testid={`${config.id}-button`}
|
|
>
|
|
<span className="iconContainer">
|
|
{config.icon}
|
|
</span>
|
|
</ActionIcon>
|
|
<span className={`button-text ${isActive ? 'active' : 'inactive'}`}>
|
|
{config.name}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const mainButtons: ButtonConfig[] = [
|
|
{
|
|
id: 'read',
|
|
name: t("quickAccess.read", "Read"),
|
|
icon: <LocalIcon icon="menu-book-rounded" width="1.5rem" height="1.5rem" />,
|
|
size: 'lg',
|
|
isRound: false,
|
|
type: 'navigation',
|
|
onClick: () => {
|
|
setActiveButton('read');
|
|
handleReaderToggle();
|
|
}
|
|
},
|
|
// {
|
|
// id: 'sign',
|
|
// name: t("quickAccess.sign", "Sign"),
|
|
// icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />,
|
|
// size: 'lg',
|
|
// isRound: false,
|
|
// type: 'navigation',
|
|
// onClick: () => {
|
|
// setActiveButton('sign');
|
|
// handleToolSelect('sign');
|
|
// }
|
|
// },
|
|
{
|
|
id: 'automate',
|
|
name: t("quickAccess.automate", "Automate"),
|
|
icon: <LocalIcon icon="automation-outline" width="1.6rem" height="1.6rem" />,
|
|
size: 'lg',
|
|
isRound: false,
|
|
type: 'navigation',
|
|
onClick: () => {
|
|
setActiveButton('automate');
|
|
// If already on automate tool, reset it directly
|
|
if (selectedToolKey === 'automate') {
|
|
resetTool('automate');
|
|
} else {
|
|
handleToolSelect('automate');
|
|
}
|
|
}
|
|
},
|
|
];
|
|
|
|
const middleButtons: ButtonConfig[] = [
|
|
{
|
|
id: 'files',
|
|
name: t("quickAccess.files", "Files"),
|
|
icon: <LocalIcon icon="folder-rounded" width="1.6rem" height="1.6rem" />,
|
|
isRound: true,
|
|
size: 'lg',
|
|
type: 'modal',
|
|
onClick: handleFilesButtonClick
|
|
},
|
|
//TODO: Activity
|
|
//{
|
|
// id: 'activity',
|
|
// name: t("quickAccess.activity", "Activity"),
|
|
// icon: <LocalIcon icon="vital-signs-rounded" width="1.25rem" height="1.25rem" />,
|
|
// isRound: true,
|
|
// size: 'lg',
|
|
// type: 'navigation',
|
|
// onClick: () => setActiveButton('activity')
|
|
//},
|
|
];
|
|
|
|
const bottomButtons: ButtonConfig[] = [
|
|
{
|
|
id: 'config',
|
|
name: config?.enableLogin ? t("quickAccess.account", "Account") : t("quickAccess.config", "Config"),
|
|
icon: config?.enableLogin ? <LocalIcon icon="person-rounded" width="1.25rem" height="1.25rem" /> : <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
|
|
size: 'lg',
|
|
type: 'modal',
|
|
onClick: () => {
|
|
navigate('/settings/overview');
|
|
setConfigModalOpen(true);
|
|
}
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
data-sidebar="quick-access"
|
|
className={`h-screen flex flex-col w-20 quick-access-bar-main ${isRainbowMode ? 'rainbow-mode' : ''}`}
|
|
style={{
|
|
borderRight: '1px solid var(--border-default)'
|
|
}}
|
|
>
|
|
{/* Fixed header outside scrollable area */}
|
|
<div className="quick-access-header">
|
|
<ActiveToolButton activeButton={activeButton} setActiveButton={setActiveButton} />
|
|
<AllToolsNavButton activeButton={activeButton} setActiveButton={setActiveButton} />
|
|
|
|
</div>
|
|
|
|
{/* Conditional divider when overflowing */}
|
|
{isOverflow && (
|
|
<Divider
|
|
size="xs"
|
|
className="overflow-divider"
|
|
/>
|
|
)}
|
|
|
|
{/* Scrollable content area */}
|
|
<div
|
|
ref={scrollableRef}
|
|
className="quick-access-bar flex-1"
|
|
onWheel={(e) => {
|
|
// Prevent the wheel event from bubbling up to parent containers
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<div className="scrollable-content">
|
|
{/* Main navigation section */}
|
|
<Stack gap="lg" align="center">
|
|
{mainButtons.map((config, index) => (
|
|
<React.Fragment key={config.id}>
|
|
{renderNavButton(config, index)}
|
|
</React.Fragment>
|
|
))}
|
|
</Stack>
|
|
|
|
{/* Divider after main buttons */}
|
|
<Divider
|
|
size="xs"
|
|
className="content-divider"
|
|
/>
|
|
|
|
{/* Middle section */}
|
|
<Stack gap="lg" align="center">
|
|
{middleButtons.map((config, index) => (
|
|
<React.Fragment key={config.id}>
|
|
{renderNavButton(config, index)}
|
|
</React.Fragment>
|
|
))}
|
|
</Stack>
|
|
|
|
{/* Spacer to push bottom buttons to bottom */}
|
|
<div className="spacer" />
|
|
|
|
{/* Bottom section */}
|
|
<Stack gap="lg" align="center">
|
|
{/* Help button with menu */}
|
|
<div
|
|
className="flex flex-col items-center gap-1"
|
|
data-tour="help-button"
|
|
>
|
|
<Menu position="right" offset={10}>
|
|
<Menu.Target>
|
|
<ActionIcon
|
|
size="lg"
|
|
variant="subtle"
|
|
aria-label={t("quickAccess.help", "Help")}
|
|
data-testid="help-button"
|
|
>
|
|
<span className="iconContainer">
|
|
<LocalIcon icon="help-rounded" width="1.5rem" height="1.5rem" />
|
|
</span>
|
|
</ActionIcon>
|
|
</Menu.Target>
|
|
<Menu.Dropdown>
|
|
<Menu.Item
|
|
leftSection={<LocalIcon icon="view-carousel-rounded" width="1.25rem" height="1.25rem" />}
|
|
onClick={() => startTour('tools')}
|
|
>
|
|
<div>
|
|
<div style={{ fontWeight: 500 }}>
|
|
{t("quickAccess.helpMenu.toolsTour", "Tools Tour")}
|
|
</div>
|
|
<div style={{ fontSize: '0.875rem', opacity: 0.7 }}>
|
|
{t("quickAccess.helpMenu.toolsTourDesc", "Learn what the tools can do")}
|
|
</div>
|
|
</div>
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
leftSection={<LocalIcon icon="admin-panel-settings-rounded" width="1.25rem" height="1.25rem" />}
|
|
onClick={() => startTour('admin')}
|
|
>
|
|
<div>
|
|
<div style={{ fontWeight: 500 }}>
|
|
{t("quickAccess.helpMenu.adminTour", "Admin Tour")}
|
|
</div>
|
|
<div style={{ fontSize: '0.875rem', opacity: 0.7 }}>
|
|
{t("quickAccess.helpMenu.adminTourDesc", "Explore admin settings & features")}
|
|
</div>
|
|
</div>
|
|
</Menu.Item>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
<span className="button-text inactive">
|
|
{t("quickAccess.help", "Help")}
|
|
</span>
|
|
</div>
|
|
|
|
{bottomButtons.map((config, index) => (
|
|
<React.Fragment key={config.id}>
|
|
{renderNavButton(config, index)}
|
|
</React.Fragment>
|
|
))}
|
|
</Stack>
|
|
</div>
|
|
</div>
|
|
|
|
<AppConfigModal
|
|
opened={configModalOpen}
|
|
onClose={() => setConfigModalOpen(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
QuickAccessBar.displayName = 'QuickAccessBar';
|
|
|
|
export default QuickAccessBar;
|