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

config/astal/components/QuickActions/modules/Networking/Network.tsx

@@ -0,0 +1,97 @@
+import { bind } from "astal";
+import { Gtk } from "astal/gtk4";
+import AstalNetwork from "gi://AstalNetwork";
+import networkHelper from "./network-helper";
+import NetworkMenu from "./NetworkMenu";
+
+const net = AstalNetwork.get_default();
+const STATE = AstalNetwork.DeviceState;
+
+const Network = () => {
+    const netMenu = NetworkMenu.NetworkMenu();
+    return (
+        <box>
+            <button
+                cssClasses={networkHelper.networkEnabled(en => {
+                    if (en) return ["toggle-button", "toggle-on"];
+                    else return ["toggle-button"];
+                })}
+                onClicked={() =>
+                    networkHelper.setNetworking(
+                        !networkHelper.networkEnabled.get(),
+                    )
+                }
+                child={
+                    <box vertical>
+                        <label
+                            label={bind(net.wifi, "enabled").as(
+                                stat => `Network (${stat ? "WiFi" : "Wired"})`,
+                            )}
+                            cssClasses={["title-2"]}
+                        ></label>
+                        <label
+                            label={bind(net.wired, "state").as(state => {
+                                if (state === STATE.ACTIVATED) {
+                                    return (
+                                        "Wired. IP: " + networkHelper.getIP()
+                                    );
+                                } else if (state === STATE.DISCONNECTED) {
+                                    return "Disconnected";
+                                } else if (state === STATE.FAILED) {
+                                    return "Error";
+                                } else if (
+                                    state === STATE.PREPARE ||
+                                    state === STATE.CONFIG ||
+                                    state === STATE.IP_CHECK ||
+                                    state === STATE.IP_CONFIG
+                                ) {
+                                    return "Connecting...";
+                                } else {
+                                    return "Unavailable";
+                                }
+                            })}
+                            visible={bind(net.wifi, "enabled").as(v => !v)}
+                        ></label>
+                        <label
+                            label={bind(net.wifi, "state").as(state => {
+                                if (state === STATE.ACTIVATED) {
+                                    return `${net.wifi.get_ssid()} (${networkHelper.getIP()})`;
+                                } else if (state === STATE.DISCONNECTED) {
+                                    return "Disconnected";
+                                } else if (state === STATE.FAILED) {
+                                    return "Error";
+                                } else if (
+                                    state === STATE.PREPARE ||
+                                    state === STATE.CONFIG ||
+                                    state === STATE.IP_CHECK ||
+                                    state === STATE.IP_CONFIG
+                                ) {
+                                    return "Connecting...";
+                                } else {
+                                    return "Unavailable";
+                                }
+                            })}
+                            visible={bind(net.wifi, "enabled")}
+                        ></label>
+                    </box>
+                }
+            ></button>
+            <button
+                cssClasses={["actions-button"]}
+                visible={networkHelper.networkEnabled()}
+                onClicked={() => netMenu.popup()}
+                child={
+                    <box>
+                        <image iconName={"arrow-right-symbolic"}></image>
+                        { netMenu }
+                    </box>
+                }
+                tooltipText={"View available devices"}
+            ></button>
+        </box>
+    );
+};
+
+export default {
+    Network,
+};