✨ Add update buttom for customization settings

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -1,21 +1,33 @@
-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">
+      <ScrollArea style={{ height: '76vh' }} offsetScrollbars>
         <LayoutSelector defaultLayout={config?.settings.customization.layout} />
         <PageTitleChanger defaultValue={config?.settings.customization.pageTitle} />
         <MetaTitleChanger defaultValue={config?.settings.customization.metaTitle} />
@@ -23,13 +35,19 @@ export default function CustomizationSettings() {
         <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="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>
   );
 }

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>
       </Tabs.Panel>
     </Tabs>
   );