{/* Search Bar - Always visible at the top */}
-
-
+ setSearchQuery(e.currentTarget.value)}
- autoComplete="off"
- size="sm"
+ onChange={setSearchQuery}
+ toolRegistry={toolRegistry}
+ mode="filter"
/>
- {leftPanelView === 'toolPicker' ? (
+ {searchQuery.trim().length > 0 ? (
+ // Searching view (replaces both picker and content)
+
+ ) : leftPanelView === 'toolPicker' ? (
// Tool Picker View
0)}
/>
) : (
@@ -76,10 +94,12 @@ export default function ToolPanel() {
{/* Tool content */}
-
+ {selectedToolKey && (
+
+ )}
)}
diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx
index d392f21b6..9dec8f45a 100644
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@@ -1,43 +1,230 @@
-import React from "react";
-import { Box, Text, Stack, Button } from "@mantine/core";
+import React, { useMemo, useRef, useLayoutEffect, useState } from "react";
+import { Box, Text, Stack } from "@mantine/core";
import { useTranslation } from "react-i18next";
-import { ToolRegistry } from "../../types/tool";
+import { ToolRegistryEntry } from "../../data/toolsTaxonomy";
+import ToolButton from "./toolPicker/ToolButton";
+import "./toolPicker/ToolPicker.css";
+import { useToolSections } from "../../hooks/useToolSections";
+import SubcategoryHeader from "./shared/SubcategoryHeader";
+import NoToolsFound from "./shared/NoToolsFound";
interface ToolPickerProps {
selectedToolKey: string | null;
onSelect: (id: string) => void;
- /** Pre-filtered tools to display */
- filteredTools: [string, ToolRegistry[string]][];
+ filteredTools: [string, ToolRegistryEntry][];
+ isSearching?: boolean;
}
-const ToolPicker = ({ selectedToolKey, onSelect, filteredTools }: ToolPickerProps) => {
+// Helper function to render tool buttons for a subcategory
+const renderToolButtons = (
+ subcategory: any,
+ selectedToolKey: string | null,
+ onSelect: (id: string) => void,
+ showSubcategoryHeader: boolean = true
+) => (
+
+ {showSubcategoryHeader && (
+
+ )}
+
+ {subcategory.tools.map(({ id, tool }: { id: string; tool: any }) => (
+
+ ))}
+
+
+);
+
+const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = false }: ToolPickerProps) => {
const { t } = useTranslation();
+ const [quickHeaderHeight, setQuickHeaderHeight] = useState(0);
+ const [allHeaderHeight, setAllHeaderHeight] = useState(0);
+
+ const scrollableRef = useRef
(null);
+ const quickHeaderRef = useRef(null);
+ const allHeaderRef = useRef(null);
+ const quickAccessRef = useRef(null);
+ const allToolsRef = useRef(null);
+
+ // On resize adjust headers height to offset height
+ useLayoutEffect(() => {
+ const update = () => {
+ if (quickHeaderRef.current) {
+ setQuickHeaderHeight(quickHeaderRef.current.offsetHeight);
+ }
+ if (allHeaderRef.current) {
+ setAllHeaderHeight(allHeaderRef.current.offsetHeight);
+ }
+ };
+ update();
+ window.addEventListener("resize", update);
+ return () => window.removeEventListener("resize", update);
+ }, []);
+
+ const { sections: visibleSections } = useToolSections(filteredTools);
+
+ const quickSection = useMemo(
+ () => visibleSections.find(s => (s as any).key === 'quick'),
+ [visibleSections]
+ );
+ const allSection = useMemo(
+ () => visibleSections.find(s => (s as any).key === 'all'),
+ [visibleSections]
+ );
+
+ const scrollTo = (ref: React.RefObject) => {
+ const container = scrollableRef.current;
+ const target = ref.current;
+ if (container && target) {
+ const stackedOffset = ref === allToolsRef
+ ? (quickHeaderHeight + allHeaderHeight)
+ : quickHeaderHeight;
+ const top = target.offsetTop - container.offsetTop - (stackedOffset || 0);
+ container.scrollTo({
+ top: Math.max(0, top),
+ behavior: "smooth"
+ });
+ }
+ };
+
+ // Build flat list by subcategory for search mode
+ const { searchGroups } = useToolSections(isSearching ? filteredTools : []);
return (
-
-
- {filteredTools.length === 0 ? (
-
- {t("toolPicker.noToolsFound", "No tools found")}
-
+
+
+ {isSearching ? (
+
+ {searchGroups.length === 0 ? (
+
+ ) : (
+ searchGroups.map(group => renderToolButtons(group, selectedToolKey, onSelect))
+ )}
+
) : (
- filteredTools.map(([id, { icon, name }]) => (
-
+
+ {allSection && (
+ <>
+ scrollTo(allToolsRef)}
+ >
+ {t("toolPicker.allTools", "ALL TOOLS")}
+
+ {allSection?.subcategories.reduce((acc, sc) => acc + sc.tools.length, 0)}
+
+
+
+
+
+ {allSection?.subcategories.map(sc =>
+ renderToolButtons(sc, selectedToolKey, onSelect, true)
+ )}
+
+
+
+ )}
+
+ {!quickSection && !allSection && }
+
+ {/* bottom spacer to allow scrolling past the last row */}
+
+
+ )}
+
);
};
diff --git a/frontend/src/components/tools/ToolRenderer.tsx b/frontend/src/components/tools/ToolRenderer.tsx
index 493470935..4a3146613 100644
--- a/frontend/src/components/tools/ToolRenderer.tsx
+++ b/frontend/src/components/tools/ToolRenderer.tsx
@@ -26,7 +26,7 @@ const ToolRenderer = ({
// Wrap lazy-loaded component with Suspense
return (
- }>
+ }>
{
- const endpoints = new Set();
- Object.values(EXTENSION_TO_ENDPOINT).forEach(toEndpoints => {
- Object.values(toEndpoints).forEach(endpoint => {
- endpoints.add(endpoint);
- });
- });
- return Array.from(endpoints);
- }, []);
+ const allEndpoints = useMemo(() => getConversionEndpoints(EXTENSION_TO_ENDPOINT), []);
const { endpointStatus } = useMultipleEndpointsEnabled(allEndpoints);
diff --git a/frontend/src/components/tools/shared/NoToolsFound.tsx b/frontend/src/components/tools/shared/NoToolsFound.tsx
new file mode 100644
index 000000000..1b60f0cb7
--- /dev/null
+++ b/frontend/src/components/tools/shared/NoToolsFound.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+
+const NoToolsFound: React.FC = () => {
+ const { t } = useTranslation();
+
+ return (
+
+ {t("toolPicker.noToolsFound", "No tools found")}
+
+ );
+};
+
+export default NoToolsFound;
diff --git a/frontend/src/components/tools/shared/SubcategoryHeader.tsx b/frontend/src/components/tools/shared/SubcategoryHeader.tsx
new file mode 100644
index 000000000..b403ebae8
--- /dev/null
+++ b/frontend/src/components/tools/shared/SubcategoryHeader.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface SubcategoryHeaderProps {
+ label: string;
+ mt?: string | number;
+ mb?: string | number;
+}
+
+export const SubcategoryHeader: React.FC = ({ label, mt = '1rem', mb = '0.25rem' }) => (
+
+);
+
+export default SubcategoryHeader;
diff --git a/frontend/src/components/tools/toolPicker/ToolButton.tsx b/frontend/src/components/tools/toolPicker/ToolButton.tsx
new file mode 100644
index 000000000..af668a1fa
--- /dev/null
+++ b/frontend/src/components/tools/toolPicker/ToolButton.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Button } from "@mantine/core";
+import { Tooltip } from "../../shared/Tooltip";
+import { ToolRegistryEntry } from "../../../data/toolsTaxonomy";
+import FitText from "../../shared/FitText";
+
+interface ToolButtonProps {
+ id: string;
+ tool: ToolRegistryEntry;
+ isSelected: boolean;
+ onSelect: (id: string) => void;
+}
+
+const ToolButton: React.FC = ({ id, tool, isSelected, onSelect }) => {
+ const handleClick = (id: string) => {
+ if (tool.link) {
+ // Open external link in new tab
+ window.open(tool.link, '_blank', 'noopener,noreferrer');
+ return;
+ }
+ // Normal tool selection
+ onSelect(id);
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default ToolButton;
\ No newline at end of file
diff --git a/frontend/src/components/tools/toolPicker/ToolPicker.css b/frontend/src/components/tools/toolPicker/ToolPicker.css
new file mode 100644
index 000000000..815aee489
--- /dev/null
+++ b/frontend/src/components/tools/toolPicker/ToolPicker.css
@@ -0,0 +1,79 @@
+.tool-picker-scrollable {
+ overflow-y: auto !important;
+ overflow-x: hidden !important;
+ scrollbar-width: thin;
+ scrollbar-color: var(--mantine-color-gray-4) transparent;
+}
+
+.tool-picker-scrollable::-webkit-scrollbar {
+ width: 0.375rem;
+}
+
+.tool-picker-scrollable::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.tool-picker-scrollable::-webkit-scrollbar-thumb {
+ background-color: var(--mantine-color-gray-4);
+ border-radius: 0.1875rem;
+}
+
+.tool-picker-scrollable::-webkit-scrollbar-thumb:hover {
+ background-color: var(--mantine-color-gray-5);
+}
+
+.search-input {
+ margin: 1rem;
+}
+
+.tool-subcategory-title {
+ text-transform: uppercase;
+ padding-bottom: 0.5rem;
+ font-size: 0.75rem;
+ color: var(--tool-subcategory-text-color);
+ /* Align the text with tool labels to account for icon gutter */
+ 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.75rem;
+ color: var(--tool-subcategory-text-color);
+ white-space: nowrap;
+ overflow: visible;
+}
+
+.tool-subcategory-row-rule {
+ height: 1px;
+ background-color: var(--tool-subcategory-rule-color);
+ flex: 1 1 auto;
+}
+
+/* Compact tool buttons */
+.tool-button {
+ font-size: 0.875rem; /* default 1rem - 0.125rem? We'll apply exact -0.25rem via calc below */
+ padding-top: 0.375rem;
+ padding-bottom: 0.375rem;
+}
+
+.tool-button .mantine-Button-label {
+ font-size: .85rem;
+}
+
+.tool-button-icon {
+ font-size: 1rem;
+ line-height: 1;
+}
+
+.search-input-container {
+ margin-top: 0.5rem;
+ margin-bottom: 0.5rem;
+}
\ No newline at end of file
diff --git a/frontend/src/components/tools/toolPicker/ToolSearch.tsx b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
new file mode 100644
index 000000000..f01a9f87d
--- /dev/null
+++ b/frontend/src/components/tools/toolPicker/ToolSearch.tsx
@@ -0,0 +1,129 @@
+import React, { useState, useRef, useEffect, useMemo } from "react";
+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';
+
+interface ToolSearchProps {
+ value: string;
+ onChange: (value: string) => void;
+ toolRegistry: Readonly>;
+ onToolSelect?: (toolId: string) => void;
+ mode: 'filter' | 'dropdown';
+ selectedToolKey?: string | null;
+}
+
+const ToolSearch = ({
+ value,
+ onChange,
+ toolRegistry,
+ onToolSelect,
+ mode = 'filter',
+ selectedToolKey
+}: ToolSearchProps) => {
+ const { t } = useTranslation();
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const searchRef = useRef(null);
+
+ const filteredTools = useMemo(() => {
+ 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());
+ })
+ .slice(0, 6)
+ .map(([id, tool]) => ({ id, tool }));
+ }, [value, toolRegistry, mode, selectedToolKey]);
+
+ const handleSearchChange = (searchValue: string) => {
+ onChange(searchValue);
+ if (mode === 'dropdown') {
+ setDropdownOpen(searchValue.trim().length > 0 && filteredTools.length > 0);
+ }
+ };
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
+ setDropdownOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }, []);
+
+ const searchInput = (
+
+ search}
+ autoComplete="off"
+ />
+
+ );
+
+ if (mode === 'filter') {
+ return searchInput;
+ }
+
+ return (
+
+ {searchInput}
+ {dropdownOpen && filteredTools.length > 0 && (
+
+
+ {filteredTools.map(({ id, tool }) => (
+
+ ))}
+
+
+ )}
+