From da3e412c635359c575494947df2b9e091edabb9d Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Wed, 30 Nov 2022 09:00:29 +0900
Subject: [PATCH] Add growth option for the main appshelf

---
 public/locales/en/settings/common.json        |  3 +-
 src/components/AppShelf/AppShelf.tsx          |  2 +-
 src/components/Settings/AdvancedSettings.tsx  |  2 ++
 src/components/Settings/GrowthSelector.tsx    | 30 +++++++++++++++++++
 .../WidgetsPositionSwitch.tsx                 | 16 ++++------
 src/tools/types.ts                            |  1 +
 6 files changed, 42 insertions(+), 12 deletions(-)
 create mode 100644 src/components/Settings/GrowthSelector.tsx

diff --git a/public/locales/en/settings/common.json b/public/locales/en/settings/common.json
index 776816b2a..4ff9b984e 100644
--- a/public/locales/en/settings/common.json
+++ b/public/locales/en/settings/common.json
@@ -10,5 +10,6 @@
   },
   "credits": {
     "madeWithLove": "Made with ❤️ by @"
-  }
+  },
+  "grow": "Grow grid (take all space)"
 }
\ No newline at end of file
diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 61587b8bf..efcd7d0f7 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -95,7 +95,7 @@ const AppShelf = (props: any) => {
         onDragEnd={handleDragEnd}
       >
         <SortableContext items={config.services}>
-          <Grid gutter="lg" align="center">
+          <Grid gutter="lg" grow={config.settings.grow}>
             {filtered.map((service) => (
               <Grid.Col key={service.id} span="content">
                 <SortableItem service={service} key={service.id} id={service.id}>
diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx
index a3b54cd77..3d5b7bd96 100644
--- a/src/components/Settings/AdvancedSettings.tsx
+++ b/src/components/Settings/AdvancedSettings.tsx
@@ -6,6 +6,7 @@ import { ColorSelector } from './ColorSelector';
 import { OpacitySelector } from './OpacitySelector';
 import { AppCardWidthSelector } from './AppCardWidthSelector';
 import { ShadeSelector } from './ShadeSelector';
+import { GrowthSelector } from './GrowthSelector';
 
 export default function TitleChanger() {
   const { config, setConfig } = useConfig();
@@ -74,6 +75,7 @@ export default function TitleChanger() {
           <Button type="submit">{t('buttons.submit')}</Button>
         </Stack>
       </form>
+      <GrowthSelector />
       <ColorSelector type="primary" />
       <ColorSelector type="secondary" />
       <ShadeSelector />
diff --git a/src/components/Settings/GrowthSelector.tsx b/src/components/Settings/GrowthSelector.tsx
new file mode 100644
index 000000000..4eb5af861
--- /dev/null
+++ b/src/components/Settings/GrowthSelector.tsx
@@ -0,0 +1,30 @@
+import { Switch } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import { useConfig } from '../../tools/state';
+
+export function GrowthSelector() {
+  const { config, setConfig } = useConfig();
+  const defaultPosition = config?.settings?.grow || false;
+  const [growState, setGrowState] = useState(defaultPosition);
+  const { t } = useTranslation('settings/common.json');
+  const toggleGrowState = () => {
+    setGrowState(!growState);
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        grow: !growState,
+      },
+    });
+  };
+
+  return (
+    <Switch
+      label={t('settings/common:grow')}
+      checked={growState === true}
+      onChange={() => toggleGrowState()}
+      size="md"
+    />
+  );
+}
diff --git a/src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx b/src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx
index e7ccdc2a2..beee55b52 100644
--- a/src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx
+++ b/src/components/WidgetsPositionSwitch/WidgetsPositionSwitch.tsx
@@ -48,15 +48,11 @@ export function WidgetsPositionSwitch() {
   };
 
   return (
-    <Group>
-      <div className={classes.root}>
-        <Switch
-          checked={widgetPosition === 'left'}
-          onChange={() => toggleWidgetPosition()}
-          size="md"
-        />
-      </div>
-      {t('label')}
-    </Group>
+    <Switch
+      label={t('label')}
+      checked={widgetPosition === 'left'}
+      onChange={() => toggleWidgetPosition()}
+      size="md"
+    />
   );
 }
diff --git a/src/tools/types.ts b/src/tools/types.ts
index 7e2220110..68d8d75e7 100644
--- a/src/tools/types.ts
+++ b/src/tools/types.ts
@@ -14,6 +14,7 @@ export interface Settings {
   customCSS?: string;
   appOpacity?: number;
   widgetPosition?: string;
+  grow?: boolean;
   appCardWidth?: number;
 }