🐛 fix: Fix Setings Layout (lobehub#2340)

* 🐛 fix: Fix TelemetryChat Config

* 🔧 chore: Move UserAvatar

* 💄 style: Update UserInfo

locales/ar/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "إدارة الفواتير",
+    "default": {
+      "nickname": "مستخدم المجتمع",
+      "username": "نسخة معاينة المجتمع"
+    },
     "discord": "الدعم المجتمعي",
     "docs": "وثائق الاستخدام",
     "email": "الدعم عبر البريد الإلكتروني",

locales/bg-BG/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Сметки",
+    "default": {
+      "nickname": "Потребител на общността",
+      "username": "Преглед на общността"
+    },
     "discord": "Общностна поддръжка",
     "docs": "Документация",
     "email": "Имейл поддръжка",

locales/de-DE/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Abrechnung",
+    "default": {
+      "nickname": "Community-Benutzer",
+      "username": "Community-Vorschauversion"
+    },
     "discord": "Community-Support",
     "docs": "Dokumentation",
     "email": "E-Mail-Support",

locales/en-US/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Billing",
+    "default": {
+      "nickname": "Community User",
+      "username": "Community Preview"
+    },
     "discord": "Community Support",
     "docs": "Documentation",
     "email": "Email Support",

locales/es-ES/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Gestión de facturación",
+    "default": {
+      "nickname": "Usuario de la comunidad",
+      "username": "Vista previa de la comunidad"
+    },
     "discord": "Soporte comunitario",
     "docs": "Documentación de uso",
     "email": "Soporte por correo electrónico",

locales/fr-FR/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Gestion de la facturation",
+    "default": {
+      "nickname": "Utilisateur de la communauté",
+      "username": "Aperçu de la communauté"
+    },
     "discord": "Support communautaire",
     "docs": "Documentation d'utilisation",
     "email": "Support par e-mail",

locales/it-IT/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Gestione fatturazione",
+    "default": {
+      "nickname": "Utente della community",
+      "username": "Anteprima della community"
+    },
     "discord": "Supporto comunità",
     "docs": "Documentazione",
     "email": "Supporto email",

locales/ja-JP/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "請求管理",
+    "default": {
+      "nickname": "コミュニティユーザー",
+      "username": "コミュニティプレビュー"
+    },
     "discord": "コミュニティサポート",
     "docs": "ドキュメント",
     "email": "メールサポート",

locales/ko-KR/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "청구서 관리",
+    "default": {
+      "nickname": "커뮤니티 사용자",
+      "username": "커뮤니티 미리보기"
+    },
     "discord": "커뮤니티 지원",
     "docs": "사용 설명서",
     "email": "이메일 지원",

locales/nl-NL/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "账单管理",
+    "default": {
+      "nickname": "Gemeenschapsgebruiker",
+      "username": "Gemeenschapsvoorbeeld"
+    },
     "discord": "社区支持",
     "docs": "使用文档",
     "email": "邮件支持",

locales/pl-PL/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Zarządzanie rachunkiem",
+    "default": {
+      "nickname": "Użytkownik społeczności",
+      "username": "Podgląd społeczności"
+    },
     "discord": "Wsparcie społeczności",
     "docs": "Dokumentacja",
     "email": "Wsparcie mailowe",

locales/pt-BR/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "gerenciamento de faturas",
+    "default": {
+      "nickname": "Usuário da Comunidade",
+      "username": "Visualização da Comunidade"
+    },
     "discord": "suporte da comunidade",
     "docs": "documentação",
     "email": "suporte por e-mail",

locales/ru-RU/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Управление счетами",
+    "default": {
+      "nickname": "Пользователь сообщества",
+      "username": "Предварительная версия сообщества"
+    },
     "discord": "Поддержка сообщества",
     "docs": "Документация",
     "email": "Поддержка по электронной почте",

locales/tr-TR/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Fatura Yönetimi",
+    "default": {
+      "nickname": "Topluluk Kullanıcısı",
+      "username": "Topluluk Önizlemesi"
+    },
     "discord": "Topluluk Destek",
     "docs": "Belgeler",
     "email": "E-posta Destek",

locales/vi-VN/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "Quản lý thanh toán",
+    "default": {
+      "nickname": "Người dùng Cộng đồng",
+      "username": "Bản xem trước Cộng đồng"
+    },
     "discord": "Hỗ trợ cộng đồng",
     "docs": "Tài liệu sử dụng",
     "email": "Hỗ trợ qua email",

locales/zh-CN/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "账单管理",
+    "default": {
+      "nickname": "社区用户",
+      "username": "社区预览版"
+    },
     "discord": "社区支持",
     "docs": "使用文档",
     "email": "邮件支持",

locales/zh-TW/common.json

@@ -160,6 +160,10 @@
   },
   "userPanel": {
     "billing": "帳單管理",
+    "default": {
+      "nickname": "社群使用者",
+      "username": "社群預覽版"
+    },
     "discord": "社群支援",
     "docs": "使用文件",
     "email": "郵件支援",

src/app/(main)/(mobile)/me/features/Cate.tsx

@@ -6,7 +6,7 @@ import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import { useCategory } from '@/app/(main)/settings//hooks/useCategory';
+import { useCategory } from '@/app/(main)/settings/hooks/useCategory';
 import Cell from '@/components/Cell';
 import Divider from '@/components/Cell/Divider';
 

src/app/(main)/(mobile)/me/page.tsx

@@ -1,8 +1,8 @@
 import { redirect } from 'next/navigation';
 import { Center } from 'react-layout-kit';
 
-import Avatar from '@/app/(main)/@nav/features/UserAvatar';
 import BrandWatermark from '@/components/BrandWatermark';
+import Avatar from '@/features/User/UserAvatar';
 import { isMobileDevice } from '@/utils/responsive';
 
 import AvatarBanner from './features/AvatarBanner';

src/app/(main)/@nav/_layout/Desktop/index.tsx

@@ -4,9 +4,9 @@ import { SideNav } from '@lobehub/ui';
 import { memo } from 'react';
 
 import UserPanel from '@/app/(main)/@nav/features/UserPanel';
+import UserAvatar from '@/features/User/UserAvatar';
 import { useActiveTabKey } from '@/hooks/useActiveTabKey';
 
-import Avatar from '../../features/UserAvatar';
 import BottomActions from './BottomActions';
 import TopActions from './TopActions';
 
@@ -16,7 +16,7 @@ const Nav = memo(() => {
     <SideNav
       avatar={
         <UserPanel>
-          <Avatar />
+          <UserAvatar />
         </UserPanel>
       }
       bottomActions={<BottomActions tab={sidebarKey} />}

src/app/(main)/@nav/features/UserPanel/Popover.tsx

@@ -3,6 +3,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import BrandWatermark from '@/components/BrandWatermark';
 import Menu from '@/components/Menu';
+import UserInfo from '@/features/User/UserInfo';
 
 import LangButton from './LangButton';
 import ThemeButton from './ThemeButton';
@@ -13,7 +14,7 @@ const PopoverContent = memo<{ closePopover: () => void }>(({ closePopover }) =>
 
   return (
     <Flexbox gap={2} style={{ minWidth: 300 }}>
-      {/*<UserInfo />*/}
+      <UserInfo />
       <Menu items={mainItems} onClick={closePopover} />
       <Flexbox
         align={'center'}

src/app/(main)/@nav/features/UserPanel/UserInfo.tsx

@@ -2,7 +2,7 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import UserAvatar from '../UserAvatar';
+import UserAvatar from '@/features/User/UserAvatar';
 
 const useStyles = createStyles(({ css, token }) => ({
   nickname: css`

src/app/(main)/@nav/features/UserPanel/useMenu.tsx

@@ -128,6 +128,9 @@ export const useMenu = () => {
   ];
 
   const mainItems = [
+    {
+      type: 'divider',
+    },
     ...settings,
     ...exports,
     ...helps,

src/app/(main)/settings/@category/default.tsx

@@ -1,4 +1,4 @@
-import UpgradeAlert from '@/app/(main)/settings//features/UpgradeAlert';
+import UpgradeAlert from '@/app/(main)/settings/features/UpgradeAlert';
 
 import CategoryContent from './features/CategoryContent';
 

src/app/(main)/settings/about/index.tsx

@@ -1,17 +1,22 @@
+'use client';
+
 import { Logo, Tag } from '@lobehub/ui';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Follow from '@//features/Follow';
-import AboutList from '@/app/(main)/settings//about/features/AboutList';
-import Analytics from '@/app/(main)/settings/about/features/Analytics';
-import { getServerConfig } from '@/config/server';
 import { CURRENT_VERSION } from '@/const/version';
+import Follow from '@/features/Follow';
+import { useServerConfigStore } from '@/store/serverConfig';
+import { serverConfigSelectors } from '@/store/serverConfig/selectors';
 
-const enabledTelemetryChat = getServerConfig().ENABLE_LANGFUSE;
+import AboutList from './features/AboutList';
+import Analytics from './features/Analytics';
 
 const COPYRIGHT = `© 2023-${new Date().getFullYear()} LobeHub, LLC`;
 
-const Page = ({ mobile }: { mobile?: boolean }) => {
+const Page = memo(({ mobile }: { mobile?: boolean }) => {
+  const enabledTelemetryChat = useServerConfigStore(serverConfigSelectors.enabledTelemetryChat);
+
   return (
     <Flexbox align={'center'} gap={12} paddingBlock={36} width={'100%'}>
       <Logo size={mobile ? 100 : 120} />
@@ -28,7 +33,7 @@ const Page = ({ mobile }: { mobile?: boolean }) => {
       <div style={{ fontWeight: 400, opacity: 0.33 }}>{COPYRIGHT}</div>
     </Flexbox>
   );
-};
+});
 
 Page.displayName = 'AboutSetting';
 

src/app/(main)/settings/common/features/Common.tsx

@@ -7,7 +7,7 @@ import { signIn, signOut } from 'next-auth/react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSyncSettings } from '@/app/(main)/settings//hooks/useSyncSettings';
+import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_SETTINGS } from '@/const/settings';
 import { useOAuthSession } from '@/hooks/useOAuthSession';

src/app/(main)/settings/page.tsx

@@ -1,7 +1,11 @@
 import { redirect } from 'next/navigation';
 
+import Common from './common';
+
 const Page = () => {
-  return redirect('/settings/common');
+  redirect('/settings/common');
+
+  return <Common />;
 };
 
 export default Page;