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

config/astal/components/QuickActions/modules/Power.tsx

@@ -0,0 +1,85 @@
+import { exec } from "astal";
+import { Gtk } from "astal/gtk4";
+
+const PowerMenu = (): Gtk.Popover => {
+    const popover = new Gtk.Popover({ cssClasses: ["PowerMenu"] });
+
+    const powerMenuBox = () => {
+        return (
+            <box>
+                <button
+                    cssClasses={["power-button"]}
+                    child={
+                        <image iconName={"system-shutdown-symbolic"}></image>
+                    }
+                    onClicked={() => exec("/bin/sh -c 'shutdown now'")}
+                ></button>
+                <button
+                    cssClasses={["power-button"]}
+                    child={<image iconName={"system-reboot-symbolic"}></image>}
+                    onClicked={() => exec("/bin/sh -c 'reboot'")}
+                ></button>
+                <button
+                    cssClasses={["power-button"]}
+                    child={<image iconName={"system-suspend-symbolic"}></image>}
+                    onClicked={() => exec("/bin/sh -c 'systemctl suspend'")}
+                ></button>
+            </box>
+        );
+    };
+
+    popover.set_child(powerMenuBox());
+    return popover;
+};
+
+const Power = () => {
+    const pm = PowerMenu();
+    return (
+        <button
+            widthRequest={0}
+            hexpand={false}
+            vexpand={false}
+            cssClasses={["power-menu-button"]}
+            child={
+                <box>
+                    <image iconName={"system-shutdown-symbolic"}></image>
+                    {pm}
+                </box>
+            }
+            onClicked={() => pm.popup()}
+        />
+    );
+};
+
+const UserMenu = (): Gtk.Popover => {
+    const popover = new Gtk.Popover();
+
+    const powerMenuBox = () => {
+        return (
+            <box>
+                <button
+                    cssClasses={["power-button"]}
+                    child={
+                        <image iconName={"system-lock-screen-symbolic"}></image>
+                    }
+                    onClicked={() => exec("/bin/sh -c 'hyprlock'")}
+                ></button>
+                <button
+                    cssClasses={["power-button"]}
+                    child={<image iconName={"system-log-out-symbolic"}></image>}
+                    onClicked={() =>
+                        exec("/bin/sh -c 'hyprctl dispatch exit 0'")
+                    }
+                ></button>
+            </box>
+        );
+    };
+
+    popover.set_child(powerMenuBox());
+    return popover;
+};
+
+export default {
+    Power,
+    UserMenu
+};