feat: improved structure of settings

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

@@ -0,0 +1,43 @@
+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';
+
+interface BackgroundChangerProps {
+  defaultValue: string | undefined;
+}
+
+export const BackgroundChanger = ({ defaultValue }: BackgroundChangerProps) => {
+  const { t } = useTranslation('settings/customization/page-appearance');
+  const updateConfig = useConfigStore((x) => x.updateConfig);
+  const { name: configName } = useConfigContext();
+  const [backgroundImageUrl, setBackgroundImageUrl] = useState(defaultValue);
+
+  if (!configName) return null;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
+    const { value } = ev.currentTarget;
+    const backgroundImageUrl = value.trim().length === 0 ? undefined : value;
+    setBackgroundImageUrl(backgroundImageUrl);
+    updateConfig(configName, (prev) => ({
+      ...prev,
+      settings: {
+        ...prev.settings,
+        customization: {
+          ...prev.settings.customization,
+          backgroundImageUrl,
+        },
+      },
+    }));
+  };
+
+  return (
+    <TextInput
+      label={t('background.label')}
+      placeholder="/imgs/background.png"
+      value={backgroundImageUrl}
+      onChange={handleChange}
+    />
+  );
+};

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

@@ -0,0 +1,43 @@
+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';
+
+interface FaviconChangerProps {
+  defaultValue: string | undefined;
+}
+
+export const FaviconChanger = ({ defaultValue }: FaviconChangerProps) => {
+  const { t } = useTranslation('settings/customization/page-appearance');
+  const updateConfig = useConfigStore((x) => x.updateConfig);
+  const { name: configName } = useConfigContext();
+  const [faviconUrl, setFaviconUrl] = useState(defaultValue);
+
+  if (!configName) return null;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
+    const { value } = ev.currentTarget;
+    const faviconUrl = value.trim().length === 0 ? undefined : value;
+    setFaviconUrl(faviconUrl);
+    updateConfig(configName, (prev) => ({
+      ...prev,
+      settings: {
+        ...prev.settings,
+        customization: {
+          ...prev.settings.customization,
+          faviconUrl,
+        },
+      },
+    }));
+  };
+
+  return (
+    <TextInput
+      label={t('favicon.label')}
+      placeholder="/imgs/favicon/favicon.svg"
+      value={faviconUrl}
+      onChange={handleChange}
+    />
+  );
+};

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

@@ -0,0 +1,43 @@
+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';
+
+interface LogoImageChangerProps {
+  defaultValue: string | undefined;
+}
+
+export const LogoImageChanger = ({ defaultValue }: LogoImageChangerProps) => {
+  const { t } = useTranslation('settings/customization/page-appearance');
+  const updateConfig = useConfigStore((x) => x.updateConfig);
+  const { name: configName } = useConfigContext();
+  const [logoImageSrc, setLogoImageSrc] = useState(defaultValue);
+
+  if (!configName) return null;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
+    const { value } = ev.currentTarget;
+    const logoImageSrc = value.trim().length === 0 ? undefined : value;
+    setLogoImageSrc(logoImageSrc);
+    updateConfig(configName, (prev) => ({
+      ...prev,
+      settings: {
+        ...prev.settings,
+        customization: {
+          ...prev.settings.customization,
+          logoImageUrl: logoImageSrc,
+        },
+      },
+    }));
+  };
+
+  return (
+    <TextInput
+      label={t('logo.label')}
+      placeholder="/imgs/logo/logo.png"
+      value={logoImageSrc}
+      onChange={handleChange}
+    />
+  );
+};

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

@@ -0,0 +1,44 @@
+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';
+
+interface MetaTitleChangerProps {
+  defaultValue: string | undefined;
+}
+
+// TODO: change to pageTitle
+export const MetaTitleChanger = ({ defaultValue }: MetaTitleChangerProps) => {
+  const { t } = useTranslation('settings/customization/page-appearance');
+  const updateConfig = useConfigStore((x) => x.updateConfig);
+  const { name: configName } = useConfigContext();
+  const [metaTitle, setMetaTitle] = useState(defaultValue);
+
+  if (!configName) return null;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
+    const { value } = ev.currentTarget;
+    const metaTitle = value.trim().length === 0 ? undefined : value;
+    setMetaTitle(metaTitle);
+    updateConfig(configName, (prev) => ({
+      ...prev,
+      settings: {
+        ...prev.settings,
+        customization: {
+          ...prev.settings.customization,
+          metaTitle,
+        },
+      },
+    }));
+  };
+
+  return (
+    <TextInput
+      label={t('metaTitle.label')}
+      placeholder={t('metaTitle.placeholder')}
+      value={metaTitle}
+      onChange={handleChange}
+    />
+  );
+};

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

@@ -0,0 +1,44 @@
+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';
+
+interface PageTitleChangerProps {
+  defaultValue: string | undefined;
+}
+
+// TODO: change to dashboard title
+export const PageTitleChanger = ({ defaultValue }: PageTitleChangerProps) => {
+  const { t } = useTranslation('settings/customization/page-appearance');
+  const updateConfig = useConfigStore((x) => x.updateConfig);
+  const { name: configName } = useConfigContext();
+  const [pageTitle, setPageTitle] = useState(defaultValue);
+
+  if (!configName) return null;
+
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (ev) => {
+    const { value } = ev.currentTarget;
+    const pageTitle = value.trim().length === 0 ? undefined : value;
+    setPageTitle(pageTitle);
+    updateConfig(configName, (prev) => ({
+      ...prev,
+      settings: {
+        ...prev.settings,
+        customization: {
+          ...prev.settings.customization,
+          pageTitle,
+        },
+      },
+    }));
+  };
+
+  return (
+    <TextInput
+      label={t('pageTitle.label')}
+      placeholder={t('pageTitle.placeholder')}
+      value={pageTitle}
+      onChange={handleChange}
+    />
+  );
+};