diff --git a/src/plugins/translate/TranslateIcon.tsx b/src/plugins/translate/TranslateIcon.tsx index e27ff8c91..c1b18ba1b 100644 --- a/src/plugins/translate/TranslateIcon.tsx +++ b/src/plugins/translate/TranslateIcon.tsx @@ -17,13 +17,13 @@ */ import { ChatBarButton, ChatBarButtonFactory } from "@api/ChatButtons"; +import { TooltipContainer } from "@components/TooltipContainer"; import { classes } from "@utils/misc"; -import { openModal } from "@utils/modal"; import { IconComponent } from "@utils/types"; -import { Alerts, Forms, Tooltip, useEffect, useState } from "@webpack/common"; +import { Alerts, Forms, useEffect, useState } from "@webpack/common"; import { settings } from "./settings"; -import { TranslateModal } from "./TranslateModal"; +import { openTranslateModal } from "./TranslateModal"; import { cl } from "./utils"; export const TranslateIcon: IconComponent = ({ height = 20, width = 20, className }) => { @@ -78,10 +78,7 @@ export const TranslateChatBarIcon: ChatBarButtonFactory = ({ isMainChat }) => { tooltip="Open Translate Modal" onClick={e => { if (e.shiftKey) return toggle(); - - openModal(props => ( - - )); + else openTranslateModal(); }} onContextMenu={toggle} buttonProps={{ @@ -94,9 +91,9 @@ export const TranslateChatBarIcon: ChatBarButtonFactory = ({ isMainChat }) => { if (shouldShowTranslateEnabledTooltip && settings.store.showAutoTranslateTooltip) return ( - - {() => button} - + + {button} + ); return button; diff --git a/src/plugins/translate/TranslateModal.tsx b/src/plugins/translate/TranslateModal.tsx index 0b343eb1a..4f10e573c 100644 --- a/src/plugins/translate/TranslateModal.tsx +++ b/src/plugins/translate/TranslateModal.tsx @@ -16,10 +16,11 @@ * along with this program. If not, see . */ +import { BaseText } from "@components/BaseText"; import { Divider } from "@components/Divider"; import { FormSwitch } from "@components/FormSwitch"; import { Margins } from "@utils/margins"; -import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal"; +import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal"; import { Forms, SearchableSelect, useMemo } from "@webpack/common"; import { settings } from "./settings"; @@ -73,13 +74,13 @@ function AutoTranslateToggle() { } -export function TranslateModal({ rootProps }: { rootProps: ModalProps; }) { +function TranslateModal({ rootProps }: { rootProps: ModalProps; }) { return ( - + Translate - + @@ -99,3 +100,7 @@ export function TranslateModal({ rootProps }: { rootProps: ModalProps; }) { ); } + +export function openTranslateModal() { + openModal(props => ); +} diff --git a/src/plugins/translate/settings.ts b/src/plugins/translate/settings.tsx similarity index 73% rename from src/plugins/translate/settings.ts rename to src/plugins/translate/settings.tsx index b80be974a..cbb39e696 100644 --- a/src/plugins/translate/settings.ts +++ b/src/plugins/translate/settings.tsx @@ -17,36 +17,39 @@ */ import { definePluginSettings } from "@api/Settings"; +import { Button } from "@components/Button"; import { OptionType } from "@utils/types"; +import { openTranslateModal } from "./TranslateModal"; + export const settings = definePluginSettings({ receivedInput: { type: OptionType.STRING, - description: "Language that received messages should be translated from", + description: "Language incoming messages are translated from", default: "auto", hidden: true }, receivedOutput: { type: OptionType.STRING, - description: "Language that received messages should be translated to", + description: "Language incoming messages are translated to", default: "en", hidden: true }, sentInput: { type: OptionType.STRING, - description: "Language that your own messages should be translated from", + description: "Language your messages are translated from", default: "auto", hidden: true }, sentOutput: { type: OptionType.STRING, - description: "Language that your own messages should be translated to", + description: "Language your messages are translated to", default: "en", hidden: true }, service: { type: OptionType.SELECT, - description: IS_WEB ? "Translation service (Not supported on Web!)" : "Translation service", + description: IS_WEB ? "Translation provider (not available on web)" : "Translation provider", hidden: IS_WEB, options: [ { label: "Google Translate", value: "google", default: true }, @@ -58,24 +61,32 @@ export const settings = definePluginSettings({ }, deeplApiKey: { type: OptionType.STRING, - description: "Get your API key from https://deepl.com/your-account", + description: "Your DeepL API key (from deepl.com/your-account)", default: "" }, kagiSession: { type: OptionType.STRING, - description: "Get your session token from https://kagi.com/settings?p=user_details", + description: "Your Kagi session token (from kagi.com/settings?p=user_details)", default: "" }, autoTranslate: { type: OptionType.BOOLEAN, - description: "Automatically translate your messages before sending. You can also shift/right click the translate button to toggle this", + description: "Automatically translate your messages before sending. You can also Shift+click or right-click the translate button to toggle this", default: false }, showAutoTranslateTooltip: { type: OptionType.BOOLEAN, - description: "Show a tooltip on the ChatBar button whenever a message is automatically translated", + description: "Show a tooltip on the chat bar button when a message is auto-translated", default: true }, + manageTranslateSettings: { + type: OptionType.COMPONENT, + component: () => ( + + ) + } }, { deeplApiKey: { hidden() { return this.store.service !== "deepl" && this.store.service !== "deepl-pro"; }