From 4d0b0d0c8d1024009f929271b1e1a6da102adebd Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 18 Jan 2026 17:24:31 -0800
Subject: [PATCH] add compact sizing variants to ActionIcon

---
 .../action-icon/action-icon.module.css        | 24 +++++++++++++++++++
 .../components/action-icon/action-icon.tsx    | 16 +++++++++++--
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/action-icon/action-icon.module.css b/src/shared/components/action-icon/action-icon.module.css
index a31a53b0b..6897593ef 100644
--- a/src/shared/components/action-icon/action-icon.module.css
+++ b/src/shared/components/action-icon/action-icon.module.css
@@ -4,6 +4,9 @@
     --ai-size-md: calc(2.625rem * var(--mantine-scale));
     --ai-size-lg: calc(3.125rem * var(--mantine-scale));
     --ai-size-xl: calc(3.75rem * var(--mantine-scale));
+    --ai-size-compact-xs: calc(1.5rem * var(--mantine-scale));
+    --ai-size-compact-sm: calc(1.75rem * var(--mantine-scale));
+    --ai-size-compact-md: calc(2rem * var(--mantine-scale));
 
     font-weight: 500;
     transition:
@@ -110,4 +113,25 @@
             border: 1px solid lighten(var(--theme-colors-border), 10%);
         }
     }
+
+    &[data-size='compact-xs'] {
+        width: var(--ai-size-compact-xs);
+        min-width: var(--ai-size-compact-xs);
+        height: var(--ai-size-compact-xs);
+        min-height: var(--ai-size-compact-xs);
+    }
+
+    &[data-size='compact-sm'] {
+        width: var(--ai-size-compact-sm);
+        min-width: var(--ai-size-compact-sm);
+        height: var(--ai-size-compact-sm);
+        min-height: var(--ai-size-compact-sm);
+    }
+
+    &[data-size='compact-md'] {
+        width: var(--ai-size-compact-md);
+        min-width: var(--ai-size-compact-md);
+        height: var(--ai-size-compact-md);
+        min-height: var(--ai-size-compact-md);
+    }
 }
diff --git a/src/shared/components/action-icon/action-icon.tsx b/src/shared/components/action-icon/action-icon.tsx
index 1972b25f3..c853d8b3f 100644
--- a/src/shared/components/action-icon/action-icon.tsx
+++ b/src/shared/components/action-icon/action-icon.tsx
@@ -11,6 +11,13 @@ import { AppIcon, Icon, IconProps } from '/@/shared/components/icon/icon';
 import { Tooltip, TooltipProps } from '/@/shared/components/tooltip/tooltip';
 import { createPolymorphicComponent } from '/@/shared/utils/create-polymorphic-component';
 
+const COMPACT_SIZES = ['compact-xs', 'compact-sm', 'compact-md'] as const;
+type CompactSize = (typeof COMPACT_SIZES)[number];
+
+const isCompactSize = (size: string | undefined): size is CompactSize => {
+    return COMPACT_SIZES.includes(size as CompactSize);
+};
+
 export interface ActionIconProps
     extends ElementProps<'button', keyof MantineActionIconProps>,
         MantineActionIconProps {
@@ -49,12 +56,17 @@ const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(
             [classNames],
         );
 
-        const actionIconProps: ActionIconProps = {
+        // For compact sizes, we need to ensure Mantine recognizes them
+        // by using a valid size and applying custom styles via CSS
+        const mantineSize = isCompactSize(size) ? 'sm' : size;
+
+        const actionIconProps: ActionIconProps & { 'data-size'?: string } = {
             classNames: memoizedClassNames,
-            size,
+            size: mantineSize,
             variant,
             ...props,
             onClick: handleClick,
+            ...(isCompactSize(size) && { 'data-size': size }),
         };
 
         if (tooltip && icon) {