✨ App card width slider

Added a slider to determine the XL app card width

src/components/AppShelf/AppShelf.tsx

@@ -101,7 +101,14 @@ const AppShelf = (props: any) => {
         <SortableContext items={config.services}>
           <Grid gutter="xl" align="center">
             {filtered.map((service) => (
-              <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
+              <Grid.Col
+                key={service.id}
+                span={6}
+                xl={config.settings.appCardWidth || 2}
+                xs={4}
+                sm={3}
+                md={3}
+              >
                 <SortableAppShelfItem service={service} key={service.id} id={service.id} />
               </Grid.Col>
             ))}

src/components/Settings/AdvancedSettings.tsx

@@ -3,6 +3,7 @@ import { useForm } from '@mantine/form';
 import { useConfig } from '../../tools/state';
 import { ColorSelector } from './ColorSelector';
 import { OpacitySelector } from './OpacitySelector';
+import { AppCardWidthSelector } from './AppCardWidthSelector';
 import { ShadeSelector } from './ShadeSelector';
 
 export default function TitleChanger() {
@@ -58,6 +59,7 @@ export default function TitleChanger() {
       <ColorSelector type="secondary" />
       <ShadeSelector />
       <OpacitySelector />
+      <AppCardWidthSelector />
     </Group>
   );
 }

src/components/Settings/AppCardWidthSelector.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function AppCardWidthSelector() {
+  const { config, setConfig } = useConfig();
+
+  const MARKS = [
+    { value: 1, label: '1' },
+    { value: 2, label: '2' },
+    { value: 3, label: '3' },
+    { value: 4, label: '4' },
+    { value: 6, label: '6' },
+    { value: 12, label: '12' },
+  ];
+
+  const setappCardWidth = (appCardWidth: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appCardWidth,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Width</Text>
+      <Slider
+        defaultValue={config.settings.appCardWidth || 6}
+        step={1}
+        min={1}
+        max={12}
+        marks={MARKS}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setappCardWidth(value)}
+      />
+    </Group>
+  );
+}

src/tools/types.ts

@@ -12,6 +12,7 @@ export interface Settings {
   background?: string;
   appOpacity?: number;
   widgetPosition?: string;
+  appCardWidth?: number;
 }
 
 export interface Config {