feat: Custom Unsplash Collections

Co-authored-by: David Ralph <me@davidcralph.co.uk>

package.json

@@ -16,13 +16,13 @@
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom": "2.0.5",
     "@fontsource/lexend-deca": "5.0.8",
-    "@fontsource/montserrat": "5.0.8",
+    "@fontsource/montserrat": "5.0.16",
     "@muetab/react-color-gradient-picker": "0.1.2",
     "@muetab/react-sortable-hoc": "^2.0.1",
     "@mui/material": "5.15.3",
     "@sentry/react": "^7.92.0",
     "embla-carousel-autoplay": "8.0.0-rc19",
-    "embla-carousel-react": "8.0.0-rc18",
+    "embla-carousel-react": "8.0.0-rc19",
     "fast-blurhash": "^1.1.2",
     "image-conversion": "^2.1.1",
     "react": "^18.2.0",
@@ -44,9 +44,9 @@
     "husky": "^8.0.3",
     "prettier": "^3.1.1",
     "sass": "^1.69.7",
-    "stylelint": "^15.11.0",
-    "stylelint-config-standard-scss": "^11.1.0",
-    "stylelint-scss": "^5.3.2",
+    "stylelint": "^16.1.0",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-scss": "^6.0.0",
     "vite": "5.0.11",
     "vite-plugin-progress": "^0.0.7"
   },

src/components/modals/main/scss/settings/modules/_material-ui.scss

@@ -170,3 +170,11 @@ legend,
 
   text-transform: capitalize;
 }
+
+.MuiChip-root {
+  text-transform: capitalize;
+  @include themed {
+    background: t($modal-sidebarActive) !important;
+    color: t($color) !important;
+  }
+}

src/components/modals/main/settings/ChipSelect.jsx

@@ -45,7 +45,8 @@ function ChipSelect({ label, options, name }) {
         >
           {options.map((option) => (
             <MenuItem key={option.name} value={option.name}>
-              {option.name.charAt(0).toUpperCase() + option.name.slice(1)} ({option.count})
+              {option.name.charAt(0).toUpperCase() + option.name.slice(1)}{' '}
+              {option.count && `(${option.count})`}
             </MenuItem>
           ))}
         </Select>

src/components/modals/main/settings/Text.jsx

@@ -68,6 +68,7 @@ class Text extends PureComponent {
             onChange={this.handleChange}
             varient="outlined"
             InputLabelProps={{ shrink: true }}
+            placeholder={this.props.placeholder || ''}
           />
         )}
         <span className="link" onClick={this.resetItem}>

src/components/modals/main/settings/sections/background/Background.jsx

@@ -10,6 +10,7 @@ import Dropdown from '../../Dropdown';
 import Slider from '../../Slider';
 import Radio from '../../Radio';
 import SettingsItem from '../../SettingsItem';
+import Text from '../../Text';
 
 import ColourSettings from './Colour';
 import CustomSettings from './Custom';
@@ -42,11 +43,38 @@ export default class BackgroundSettings extends PureComponent {
       return;
     }
 
+    if (this.state.backgroundAPI !== 'mue') {
+      // remove counts from unsplash categories
+      data.forEach((category) => {
+        delete category.count;
+      });
+    }
+
     this.setState({
       backgroundCategories: data,
+      backgroundCategoriesOG: data,
     });
   }
 
+  updateAPI(e) {
+    if (e === 'mue') {
+      this.setState({
+        backgroundCategories: this.state.backgroundCategoriesOG,
+        backgroundAPI: 'mue',
+      });
+    } else {
+      const data = this.state.backgroundCategories;
+      data.forEach((category) => {
+        delete category.count;
+      });
+
+      this.setState({
+        backgroundAPI: 'unsplash',
+        backgroundCategories: data,
+      });
+    }
+  }
+
   componentDidMount() {
     if (navigator.onLine === false || localStorage.getItem('offlineMode') === 'true') {
       return this.setState({
@@ -108,7 +136,7 @@ export default class BackgroundSettings extends PureComponent {
         <SettingsItem
           title={variables.getMessage('modals.main.settings.sections.background.api')}
           subtitle={variables.getMessage('modals.main.settings.sections.background.api_subtitle')}
-          final={true}
+          final={this.state.backgroundAPI === 'mue'}
         >
           {this.state.backgroundCategories[0] === variables.getMessage('modals.main.loading') ? (
             <>
@@ -172,9 +200,25 @@ export default class BackgroundSettings extends PureComponent {
             name="backgroundAPI"
             category="background"
             element="#backgroundImage"
-            onChange={(e) => this.setState({ backgroundAPI: e })}
+            onChange={(e) => this.updateAPI(e)}
           />
         </SettingsItem>
+        {this.state.backgroundAPI === 'unsplash' && (
+          <SettingsItem
+            title="Unsplash Collection(s)"
+            subtitle="Select the collection(s) you want to use for your background"
+            final={true}
+          >
+            <Text
+              title="Collection ID(s)"
+              subtitle="Enter the collection ID(s) you want to use for your background"
+              placeholder="e.g. 123456, 654321"
+              name="unsplashCollections"
+              category="background"
+              element="#backgroundImage"
+            />
+          </SettingsItem>
+        )}
       </>
     );
 

src/components/widgets/background/Background.jsx

@@ -109,9 +109,9 @@ export default class Background extends PureComponent {
     switch (backgroundAPI) {
       case 'unsplash':
       case 'pexels':
-        const collection = localStorage.getItem('apiCollection');
+        const collection = localStorage.getItem('unsplashCollections');
         if (collection) {
-          requestURL = `${variables.constants.API_URL}/images/unsplash?collection=${collection}&quality=${apiQuality}`;
+          requestURL = `${variables.constants.API_URL}/images/unsplash?collections=${collection}&quality=${apiQuality}`;
         } else {
           requestURL = `${variables.constants.API_URL}/images/unsplash?categories=${apiCategories}&quality=${apiQuality}`;
         }