Repository: Stirling-Tools/Stirling-PDF
File: frontend/src/components/shared/AllToolsNavButton.tsx (TypeScript)

Code before:
  activeButton: string;
  setActiveButton: (id: string) => void;
}

const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, setActiveButton }) => {
  const { t } = useTranslation();
  const { handleReaderToggle, handleBackToTools, selectedToolKey, leftPanelView } = useToolWorkflow();
  const { getHomeNavigation } = useSidebarNavigation();

  const handleClick = () => {
    setActiveButton('tools');
    // Preserve existing behavior used in QuickAccessBar header
    handleReaderToggle();
    handleBackToTools();
  };

  // Do not highlight All Tools when a specific tool is open (indicator is shown)
  const isActive = activeButton === 'tools' && !selectedToolKey && leftPanelView === 'toolPicker';

  const navProps = getHomeNavigation();

  const handleNavClick = (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 use SPA navigation
    e.preventDefault();
    handleClick();
  };

  const iconNode = (
    <span className="iconContainer">
      <AppsIcon sx={{ fontSize: '2rem' }} />
    </span>
  );

  return (
    <Tooltip content={t("quickAccess.allTools", "All Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
      <div className="flex flex-col items-center gap-1 mt-4 mb-2">
        <ActionIcon
          component="a"
          href={navProps.href}
          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)',

Review comment (refactor):
This is somewhat complex logic that is being repeated several times in the app, so I think we'd be better off refactoring it into a `isSpecialClick(e)` function so that we're consistent across the application.

Maybe it could even be refactored into `handleUnlessSpecialClick(e, handleClick)` function which encapsulates the `e.preventDefault()` code as well?

Code after:
interface AllToolsNavButtonProps {
  activeButton: string;
  setActiveButton: (id: string) => void;
}

const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, setActiveButton }) => {
  const { t } = useTranslation();
  const { handleReaderToggle, handleBackToTools, selectedToolKey, leftPanelView } = useToolWorkflow();
  const { getHomeNavigation } = useSidebarNavigation();

  const handleClick = () => {
    setActiveButton('tools');
    // Preserve existing behavior used in QuickAccessBar header
    handleReaderToggle();
    handleBackToTools();
  };

  // Do not highlight All Tools when a specific tool is open (indicator is shown)
  const isActive = activeButton === 'tools' && !selectedToolKey && leftPanelView === 'toolPicker';

  const navProps = getHomeNavigation();

  const handleNavClick = (e: React.MouseEvent) => {
    handleUnlessSpecialClick(e, handleClick);
  };

  const iconNode = (
    <span className="iconContainer">
      <AppsIcon sx={{ fontSize: '2rem' }} />
    </span>
  );

  return (
    <Tooltip content={t("quickAccess.allTools", "All Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
      <div className="flex flex-col items-center gap-1 mt-4 mb-2">
        <ActionIcon
          component="a"
          href={navProps.href}
          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)',
            border: 'none',
            borderRadius: '8px',
            textDecoration: 'none'
          }}
          className={isActive ? 'activeIconScale' : ''}
        >