[AGS] Bar: Done (WiFi still missing, will be added at some later point)

2025-04-24 16:58:30 +02:00
parent e93e051094
commit 10136ab9de
48 changed files with 1423 additions and 548 deletions
--- a/config/astal/components/bar/modules/QuickView.tsx
+++ b/config/astal/components/bar/modules/QuickView.tsx
@@ -0,0 +1,186 @@
+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 { Gtk } from "astal/gtk4";
+import Brightness from "../../../util/brightness";
+import QuickActions from "../../QuickActions/QuickActions";
+
+const STATE = AstalNetwork.DeviceState;
+
+const QuickView = () => {
+    const qa = QuickActions.QuickActions();
+    const showQuickActions = () => {
+        qa.popup();
+    };
+
+    return (
+        <button
+            onClicked={() => showQuickActions()}
+            cssClasses={["quick-action-button"]}
+            child={
+                <box>
+                    <BatteryWidget></BatteryWidget>
+                    <Audio></Audio>
+                    <BluetoothWidget></BluetoothWidget>
+                    <NetworkWidget></NetworkWidget>
+                    <BrightnessWidget></BrightnessWidget>
+                    <image iconName={"system-shutdown-symbolic"}></image>
+                    {qa}
+                </box>
+            }
+        ></button>
+    );
+};
+
+const NetworkWidget = () => {
+    const network = AstalNetwork.get_default();
+
+    return (
+        <box>
+            <image
+                iconName={bind(network, "state").as(state => {
+                    if (state === AstalNetwork.State.CONNECTING) {
+                        return "chronometer-reset-symbolic";
+                    } else if (
+                        state === AstalNetwork.State.CONNECTED_LOCAL ||
+                        state === AstalNetwork.State.CONNECTED_SITE ||
+                        state === AstalNetwork.State.CONNECTED_GLOBAL
+                    ) {
+                        return "network-wired-activated-symbolic";
+                    } else {
+                        return "paint-unknown-symbolic";
+                    }
+                })}
+                cssClasses={["network-widget", "quick-view-symbol"]}
+                visible={bind(network.wifi, "state").as(
+                    state => state !== STATE.ACTIVATED,
+                )}
+            ></image>
+            <image
+                iconName={bind(network.wifi, "state").as(state => {
+                    if (state === STATE.ACTIVATED) {
+                        return network.wifi.iconName;
+                    } else {
+                        return "";
+                    }
+                })}
+                cssClasses={["network-widget", "quick-view-symbol"]}
+                visible={bind(network.wifi, "state").as(
+                    state => state === STATE.ACTIVATED,
+                )}
+            ></image>
+        </box>
+    );
+};
+
+const BluetoothWidget = () => {
+    const bluetooth = AstalBluetooth.get_default();
+    const enabled = bind(bluetooth.adapter, "powered");
+    const connected = bind(bluetooth, "isConnected");
+
+    // For each connected BT device, render status
+    return (
+        <box>
+            <box visible={enabled.as(e => e)}>
+                <image
+                    iconName={"bluetooth-active-symbolic"}
+                    visible={connected.as(c => c)}
+                ></image>
+                <image
+                    iconName={"bluetooth-disconnected-symbolic"}
+                    visible={connected.as(c => !c)}
+                ></image>
+            </box>
+            <image
+                iconName={"bluetooth-disabled-symbolic"}
+                visible={enabled.as(e => !e)}
+            ></image>
+            <box>
+                {bind(bluetooth, "devices").as(devices => {
+                    return devices.map(device => {
+                        return (
+                            <box visible={bind(device, "connected").as(c => c)}>
+                                <image
+                                    iconName={bind(device, "icon").as(
+                                        icon => icon,
+                                    )}
+                                ></image>
+                                <label
+                                    label={bind(device, "batteryPercentage").as(
+                                        n => {
+                                            return n + "%";
+                                        },
+                                    )}
+                                ></label>
+                            </box>
+                        );
+                    });
+                })}
+            </box>
+        </box>
+    );
+};
+
+const BatteryWidget = () => {
+    const battery = AstalBattery.get_default();
+    if (battery.get_is_present()) {
+        return (
+            <image
+                iconName={bind(battery, "iconName").as(icon => icon)}
+                cssClasses={["quick-view-symbol"]}
+            ></image>
+        );
+    } else {
+        return <box></box>;
+    }
+    // Else, no battery available -> Don't show the widget
+};
+
+const BrightnessWidget = () => {
+    const brightness = Brightness.get_default();
+    const screen_brightness = bind(brightness, "screen");
+
+    return (
+        <label
+            label={"🌣" + screen_brightness}
+            visible={bind(brightness, "screenAvailable")}
+            cssClasses={["quick-view-symbol"]}
+        ></label>
+    );
+};
+
+const Audio = () => {
+    const wireplumber = AstalWp.get_default();
+    if (wireplumber) {
+        return (
+            <box orientation={Gtk.Orientation.HORIZONTAL}>
+                <image
+                    iconName={bind(wireplumber.defaultSpeaker, "volumeIcon").as(
+                        icon => icon,
+                    )}
+                    cssClasses={["quick-view-symbol"]}
+                ></image>
+                <image
+                    iconName={bind(
+                        wireplumber.defaultMicrophone,
+                        "volumeIcon",
+                    ).as(icon => icon)}
+                    cssClasses={["quick-view-symbol"]}
+                ></image>
+            </box>
+        );
+    } else {
+        print(
+            "[ WirePlumber ] Could not connect, Audio support in bar will be missing",
+        );
+        return <image iconName={"action-unavailable-symbolic"}></image>;
+    }
+};
+
+// cssClasses={[ 'quick-view-symbol' ]}
+
+export default {
+    QuickView,
+};