Restructure frontend code to allow for extensions (#4721)

# Description of Changes Move frontend code into `core` folder and add infrastructure for `proprietary` folder to include premium, non-OSS features
2026-07-16 19:33:11 +02:00 · 2025-10-28 10:29:36 +00:00
parent 960d48f80c
commit d2b38ef4b8
725 changed files with 2485 additions and 2226 deletions
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Box, Stack } from '@mantine/core';
+import { getSubcategoryLabel, ToolRegistryEntry } from '@app/data/toolsTaxonomy';
+import { ToolId } from '@app/types/toolId';
+import ToolButton from '@app/components/tools/toolPicker/ToolButton';
+import { useTranslation } from 'react-i18next';
+import { useToolSections } from '@app/hooks/useToolSections';
+import SubcategoryHeader from '@app/components/tools/shared/SubcategoryHeader';
+import NoToolsFound from '@app/components/tools/shared/NoToolsFound';
+import "@app/components/tools/toolPicker/ToolPicker.css";
+
+interface SearchResultsProps {
+  filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
+  onSelect: (id: string) => void;
+  searchQuery?: string;
+}
+
+const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect, searchQuery }) => {
+  const { t } = useTranslation();
+  const { searchGroups } = useToolSections(filteredTools, searchQuery);
+
+  // Create a map of matched text for quick lookup
+  const matchedTextMap = new Map<string, string>();
+  if (filteredTools && Array.isArray(filteredTools)) {
+    filteredTools.forEach(({ item: [id], matchedText }) => {
+      if (matchedText) matchedTextMap.set(id, matchedText);
+    });
+  }
+
+  if (searchGroups.length === 0) {
+    return <NoToolsFound />;
+  }
+
+  return (
+    <Stack p="sm" gap="xs"
+        className="tool-picker-scrollable">
+      {searchGroups.map(group => (
+        <Box key={group.subcategoryId}  w="100%">
+          <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
+          <Stack  gap="xs">
+            {group.tools.map(({ id, tool }) => {
+              const matchedText = matchedTextMap.get(id);
+              // Check if the match was from synonyms and show the actual synonym that matched
+              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym =>
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              );
+              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym =>
+                matchedText.toLowerCase().includes(synonym.toLowerCase())
+              ) : undefined;
+
+              return (
+                <ToolButton
+                  key={id}
+                  id={id}
+                  tool={tool}
+                  isSelected={false}
+                  onSelect={onSelect}
+                  matchedSynonym={matchedSynonym}
+                />
+              );
+            })}
+          </Stack>
+        </Box>
+      ))}
+      {/* Global spacer to allow scrolling past last row in search mode */}
+      <div aria-hidden style={{ height: 200 }} />
+    </Stack>
+  );
+};
+
+export default SearchResults;