From 2c198e547ce2424ada0c8e2c067b2d2c7b435c7a Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Tue, 6 Feb 2024 16:50:21 +0100
Subject: [PATCH] Fix PreviewMessage icon being offcentre

---
 src/api/ChatButton.css                      |  4 ++++
 src/api/ChatButtons.tsx                     |  8 +++++++-
 src/plugins/invisibleChat.desktop/index.tsx |  6 +++---
 src/plugins/previewMessage/index.tsx        | 10 ++++++++--
 4 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 src/api/ChatButton.css

diff --git a/src/api/ChatButton.css b/src/api/ChatButton.css
new file mode 100644
index 00000000..30869a84
--- /dev/null
+++ b/src/api/ChatButton.css
@@ -0,0 +1,4 @@
+.vc-chatbar-button {
+    display: flex;
+    align-items: center;
+}
diff --git a/src/api/ChatButtons.tsx b/src/api/ChatButtons.tsx
index 0350965a..c995033b 100644
--- a/src/api/ChatButtons.tsx
+++ b/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=""
diff --git a/src/plugins/invisibleChat.desktop/index.tsx b/src/plugins/invisibleChat.desktop/index.tsx
index 3184e025..4f974a89 100644
--- a/src/plugins/invisibleChat.desktop/index.tsx
+++ b/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() {
diff --git a/src/plugins/previewMessage/index.tsx b/src/plugins/previewMessage/index.tsx
index 1d8b769d..7d3cae59 100644
--- a/src/plugins/previewMessage/index.tsx
+++ b/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"),