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 <[email protected]>

frontend/src/hooks/useSidebarNavigation.ts

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import { useToolNavigation } from './useToolNavigation';
+import { useToolManagement } from './useToolManagement';
+import { handleUnlessSpecialClick } from '../utils/clickHandlers';
+
+export interface SidebarNavigationProps {
+  /** Full URL for the navigation (for href attribute) */
+  href: string;
+  /** Click handler that maintains SPA behavior */
+  onClick: (e: React.MouseEvent) => void;
+}
+
+/**
+ * Hook that provides URL and navigation handlers for sidebar navigation buttons
+ * Supports special routes like home ('/') and specific tool routes
+ */
+export function useSidebarNavigation(): {
+  getHomeNavigation: () => SidebarNavigationProps;
+  getToolNavigation: (toolId: string) => SidebarNavigationProps | null;
+} {
+  const { getToolNavigation: getToolNavProps } = useToolNavigation();
+  const { getSelectedTool } = useToolManagement();
+
+  const defaultNavClick = useCallback((e: React.MouseEvent) => {
+    handleUnlessSpecialClick(e, () => {
+      // SPA navigation will be handled by the calling component
+    });
+  }, []);
+
+  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, defaultNavClick]);
+
+  return {
+    getHomeNavigation,
+    getToolNavigation
+  };
+}

frontend/src/hooks/useSuggestedTools.ts

@@ -1,5 +1,7 @@
 import { useMemo } from 'react';
-import { useNavigationActions, useNavigationState } from '../contexts/NavigationContext';
+import { useNavigationState } from '../contexts/NavigationContext';
+import { useToolNavigation } from './useToolNavigation';
+import { useToolManagement } from './useToolManagement';
 import { ToolId } from '../types/toolId';
 
 // Material UI Icons
@@ -13,10 +15,11 @@ export interface SuggestedTool {
   id: ToolId;
   title: string;
   icon: React.ComponentType<any>;
-  navigate: () => void;
+  href: string;
+  onClick: (e: React.MouseEvent) => void;
 }
 
-const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'navigate'>[] = [
+const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'href' | 'onClick'>[] = [
   {
     id: 'compress',
     title: 'Compress',
@@ -45,17 +48,31 @@ const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'navigate'>[] = [
 ];
 
 export function useSuggestedTools(): SuggestedTool[] {
-  const { actions } = useNavigationActions();
   const { selectedTool } = useNavigationState();
+  const { getToolNavigation } = useToolNavigation();
+  const { getSelectedTool } = useToolManagement();
 
   return useMemo(() => {
     // Filter out the current tool
     const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.id !== selectedTool);
 
-    // Add navigation function to each tool
-    return filteredTools.map(tool => ({
-      ...tool,
-      navigate: () => actions.setSelectedTool(tool.id)
-    }));
-  }, [selectedTool, actions]);
+    // Add navigation props to each tool
+    return filteredTools.map(tool => {
+      const toolRegistryEntry = getSelectedTool(tool.id);
+      if (!toolRegistryEntry) {
+        // Fallback for tools not in registry
+        return {
+          ...tool,
+          href: `/${tool.id}`,
+          onClick: (e: React.MouseEvent) => { e.preventDefault(); }
+        };
+      }
+      
+      const navProps = getToolNavigation(tool.id, toolRegistryEntry);
+      return {
+        ...tool,
+        ...navProps
+      };
+    });
+  }, [selectedTool, getToolNavigation, getSelectedTool]);
 }

frontend/src/hooks/useToolNavigation.ts

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { ToolRegistryEntry, getToolUrlPath } from '../data/toolsTaxonomy';
+import { useToolWorkflow } from '../contexts/ToolWorkflowContext';
+import { handleUnlessSpecialClick } from '../utils/clickHandlers';
+
+export interface ToolNavigationProps {
+  /** Full URL for the tool (for href attribute) */
+  href: string;
+  /** Click handler that maintains SPA behavior */
+  onClick: (e: React.MouseEvent) => void;
+}
+
+/**
+ * Hook that provides URL and navigation handlers for tools
+ * Enables right-click "Open in New Tab" while maintaining SPA behavior for regular clicks
+ */
+export function useToolNavigation(): {
+  getToolNavigation: (toolId: string, tool: ToolRegistryEntry) => ToolNavigationProps;
+} {
+  const { handleToolSelect } = useToolWorkflow();
+
+  const getToolNavigation = useCallback((toolId: string, tool: ToolRegistryEntry): ToolNavigationProps => {
+    // Generate SSR-safe relative path
+    const path = getToolUrlPath(toolId, tool);
+    const href = path; // Relative path, no window.location needed
+
+    // Click handler that maintains SPA behavior
+    const onClick = (e: React.MouseEvent) => {
+      handleUnlessSpecialClick(e, () => {
+        // Handle external links normally
+        if (tool.link) {
+          window.open(tool.link, '_blank', 'noopener,noreferrer');
+          return;
+        }
+
+        // Use SPA navigation for internal tools
+        handleToolSelect(toolId);
+      });
+    };
+
+    return { href, onClick };
+  }, [handleToolSelect]);
+
+  return { getToolNavigation };
+}