saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-26 06:09:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

icons!

Browse Source
This commit is contained in:
Anthony Stirling 2025-08-25 15:01:09 +01:00
parent c02111fba6
commit c8b86ed2cd
12 changed files with 114 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/shared/LandingPage.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { Container, Text, Button, Checkbox, Group, useMantineColorScheme } from '@mantine/core'; import { Container, Text, Button, Checkbox, Group, useMantineColorScheme } from '@mantine/core';
import { Dropzone } from '@mantine/dropzone'; import { Dropzone } from '@mantine/dropzone';
import AddIcon from '@mui/icons-material/Add'; import LocalIcon from './LocalIcon';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useFileHandler } from '../../hooks/useFileHandler'; import { useFileHandler } from '../../hooks/useFileHandler';
import { useFilesModalContext } from '../../contexts/FilesModalContext'; import { useFilesModalContext } from '../../contexts/FilesModalContext';
@ -138,7 +138,7 @@ const LandingPage = () => {
onClick={handleOpenFilesModal} onClick={handleOpenFilesModal}
onMouseEnter={() => setIsUploadHover(false)} onMouseEnter={() => setIsUploadHover(false)}
> >
<AddIcon className="text-[var(--accent-interactive)]" /> <LocalIcon icon="add" width="1.5rem" height="1.5rem" className="text-[var(--accent-interactive)]" />
{!isUploadHover && ( {!isUploadHover && (
<span> <span>
{t('landing.addFiles', 'Add Files')} {t('landing.addFiles', 'Add Files')}
@ -165,7 +165,7 @@ const LandingPage = () => {
onClick={handleNativeUploadClick} onClick={handleNativeUploadClick}
onMouseEnter={() => setIsUploadHover(true)} onMouseEnter={() => setIsUploadHover(true)}
> >
<span className="material-symbols-rounded" style={{ fontSize: '1.25rem', color: 'var(--accent-interactive)' }}>upload</span> <LocalIcon icon="upload" width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
{isUploadHover && ( {isUploadHover && (
<span style={{ marginLeft: '.5rem' }}> <span style={{ marginLeft: '.5rem' }}>
{t('landing.uploadFromComputer', 'Upload from computer')} {t('landing.uploadFromComputer', 'Upload from computer')}

6
frontend/src/components/shared/LanguageSelector.tsx
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Menu, Button, ScrollArea, ActionIcon } from '@mantine/core'; import { Menu, Button, ScrollArea, ActionIcon } from '@mantine/core';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { supportedLanguages } from '../../i18n'; import { supportedLanguages } from '../../i18n';
import LanguageIcon from '@mui/icons-material/Language'; import LocalIcon from './LocalIcon';
import styles from './LanguageSelector.module.css'; import styles from './LanguageSelector.module.css';
interface LanguageSelectorProps { interface LanguageSelectorProps {
@ -105,13 +105,13 @@ const LanguageSelector = ({ position = 'bottom-start', offset = 8, compact = fal
} }
}} }}
> >
<span className="material-symbols-rounded">language</span> <LocalIcon icon="language" width="1.5rem" height="1.5rem" />
</ActionIcon> </ActionIcon>
) : ( ) : (
<Button <Button
variant="subtle" variant="subtle"
size="sm" size="sm"
leftSection={<LanguageIcon style={{ fontSize: 18 }} />} leftSection={<LocalIcon icon="language" width="1.5rem" height="1.5rem" />}
styles={{ styles={{
root: { root: {
border: 'none', border: 'none',

39
frontend/src/components/shared/LocalIcon.tsx
View File

@ -1,19 +1,26 @@
import React from 'react'; import React from 'react';
import { addCollection, Icon } from '@iconify/react'; import { addCollection, Icon } from '@iconify/react';
// Try to import the icon set - it will be auto-generated // Try to load icons at import time
let iconSet: any = null;
let iconsLoaded = false; let iconsLoaded = false;
let localIconCount = 0;
try { // Use a simple try/catch for the icon loading
iconSet = require('../../assets/material-symbols-icons.json'); (async () => {
if (!iconsLoaded && iconSet) { try {
addCollection(iconSet); const iconModule = await import('../../assets/material-symbols-icons.json');
iconsLoaded = true; const iconSet = iconModule.default || iconModule;
if (iconSet) {
addCollection(iconSet);
iconsLoaded = true;
localIconCount = Object.keys(iconSet.icons || {}).length;
console.info(`✅ Local icons loaded: ${localIconCount} icons (${Math.round(JSON.stringify(iconSet).length / 1024)}KB)`);
}
} catch (error) {
// Silently fail - icons will fallback to CDN
console.info('ℹ️ Local icons not available - using CDN fallback');
} }
} catch (error) { })();
console.warn('Local icon set not found. Run `npm run generate-icons` to create it.');
}
interface LocalIconProps { interface LocalIconProps {
icon: string; icon: string;
@ -33,11 +40,17 @@ export const LocalIcon: React.FC<LocalIconProps> = ({ icon, ...props }) => {
? icon ? icon
: `material-symbols:${icon}`; : `material-symbols:${icon}`;
// Fallback if icons haven't been loaded yet // Development logging (only in dev mode)
if (!iconsLoaded || !iconSet) { if (process.env.NODE_ENV === 'development') {
return <span style={{ display: 'inline-block', width: props.width || 24, height: props.height || 24 }} />; const logKey = `icon-${iconName}`;
if (!sessionStorage.getItem(logKey)) {
const source = iconsLoaded ? 'local' : 'CDN';
console.debug(`🎯 Icon: ${iconName} (${source})`);
sessionStorage.setItem(logKey, 'logged');
}
} }
// Always render the icon - Iconify will use local if available, CDN if not
return <Icon icon={iconName} {...props} />; return <Icon icon={iconName} {...props} />;
}; };

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

@ -2,9 +2,6 @@ import React, { useState, useRef, forwardRef, useEffect } from "react";
import { ActionIcon, Stack, Divider } from "@mantine/core"; import { ActionIcon, Stack, Divider } from "@mantine/core";
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import LocalIcon from './LocalIcon'; import LocalIcon from './LocalIcon';
import MenuBookIcon from "@mui/icons-material/MenuBookRounded";
import SettingsIcon from "@mui/icons-material/SettingsRounded";
import FolderIcon from "@mui/icons-material/FolderRounded";
import { useRainbowThemeContext } from "./RainbowThemeProvider"; import { useRainbowThemeContext } from "./RainbowThemeProvider";
import AppConfigModal from './AppConfigModal'; import AppConfigModal from './AppConfigModal';
import { useIsOverflowing } from '../../hooks/useIsOverflowing'; import { useIsOverflowing } from '../../hooks/useIsOverflowing';
@ -45,7 +42,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
{ {
id: 'read', id: 'read',
name: t("quickAccess.read", "Read"), name: t("quickAccess.read", "Read"),
icon: <MenuBookIcon sx={{ fontSize: "1.5rem" }} />, icon: <LocalIcon icon="menu-book-rounded" width="1.5rem" height="1.5rem" />,
size: 'lg', size: 'lg',
isRound: false, isRound: false,
type: 'navigation', type: 'navigation',
@ -58,7 +55,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
{ {
id: 'sign', id: 'sign',
name: t("quickAccess.sign", "Sign"), name: t("quickAccess.sign", "Sign"),
icon: <LocalIcon icon="signature-rounded" width="20" height="20" />, icon: <LocalIcon icon="signature-rounded" width="1.25rem" height="1.25rem" />,
size: 'lg', size: 'lg',
isRound: false, isRound: false,
type: 'navigation', type: 'navigation',
@ -70,7 +67,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
{ {
id: 'automate', id: 'automate',
name: t("quickAccess.automate", "Automate"), name: t("quickAccess.automate", "Automate"),
icon: <LocalIcon icon="automation" width="20" height="20" />, icon: <LocalIcon icon="automation-outline" width="1.25rem" height="1.25rem" />,
size: 'lg', size: 'lg',
isRound: false, isRound: false,
type: 'navigation', type: 'navigation',
@ -82,7 +79,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
{ {
id: 'files', id: 'files',
name: t("quickAccess.files", "Files"), name: t("quickAccess.files", "Files"),
icon: <FolderIcon sx={{ fontSize: "1.25rem" }} />, icon: <LocalIcon icon="folder-rounded" width="1.25rem" height="1.25rem" />,
isRound: true, isRound: true,
size: 'lg', size: 'lg',
type: 'modal', type: 'modal',
@ -91,7 +88,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
{ {
id: 'activity', id: 'activity',
name: t("quickAccess.activity", "Activity"), name: t("quickAccess.activity", "Activity"),
icon: <LocalIcon icon="vital-signs-rounded" width="20" height="20" />, icon: <LocalIcon icon="vital-signs-rounded" width="1.25rem" height="1.25rem" />,
isRound: true, isRound: true,
size: 'lg', size: 'lg',
type: 'navigation', type: 'navigation',
@ -100,7 +97,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>(({
{ {
id: 'config', id: 'config',
name: t("quickAccess.config", "Config"), name: t("quickAccess.config", "Config"),
icon: <SettingsIcon sx={{ fontSize: "1rem" }} />, icon: <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
size: 'lg', size: 'lg',
type: 'modal', type: 'modal',
onClick: () => { onClick: () => {

24
frontend/src/components/shared/RightRail.tsx
View File

@ -1,6 +1,6 @@
import React, { useCallback, useState, useEffect, useMemo } from 'react'; import React, { useCallback, useState, useEffect, useMemo } from 'react';
import { ActionIcon, Divider, Popover } from '@mantine/core'; import { ActionIcon, Divider, Popover } from '@mantine/core';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded'; import LocalIcon from './LocalIcon';
import './rightRail/RightRail.css'; import './rightRail/RightRail.css';
import { useToolWorkflow } from '../../contexts/ToolWorkflowContext'; import { useToolWorkflow } from '../../contexts/ToolWorkflowContext';
import { useRightRail } from '../../contexts/RightRailContext'; import { useRightRail } from '../../contexts/RightRailContext';
@ -234,9 +234,7 @@ export default function RightRail() {
onClick={handleSelectAll} onClick={handleSelectAll}
disabled={currentView === 'viewer' || totalItems === 0 || selectedCount === totalItems} disabled={currentView === 'viewer' || totalItems === 0 || selectedCount === totalItems}
> >
<span className="material-symbols-rounded"> <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />
select_all
</span>
</ActionIcon> </ActionIcon>
</div> </div>
</Tooltip> </Tooltip>
@ -251,9 +249,7 @@ export default function RightRail() {
onClick={handleDeselectAll} onClick={handleDeselectAll}
disabled={currentView === 'viewer' || selectedCount === 0} disabled={currentView === 'viewer' || selectedCount === 0}
> >
<span className="material-symbols-rounded"> <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />
crop_square
</span>
</ActionIcon> </ActionIcon>
</div> </div>
</Tooltip> </Tooltip>
@ -273,9 +269,7 @@ export default function RightRail() {
disabled={!pageControlsVisible || totalItems === 0} disabled={!pageControlsVisible || totalItems === 0}
aria-label={typeof t === 'function' ? t('rightRail.selectByNumber', 'Select by Page Numbers') : 'Select by Page Numbers'} aria-label={typeof t === 'function' ? t('rightRail.selectByNumber', 'Select by Page Numbers') : 'Select by Page Numbers'}
> >
<span className="material-symbols-rounded"> <LocalIcon icon="pin-end" width="1.5rem" height="1.5rem" />
pin_end
</span>
</ActionIcon> </ActionIcon>
</div> </div>
</Popover.Target> </Popover.Target>
@ -309,7 +303,7 @@ export default function RightRail() {
disabled={!pageControlsVisible || (Array.isArray(selectedPageNumbers) ? selectedPageNumbers.length === 0 : true)} disabled={!pageControlsVisible || (Array.isArray(selectedPageNumbers) ? selectedPageNumbers.length === 0 : true)}
aria-label={typeof t === 'function' ? t('rightRail.deleteSelected', 'Delete Selected Pages') : 'Delete Selected Pages'} aria-label={typeof t === 'function' ? t('rightRail.deleteSelected', 'Delete Selected Pages') : 'Delete Selected Pages'}
> >
<span className="material-symbols-rounded">delete</span> <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />
</ActionIcon> </ActionIcon>
</div> </div>
</div> </div>
@ -331,7 +325,7 @@ export default function RightRail() {
(currentView === 'pageEditor' && (activeFiles.length === 0 || !pageEditorFunctions?.closePdf)) (currentView === 'pageEditor' && (activeFiles.length === 0 || !pageEditorFunctions?.closePdf))
} }
> >
<CloseRoundedIcon /> <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />
</ActionIcon> </ActionIcon>
</div> </div>
</Tooltip> </Tooltip>
@ -349,7 +343,7 @@ export default function RightRail() {
className="right-rail-icon" className="right-rail-icon"
onClick={toggleTheme} onClick={toggleTheme}
> >
<span className="material-symbols-rounded">contrast</span> <LocalIcon icon="contrast" width="1.5rem" height="1.5rem" />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
@ -368,9 +362,7 @@ export default function RightRail() {
onClick={handleExportAll} onClick={handleExportAll}
disabled={currentView === 'viewer' || totalItems === 0} disabled={currentView === 'viewer' || totalItems === 0}
> >
<span className="material-symbols-rounded"> <LocalIcon icon="download" width="1.5rem" height="1.5rem" />
download
</span>
</ActionIcon> </ActionIcon>
</div> </div>
</Tooltip> </Tooltip>

2
frontend/src/components/shared/TextInput.tsx
View File

@ -97,7 +97,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }} style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
aria-label="Clear input" aria-label="Clear input"
> >
<LocalIcon icon="close-rounded" width="20" height="20" /> <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
</button> </button>
)} )}
</div> </div>

2
frontend/src/components/shared/Tooltip.tsx
View File

@ -172,7 +172,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
}} }}
title="Close tooltip" title="Close tooltip"
> >
<LocalIcon icon="close-rounded" width="20" height="20" /> <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
</button> </button>
)} )}
{arrow && getArrowClass() && ( {arrow && getArrowClass() && (

2
frontend/src/components/tools/shared/ToolStep.tsx
View File

@ -55,7 +55,7 @@ const renderTooltipTitle = (
<Text fw={500} size="lg"> <Text fw={500} size="lg">
{title} {title}
</Text> </Text>
<LocalIcon icon="gpp-maybe-rounded" width="20" height="20" style={{ color: 'var(--icon-files-color)' }} /> <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
</Flex> </Flex>
</Tooltip> </Tooltip>
); );

2
frontend/src/components/tools/shared/ToolWorkflowTitle.tsx
View File

@ -30,7 +30,7 @@ export function ToolWorkflowTitle({ title, tooltip }: ToolWorkflowTitleProps) {
<Text fw={500} size="xl" p="md"> <Text fw={500} size="xl" p="md">
{title} {title}
</Text> </Text>
<LocalIcon icon="gpp-maybe-rounded" width="20" height="20" style={{ color: 'var(--icon-files-color)' }} /> <LocalIcon icon="gpp-maybe-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
</Flex> </Flex>
</Tooltip> </Tooltip>
</Flex> </Flex>

2
frontend/src/components/tools/toolPicker/ToolSearch.tsx
View File

@ -75,7 +75,7 @@ const ToolSearch = ({
value={value} value={value}
onChange={handleSearchChange} onChange={handleSearchChange}
placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")} placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="24" height="24" />} icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
autoComplete="off" autoComplete="off"
/> />

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

@ -51,7 +51,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Signing // Signing
"certSign": { "certSign": {
icon: <LocalIcon icon="workspace-premium-rounded" width="24" height="24" />, icon: <LocalIcon icon="workspace-premium-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.certSign.title", "Sign with Certificate"), name: t("home.certSign.title", "Sign with Certificate"),
component: null, component: null,
view: "sign", view: "sign",
@ -60,7 +60,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.SIGNING subcategoryId: SubcategoryId.SIGNING
}, },
"sign": { "sign": {
icon: <LocalIcon icon="signature-rounded" width="24" height="24" />, icon: <LocalIcon icon="signature-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.sign.title", "Sign"), name: t("home.sign.title", "Sign"),
component: null, component: null,
view: "sign", view: "sign",
@ -73,7 +73,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Document Security // Document Security
"addPassword": { "addPassword": {
icon: <LocalIcon icon="password-rounded" width="24" height="24" />, icon: <LocalIcon icon="password-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.addPassword.title", "Add Password"), name: t("home.addPassword.title", "Add Password"),
component: AddPassword, component: AddPassword,
view: "security", view: "security",
@ -86,7 +86,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: AddPasswordSettings settingsComponent: AddPasswordSettings
}, },
"watermark": { "watermark": {
icon: <LocalIcon icon="branding-watermark-outline-rounded" width="24" height="24" />, icon: <LocalIcon icon="branding-watermark-outline-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.watermark.title", "Add Watermark"), name: t("home.watermark.title", "Add Watermark"),
component: AddWatermark, component: AddWatermark,
view: "format", view: "format",
@ -99,7 +99,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: AddWatermarkSingleStepSettings settingsComponent: AddWatermarkSingleStepSettings
}, },
"add-stamp": { "add-stamp": {
icon: <LocalIcon icon="approval-rounded" width="24" height="24" />, icon: <LocalIcon icon="approval-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.AddStampRequest.title", "Add Stamp to PDF"), name: t("home.AddStampRequest.title", "Add Stamp to PDF"),
component: null, component: null,
view: "format", view: "format",
@ -108,7 +108,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.DOCUMENT_SECURITY subcategoryId: SubcategoryId.DOCUMENT_SECURITY
}, },
"sanitize": { "sanitize": {
icon: <LocalIcon icon="cleaning-services-outline-rounded" width="24" height="24" />, icon: <LocalIcon icon="cleaning-services-outline-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.sanitize.title", "Sanitize"), name: t("home.sanitize.title", "Sanitize"),
component: Sanitize, component: Sanitize,
view: "security", view: "security",
@ -121,7 +121,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: SanitizeSettings settingsComponent: SanitizeSettings
}, },
"flatten": { "flatten": {
icon: <LocalIcon icon="layers-clear-rounded" width="24" height="24" />, icon: <LocalIcon icon="layers-clear-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.flatten.title", "Flatten"), name: t("home.flatten.title", "Flatten"),
component: null, component: null,
view: "format", view: "format",
@ -130,7 +130,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.DOCUMENT_SECURITY subcategoryId: SubcategoryId.DOCUMENT_SECURITY
}, },
"unlock-pdf-forms": { "unlock-pdf-forms": {
icon: <LocalIcon icon="preview-off-rounded" width="24" height="24" />, icon: <LocalIcon icon="preview-off-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.unlockPDFForms.title", "Unlock PDF Forms"), name: t("home.unlockPDFForms.title", "Unlock PDF Forms"),
component: UnlockPdfForms, component: UnlockPdfForms,
view: "security", view: "security",
@ -143,7 +143,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: UnlockPdfFormsSettings settingsComponent: UnlockPdfFormsSettings
}, },
"manage-certificates": { "manage-certificates": {
icon: <LocalIcon icon="license-rounded" width="24" height="24" />, icon: <LocalIcon icon="license-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.manageCertificates.title", "Manage Certificates"), name: t("home.manageCertificates.title", "Manage Certificates"),
component: null, component: null,
view: "security", view: "security",
@ -152,7 +152,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.DOCUMENT_SECURITY subcategoryId: SubcategoryId.DOCUMENT_SECURITY
}, },
"change-permissions": { "change-permissions": {
icon: <LocalIcon icon="lock-outline" width="24" height="24" />, icon: <LocalIcon icon="lock-outline" width="1.5rem" height="1.5rem" />,
name: t("home.changePermissions.title", "Change Permissions"), name: t("home.changePermissions.title", "Change Permissions"),
component: ChangePermissions, component: ChangePermissions,
view: "security", view: "security",
@ -167,7 +167,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Verification // Verification
"get-all-info-on-pdf": { "get-all-info-on-pdf": {
icon: <LocalIcon icon="fact-check-rounded" width="24" height="24" />, icon: <LocalIcon icon="fact-check-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.getPdfInfo.title", "Get ALL Info on PDF"), name: t("home.getPdfInfo.title", "Get ALL Info on PDF"),
component: null, component: null,
view: "extract", view: "extract",
@ -176,7 +176,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.VERIFICATION subcategoryId: SubcategoryId.VERIFICATION
}, },
"validate-pdf-signature": { "validate-pdf-signature": {
icon: <LocalIcon icon="verified-rounded" width="24" height="24" />, icon: <LocalIcon icon="verified-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.validateSignature.title", "Validate PDF Signature"), name: t("home.validateSignature.title", "Validate PDF Signature"),
component: null, component: null,
view: "security", view: "security",
@ -189,7 +189,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Document Review // Document Review
"read": { "read": {
icon: <LocalIcon icon="article-rounded" width="24" height="24" />, icon: <LocalIcon icon="article-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.read.title", "Read"), name: t("home.read.title", "Read"),
component: null, component: null,
view: "view", view: "view",
@ -198,7 +198,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.DOCUMENT_REVIEW subcategoryId: SubcategoryId.DOCUMENT_REVIEW
}, },
"change-metadata": { "change-metadata": {
icon: <LocalIcon icon="assignment-rounded" width="24" height="24" />, icon: <LocalIcon icon="assignment-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.changeMetadata.title", "Change Metadata"), name: t("home.changeMetadata.title", "Change Metadata"),
component: null, component: null,
view: "format", view: "format",
@ -209,7 +209,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Page Formatting // Page Formatting
"cropPdf": { "cropPdf": {
icon: <LocalIcon icon="crop-rounded" width="24" height="24" />, icon: <LocalIcon icon="crop-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.crop.title", "Crop PDF"), name: t("home.crop.title", "Crop PDF"),
component: null, component: null,
view: "format", view: "format",
@ -218,7 +218,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.PAGE_FORMATTING subcategoryId: SubcategoryId.PAGE_FORMATTING
}, },
"rotate": { "rotate": {
icon: <LocalIcon icon="rotate-right-rounded" width="24" height="24" />, icon: <LocalIcon icon="rotate-right-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.rotate.title", "Rotate"), name: t("home.rotate.title", "Rotate"),
component: null, component: null,
view: "format", view: "format",
@ -227,7 +227,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.PAGE_FORMATTING subcategoryId: SubcategoryId.PAGE_FORMATTING
}, },
"splitPdf": { "splitPdf": {
icon: <LocalIcon icon="content-cut-rounded" width="24" height="24" />, icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.split.title", "Split"), name: t("home.split.title", "Split"),
component: SplitPdfPanel, component: SplitPdfPanel,
view: "split", view: "split",
@ -238,7 +238,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: SplitSettings settingsComponent: SplitSettings
}, },
"reorganize-pages": { "reorganize-pages": {
icon: <LocalIcon icon="move-down-rounded" width="24" height="24" />, icon: <LocalIcon icon="move-down-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.reorganizePages.title", "Reorganize Pages"), name: t("home.reorganizePages.title", "Reorganize Pages"),
component: null, component: null,
view: "pageEditor", view: "pageEditor",
@ -247,7 +247,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.PAGE_FORMATTING subcategoryId: SubcategoryId.PAGE_FORMATTING
}, },
"adjust-page-size-scale": { "adjust-page-size-scale": {
icon: <LocalIcon icon="crop-free-rounded" width="24" height="24" />, icon: <LocalIcon icon="crop-free-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.scalePages.title", "Adjust page size/scale"), name: t("home.scalePages.title", "Adjust page size/scale"),
component: null, component: null,
view: "format", view: "format",
@ -256,7 +256,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.PAGE_FORMATTING subcategoryId: SubcategoryId.PAGE_FORMATTING
}, },
"addPageNumbers": { "addPageNumbers": {
icon: <LocalIcon icon="123-rounded" width="24" height="24" />, icon: <LocalIcon icon="123-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.addPageNumbers.title", "Add Page Numbers"), name: t("home.addPageNumbers.title", "Add Page Numbers"),
component: null, component: null,
view: "format", view: "format",
@ -265,7 +265,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.PAGE_FORMATTING subcategoryId: SubcategoryId.PAGE_FORMATTING
}, },
"multi-page-layout": { "multi-page-layout": {
icon: <LocalIcon icon="dashboard-rounded" width="24" height="24" />, icon: <LocalIcon icon="dashboard-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.pageLayout.title", "Multi-Page Layout"), name: t("home.pageLayout.title", "Multi-Page Layout"),
component: null, component: null,
view: "format", view: "format",
@ -274,7 +274,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.PAGE_FORMATTING subcategoryId: SubcategoryId.PAGE_FORMATTING
}, },
"single-large-page": { "single-large-page": {
icon: <LocalIcon icon="looks-one-outline-rounded" width="24" height="24" />, icon: <LocalIcon icon="looks-one-outline-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.pdfToSinglePage.title", "PDF to Single Large Page"), name: t("home.pdfToSinglePage.title", "PDF to Single Large Page"),
component: SingleLargePage, component: SingleLargePage,
view: "format", view: "format",
@ -286,7 +286,7 @@ export function useFlatToolRegistry(): ToolRegistry {
operationConfig: singleLargePageOperationConfig operationConfig: singleLargePageOperationConfig
}, },
"add-attachments": { "add-attachments": {
icon: <LocalIcon icon="attachment-rounded" width="24" height="24" />, icon: <LocalIcon icon="attachment-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.attachments.title", "Add Attachments"), name: t("home.attachments.title", "Add Attachments"),
component: null, component: null,
view: "format", view: "format",
@ -299,7 +299,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Extraction // Extraction
"extractPages": { "extractPages": {
icon: <LocalIcon icon="upload-rounded" width="24" height="24" />, icon: <LocalIcon icon="upload-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.extractPages.title", "Extract Pages"), name: t("home.extractPages.title", "Extract Pages"),
component: null, component: null,
view: "extract", view: "extract",
@ -308,7 +308,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.EXTRACTION subcategoryId: SubcategoryId.EXTRACTION
}, },
"extract-images": { "extract-images": {
icon: <LocalIcon icon="filter-alt" width="24" height="24" />, icon: <LocalIcon icon="filter-alt" width="1.5rem" height="1.5rem" />,
name: t("home.extractImages.title", "Extract Images"), name: t("home.extractImages.title", "Extract Images"),
component: null, component: null,
view: "extract", view: "extract",
@ -321,7 +321,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Removal // Removal
"removePages": { "removePages": {
icon: <LocalIcon icon="delete-outline-rounded" width="24" height="24" />, icon: <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.removePages.title", "Remove Pages"), name: t("home.removePages.title", "Remove Pages"),
component: null, component: null,
view: "remove", view: "remove",
@ -330,7 +330,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.REMOVAL subcategoryId: SubcategoryId.REMOVAL
}, },
"remove-blank-pages": { "remove-blank-pages": {
icon: <LocalIcon icon="scan-delete-rounded" width="24" height="24" />, icon: <LocalIcon icon="scan-delete-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.removeBlanks.title", "Remove Blank Pages"), name: t("home.removeBlanks.title", "Remove Blank Pages"),
component: null, component: null,
view: "remove", view: "remove",
@ -339,7 +339,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.REMOVAL subcategoryId: SubcategoryId.REMOVAL
}, },
"remove-annotations": { "remove-annotations": {
icon: <LocalIcon icon="thread-unread-rounded" width="24" height="24" />, icon: <LocalIcon icon="thread-unread-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.removeAnnotations.title", "Remove Annotations"), name: t("home.removeAnnotations.title", "Remove Annotations"),
component: null, component: null,
view: "remove", view: "remove",
@ -348,7 +348,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.REMOVAL subcategoryId: SubcategoryId.REMOVAL
}, },
"remove-image": { "remove-image": {
icon: <LocalIcon icon="remove-selection-rounded" width="24" height="24" />, icon: <LocalIcon icon="remove-selection-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.removeImagePdf.title", "Remove Image"), name: t("home.removeImagePdf.title", "Remove Image"),
component: null, component: null,
view: "format", view: "format",
@ -357,7 +357,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.REMOVAL subcategoryId: SubcategoryId.REMOVAL
}, },
"remove-password": { "remove-password": {
icon: <LocalIcon icon="lock-open-right-outline-rounded" width="24" height="24" />, icon: <LocalIcon icon="lock-open-right-outline-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.removePassword.title", "Remove Password"), name: t("home.removePassword.title", "Remove Password"),
component: RemovePassword, component: RemovePassword,
view: "security", view: "security",
@ -370,7 +370,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: RemovePasswordSettings settingsComponent: RemovePasswordSettings
}, },
"remove-certificate-sign": { "remove-certificate-sign": {
icon: <LocalIcon icon="remove-moderator-outline-rounded" width="24" height="24" />, icon: <LocalIcon icon="remove-moderator-outline-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.removeCertSign.title", "Remove Certificate Sign"), name: t("home.removeCertSign.title", "Remove Certificate Sign"),
component: RemoveCertificateSign, component: RemoveCertificateSign,
view: "security", view: "security",
@ -386,7 +386,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Automation // Automation
"automate": { "automate": {
icon: <LocalIcon icon="automation" width="24" height="24" />, icon: <LocalIcon icon="automation-outline" width="1.5rem" height="1.5rem" />,
name: t("home.automate.title", "Automate"), name: t("home.automate.title", "Automate"),
component: React.lazy(() => import('../tools/Automate')), component: React.lazy(() => import('../tools/Automate')),
view: "format", view: "format",
@ -397,7 +397,7 @@ export function useFlatToolRegistry(): ToolRegistry {
endpoints: ["handleData"] endpoints: ["handleData"]
}, },
"auto-rename-pdf-file": { "auto-rename-pdf-file": {
icon: <LocalIcon icon="match-word-rounded" width="24" height="24" />, icon: <LocalIcon icon="match-word-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.auto-rename.title", "Auto Rename PDF File"), name: t("home.auto-rename.title", "Auto Rename PDF File"),
component: null, component: null,
view: "format", view: "format",
@ -406,7 +406,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.AUTOMATION subcategoryId: SubcategoryId.AUTOMATION
}, },
"auto-split-pages": { "auto-split-pages": {
icon: <LocalIcon icon="split-scene-right-rounded" width="24" height="24" />, icon: <LocalIcon icon="split-scene-right-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.autoSplitPDF.title", "Auto Split Pages"), name: t("home.autoSplitPDF.title", "Auto Split Pages"),
component: null, component: null,
view: "format", view: "format",
@ -415,7 +415,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.AUTOMATION subcategoryId: SubcategoryId.AUTOMATION
}, },
"auto-split-by-size-count": { "auto-split-by-size-count": {
icon: <LocalIcon icon="content-cut-rounded" width="24" height="24" />, icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.autoSizeSplitPDF.title", "Auto Split by Size/Count"), name: t("home.autoSizeSplitPDF.title", "Auto Split by Size/Count"),
component: null, component: null,
view: "format", view: "format",
@ -428,7 +428,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Advanced Formatting // Advanced Formatting
"adjustContrast": { "adjustContrast": {
icon: <LocalIcon icon="palette" width="24" height="24" />, icon: <LocalIcon icon="palette" width="1.5rem" height="1.5rem" />,
name: t("home.adjustContrast.title", "Adjust Colors/Contrast"), name: t("home.adjustContrast.title", "Adjust Colors/Contrast"),
component: null, component: null,
view: "format", view: "format",
@ -437,7 +437,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.ADVANCED_FORMATTING subcategoryId: SubcategoryId.ADVANCED_FORMATTING
}, },
"repair": { "repair": {
icon: <LocalIcon icon="build-outline-rounded" width="24" height="24" />, icon: <LocalIcon icon="build-outline-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.repair.title", "Repair"), name: t("home.repair.title", "Repair"),
component: Repair, component: Repair,
view: "format", view: "format",
@ -450,7 +450,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: RepairSettings settingsComponent: RepairSettings
}, },
"detect-split-scanned-photos": { "detect-split-scanned-photos": {
icon: <LocalIcon icon="scanner-rounded" width="24" height="24" />, icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.ScannerImageSplit.title", "Detect & Split Scanned Photos"), name: t("home.ScannerImageSplit.title", "Detect & Split Scanned Photos"),
component: null, component: null,
view: "format", view: "format",
@ -459,7 +459,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.ADVANCED_FORMATTING subcategoryId: SubcategoryId.ADVANCED_FORMATTING
}, },
"overlay-pdfs": { "overlay-pdfs": {
icon: <LocalIcon icon="layers-rounded" width="24" height="24" />, icon: <LocalIcon icon="layers-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.overlay-pdfs.title", "Overlay PDFs"), name: t("home.overlay-pdfs.title", "Overlay PDFs"),
component: null, component: null,
view: "format", view: "format",
@ -468,7 +468,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.ADVANCED_FORMATTING subcategoryId: SubcategoryId.ADVANCED_FORMATTING
}, },
"replace-and-invert-color": { "replace-and-invert-color": {
icon: <LocalIcon icon="format-color-fill-rounded" width="24" height="24" />, icon: <LocalIcon icon="format-color-fill-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.replaceColorPdf.title", "Replace & Invert Color"), name: t("home.replaceColorPdf.title", "Replace & Invert Color"),
component: null, component: null,
view: "format", view: "format",
@ -477,7 +477,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.ADVANCED_FORMATTING subcategoryId: SubcategoryId.ADVANCED_FORMATTING
}, },
"add-image": { "add-image": {
icon: <LocalIcon icon="image-rounded" width="24" height="24" />, icon: <LocalIcon icon="image-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.addImage.title", "Add Image"), name: t("home.addImage.title", "Add Image"),
component: null, component: null,
view: "format", view: "format",
@ -486,7 +486,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.ADVANCED_FORMATTING subcategoryId: SubcategoryId.ADVANCED_FORMATTING
}, },
"edit-table-of-contents": { "edit-table-of-contents": {
icon: <LocalIcon icon="bookmark-add-rounded" width="24" height="24" />, icon: <LocalIcon icon="bookmark-add-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.editTableOfContents.title", "Edit Table of Contents"), name: t("home.editTableOfContents.title", "Edit Table of Contents"),
component: null, component: null,
view: "format", view: "format",
@ -495,7 +495,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.ADVANCED_FORMATTING subcategoryId: SubcategoryId.ADVANCED_FORMATTING
}, },
"scanner-effect": { "scanner-effect": {
icon: <LocalIcon icon="scanner-rounded" width="24" height="24" />, icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.fakeScan.title", "Scanner Effect"), name: t("home.fakeScan.title", "Scanner Effect"),
component: null, component: null,
view: "format", view: "format",
@ -508,7 +508,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Developer Tools // Developer Tools
"show-javascript": { "show-javascript": {
icon: <LocalIcon icon="javascript-rounded" width="24" height="24" />, icon: <LocalIcon icon="javascript-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.showJS.title", "Show JavaScript"), name: t("home.showJS.title", "Show JavaScript"),
component: null, component: null,
view: "extract", view: "extract",
@ -517,7 +517,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.DEVELOPER_TOOLS subcategoryId: SubcategoryId.DEVELOPER_TOOLS
}, },
"dev-api": { "dev-api": {
icon: <LocalIcon icon="open-in-new-rounded" width="24" height="24" style={{ color: '#2F7BF6' }} />, icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
name: t("home.devApi.title", "API"), name: t("home.devApi.title", "API"),
component: null, component: null,
view: "external", view: "external",
@ -527,7 +527,7 @@ export function useFlatToolRegistry(): ToolRegistry {
link: "https://stirlingpdf.io/swagger-ui/5.21.0/index.html" link: "https://stirlingpdf.io/swagger-ui/5.21.0/index.html"
}, },
"dev-folder-scanning": { "dev-folder-scanning": {
icon: <LocalIcon icon="open-in-new-rounded" width="24" height="24" style={{ color: '#2F7BF6' }} />, icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
name: t("home.devFolderScanning.title", "Automated Folder Scanning"), name: t("home.devFolderScanning.title", "Automated Folder Scanning"),
component: null, component: null,
view: "external", view: "external",
@ -537,7 +537,7 @@ export function useFlatToolRegistry(): ToolRegistry {
link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Folder%20Scanning/" link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Folder%20Scanning/"
}, },
"dev-sso-guide": { "dev-sso-guide": {
icon: <LocalIcon icon="open-in-new-rounded" width="24" height="24" style={{ color: '#2F7BF6' }} />, icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
name: t("home.devSsoGuide.title", "SSO Guide"), name: t("home.devSsoGuide.title", "SSO Guide"),
component: null, component: null,
view: "external", view: "external",
@ -547,7 +547,7 @@ export function useFlatToolRegistry(): ToolRegistry {
link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Single%20Sign-On%20Configuration", link: "https://docs.stirlingpdf.com/Advanced%20Configuration/Single%20Sign-On%20Configuration",
}, },
"dev-airgapped": { "dev-airgapped": {
icon: <LocalIcon icon="open-in-new-rounded" width="24" height="24" style={{ color: '#2F7BF6' }} />, icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: '#2F7BF6' }} />,
name: t("home.devAirgapped.title", "Air-gapped Setup"), name: t("home.devAirgapped.title", "Air-gapped Setup"),
component: null, component: null,
view: "external", view: "external",
@ -560,7 +560,7 @@ export function useFlatToolRegistry(): ToolRegistry {
// Recommended Tools // Recommended Tools
"compare": { "compare": {
icon: <LocalIcon icon="compare-rounded" width="24" height="24" />, icon: <LocalIcon icon="compare-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.compare.title", "Compare"), name: t("home.compare.title", "Compare"),
component: null, component: null,
view: "format", view: "format",
@ -569,7 +569,7 @@ export function useFlatToolRegistry(): ToolRegistry {
subcategoryId: SubcategoryId.GENERAL subcategoryId: SubcategoryId.GENERAL
}, },
"compress": { "compress": {
icon: <LocalIcon icon="zoom-in-map-rounded" width="24" height="24" />, icon: <LocalIcon icon="zoom-in-map-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.compress.title", "Compress"), name: t("home.compress.title", "Compress"),
component: CompressPdfPanel, component: CompressPdfPanel,
view: "compress", view: "compress",
@ -581,7 +581,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: CompressSettings settingsComponent: CompressSettings
}, },
"convert": { "convert": {
icon: <LocalIcon icon="sync-alt-rounded" width="24" height="24" />, icon: <LocalIcon icon="sync-alt-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.convert.title", "Convert"), name: t("home.convert.title", "Convert"),
component: ConvertPanel, component: ConvertPanel,
view: "convert", view: "convert",
@ -627,7 +627,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: ConvertSettings settingsComponent: ConvertSettings
}, },
"mergePdfs": { "mergePdfs": {
icon: <LocalIcon icon="library-add-rounded" width="24" height="24" />, icon: <LocalIcon icon="library-add-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.merge.title", "Merge"), name: t("home.merge.title", "Merge"),
component: null, component: null,
view: "merge", view: "merge",
@ -637,7 +637,7 @@ export function useFlatToolRegistry(): ToolRegistry {
maxFiles: -1 maxFiles: -1
}, },
"multi-tool": { "multi-tool": {
icon: <LocalIcon icon="dashboard-customize-rounded" width="24" height="24" />, icon: <LocalIcon icon="dashboard-customize-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.multiTool.title", "Multi-Tool"), name: t("home.multiTool.title", "Multi-Tool"),
component: null, component: null,
view: "pageEditor", view: "pageEditor",
@ -647,7 +647,7 @@ export function useFlatToolRegistry(): ToolRegistry {
maxFiles: -1 maxFiles: -1
}, },
"ocr": { "ocr": {
icon: <LocalIcon icon="quick-reference-all-outline-rounded" width="24" height="24" />, icon: <LocalIcon icon="quick-reference-all-outline-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.ocr.title", "OCR"), name: t("home.ocr.title", "OCR"),
component: OCRPanel, component: OCRPanel,
view: "convert", view: "convert",
@ -659,7 +659,7 @@ export function useFlatToolRegistry(): ToolRegistry {
settingsComponent: OCRSettings settingsComponent: OCRSettings
}, },
"redact": { "redact": {
icon: <LocalIcon icon="visibility-off-rounded" width="24" height="24" />, icon: <LocalIcon icon="visibility-off-rounded" width="1.5rem" height="1.5rem" />,
name: t("home.redact.title", "Redact"), name: t("home.redact.title", "Redact"),
component: null, component: null,
view: "redact", view: "redact",

12
frontend/src/hooks/tools/automate/useSuggestedAutomations.ts
View File

@ -1,11 +1,15 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import StarIcon from '@mui/icons-material/Star'; import React from 'react';
import CompressIcon from '@mui/icons-material/Compress'; import LocalIcon from '../../../components/shared/LocalIcon';
import SecurityIcon from '@mui/icons-material/Security';
import TextFieldsIcon from '@mui/icons-material/TextFields';
import { SuggestedAutomation } from '../../../types/automation'; import { SuggestedAutomation } from '../../../types/automation';
// Create icon components
const CompressIcon = () => React.createElement(LocalIcon, { icon: 'compress', width: '1.5rem', height: '1.5rem' });
const TextFieldsIcon = () => React.createElement(LocalIcon, { icon: 'text-fields', width: '1.5rem', height: '1.5rem' });
const SecurityIcon = () => React.createElement(LocalIcon, { icon: 'security', width: '1.5rem', height: '1.5rem' });
const StarIcon = () => React.createElement(LocalIcon, { icon: 'star', width: '1.5rem', height: '1.5rem' });
export function useSuggestedAutomations(): SuggestedAutomation[] { export function useSuggestedAutomations(): SuggestedAutomation[] {
const { t } = useTranslation(); const { t } = useTranslation();