added some bar utilities and powermenu

package-lock.json

@@ -0,0 +1,21 @@
+{
+    "name": "astal-shell",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "astal-shell",
+            "dependencies": {
+                "astal": "/usr/share/astal/gjs"
+            }
+        },
+        "../../../../usr/share/astal/gjs": {
+            "name": "astal",
+            "license": "LGPL-2.1"
+        },
+        "node_modules/astal": {
+            "resolved": "../../../../usr/share/astal/gjs",
+            "link": true
+        }
+    }
+}

scripts/powermenu

@@ -0,0 +1,19 @@
+#!/bin/sh
+
+case "$1" in
+    "lock")
+        ~/dotfiles/hypr/bin/hyprlock-background.sh & astal -t powermenu
+        ;;
+    "suspend")
+        systemctl suspend & astal -t powermenu
+        ;;
+    "logout")
+        systemctl logout & astal -t powermenu
+        ;;
+    "reboot")
+        systemctl reboot & astal -t powermenu
+        ;;
+    "poweroff")
+        systemctl poweroff & astal -t powermenu
+        ;;
+esac

style.scss

@@ -5,7 +5,7 @@ $bg-color: #{"@theme_bg_color"};
 $bg: #212223;
 $fg: #f1f1f1;
 $accent: #{"@theme_accent_color"};
