feat: i18n for UISettingsComponent

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

@@ -249,6 +249,17 @@
       "page_create": "Subscribe to the page when you create it."
     }
   },
+  "ui_settings": {
+    "ui_settings": "UI Settings",
+    "side_bar_mode": {
+      "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."
+    }
+  },
   "editor_settings": {
     "editor_settings": "Editor Settings"
   },

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

@@ -250,6 +250,17 @@
       "page_create": "ページを作成した時にそのページをサブスクライブします。"
     }
   },
+  "ui_settings": {
+    "ui_settings": "UI設定",
+    "side_bar_mode": {
+      "side_bar_mode_setting": "サイドバーのモードを設定する",
+      "description": "サイドバーを常時開いた状態にするかどうかを設定できます。"
+    },
+    "edit_side_bar_mode": {
+      "side_bar_mode_setting": "編集時のサイドバーのモードを設定する",
+      "description": "コンテンツ編集時に、サイドバーを常時開いた状態にするかどうかを設定できます。"
+    }
+  },
   "editor_settings": {
     "editor_settings": "エディター設定",
     "common_settings": {

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

@@ -240,6 +240,17 @@
       "page_create": "创建页面时订阅页面。"
     }
   },
+  "ui_settings": {
+    "ui_settings": "用户界面设置",
+    "side_bar_mode": {
+      "side_bar_mode_setting": "设置侧边栏模式",
+      "description": "您可以设置侧边栏是否始终保持打开状态。"
+    },
+    "edit_side_bar_mode": {
+      "side_bar_mode_setting": "设置编辑时的边栏模式",
+      "description": "您可以设置在编辑内容时是否始终打开侧边栏。"
+    }
+  },
   "editor_settings": {
     "editor_settings": "编辑器设置"
   },

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

@@ -20,84 +20,84 @@ additionalClasses: string
   </>
 );
 
-const renderSidebarModeSwitch = () => {
-  return (
-    <>
-      <div className="d-flex align-items-start">
-        <div className="d-flex align-items-center">
-          <IconWithTooltip
-            id="iwt-sidebar-drawer"
-            label="Drawer"
-            additionalClasses={styles['grw-sidebar-mode-icon']}
-          >
-            <SidebarDrawerIcon />
-          </IconWithTooltip>
-          <div className="form-check form-switch ms-2">
+export const UISettings = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  const renderSidebarModeSwitch = () => {
+    return (
+      <>
+        <div className="d-flex align-items-start">
+          <div className="d-flex align-items-center">
+            <IconWithTooltip
+              id="iwt-sidebar-drawer"
+              label="Drawer"
+              additionalClasses={styles['grw-sidebar-mode-icon']}
+            >
+              <SidebarDrawerIcon />
+            </IconWithTooltip>
+            <div className="form-check form-switch ms-2">
 
-            <input
-              id="swSidebarMode"
-              className="form-check-input"
-              type="checkbox"
-            />
-            <label className="form-label form-check-label" htmlFor="swSidebarMode"></label>
+              <input
+                id="swSidebarMode"
+                className="form-check-input"
+                type="checkbox"
+              />
+              <label className="form-label form-check-label" htmlFor="swSidebarMode"></label>
+            </div>
+            <IconWithTooltip id="iwt-sidebar-dock" label="Dock" additionalClasses={styles['grw-sidebar-mode-icon']}>
+              <SidebarDockIcon />
+            </IconWithTooltip>
+          </div>
+          <div className="ms-2">
+            <label className="form-label form-check-label" htmlFor="swSidebarMode">
+              {t('ui_settings.side_bar_mode.side_bar_mode_setting')}
+            </label>
+            <p className="form-text text-muted small">{t('ui_settings.side_bar_mode.description')}</p>
           </div>
-          <IconWithTooltip id="iwt-sidebar-dock" label="Dock" additionalClasses={styles['grw-sidebar-mode-icon']}>
-            <SidebarDockIcon />
-          </IconWithTooltip>
-        </div>
-        <div className="ms-2">
-          <label className="form-label form-check-label" htmlFor="swSidebarMode">
-            サイドバーのモードを設定する
-          </label>
-          <p className="form-text text-muted small">サイドバーを常時開いた状態にするかどうかを設定できます。</p>
         </div>
-      </div>
-    </>
-  );
-};
+      </>
+    );
+  };
 
-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">
+  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>
+              <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>
-          <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">
-            編集時のサイドバーのモードを設定する
-          </label>
-          <p className="form-text text-muted small">コンテンツ編集時に、サイドバーを常時開いた状態にするかどうかを設定できます。</p>
         </div>
-      </div>
-    </>
-  );
-};
-
+      </>
+    );
+  };
 
-export const UISettings = (): JSX.Element => {
-  const { t } = useTranslation();
   return (
     <>
-      <h2 className="border-bottom mb-4">UI設定</h2>
+      <h2 className="border-bottom mb-4">{t('ui_settings.ui_settings')}</h2>
 
       <div className="row justify-content-center">
         <div className="col-md-6">