refactor: setting overview

public/locales/en/setting.json

@@ -41,6 +41,8 @@
     "delete_desc": "Are you sure want to delete this user?"
   },
   "overview": {
+    "title_feat": "Features",
+    "title_feat_desc": "you can toggle features as you need",
     "name": "Server Name",
     "desc": "Server Description",
     "upload_desc": "Minimum size is 128x128, We recommend at least 512x512 for the server. Max size limited to 5M.",
@@ -80,6 +82,12 @@
       "desc": "Toggle users' online status visible",
       "enable": "Enable",
       "disable": "Disable"
+    },
+    "chat_layout": {
+      "title": "Chat Layout",
+      "desc": "message self send on the left or right",
+      "left": "Left",
+      "self_right": "Self Right"
     }
   },
   "license": {

public/locales/zh/setting.json

@@ -38,6 +38,8 @@
     "private": "私密"
   },
   "overview": {
+    "title_feat": "特性开关",
+    "title_feat_desc": "根据你的需要开启或关闭特性",
     "name": "服务器名",
     "desc": "服务器描述",
     "upload_desc": "图片最小 128x128，我们推荐上传 512x512 大小的图片，最大不要超过5M。",
@@ -74,6 +76,12 @@
       "desc": "开启或关闭用户在线状态",
       "enable": "开启",
       "disable": "关闭"
+    },
+    "chat_layout": {
+      "title": "聊天布局",
+      "desc": "你可以决定自己发的消息居左还是居右",
+      "left": "居左",
+      "self_right": "居右"
     }
   },
   "license": {

src/routes/setting/Overview/DarkMode.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Radio from '../../../common/component/styled/Radio';
 import { Theme } from '../../../types/common';
+import SettingBlock from './SettingBlock';
 
 // type Props = {}
 
@@ -19,15 +20,10 @@ const DarkMode = () => {
         } else {
             const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
             document.documentElement.classList.add(isDark ? "dark" : 'light');
-
         }
     };
     return (
-        <div className="text-sm">
+        <SettingBlock title={t("overview.theme.title")} desc={t("overview.theme.desc")}>
-            <p className="dark:text-gray-100 font-semibold">{t("overview.theme.title")}</p>
-            <p className="flex justify-between w-full text-gray-400 mb-2">
-                {t("overview.theme.desc")}
-            </p>
             <Radio
                 options={[t("overview.theme.auto"), t("overview.theme.dark"), t("overview.theme.light")]}
                 values={['auto', 'dark', 'light']}
@@ -36,7 +32,7 @@ const DarkMode = () => {
                     handleThemeToggle(v);
                 }}
             />
-        </div>
+        </SettingBlock>
     );
 };
 

src/routes/setting/Overview/FrontendURL.tsx

@@ -1,10 +1,11 @@
 // import React from 'react'
 import { useTranslation } from 'react-i18next';
+import { toast } from 'react-hot-toast';
 import { useGetFrontendUrlQuery, useUpdateFrontendUrlMutation } from '../../../app/services/server';
 import StyledInput from "../../../common/component/styled/Input";
 import StyledButton from "../../../common/component/styled/Button";
 import { ChangeEvent, useState, useEffect } from 'react';
-import { toast } from 'react-hot-toast';
+import SettingBlock from './SettingBlock';
 // type Props = {}
 
 const Index = () => {
@@ -32,16 +33,12 @@ const Index = () => {
     }, [getUrlSuccess, data]);
     // if(!fetch)
     return (
-        <div className="text-sm">
+        <SettingBlock title={t("overview.url.title")} desc={t("overview.url.desc")}>
-            <p className="dark:text-gray-100 font-semibold">{t("overview.url.title")}</p>
-            <p className="flex justify-between w-full text-gray-400">
-                {t("overview.url.desc")}
-            </p>
             <div className="flex items-center gap-4 mt-2">
                 <StyledInput placeholder='frontend url' value={url} onChange={handleChange} />
                 <StyledButton disabled={!url || isLoading} className='' onClick={handleUpdate}> {ct("action.update")}</StyledButton>
             </div>
-        </div>
+        </SettingBlock>
     );
 };
 

src/routes/setting/Overview/Language.tsx

@@ -1,6 +1,7 @@
 // import React from 'react'
 import { useTranslation } from 'react-i18next';
 import StyledRadio from "../../../common/component/styled/Radio";
+import SettingBlock from './SettingBlock';
 
 // type Props = {}
 
