Add growth option for the main appshelf

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 />

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"
+    />
+  );
+}