Mirrors/Stirling-PDF
Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2025-09-08 17:51:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Urls for tools for scrapers and open in new tab support

Browse Source
This commit is contained in:
Anthony Stirling 2025-09-03 11:54:50 +01:00
parent 1a3e8e7ecf
commit b6d8f5cece
9 changed files with 341 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/shared/AllToolsNavButton.tsx
View File

@ -1,9 +1,10 @@
import React from 'react';
import { ActionIcon } from '@mantine/core';
import { ActionIcon, Anchor } from '@mantine/core';
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';
interface AllToolsNavButtonProps {
activeButton: string;
@ -13,6 +14,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 +26,19 @@ 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) => {
// 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' }} />
@ -31,13 +46,16 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
);
return (
<Tooltip content={t("quickAccess.allTools", "All Tools")} position="right" arrow containerStyle={{ marginTop: "-1rem" }} maxWidth={200}>
<Anchor
href={navProps.href}
onClick={handleNavClick}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<div className="flex flex-col items-center gap-1 mt-4 mb-2">
<ActionIcon
size={'lg'}
variant="subtle"
onClick={handleClick}
style={{
backgroundColor: isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)',
color: isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)',
@ -52,6 +70,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, set
{t("quickAccess.allTools", "All Tools")}
</span>
</div>
</Anchor>
</Tooltip>
);
};

84
frontend/src/components/shared/QuickAccessBar.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useRef, forwardRef, useEffect } from "react";
import { ActionIcon, Stack, Divider } from "@mantine/core";
import { ActionIcon, Stack, Divider, Anchor } from "@mantine/core";
import { useTranslation } from 'react-i18next';
import LocalIcon from './LocalIcon';
import { useRainbowThemeContext } from "./RainbowThemeProvider";
@ -7,6 +7,7 @@ import AppConfigModal from './AppConfigModal';
import { useIsOverflowing } from '../../hooks/useIsOverflowing';
import { useFilesModalContext } from '../../contexts/FilesModalContext';
import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
import { useSidebarNavigation } from '../../hooks/useSidebarNavigation';
import { ButtonConfig } from '../../types/sidebar';
import './quickAccessBar/QuickAccessBar.css';
import AllToolsNavButton from './AllToolsNavButton';
@ -23,6 +24,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
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);
@ -37,6 +39,64 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
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) {
// 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();
}
config.onClick();
};
const buttonElement = (
<div className="flex flex-col items-center gap-1" style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}>
<ActionIcon
size={isActive ? (config.size || 'lg') : 'lg'}
variant="subtle"
onClick={() => handleClick()}
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>
);
// Wrap with Anchor if it has URL navigation
if (navProps) {
return (
<Anchor
key={config.id}
href={navProps.href}
onClick={handleClick}
style={{ textDecoration: 'none', color: 'inherit' }}
>
{buttonElement}
</Anchor>
);
}
return <div key={config.id}>{buttonElement}</div>;
};
const buttonConfigs: ButtonConfig[] = [
{
@ -153,27 +213,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
<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 && (

24
frontend/src/components/shared/quickAccessBar/ActiveToolButton.tsx
View File

@ -13,9 +13,10 @@
*/
import React, { useEffect, useRef, useState } from 'react';
import { ActionIcon } from '@mantine/core';
import { ActionIcon, Anchor } from '@mantine/core';
import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
import { useToolWorkflow } from '../../../contexts/ToolWorkflowContext';
import { useSidebarNavigation } from '../../../hooks/useSidebarNavigation';
import FitText from '../FitText';
import { Tooltip } from '../Tooltip';
@ -28,6 +29,7 @@ const NAV_IDS = ['read', 'sign', 'automate'];
const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, 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(
@ -141,15 +143,26 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
<div className="current-tool-content">
<div className="flex flex-col items-center gap-1">
<Tooltip content={isBackHover ? 'Back to all tools' : indicatorTool.name} position="right" arrow maxWidth={140}>
<Anchor
href={getHomeNavigation().href}
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 use SPA navigation
e.preventDefault();
setActiveButton('tools');
handleBackToTools();
}}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<ActionIcon
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)',
@ -167,6 +180,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ activeButton, setAc
)}
</span>
</ActionIcon>
</Anchor>
</Tooltip>
<FitText
as="span"

