diff --git a/frontend/src/components/shared/AllToolsNavButton.tsx b/frontend/src/components/shared/AllToolsNavButton.tsx index d25893f6c..45c618db0 100644 --- a/frontend/src/components/shared/AllToolsNavButton.tsx +++ b/frontend/src/components/shared/AllToolsNavButton.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ActionIcon, Anchor } from '@mantine/core'; +import { ActionIcon } from '@mantine/core'; import { useTranslation } from 'react-i18next'; import { Tooltip } from './Tooltip'; import AppsIcon from '@mui/icons-material/AppsRounded'; @@ -54,6 +54,7 @@ const AllToolsNavButton: React.FC = ({ activeButton, set onClick={handleNavClick} size={'lg'} variant="subtle" + aria-label={t("quickAccess.allTools", "All Tools")} style={{ backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)', color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)', diff --git a/frontend/src/components/shared/QuickAccessBar.tsx b/frontend/src/components/shared/QuickAccessBar.tsx index 90533dca8..290b5387c 100644 --- a/frontend/src/components/shared/QuickAccessBar.tsx +++ b/frontend/src/components/shared/QuickAccessBar.tsx @@ -1,5 +1,5 @@ import React, { useState, useRef, forwardRef, useEffect } from "react"; -import { ActionIcon, Stack, Divider, Anchor } from "@mantine/core"; +import { ActionIcon, Stack, Divider } from "@mantine/core"; import { useTranslation } from 'react-i18next'; import LocalIcon from './LocalIcon'; import { useRainbowThemeContext } from "./RainbowThemeProvider"; @@ -70,6 +70,7 @@ const QuickAccessBar = forwardRef(({ onClick={(e: React.MouseEvent) => handleClick(e)} size={isActive ? (config.size || 'lg') : 'lg'} variant="subtle" + aria-label={config.name} style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)} className={isActive ? 'activeIconScale' : ''} data-testid={`${config.id}-button`} diff --git a/frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx b/frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx index ae2dd1c51..830b7f403 100644 --- a/frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx +++ b/frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx @@ -13,7 +13,7 @@ */ import React, { useEffect, useRef, useState } from 'react'; -import { ActionIcon, Anchor } from '@mantine/core'; +import { ActionIcon } from '@mantine/core'; import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded'; import { useToolWorkflow } from '../../../contexts/ToolWorkflowContext'; import { useSidebarNavigation } from '../../../hooks/useSidebarNavigation'; diff --git a/frontend/src/components/tools/toolPicker/ToolButton.tsx b/frontend/src/components/tools/toolPicker/ToolButton.tsx index 25e156571..164b3bc96 100644 --- a/frontend/src/components/tools/toolPicker/ToolButton.tsx +++ b/frontend/src/components/tools/toolPicker/ToolButton.tsx @@ -49,8 +49,8 @@ const ToolButton: React.FC = ({ id, tool, isSelected, onSelect ); const handleExternalClick = (e: React.MouseEvent) => { - // Check if it's a special click (middle click, ctrl+click, etc.) - if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) { + // Check if it's a special click (ctrl+click, etc.) + if (e.metaKey || e.ctrlKey || e.shiftKey) { return; // Let browser handle it via href } diff --git a/frontend/src/hooks/useSidebarNavigation.ts b/frontend/src/hooks/useSidebarNavigation.ts index 99f60ce44..995248ba5 100644 --- a/frontend/src/hooks/useSidebarNavigation.ts +++ b/frontend/src/hooks/useSidebarNavigation.ts @@ -20,31 +20,27 @@ export function useSidebarNavigation(): { const { getToolNavigation: getToolNavProps } = useToolNavigation(); const { getSelectedTool } = useToolManagement(); - const getHomeNavigation = useCallback((): SidebarNavigationProps => { - const href = window.location.origin + '/'; - - const onClick = (e: React.MouseEvent) => { - // Check if it's a special click (middle click, ctrl+click, etc.) - if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) { - return; // Let browser handle it via href - } - - // For regular clicks, prevent default and handle via SPA navigation - e.preventDefault(); - // The existing click handler will be called after this - }; - - return { href, onClick }; + const defaultNavClick = useCallback((e: React.MouseEvent) => { + if (e.metaKey || e.ctrlKey || e.shiftKey) return; + e.preventDefault(); }, []); - const getToolNavigation = useCallback((toolId: string): SidebarNavigationProps | null => { - const tool = getSelectedTool(toolId); - if (!tool) { - return null; - } + const getHomeNavigation = useCallback((): SidebarNavigationProps => { + const href = '/'; // SSR-safe relative path + return { href, onClick: defaultNavClick }; + }, [defaultNavClick]); + const getToolNavigation = useCallback((toolId: string): SidebarNavigationProps | null => { + // Handle special nav sections that aren't tools + if (toolId === 'read') return { href: '/read', onClick: defaultNavClick }; + if (toolId === 'automate') return { href: '/automate', onClick: defaultNavClick }; + + const tool = getSelectedTool(toolId); + if (!tool) return null; + + // Delegate to useToolNavigation for true tools return getToolNavProps(toolId, tool); - }, [getToolNavProps, getSelectedTool]); + }, [getToolNavProps, getSelectedTool, defaultNavClick]); return { getHomeNavigation, diff --git a/frontend/src/hooks/useToolNavigation.ts b/frontend/src/hooks/useToolNavigation.ts index dad7625aa..f17f8ac86 100644 --- a/frontend/src/hooks/useToolNavigation.ts +++ b/frontend/src/hooks/useToolNavigation.ts @@ -1,7 +1,6 @@ import { useCallback } from 'react'; import { ToolId } from '../types/toolId'; import { ToolRegistryEntry, getToolUrlPath } from '../data/toolsTaxonomy'; -import { useNavigationActions } from '../contexts/NavigationContext'; import { useToolWorkflow } from '../contexts/ToolWorkflowContext'; export interface ToolNavigationProps { @@ -18,19 +17,17 @@ export interface ToolNavigationProps { export function useToolNavigation(): { getToolNavigation: (toolId: string, tool: ToolRegistryEntry) => ToolNavigationProps; } { - const { actions } = useNavigationActions(); const { handleToolSelect } = useToolWorkflow(); const getToolNavigation = useCallback((toolId: string, tool: ToolRegistryEntry): ToolNavigationProps => { - // Generate the full URL for href attribute + // Generate SSR-safe relative path const path = getToolUrlPath(toolId, tool); - const href = `${window.location.origin}${path}`; + const href = path; // Relative path, no window.location needed // Click handler that maintains SPA behavior const onClick = (e: React.MouseEvent) => { - // Check if it's a special click (middle click, ctrl+click, etc.) - // These should use the default browser behavior to open in new tab - if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) { + // Check if it's a special click (ctrl+click, etc.) + if (e.metaKey || e.ctrlKey || e.shiftKey) { return; // Let browser handle it via href }