Merge pull request #8288 from weseek/feat/132740-135570-save-ui-settings

feat: 132740 135570 save UI settings

apps/app/public/static/locales/en_US/translation.json

@@ -252,12 +252,9 @@
   "ui_settings": {
     "ui_settings": "UI Settings",
     "side_bar_mode": {
+      "settings": "Sidebar mode settings",
       "side_bar_mode_setting": "Set the sidebar mode",
-      "description": "You can set whether the sidebar is always open or not."
-    },
-    "edit_side_bar_mode": {
-      "side_bar_mode_setting": "Set the mode of the sidebar when editing",
-      "description": "You can set whether the sidebar is always open when editing content."
+      "description": "You can set whether or not the sidebar will always be open when the screen width is large. If the screen width is small, the sidebar will always be closed."
     }
   },
   "editor_settings": {

apps/app/public/static/locales/ja_JP/translation.json

@@ -253,12 +253,9 @@
   "ui_settings": {
     "ui_settings": "UI設定",
     "side_bar_mode": {
+      "settings": "サイドバーモードの設定",
       "side_bar_mode_setting": "サイドバーのモードを設定する",
-      "description": "サイドバーを常時開いた状態にするかどうかを設定できます。"
-    },
-    "edit_side_bar_mode": {
-      "side_bar_mode_setting": "編集時のサイドバーのモードを設定する",
-      "description": "コンテンツ編集時に、サイドバーを常時開いた状態にするかどうかを設定できます。"
+      "description": "画面幅が大きい場合に、サイドバーを常時開いた状態にするかどうかを設定できます。画面幅が小さい場合はサイドバーは常に閉じた状態となります。"
     }
   },
   "editor_settings": {

apps/app/public/static/locales/zh_CN/translation.json

@@ -243,12 +243,9 @@
   "ui_settings": {
     "ui_settings": "用户界面设置",
     "side_bar_mode": {
+      "settings": "侧边栏模式设置",
       "side_bar_mode_setting": "设置侧边栏模式",
-      "description": "您可以设置侧边栏是否始终保持打开状态。"
-    },
-    "edit_side_bar_mode": {
-      "side_bar_mode_setting": "设置编辑时的边栏模式",
-      "description": "您可以设置在编辑内容时是否始终打开侧边栏。"
+      "description": "您可以设置当屏幕宽度较大时，侧边栏是否始终打开。 如果屏幕宽度较小，侧边栏将始终关闭。"
     }
   },
   "editor_settings": {

apps/app/src/client/services/user-ui-settings.ts

@@ -25,3 +25,9 @@ export const scheduleToPut = (settings: Partial<IUserUISettings>): void => {
 
   _putUserUISettingsInBulkDebounced();
 };
+
+export const updateUserUISettings = async(settings: Partial<IUserUISettings>): Promise<AxiosResponse<IUserUISettings>> => {
+  const result = await apiv3Put<IUserUISettings>('/user-ui-settings', { settings });
+
+  return result;
+};

apps/app/src/components/Me/SidebarDrawerIcon.jsx → apps/app/src/components/Me/SidebarCollapsedIcon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const SidebarDrawerIcon = () => (
+const SidebarCollapsedIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 23 23"
@@ -22,4 +22,4 @@ const SidebarDrawerIcon = () => (
   </svg>
 );
 
-export default SidebarDrawerIcon;
+export default SidebarCollapsedIcon;

apps/app/src/components/Me/UISettings.tsx

@@ -1,8 +1,14 @@
+import { useCallback } from 'react';
+
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
+import { updateUserUISettings } from '~/client/services/user-ui-settings';
+import { toastError, toastSuccess } from '~/client/util/toastr';
+import { useCollapsedContentsOpened, usePreferCollapsedMode, useSidebarMode } from '~/stores/ui';
+
+import SidebarCollapsedIcon from './SidebarCollapsedIcon';
 import SidebarDockIcon from './SidebarDockIcon';
-import SidebarDrawerIcon from './SidebarDrawerIcon';
 
 import styles from './UISettings.module.scss';
 
@@ -22,6 +28,27 @@ additionalClasses: string
 
 export const UISettings = (): JSX.Element => {
   const { t } = useTranslation();
+  const {
+    isDockMode, isCollapsedMode,
+  } = useSidebarMode();
+  const { mutate: mutatePreferCollapsedMode } = usePreferCollapsedMode();
+  const { mutate: mutateCollapsedContentsOpened } = useCollapsedContentsOpened();
+
+  const toggleCollapsed = useCallback(() => {
+    mutatePreferCollapsedMode(!isCollapsedMode());
+    mutateCollapsedContentsOpened(false);
+  }, [mutatePreferCollapsedMode, isCollapsedMode, mutateCollapsedContentsOpened]);
+
+  const updateButtonHandler = useCallback(async() => {
+    try {
+      await updateUserUISettings({ preferCollapsedModeByUser: isCollapsedMode() });
+      toastSuccess(t('toaster.update_successed', { target: t('ui_settings.side_bar_mode.settings'), ns: 'commons' }));
+    }
+    catch (err) {
+      toastError(err);
+    }
+
+  }, [isCollapsedMode, t]);
 
   const renderSidebarModeSwitch = () => {
     return (
@@ -29,11 +56,11 @@ export const UISettings = (): JSX.Element => {
         <div className="d-flex align-items-start">
           <div className="d-flex align-items-center">
             <IconWithTooltip
-              id="iwt-sidebar-drawer"
-              label="Drawer"
+              id="iwt-sidebar-collapsed"
+              label="Collapsed"
               additionalClasses={styles['grw-sidebar-mode-icon']}
             >
-              <SidebarDrawerIcon />
+              <SidebarCollapsedIcon />
             </IconWithTooltip>
             <div className="form-check form-switch ms-2">
 
@@ -41,6 +68,8 @@ export const UISettings = (): JSX.Element => {
                 id="swSidebarMode"
                 className="form-check-input"
                 type="checkbox"
+                checked={isDockMode()}
+                onChange={toggleCollapsed}
               />
               <label className="form-label form-check-label" htmlFor="swSidebarMode"></label>
             </div>
@@ -59,42 +88,6 @@ export const UISettings = (): JSX.Element => {
     );
   };
 
-  const renderEditSidebarModeSwitch = () => {
-    return (
-      <>
-        <div className="d-flex align-items-start">
-          <div className="d-flex align-items-center">
-            <IconWithTooltip
-              id="iwt-sidebar-editor-drawer"
-              label="Drawer"
-              additionalClasses={styles['grw-sidebar-mode-icon']}
-            >
-              <SidebarDrawerIcon />
-            </IconWithTooltip>
-            <div className="form-check form-switch ms-2">
-
-              <input
-                id="swSidebarModeOnEditor"
-                className="form-check-input"
-                type="checkbox"
-              />
-              <label className="form-label form-check-label" htmlFor="swSidebarModeOnEditor"></label>
-            </div>
-            <IconWithTooltip id="iwt-sidebar-editor-dock" label="Dock" additionalClasses={styles['grw-sidebar-mode-icon']}>
-              <SidebarDockIcon />
-            </IconWithTooltip>
-          </div>
-          <div className="ms-2">
-            <label className="form-label form-check-label" htmlFor="swSidebarModeOnEditor">
-              {t('ui_settings.edit_side_bar_mode.side_bar_mode_setting')}
-            </label>
-            <p className="form-text text-muted small">{t('ui_settings.edit_side_bar_mode.description')}</p>
-          </div>
-        </div>
-      </>
-    );
-  };
-
   return (
     <>
       <h2 className="border-bottom mb-4">{t('ui_settings.ui_settings')}</h2>
@@ -104,10 +97,6 @@ export const UISettings = (): JSX.Element => {
 
           { renderSidebarModeSwitch() }
 
-          <div className="mt-5">
-            { renderEditSidebarModeSwitch() }
-          </div>
-
           <div>
           </div>
         </div>
@@ -115,7 +104,7 @@ export const UISettings = (): JSX.Element => {
 
       <div className="row my-3">
         <div className="offset-4 col-5">
-          <button data-testid="" type="button" className="btn btn-primary" onClick={() => {}}>
+          <button data-testid="" type="button" className="btn btn-primary" onClick={updateButtonHandler}>
             {t('Update')}
           </button>
         </div>