feat: update translation

apps/desktop/src/routes/settings/general.tsx

@@ -1,4 +1,4 @@
-import { DarkIcon, LightIcon, SystemModeIcon } from "@lume/icons";
+import { CheckIcon, DarkIcon, LightIcon, SystemModeIcon } from "@lume/icons";
 import { useStorage } from "@lume/storage";
 import * as Switch from "@radix-ui/react-switch";
 import { invoke } from "@tauri-apps/api/core";
@@ -14,6 +14,7 @@ import { twMerge } from "tailwind-merge";
 export function GeneralSettingScreen() {
  const storage = useStorage();
 
+ const [apiKey, setAPIKey] = useState("");
  const [settings, setSettings] = useState({
  lowPower: false,
  autoupdate: false,
@@ -22,6 +23,7 @@ export function GeneralSettingScreen() {
  media: true,
  hashtag: true,
  notification: true,
+ translation: false,
  appearance: "system",
  });
 
@@ -77,6 +79,17 @@ export function GeneralSettingScreen() {
  setSettings((prev) => ({ ...prev, notification: !settings.notification }));
  };
 
+ const toggleTranslation = async () => {
+ await storage.createSetting("translation", String(+!settings.translation));
+ storage.settings.translation = !settings.translation;
+ // update state
+ setSettings((prev) => ({ ...prev, translation: !settings.translation }));
+ };
+
+ const saveApi = async () => {
+ await storage.createSetting("translateApiKey", apiKey);
+ };
+
  useEffect(() => {
  async function loadSettings() {
  const theme = await getCurrent().theme();
@@ -121,6 +134,12 @@ export function GeneralSettingScreen() {
  ...prev,
  hashtag: !!parseInt(item.value),
  }));
+
+ if (item.key === "translation")
+ setSettings((prev) => ({
+ ...prev,
+ translation: !!parseInt(item.value),
+ }));
  }
  }
 
@@ -223,6 +242,46 @@ export function GeneralSettingScreen() {
  <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
  </Switch.Root>
  </div>
+ <div className="flex w-full items-center justify-between">
+ <div className="flex items-center gap-8">
+ <div className="w-24 shrink-0 text-end text-sm font-semibold">
+ Translation
+ </div>
+ <div className="text-sm">Translate text to your language</div>
+ </div>
+ <Switch.Root
+ checked={settings.translation}
+ onClick={() => toggleTranslation()}
+ className="relative h-7 w-12 cursor-default rounded-full bg-neutral-200 outline-none data-[state=checked]:bg-blue-500 dark:bg-neutral-800"
+ >
+ <Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+ </Switch.Root>
+ </div>
+ {settings.translation ? (
+ <div className="flex w-full items-center gap-8">
+ <div className="w-24 shrink-0 text-end text-sm font-semibold">
+ API Key
+ </div>
+ <div className="relative w-full">
+ <input
+ type="password"
+ spellCheck={false}
+ value={apiKey}
+ onChange={(e) => setAPIKey(e.target.value)}
+ className="w-full border-transparent outline-none focus:outline-none focus:ring-0 focus:border-none h-9 rounded-lg ring-0 placeholder:text-neutral-600 bg-neutral-100 dark:bg-neutral-900"
+ />
+ <div className="h-9 absolute right-0 top-0 inline-flex items-center justify-center">
+ <button
+ type="button"
+ onClick={saveApi}
+ className="mr-1 h-7 w-16 text-sm font-medium shrink-0 inline-flex items-center justify-center rounded-md bg-neutral-200 dark:bg-neutral-800 hover:bg-neutral-300 dark:hover:bg-neutral-700"
+ >
+ Save
+ </button>
+ </div>
+ </div>
+ </div>
+ ) : null}
  <div className="flex w-full items-start gap-8">
  <div className="w-24 shrink-0 text-end text-sm font-semibold">
  Appearance

packages/ark/src/components/note/child.tsx

@@ -89,7 +89,7 @@ export function NoteChild({
  );
  }
 
- if (isError) {
+ if (isError || !data) {
  return (
  <div className="relative flex gap-3">
  <div className="relative flex-1 rounded-md bg-neutral-200 px-2 py-2 dark:bg-neutral-800">

packages/ark/src/components/note/content.tsx

@@ -13,10 +13,10 @@ import { NDKKind } from "@nostr-dev-kit/ndk";
 import { fetch } from "@tauri-apps/plugin-http";
 import getUrls from "get-urls";
 import { nanoid } from "nanoid";
-import { nip19 } from "nostr-tools";
-import { ReactNode, useMemo, useState } from "react";
+import { ReactNode, useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import reactStringReplace from "react-string-replace";
+import { toast } from "sonner";
 import { Hashtag } from "./mentions/hashtag";
 import { MentionNote } from "./mentions/note";
 import { MentionUser } from "./mentions/user";
@@ -29,17 +29,18 @@ import { useNoteContext } from "./provider";
 export function NoteContent({
  className,
  mini = false,
- isTranslatable = false,
 }: {
  className?: string;
  mini?: boolean;
- isTranslatable?: boolean;
 }) {
  const storage = useStorage();
  const event = useNoteContext();
 
  const [content, setContent] = useState(event.content);
- const [translated, setTranslated] = useState(false);
+ const [translate, setTranslate] = useState({
+ translatable: true,
+ translated: false,
+ });
 
  const richContent = useMemo(() => {
  if (event.kind !== NDKKind.Text) return content;
@@ -200,24 +201,31 @@ export function NoteContent({
  }
  }, [content]);
 
- const translate = async () => {
+ const translateContent = async () => {
  try {
+ if (!translate.translatable) return;
+
  const res = await fetch("https://translate.nostr.wine/translate", {
  method: "POST",
  body: JSON.stringify({
- q: content,
- target: "vi",
+ q: event.content,
+ target: storage.locale.slice(0, 2),
  api_key: storage.settings.translateApiKey,
  }),
  headers: { "Content-Type": "application/json" },
  });
 
+ if (!res.ok)
+ toast.error(
+ "Cannot connect to translate service, please try again later.",
+ );
+
  const data = await res.json();
 
  setContent(data.translatedText);
- setTranslated(true);
+ setTranslate((state) => ({ ...state, translated: true }));
  } catch (e) {
- console.error(event.id, String(e));
+ console.error("translate api: ", String(e));
  }
  };
 
@@ -235,22 +243,19 @@ export function NoteContent({
  >
  {richContent}
  </div>
- {isTranslatable && storage.settings.translation ? (
- translated ? (
+ {storage.settings.translation && translate.translatable ? (
+ translate.translated ? (
  <button
  type="button"
- onClick={() => {
- setTranslated(false);
- setContent(event.content);
- }}
+ onClick={() => setContent(event.content)}
  className="mt-3 text-sm text-blue-500 hover:text-blue-600 border-none shadow-none focus:outline-none"
  >
  Show original content
  </button>
  ) : (
  <button
  type="button"
- onClick={translate}
+ onClick={translateContent}
  className="mt-3 text-sm text-blue-500 hover:text-blue-600 border-none shadow-none focus:outline-none"
  >
  Translate to {regionNames.of(storage.locale)}