From bfd47dd85395c3822ed9107a96b380ca96a42a18 Mon Sep 17 00:00:00 2001
From: Zach Karr <88005368+zachkarr@users.noreply.github.com>
Date: Sat, 14 Jun 2025 15:18:45 -0500
Subject: [PATCH] Feat: Add systray icon size option (#966)

* Feat: Add systray icon size option

Adds ability to adjust custom icon size for systray module

* Fix: (gjs warning/formating)

Fixes:

- gjs warning: theme parsing error - Not using units is deprecated.
Assuming 'px'. (defaults to rem units 1 by default)

- prettier formatting for MenuCustomIcon JSX element

* Fix: Update default icon size / size type def

Updated default icon size to 1.3rem and added type def to
configuration/modules/config/bar/systray/types.ts

* Fix: supposed to be 1.3em not 1.3rem default size

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>
---
 src/components/bar/modules/systray/index.tsx        | 13 ++++++++++---
 .../modules/config/bar/systray/types.ts             |  1 +
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/bar/modules/systray/index.tsx b/src/components/bar/modules/systray/index.tsx
index 4c13fb0..5a92caf 100644
--- a/src/components/bar/modules/systray/index.tsx
+++ b/src/components/bar/modules/systray/index.tsx
@@ -16,12 +16,12 @@ const createMenu = (menuModel: Gio.MenuModel, actionGroup: Gio.ActionGroup | nul
     return menu;
 };
 
-const MenuCustomIcon = ({ iconLabel, iconColor, item }: MenuCustomIconProps): JSX.Element => {
+const MenuCustomIcon = ({ iconLabel, iconColor, iconSize, item }: MenuCustomIconProps): JSX.Element => {
     return (
         <label
             className={'systray-icon txt-icon'}
             label={iconLabel}
-            css={iconColor ? `color: ${iconColor}` : ''}
+            css={iconColor ? `color: ${iconColor}; font-size: ${iconSize}` : ''}
             tooltipMarkup={bind(item, 'tooltipMarkup')}
         />
     );
@@ -98,10 +98,16 @@ const SysTray = (): BarBoxChild => {
                 if (matchedCustomIcon !== undefined) {
                     const iconLabel = custIcons[matchedCustomIcon].icon || '󰠫';
                     const iconColor = custIcons[matchedCustomIcon].color;
+                    const iconSize = custIcons[matchedCustomIcon].size || '1.3em';
 
                     return (
                         <MenuEntry item={item}>
-                            <MenuCustomIcon iconLabel={iconLabel} iconColor={iconColor} item={item} />
+                            <MenuCustomIcon
+                                iconLabel={iconLabel}
+                                iconColor={iconColor}
+                                iconSize={iconSize}
+                                item={item}
+                            />
                         </MenuEntry>
                     );
                 }
@@ -139,6 +145,7 @@ const SysTray = (): BarBoxChild => {
 interface MenuCustomIconProps {
     iconLabel: string;
     iconColor: string;
+    iconSize: string;
     item: AstalTray.TrayItem;
 }
 
diff --git a/src/configuration/modules/config/bar/systray/types.ts b/src/configuration/modules/config/bar/systray/types.ts
index 66db26a..6b8cc11 100644
--- a/src/configuration/modules/config/bar/systray/types.ts
+++ b/src/configuration/modules/config/bar/systray/types.ts
@@ -2,5 +2,6 @@ export type SystrayIconMap = {
     [key: string]: {
         icon: string;
         color: string;
+        size: string;
     };
 };