Add chat bar button api ~ fixes buttons for russian users

src/plugins/translate/TranslateIcon.tsx

@@ -16,9 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { ChatBarButton } from "@api/ChatButtons";
 import { classes } from "@utils/misc";
 import { openModal } from "@utils/modal";
-import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
 
 import { settings } from "./settings";
 import { TranslateModal } from "./TranslateModal";
@@ -37,42 +37,30 @@ export function TranslateIcon({ height = 24, width = 24, className }: { height?:
     );
 }
 
-export function TranslateChatBarIcon({ slateProps }: { slateProps: { type: { analyticsName: string; }; }; }) {
+export const TranslateChatBarIcon: ChatBarButton = (props, isMainChat) => {
     const { autoTranslate } = settings.use(["autoTranslate"]);
 
-    if (slateProps.type.analyticsName !== "normal")
-        return null;
+    if (!isMainChat) return null;
 
     const toggle = () => settings.store.autoTranslate = !autoTranslate;
 
     return (
-        <Tooltip text="Open Translate Modal">
-            {({ onMouseEnter, onMouseLeave }) => (
-                <div style={{ display: "flex" }}>
-                    <Button
-                        aria-haspopup="dialog"
-                        aria-label="Open Translate Modal"
-                        size=""
-                        look={ButtonLooks.BLANK}
-                        onMouseEnter={onMouseEnter}
-                        onMouseLeave={onMouseLeave}
-                        innerClassName={ButtonWrapperClasses.button}
-                        onClick={e => {
-                            if (e.shiftKey) return toggle();
+        <ChatBarButton
+            tooltip="Open Translate Modal"
+            onClick={e => {
+                if (e.shiftKey) return toggle();
 
-                            openModal(props => (
-                                <TranslateModal rootProps={props} />
-                            ));
-                        }}
-                        onContextMenu={() => toggle()}
-                        style={{ padding: "0 4px" }}
-                    >
-                        <div className={ButtonWrapperClasses.buttonWrapper}>
-                            <TranslateIcon className={cl({ "auto-translate": autoTranslate })} />
-                        </div>
-                    </Button>
-                </div>
-            )}
-        </Tooltip>
+                openModal(props => (
+                    <TranslateModal rootProps={props} />
+                ));
+            }}
+            onContextMenu={() => toggle()}
+            buttonProps={{
+                "aria-haspopup": "dialog",
+                style: { padding: "0 4px" }
+            }}
+        >
+            <TranslateIcon className={cl({ "auto-translate": autoTranslate })} />
+        </ChatBarButton>
     );
-}
+};

src/plugins/translate/index.tsx

@@ -18,11 +18,11 @@
 
 import "./styles.css";
 
+import { addChatBarButton, removeChatBarButton } from "@api/ChatButtons";
 import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
 import { addAccessory, removeAccessory } from "@api/MessageAccessories";
 import { addPreSendListener, removePreSendListener } from "@api/MessageEvents";
 import { addButton, removeButton } from "@api/MessagePopover";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { ChannelStore, Menu } from "@webpack/common";
@@ -55,25 +55,16 @@ export default definePlugin({
     name: "Translate",
     description: "Translate messages with Google Translate",
     authors: [Devs.Ven],
-    dependencies: ["MessageAccessoriesAPI", "MessagePopoverAPI", "MessageEventsAPI"],
+    dependencies: ["MessageAccessoriesAPI", "MessagePopoverAPI", "MessageEventsAPI", "ChatInputButtonAPI"],
     settings,
     // not used, just here in case some other plugin wants it or w/e
     translate,
 
-    patches: [
-        {
-            find: "ChannelTextAreaButtons",
-            replacement: {
-                match: /(\i)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&,(()=>{try{$2||$1.push($self.chatBarIcon(arguments[0]))}catch{}})()",
-            }
-        },
-    ],
-
     start() {
         addAccessory("vc-translation", props => <TranslationAccessory message={props.message} />);
 
         addContextMenuPatch("message", messageCtxPatch);
+        addChatBarButton("vc-translate", TranslateChatBarIcon);
 
         addButton("vc-translate", message => {
             if (!message.content) return null;
@@ -101,13 +92,8 @@ export default definePlugin({
     stop() {
         removePreSendListener(this.preSend);
         removeContextMenuPatch("message", messageCtxPatch);
+        removeChatBarButton("vc-translate");
         removeButton("vc-translate");
         removeAccessory("vc-translation");
     },
-
-    chatBarIcon: (slateProps: any) => (
-        <ErrorBoundary noop>
-            <TranslateChatBarIcon slateProps={slateProps} />
-        </ErrorBoundary>
-    )
 });