nixos-configs/devices/wim/config/ags/js/quick-settings/toggle-button.js

import App from 'resource:///com/github/Aylur/ags/app.js';
import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';

import { CenterBox, Icon, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';

const { Gdk } = imports.gi;
const display = Gdk.Display.get_default();


/** @param {import('types/widgets/revealer').default} rev */
export default (rev) => CenterBox({
    center_widget: ToggleButton({
        setup: (self) => {
            // Open at startup if there are players
            const id = Mpris.connect('changed', () => {
                self.set_active(Mpris.players.length > 0);
                Mpris.disconnect(id);
            });

            self
                .on('toggled', () => {
                    if (self.get_active()) {
                        self.child
                        // @ts-expect-error
                            ?.setCss('-gtk-icon-transform: rotate(0deg);');
                        rev.reveal_child = true;
                    }
                    else {
                        self.child
                        // @ts-expect-error
                            ?.setCss('-gtk-icon-transform: rotate(180deg);');
                        rev.reveal_child = false;
                    }
                })

                // OnHover
                .on('enter-notify-event', () => {
                    self.window.set_cursor(Gdk.Cursor.new_from_name(
                        display,
                        'pointer',
                    ));
                    self.toggleClassName('hover', true);
                })

                // OnHoverLost
                .on('leave-notify-event', () => {
                    self.window.set_cursor(null);
                    self.toggleClassName('hover', false);
                });
        },

        child: Icon({
            icon: `${App.configDir}/icons/down-large.svg`,
            class_name: 'arrow',
            css: '-gtk-icon-transform: rotate(180deg);',
        }),
    }),
});