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

add divider to tool list

Browse Source
This commit is contained in:
EthanHealy01 2025-08-12 16:04:22 +01:00
parent 7801872810
commit aeb4f69cd9
2 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,13 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
return () => window.removeEventListener("resize", update); return () => window.removeEventListener("resize", update);
}, []); }, []);
const SubcategoryHeader: React.FC<{ label: string; mt?: string | number; mb?: string | number }> = ({ label, mt = "1rem", mb = "0.25rem" }) => (
<div className="tool-subcategory-row" style={{ marginLeft: "1rem", marginRight: "1rem", marginTop: mt, marginBottom: mb }}>
<span className="tool-subcategory-row-title">{label}</span>
<div className="tool-subcategory-row-rule" />
</div>
);
const groupedTools = useMemo(() => { const groupedTools = useMemo(() => {
const grouped: GroupedTools = {}; const grouped: GroupedTools = {};
filteredTools.forEach(([id, tool]) => { filteredTools.forEach(([id, tool]) => {
@ -182,9 +189,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
) : ( ) : (
searchGroups.map(group => ( searchGroups.map(group => (
<Box key={group.subcategory} w="100%"> <Box key={group.subcategory} w="100%">
<Text size="sm" fw={500} mb="0.25rem" mt="1rem" className="tool-subcategory-title"> <SubcategoryHeader label={group.subcategory} />
{group.subcategory}
</Text>
<Stack gap="xs"> <Stack gap="xs">
{group.tools.map(({ id, tool }) => ( {group.tools.map(({ id, tool }) => (
<ToolButton <ToolButton
@ -244,15 +249,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
{quickSection?.subcategories.map(sc => ( {quickSection?.subcategories.map(sc => (
<Box key={sc.subcategory} w="100%"> <Box key={sc.subcategory} w="100%">
{quickSection?.subcategories.length > 1 && ( {quickSection?.subcategories.length > 1 && (
<Text <SubcategoryHeader label={sc.subcategory} />
size="sm"
fw={500}
mb="0.25rem"
mt="1rem"
className="tool-subcategory-title"
>
{sc.subcategory}
</Text>
)} )}
<Stack gap="xs"> <Stack gap="xs">
{sc.tools.map(({ id, tool }) => ( {sc.tools.map(({ id, tool }) => (
@ -313,15 +310,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
{allSection?.subcategories.map(sc => ( {allSection?.subcategories.map(sc => (
<Box key={sc.subcategory} w="100%"> <Box key={sc.subcategory} w="100%">
{allSection?.subcategories.length > 1 && ( {allSection?.subcategories.length > 1 && (
<Text <SubcategoryHeader label={sc.subcategory} />
size="sm"
fw={500}
mb="0.25rem"
mt="1rem"
className="tool-subcategory-title"
>
{sc.subcategory}
</Text>
)} )}
<Stack gap="xs"> <Stack gap="xs">
{sc.tools.map(({ id, tool }) => ( {sc.tools.map(({ id, tool }) => (

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

@ -35,6 +35,27 @@
padding-left: 1rem; padding-left: 1rem;
} }
/* New row-style subcategory header with rule */
.tool-subcategory-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.tool-subcategory-row-title {
text-transform: uppercase;
font-weight: 600;
font-size: 0.9rem;
color: var(--tool-subcategory-text-color);
white-space: nowrap;
}
.tool-subcategory-row-rule {
height: 1px;
background-color: var(--tool-subcategory-text-color);
flex: 1 1 auto;
}
/* Compact tool buttons */ /* Compact tool buttons */
.tool-button { .tool-button {
font-size: 0.875rem; /* default 1rem - 0.125rem? We'll apply exact -0.25rem via calc below */ font-size: 0.875rem; /* default 1rem - 0.125rem? We'll apply exact -0.25rem via calc below */