@@ -10,11 +11,7 @@ const Index = () => {
         i18n.changeLanguage(v);
     };
     return (
-        <div className="text-sm">
+        <SettingBlock title={t("overview.lang.title")} desc={t("overview.lang.desc")}>
-            <p className="dark:text-gray-100 font-semibold">{t("overview.lang.title")}</p>
-            <p className="flex justify-between w-full text-gray-400 mb-2">
-                {t("overview.lang.desc")}
-            </p>
             <StyledRadio
                 options={[t("overview.lang.en"), t("overview.lang.zh"), t("overview.lang.jp"), t("overview.lang.tr")]}
                 values={["en", "zh", "jp", "tr"]}
@@ -25,7 +22,7 @@ const Index = () => {
                     handleGuestToggle(v);
                 }}
             />
-        </div>
+        </SettingBlock>
     );
 };
 

src/routes/setting/Overview/OnlineStatus.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import { toast } from 'react-hot-toast';
 import StyledRadio from "../../../common/component/styled/Radio";
 import { useAppSelector } from '../../../app/store';
+import SettingBlock from './SettingBlock';
 // type Props = {}
 
 const Index = () => {
@@ -24,20 +25,14 @@ const Index = () => {
     };
     // if (!loadSuccess) return null;
     return (
-        <div className="text-sm">
+        <SettingBlock title={t("title")} desc={t('desc')} >
-            <p className="dark:text-gray-100 font-semibold">{t("title")}</p>
-            <p className="flex justify-between w-full text-gray-400 mb-2">
-                <span className="txt">
-                    {t("desc")}
-                </span>
-            </p>
             <StyledRadio
                 options={[t("enable"), t("disable")]}
                 values={["true", "false"]}
                 value={`${currStatus}`}
                 onChange={handleToggle}
             />
-        </div>
+        </SettingBlock>
     );
 };
 

src/routes/setting/Overview/Server.tsx

@@ -78,7 +78,7 @@ const Index = () => {
                     </div>
                 )}
             </div>
-            <div className="flex flex-col items-start gap-6 mb-16">
+            <div className="flex flex-col items-start gap-6 mb-3">
                 <div className="w-full flex flex-col items-start gap-2">
                     <Label className='dark:text-gray-100' htmlFor="name">{t("overview.name")}</Label>
                     <Input

src/routes/setting/Overview/SettingBlock.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+type Props = {
+    title: string,
+    desc: string,
+    children: React.ReactNode
+}
+
+const SettingBlock = ({ title, desc, children }: Props) => {
+    return (
+        <div className="text-sm">
+            <p className="text-gray-600 dark:text-gray-100 font-semibold">{title}</p>
+            <p className="flex justify-between w-full text-gray-400 mb-2 text-xs">
+                {desc}
+            </p>
+            {children}
+        </div>
+    );
+};
+
+export default SettingBlock;

src/routes/setting/Overview/language.tsx

@@ -1,6 +1,7 @@
 // import React from 'react'
 import { useTranslation } from 'react-i18next';
 import StyledRadio from "../../../common/component/styled/Radio";
+import SettingBlock from './SettingBlock';
 
 // type Props = {}
 
@@ -10,11 +11,7 @@ const Index = () => {
         i18n.changeLanguage(v);
     };
     return (
-        <div className="text-sm">
+        <SettingBlock title={t("overview.lang.title")} desc={t("overview.lang.desc")}>
-            <p className="dark:text-gray-100 font-semibold">{t("overview.lang.title")}</p>
-            <p className="flex justify-between w-full text-gray-400 mb-2">
-                {t("overview.lang.desc")}
-            </p>
             <StyledRadio
                 options={[t("overview.lang.en"), t("overview.lang.zh"), t("overview.lang.jp"), t("overview.lang.tr")]}
                 values={["en", "zh", "jp", "tr"]}
@@ -25,7 +22,7 @@ const Index = () => {
                     handleGuestToggle(v);
                 }}
             />
-        </div>
+        </SettingBlock>
     );
 };
 

src/routes/setting/Overview/server.tsx

@@ -78,7 +78,7 @@ const Index = () => {
                     </div>
                 )}
             </div>
-            <div className="flex flex-col items-start gap-6 mb-16">
+            <div className="flex flex-col items-start gap-6 mb-3">
                 <div className="w-full flex flex-col items-start gap-2">
                     <Label className='dark:text-gray-100' htmlFor="name">{t("overview.name")}</Label>
                     <Input