chore: update setting i18n items

src/components/ConnectionSidebar.tsx

@@ -191,7 +191,7 @@ const ConnectionSidebar = () => {
                 </div>
               )}
               {databaseList.length > 0 && (
-                <div className="w-full sticky top-0 z-1 mb-4 mt-2">
+                <div className="w-full sticky top-0 z-1 my-4">
                   <Select
                     className="w-full bg-white px-4 py-3"
                     value={currentConnectionCtx?.database?.name}

src/components/LocaleSelector.tsx

@@ -26,7 +26,7 @@ const LocaleSelector = () => {
     settingStore.setLocale(locale);
   };
 
-  return <Select className="w-24" value={locale} itemList={localeItemList} onValueChange={handleLocaleChange} />;
+  return <Select className="w-28" value={locale} itemList={localeItemList} onValueChange={handleLocaleChange} />;
 };
 
 export default LocaleSelector;

src/components/OpenAIApiConfigView.tsx

@@ -1,9 +1,11 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useDebounce } from "react-use";
 import { useSettingStore } from "@/store";
 import { OpenAIApiConfig } from "@/types";
 
 const OpenAIApiConfigView = () => {
+  const { t } = useTranslation();
   const settingStore = useSettingStore();
   const [openAIApiConfig, setOpenAIApiConfig] = useState(settingStore.setting.openAIApiConfig);
 
@@ -24,7 +26,7 @@ const OpenAIApiConfigView = () => {
 
   return (
     <>
-      <h3>OpenAI API configuration</h3>
+      <h3 className="pl-4 text-sm text-gray-500">{t("setting.openai-api-configuration.self")}</h3>
       <div className="w-full border border-gray-200 p-4 rounded-lg">
         <div className="flex flex-col">
           <label htmlFor="openai-api-key">Key</label>

src/components/SettingModal.tsx

@@ -17,7 +17,7 @@ const SettingModal = (props: Props) => {
   return (
     <div className={`modal modal-middle ${show && "modal-open"}`}>
       <div className="modal-box relative">
-        <h3 className="font-bold text-lg">Setting</h3>
+        <h3 className="font-bold text-lg">{t("setting.self")}</h3>
         <button className="btn btn-sm btn-circle absolute right-4 top-4" onClick={close}>
           <Icon.IoMdClose className="w-5 h-auto" />
         </button>
@@ -34,19 +34,20 @@ const SettingModal = (props: Props) => {
             <WeChatQRCodeView />
           </div>
 
+          <h3 className="pl-4 text-sm text-gray-500">{t("setting.basic.self")}</h3>
           <div className="w-full border border-gray-200 p-4 rounded-lg">
             <div className="w-full flex flex-row justify-between items-center gap-2">
-              <span>Language</span>
+              <span>{t("setting.basic.language")}</span>
               <LocaleSelector />
             </div>
           </div>
 
           <OpenAIApiConfigView />
 
-          <h3>Danger Zone</h3>
+          <h3 className="pl-4 text-sm text-gray-500">{t("setting.data.self")}</h3>
           <div className="w-full border border-red-200 p-4 rounded-lg">
             <div className="w-full flex flex-row justify-between items-center gap-2">
-              <span>Clear all data</span>
+              <span>{t("setting.data.clear-all-data")}</span>
               <ClearDataButton />
             </div>
           </div>

src/components/kit/Select.tsx

@@ -18,10 +18,10 @@ const Select = (props: Props) => {
 
   return (
     <SelectUI.Root value={value} onValueChange={onValueChange}>
-      <SelectUI.Trigger className={`${className || ""} flex flex-row justify-between items-center border px-2 py-1 rounded-lg`}>
+      <SelectUI.Trigger className={`${className || ""} flex flex-row justify-between items-center border px-3 py-2 rounded-lg`}>
         <SelectUI.Value placeholder={placeholder} />
-        <SelectUI.Icon className="w-5 h-auto">
+        <SelectUI.Icon className="ml-1 w-5 h-auto shrink-0">
-          <Icon.BiChevronRight className="w-full h-auto opacity-60" />
+          <Icon.BiChevronDown className="w-full h-auto opacity-60" />
         </SelectUI.Icon>
       </SelectUI.Trigger>
       <SelectUI.Portal>
@@ -34,7 +34,7 @@ const Select = (props: Props) => {
         >
           <SelectUI.Viewport className="bg-white border shadow p-1 rounded-lg">
             <SelectUI.Group>
-              {placeholder && <SelectUI.Label className="w-full px-2 py-1 text-sm text-gray-400">{placeholder}</SelectUI.Label>}
+              {placeholder && <SelectUI.Label className="w-full px-3 mt-2 mb-1 text-sm text-gray-400">{placeholder}</SelectUI.Label>}
               {itemList.map((item) => (
                 <SelectItem key={item.label} value={item.value}>
                   {item.label}
@@ -50,15 +50,17 @@ const Select = (props: Props) => {
 
 interface SelectItemProps {
   value: string;
+  children: ReactNode;
   disabled?: boolean;
-  children?: ReactNode;
+  className?: string;
 }
-export type Ref = HTMLDivElement;
 
-const SelectItem = forwardRef<Ref, SelectItemProps>(({ children, ...props }, forwardedRef) => {
+const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ children, className, ...props }, forwardedRef) => {
   return (
     <SelectUI.Item
-      className="w-full px-2 py-1 rounded-lg flex flex-row justify-between items-center cursor-pointer hover:bg-gray-100"
+      className={`${
+        className || ""
+      } w-full px-3 py-2 rounded-lg flex flex-row justify-between items-center cursor-pointer hover:bg-gray-100`}
       {...props}
       ref={forwardedRef}
     >

src/locales/en.json

@@ -17,7 +17,7 @@
   "connection": {
     "self": "Connection",
     "new": "Create Connection",
-    "select-database": "Select your database:"
+    "select-database": "Select your database"
   },
   "execution": {
     "title": "Execute query",
@@ -30,6 +30,20 @@
   "editor": {
     "placeholder": "Enter your question here..."
   },
+  "setting": {
+    "self": "Setting",
+    "basic": {
+      "self": "Basic",
+      "language": "Language"
+    },
+    "openai-api-configuration": {
+      "self": "OpenAI API configuration"
+    },
+    "data": {
+      "self": "Data",
+      "clear-all-data": "Clear all data"
+    }
+  },
   "social": {
     "join-discord-channel": "Join Discord Channel",
     "join-wechat-group": "Join WeChat Group"

src/locales/zh.json

@@ -17,7 +17,7 @@
   "connection": {
     "self": "连接",
     "new": "创建连接",
-    "select-database": "选择您的数据库："
+    "select-database": "选择数据库"
   },
   "execution": {
     "title": "执行查询",
@@ -30,6 +30,20 @@
   "editor": {
     "placeholder": "在此输入您的问题..."
   },
+  "setting": {
+    "self": "设置",
+    "basic": {
+      "self": "基础",
+      "language": "语言"
+    },
+    "openai-api-configuration": {
+      "self": "OpenAI API 配置"
+    },
+    "data": {
+      "self": "数据",
+      "clear-all-data": "清除所有数据"
+    }
+  },
   "social": {
     "join-discord-channel": "加入 Discord 频道",
     "join-wechat-group": "加入微信群"