fix: translation related behaviors

src/tools/defineTool.tsx

@@ -9,10 +9,6 @@ export interface ToolMeta {
   component: LazyExoticComponent<JSXElementConstructor<ToolComponentProps>>;
   keywords: string[];
   icon: IconifyIcon | string;
-  name: string;
-  description: string;
-  shortDescription: string;
-  longDescription?: string;
   i18n: {
     name: FullI18nKey;
     description: FullI18nKey;
@@ -56,36 +52,20 @@ export const defineTool = (
   basePath: ToolCategory,
   options: ToolMeta
 ): DefinedTool => {
-  const {
-    icon,
-    path,
-    name,
-    description,
-    keywords,
-    component,
-    shortDescription,
-    longDescription,
-    i18n
-  } = options;
+  const { icon, path, keywords, component, i18n } = options;
   const Component = component;
   return {
     type: basePath,
     path: `${basePath}/${path}`,
-    name: i18n?.name || name,
+    name: i18n.name,
     icon,
-    description: i18n?.description || description,
-    shortDescription: i18n?.shortDescription || shortDescription,
+    description: i18n.description,
+    shortDescription: i18n.shortDescription,
     keywords,
     component: () => {
       return (
-        <ToolLayout
-          title={name}
-          description={description}
-          icon={icon}
-          type={basePath}
-          i18n={i18n}
-        >
-          <Component title={name} longDescription={longDescription} />
+        <ToolLayout icon={icon} type={basePath} i18n={i18n}>
+          <Component title={i18n.name} longDescription={i18n.longDescription} />
         </ToolLayout>
       );
     }

src/tools/index.ts

@@ -13,6 +13,8 @@ import { timeTools } from '../pages/tools/time';
 import { IconifyIcon } from '@iconify/react';
 import { pdfTools } from '../pages/tools/pdf';
 import { xmlTools } from '../pages/tools/xml';
+import { TFunction } from 'i18next';
+import { I18nNamespaces } from '../i18n';
 
 const toolCategoriesOrder: ToolCategory[] = [
   'image-generic',
@@ -143,17 +145,17 @@ const categoriesConfig: {
 // );
 export const filterTools = (
   tools: DefinedTool[],
-  query: string
+  query: string,
+  t: TFunction<I18nNamespaces>
 ): DefinedTool[] => {
   if (!query) return tools;
 
   const lowerCaseQuery = query.toLowerCase();
-
   return tools.filter(
     (tool) =>
-      tool.name.toLowerCase().includes(lowerCaseQuery) ||
-      tool.description.toLowerCase().includes(lowerCaseQuery) ||
-      tool.shortDescription.toLowerCase().includes(lowerCaseQuery) ||
+      t(tool.name).toLowerCase().includes(lowerCaseQuery) ||
+      t(tool.description).toLowerCase().includes(lowerCaseQuery) ||
+      t(tool.shortDescription).toLowerCase().includes(lowerCaseQuery) ||
       tool.keywords.some((keyword) =>
         keyword.toLowerCase().includes(lowerCaseQuery)
       )