Refactor UserTypeFilter component to use Chips for selection and update user type filtering logic

src/components/UserTypeFilter.tsx

@@ -1,23 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import {
-  Box,
-  Chip,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  OutlinedInput,
-  Select,
-  SelectChangeEvent,
-  Typography,
-  useTheme
-} from '@mui/material';
+import { Box, Chip, Typography } from '@mui/material';
 import { UserType } from '@tools/defineTool';
 
 const userTypes: UserType[] = [
   'General Users',
   'Developers',
   'Designers',
-  'Students',
   'CyberSec'
 ];
 
@@ -32,54 +20,28 @@ export default function UserTypeFilter({
   onUserTypesChange,
   label = 'Filter by User Type'
 }: UserTypeFilterProps) {
-  const theme = useTheme();
-
-  const handleChange = (event: SelectChangeEvent<UserType[]>) => {
-    const {
-      target: { value }
-    } = event;
-    const newUserTypes =
-      typeof value === 'string' ? (value.split(',') as UserType[]) : value;
-    onUserTypesChange(newUserTypes);
-  };
-
   return (
     <Box sx={{ minWidth: 200 }}>
-      <FormControl fullWidth>
-        <InputLabel id="user-type-filter-label">{label}</InputLabel>
-        <Select
-          labelId="user-type-filter-label"
-          id="user-type-filter"
-          multiple
-          value={selectedUserTypes}
-          onChange={handleChange}
-          input={<OutlinedInput label={label} />}
-          renderValue={(selected) => (
-            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-              {selected.map((value) => (
-                <Chip
-                  key={value}
-                  label={value}
-                  size="small"
-                  sx={{
-                    backgroundColor: theme.palette.primary.main,
-                    color: 'white',
-                    '& .MuiChip-deleteIcon': {
-                      color: 'white'
-                    }
-                  }}
-                />
-              ))}
-            </Box>
-          )}
-        >
-          {userTypes.map((userType) => (
-            <MenuItem key={userType} value={userType}>
-              {userType}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
+      <Typography variant="subtitle2" sx={{ mb: 1 }}>
+        {label}
+      </Typography>
+      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+        {userTypes.map((userType) => (
+          <Chip
+            key={userType}
+            label={userType}
+            color={selectedUserTypes.includes(userType) ? 'primary' : 'default'}
+            onClick={() => {
+              const isSelected = selectedUserTypes.includes(userType);
+              const newUserTypes = isSelected
+                ? selectedUserTypes.filter((ut) => ut !== userType)
+                : [...selectedUserTypes, userType];
+              onUserTypesChange(newUserTypes);
+            }}
+            sx={{ cursor: 'pointer' }}
+          />
+        ))}
+      </Box>
     </Box>
   );
 }

src/pages/home/index.tsx

@@ -2,9 +2,17 @@ import { Box, useTheme } from '@mui/material';
 import Hero from 'components/Hero';
 import Categories from './Categories';
 import { Helmet } from 'react-helmet';
+import UserTypeFilter, { useUserTypeFilter } from 'components/UserTypeFilter';
+import { UserType } from '@tools/defineTool';
 
 export default function Home() {
   const theme = useTheme();
+  const { selectedUserTypes, setSelectedUserTypes } = useUserTypeFilter();
+
+  const handleUserTypesChange = (userTypes: UserType[]) => {
+    setSelectedUserTypes(userTypes);
+  };
+
   return (
     <Box
       padding={{
@@ -28,6 +36,11 @@ export default function Home() {
     >
       <Helmet title={'OmniTools'} />
       <Hero />
+      <UserTypeFilter
+        selectedUserTypes={selectedUserTypes}
+        onUserTypesChange={handleUserTypesChange}
+        label="Filter by User Type"
+      />
       <Categories />
     </Box>
   );

src/tools/defineTool.tsx

@@ -8,7 +8,6 @@ export type UserType =
   | 'General Users'
   | 'Developers'
   | 'Designers'
-  | 'Students'
   | 'CyberSec';
 
 export interface ToolMeta {

src/tools/index.ts

@@ -145,6 +145,10 @@ export const filterToolsByUserTypes = (
   if (userTypes.length === 0) return tools;
 
   return tools.filter((tool) => {
+    // Always treat xml tools as dev-only
+    if (tool.type === 'xml') {
+      return userTypes.includes('Developers');
+    }
     // If tool has no userTypes defined, show it to all users
     if (!tool.userTypes || tool.userTypes.length === 0) return true;