saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-08-22 12:19:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

push before refactoring ToolPicker and tool registry

Browse Source
This commit is contained in:
EthanHealy01 2025-08-11 12:00:22 +01:00
parent 3360669fbb
commit b6d56ba587
1 changed files with 7 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/tools/ToolPicker.tsx
View File

@ -1,15 +1,14 @@
import React, { useState, useMemo, useRef, useLayoutEffect } from "react"; import React, { useMemo, useRef, useLayoutEffect, useState } from "react";
import { Box, Text, Stack } from "@mantine/core"; import { Box, Text, Stack } from "@mantine/core";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { baseToolRegistry, type ToolRegistryEntry } from "../../data/toolRegistry"; import { baseToolRegistry, type ToolRegistryEntry } from "../../data/toolRegistry";
import ToolSearch from "./toolPicker/ToolSearch";
import ToolButton from "./toolPicker/ToolButton"; import ToolButton from "./toolPicker/ToolButton";
import "./toolPicker/ToolPicker.css"; import "./toolPicker/ToolPicker.css";
interface ToolPickerProps { interface ToolPickerProps {
selectedToolKey: string | null; selectedToolKey: string | null;
onSelect: (id: string) => void; onSelect: (id: string) => void;
toolRegistry: Readonly<Record<string, ToolRegistryEntry>>; filteredTools: [string, ToolRegistryEntry][];
} }
interface GroupedTools { interface GroupedTools {
@ -18,10 +17,8 @@ interface GroupedTools {
}; };
} }
const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps) => { const ToolPicker = ({ selectedToolKey, onSelect, filteredTools }: ToolPickerProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [search, setSearch] = useState("");
const [quickHeaderHeight, setQuickHeaderHeight] = useState(0); const [quickHeaderHeight, setQuickHeaderHeight] = useState(0);
const [allHeaderHeight, setAllHeaderHeight] = useState(0); const [allHeaderHeight, setAllHeaderHeight] = useState(0);
@ -47,7 +44,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
const groupedTools = useMemo(() => { const groupedTools = useMemo(() => {
const grouped: GroupedTools = {}; const grouped: GroupedTools = {};
Object.entries(toolRegistry).forEach(([id, tool]) => { filteredTools.forEach(([id, tool]) => {
const baseTool = baseToolRegistry[id as keyof typeof baseToolRegistry]; const baseTool = baseToolRegistry[id as keyof typeof baseToolRegistry];
const category = baseTool?.category || "OTHER"; const category = baseTool?.category || "OTHER";
const subcategory = baseTool?.subcategory || "General"; const subcategory = baseTool?.subcategory || "General";
@ -56,7 +53,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
grouped[category][subcategory].push({ id, tool }); grouped[category][subcategory].push({ id, tool });
}); });
return grouped; return grouped;
}, [toolRegistry]); }, [filteredTools]);
const sections = useMemo(() => { const sections = useMemo(() => {
const mapping: Record<string, "QUICK ACCESS" | "ALL TOOLS"> = { const mapping: Record<string, "QUICK ACCESS" | "ALL TOOLS"> = {
@ -89,24 +86,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
]; ];
}, [groupedTools]); }, [groupedTools]);
const visibleSections = useMemo(() => { const visibleSections = sections;
if (!search.trim()) return sections;
const term = search.toLowerCase();
return sections
.map(s => ({
...s,
subcategories: s.subcategories
.map(sc => ({
...sc,
tools: sc.tools.filter(({ tool }) =>
tool.name.toLowerCase().includes(term) ||
tool.description.toLowerCase().includes(term)
)
}))
.filter(sc => sc.tools.length)
}))
.filter(s => s.subcategories.length);
}, [sections, search]);
const quickSection = useMemo( const quickSection = useMemo(
() => visibleSections.find(s => s.title === "QUICK ACCESS"), () => visibleSections.find(s => s.title === "QUICK ACCESS"),
@ -141,7 +121,6 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
background: "var(--bg-toolbar)" background: "var(--bg-toolbar)"
}} }}
> >
<ToolSearch value={search} onChange={setSearch} toolRegistry={toolRegistry} mode="filter" />
<Box <Box
ref={scrollableRef} ref={scrollableRef}
style={{ style={{
@ -149,7 +128,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
overflowY: "auto", overflowY: "auto",
overflowX: "hidden", overflowX: "hidden",
minHeight: 0, minHeight: 0,
height: "calc(100vh - 120px)" height: "100%"
}} }}
className="tool-picker-scrollable" className="tool-picker-scrollable"
> >