nixos-configs/hosts/wim/config/ags/js/quick-settings/button-grid.js

import { Network, Bluetooth, Audio, App, Utils, Widget } from '../../imports.js';
const { Box, CenterBox, Label, Icon } = Widget;
const { execAsync } = Utils;

import EventBox from '../misc/cursorbox.js';


const GridButton = ({
  command = () => {},
  secondaryCommand = () => {},
  icon
} = {}) => Box({
  className: 'grid-button',
  children: [

    EventBox({
      className: 'left-part',
      onPrimaryClickRelease: () => command(),
      child: icon,
    }),

    EventBox({
      className: 'right-part',
      onPrimaryClickRelease: () => secondaryCommand(),
      child: Label({
        label: " ",
        className: 'grid-chev',
      }),
    }),

  ],
});

const FirstRow = () => Box({
  className: 'button-row',
  halign: 'center',
  style: 'margin-top: 15px; margin-bottom: 7px;',
  children: [

    GridButton({
      command: () => Network.toggleWifi(),
      secondaryCommand: () => {
        execAsync(['bash', '-c', 'nm-connection-editor'])
          .catch(print);
      },
      icon: Icon({
        className: 'grid-label',
        connections: [[Network, icon => {
          if (Network.wifi.enabled) {
            icon.icon = 'network-wireless-connected-symbolic';
          }
          else {
            icon.icon = 'network-wireless-offline-symbolic';
          }
        }, 'changed']],
      }),
    }),

    GridButton({
      command: () => {
        execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh blue-toggle'])
          .catch(print);
      },
      secondaryCommand: () => {
        execAsync(['bash', '-c', 'blueberry'])
          .catch(print)
      },
      icon: Icon({
        className: 'grid-label',
        connections: [[Bluetooth, self => {
          if (Bluetooth.enabled) {
            self.icon = 'bluetooth-active-symbolic';
            execAsync(['bash', '-c', 'echo 󰂯 > $HOME/.config/.bluetooth'])
              .catch(print);
          }
          else {
            self.icon = 'bluetooth-disabled-symbolic';
            execAsync(['bash', '-c', 'echo 󰂲 > $HOME/.config/.bluetooth'])
              .catch(print);
          }
        }, 'changed']],
      })
    }),

    GridButton({
      command: () => {
        execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh toggle-radio'])
          .catch(print);
      },
      secondaryCommand: () => {
        execAsync(['notify-send', 'set this up moron'])
          .catch(print);
      },
      icon: Icon({
        className: 'grid-label',
        connections: [[Network, self => {
          if (Network.wifi.enabled)
            self.icon = 'airplane-mode-disabled-symbolic';
          else
            self.icon = 'airplane-mode-symbolic';
        }, 'changed']],
      }),
    }),

  ],
});

const SubRow = () => CenterBox({
  halign: 'start',
  children: [

    Label({
      className: 'sub-label',
      truncate: 'end',
      maxWidthChars: 12,
      connections: [[Network, self => {
        // TODO: handle ethernet too
        self.label = Network.wifi.ssid;
      }, 'changed']],
    }),

    Label({
      className: 'sub-label',
      truncate: 'end',
      maxWidthChars: 12,
      connections: [[Bluetooth, self => {
        if (Bluetooth.connectedDevices[0])
          self.label = String(Bluetooth.connectedDevices[0])
        else
          self.label = 'Disconnected';
      }, 'changed']],
    }),

    null,

  ],
});

const items = {
  101: 'audio-volume-overamplified-symbolic',
  67: 'audio-volume-high-symbolic',
  34: 'audio-volume-medium-symbolic',
  1: 'audio-volume-low-symbolic',
  0: 'audio-volume-muted-symbolic',
};

const itemsMic = {
  2: 'audio-input-microphone-high-symbolic',
  1: 'audio-input-microphone-muted-symbolic',
  0: 'audio-input-microphone-muted-symbolic',
};

const SecondRow = () => Box({
  className: 'button-row',
  halign: 'center',
  style: 'margin-top: 7px; margin-bottom: 15px;',
  children: [

    GridButton({
      command: () => {
        execAsync(['swayosd-client', '--output-volume', 'mute-toggle'])
          .catch(print);
      },

      secondaryCommand: () => {
        execAsync(['bash', '-c', 'pavucontrol'])
          .catch(print);
      },

      icon: Icon({
        className: 'grid-label',
        connections: [[Audio, icon => {
          if (Audio.speaker) {
            if (Audio.speaker.stream.isMuted) {
              icon.icon = items[0];
            }
            else {
              const vol = Audio.speaker.volume * 100;
              for (const threshold of [-1, 0, 33, 66, 100]) {
                if (vol > threshold + 1) {
                  icon.icon = items[threshold + 1];
                }
              }
            }
          }
        }, 'speaker-changed']],
      }),
    }),

    GridButton({
      command: () => {
        execAsync(['swayosd-client', '--input-volume', 'mute-toggle'])
          .catch(print);
      },

      secondaryCommand: () => {
        execAsync(['bash', '-c', 'pavucontrol'])
          .catch(print);
      },

      icon: Icon({
        className: 'grid-label',
        connections: [[Audio, icon => {
          if (Audio.microphone) {
            if (Audio.microphone.stream.isMuted) {
              icon.icon = itemsMic[0];
            }
            else {
              const vol = Audio.microphone.volume * 100;
              for (const threshold of [-1, 0, 1]) {
                if (vol > threshold + 1) {
                  icon.icon = itemsMic[threshold + 1];
                }
              }
            }
          }
        }, 'microphone-changed']],
      })
    }),

    GridButton({
      command: () => {
        execAsync(['bash', '-c', '$LOCK_PATH/lock.sh'])
          .catch(print);
      },
      secondaryCommand: () => App.openWindow('powermenu'),
      icon: Label({
        className: 'grid-label',
        label: " 󰌾 ", 
      }),
    }),

  ],
});

export default () => Box({
  className: 'button-grid',
  vertical: true,
  halign: 'center',
  children: [
    FirstRow(),
    SubRow(),
    SecondRow(),
  ],
});