7.x Structural Changes (#637)

* refactor(files): Initial commit on experimental file structure

* refactor(structure): New components system

* refactor(structure): Tidy settings' components

* Refactor(structure): Component exports and imports

* refactor(settings): Use new component imports

* feat: unified background.js script

* fix(build): Partially, distributions still not ready

* feat: critical error on noscript, light theme support for it

* fix(background): Critical issue of code making every background #000

* refactor(welcome): Partition into different files + shared components
- This took too long and destroyed my sanity

---------

Co-authored-by: alexsparkes <turbomarshmello@gmail.com>
Co-authored-by: alexsparkes <alexsparkes@gmail.com>

src/components/Form/Settings/ChipSelect/ChipSelect.jsx

@@ -0,0 +1,58 @@
+import { useState, memo } from 'react';
+
+import Box from '@mui/material/Box';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Chip from '@mui/material/Chip';
+
+function ChipSelect({ label, options }) {
+  let start = (localStorage.getItem('apiCategories') || '').split(',');
+  if (start[0] === '') {
+    start = [];
+  }
+
+  const [optionsSelected, setoptionsSelected] = useState(start);
+
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    setoptionsSelected(typeof value === 'string' ? value.split(',') : value);
+    localStorage.setItem('apiCategories', value);
+  };
+
+  return (
+    <div>
+      <FormControl>
+        <InputLabel id="chipSelect-label">{label}</InputLabel>
+        <Select
+          labelId="chipSelect-label"
+          id="chipSelect"
+          multiple
+          value={optionsSelected}
+          onChange={handleChange}
+          input={<OutlinedInput id="select-multiple-chip" label={label} />}
+          renderValue={(optionsSelected) => (
+            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+              {optionsSelected.map((value) => (
+                <Chip key={value} label={value} />
+              ))}
+            </Box>
+          )}
+        >
+          {options.map((option) => (
+            <MenuItem key={option.name} value={option.name}>
+              {option.name.charAt(0).toUpperCase() + option.name.slice(1)}{' '}
+              {option.count && `(${option.count})`}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
+
+export default memo(ChipSelect);