From 0d93de86a7e9a4413122e07ac2b40a1cdb9fb0b4 Mon Sep 17 00:00:00 2001
From: Manuel Ruwe <manuel.ruwe@bluewin.ch>
Date: Sat, 24 Dec 2022 15:43:49 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20update=20buttom=20for=20custo?=
 =?UTF-8?q?mization=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Customization/CustomizationSettings.tsx   | 56 ++++++++++++-------
 src/components/Settings/SettingsDrawer.tsx    |  8 +--
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/components/Settings/Customization/CustomizationSettings.tsx b/src/components/Settings/Customization/CustomizationSettings.tsx
index 585389291..5b6def2dc 100644
--- a/src/components/Settings/Customization/CustomizationSettings.tsx
+++ b/src/components/Settings/Customization/CustomizationSettings.tsx
@@ -1,35 +1,53 @@
-import { Stack } from '@mantine/core';
+import { Button, ScrollArea, Stack } from '@mantine/core';
 import { useConfigContext } from '../../../config/provider';
-import { ColorSelector } from './Theme/ColorSelector';
+import { useConfigStore } from '../../../config/store';
+import { LayoutSelector } from './Layout/LayoutSelector';
 import { BackgroundChanger } from './Meta/BackgroundChanger';
-import { CustomCssChanger } from './Theme/CustomCssChanger';
 import { FaviconChanger } from './Meta/FaviconChanger';
 import { LogoImageChanger } from './Meta/LogoImageChanger';
 import { MetaTitleChanger } from './Meta/MetaTitleChanger';
 import { PageTitleChanger } from './Meta/PageTitleChanger';
+import { ColorSelector } from './Theme/ColorSelector';
+import { CustomCssChanger } from './Theme/CustomCssChanger';
 import { OpacitySelector } from './Theme/OpacitySelector';
 import { ShadeSelector } from './Theme/ShadeSelector';
-import { LayoutSelector } from './Layout/LayoutSelector';
 
 export default function CustomizationSettings() {
-  const { config } = useConfigContext();
+  const { config, name: configName } = useConfigContext();
+
+  const { updateConfig } = useConfigStore();
+
+  const saveConfiguration = () => {
+    if (!configName || !config) {
+      return;
+    }
+
+    updateConfig(configName, (_) => config, false, true);
+  };
 
   return (
     <Stack mb="md" mr="sm" mt="xs">
-      <LayoutSelector defaultLayout={config?.settings.customization.layout} />
-      <PageTitleChanger defaultValue={config?.settings.customization.pageTitle} />
-      <MetaTitleChanger defaultValue={config?.settings.customization.metaTitle} />
-      <LogoImageChanger defaultValue={config?.settings.customization.logoImageUrl} />
-      <FaviconChanger defaultValue={config?.settings.customization.faviconUrl} />
-      <BackgroundChanger defaultValue={config?.settings.customization.backgroundImageUrl} />
-      <CustomCssChanger defaultValue={config?.settings.customization.customCss} />
-      <ColorSelector type="primary" defaultValue={config?.settings.customization.colors.primary} />
-      <ColorSelector
-        type="secondary"
-        defaultValue={config?.settings.customization.colors.secondary}
-      />
-      <ShadeSelector defaultValue={config?.settings.customization.colors.shade} />
-      <OpacitySelector defaultValue={config?.settings.customization.appOpacity} />
+      <ScrollArea style={{ height: '76vh' }} offsetScrollbars>
+        <LayoutSelector defaultLayout={config?.settings.customization.layout} />
+        <PageTitleChanger defaultValue={config?.settings.customization.pageTitle} />
+        <MetaTitleChanger defaultValue={config?.settings.customization.metaTitle} />
+        <LogoImageChanger defaultValue={config?.settings.customization.logoImageUrl} />
+        <FaviconChanger defaultValue={config?.settings.customization.faviconUrl} />
+        <BackgroundChanger defaultValue={config?.settings.customization.backgroundImageUrl} />
+        <CustomCssChanger defaultValue={config?.settings.customization.customCss} />
+        <ColorSelector
+          type="primary"
+          defaultValue={config?.settings.customization.colors.primary}
+        />
+        <ColorSelector
+          type="secondary"
+          defaultValue={config?.settings.customization.colors.secondary}
+        />
+        <ShadeSelector defaultValue={config?.settings.customization.colors.shade} />
+        <OpacitySelector defaultValue={config?.settings.customization.appOpacity} />
+      </ScrollArea>
+
+      <Button onClick={saveConfiguration} variant="light">Save Customizations</Button>
     </Stack>
   );
 }
diff --git a/src/components/Settings/SettingsDrawer.tsx b/src/components/Settings/SettingsDrawer.tsx
index f951ae585..bdd4bc4e8 100644
--- a/src/components/Settings/SettingsDrawer.tsx
+++ b/src/components/Settings/SettingsDrawer.tsx
@@ -1,9 +1,9 @@
-import { Title, Drawer, Tabs, ScrollArea } from '@mantine/core';
+import { Drawer, ScrollArea, Tabs, Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 
-import CustomizationSettings from './Customization/CustomizationSettings';
 import CommonSettings from './Common/CommonSettings';
 import Credits from './Common/Credits';
+import CustomizationSettings from './Customization/CustomizationSettings';
 
 function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
   const { t } = useTranslation('settings/common');
@@ -20,9 +20,7 @@ function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string })
         </ScrollArea>
       </Tabs.Panel>
       <Tabs.Panel value="customization">
-        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
-          <CustomizationSettings />
-        </ScrollArea>
+        <CustomizationSettings />
       </Tabs.Panel>
     </Tabs>
   );