11
frontend/src/components/tools/shared/SuggestedToolsSection.tsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import { Stack, Text, Divider, Card, Group } from '@mantine/core';
import { Stack, Text, Divider, Card, Group, Anchor } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useSuggestedTools } from '../../../hooks/useSuggestedTools';
@ -21,12 +21,16 @@ export function SuggestedToolsSection(): React.ReactElement {
{suggestedTools.map((tool) => {
const IconComponent = tool.icon;
return (
<Card
<Anchor
key={tool.id}
href={tool.href}
onClick={tool.onClick}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<Card
p="sm"
withBorder
style={{ cursor: 'pointer' }}
onClick={tool.navigate}
>
<Group gap="xs">
<IconComponent fontSize="small" />
@ -35,6 +39,7 @@ export function SuggestedToolsSection(): React.ReactElement {
</Text>
</Group>
</Card>
</Anchor>
);
})}
</Stack>

64
frontend/src/components/tools/toolPicker/ToolButton.tsx
View File

@ -1,7 +1,8 @@
import React from "react";
import { Button } from "@mantine/core";
import { Button, Anchor } from "@mantine/core";
import { Tooltip } from "../../shared/Tooltip";
import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
import { useToolNavigation } from "../../../hooks/useToolNavigation";
import FitText from "../../shared/FitText";
interface ToolButtonProps {
@ -14,6 +15,8 @@ interface ToolButtonProps {
const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => {
const isUnavailable = !tool.component && !tool.link;
const { getToolNavigation } = useToolNavigation();
const handleClick = (id: string) => {
if (isUnavailable) return;
if (tool.link) {
@ -25,23 +28,15 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
onSelect(id);
};
// Get navigation props for URL support
const navProps = !isUnavailable && !tool.link ? getToolNavigation(id, tool) : null;
const tooltipContent = isUnavailable
? (<span><strong>Coming soon:</strong> {tool.description}</span>)
: tool.description;
return (
<Tooltip content={tooltipContent} position="right" arrow={true} delay={500}>
<Button
variant={isSelected ? "filled" : "subtle"}
onClick={()=> handleClick(id)}
size="sm"
radius="md"
fullWidth
justify="flex-start"
className="tool-button"
aria-disabled={isUnavailable}
styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined } }}
>
const buttonContent = (
<>
<div className="tool-button-icon" style={{ color: "var(--tools-text-and-icon-color)", marginRight: "0.5rem", transform: "scale(0.8)", transformOrigin: "center", opacity: isUnavailable ? 0.25 : 1 }}>{tool.icon}</div>
<FitText
text={tool.name}
@ -50,7 +45,48 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
as="span"
style={{ display: 'inline-block', maxWidth: '100%', opacity: isUnavailable ? 0.25 : 1 }}
/>
</>
);
const buttonElement = navProps ? (
// For tools with URLs, wrap in anchor for proper link behavior
<Anchor
href={navProps.href}
onClick={navProps.onClick}
style={{ textDecoration: 'none', color: 'inherit' }}
>
<Button
variant={isSelected ? "filled" : "subtle"}
size="sm"
radius="md"
fullWidth
justify="flex-start"
className="tool-button"
styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }}
>
{buttonContent}
</Button>
</Anchor>
) : (
// For external links and unavailable tools, use regular button
<Button
variant={isSelected ? "filled" : "subtle"}
onClick={() => handleClick(id)}
size="sm"
radius="md"
fullWidth
justify="flex-start"
className="tool-button"
aria-disabled={isUnavailable}
styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)", cursor: isUnavailable ? 'not-allowed' : undefined } }}
>
{buttonContent}
</Button>
);
return (
<Tooltip content={tooltipContent} position="right" arrow={true} delay={500}>
{buttonElement}
</Tooltip>
);
};

2
frontend/src/data/useTranslatedToolRegistry.tsx
View File

@ -355,6 +355,7 @@ export function useFlatToolRegistry(): ToolRegistry {
categoryId: ToolCategoryId.STANDARD_TOOLS,
subcategoryId: SubcategoryId.PAGE_FORMATTING,
maxFiles: -1,
urlPath: '/pdf-to-single-page',
endpoints: ["pdf-to-single-page"],
operationConfig: singleLargePageOperationConfig,
},
@ -681,6 +682,7 @@ export function useFlatToolRegistry(): ToolRegistry {
categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
subcategoryId: SubcategoryId.GENERAL,
maxFiles: -1,
urlPath: '/ocr-pdf',
operationConfig: ocrOperationConfig,
settingsComponent: OCRSettings,
},

53
frontend/src/hooks/useSidebarNavigation.ts Normal file
View File

@ -0,0 +1,53 @@
import { useCallback } from 'react';
import { useToolNavigation } from './useToolNavigation';
import { useToolManagement } from './useToolManagement';
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 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 getToolNavigation = useCallback((toolId: string): SidebarNavigationProps | null => {
const tool = getSelectedTool(toolId);
if (!tool) {
return null;
}
return getToolNavProps(toolId, tool);
}, [getToolNavProps, getSelectedTool]);
return {
getHomeNavigation,
getToolNavigation
};
}

35
frontend/src/hooks/useSuggestedTools.ts
View File

@ -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 => ({
// 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,
navigate: () => actions.setSelectedTool(tool.id)
}));
}, [selectedTool, actions]);
href: `/${tool.id}`,
onClick: (e: React.MouseEvent) => { e.preventDefault(); }
};
}
const navProps = getToolNavigation(tool.id, toolRegistryEntry);
return {
...tool,
...navProps
};
});
}, [selectedTool, getToolNavigation, getSelectedTool]);
}

52
frontend/src/hooks/useToolNavigation.ts Normal file
View File

@ -0,0 +1,52 @@
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 {
/** 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 { actions } = useNavigationActions();
const { handleToolSelect } = useToolWorkflow();
const getToolNavigation = useCallback((toolId: string, tool: ToolRegistryEntry): ToolNavigationProps => {
// Generate the full URL for href attribute
const path = getToolUrlPath(toolId, tool);
const href = `${window.location.origin}${path}`;
// 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) {
return; // Let browser handle it via href
}
// Handle external links normally
if (tool.link) {
window.open(tool.link, '_blank', 'noopener,noreferrer');
return;
}
// For regular clicks, prevent default and use SPA navigation
e.preventDefault();
handleToolSelect(toolId);
};
return { href, onClick };
}, [actions, handleToolSelect]);
return { getToolNavigation };
}