Translate: Improve ease of use / UX

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 => (
-                    <TranslateModal rootProps={props} />
-                ));
+                else openTranslateModal();
             }}
             onContextMenu={toggle}
             buttonProps={{
@@ -94,9 +91,9 @@ export const TranslateChatBarIcon: ChatBarButtonFactory = ({ isMainChat }) => {
 
     if (shouldShowTranslateEnabledTooltip && settings.store.showAutoTranslateTooltip)
         return (
-            <Tooltip text="Auto Translate Enabled" forceOpen>
-                {() => button}
-            </Tooltip>
+            <TooltipContainer text="Auto Translate Enabled" forceOpen>
+                {button}
+            </TooltipContainer>
         );
 
     return button;

src/plugins/translate/TranslateModal.tsx

@@ -16,10 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+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 (
         <ModalRoot {...rootProps}>
             <ModalHeader className={cl("modal-header")}>
-                <Forms.FormTitle tag="h2" className={cl("modal-title")}>
+                <BaseText tag="h2" size="lg" weight="semibold" className={cl("modal-title")}>
                     Translate
-                </Forms.FormTitle>
+                </BaseText>
                 <ModalCloseButton onClick={rootProps.onClose} />
             </ModalHeader>
 
@@ -99,3 +100,7 @@ export function TranslateModal({ rootProps }: { rootProps: ModalProps; }) {
         </ModalRoot>
     );
 }
+
+export function openTranslateModal() {
+    openModal(props => <TranslateModal rootProps={props} />);
+}

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: () => (
+            <Button onClick={openTranslateModal}>
+                Customize translation languages & Auto-Translate
+            </Button>
+        )
+    }
 }, {
     deeplApiKey: {
         hidden() { return this.store.service !== "deepl" && this.store.service !== "deepl-pro"; }