feat: chat layout setting

src/app/services/server.ts

@@ -170,6 +170,13 @@ export const serverApi = createApi({
     }),
     getSystemCommon: builder.query<SystemCommon, void>({
       query: () => ({ url: `/admin/system/common` }),
+      transformResponse: (resp: SystemCommon) => {
+        let tmp = resp;
+        tmp.chat_layout_mode = resp.chat_layout_mode ?? "Left";
+        tmp.contact_verification_enable = resp.contact_verification_enable ?? false;
+        tmp.max_file_expiry_mode = resp.max_file_expiry_mode ?? "Off";
+        return tmp;
+      },
       async onQueryStarted(data, { dispatch, queryFulfilled }) {
         try {
           const resp = await queryFulfilled;

src/app/slices/server.ts

@@ -22,6 +22,8 @@ const initialState: StoredServer = {
   },
   show_user_online_status: false,
   webclient_auto_update: true,
+  contact_verification_enable: false,
+  chat_layout_mode: "Left"
 };
 
 const serverSlice = createSlice({
@@ -44,8 +46,10 @@ const serverSlice = createSlice({
         description = "",
         show_user_online_status = true,
         webclient_auto_update = true,
+        contact_verification_enable = false,
+        chat_layout_mode = "Left"
       } = action.payload || {};
-      return { version, upgraded, name, logo, description, inviteLink, show_user_online_status, webclient_auto_update };
+      return { version, upgraded, name, logo, description, inviteLink, show_user_online_status, webclient_auto_update, contact_verification_enable, chat_layout_mode };
     },
     updateInfo(state, action: PayloadAction<Partial<StoredServer>>) {
       const values = action.payload || {};

src/routes/setting/Overview/ChatLayout.tsx

@@ -0,0 +1,40 @@
+// import React from 'react'
+import { useTranslation } from 'react-i18next';
+import { useGetSystemCommonQuery, useUpdateSystemCommonMutation } from '../../../app/services/server';
+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';
+import { ChatLayout } from '../../../types/server';
+// type Props = {}
+
+const Index = () => {
+    const currStatus = useAppSelector(store => store.server.chat_layout_mode ?? "Left");
+    const { t } = useTranslation("setting", { keyPrefix: "overview.chat_layout" });
+    const { t: ct } = useTranslation();
+    const { refetch } = useGetSystemCommonQuery();
+    const [updateSetting, { isSuccess }] = useUpdateSystemCommonMutation();
+    useEffect(() => {
+        if (isSuccess) {
+            refetch();
+            toast.success(ct("tip.update"));
+        }
+    }, [isSuccess]);
+    const handleChange = (newVal: ChatLayout) => {
+        updateSetting({ chat_layout_mode: newVal });
+    };
+    // if (!loadSuccess) return null;
+    return (
+        <SettingBlock title={t("title")} desc={t('desc')} >
+            <StyledRadio
+                options={[t("left"), t("self_right")]}
+                values={["Left", "SelfRight"]}
+                value={currStatus}
+                onChange={handleChange}
+            />
+        </SettingBlock>
+    );
+};
+
+export default Index;

src/routes/setting/Overview/index.tsx

@@ -10,6 +10,8 @@ import FrontendURL from "./FrontendURL";
 import DarkMode from "./DarkMode";
 import ServerVersionChecker from "../../../common/component/ServerVersionChecker";
 import OnlineStatus from "./OnlineStatus";
+import ChatLayout from "./ChatLayout";
+import SettingBlock from "./SettingBlock";
 
 export default function Overview() {
   const { t } = useTranslation("setting");
@@ -34,9 +36,11 @@ export default function Overview() {
       <Server />
       {isAdmin && (
         <>
-          <div className="text-sm">
-            <p className="dark:text-gray-100 font-semibold">{t("overview.sign_up.title")}</p>
-            <p className="flex justify-between w-full text-gray-400 mb-2">{t("overview.sign_up.desc")}</p>
+          <div className="flex flex-col">
+            <h4 className="font-bold text-gray-700 dark:text-white">{t("overview.title_feat")}</h4>
+            <p className="text-gray-400 text-xs">{t("overview.title_feat_desc")}</p>
+          </div>
+          <SettingBlock title={t("overview.sign_up.title")} desc={t("overview.sign_up.desc")}>
             <StyledRadio
               options={[t("overview.sign_up.everyone"), t("overview.sign_up.invite")]}
               values={["EveryOne", "InvitationOnly"]}
@@ -45,14 +49,8 @@ export default function Overview() {
                 handleUpdateWhoCanSignUp(v);
               }}
             />
-          </div>
-          <div className="text-sm">
-            <p className="dark:text-gray-100 font-semibold">{t("overview.guest_mode.title")}</p>
-            <p className="flex justify-between w-full text-gray-400 mb-2">
-              <span className="txt">
-                {t("overview.guest_mode.desc")}
-              </span>
-            </p>
+          </SettingBlock>
+          <SettingBlock title={t("overview.guest_mode.title")} desc={t("overview.guest_mode.desc")}>
             <StyledRadio
               options={[t("overview.guest_mode.enable"), t("overview.guest_mode.disable")]}
               values={["true", "false"]}
@@ -61,10 +59,16 @@ export default function Overview() {
                 handleGuestToggle(v);
               }}
             />
-          </div>
+          </SettingBlock>
           <ServerVersionChecker version="0.3.4" empty={true}>
             <OnlineStatus />
           </ServerVersionChecker>
+          <ServerVersionChecker version="0.3.7" empty={true}>
+            <ChatLayout />
+          </ServerVersionChecker>
+          {/* <ServerVersionChecker version="0.3.7" empty={true}>
+            <FrontendURL />
+          </ServerVersionChecker> */}
           <ServerVersionChecker version="0.3.3" empty={true}>
             <FrontendURL />
           </ServerVersionChecker>

src/types/server.ts

@@ -6,9 +6,14 @@ export interface Server extends SystemCommon {
   name: string;
   description: string;
 }
+export type ChatLayout = "SelfRight" | "Left"
 export interface SystemCommon {
-  show_user_online_status: boolean,
-  webclient_auto_update: boolean,
+  show_user_online_status?: boolean,
+  webclient_auto_update?: boolean,
+  contact_verification_enable?: boolean,
+  chat_layout_mode?: ChatLayout,
+  max_file_expiry_mode?: "Off" | "Day1" | "Day7" | "Day30" | "Day90" | "Day180"
+
 }
 export interface GithubAuthConfig {
   client_id?: string;