fixup: i18n for prompts

Author: Yidadaa

app/components/settings.tsx

@@ -22,7 +22,7 @@ import {
 } from "../store";
 import { Avatar, PromptHints } from "./home";
 
-import Locale, { changeLang, getLang } from "../locales";
+import Locale, { AllLangs, changeLang, getLang } from "../locales";
 import { getCurrentCommitId } from "../utils";
 import Link from "next/link";
 import { UPDATE_URL } from "../constant";
@@ -212,26 +212,18 @@ export function Settings(props: { closeSettings: () => void }) {
           </ListItem>
 
           <SettingItem title={Locale.Settings.Lang.Name}>
-            <div className="">
-              <select
-                value={getLang()}
-                onChange={(e) => {
-                  changeLang(e.target.value as any);
-                }}
-              >
-                <option value="en" key="en">
-                  {Locale.Settings.Lang.Options.en}
-                </option>
-
-                <option value="cn" key="cn">
-                  {Locale.Settings.Lang.Options.cn}
-                </option>
-
-                <option value="tw" key="tw">
-                  {Locale.Settings.Lang.Options.tw}
+            <select
+              value={getLang()}
+              onChange={(e) => {
+                changeLang(e.target.value as any);
+              }}
+            >
+              {AllLangs.map((lang) => (
+                <option value={lang} key={lang}>
+                  {Locale.Settings.Lang.Options[lang]}
                 </option>
-              </select>
-            </div>
+              ))}
+            </select>
           </SettingItem>
 
           <div className="no-mobile">

app/locales/en.ts

@@ -66,6 +66,16 @@ const en: LocaleType = {
     SendKey: "Send Key",
     Theme: "Theme",
     TightBorder: "Tight Border",
+    Prompt: {
+      Disable: {
+        Title: "Disable auto-completion",
+        SubTitle: "After disabling, auto-completion will not be available",
+      },
+      List: "Prompt List",
+      ListCount: (builtin: number, custom: number) =>
+        `${builtin} built-in, ${custom} user-defined`,
+      Edit: "Edit",
+    },
     HistoryCount: {
       Title: "Attached Messages Count",
       SubTitle: "Number of sent messages attached per request",

app/locales/index.ts

@@ -1,56 +1,57 @@
-import CN from './cn'
-import EN from './en'
-import TW from './tw'
+import CN from "./cn";
+import EN from "./en";
+import TW from "./tw";
 
-export type { LocaleType } from './cn'
+export type { LocaleType } from "./cn";
 
-type Lang = 'en' | 'cn' | 'tw'
+export const AllLangs = ["en", "cn", "tw"] as const;
+type Lang = typeof AllLangs[number];
 
-const LANG_KEY = 'lang'
+const LANG_KEY = "lang";
 
 function getItem(key: string) {
-    try {
-        return localStorage.getItem(key)
-    } catch {
-        return null
-    }
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
 }
 
 function setItem(key: string, value: string) {
-    try {
-        localStorage.setItem(key, value)
-    } catch { }
+  try {
+    localStorage.setItem(key, value);
+  } catch {}
 }
 
 function getLanguage() {
-    try {
-        return navigator.language.toLowerCase()
-    } catch {
-        return 'cn'
-    }
+  try {
+    return navigator.language.toLowerCase();
+  } catch {
+    return "cn";
+  }
 }
 
 export function getLang(): Lang {
-    const savedLang = getItem(LANG_KEY)
+  const savedLang = getItem(LANG_KEY);
 
-    if (['en', 'cn', 'tw'].includes(savedLang ?? '')) {
-        return savedLang as Lang
-    }
+  if (AllLangs.includes((savedLang ?? "") as Lang)) {
+    return savedLang as Lang;
+  }
 
-    const lang = getLanguage()
+  const lang = getLanguage();
 
-    if (lang.includes('zh') || lang.includes('cn')) {
-        return 'cn'
-    } else if (lang.includes('tw')) {
-        return 'tw'
-    } else {
-        return 'en'
-    }
+  if (lang.includes("zh") || lang.includes("cn")) {
+    return "cn";
+  } else if (lang.includes("tw")) {
+    return "tw";
+  } else {
+    return "en";
+  }
 }
 
 export function changeLang(lang: Lang) {
-    setItem(LANG_KEY, lang)
-    location.reload()
+  setItem(LANG_KEY, lang);
+  location.reload();
 }
 
-export default { en: EN, cn: CN, tw: TW }[getLang()]
+export default { en: EN, cn: CN, tw: TW }[getLang()];

app/locales/tw.ts

@@ -64,6 +64,16 @@ const tw: LocaleType = {
     SendKey: "發送鍵",
     Theme: "主題",
     TightBorder: "緊湊邊框",
+    Prompt: {
+      Disable: {
+        Title: "禁用提示詞自動補全",
+        SubTitle: "禁用後將無法自動根據輸入補全",
+      },
+      List: "自定義提示詞列表",
+      ListCount: (builtin: number, custom: number) =>
+        `內置 ${builtin} 條，用戶定義 ${custom} 條`,
+      Edit: "編輯",
+    },
     HistoryCount: {
       Title: "附帶歷史消息數",
       SubTitle: "每次請求攜帶的歷史消息數",
@@ -117,4 +127,3 @@ const tw: LocaleType = {
 };
 
 export default tw;
-

app/store/prompt.ts

@@ -1,7 +1,6 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import Fuse from "fuse.js";
-import { showToast } from "../components/ui-lib";
 
 export interface Prompt {
   id?: number;
@@ -111,7 +110,6 @@ export const usePromptStore = create<PromptStore>()(
             );
             SearchService.count.builtin = res.en.length + res.cn.length;
             SearchService.init(allPromptsForSearch);
-            showToast(`已加载 ${allPromptsForSearch.length} 条 Prompts`);
           });
       },
     }