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

Design improvemtns to automation customisation

Browse Source
This commit is contained in:
Connor Yoh 2025-08-25 14:37:32 +01:00
parent f7a4aaa766
commit d835dbd510
6 changed files with 129 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,8 @@ export interface TextInputProps {
readOnly?: boolean;
/** Accessibility label */
'aria-label'?: string;
/** Focus event handler */
onFocus?: () => void;
}
export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
@ -45,6 +47,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
disabled = false,
readOnly = false,
'aria-label': ariaLabel,
onFocus,
...props
}, ref) => {
const { colorScheme } = useMantineColorScheme();
@ -62,7 +65,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
return (
<div className={`${styles.container} ${className}`} style={style}>
{icon && (
<span
<span
className={styles.icon}
style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
>
@ -80,6 +83,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
disabled={disabled}
readOnly={readOnly}
aria-label={ariaLabel}
onFocus={onFocus}
style={{
backgroundColor: colorScheme === 'dark' ? '#4B525A' : '#FFFFFF',
color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382',

116
frontend/src/components/tools/automate/ToolList.tsx
View File

@ -1,14 +1,13 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Text, Stack, Group, ActionIcon } from '@mantine/core';
import DeleteIcon from '@mui/icons-material/Delete';
import SettingsIcon from '@mui/icons-material/Settings';
import CloseIcon from '@mui/icons-material/Close';
import AddCircleOutline from '@mui/icons-material/AddCircleOutline';
import { AutomationTool } from '../../../types/automation';
import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
import ToolSelector from './ToolSelector';
import AutomationEntry from './AutomationEntry';
import React from "react";
import { useTranslation } from "react-i18next";
import { Text, Stack, Group, ActionIcon } from "@mantine/core";
import SettingsIcon from "@mui/icons-material/Settings";
import CloseIcon from "@mui/icons-material/Close";
import AddCircleOutline from "@mui/icons-material/AddCircleOutline";
import { AutomationTool } from "../../../types/automation";
import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
import ToolSelector from "./ToolSelector";
import AutomationEntry from "./AutomationEntry";
interface ToolListProps {
tools: AutomationTool[];
@ -29,35 +28,39 @@ export default function ToolList({
onToolConfigure,
onToolAdd,
getToolName,
getToolDefaultParameters
getToolDefaultParameters,
}: ToolListProps) {
const { t } = useTranslation();
const handleToolSelect = (index: number, newOperation: string) => {
const defaultParams = getToolDefaultParameters(newOperation);
onToolUpdate(index, {
operation: newOperation,
name: getToolName(newOperation),
configured: false,
parameters: defaultParams
parameters: defaultParams,
});
};
return (
<div>
<Text size="sm" fw={500} mb="xs" style={{ color: 'var(--mantine-color-text)' }}>
{t('automate.creation.tools.selected', 'Selected Tools')} ({tools.length})
<Text size="sm" fw={500} mb="xs" style={{ color: "var(--mantine-color-text)" }}>
{t("automate.creation.tools.selected", "Selected Tools")} ({tools.length})
</Text>
<Stack gap="0">
{tools.map((tool, index) => (
<React.Fragment key={tool.id}>
<div
style={{
border: '1px solid var(--mantine-color-gray-2)',
borderRadius: 'var(--mantine-radius-sm)',
position: 'relative',
padding: 'var(--mantine-spacing-xs)'
border: "1px solid var(--mantine-color-gray-2)",
borderRadius: tool.operation && !tool.configured
? "var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0"
: "var(--mantine-radius-lg)",
backgroundColor: "var(--mantine-color-gray-2)",
position: "relative",
padding: "var(--mantine-spacing-xs)",
borderBottomWidth: tool.operation && !tool.configured ? "0" : "1px",
}}
>
{/* Delete X in top right */}
@ -65,26 +68,26 @@ export default function ToolList({
variant="subtle"
size="xs"
onClick={() => onToolRemove(index)}
title={t('automate.creation.tools.remove', 'Remove tool')}
title={t("automate.creation.tools.remove", "Remove tool")}
style={{
position: 'absolute',
top: '4px',
right: '4px',
position: "absolute",
top: "4px",
right: "4px",
zIndex: 1,
color: 'var(--mantine-color-gray-6)'
color: "var(--mantine-color-gray-6)",
}}
>
<CloseIcon style={{ fontSize: 12 }} />
<CloseIcon style={{ fontSize: 16 }} />
</ActionIcon>
<div style={{ paddingRight: '1.25rem' }}>
<div style={{ paddingRight: "1.25rem" }}>
{/* Tool Selection Dropdown with inline settings cog */}
<Group gap="xs" align="center" wrap="nowrap">
<div style={{ flex: 1, minWidth: 0 }}>
<ToolSelector
key={`tool-selector-${tool.id}`}
onSelect={(newOperation) => handleToolSelect(index, newOperation)}
excludeTools={['automate']}
excludeTools={["automate"]}
toolRegistry={toolRegistry}
selectedValue={tool.operation}
placeholder={tool.name}
@ -97,26 +100,37 @@ export default function ToolList({
variant="subtle"
size="sm"
onClick={() => onToolConfigure(index)}
title={t('automate.creation.tools.configure', 'Configure tool')}
style={{ color: 'var(--mantine-color-gray-6)' }}
title={t("automate.creation.tools.configure", "Configure tool")}
style={{ color: "var(--mantine-color-gray-6)" }}
>
<SettingsIcon style={{ fontSize: 16 }} />
</ActionIcon>
)}
</Group>
{/* Configuration status underneath */}
{tool.operation && !tool.configured && (
<Text pl="md" size="xs" c="dimmed" mt="xs">
{t('automate.creation.tools.notConfigured', "! Not Configured")}
</Text>
)}
</div>
</div>
{/* Configuration status underneath */}
{tool.operation && !tool.configured && (
<div
style={{
width: "100%",
border: "1px solid var(--mantine-color-gray-2)",
borderTop: "none",
borderRadius: "0 0 var(--mantine-radius-lg) var(--mantine-radius-lg)",
backgroundColor: "var(--active-bg)",
padding: "var(--mantine-spacing-xs)",
}}
>
<Text pl="md" size="xs" >
{t("automate.creation.tools.notConfigured", "! Not Configured")}
</Text>
</div>
)}
{index < tools.length - 1 && (
<div style={{ textAlign: 'center', padding: '8px 0' }}>
<Text size="xs" c="dimmed">↓</Text>
<div style={{ textAlign: "center", padding: "8px 0" }}>
<Text size="xs" c="dimmed">
↓
</Text>
</div>
)}
</React.Fragment>
@ -124,19 +138,23 @@ export default function ToolList({
{/* Arrow before Add Tool Button */}
{tools.length > 0 && (
<div style={{ textAlign: 'center', padding: '8px 0' }}>
<Text size="xs" c="dimmed">↓</Text>
<div style={{ textAlign: "center", padding: "8px 0" }}>
<Text size="xs" c="dimmed">
↓
</Text>
</div>
)}
{/* Add Tool Button */}
<div style={{
border: '1px solid var(--mantine-color-gray-2)',
borderRadius: 'var(--mantine-radius-sm)',
overflow: 'hidden'
}}>
<div
style={{
border: "1px solid var(--mantine-color-gray-2)",
borderRadius: "var(--mantine-radius-sm)",
overflow: "hidden",
}}
>
<AutomationEntry
title={t('automate.creation.tools.addTool', 'Add Tool')}
title={t("automate.creation.tools.addTool", "Add Tool")}
badgeIcon={AddCircleOutline}
operations={[]}
onClick={onToolAdd}
@ -146,4 +164,4 @@ export default function ToolList({
</Stack>
</div>
);
}
}

30
frontend/src/components/tools/automate/ToolSelector.tsx
View File

@ -5,6 +5,7 @@ import { ToolRegistryEntry } from '../../../data/toolsTaxonomy';
import { useToolSections } from '../../../hooks/useToolSections';
import { renderToolButtons } from '../shared/renderToolButtons';
import ToolSearch from '../toolPicker/ToolSearch';
import ToolButton from '../toolPicker/ToolButton';
interface ToolSelectorProps {
onSelect: (toolKey: string) => void;
@ -72,7 +73,8 @@ export default function ToolSelector({
if (baseFilteredTools.length > 0) {
return [{
name: 'All Tools',
tools: baseFilteredTools.map(([key, tool]) => ({ key, ...tool }))
subcategoryId: 'all' as any,
tools: baseFilteredTools.map(([key, tool]) => ({ id: key, tool }))
}];
}
return [];
@ -140,26 +142,15 @@ export default function ToolSelector({
};
return (
<div ref={containerRef} style={{ position: 'relative', width: '100%' }}>
<div ref={containerRef} className='rounded-xl'>
{/* Always show the target - either selected tool or search input */}
<div style={{ width: '100%' }}>
{selectedValue && toolRegistry[selectedValue] && !opened ? (
// Show selected tool in AutomationEntry style when tool is selected and dropdown closed
<div onClick={handleSearchFocus} style={{ cursor: 'pointer' }}>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 'var(--mantine-spacing-sm)',
padding: '0 0.5rem',
borderRadius: 'var(--mantine-radius-sm)',
}}>
<div style={{ color: 'var(--mantine-color-text)', fontSize: '1.2rem' }}>
{toolRegistry[selectedValue].icon}
</div>
<Text size="sm" style={{ flex: 1, color: 'var(--mantine-color-text)' }}>
{toolRegistry[selectedValue].name}
</Text>
</div>
<div onClick={handleSearchFocus} style={{ cursor: 'pointer',
borderRadius: "var(--mantine-radius-lg)" }}>
<ToolButton id='tool' tool={toolRegistry[selectedValue]} isSelected={false}
onSelect={()=>{}} rounded={true}></ToolButton>
</div>
) : (
// Show search input when no tool selected OR when dropdown is opened
@ -167,14 +158,13 @@ export default function ToolSelector({
value={searchTerm}
onChange={handleSearchChange}
toolRegistry={filteredToolRegistry}
mode="filter"
mode="unstyled"
placeholder={getDisplayValue()}
hideIcon={true}
onFocus={handleInputFocus}
autoFocus={shouldAutoFocus}
/>
)}
</div>
{/* Custom dropdown */}
{opened && (

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

@ -9,9 +9,10 @@ interface ToolButtonProps {
tool: ToolRegistryEntry;
isSelected: boolean;
onSelect: (id: string) => void;
rounded?: boolean;
}
const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect }) => {
const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, rounded = false }) => {
const handleClick = (id: string) => {
if (tool.link) {
// Open external link in new tab
@ -33,7 +34,17 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect
fullWidth
justify="flex-start"
className="tool-button"
styles={{ root: { borderRadius: 0, color: "var(--tools-text-and-icon-color)" } }}
styles={{
root: {
borderRadius: rounded ? 'var(--mantine-radius-lg)' : 0,
color: "var(--tools-text-and-icon-color)",
...(rounded && {
'&:hover': {
borderRadius: 'var(--mantine-radius-lg)',
}
})
}
}}
>
<FitText
text={tool.name}

2
frontend/src/components/tools/toolPicker/ToolPicker.css
View File

@ -76,4 +76,4 @@
.search-input-container {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
}

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

@ -3,14 +3,14 @@ import { Stack, Button, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
import { TextInput } from "../../shared/TextInput";
import './ToolPicker.css';
import "./ToolPicker.css";
interface ToolSearchProps {
value: string;
onChange: (value: string) => void;
toolRegistry: Readonly<Record<string, ToolRegistryEntry>>;
onToolSelect?: (toolId: string) => void;
mode: 'filter' | 'dropdown';
mode: "filter" | "dropdown" | "unstyled";
selectedToolKey?: string | null;
placeholder?: string;
hideIcon?: boolean;
@ -23,12 +23,12 @@ const ToolSearch = ({
onChange,
toolRegistry,
onToolSelect,
mode = 'filter',
mode = "filter",
selectedToolKey,
placeholder,
hideIcon = false,
onFocus,
autoFocus = false
autoFocus = false,
}: ToolSearchProps) => {
const { t } = useTranslation();
const [dropdownOpen, setDropdownOpen] = useState(false);
@ -39,9 +39,10 @@ const ToolSearch = ({
if (!value.trim()) return [];
return Object.entries(toolRegistry)
.filter(([id, tool]) => {
if (mode === 'dropdown' && id === selectedToolKey) return false;
return tool.name.toLowerCase().includes(value.toLowerCase()) ||
tool.description.toLowerCase().includes(value.toLowerCase());
if (mode === "dropdown" && id === selectedToolKey) return false;
return (
tool.name.toLowerCase().includes(value.toLowerCase()) || tool.description.toLowerCase().includes(value.toLowerCase())
);
})
.slice(0, 6)
.map(([id, tool]) => ({ id, tool }));
@ -49,7 +50,7 @@ const ToolSearch = ({
const handleSearchChange = (searchValue: string) => {
onChange(searchValue);
if (mode === 'dropdown') {
if (mode === "dropdown") {
setDropdownOpen(searchValue.trim().length > 0 && filteredTools.length > 0);
}
};
@ -65,8 +66,8 @@ const ToolSearch = ({
setDropdownOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
// Auto-focus the input when requested
@ -79,7 +80,6 @@ const ToolSearch = ({
}, [autoFocus]);
const searchInput = (
<div className="search-input-container">
<TextInput
ref={searchRef}
value={value}
@ -87,36 +87,40 @@ const ToolSearch = ({
placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
icon={hideIcon ? undefined : <span className="material-symbols-rounded">search</span>}
autoComplete="off"
style={{padding: 0}}
onFocus={onFocus}
/>
</div>
);
if (mode === 'filter') {
if (mode === "filter") {
return <div className="search-input-container">{searchInput}</div>;
}
if (mode === "unstyled") {
return searchInput;
}
return (
<div ref={searchRef} style={{ position: 'relative' }}>
<div ref={searchRef} style={{ position: "relative" }}>
{searchInput}
{dropdownOpen && filteredTools.length > 0 && (
<div
ref={dropdownRef}
style={{
position: 'absolute',
top: '100%',
position: "absolute",
top: "100%",
left: 0,
right: 0,
zIndex: 1000,
backgroundColor: 'var(--mantine-color-body)',
border: '1px solid var(--mantine-color-gray-3)',
borderRadius: '6px',
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
maxHeight: '300px',
overflowY: 'auto'
backgroundColor: "var(--mantine-color-body)",
border: "1px solid var(--mantine-color-gray-3)",
borderRadius: "6px",
boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
maxHeight: "300px",
overflowY: "auto",
}}
>
<Stack gap="xs" style={{ padding: '8px' }}>
<Stack gap="xs" style={{ padding: "8px" }}>
{filteredTools.map(({ id, tool }) => (
<Button
key={id}
@ -125,22 +129,18 @@ const ToolSearch = ({
onToolSelect && onToolSelect(id);
setDropdownOpen(false);
}}
leftSection={
<div style={{ color: 'var(--tools-text-and-icon-color)' }}>
{tool.icon}
</div>
}
leftSection={<div style={{ color: "var(--tools-text-and-icon-color)" }}>{tool.icon}</div>}
fullWidth
justify="flex-start"
style={{
borderRadius: '6px',
color: 'var(--tools-text-and-icon-color)',
padding: '8px 12px'
borderRadius: "6px",
color: "var(--tools-text-and-icon-color)",
padding: "8px 12px",
}}
>
<div style={{ textAlign: 'left' }}>
<div style={{ textAlign: "left" }}>
<div style={{ fontWeight: 500 }}>{tool.name}</div>
<Text size="xs" c="dimmed" style={{ marginTop: '2px' }}>
<Text size="xs" c="dimmed" style={{ marginTop: "2px" }}>
{tool.description}
</Text>
</div>