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"; }