Update how conditional elements are rendered for bar modules. (#688)

src/components/bar/modules/bluetooth/index.tsx

@@ -11,11 +11,11 @@ import { Astal } from 'astal/gtk3';
 const { rightClick, middleClick, scrollDown, scrollUp } = options.bar.bluetooth;
 
 const Bluetooth = (): BarBoxChild => {
-    const btIcon = (isPowered: boolean): JSX.Element => (
+    const BluetoothIcon = ({ isPowered }: BluetoothIconProps): JSX.Element => (
         <label className={'bar-button-icon bluetooth txt-icon bar'} label={isPowered ? '󰂯' : '󰂲'} />
     );
 
-    const btText = (isPowered: boolean, devices: AstalBluetooth.Device[]): JSX.Element => {
+    const BluetoothLabel = ({ isPowered, devices }: BluetoothLabelProps): JSX.Element => {
         const connectDevices = devices.filter((device) => device.connected);
 
         const label =
@@ -39,11 +39,17 @@ const Bluetooth = (): BarBoxChild => {
 
     const componentBinding = Variable.derive(
         [bind(options.bar.bluetooth.label), bind(bluetoothService, 'isPowered'), bind(bluetoothService, 'devices')],
-        (showLabel: boolean, isPowered: boolean, devices: AstalBluetooth.Device[]): JSX.Element[] => {
+        (showLabel: boolean, isPowered: boolean, devices: AstalBluetooth.Device[]): JSX.Element => {
             if (showLabel) {
-                return [btIcon(isPowered), btText(isPowered, devices)];
+                return (
+                    <box>
+                        <BluetoothIcon isPowered={isPowered} />
+                        <BluetoothLabel isPowered={isPowered} devices={devices} />
+                    </box>
+                );
             }
-            return [btIcon(isPowered)];
+
+            return <BluetoothIcon isPowered={isPowered} />;
         },
     );
 
@@ -101,4 +107,13 @@ const Bluetooth = (): BarBoxChild => {
     };
 };
 
+interface BluetoothIconProps {
+    isPowered: boolean;
+}
+
+interface BluetoothLabelProps {
+    isPowered: boolean;
+    devices: AstalBluetooth.Device[];
+}
+
 export { Bluetooth };

src/components/bar/modules/clock/index.tsx

@@ -13,8 +13,8 @@ const { style } = options.theme.bar.buttons;
 const time = Variable.derive([systemTime, format], (c, f) => c.format(f) || '');
 
 const Clock = (): BarBoxChild => {
-    const clockTime = <label className={'bar-button-label clock bar'} label={bind(time)} />;
+    const ClockTime = (): JSX.Element => <label className={'bar-button-label clock bar'} label={bind(time)} />;
-    const clockIcon = <label className={'bar-button-icon clock txt-icon bar'} label={bind(icon)} />;
+    const ClockIcon = (): JSX.Element => <label className={'bar-button-icon clock txt-icon bar'} label={bind(icon)} />;
 
     const componentClassName = Variable.derive(
         [bind(style), bind(showIcon), bind(showTime)],
@@ -31,11 +31,16 @@ const Clock = (): BarBoxChild => {
 
     const componentChildren = Variable.derive([bind(showIcon), bind(showTime)], (shIcn, shTm) => {
         if (shIcn && !shTm) {
-            return [clockIcon];
+            return <ClockIcon />;
         } else if (shTm && !shIcn) {
-            return [clockTime];
+            return <ClockTime />;
         }
-        return [clockIcon, clockTime];
+        return (
+            <box>
+                <ClockIcon />
+                <ClockTime />
+            </box>
+        );
     });
 
     const component = (

src/components/bar/modules/network/index.tsx

@@ -23,7 +23,7 @@ const Network = (): BarBoxChild => {
         },
     );
 
-    const networkIcon = <icon className={'bar-button-icon network-icon'} icon={iconBinding()} />;
+    const NetworkIcon = (): JSX.Element => <icon className={'bar-button-icon network-icon'} icon={iconBinding()} />;
 
     const networkLabel = Variable.derive(
         [
@@ -66,8 +66,6 @@ const Network = (): BarBoxChild => {
         },
     );
 
-    const componentChildren = [networkIcon, networkLabel()];
-
     const component = (
         <box
             vexpand
@@ -79,7 +77,8 @@ const Network = (): BarBoxChild => {
                 componentClassName.drop();
             }}
         >
-            {componentChildren}
+            <NetworkIcon />
+            {networkLabel()}
         </box>
     );
 

src/components/bar/modules/notifications/index.tsx

@@ -44,7 +44,7 @@ export const Notifications = (): BarBoxChild => {
         ) => {
             const filteredNotifications = filterNotifications(notif, ignoredNotifs);
 
-            const notifIcon = (
+            const NotifIcon = (): JSX.Element => (
                 <label
                     halign={Gtk.Align.CENTER}
                     className={'bar-button-icon notifications txt-icon bar'}
@@ -52,7 +52,7 @@ export const Notifications = (): BarBoxChild => {
                 />
             );
 
-            const notifLabel = (
+            const NotifLabel = (): JSX.Element => (
                 <label
                     halign={Gtk.Align.CENTER}
                     className={'bar-button-label notifications'}
@@ -62,11 +62,16 @@ export const Notifications = (): BarBoxChild => {
 
             if (showTotal) {
                 if (hideCountForZero && filteredNotifications.length === 0) {
-                    return [notifIcon];
+                    return <NotifIcon />;
                 }
-                return [notifIcon, notifLabel];
+                return (
+                    <box>
+                        <NotifIcon />
+                        <NotifLabel />
+                    </box>
+                );
             }
-            return [notifIcon];
+            return <NotifIcon />;
         },
     );
 

src/components/bar/modules/volume/index.tsx

@@ -11,12 +11,12 @@ import { Astal } from 'astal/gtk3';
 const { rightClick, middleClick, scrollUp, scrollDown } = options.bar.volume;
 
 const Volume = (): BarBoxChild => {
-    const volumeIcon = (isMuted: boolean, vol: number): JSX.Element => {
+    const VolumeIcon = ({ isMuted, volume }: VolumeIconProps): JSX.Element => {
-        return <label className={'bar-button-icon volume txt-icon bar'} label={getIcon(isMuted, vol)} />;
+        return <label className={'bar-button-icon volume txt-icon bar'} label={getIcon(isMuted, volume)} />;
     };
 
-    const volumeLabel = (vol: number): JSX.Element => {
+    const VolumeLabel = ({ volume }: VolumeLabelProps): JSX.Element => {
-        return <label className={'bar-button-label volume'} label={`${Math.round(vol * 100)}%`} />;
+        return <label className={'bar-button-label volume'} label={`${Math.round(volume * 100)}%`} />;
     };
 
     const componentTooltip = Variable.derive(
@@ -49,9 +49,15 @@ const Volume = (): BarBoxChild => {
         ],
         (showLabel, vol, isMuted) => {
             if (showLabel) {
-                return [volumeIcon(isMuted, vol), volumeLabel(vol)];
+                return (
+                    <box>
+                        <VolumeIcon isMuted={isMuted} volume={vol} />
+                        <VolumeLabel volume={vol} />
+                    </box>
+                );
             }
-            return [volumeIcon(isMuted, vol)];
+
+            return <VolumeIcon isMuted={isMuted} volume={vol} />;
         },
     );
     const component = (
@@ -117,4 +123,13 @@ const Volume = (): BarBoxChild => {
     };
 };
 
+interface VolumeIconProps {
+    isMuted: boolean;
+    volume: number;
+}
+
+interface VolumeLabelProps {
+    volume: number;
+}
+
 export { Volume };

src/components/bar/modules/window_title/index.tsx

@@ -13,6 +13,26 @@ const { leftClick, rightClick, middleClick, scrollDown, scrollUp } = options.bar
 const ClientTitle = (): BarBoxChild => {
     const { custom_title, class_name, label, icon, truncation, truncation_size } = options.bar.windowtitle;
 
+    const ClientIcon = ({ client }: ClientIconProps): JSX.Element => {
+        return <label className={'bar-button-icon windowtitle txt-icon bar'} label={getWindowMatch(client).icon} />;
+    };
+
+    const ClientLabel = ({
+        client,
+        useCustomTitle,
+        useClassName,
+        showIcon,
+        truncate,
+        truncationSize,
+    }: ClientLabelProps): JSX.Element => {
+        return (
+            <label
+                className={`bar-button-label windowtitle ${showIcon ? '' : 'no-icon'}`}
+                label={truncateTitle(getTitle(client, useCustomTitle, useClassName), truncate ? truncationSize : -1)}
+            />
+        );
+    };
+
     const componentClassName = Variable.derive(
         [bind(options.theme.bar.buttons.style), bind(label)],
         (style: string, showLabel: boolean) => {
@@ -48,22 +68,18 @@ const ClientTitle = (): BarBoxChild => {
             const children: JSX.Element[] = [];
 
             if (showIcon) {
-                children.push(
+                children.push(<ClientIcon client={client} />);
-                    <label
-                        className={'bar-button-icon windowtitle txt-icon bar'}
-                        label={getWindowMatch(client).icon}
-                    />,
-                );
             }
 
             if (showLabel) {
                 children.push(
-                    <label
+                    <ClientLabel
-                        className={`bar-button-label windowtitle ${showIcon ? '' : 'no-icon'}`}
+                        client={client}
-                        label={truncateTitle(
+                        useCustomTitle={useCustomTitle}
-                            getTitle(client, useCustomTitle, useClassName),
+                        useClassName={useClassName}
-                            truncate ? truncationSize : -1,
+                        truncate={truncate}
-                        )}
+                        truncationSize={truncationSize}
+                        showIcon={showIcon}
                     />,
                 );
             }
@@ -122,4 +138,17 @@ const ClientTitle = (): BarBoxChild => {
     };
 };
 
+interface ClientIconProps {
+    client: AstalHyprland.Client;
+}
+
+interface ClientLabelProps {
+    client: AstalHyprland.Client;
+    useCustomTitle: boolean;
+    useClassName: boolean;
+    showIcon: boolean;
+    truncate: boolean;
+    truncationSize: number;
+}
+
 export { ClientTitle };