feat: improved structure of settings

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -0,0 +1,35 @@
+import { Stack } from '@mantine/core';
+import { useConfigContext } from '../../../config/provider';
+import { ColorSelector } from './Theme/ColorSelector';
+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 { OpacitySelector } from './Theme/OpacitySelector';
+import { ShadeSelector } from './Theme/ShadeSelector';
+import { LayoutSelector } from './Layout/LayoutSelector';
+
+export default function CustomizationSettings() {
+  const { config } = useConfigContext();
+
+  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} />
+    </Stack>
+  );
+}

src/components/Settings/Customization/Layout/LayoutSelector.tsx

@@ -11,10 +11,10 @@ import {
 } from '@mantine/core';
 import { IconBrandDocker, IconLayout, IconSearch } from '@tabler/icons';
 import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
-import { CustomizationSettingsType } from '../../../types/settings';
-import { Logo } from '../../layout/Logo';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
+import { CustomizationSettingsType } from '../../../../types/settings';
+import { Logo } from '../../../layout/Logo';
 
 interface LayoutSelectorProps {
   defaultLayout: CustomizationSettingsType['layout'] | undefined;

src/components/Settings/Customization/Meta/BackgroundChanger.tsx

@@ -1,8 +1,8 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 
 interface BackgroundChangerProps {
   defaultValue: string | undefined;
@@ -17,7 +17,7 @@ export const BackgroundChanger = ({ defaultValue }: BackgroundChangerProps) => {
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
-    const value = ev.currentTarget.value;
+    const { value } = ev.currentTarget;
     const backgroundImageUrl = value.trim().length === 0 ? undefined : value;
     setBackgroundImageUrl(backgroundImageUrl);
     updateConfig(configName, (prev) => ({

src/components/Settings/Customization/Meta/FaviconChanger.tsx

@@ -1,8 +1,8 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 
 interface FaviconChangerProps {
   defaultValue: string | undefined;
@@ -17,7 +17,7 @@ export const FaviconChanger = ({ defaultValue }: FaviconChangerProps) => {
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
-    const value = ev.currentTarget.value;
+    const { value } = ev.currentTarget;
     const faviconUrl = value.trim().length === 0 ? undefined : value;
     setFaviconUrl(faviconUrl);
     updateConfig(configName, (prev) => ({

src/components/Settings/Customization/Meta/LogoImageChanger.tsx

@@ -1,8 +1,8 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 
 interface LogoImageChangerProps {
   defaultValue: string | undefined;
@@ -17,7 +17,7 @@ export const LogoImageChanger = ({ defaultValue }: LogoImageChangerProps) => {
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
-    const value = ev.currentTarget.value;
+    const { value } = ev.currentTarget;
     const logoImageSrc = value.trim().length === 0 ? undefined : value;
     setLogoImageSrc(logoImageSrc);
     updateConfig(configName, (prev) => ({

src/components/Settings/Customization/Meta/MetaTitleChanger.tsx

@@ -1,8 +1,8 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 
 interface MetaTitleChangerProps {
   defaultValue: string | undefined;
@@ -18,7 +18,7 @@ export const MetaTitleChanger = ({ defaultValue }: MetaTitleChangerProps) => {
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
-    const value = ev.currentTarget.value;
+    const { value } = ev.currentTarget;
     const metaTitle = value.trim().length === 0 ? undefined : value;
     setMetaTitle(metaTitle);
     updateConfig(configName, (prev) => ({

src/components/Settings/Customization/Meta/PageTitleChanger.tsx

@@ -1,8 +1,8 @@
 import { TextInput } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 
 interface PageTitleChangerProps {
   defaultValue: string | undefined;
@@ -18,7 +18,7 @@ export const PageTitleChanger = ({ defaultValue }: PageTitleChangerProps) => {
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
-    const value = ev.currentTarget.value;
+    const { value } = ev.currentTarget;
     const pageTitle = value.trim().length === 0 ? undefined : value;
     setPageTitle(pageTitle);
     updateConfig(configName, (prev) => ({

src/components/Settings/Customization/Theme/ColorSelector.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import {
   ColorSwatch,
   Grid,
@@ -8,11 +7,12 @@ import {
   Text,
   useMantineTheme,
 } from '@mantine/core';
-import { useTranslation } from 'next-i18next';
-import { useColorTheme } from '../../../tools/color';
 import { useDisclosure } from '@mantine/hooks';
-import { useConfigStore } from '../../../config/store';
-import { useConfigContext } from '../../../config/provider';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
+import { useColorTheme } from '../../../../tools/color';
 
 interface ColorControlProps {
   defaultValue: MantineTheme['primaryColor'] | undefined;
@@ -40,7 +40,7 @@ export function ColorSelector({ type, defaultValue }: ColorControlProps) {
     if (type === 'primary') setPrimaryColor(color);
     else setSecondaryColor(color);
     updateConfig(configName, (prev) => {
-      const colors = prev.settings.customization.colors;
+      const { colors } = prev.settings.customization;
       colors[type] = color;
       return {
         ...prev,

src/components/Settings/Customization/Theme/CustomCssChanger.tsx

@@ -1,8 +1,8 @@
 import { Textarea } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { ChangeEventHandler, useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 
 interface CustomCssChangerProps {
   defaultValue: string | undefined;
@@ -17,7 +17,7 @@ export const CustomCssChanger = ({ defaultValue }: CustomCssChangerProps) => {
   if (!configName) return null;
 
   const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (ev) => {
-    const value = ev.currentTarget.value;
+    const { value } = ev.currentTarget;
     const customCss = value.trim().length === 0 ? undefined : value;
     setCustomCss(customCss);
     updateConfig(configName, (prev) => ({

src/components/Settings/Customization/Theme/OpacitySelector.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import { Text, Slider, Stack } from '@mantine/core';
+import { Slider, Stack, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
+import { useState } from 'react';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
 
 interface OpacitySelectorProps {
   defaultValue: number | undefined;

src/components/Settings/Customization/Theme/ShadeSelector.tsx

@@ -1,19 +1,19 @@
-import React, { useState } from 'react';
 import {
   ColorSwatch,
+  Grid,
   Group,
+  MantineTheme,
   Popover,
+  Stack,
   Text,
   useMantineTheme,
-  MantineTheme,
-  Stack,
-  Grid,
 } from '@mantine/core';
-import { useTranslation } from 'next-i18next';
-import { useColorTheme } from '../../../tools/color';
 import { useDisclosure } from '@mantine/hooks';
-import { useConfigStore } from '../../../config/store';
-import { useConfigContext } from '../../../config/provider';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
+import { useColorTheme } from '../../../../tools/color';
 
 interface ShadeSelectorProps {
   defaultValue: MantineTheme['primaryShade'] | undefined;