diff --git a/frontend/index.html b/frontend/index.html
index 0fc165c66..c8f825666 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,7 @@
+
void;
@@ -16,6 +19,17 @@ interface QuickAccessBarProps {
readerMode: boolean;
}
+interface ButtonConfig {
+ id: string;
+ name: string;
+ icon: React.ReactNode;
+ tooltip: string;
+ color: string;
+ isRound?: boolean;
+ size?: 'sm' | 'md' | 'lg' | 'xl';
+ onClick: () => void;
+}
+
const QuickAccessBar = ({
onToolsClick,
onReaderToggle,
@@ -26,54 +40,174 @@ const QuickAccessBar = ({
}: QuickAccessBarProps) => {
const { isRainbowMode } = useRainbowThemeContext();
const [configModalOpen, setConfigModalOpen] = useState(false);
+ const [activeButton, setActiveButton] = useState('tools');
+
+ const buttonConfigs: ButtonConfig[] = [
+ {
+ id: 'tools',
+ name: 'All Tools',
+ icon: ,
+ tooltip: 'View all available tools',
+ color: '#1E88E5',
+ size: 'lg',
+ onClick: () => {
+ setActiveButton('tools');
+ onReaderToggle();
+ onToolsClick();
+ }
+ },
+ {
+ id: 'read',
+ name: 'Read',
+ icon: ,
+ tooltip: 'Read documents',
+ color: '#4CAF50',
+ size: 'lg',
+ onClick: () => {
+ setActiveButton('read');
+ onReaderToggle();
+ }
+ },
+ {
+ id: 'sign',
+ name: 'Sign',
+ icon:
+
+ signature
+ ,
+ tooltip: 'Sign your document',
+ color: '#3BA99C',
+ size: 'lg',
+ onClick: () => setActiveButton('sign')
+ },
+ {
+ id: 'automate',
+ name: 'Automate',
+ icon: ,
+ tooltip: 'Automate workflows',
+ color: '#A576E3',
+ size: 'lg',
+ onClick: () => setActiveButton('automate')
+ },
+ {
+ id: 'files',
+ name: 'Files',
+ icon: ,
+ tooltip: 'Manage files',
+ color: '', // the round icons are blue always, this logic lives in getButtonStyle
+ isRound: true,
+ size: 'lg',
+ onClick: () => setActiveButton('files')
+ },
+ /* Access isn't going to be available yet */
+
+ /*
+ {
+ id: 'access',
+ name: 'Access',
+ icon: ,
+ tooltip: 'Manage access and permissions',
+ color: '#00BCD4',
+ isRound: true,
+ size: 'lg',
+ onClick: () => setActiveButton('access')
+ },
+ */
+ {
+ id: 'activity',
+ name: 'Activity',
+ icon:
+
+ vital_signs
+ ,
+ tooltip: 'View activity and analytics',
+ color: '',
+ isRound: true,
+ size: 'lg',
+ onClick: () => setActiveButton('activity')
+ },
+ {
+ id: 'config',
+ name: 'Config',
+ icon: ,
+ tooltip: 'Configure settings',
+ color: '#9CA3AF',
+ size: 'lg',
+ onClick: () => {
+ setConfigModalOpen(true);
+ }
+ }
+ ];
+
+ const getButtonStyle = (config: ButtonConfig) => {
+ const isActive = activeButton === config.id;
+ if (config.isRound && isActive) {
+ return {
+ backgroundColor: '#D3E7F7',
+ color: '#0A8BFF',
+ borderRadius: '50%',
+ };
+ }
+ return {
+ backgroundColor: isActive ? config.color : '#9CA3AF',
+ color: 'white',
+ border: 'none',
+ borderRadius: config.isRound ? '50%' : '8px',
+ };
+ };
+
+ const getTextStyle = (config: ButtonConfig) => {
+ const isActive = activeButton === config.id;
+ return {
+ marginTop: '12px',
+ fontSize: '12px',
+ color: isActive ? 'var(--text-primary)' : 'var(--color-gray-700)',
+ fontWeight: isActive ? 'bold' : 'normal',
+ textRendering: 'optimizeLegibility' as const,
+ fontSynthesis: 'none' as const
+ };
+ };
return (
- {/* All Tools Button */}
-
-
- {/* Reader Mode Button */}
-
-
- {/* Spacer */}
-
-
- {/* Config Modal Button (for testing) */}
-
-
setConfigModalOpen(true)}
- >
-
-
-
Config
-
+
+
+ {config.icon}
+
+
+
+ {config.name}
+
+