From 394a25ff1555c125bdc50e62e98bf75dcaf4c4be Mon Sep 17 00:00:00 2001
From: Sqaaakoi <sqaaakoi-git@sqaaakoi.xyz>
Date: Thu, 14 Mar 2024 21:26:33 +1300
Subject: [PATCH] BetterQuickReact: Configurable column count, toggle frequent
 emojis without reloading

---
 src/plugins/betterQuickReact/index.css | 13 +++++++++---
 src/plugins/betterQuickReact/index.tsx | 29 ++++++++++++++++++++++----
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/plugins/betterQuickReact/index.css b/src/plugins/betterQuickReact/index.css
index a2b73a942..8bfaa15f9 100644
--- a/src/plugins/betterQuickReact/index.css
+++ b/src/plugins/betterQuickReact/index.css
@@ -1,6 +1,13 @@
 /* Fixes to make the quick reactions look better */
 
-[class*="wrapper_"][role="group"]:has(>[id*="message-quickreact-"]:nth-child(5)) {
-    padding: 4px 1px 6px;
-    gap: 2px;
+.vc-better-quick-react[role="group"] {
+    padding: 4px 0 6px;
+    justify-self: center;
+    gap: 4px;
+    max-width: calc(var(--vc-better-quick-react-columns) * 44px);
+    grid-template-columns: repeat(var(--vc-better-quick-react-columns), 40px);
+}
+
+[class*="menu_"]:has(>div>.vc-better-quick-react[role="group"]) {
+    max-width: fit-content
 }
diff --git a/src/plugins/betterQuickReact/index.tsx b/src/plugins/betterQuickReact/index.tsx
index e30ce91ac..71bb17939 100644
--- a/src/plugins/betterQuickReact/index.tsx
+++ b/src/plugins/betterQuickReact/index.tsx
@@ -24,6 +24,13 @@ export const settings = definePluginSettings({
         markers: makeRange(1, 16, 1),
         stickToMarkers: true
     },
+    columns: {
+        description: "Columns of quick reactions to display",
+        type: OptionType.SLIDER,
+        default: 4,
+        markers: makeRange(4, 10, 1),
+        stickToMarkers: true
+    },
 });
 
 export default definePlugin({
@@ -35,10 +42,9 @@ export default definePlugin({
     patches: [
         {
             find: "this.favoriteEmojisWithoutFetchingLatest.concat",
-            predicate: () => settings.store.frequentEmojis,
             replacement: {
-                match: "this.favoriteEmojisWithoutFetchingLatest.concat",
-                replace: "[].concat"
+                match: /(this\.favoriteEmojisWithoutFetchingLatest)\.concat/,
+                replace: "($self.settings.store.frequentEmojis?[]:$1).concat"
             }
         },
         {
@@ -47,9 +53,24 @@ export default definePlugin({
                 match: /(\i)\.length>4&&\((\i)\.length=4\);/,
                 replace: "$1.length>$self.getMaxQuickReactions()&&($2.length=$self.getMaxQuickReactions());"
             }
+        },
+        {
+            find: "default.Messages.ADD_REACTION_NAMED.format",
+            replacement: {
+                match: /className:(\i)\.wrapper,/,
+                replace: "className:\"vc-better-quick-react \"+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"
+            }
+        },
+        // MenuGroup doesn't accept styles or anything special by default :/
+        {
+            find: "{MenuGroup:function()",
+            replacement: {
+                match: /role:"group",/,
+                replace: "role:\"group\",style:arguments[0].style,"
+            }
         }
     ],
     getMaxQuickReactions() {
-        return settings.store.rows * 4;
+        return settings.store.rows * settings.store.columns;
     }
 });