ok

config/ags/config.js

@@ -1,9 +1,9 @@
-const hyprland = await Service.import("hyprland");
+const hyprland = await Service.import("hyprland")
-// const notifications = await Service.import("notifications");
+// const notifications = await Service.import("notifications")
-const mpris = await Service.import("mpris");
+const mpris = await Service.import("mpris")
-const audio = await Service.import("audio");
+const audio = await Service.import("audio")
-const battery = await Service.import("battery");
+const battery = await Service.import("battery")
-const systemtray = await Service.import("systemtray");
+const systemtray = await Service.import("systemtray")
 
 const date = Variable("", {
     poll: [1000, 'date "+%H:%M:%S %b %e."'],
@@ -14,18 +14,18 @@ const date = Variable("", {
 // then you can simply instantiate one by calling it
 
 function Workspaces() {
-    const activeId = hyprland.active.workspace.bind("id");
+    const activeId = hyprland.active.workspace.bind("id")
     const workspaces = hyprland.bind("workspaces")
         .as(ws => ws.map(({ id }) => Widget.Button({
             on_clicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
             child: Widget.Label(`${id}`),
             class_name: activeId.as(i => `${i === id ? "focused" : ""}`),
-        })));
+        })))
 
     return Widget.Box({
         class_name: "workspaces",
         children: workspaces,
-    });
+    })
 }
 
 
@@ -33,7 +33,7 @@ function ClientTitle() {
     return Widget.Label({
         class_name: "client-title",
         label: hyprland.active.client.bind("title"),
-    });
+    })
 }
 
 
@@ -41,7 +41,7 @@ function Clock() {
     return Widget.Label({
         class_name: "clock",
         label: date.bind(),
-    });
+    })
 }
 
 
@@ -67,12 +67,12 @@ function Clock() {
 function Media() {
     const label = Utils.watch("", mpris, "player-changed", () => {
         if (mpris.players[0]) {
-            const { track_artists, track_title } = mpris.players[0];
+            const { track_artists, track_title } = mpris.players[0]
-            return `${track_artists.join(", ")} - ${track_title}`;
+            return `${track_artists.join(", ")} - ${track_title}`
         } else {
             return "Nothing is playing"
         }
-    });
+    })
 
     return Widget.Button({
         class_name: "media",
@@ -80,7 +80,7 @@ function Media() {
         on_scroll_up: () => mpris.getPlayer("")?.next(),
         on_scroll_down: () => mpris.getPlayer("")?.previous(),
         child: Widget.Label({ label }),
-    });
+    })
 }
 
 
@@ -91,64 +91,56 @@ function Volume() {
         34: "medium",
         1: "low",
         0: "muted",
-    };
+    }
 
     function getIcon() {
         const icon = audio.speaker.is_muted ? 0 : [101, 67, 34, 1, 0].find(
-            threshold => threshold <= audio.speaker.volume * 100);
+            threshold => threshold <= audio.speaker.volume * 100)
 
-        return `audio-volume-${icons[icon]}-symbolic`;
+        return `audio-volume-${icons[icon]}-symbolic`
     }
 
     const icon = Widget.Icon({
         icon: Utils.watch(getIcon(), audio.speaker, getIcon),
-    });
+    })
 
     const slider = Widget.Slider({
         hexpand: true,
         draw_value: false,
         on_change: ({ value }) => audio.speaker.volume = value,
         setup: self => self.hook(audio.speaker, () => {
-            self.value = audio.speaker.volume || 0;
+            self.value = audio.speaker.volume || 0
         }),
-    });
+    })
-
-    const vol = Math.round(audio.speaker.volume) * 100;
-
- const value = Widget.Label({
-	// label: audio.speaker.volume.toString(),
-     // label: audio.speaker.bind("volume").as(x => x.toString()),
-     label: vol.toString(),
- });
 
     return Widget.Box({
         class_name: "volume",
-        // css: "min-width: 180px",
+        css: "min-width: 180px",
-        children: [
+        children: [icon, slider],
-	    // icon,
+    })
-	    value
-	],
-    });
 }
 
 
 function BatteryLabel() {
-    // const value = battery.bind("precent").transform((v) => v.toFixed(0));
+    const value = battery.bind("percent").as(p => p > 0 ? p / 100 : 0)
-    // const icon = battery.bind("percent").as(p =>
+    const icon = battery.bind("percent").as(p =>
-        // `battery-level-${Math.floor(p / 10) * 10}-symbolic`)
+        `battery-level-${Math.floor(p / 10) * 10}-symbolic`)
 
     return Widget.Box({
         class_name: "battery",
         visible: battery.bind("available"),
         children: [
-            // Widget.Icon({ icon }),
+            Widget.Icon({ icon }),
-            Widget.Label({
+            Widget.LevelBar({
-                label: battery.bind('percent').as(x => x.toString()), 
+                widthRequest: 140,
+                vpack: "center",
+                value,
             }),
         ],
-    });
+    })
 }
 
+
 function SysTray() {
     const items = systemtray.bind("items")
         .as(items => items.map(item => Widget.Button({
@@ -156,11 +148,11 @@ function SysTray() {
             on_primary_click: (_, event) => item.activate(event),
             on_secondary_click: (_, event) => item.openMenu(event),
             tooltip_markup: item.bind("tooltip_markup"),
-        })));
+        })))
 
     return Widget.Box({
         children: items,
-    });
+    })
 }
 
 
@@ -170,9 +162,9 @@ function Left() {
         spacing: 8,
         children: [
             Workspaces(),
-            // ClientTitle(),
+            ClientTitle(),
         ],
-    });
+    })
 }
 
 function Center() {
@@ -182,7 +174,7 @@ function Center() {
             Media(),
             // Notification(),
         ],
-    });
+    })
 }
 
 function Right() {
@@ -191,11 +183,11 @@ function Right() {
         spacing: 8,
         children: [
             Volume(),
+            BatteryLabel(),
             Clock(),
-	    BatteryLabel(),
             SysTray(),
         ],
-    });
+    })
 }
 
 function Bar(monitor = 0) {
@@ -210,7 +202,7 @@ function Bar(monitor = 0) {
             center_widget: Center(),
             end_widget: Right(),
         }),
-    });
+    })
 }
 
 App.config({