dotfiles/config/astal/components/bar/ui/modules/QuickView.tsx

import { bind } from "astal";
import AstalBattery from "gi://AstalBattery";
import AstalBluetooth from "gi://AstalBluetooth";
import AstalNetwork from "gi://AstalNetwork"
import AstalWp from "gi://AstalWp";
import Brightness from "../../util/brightness";
import { Gtk } from "astal/gtk4";

const QuickView = () => {
    return <box>
        <Audio></Audio>
        <label label="QuickView"></label>
    </box>
}


const NetworkWidget = () => {
    const network = AstalNetwork.get_default();
    const status = bind( network, "state" );
    const wifiStrength = bind( network.wifi, 'strength' );
    const states = {
        "off": ""
    }

    return <label label={""}></label>

}

const BluetoothWidget = () => {
    const bluetooth = AstalBluetooth.get_default();
    const enabled = bind( bluetooth, "isPowered" );
    const connected = bind( bluetooth, "isConnected" );
}


const BatteryWidget = () => {
    const battery = AstalBattery.get_default();
    if ( battery.get_is_present() ) {
        const states = {
            "100": "",
            "90": "",
            "80": "",
            "70": "",
            "60": "",
            "50": "",
            "40": "",
            "30": "",
            "20": "",
            "10": "",
            "critical": "",
            "charging":"",
            "plugged": " ",
        }
    }
    // Else, no battery available -> Don't show the widget
}


const BrightnessWidget = () => {
    // TODO: Finish (detect if there is a controllable screen)
    const brightness = Brightness.get_default();
    const screen_brightness = bind( brightness, "screen" );

    return <label label={"🌣" + screen_brightness}></label>
}


const Audio = () => {
    const wireplumber = AstalWp.get_default();
    if ( wireplumber ) {
        // With the states, split up the icons according to number of elements available
        const speakerMuted = " ";
        const speakersStates = [
            "",
            "",
            ""
        ]
        const micStates = {
            "on": " ",
            "muted": " ",
        }
        const volume_speakers = bind( wireplumber.defaultSpeaker, 'volume' );
        const muted_speakers = bind( wireplumber.defaultSpeaker, 'mute' );
        const muted_mic = bind( wireplumber.defaultMicrophone, 'mute' );

        return <box orientation={Gtk.Orientation.HORIZONTAL}>
            <label label={micStates[ muted_mic ? 'muted' : 'on' ]}></label>
            <label label={(muted_speakers ? speakerMuted : volume_speakers.as( v => {
                if ( v === 0 ) return speakerMuted;
                else if ( v <= 30 ) return speakersStates[ 0 ];
                else if ( v <= 70 ) return speakersStates[ 1 ];
                else return speakersStates[ 2 ];
            } ) )}></label>
            <label label={volume_speakers.as( v => { return "" + v } ) }></label>
            <label label={wireplumber.default_speaker.get_name()}></label>
        </box>
    } else {
        print( '[ WirePlumber ] Could not connect, Audio support in bar will be missing' );
    }
    return null;
}


export default {
    QuickView
}