Merge remote-tracking branch 'origin/string-join'

# Conflicts:
#	.idea/workspace.xml
#	src/tools/defineTool.tsx

src/tools/Separator.tsx

@@ -0,0 +1,23 @@
+import { Divider } from '@mui/material';
+import React from 'react';
+
+type SeparatorProps = {
+  backgroundColor: string;
+  margin: string;
+};
+
+export default function Separator({ backgroundColor, margin }: SeparatorProps) {
+  return (
+    <Divider
+      orientation="horizontal"
+      variant="fullWidth"
+      className="my-4"
+      sx={{
+        backgroundColor: backgroundColor,
+        height: '2px',
+        marginTop: margin,
+        marginBottom: margin
+      }}
+    />
+  );
+}

src/tools/defineTool.tsx

@@ -8,6 +8,7 @@ interface ToolOptions {
   image?: string;
   name: string;
   description: string;
+  shortDescription: string;
 }
 
 export interface DefinedTool {
@@ -15,6 +16,7 @@ export interface DefinedTool {
   path: string;
   name: string;
   description: string;
+  shortDescription: string;
   image?: string;
   keywords: string[];
   component: () => JSX.Element;
@@ -24,7 +26,15 @@ export const defineTool = (
   basePath: string,
   options: ToolOptions
 ): DefinedTool => {
-  const { image, path, name, description, keywords, component } = options;
+  const {
+    image,
+    path,
+    name,
+    description,
+    keywords,
+    component,
+    shortDescription
+  } = options;
   const Component = component;
   return {
     type: basePath,
@@ -32,6 +42,7 @@ export const defineTool = (
     name,
     image,
     description,
+    shortDescription,
     keywords,
     component: () => {
       return (

src/tools/index.ts

@@ -38,6 +38,7 @@ export const filterTools = (
     (tool) =>
       tool.name.toLowerCase().includes(lowerCaseQuery) ||
       tool.description.toLowerCase().includes(lowerCaseQuery) ||
+      tool.shortDescription.toLowerCase().includes(lowerCaseQuery) ||
       tool.keywords.some((keyword) =>
         keyword.toLowerCase().includes(lowerCaseQuery)
       )
@@ -49,6 +50,7 @@ export const getToolsByCategory = (): {
   description: string;
   type: string;
   example: { title: string; path: string };
+  tools: DefinedTool[];
 }[] => {
   const grouped: Partial<Record<string, DefinedTool[]>> = Object.groupBy(
     tools,
@@ -60,6 +62,7 @@ export const getToolsByCategory = (): {
       description:
         categoriesDescriptions.find((desc) => desc.type === type)?.value ?? '',
       type,
+      tools: tls ?? [],
       example: tls
         ? { title: tls[0].name, path: tls[0].path }
         : { title: '', path: '' }