mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-27 14:49:23 +00:00
b45d3a43d4
Component Extraction & Context Refactor - Summary 🔧 What We Did - Extracted HomePage's 286-line monolithic component into focused parts - Created ToolPanel (105 lines) for tool selection UI - Created Workbench (203 lines) for view management - Created ToolWorkflowContext (220 lines) for centralized state - Reduced HomePage to 60 lines of provider setup - Eliminated all prop drilling - components use contexts directly 🏆 Why This is Good - Maintainability: Each component has single purpose, easy debugging/development - Architecture: Clean separation of concerns, future features easier to add - Code Quality: 105% more lines but organized/purposeful vs tangled spaghetti code --------- Co-authored-by: Connor Yoh <connor@stirlingpdf.com> Co-authored-by: James Brunton <jbrunton96@gmail.com>
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import { Box, Text, Stack, Button } from "@mantine/core";
|
|
import { useTranslation } from "react-i18next";
|
|
import { ToolRegistry } from "../../types/tool";
|
|
|
|
interface ToolPickerProps {
|
|
selectedToolKey: string | null;
|
|
onSelect: (id: string) => void;
|
|
/** Pre-filtered tools to display */
|
|
filteredTools: [string, ToolRegistry[string]][];
|
|
}
|
|
|
|
const ToolPicker = ({ selectedToolKey, onSelect, filteredTools }: ToolPickerProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Box>
|
|
<Stack align="flex-start">
|
|
{filteredTools.length === 0 ? (
|
|
<Text c="dimmed" size="sm">
|
|
{t("toolPicker.noToolsFound", "No tools found")}
|
|
</Text>
|
|
) : (
|
|
filteredTools.map(([id, { icon, name }]) => (
|
|
<Button
|
|
key={id}
|
|
data-testid={`tool-${id}`}
|
|
variant={selectedToolKey === id ? "filled" : "subtle"}
|
|
onClick={() => onSelect(id)}
|
|
size="md"
|
|
radius="md"
|
|
leftSection={icon}
|
|
fullWidth
|
|
justify="flex-start"
|
|
>
|
|
{name}
|
|
</Button>
|
|
))
|
|
)}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ToolPicker;
|