chore: show only necessary tags on a category

2025-09-20 22:49:33 +02:00 · 2025-07-22 19:09:41 +01:00
parent ed81954bf8
commit e27b893548
38 changed files with 48 additions and 61 deletions
--- a/src/components/UserTypeFilter.tsx
+++ b/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={{
--- a/src/pages/home/Categories.tsx
+++ b/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'}
--- a/src/pages/tools-by-category/index.tsx
+++ b/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 =
-    getToolsByCategory(selectedUserTypes, t).find(
+  const toolsByCategory = getToolsByCategory(selectedUserTypes, t).find(
    ({ 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}
          />
--- a/src/pages/tools/csv/csv-rows-to-columns/meta.ts
+++ b/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',
-    userTypes: ['General Users', 'Developers']
+    longDescription: 'csv:csvRowsToColumns.longDescription'
  },
  path: 'csv-rows-to-columns',
  icon: 'fluent:text-arrow-down-right-column-24-filled',
--- a/src/pages/tools/csv/csv-to-json/meta.ts
+++ b/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',
-    userTypes: ['General Users', 'Developers']
+    shortDescription: 'csv:csvToJson.shortDescription'
  },

  path: 'csv-to-json',
--- a/src/pages/tools/csv/csv-to-tsv/meta.ts
+++ b/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',
-    userTypes: ['General Users', 'Developers']
+    longDescription: 'csv:csvToTsv.longDescription'
  },

  path: 'csv-to-tsv',
--- a/src/pages/tools/csv/csv-to-xml/meta.ts
+++ b/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',
-    userTypes: ['General Users', 'Developers']
+    shortDescription: 'csv:csvToXml.shortDescription'
  },

  path: 'csv-to-xml',
--- a/src/pages/tools/csv/csv-to-yaml/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    longDescription: 'csv:csvToYaml.longDescription'
  },

  path: 'csv-to-yaml',
--- a/src/pages/tools/csv/find-incomplete-csv-records/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    shortDescription: 'csv:findIncompleteCsvRecords.shortDescription'
  }
 });
--- a/src/pages/tools/csv/insert-csv-columns/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    shortDescription: 'csv:insertCsvColumns.shortDescription'
  },

  path: 'insert-csv-columns',
--- a/src/pages/tools/csv/swap-csv-columns/meta.ts
+++ b/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',
-    userTypes: ['General Users', 'Developers']
+    longDescription: 'csv:swapCsvColumns.longDescription'
  },

  path: 'swap-csv-columns',
--- a/src/pages/tools/csv/transpose-csv/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    longDescription: 'csv:transposeCsv.longDescription'
  },

  path: 'transpose-csv',
--- a/src/pages/tools/image/generic/compress/meta.ts
+++ b/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',
--- a/src/pages/tools/image/generic/resize/meta.ts
+++ b/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',
--- a/src/pages/tools/json/escape-json/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    shortDescription: 'json:escapeJson.shortDescription'
  }
 });
--- a/src/pages/tools/json/json-to-xml/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    shortDescription: 'json:jsonToXml.shortDescription'
  }
 });
--- a/src/pages/tools/json/minify/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    shortDescription: 'json:minify.shortDescription'
  }
 });
--- a/src/pages/tools/json/prettify/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    shortDescription: 'json:prettify.shortDescription'
  }
 });
--- a/src/pages/tools/json/stringify/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    shortDescription: 'json:stringify.shortDescription'
  }
 });
--- a/src/pages/tools/json/tsv-to-json/meta.ts
+++ b/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',
-    userTypes: ['Developers']
+    shortDescription: 'json:tsvToJson.shortDescription'
  }
 });
--- a/src/pages/tools/json/validateJson/meta.ts
+++ b/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',
-    userTypes: ['General Users', 'Developers']
+    shortDescription: 'json:validateJson.shortDescription'
  }
 });
--- a/src/pages/tools/pdf/compress-pdf/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/pdf/editor/meta.ts
+++ b/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',
--- a/src/pages/tools/pdf/merge-pdf/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/pdf/pdf-to-epub/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/pdf/pdf-to-png/meta.ts
+++ b/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',
--- a/src/pages/tools/pdf/protect-pdf/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/pdf/rotate-pdf/meta.ts
+++ b/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',
--- a/src/pages/tools/pdf/split-pdf/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/video/change-speed/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/video/compress/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/video/crop-video/meta.ts
+++ b/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'))
 });
--- a/src/pages/tools/video/flip/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/video/loop/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/video/rotate/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/video/trim/meta.ts
+++ b/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']
  }
 });
--- a/src/pages/tools/video/video-to-gif/meta.ts
+++ b/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']
  }
 });
--- a/src/tools/index.ts
+++ b/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
-    if (tool.type === 'xml') {
+    const devToolsCategories: ToolCategory[] = ['xml', 'json', 'csv'];
+    if (devToolsCategories.includes(tool.type)) {
      return userTypes.includes('Developers');
    }
    // If tool has no userTypes defined, show it to all users