-$radius: 7px;
+$radius: 20px;
 
 window.Bar {
     background: transparent;
@@ -14,41 +14,121 @@ window.Bar {
 
     >centerbox {
         background: transparent;
-        border-radius: 10px;
+        border-radius: 20px;
-        margin: 0;
+        margin: 2px 5px 0 5px;
+    }
+
+    .Menubutton {
+        all: unset;
+        background-color: black;
+        border-radius: 25px;
+        &:hover label {
+            transition: 300ms;
+            background-color: gray;
+        }
+        label {
+            transition: 300ms;
+            padding: 5px 15px 5px 9px;
+            border-radius: $radius;
+            border: 1pt solid black;
+        }
+    }
+
+    .RoudedBlock {
+        background-color: black;
+        border-radius: 25px;
+        transition: 300ms;
+    }
+
+    .Time {
+        padding: 0 15px;
+    }
+
+    .SysTray {
+        all: unset;
+        border-radius: 25px;
+        background-color: transparent;
+        // padding: 10px;
+        // color: red;
+
+        button {
+            all: unset;
+            padding: 5px 7px;
+            border-radius: 25px;
+            border: 1pt solid black;
+            // border-color: black;
+            transition: 300ms;
+            // background-color: red;
+            // color: red;
+            &:hover {
+                background-color: gray;
+            }
+        }
+    }
+
+    .Focused {
+        padding: 0 15px;
+        transition: 300ms;
     }
 
     .Workspaces  {
         button {
             all: unset;
-            background-color: transparent;
+            background-color: black;
+            border-radius: 25px;
 
             &:hover label {
                 background-color: gray;
                 border-color: black;
+                color: white;
             }
 
             &:active label {
-                background-color: black;
+                background-color: white;
+                color: black;
             }
         }
 
         label {
-            transition: 200ms;
+            transition: 300ms;
-            padding: 0 8px;
+            padding: 5px 15px;
             border-radius: $radius;
             border: 1pt solid transparent;
         }
 
         .focused label {
-            color: $accent;
+            background-color: white;
+            color: black;
             border-color: $accent;
         }
     }
 
+    
+    // button {
+    //     border-radius: 8px;
+    //     padding: 0 8px;
+    // }
+}
 
-    button {
+window.Powermenu {
-        border-radius: 8px;
+    margin: 5px;
-        padding: 0 8px;
+    background-color: transparent;
+    box {
+        margin: 5px;
+        background-color: black;
+        border-radius: 25px;
+        // padding: 10px;
+        button {
+            all: unset;
+            margin: 2px;
+            padding: 5px 15px 5px 13px;
+            background-color: black;
+            border-radius: 25px;
+            transition: 300ms;
+            
+            &:hover {
+                background-color: gray;
+            }
+        }
     }
 }

widget/Bar.tsx

@@ -1,6 +1,9 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk3"
-import { Variable, bind } from "astal"
+import { Variable, GLib, bind } from "astal"
 import Hyprland from "gi://AstalHyprland"
+import Tray from "gi://AstalTray"
+import PowerMenu from "./PowerMenu"
+import Cpu from "./Cpu"
 
 const time = Variable("").poll(1000, "date")
 
@@ -23,37 +26,91 @@ function Workspaces() {
     </box>
 }
 
+function FocusedClient() {
+    const hypr = Hyprland.get_default()
+    const focused = bind(hypr, "focusedClient")
+
+    return <box
+        className="Focused"
+        visible={focused.as(Boolean)}>
+        {focused.as(client => (
+            client && <label label={bind(client, "title").as(String)} />
+        ))}
+        {/* {focused.as(client => (
+            client && <label label={bind(client, "icon").as(String)} />
+        ))} */}
+    </box>
+}
+
+function Time({ format = "%H:%M - %A %e" }) {
+    const time = Variable<string>("").poll(1000, () =>
+        GLib.DateTime.new_now_local().format(format)!)
+
+    return <label
+        className="Time"
+        onDestroy={() => time.drop()}
+        label={time()}
+    />
+}
+
+function SysTray() {
+    const tray = Tray.get_default()
+
+    return <box className="SysTray">
+        {bind(tray, "items").as(items => items.map(item => (
+            <menubutton
+                tooltipMarkup={bind(item, "tooltipMarkup")}
+                usePopover={false}
+                actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
+                menuModel={bind(item, "menuModel")}>
+                <icon gicon={bind(item, "gicon")} />
+            </menubutton>
+        )))}
+    </box>
+}
+
 export default function Bar(gdkmonitor: Gdk.Monitor) {
     const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
 
-    return <window
+    return <><window
         className="Bar"
+        name="Bar"
         gdkmonitor={gdkmonitor}
         exclusivity={Astal.Exclusivity.EXCLUSIVE}
         anchor={TOP | LEFT | RIGHT}
         application={App}>
         <centerbox>
-            <box hexpand halign={Gtk.Align.START}>
+            <box hexpand halign={Gtk.Align.START} className="RoudedBlock">
+                <button
+                    onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
+                    halign={Gtk.Align.START}
+                    className="Menubutton"
+                >
+                    
+                </button>
+                <Cpu />
+                <FocusedClient />
+            </box>  
+            <box hexpand halign={Gtk.Align.CENTER} className="RoudedBlock">
                 <Workspaces />
             </box>
-            <button
+            <box hexpand halign={Gtk.Align.END} className="RoudedBlock">
-              onClicked="/home/tola/dotfiles/rofi/launcher/launcher.sh"
+                <SysTray />
-              halign={Gtk.Align.CENTER}
+                {/* <SysTray />
-            >
+                <Wifi />
-              Menu
+                <AudioSlider />
-            </button>  
+                <BatteryLevel /> */}
-            <button
+                <Time />
-                onClicked="echo hello"
+                <button
-                halign={Gtk.Align.CENTER}
+                    onClicked={() => App.toggle_window("powermenu")}
-            >
+                    halign={Gtk.Align.START}
-                Welcome to AGS!
+                    className="Menubutton"
-            </button>
+                >
-            <button
+                    ⏻
-                onClicked={() => print("hello")}
+                </button>
-                halign={Gtk.Align.CENTER}
+            </box>
-            >
-                <label label={time()} />
-            </button>
         </centerbox>
     </window>
+    <PowerMenu />
+    </>
 }

widget/Cpu.tsx

@@ -0,0 +1,34 @@
+import { Variable } from "astal";
+import GTop from "gi://GTop"
+
+let previousCpuData = new GTop.glibtop_cpu();
+GTop.glibtop_get_cpu(previousCpuData);
+
+const computeCPU = (): string => {
+    const currentCpuData = new GTop.glibtop_cpu();
+    GTop.glibtop_get_cpu(currentCpuData);
+
+    // Calculate the differences from the previous to current data
+    const totalDiff = currentCpuData.total - previousCpuData.total;
+    const idleDiff = currentCpuData.idle - previousCpuData.idle;
+
+    const cpuUsagePercentage = totalDiff > 0 ? ((totalDiff - idleDiff) / totalDiff) * 100 : 0;
+
+    previousCpuData = currentCpuData;
+
+    const cpuUsagePercentageString = "    " +  cpuUsagePercentage.toFixed(0) + "%";
+
+    return cpuUsagePercentageString;
+}
+
+export default function Cpu() {
+    const cpu_usage = Variable<string>("").poll(10000, () =>
+        computeCPU())
+
+    return <box className="cpu">
+        <label 
+            className="Time"
+            onDestroy={() => cpu_usage.drop()}
+            label={cpu_usage()} />
+    </box>
+}

widget/PowerMenu.tsx

@@ -0,0 +1,26 @@
+import { Astal, App } from "astal/gtk3";
+
+export default function PowerMenu() {
+    const { TOP, RIGHT } = Astal.WindowAnchor
+    const powermenulist = [
+        {action: "/home/tola/.config/ags/scripts/powermenu lock", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu suspend", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu logout", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu reboot", label: ""},
+        {action: "/home/tola/.config/ags/scripts/powermenu poweroff", label: ""}
+    ]
+
+    return <window 
+                anchor={TOP | RIGHT} 
+                name="powermenu" 
+                className="Powermenu"
+                application={App}
+                visible={false}
+            >
+        <box>
+            {powermenulist.map(data => (
+                <button onClicked={data.action}>{data.label}</button>
+            ))}
+        </box>
+    </window>
+}

widget/Ram.tsx

@@ -0,0 +1,13 @@
+import { Variable } from "astal";
+
+export default function Ram() {
+    const cpu_usage = Variable<string>("").poll(1000, () =>
+        computeCPU())
+
+    return <box className="cpu">
+        <label 
+            className="Time"
+            onDestroy={() => cpu_usage.drop()}
+            label={cpu_usage()} />
+    </box>
+}