From 54b10f99430cbff7f43f0919a0d45308f6c9d184 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Fri, 3 Apr 2026 23:41:57 -0400
Subject: [PATCH 1/3] fix: Add button debounce to solve click-through issue on
 Chrome mobile

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../client/components/ui/components/design/Button.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/client/components/ui/components/design/Button.tsx b/packages/client/components/ui/components/design/Button.tsx
index c142304a0..bc0ca3457 100644
--- a/packages/client/components/ui/components/design/Button.tsx
+++ b/packages/client/components/ui/components/design/Button.tsx
@@ -1,9 +1,10 @@
-import { Show, createRenderEffect, on, splitProps } from "solid-js";
+import { Show, createRenderEffect, mergeProps, on, splitProps } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
 import { AriaButtonProps, createButton } from "@solid-aria/button";
 import { cva } from "styled-system/css/cva";
 
+import { debounce } from "@revolt/common";
 import { Ripple } from "./Ripple";
 import { typography } from "./Text";
 
@@ -89,7 +90,7 @@ export function Button(props: Props) {
     "role",
   ]);
 
-  const [style, rest] = splitProps(propsRest, [
+  const [style, noSty] = splitProps(propsRest, [
     "bg",
     "size",
     "shape",
@@ -118,6 +119,12 @@ export function Button(props: Props) {
     ),
   );
 
+  const [btn, noBtnRest] = splitProps(noSty, ["onPress"]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, solid/reactivity
+  const onPress = debounce((e: any) => btn.onPress?.(e), 100),
+    rest = mergeProps(noBtnRest, { onPress });
+
   const { buttonProps } = createButton(rest, () => ref);
   return (
     <button

From ff5bd901c8c655211e13ce443cd8c1b5e852c514 Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 4 Apr 2026 15:02:39 -0400
Subject: [PATCH 2/3] fix: Apply same code to IconButton - Fix import order

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 .../components/ui/components/design/Button.tsx      | 10 ++++++----
 .../components/ui/components/design/IconButton.tsx  | 13 +++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/client/components/ui/components/design/Button.tsx b/packages/client/components/ui/components/design/Button.tsx
index bc0ca3457..ca99d8581 100644
--- a/packages/client/components/ui/components/design/Button.tsx
+++ b/packages/client/components/ui/components/design/Button.tsx
@@ -5,6 +5,7 @@ import { AriaButtonProps, createButton } from "@solid-aria/button";
 import { cva } from "styled-system/css/cva";
 
 import { debounce } from "@revolt/common";
+
 import { Ripple } from "./Ripple";
 import { typography } from "./Text";
 
@@ -90,7 +91,7 @@ export function Button(props: Props) {
     "role",
   ]);
 
-  const [style, noSty] = splitProps(propsRest, [
+  const [style, rest] = splitProps(propsRest, [
     "bg",
     "size",
     "shape",
@@ -119,17 +120,18 @@ export function Button(props: Props) {
     ),
   );
 
-  const [btn, noBtnRest] = splitProps(noSty, ["onPress"]);
+  const [btn, noBtnRest] = splitProps(rest, ["onPress"]);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, solid/reactivity
   const onPress = debounce((e: any) => btn.onPress?.(e), 100),
-    rest = mergeProps(noBtnRest, { onPress });
+    btnRest = mergeProps(noBtnRest, { onPress });
 
-  const { buttonProps } = createButton(rest, () => ref);
+  const { buttonProps } = createButton(btnRest, () => ref);
   return (
     <button
       {...passthrough}
       {...buttonProps}
+      onTouchEnd={onPress}
       ref={ref}
       class={button({
         shape: shape(),
diff --git a/packages/client/components/ui/components/design/IconButton.tsx b/packages/client/components/ui/components/design/IconButton.tsx
index ae8953dc8..6d6d7727e 100644
--- a/packages/client/components/ui/components/design/IconButton.tsx
+++ b/packages/client/components/ui/components/design/IconButton.tsx
@@ -1,9 +1,11 @@
-import { Show, splitProps } from "solid-js";
+import { mergeProps, Show, splitProps } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
 import { AriaButtonProps, createButton } from "@solid-aria/button";
 import { cva } from "styled-system/css/cva";
 
+import { debounce } from "@revolt/common";
+
 import { Ripple } from "./Ripple";
 import { typography } from "./Text";
 
@@ -39,11 +41,18 @@ export function IconButton(props: Props) {
   ]);
   let ref: HTMLButtonElement | undefined;
 
-  const { buttonProps } = createButton(rest, () => ref);
+  const [btn, noBtnRest] = splitProps(rest, ["onPress"]);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, solid/reactivity
+  const onPress = debounce((e: any) => btn.onPress?.(e), 100),
+    restBtn = mergeProps(noBtnRest, { onPress });
+
+  const { buttonProps } = createButton(restBtn, () => ref);
   return (
     <button
       {...passthrough}
       {...buttonProps}
+      onTouchEnd={onPress}
       ref={ref}
       class={iconButton2({
         ...style,

From 06e18fa3673309e5fca89c481dc52f2c808028eb Mon Sep 17 00:00:00 2001
From: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
Date: Sat, 11 Apr 2026 17:51:34 -0400
Subject: [PATCH 3/3] fix: Add note about reactivity

Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>
---
 packages/client/components/ui/components/design/Button.tsx     | 1 +
 packages/client/components/ui/components/design/IconButton.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/client/components/ui/components/design/Button.tsx b/packages/client/components/ui/components/design/Button.tsx
index ca99d8581..7c67eb0bc 100644
--- a/packages/client/components/ui/components/design/Button.tsx
+++ b/packages/client/components/ui/components/design/Button.tsx
@@ -122,6 +122,7 @@ export function Button(props: Props) {
 
   const [btn, noBtnRest] = splitProps(rest, ["onPress"]);
 
+  //Eslint being silly, this is reactive
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, solid/reactivity
   const onPress = debounce((e: any) => btn.onPress?.(e), 100),
     btnRest = mergeProps(noBtnRest, { onPress });
diff --git a/packages/client/components/ui/components/design/IconButton.tsx b/packages/client/components/ui/components/design/IconButton.tsx
index 6d6d7727e..af2554ff7 100644
--- a/packages/client/components/ui/components/design/IconButton.tsx
+++ b/packages/client/components/ui/components/design/IconButton.tsx
@@ -43,6 +43,7 @@ export function IconButton(props: Props) {
 
   const [btn, noBtnRest] = splitProps(rest, ["onPress"]);
 
+  //Eslint being silly, this is reactive
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, solid/reactivity
   const onPress = debounce((e: any) => btn.onPress?.(e), 100),
     restBtn = mergeProps(noBtnRest, { onPress });