chore: show only necessary tags on a category

src/components/UserTypeFilter.tsx

@@ -2,17 +2,18 @@ import React, { useState, useEffect } from 'react';
 import { Box, Chip, Typography } from '@mui/material';
 import { UserType } from '@tools/defineTool';
 
-const userTypes: UserType[] = ['General Users', 'Developers', 'CyberSec'];
-
 interface UserTypeFilterProps {
   selectedUserTypes: UserType[];
+  userTypes?: UserType[];
   onUserTypesChange: (userTypes: UserType[]) => void;
 }
 
 export default function UserTypeFilter({
   selectedUserTypes,
-  onUserTypesChange
+  onUserTypesChange,
+  userTypes = ['General Users', 'Developers', 'CyberSec']
 }: UserTypeFilterProps) {
+  if (userTypes.length <= 1) return null;
   return (
     <Box
       sx={{

src/pages/home/Categories.tsx

@@ -88,6 +88,7 @@ const SingleCategory = function ({
               <Grid item xs={12} md={6}>
                 <Button
                   fullWidth
+                  sx={{ height: '100%' }}
                   onClick={() => navigate('/categories/' + category.type)}
                   variant={'contained'}
                 >
@@ -96,7 +97,7 @@ const SingleCategory = function ({
               </Grid>
               <Grid item xs={12} md={6}>
                 <Button
-                  sx={{ backgroundColor: 'background.default' }}
+                  sx={{ backgroundColor: 'background.default', height: '100%' }}
                   fullWidth
                   onClick={() => navigate(category.example.path)}
                   variant={'outlined'}

src/pages/tools-by-category/index.tsx

@@ -43,13 +43,13 @@ export default function ToolsByCategory() {
   const { t } = useTranslation(validNamespaces);
   const rawTitle = getToolCategoryTitle(categoryName as string, t);
   // First get tools by category without filtering
-  const toolsByCategory =
+  const toolsByCategory = getToolsByCategory(selectedUserTypes, t).find(
-    getToolsByCategory(selectedUserTypes, t).find(
+    ({ type }) => type === categoryName
-      ({ type }) => type === categoryName
+  );
-    )?.tools ?? [];
+  const categoryDefinedTools = toolsByCategory?.tools ?? [];
 
   const categoryTools = filterTools(
-    toolsByCategory,
+    categoryDefinedTools,
     searchTerm,
     selectedUserTypes,
     t
@@ -108,6 +108,7 @@ export default function ToolsByCategory() {
           my={2}
         >
           <UserTypeFilter
+            userTypes={toolsByCategory?.userTypes ?? undefined}
             selectedUserTypes={selectedUserTypes}
             onUserTypesChange={setSelectedUserTypes}
           />

src/pages/tools/csv/csv-rows-to-columns/meta.ts

@@ -6,8 +6,7 @@ export const tool = defineTool('csv', {
     name: 'csv:csvRowsToColumns.title',
     description: 'csv:csvRowsToColumns.description',
     shortDescription: 'csv:csvRowsToColumns.shortDescription',
-    longDescription: 'csv:csvRowsToColumns.longDescription',
+    longDescription: 'csv:csvRowsToColumns.longDescription'
-    userTypes: ['General Users', 'Developers']
   },
   path: 'csv-rows-to-columns',
   icon: 'fluent:text-arrow-down-right-column-24-filled',

src/pages/tools/csv/csv-to-json/meta.ts

@@ -5,8 +5,7 @@ export const tool = defineTool('csv', {
   i18n: {
     name: 'csv:csvToJson.title',
     description: 'csv:csvToJson.description',
-    shortDescription: 'csv:csvToJson.shortDescription',
+    shortDescription: 'csv:csvToJson.shortDescription'
-    userTypes: ['General Users', 'Developers']
   },
 
   path: 'csv-to-json',

src/pages/tools/csv/csv-to-tsv/meta.ts

@@ -6,8 +6,7 @@ export const tool = defineTool('csv', {
     name: 'csv:csvToTsv.title',
     description: 'csv:csvToTsv.description',
     shortDescription: 'csv:csvToTsv.shortDescription',
-    longDescription: 'csv:csvToTsv.longDescription',
+    longDescription: 'csv:csvToTsv.longDescription'
-    userTypes: ['General Users', 'Developers']
   },
 
   path: 'csv-to-tsv',

src/pages/tools/csv/csv-to-xml/meta.ts

@@ -5,8 +5,7 @@ export const tool = defineTool('csv', {
   i18n: {
     name: 'csv:csvToXml.title',
     description: 'csv:csvToXml.description',
-    shortDescription: 'csv:csvToXml.shortDescription',
+    shortDescription: 'csv:csvToXml.shortDescription'
-    userTypes: ['General Users', 'Developers']
   },
 
   path: 'csv-to-xml',

src/pages/tools/csv/csv-to-yaml/meta.ts

@@ -6,8 +6,7 @@ export const tool = defineTool('csv', {
     name: 'csv:csvToYaml.title',
     description: 'csv:csvToYaml.description',
     shortDescription: 'csv:csvToYaml.shortDescription',
-    longDescription: 'csv:csvToYaml.longDescription',
+    longDescription: 'csv:csvToYaml.longDescription'
-    userTypes: ['Developers']
   },
 
   path: 'csv-to-yaml',

src/pages/tools/csv/find-incomplete-csv-records/meta.ts

@@ -11,7 +11,6 @@ export const tool = defineTool('csv', {
   i18n: {
     name: 'csv:findIncompleteCsvRecords.title',
     description: 'csv:findIncompleteCsvRecords.description',
-    shortDescription: 'csv:findIncompleteCsvRecords.shortDescription',
+    shortDescription: 'csv:findIncompleteCsvRecords.shortDescription'
-    userTypes: ['Developers']
   }
 });

src/pages/tools/csv/insert-csv-columns/meta.ts

@@ -5,8 +5,7 @@ export const tool = defineTool('csv', {
   i18n: {
     name: 'csv:insertCsvColumns.title',
     description: 'csv:insertCsvColumns.description',
-    shortDescription: 'csv:insertCsvColumns.shortDescription',
+    shortDescription: 'csv:insertCsvColumns.shortDescription'
-    userTypes: ['Developers']
   },
 
   path: 'insert-csv-columns',

src/pages/tools/csv/swap-csv-columns/meta.ts

@@ -6,8 +6,7 @@ export const tool = defineTool('csv', {
     name: 'csv:swapCsvColumns.title',
     description: 'csv:swapCsvColumns.description',
     shortDescription: 'csv:swapCsvColumns.shortDescription',
-    longDescription: 'csv:swapCsvColumns.longDescription',
+    longDescription: 'csv:swapCsvColumns.longDescription'
-    userTypes: ['General Users', 'Developers']
   },
 
   path: 'swap-csv-columns',

src/pages/tools/csv/transpose-csv/meta.ts

@@ -6,8 +6,7 @@ export const tool = defineTool('csv', {
     name: 'csv:transposeCsv.title',
     description: 'csv:transposeCsv.description',
     shortDescription: 'csv:transposeCsv.shortDescription',
-    longDescription: 'csv:transposeCsv.longDescription',
+    longDescription: 'csv:transposeCsv.longDescription'
-    userTypes: ['Developers']
   },
 
   path: 'transpose-csv',

src/pages/tools/image/generic/compress/meta.ts

@@ -6,7 +6,7 @@ export const tool = defineTool('image-generic', {
     name: 'image:compress.title',
     description: 'image:compress.description',
     shortDescription: 'image:compress.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   },
 
   path: 'compress',

src/pages/tools/image/generic/resize/meta.ts

@@ -6,7 +6,7 @@ export const tool = defineTool('image-generic', {
     name: 'image:resize.title',
     description: 'image:resize.description',
     shortDescription: 'image:resize.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   },
 
   path: 'resize',

src/pages/tools/json/escape-json/meta.ts

@@ -10,7 +10,6 @@ export const tool = defineTool('json', {
   i18n: {
     name: 'json:escapeJson.title',
     description: 'json:escapeJson.description',
-    shortDescription: 'json:escapeJson.shortDescription',
+    shortDescription: 'json:escapeJson.shortDescription'
-    userTypes: ['Developers']
   }
 });

src/pages/tools/json/json-to-xml/meta.ts

@@ -10,7 +10,6 @@ export const tool = defineTool('json', {
   i18n: {
     name: 'json:jsonToXml.title',
     description: 'json:jsonToXml.description',
-    shortDescription: 'json:jsonToXml.shortDescription',
+    shortDescription: 'json:jsonToXml.shortDescription'
-    userTypes: ['Developers']
   }
 });

src/pages/tools/json/minify/meta.ts

@@ -10,7 +10,6 @@ export const tool = defineTool('json', {
   i18n: {
     name: 'json:minify.title',
     description: 'json:minify.description',
-    shortDescription: 'json:minify.shortDescription',
+    shortDescription: 'json:minify.shortDescription'
-    userTypes: ['Developers']
   }
 });

src/pages/tools/json/prettify/meta.ts

@@ -10,7 +10,6 @@ export const tool = defineTool('json', {
   i18n: {
     name: 'json:prettify.title',
     description: 'json:prettify.description',
-    shortDescription: 'json:prettify.shortDescription',
+    shortDescription: 'json:prettify.shortDescription'
-    userTypes: ['Developers']
   }
 });

src/pages/tools/json/stringify/meta.ts

@@ -10,7 +10,6 @@ export const tool = defineTool('json', {
   i18n: {
     name: 'json:stringify.title',
     description: 'json:stringify.description',
-    shortDescription: 'json:stringify.shortDescription',
+    shortDescription: 'json:stringify.shortDescription'
-    userTypes: ['Developers']
   }
 });

src/pages/tools/json/tsv-to-json/meta.ts

@@ -10,7 +10,6 @@ export const tool = defineTool('json', {
   i18n: {
     name: 'json:tsvToJson.title',
     description: 'json:tsvToJson.description',
-    shortDescription: 'json:tsvToJson.shortDescription',
+    shortDescription: 'json:tsvToJson.shortDescription'
-    userTypes: ['Developers']
   }
 });

src/pages/tools/json/validateJson/meta.ts

@@ -10,7 +10,6 @@ export const tool = defineTool('json', {
   i18n: {
     name: 'json:validateJson.title',
     description: 'json:validateJson.description',
-    shortDescription: 'json:validateJson.shortDescription',
+    shortDescription: 'json:validateJson.shortDescription'
-    userTypes: ['General Users', 'Developers']
   }
 });

src/pages/tools/pdf/compress-pdf/meta.ts

@@ -24,6 +24,6 @@ export const tool = defineTool('pdf', {
     name: 'pdf:compressPdf.title',
     description: 'pdf:compressPdf.description',
     shortDescription: 'pdf:compressPdf.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/pdf/editor/meta.ts

@@ -6,7 +6,7 @@ export const tool = defineTool('pdf', {
     name: 'pdf:editor.title',
     description: 'pdf:editor.description',
     shortDescription: 'pdf:editor.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   },
 
   path: 'editor',

src/pages/tools/pdf/merge-pdf/meta.ts

@@ -10,6 +10,6 @@ export const meta = defineTool('pdf', {
     name: 'pdf:mergePdf.title',
     description: 'pdf:mergePdf.description',
     shortDescription: 'pdf:mergePdf.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/pdf/pdf-to-epub/meta.ts

@@ -10,6 +10,6 @@ export const meta = defineTool('pdf', {
     name: 'pdf:pdfToEpub.title',
     description: 'pdf:pdfToEpub.description',
     shortDescription: 'pdf:pdfToEpub.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/pdf/pdf-to-png/meta.ts

@@ -7,7 +7,7 @@ export const tool = defineTool('pdf', {
     description: 'pdf:pdfToPng.description',
     shortDescription: 'pdf:pdfToPng.shortDescription',
     longDescription: 'pdf:pdfToPng.longDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   },
 
   path: 'pdf-to-png',

src/pages/tools/pdf/protect-pdf/meta.ts

@@ -23,6 +23,6 @@ export const tool = defineTool('pdf', {
     name: 'pdf:protectPdf.title',
     description: 'pdf:protectPdf.description',
     shortDescription: 'pdf:protectPdf.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/pdf/rotate-pdf/meta.ts

@@ -7,7 +7,7 @@ export const tool = defineTool('pdf', {
     description: 'pdf:rotatePdf.description',
     shortDescription: 'pdf:rotatePdf.shortDescription',
     longDescription: 'pdf:rotatePdf.longDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   },
 
   path: 'rotate-pdf',

src/pages/tools/pdf/split-pdf/meta.ts

@@ -10,6 +10,6 @@ export const meta = defineTool('pdf', {
     name: 'pdf:splitPdf.title',
     description: 'pdf:splitPdf.description',
     shortDescription: 'pdf:splitPdf.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/video/change-speed/meta.ts

@@ -11,6 +11,6 @@ export const tool = defineTool('video', {
     name: 'video:changeSpeed.title',
     description: 'video:changeSpeed.description',
     shortDescription: 'video:changeSpeed.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/video/compress/meta.ts

@@ -22,6 +22,6 @@ export const tool = defineTool('video', {
     name: 'video:compress.title',
     description: 'video:compress.description',
     shortDescription: 'video:compress.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/video/crop-video/meta.ts

@@ -19,7 +19,7 @@ export const tool = defineTool('video', {
     name: 'video:cropVideo.title',
     description: 'video:cropVideo.description',
     shortDescription: 'video:cropVideo.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   },
   component: lazy(() => import('./index'))
 });

src/pages/tools/video/flip/meta.ts

@@ -11,6 +11,6 @@ export const tool = defineTool('video', {
     name: 'video:flip.title',
     description: 'video:flip.description',
     shortDescription: 'video:flip.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/video/loop/meta.ts

@@ -11,6 +11,6 @@ export const tool = defineTool('video', {
     name: 'video:loop.title',
     description: 'video:loop.description',
     shortDescription: 'video:loop.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/video/rotate/meta.ts

@@ -11,6 +11,6 @@ export const tool = defineTool('video', {
     name: 'video:rotate.title',
     description: 'video:rotate.description',
     shortDescription: 'video:rotate.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/video/trim/meta.ts

@@ -10,6 +10,6 @@ export const tool = defineTool('video', {
     name: 'video:trim.title',
     description: 'video:trim.description',
     shortDescription: 'video:trim.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/pages/tools/video/video-to-gif/meta.ts

@@ -10,6 +10,6 @@ export const tool = defineTool('video', {
     name: 'video:videoToGif.title',
     description: 'video:videoToGif.description',
     shortDescription: 'video:videoToGif.shortDescription',
-    userTypes: ['General Users', 'Developers']
+    userTypes: ['General Users']
   }
 });

src/tools/index.ts

@@ -145,8 +145,8 @@ export const filterToolsByUserTypes = (
   if (userTypes.length === 0) return tools;
 
   return tools.filter((tool) => {
-    // Always treat xml tools as dev-only
+    const devToolsCategories: ToolCategory[] = ['xml', 'json', 'csv'];
-    if (tool.type === 'xml') {
+    if (devToolsCategories.includes(tool.type)) {
       return userTypes.includes('Developers');
     }
     // If tool has no userTypes defined, show it to all users