feat: improved structure of settings

data/constants.ts

@@ -1,3 +1,3 @@
 export const REPO_URL = 'ajnart/homarr';
-export const CURRENT_VERSION = 'v0.10.7';
+export const CURRENT_VERSION = 'v0.11';
 export const ICON_PICKER_SLICE_LIMIT = 36;

src/components/Settings/Common/CommonSettings.tsx

@@ -1,10 +1,10 @@
 import { Space, Stack, Text } from '@mantine/core';
-import { useConfigContext } from '../../config/provider';
-import ConfigChanger from '../Config/ConfigChanger';
-import ConfigActions from './Common/ConfigActions';
-import LanguageSelect from './Common/LanguageSelect';
-import { SearchEngineSelector } from './Common/SearchEngineSelector';
-import { SearchNewTabSwitch } from './Common/SearchNewTabSwitch';
+import { useConfigContext } from '../../../config/provider';
+import ConfigChanger from '../../Config/ConfigChanger';
+import ConfigActions from './Config/ConfigActions';
+import LanguageSelect from './Language/LanguageSelect';
+import { SearchEngineSelector } from './SearchEngine/SearchEngineSelector';
+import { SearchNewTabSwitch } from './SearchNewTabSwitch';
 
 export default function CommonSettings() {
   const { config } = useConfigContext();

src/components/Settings/Common/Config/ConfigActions.tsx

@@ -1,13 +1,13 @@
-import { Button, Center, Group } from '@mantine/core';
+import { ActionIcon, Center, createStyles, Flex, Text, useMantineTheme } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
-import { IconCheck, IconDownload, IconPlus, IconTrash, IconX } from '@tabler/icons';
+import { IconCheck, IconCopy, IconDownload, IconTrash, IconX } from '@tabler/icons';
 import { useMutation } from '@tanstack/react-query';
 import fileDownload from 'js-file-download';
 import { useTranslation } from 'next-i18next';
-import { useConfigContext } from '../../../config/provider';
-import Tip from '../../layout/Tip';
-import { CreateConfigCopyModal } from './ConfigActions/CreateCopyModal';
+import { useConfigContext } from '../../../../config/provider';
+import Tip from '../../../layout/Tip';
+import { CreateConfigCopyModal } from './CreateCopyModal';
 
 export default function ConfigActions() {
   const { t } = useTranslation(['settings/general/config-changer', 'settings/common']);
@@ -26,6 +26,9 @@ export default function ConfigActions() {
     await mutateAsync();
   };
 
+  const { classes } = useStyles();
+  const { colors } = useMantineTheme();
+
   return (
     <>
       <CreateConfigCopyModal
@@ -33,32 +36,25 @@ export default function ConfigActions() {
         closeModal={createCopyModal.close}
         initialConfigName={config.configProperties.name}
       />
-      <Group spacing="xs" position="center">
-        <Button
-          size="xs"
-          leftIcon={<IconDownload size={18} />}
-          variant="default"
-          onClick={handleDownload}
-        >
-          {t('buttons.download')}
-        </Button>
-        <Button
-          size="xs"
-          leftIcon={<IconTrash size={18} />}
-          variant="default"
+      <Flex gap="xs" justify="stretch">
+        <ActionIcon className={classes.actionIcon} onClick={handleDownload} variant="default">
+          <IconDownload size={20} />
+          <Text>{t('buttons.download')}</Text>
+        </ActionIcon>
+        <ActionIcon
+          className={classes.actionIcon}
           onClick={handleDeletion}
+          color="red"
+          variant="light"
         >
-          {t('buttons.delete.text')}
-        </Button>
-        <Button
-          size="xs"
-          leftIcon={<IconPlus size={18} />}
-          variant="default"
-          onClick={createCopyModal.open}
-        >
-          {t('buttons.saveCopy')}
-        </Button>
-      </Group>
+          <IconTrash color={colors.red[2]} size={20} />
+          <Text>{t('buttons.delete.text')}</Text>
+        </ActionIcon>
+        <ActionIcon className={classes.actionIcon} onClick={createCopyModal.open} variant="default">
+          <IconCopy size={20} />
+          <Text>{t('buttons.saveCopy')}</Text>
+        </ActionIcon>
+      </Flex>
 
       <Center>
         <Tip>{t('settings/common:tips.configTip')}</Tip>
@@ -67,6 +63,23 @@ export default function ConfigActions() {
   );
 }
 
+const useStyles = createStyles(() => ({
+  actionIcon: {
+    width: 'auto',
+    height: 'auto',
+    maxWidth: 'auto',
+    maxHeight: 'auto',
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    rowGap: 10,
+    padding: 10,
+  },
+}));
+
 const useDeleteConfigMutation = (configName: string) => {
   const { t } = useTranslation(['settings/general/config-changer']);
 

src/components/Settings/Common/Credits.tsx

@@ -2,7 +2,7 @@ import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
 import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 
-import { CURRENT_VERSION } from '../../../data/constants';
+import { CURRENT_VERSION } from '../../../../data/constants';
 
 export default function Credits() {
   const { t } = useTranslation('settings/common');

src/components/Settings/Common/Language/LanguageSelect.tsx

@@ -5,7 +5,7 @@ import { forwardRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { getCookie, setCookie } from 'cookies-next';
-import { getLanguageByCode, Language } from '../../../tools/language';
+import { getLanguageByCode, Language } from '../../../../tools/language';
 
 export default function LanguageSelect() {
   const { t, i18n } = useTranslation('settings/general/internationalization');

src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx

@@ -2,13 +2,12 @@ import { Alert, Paper, SegmentedControl, Space, Stack, TextInput, Title } from '
 import { IconInfoCircle } from '@tabler/icons';
 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';
 import {
   CommonSearchEngineCommonSettingsType,
   SearchEngineCommonSettingsType,
-} from '../../../types/settings';
-import Tip from '../../layout/Tip';
+} from '../../../../types/settings';
 import { SearchNewTabSwitch } from './SearchNewTabSwitch';
 
 interface Props {

src/components/Settings/Common/SearchEngine/SearchNewTabSwitch.tsx

@@ -1,9 +1,9 @@
 import { Switch } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-import { useConfigContext } from '../../../config/provider';
-import { useConfigStore } from '../../../config/store';
-import { SearchEngineCommonSettingsType } from '../../../types/settings';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
+import { SearchEngineCommonSettingsType } from '../../../../types/settings';
 
 interface SearchNewTabSwitchProps {
   defaultValue: boolean | undefined;

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -1,15 +1,15 @@
 import { Stack } from '@mantine/core';
-import { useConfigContext } from '../../config/provider';
-import { ColorSelector } from './Customization/ColorSelector';
-import { BackgroundChanger } from './Customization/BackgroundChanger';
-import { CustomCssChanger } from './Customization/CustomCssChanger';
-import { FaviconChanger } from './Customization/FaviconChanger';
-import { LogoImageChanger } from './Customization/LogoImageChanger';
-import { MetaTitleChanger } from './Customization/MetaTitleChanger';
-import { PageTitleChanger } from './Customization/PageTitleChanger';
-import { OpacitySelector } from './Customization/OpacitySelector';
-import { ShadeSelector } from './Customization/ShadeSelector';
-import { LayoutSelector } from './Customization/LayoutSelector';
+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();

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;

src/components/Settings/SettingsDrawer.tsx

@@ -4,9 +4,9 @@ import { useState } from 'react';
 import { IconSettings } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 
-import CustomizationSettings from './CustomizationSettings';
-import CommonSettings from './CommonSettings';
-import Credits from './Credits';
+import CustomizationSettings from './Customization/CustomizationSettings';
+import CommonSettings from './Common/CommonSettings';
+import Credits from './Common/Credits';
 
 function SettingsMenu() {
   const { t } = useTranslation('settings/common');