From bd920dfc869ad085885c96e4094701f5a947eae9 Mon Sep 17 00:00:00 2001
From: Aimsucks <contact@aimsucks.space>
Date: Tue, 14 Jun 2022 17:45:22 +0000
Subject: [PATCH 1/3] :sparkles: App card width slider

Added a slider to determine the XL app card width
---
 src/components/AppShelf/AppShelf.tsx          |  9 +++-
 src/components/Settings/AdvancedSettings.tsx  |  2 +
 .../Settings/AppCardWidthSelector.tsx         | 41 +++++++++++++++++++
 src/tools/types.ts                            |  1 +
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Settings/AppCardWidthSelector.tsx

diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 97b028997..b46259291 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/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>
             ))}
diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index b00a11933..ad4517457 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Settings/AppCardWidthSelector.tsx b/src/components/Settings/AppCardWidthSelector.tsx
new file mode 100644
index 000000000..5d1b9a066
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/tools/types.ts b/src/tools/types.ts
index 92d5345ac..4cb8a8291 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -12,6 +12,7 @@ export interface Settings {
   background?: string;
   appOpacity?: number;
   widgetPosition?: string;
+  appCardWidth?: number;
 }
 
 export interface Config {

From 4981823c37df39ea7dc610ac95edadb8a19945a2 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Tue, 14 Jun 2022 22:09:30 +0200
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=94=A7=20Tweak=20values=20on=20the=20?=
 =?UTF-8?q?slider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/AppCardWidthSelector.tsx         | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/Settings/AppCardWidthSelector.tsx b/src/components/Settings/AppCardWidthSelector.tsx
index 5d1b9a066..f2f30ff01 100644
--- a/src/components/Settings/AppCardWidthSelector.tsx
+++ b/src/components/Settings/AppCardWidthSelector.tsx
@@ -6,12 +6,12 @@ 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' },
+    { value: 0.8 },
+    { value: 1 },
+    { value: 1.2 },
+    { value: 1.4 },
+    { value: 1.6 },
+    { value: 2 },
   ];
 
   const setappCardWidth = (appCardWidth: number) => {
@@ -28,10 +28,11 @@ export function AppCardWidthSelector() {
     <Group direction="column" spacing="xs" grow>
       <Text>App Width</Text>
       <Slider
-        defaultValue={config.settings.appCardWidth || 6}
-        step={1}
-        min={1}
-        max={12}
+        label={null}
+        defaultValue={config.settings.appCardWidth}
+        step={0.2}
+        min={0.8}
+        max={2}
         marks={MARKS}
         styles={{ markLabel: { fontSize: 'xx-small' } }}
         onChange={(value) => setappCardWidth(value)}

From 14a40d9f6654e267349cb5d98fb7384de56fed79 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Mon, 20 Jun 2022 10:24:22 +0200
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=94=A7=20Tweak=20values=20and=20UI=20?=
 =?UTF-8?q?changes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/AppCardWidthSelector.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/components/Settings/AppCardWidthSelector.tsx b/src/components/Settings/AppCardWidthSelector.tsx
index f2f30ff01..945778e67 100644
--- a/src/components/Settings/AppCardWidthSelector.tsx
+++ b/src/components/Settings/AppCardWidthSelector.tsx
@@ -5,15 +5,6 @@ import { useConfig } from '../../tools/state';
 export function AppCardWidthSelector() {
   const { config, setConfig } = useConfig();
 
-  const MARKS = [
-    { value: 0.8 },
-    { value: 1 },
-    { value: 1.2 },
-    { value: 1.4 },
-    { value: 1.6 },
-    { value: 2 },
-  ];
-
   const setappCardWidth = (appCardWidth: number) => {
     setConfig({
       ...config,
@@ -33,7 +24,6 @@ export function AppCardWidthSelector() {
         step={0.2}
         min={0.8}
         max={2}
-        marks={MARKS}
         styles={{ markLabel: { fontSize: 'xx-small' } }}
         onChange={(value) => setappCardWidth(value)}
       />