Urls for tools for scrapers and open in new tab support (#4364)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

---------

Co-authored-by: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>

frontend/src/components/shared/AllToolsNavButton.tsx

@@ -4,6 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { Tooltip } from './Tooltip';
 import AppsIcon from '@mui/icons-material/AppsRounded';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { useSidebarNavigation } from '../../hooks/useSidebarNavigation';
+import { handleUnlessSpecialClick } from '../../utils/clickHandlers';
 
 interface AllToolsNavButtonProps {
   activeButton: string;
@@ -13,6 +15,7 @@ interface AllToolsNavButtonProps {
 const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, setActiveButton }) => {
   const { t } = useTranslation();
   const { handleReaderToggle, handleBackToTools, selectedToolKey, leftPanelView } = useToolWorkflow();
+  const { getHomeNavigation } = useSidebarNavigation();
 
   const handleClick = () => {
     setActiveButton('tools');
@@ -24,6 +27,12 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
   // 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' }} />
@@ -31,18 +40,21 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
   );
 
   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"
-          onClick={handleClick}
+          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' : ''}
         >

frontend/src/components/shared/QuickAccessBar.tsx

@@ -6,6 +6,8 @@ import { useRainbowThemeContext } from "./RainbowThemeProvider";
 import { useIsOverflowing } from '../../hooks/useIsOverflowing';
 import { useFilesModalContext } from '../../contexts/FilesModalContext';
 import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
+import { useSidebarNavigation } from '../../hooks/useSidebarNavigation';
+import { handleUnlessSpecialClick } from '../../utils/clickHandlers';
 import { ButtonConfig } from '../../types/sidebar';
 import './quickAccessBar/QuickAccessBar.css';
 import AllToolsNavButton from './AllToolsNavButton';
@@ -21,6 +23,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const { isRainbowMode } = useRainbowThemeContext();
   const { openFilesModal, isFilesModalOpen } = useFilesModalContext();
   const { handleReaderToggle, handleBackToTools, handleToolSelect, selectedToolKey, leftPanelView, toolRegistry, readerMode, resetTool } = useToolWorkflow();
+  const { getToolNavigation } = useSidebarNavigation();
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [activeButton, setActiveButton] = useState<string>('tools');
   const scrollableRef = useRef<HTMLDivElement>(null);
@@ -35,6 +38,52 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     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" }}>
+        <ActionIcon
+          {...(navProps ? { 
+            component: "a" as const,
+            href: navProps.href,
+            onClick: (e: React.MouseEvent) => handleClick(e),
+            'aria-label': config.name
+          } : {
+            onClick: () => handleClick()
+          })}
+          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 buttonConfigs: ButtonConfig[] = [
     {
@@ -151,27 +200,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
           <Stack gap="lg" align="center">
             {buttonConfigs.slice(0, -1).map((config, index) => (
               <React.Fragment key={config.id}>
-
-                  <div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
-                    <ActionIcon
-                      size={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? (config.size || 'lg') : 'lg'}
-                      variant="subtle"
-                       onClick={() => {
-                         config.onClick();
-                       }}
-                      style={getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView)}
-                      className={isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? 'activeIconScale' : ''}
-                      data-testid={`${config.id}-button`}
-                    >
-                      <span className="iconContainer">
-                        {config.icon}
-                      </span>
-                    </ActionIcon>
-                    <span className={`button-text ${isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView) ? 'active' : 'inactive'}`}>
-                      {config.name}
-                    </span>
-                  </div>
-
+                {renderNavButton(config, index)}
 
                 {/* Add divider after Automate button (index 1) and Files button (index 2) */}
                 {index === 1 && (

frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx

@@ -16,6 +16,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import { ActionIcon } from '@mantine/core';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useToolWorkflow } from '../../../contexts/ToolWorkflowContext';
+import { useSidebarNavigation } from '../../../hooks/useSidebarNavigation';
+import { handleUnlessSpecialClick } from '../../../utils/clickHandlers';
 import FitText from '../FitText';
 import { Tooltip } from '../Tooltip';
 
@@ -28,6 +30,7 @@ const NAV_IDS = ['read', 'sign', 'automate'];
 
 const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton }) => {
   const { selectedTool, selectedToolKey, leftPanelView, handleBackToTools } = useToolWorkflow();
+  const { getHomeNavigation } = useSidebarNavigation();
 
   // Determine if the indicator should be visible (do not require selectedTool to be resolved yet)
   const indicatorShouldShow = Boolean(
@@ -135,21 +138,26 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton })
             <div className="flex flex-col items-center gap-1">
               <Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} position="right" arrow maxWidth={140}>
                 <ActionIcon
+                  component="a"
+                  href={getHomeNavigation().href}
+                  onClick={(e: React.MouseEvent) => {
+                    handleUnlessSpecialClick(e, () => {
+                      setActiveButton('tools');
+                      handleBackToTools();
+                    });
+                  }}
                   size={'xl'}
                   variant="subtle"
                   onMouseEnter={() => setIsBackHover(true)}
                   onMouseLeave={() => setIsBackHover(false)}
-                  onClick={() => {
-                    setActiveButton('tools');
-                    handleBackToTools();
-                  }}
                   aria-label={isBackHover ? 'Back to all tools' : indicatorTool.name}
                   style={{
                     backgroundColor: isBackHover ? 'var(--color-gray-300)' : 'var(--icon-tools-bg)',
                     color: isBackHover ? '#fff' : 'var(--icon-tools-color)',
                     border: 'none',
                     borderRadius: '8px',
-                    cursor: 'pointer'
+                    cursor: 'pointer',
+                    textDecoration: 'none'
                   }}
                 >
                   <span className="iconContainer">