Refactor language switcher and enhance site routing

Renamed 'LanguageDropdownSwitcher' to 'LanguageSelector' for better representation of the component's functionality. Removed unnecessary dependencies and optimized function declarations. Updated site routing to include new pages like 'contact', 'terms-of-service', and 'privacy-policy'. Also made adjustments for multi-language support, providing better user experience.

packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useTranslation } from 'react-i18next';
+
 import {
   Card,
   CardContent,
@@ -8,6 +10,7 @@ import {
   CardTitle,
 } from '@kit/ui/card';
 import { If } from '@kit/ui/if';
+import { LanguageSelector } from '@kit/ui/language-selector';
 import { Trans } from '@kit/ui/trans';
 
 import { AccountDangerZone } from './account-danger-zone';
@@ -28,6 +31,8 @@ export function PersonalAccountSettingsContainer(
     };
   }>,
 ) {
+  const supportsLanguageSelection = useSupportMultiLanguage();
+
   return (
     <div className={'flex w-full flex-col space-y-6 pb-32'}>
       <Card>
@@ -62,6 +67,24 @@ export function PersonalAccountSettingsContainer(
         </CardContent>
       </Card>
 
+      <If condition={supportsLanguageSelection}>
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <Trans i18nKey={'account:language'} />
+            </CardTitle>
+
+            <CardDescription>
+              <Trans i18nKey={'account:languageDescription'} />
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <LanguageSelector />
+          </CardContent>
+        </Card>
+      </If>
+
       <Card>
         <CardHeader>
           <CardTitle>
@@ -130,3 +153,8 @@ export function PersonalAccountSettingsContainer(
     </div>
   );
 }
+
+function useSupportMultiLanguage() {
+  const { i18n } = useTranslation();
+  return i18n.options.supportedLngs && i18n.options.supportedLngs.length > 1;
+}

packages/ui/package.json

@@ -124,7 +124,8 @@
     "./loading-overlay": "./src/makerkit/loading-overlay.tsx",
     "./profile-avatar": "./src/makerkit/profile-avatar.tsx",
     "./mode-toggle": "./src/makerkit/mode-toggle.tsx",
-    "./enhanced-data-table": "./src/makerkit/data-table.tsx"
+    "./enhanced-data-table": "./src/makerkit/data-table.tsx",
+    "./language-selector": "./src/makerkit/language-selector.tsx"
   },
   "typesVersions": {
     "*": {

packages/ui/src/makerkit/language-selector.tsx

@@ -2,8 +2,6 @@
 
 import { useCallback, useMemo, useState } from 'react';
 
-import { useRouter } from 'next/navigation';
-
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -14,11 +12,12 @@ import {
   SelectValue,
 } from '../shadcn/select';
 
-export const LanguageDropdownSwitcher: React.FC<{
+export function LanguageSelector({
+  onChange,
+}: {
   onChange?: (locale: string) => unknown;
-}> = ({ onChange }) => {
+}) {
   const { i18n } = useTranslation();
-  const router = useRouter();
 
   const { language: currentLanguage, options } = i18n;
 
@@ -43,10 +42,8 @@ export const LanguageDropdownSwitcher: React.FC<{
       }
 
       await i18n.changeLanguage(locale);
-
-      return router.refresh();
     },
-    [i18n, onChange, router],
+    [i18n, onChange],
   );
 
   return (
@@ -73,7 +70,7 @@ export const LanguageDropdownSwitcher: React.FC<{
       </SelectContent>
     </Select>
   );
-};
+}
 
 function capitalize(lang: string) {
   return lang.slice(0, 1).toUpperCase() + lang.slice(1);