Fix PreviewMessage icon being offcentre

src/api/ChatButton.css

@@ -0,0 +1,4 @@
+.vc-chatbar-button {
+    display: flex;
+    align-items: center;
+}

src/api/ChatButtons.tsx

@@ -4,12 +4,18 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./ChatButton.css";
+
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Logger } from "@utils/Logger";
+import { waitFor } from "@webpack";
 import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
 import { Channel } from "discord-types/general";
 import { HTMLProps, MouseEventHandler, ReactNode } from "react";
 
+let CssClasses: { buttonContainer: string; };
+waitFor(["buttonContainer", "channelTextArea"], m => CssClasses = m);
+
 export interface ChatBarProps {
     channel: Channel;
     disabled: boolean;
@@ -100,7 +106,7 @@ export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
     return (
         <Tooltip text={props.tooltip}>
             {({ onMouseEnter, onMouseLeave }) => (
-                <div style={{ display: "flex" }}>
+                <div className={`expression-picker-chat-input-button ${CssClasses?.buttonContainer ?? ""} vc-chatbar-button`}>
                     <Button
                         aria-label={props.tooltip}
                         size=""

src/plugins/invisibleChat.desktop/index.tsx

@@ -123,9 +123,6 @@ export default definePlugin({
     ),
     settings,
     async start() {
-        const { default: StegCloak } = await getStegCloak();
-        steggo = new StegCloak(true, false);
-
         addButton("InvisibleChat", message => {
             return this.INV_REGEX.test(message?.content)
                 ? {
@@ -144,6 +141,9 @@ export default definePlugin({
         });
 
         addChatBarButton("InvisibleChat", ChatBarIcon);
+
+        const { default: StegCloak } = await getStegCloak();
+        steggo = new StegCloak(true, false);
     },
 
     stop() {

src/plugins/previewMessage/index.tsx

@@ -19,7 +19,7 @@
 import { addChatBarButton, ChatBarButton, removeChatBarButton } from "@api/ChatButtons";
 import { generateId, sendBotMessage } from "@api/Commands";
 import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import definePlugin, { StartAt } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { DraftStore, DraftType, SelectedChannelStore, UserStore, useStateFromStores } from "@webpack/common";
 import { MessageAttachment } from "discord-types/general";
@@ -99,7 +99,10 @@ const PreviewButton: ChatBarButton = (props, isMainChat) => {
                     }
                 )}
             buttonProps={{
-                style: { padding: "0 2px", height: "100%" }
+                style: {
+                    padding: "0 6px",
+                    translate: "0 2px"
+                }
             }}
         >
             <img width={24} height={24} src="https://discord.com/assets/4c5a77a89716352686f590a6f014770c.svg" />
@@ -113,6 +116,9 @@ export default definePlugin({
     description: "Lets you preview your message before sending it.",
     authors: [Devs.Aria],
     dependencies: ["ChatInputButtonAPI"],
+    // start early to ensure we're the first plugin to add our button
+    // This makes the popping in less awkward
+    startAt: StartAt.Init,
 
     start: () => addChatBarButton("previewMessage", PreviewButton),
     stop: () => removeChatBarButton("previewMessage"),