🌐 Fix translations for preferences page

public/locales/en/settings/customization/accessibility.json

@@ -1,11 +0,0 @@
-{
-    "disablePulse": {
-        "label": "Disable ping pulse",
-        "description": "By default, ping indicators in Homarr will pulse. This may be irritating. This slider will deactivate the animation"
-    },
-    "replaceIconsWithDots": {
-        "label": "Replace ping dots with icons",
-        "description": "For colorblind users, ping dots may be unrecognizable. This will replace indicators with icons"
-    },
-    "alert": "Are you missing something? We'll gladly extend the accessibility of Homarr"
-}

public/locales/en/user/preferences.json

@@ -0,0 +1,20 @@
+{
+    "accessibility": {
+        "disablePulse": {
+            "label": "Disable ping pulse",
+            "description": "By default, ping indicators in Homarr will pulse. This may be irritating. This slider will deactivate the animation"
+        },
+        "replaceIconsWithDots": {
+            "label": "Replace ping dots with icons",
+            "description": "For colorblind users, ping dots may be unrecognizable. This will replace indicators with icons"
+        }
+    },
+    "localization": {
+        "language": {
+            "label": "Language"
+        },
+        "firstDayOfWeek": {
+            "label": "First day of the week"
+        }
+    }
+}

src/components/Settings/Customization/Accessibility/AccessibilitySettings.tsx

@@ -1,10 +1,9 @@
-import { Alert, Stack, Switch } from '@mantine/core';
-import { IconInfoCircle } from '@tabler/icons-react';
+import { Stack, Switch } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { useFormContext } from '~/pages/user/preferences';
 
 export const AccessibilitySettings = () => {
-  const { t } = useTranslation('settings/customization/accessibility');
+  const { t } = useTranslation('user/preferences');
 
   const form = useFormContext();
 
@@ -21,10 +20,6 @@ export const AccessibilitySettings = () => {
         description={t('replaceIconsWithDots.description')}
         {...form.getInputProps('replaceDotsWithIcons', { type: 'checkbox' })}
       />
-
-      <Alert icon={<IconInfoCircle size="1rem" />} color="blue">
-        {t('alert')}
-      </Alert>
     </Stack>
   );
 };

src/pages/user/preferences.tsx

@@ -3,12 +3,14 @@ import { createFormContext } from '@mantine/form';
 import type { InferGetServerSidePropsType } from 'next';
 import { GetServerSidePropsContext } from 'next';
 import { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
 import { AccessibilitySettings } from '~/components/Settings/Customization/Accessibility/AccessibilitySettings';
 import { MainLayout } from '~/components/layout/admin/main-admin.layout';
 import { CommonHeader } from '~/components/layout/common-header';
 import { languages } from '~/tools/language';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
+import { manageNamespaces } from '~/tools/server/translation-namespaces';
 import { RouterOutputs, api } from '~/utils/api';
 import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
 import { updateSettingsValidationSchema } from '~/validations/user';
@@ -44,6 +46,8 @@ const SettingsComponent = ({
     country: language.country,
   }));
 
+  const { t } = useTranslation('user/preferences');
+
   const { i18nZodResolver } = useI18nZodResolver();
 
   const form = useForm({
@@ -68,7 +72,7 @@ const SettingsComponent = ({
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack spacing={5}>
           <Title order={2} size="lg">
-            Localization
+            {t('localization.language.label')}
           </Title>
 
           <Select
@@ -88,7 +92,7 @@ const SettingsComponent = ({
           />
 
           <Select
-            label="First day of the week"
+            label={t('localization.firstDayOfWeek.label')}
             data={[
               { value: 'monday', label: 'Monday' },
               { value: 'sunday', label: 'Sunday' },
@@ -136,7 +140,7 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
 );
 
 export async function getServerSideProps({ req, res, locale }: GetServerSidePropsContext) {
-  const translations = await getServerSideTranslations([], locale, undefined, undefined);
+  const translations = await getServerSideTranslations(manageNamespaces, locale, undefined, undefined);
   return {
     props: {
       ...translations,

src/tools/server/translation-namespaces.ts

@@ -14,7 +14,6 @@ export const dashboardNamespaces = [
   'settings/general/internationalization',
   'settings/general/search-engine',
   'settings/general/widget-positions',
-  'settings/customization/accessibility',
   'settings/customization/general',
   'settings/customization/color-selector',
   'settings/customization/page-appearance',
@@ -49,6 +48,8 @@ export const dashboardNamespaces = [
   'widgets/location',
 ];
 
+export const manageNamespaces = ['user/preferences', 'zod'];
+
 export const loginNamespaces = ['authentication/login', 'zod'];
 
 export const registerNamespaces = ['authentication/register', 'zod'];