made a preferences element to group/ungroup sen5x stuff

src/pages/Devices.tsx

@@ -1,5 +1,5 @@
 import { DeveloperBoard as ProvisionIcon, LibraryAdd as CreateGroupIcon, Tune } from "@mui/icons-material";
-import { Box, Chip, Dialog, DialogTitle, Grid2, IconButton, Menu, MenuItem, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
+import { Box, Checkbox, Chip, Grid2, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, Skeleton, Tab, Tabs, Theme, Tooltip, Typography, useTheme } from "@mui/material";
 import { blue, green, orange } from "@mui/material/colors";
 import { makeStyles } from "@mui/styles";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -123,7 +123,7 @@ export default function Devices() {
   const [groupSettingsIsOpen, setGroupSettingsIsOpen] = useState<boolean>(false);
 
   const [fieldContains, setFieldContains] = useState<Map<string, string>>(new Map<string, string>())
-  const [seperateDust, setSeperateDust] = useState(true)
+  const [seperateDust, setSeperateDust] = useState(false)
 
   const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
 
@@ -533,6 +533,8 @@ export default function Devices() {
     )
   }
 
+
+
   const preferencesMenu = () => {
     return (
       <Menu
@@ -541,8 +543,17 @@ export default function Devices() {
         open={preferencesAnchor !== null}
         onClose={() => setPreferencesAnchor(null)}
         disableAutoFocusItem>
-          <MenuItem>
-            hi
+          <MenuItem 
+            onClick={() => setSeperateDust(!seperateDust)}
+            sx={{ marginLeft: -0.75 }}
+            dense
+          >
+            <ListItemIcon>
+              <Checkbox 
+                checked={seperateDust}
+              />
+            </ListItemIcon>
+            <ListItemText primary={"Seperate Dust"} />
           </MenuItem>
       </Menu>
     )