nixos/modules/home/ags/app/widget/QuickSettings.tsx

import Gtk from "gi://Gtk?version=3.0"
import AstalWp from "gi://AstalWp"
import Notifd from "gi://AstalNotifd"
import { execAsync, Variable, bind } from "astal"
import Dropdown from "./Dropdown"
import { wifiIcon, WifiSection } from "./Wifi"
import { batteryIcon, batteryPercent, BatterySection } from "./Battery"
import { NotificationCard } from "./Notifications"

const speaker = AstalWp.get_default().audio.default_speaker!
const mic = AstalWp.get_default().audio.default_microphone
const notifd = Notifd.get_default()

const notifCount = bind(notifd, "notifications").as((ns) => ns.length)

const speakerIcon = Variable.derive(
    [bind(speaker, "volume"), bind(speaker, "mute")],
    (volume, mute) => {
        if (mute || volume <= 0.01) return "audio-volume-muted-symbolic"
        if (volume < 0.33) return "audio-volume-low-symbolic"
        if (volume < 0.66) return "audio-volume-medium-symbolic"
        return "audio-volume-high-symbolic"
    },
)

const micIcon = mic
    ? Variable.derive([bind(mic, "volume"), bind(mic, "mute")], (volume, mute) =>
          mute || volume <= 0.01
              ? "microphone-sensitivity-muted-symbolic"
              : "microphone-sensitivity-high-symbolic",
      )
    : null

const actions = [
    { icon: "system-lock-screen-symbolic", cmd: ["hyprlock"] },
    { icon: "weather-clear-night-symbolic", cmd: ["systemctl", "suspend"] },
    { icon: "system-log-out-symbolic", cmd: ["hyprctl", "dispatch", "exit"] },
    { icon: "system-reboot-symbolic", cmd: ["systemctl", "reboot"] },
    { icon: "system-shutdown-symbolic", cmd: ["systemctl", "poweroff"] },
]

export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
    const open = Variable(false)
    const notifOpen = Variable(false)

    open.subscribe((v) => {
        if (!v) notifOpen.set(false)
    })

    const button = (
        <button
            className="quicksettings end"
            onClicked={() => open.set(!open.get())}
            onScroll={(_, e) => {
                const volume = Math.min(
                    1,
                    Math.max(0, speaker.volume - e.delta_y * 0.02),
                )
                speaker.volume = volume
            }}
        >
            <box spacing={6}>
                <box className="notif-indicator" spacing={3}>
                    <icon icon="preferences-system-notifications-symbolic" />
                    <label
                        className="notif-count"
                        label={notifCount.as((n) => `${n}`)}
                        visible={notifCount.as((n) => n > 0)}
                    />
                </box>
                {wifiIcon && <icon icon={wifiIcon} />}
                <icon icon={speakerIcon()} />
                {micIcon && <icon icon={micIcon()} />}
                {batteryIcon && batteryPercent && (
                    <box spacing={3}>
                        <icon icon={batteryIcon} />
                        <label className="battery-level" label={batteryPercent} />
                    </box>
                )}
            </box>
        </button>
    )

    const popup = (
        <Dropdown gdkmonitor={gdkmonitor} target={button} open={open} width={280}>
            <box className="power-header" homogeneous>
                {actions.map((action) => (
                    <button
                        className="power-action"
                        onClicked={() => execAsync(action.cmd)}
                    >
                        <icon icon={action.icon} />
                    </button>
                ))}
            </box>
            <box className="qs-row">
                <button
                    className="qs-toggle"
                    onClicked={() => (speaker.mute = !speaker.mute)}
                >
                    <icon icon={speakerIcon()} />
                </button>
                <slider
                    className="vol-slider"
                    hexpand
                    value={bind(speaker, "volume")}
                    onDragged={(self) => (speaker.volume = self.value)}
                />
            </box>
            {mic && micIcon && (
                <box className="qs-row">
                    <button
                        className="qs-toggle"
                        onClicked={() => (mic.mute = !mic.mute)}
                    >
                        <icon icon={micIcon()} />
                    </button>
                    <slider
                        className="vol-slider"
                        hexpand
                        value={bind(mic, "volume")}
                        onDragged={(self) => (mic.volume = self.value)}
                    />
                </box>
            )}
            <WifiSection open={open} />
            <BatterySection />
            <box className="notif-section" vertical spacing={6}>
                <box className="notif-header-row" spacing={6}>
                    <button
                        className="notif-toggle"
                        hexpand
                        halign={Gtk.Align.START}
                        onClicked={() => notifOpen.set(!notifOpen.get())}
                    >
                        <box spacing={6}>
                            <icon icon="preferences-system-notifications-symbolic" />
                            <label label="Notifications" />
                            <icon
                                icon={notifOpen().as((v) =>
                                    v ? "pan-down-symbolic" : "pan-end-symbolic",
                                )}
                            />
                        </box>
                    </button>
                    <button
                        className="notif-clear"
                        onClicked={() => [...notifd.notifications].forEach((n) => n.dismiss())}
                    >
                        <label label="Clear" />
                    </button>
                </box>
                <revealer
                    transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
                    transitionDuration={180}
                    revealChild={bind(notifOpen)}
                >
                    <box className="notifications" vertical>
                        <label
                            className="notif-empty"
                            label="no notifications"
                            visible={notifCount.as((n) => n === 0)}
                        />
                        {bind(notifd, "notifications").as((ns) =>
                            [...ns]
                                .sort((a, b) => b.time - a.time)
                                .map((n) => NotificationCard(n)),
                        )}
                    </box>
                </revealer>
            </box>
        </Dropdown>
    )

    return { button, popup }
}