chore: update setting page styles (#1863)

* chore: update setting page styles

* chore: update

web/src/components/Header.tsx

@@ -134,10 +134,11 @@ const Header = () => {
               </NavLink>
               <div className="pr-3 pl-1 w-full">
                 <button
-                  className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 font-medium text-white dark:opacity-80 hover:shadow hover:opacity-90"
+                  className="mt-2 w-full py-3 rounded-full flex flex-row justify-center items-center bg-green-600 text-white dark:opacity-80 hover:shadow hover:opacity-90"
                   onClick={() => showMemoEditorDialog()}
                 >
-                  <Icon.Edit3 className="w-4 h-auto mr-1" /> New
+                  <Icon.Edit3 className="w-4 h-auto mr-1" />
+                  {t("common.new")}
                 </button>
               </div>
               <UpgradeVersionView />

web/src/components/Settings/MyAccountSection.tsx

+import { Button, Input, Textarea } from "@mui/joy";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "@/store/module";
 import { showCommonDialog } from "../Dialog/CommonDialog";
@@ -5,7 +6,6 @@ import showChangePasswordDialog from "../ChangePasswordDialog";
 import Icon from "../Icon";
 import showUpdateAccountDialog from "../UpdateAccountDialog";
 import UserAvatar from "../UserAvatar";
-import "@/less/settings/my-account-section.less";
 
 const MyAccountSection = () => {
   const { t } = useTranslation();
@@ -47,18 +47,23 @@ const MyAccountSection = () => {
           </button>
         </div>
       </div>
-      <div className="section-container openapi-section-container">
+      <div className="section-container openapi-section-container mt-6">
         <p className="title-text">{t("setting.account-section.openapi-title")}</p>
-        <p className="value-text">{openAPIRoute}</p>
-        <span className="btn-danger mt-2" onClick={handleResetOpenIdBtnClick}>
+        <Input className="w-full mb-3" value={openAPIRoute} readOnly />
+        <Button color="warning" className="mb-4" onClick={handleResetOpenIdBtnClick}>
           {t("setting.account-section.reset-api")} <Icon.RefreshCw className="ml-2 h-4 w-4" />
-        </span>
-        <div className="usage-guide-container">
-          <pre>{`POST ${openAPIRoute}\nContent-type: application/json\n{\n  "content": "${t("setting.account-section.openapi-sample-post", {
-            url: window.location.origin,
-            interpolation: { escapeValue: false },
-          })}"\n}`}</pre>
-        </div>
+        </Button>
+        <Textarea
+          className="w-full !font-mono !text-sm mt-4"
+          value={`POST ${openAPIRoute}\nContent-type: application/json\n{\n  "content": "${t(
+            "setting.account-section.openapi-sample-post",
+            {
+              url: window.location.origin,
+              interpolation: { escapeValue: false },
+            }
+          )}"\n}`}
+          readOnly
+        />
       </div>
     </>
   );

web/src/components/Settings/SystemSection.tsx

@@ -33,10 +33,6 @@ const SystemSection = () => {
     memoDisplayWithUpdatedTs: systemStatus.memoDisplayWithUpdatedTs,
   });
   const [telegramBotToken, setTelegramBotToken] = useState<string>("");
-  const [openAIConfig, setOpenAIConfig] = useState<OpenAIConfig>({
-    key: "",
-    host: "",
-  });
 
   useEffect(() => {
     globalStore.fetchSystemStatus();
@@ -44,11 +40,6 @@ const SystemSection = () => {
 
   useEffect(() => {
     api.getSystemSetting().then(({ data: { data: systemSettings } }) => {
-      const openAIConfigSetting = systemSettings.find((setting) => setting.name === "openai-config");
-      if (openAIConfigSetting) {
-        setOpenAIConfig(JSON.parse(openAIConfigSetting.value));
-      }
-
       const telegramBotSetting = systemSettings.find((setting) => setting.name === "telegram-bot-token");
       if (telegramBotSetting) {
         setTelegramBotToken(telegramBotSetting.value);
@@ -96,33 +87,6 @@ const SystemSection = () => {
     toast.success(t("message.succeed-vacuum-database"));
   };
 
-  const handleOpenAIConfigKeyChanged = (value: string) => {
-    setOpenAIConfig({
-      ...openAIConfig,
-      key: value,
-    });
-  };
-
-  const handleOpenAIConfigHostChanged = (value: string) => {
-    setOpenAIConfig({
-      ...openAIConfig,
-      host: value,
-    });
-  };
-
-  const handleSaveOpenAIConfig = async () => {
-    try {
-      await api.upsertSystemSetting({
-        name: "openai-config",
-        value: JSON.stringify(openAIConfig),
-      });
-    } catch (error) {
-      console.error(error);
-      return;
-    }
-    toast.success("OpenAI Config updated");
-  };
-
   const handleTelegramBotTokenChanged = (value: string) => {
     setTelegramBotToken(value);
   };
@@ -296,37 +260,6 @@ const SystemSection = () => {
         onChange={(event) => handleTelegramBotTokenChanged(event.target.value)}
       />
       <Divider className="!mt-3 !my-4" />
-      <div className="form-label">
-        <div className="flex flex-row items-center">
-          <span className="text-sm mr-1">{t("setting.system-section.openai-api-key")}</span>
-          <HelpButton hint={t("setting.system-section.openai-api-key-description")} url="https://platform.openai.com/account/api-keys" />
-        </div>
-        <Button onClick={handleSaveOpenAIConfig}>{t("common.save")}</Button>
-      </div>
-      <Input
-        className="w-full"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        placeholder={t("setting.system-section.openai-api-key-placeholder")}
-        value={openAIConfig.key}
-        onChange={(event) => handleOpenAIConfigKeyChanged(event.target.value)}
-      />
-      <div className="form-label mt-2">
-        <span className="normal-text">{t("setting.system-section.openai-api-host")}</span>
-      </div>
-      <Input
-        className="w-full"
-        sx={{
-          fontFamily: "monospace",
-          fontSize: "14px",
-        }}
-        placeholder={t("setting.system-section.openai-api-host-placeholder")}
-        value={openAIConfig.host}
-        onChange={(event) => handleOpenAIConfigHostChanged(event.target.value)}
-      />
-      <Divider className="!mt-3 !my-4" />
       <div className="form-label">
         <span className="normal-text">{t("setting.system-section.additional-style")}</span>
         <Button onClick={handleSaveAdditionalStyle}>{t("common.save")}</Button>

web/src/components/UpdateLocalStorageDialog.tsx

@@ -51,9 +51,7 @@ const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-content-container max-w-xs">
         <p className="text-sm break-words mb-1">{t("setting.storage-section.update-local-path-description")}</p>
         <div className="flex flex-row">
-          <p className="text-sm text-gray-400 mb-2 break-all">
-            {t("common.e.g")} {"assets/{publicid}"}
-          </p>
+          <p className="text-sm text-gray-400 mb-2 break-all">e.g. {"assets/{publicid}"}</p>
           <HelpButton hint={t("common.learn-more")} url="https://usememos.com/docs/local-storage" />
         </div>
         <Input

web/src/less/setting.less

@@ -2,7 +2,7 @@
   @apply flex flex-row justify-start items-start relative w-full h-full p-4 rounded-lg bg-white dark:bg-zinc-700 dark:text-gray-200 sm:gap-x-4;
 
   > .section-selector-container {
-    @apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0;
+    @apply hidden sm:flex flex-col justify-start items-start sm:w-40 h-auto sm:h-full shrink-0 pb-2 border-r dark:border-r-zinc-600;
 
     > .section-title {
       @apply text-sm mt-2 sm:mt-4 first:mt-2 mb-1 font-mono text-gray-400;
@@ -26,7 +26,7 @@
   }
 
   > .section-content-container {
-    @apply w-full sm:w-auto grow flex flex-col justify-start items-start h-full sm:h-128 overflow-y-scroll hide-scrollbar;
+    @apply w-full sm:w-auto pl-2 grow flex flex-col justify-start items-start h-full sm:h-128 overflow-y-scroll hide-scrollbar;
 
     > .section-container {
       @apply flex flex-col justify-start items-start w-full;

web/src/less/settings/my-account-section.less

-.openapi-section-container {
-  > .value-text {
-    @apply w-full font-mono text-sm shadow-inner border dark:border-zinc-700 py-2 px-3 rounded leading-6 break-all whitespace-pre-wrap;
-  }
-
-  > .usage-guide-container {
-    @apply flex flex-col justify-start items-start mt-2 w-full;
-
-    > .title-text {
-      @apply my-2 text-sm;
-    }
-
-    > pre {
-      @apply w-full bg-gray-100 dark:bg-zinc-700 shadow-inner py-2 px-3 text-sm rounded font-mono break-all whitespace-pre-wrap;
-    }
-  }
-}

web/src/locales/en.json

@@ -59,8 +59,8 @@
     "name": "Name",
     "visibility": "Visibility",
     "learn-more": "Learn more",
-    "e.g": "e.g.",
     "beta": "Beta",
+    "new": "New",
     "dialog": {
       "error": "Error",
       "help": "Help",

web/src/locales/zh-Hans.json

 {
-  "about": {
-    "about-memos": "关于Memos",
-    "memos-description": "Memos是一个基于网页的笔记应用程序，您可以使用它来编写、组织和共享笔记",
-    "no-server-description": "没有为此服务器配置描述。",
-    "other-projects": "其他的项目",
-    "powered-by": "Powered by"
-  },
-  "amount-text": {
-    "day_one": "DAY",
-    "day_other": "DAYS",
-    "memo_one": "MEMO",
-    "memo_other": "MEMOS",
-    "tag_one": "TAG",
-    "tag_other": "TAGS"
-  },
-  "archived": {
-    "archived-memos": "已归档的备忘录",
-    "fetching-data": "请求数据中...",
-    "no-archived-memos": "没有归档的备忘录"
-  },
-  "ask-ai": {
-    "go-to-settings": "前往设置",
-    "not-enabled": "您尚未设置 OpenAI API 密钥。",
-    "placeholder": "随便问",
-    "title": "问 AI",
-    "default-message-group-title": "默认会话",
-    "create-message-group-title": "新建会话",
-    "label-message-group-name-title": "会话名称"
-
-  },
-  "auth": {
-    "host-tip": "你正在注册为管理员用户账号。",
-    "new-password": "新密码",
-    "not-host-tip": "如果你没有账号，请联系站点管理员",
-    "repeat-new-password": "重复新密码",
-    "signup-as-host": "注册为管理员"
-  },
   "common": {
     "about": "关于",
     "admin": "管理",
@@ -56,7 +19,6 @@
     "daily-review": "每日回顾",
     "database": "数据库",
     "delete": "删除",
-    "e.g": "例如",
     "edit": "编辑",
     "email": "邮箱",
     "expand": "展开",
@@ -103,7 +65,44 @@
     "vacuum": "清理未使用资源",
     "version": "版本",
     "visibility": "可见性",
-    "yourself": "你自己"
+    "yourself": "你自己",
+    "new": "新建"
+  },
+  "about": {
+    "about-memos": "关于Memos",
+    "memos-description": "Memos是一个基于网页的笔记应用程序，您可以使用它来编写、组织和共享笔记",
+    "no-server-description": "没有为此服务器配置描述。",
+    "other-projects": "其他的项目",
+    "powered-by": "Powered by"
+  },
+  "amount-text": {
+    "day_one": "DAY",
+    "day_other": "DAYS",
+    "memo_one": "MEMO",
+    "memo_other": "MEMOS",
+    "tag_one": "TAG",
+    "tag_other": "TAGS"
+  },
+  "archived": {
+    "archived-memos": "已归档的备忘录",
+    "fetching-data": "请求数据中...",
+    "no-archived-memos": "没有归档的备忘录"
+  },
+  "ask-ai": {
+    "go-to-settings": "前往设置",
+    "not-enabled": "您尚未设置 OpenAI API 密钥。",
+    "placeholder": "随便问",
+    "title": "问 AI",
+    "default-message-group-title": "默认会话",
+    "create-message-group-title": "新建会话",
+    "label-message-group-name-title": "会话名称"
+  },
+  "auth": {
+    "host-tip": "你正在注册为管理员用户账号。",
+    "new-password": "新密码",
+    "not-host-tip": "如果你没有账号，请联系站点管理员",
+    "repeat-new-password": "重复新密码",
+    "signup-as-host": "注册为管理员"
   },
   "daily-review": {
     "no-memos": "哎呀，空无一物。",

web/src/pages/Setting.tsx

@@ -96,7 +96,7 @@ const Setting = () => {
         </div>
         <div className="section-content-container">
           <Select
-            className="block sm:!hidden"
+            className="block mb-2 sm:!hidden"
             value={state.selectedSection}
             onChange={(_, value) => handleSectionSelectorItemClick(value as SettingSection)}
           >