Fri Jul 5 03:50:08 PM CEST 2024

home/ags/files/config.js

@@ -6,14 +6,39 @@ const battery = await Service.import("battery")
 const systemtray = await Service.import("systemtray")
 import { getIconName } from "./utils.js"
 
-const date = Variable("", {
+const volumeIndicator = Widget.Button({
-  poll: [1000, 'date "+%H:%M:%S %b %e."'],
+    on_clicked: () => audio.speaker.is_muted = !audio.speaker.is_muted,
+    class_name: "item",
+    child: Widget.Box({
+    children: [
+      Widget.Icon().hook(audio.speaker, self => {
+            const vol = audio.speaker.volume * 100
+            const icon = [
+                [101, 'overamplified'],
+                [67, 'high'],
+                [34, 'medium'],
+                [1, 'low'],
+                [0, 'muted'],
+            ].find(([threshold]) => threshold <= vol)?.[1]
+
+            self.icon = `audio-volume-${icon}-symbolic`
+        self.tooltip_text = `Volume ${Math.floor(vol)}%`
+      }),
+      Widget.Label().hook(audio.speaker, self => {
+        self.label = `${Math.floor(audio.speaker.volume * 100)}%`
+        self.css = "margin-left: 0.7em;"
       })
+    ]}),
+});
 
 function Clients() {
   const activeId = hyprland.active.client.bind("address")
-  let clients = hyprland.clients.filter(a => a.workspace.id == hyprland.active.workspace.id).map(({ address, title }) =>
+  const clients = hyprland.bind("clients").as(cl =>
-    Widget.Button({
+    cl.map(({ address, title, workspace }) =>
+    {
+        const short_title = title.length > 40 ? title.slice(0, 20) + "..." : title
+        return Widget.Button({
+          attribute: workspace.id,
           child: Widget.Box({
             children: [
               Widget.Icon({
@@ -22,14 +47,21 @@ function Clients() {
                 className: "app-icon",
                 icon: getIconName(hyprland.clients.find(c => c.address === address))
               }),
-          Widget.Label(`${title}`)
+              Widget.Label(`${short_title}`)
             ],
           }),
-      class_name: activeId.as(i => `${i === address ? "client-title focused" : "client-title"}`),
+          class_name: activeId.as(i => `${i === address ? "item client-title focused" : "item client-title"}`),
-    }))
+        })
+      }
+    )
+  )
+
   return Widget.Box({
     class_name: "clients",
     children: clients,
+    setup: self => self.hook(hyprland, () => self.children.forEach(btn => {
+      btn.visible = hyprland.active.workspace.id === btn.attribute
+    })),
   })
 }
 
@@ -40,8 +72,8 @@ function Workspaces() {
     return ws.map(({ id, monitorID }) =>
       Widget.Button({
         attribute: monitorID,
-        label: `${id}`,
+        label: `${id}`.slice(-1),
-        onClicked: () => dispatch(i),
+        onClicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
         class_name: activeId.as(i => `${i === id ? "focused" : ""}`),
       })
     )
@@ -49,25 +81,13 @@ function Workspaces() {
 
   return Widget.Box({
     children: workspaces,
+    class_name: "workspaces",
     setup: self => self.hook(hyprland, () => self.children.forEach(btn => {
       btn.visible = hyprland.active.monitor.id === btn.attribute
     })),
   })
 }
 
-
-
-
-function Clock() {
-  return Widget.Label({
-    class_name: "clock",
-    label: date.bind(),
-  })
-}
-
-
-// we don't need dunst or any other notification daemon
-// because the Notifications module is a notification daemon itself
 function Notification() {
   const popups = notifications.bind("popups")
   return Widget.Box({
@@ -102,14 +122,11 @@ function SysTray() {
   })
 }
 
-
-// layout of the bar
 function Left() {
   return Widget.Box({
     spacing: 8,
     children: [
       Clients(),
-      // ClientTitle(),
     ],
   })
 }
@@ -130,7 +147,15 @@ function Right() {
     spacing: 8,
     children: [
       SysTray(),
-      Clock(),
+      volumeIndicator,
+      Widget.Label({
+        class_name: "item",
+        label: Variable("", { poll: [1000, 'date "+%Y-%m-%d"'] }).bind(),
+      }),
+      Widget.Label({
+        class_name: "item",
+        label: Variable("", { poll: [1000, 'date "+%H:%M:%S"'] }).bind(),
+      })
     ],
   })
 }
@@ -143,7 +168,7 @@ function Bar(monitor = 0) {
     anchor: ["top", "left", "right"],
     exclusivity: "exclusive",
     child: Widget.CenterBox({
-      css: "margin-bottom: 0.2em;",
+      class_name: "window-box",
       start_widget: Left(),
       center_widget: Center(),
       end_widget: Right(),
@@ -154,11 +179,7 @@ function Bar(monitor = 0) {
 App.config({
   style: "./style.css",
   windows: [
-    Bar(),
+    Bar(1),
-
-    // you can call it, for each monitor
-    // Bar(0),
-    // Bar(1)
   ],
 })
 

home/ags/files/style.css

@@ -1,19 +1,21 @@
 window.bar {
     background-color: rgba(0, 0, 0, 0.2);
+    font-size: 1.3em;
 }
 
-label {
+.window-box {
-    font-weight: bold;
+    margin-bottom: 0.3em;
+    margin-top: 0.2em;
 }
 
 .client-title {
-    padding-left: 0.7em;
-    padding-right: 0.7em;
     margin-right: 0.3em;
 }
 
-.client-title, .clock {
+.item {
     background: #1f2430;
+    padding-left: 0.7em;
+    padding-right: 0.7em;
     border-radius: 0.3em;
 }
 
@@ -33,6 +35,7 @@ button.focused, button:hover {
 }
 
 .workspaces button {
+    font-weight: bold;
     padding-left: 0.4em;
     padding-right: 0.4em;
     margin-left: 0.2em;

home/ags/files/utils.js

@@ -1,4 +1,5 @@
 import { Applications } from "resource:///com/github/Aylur/ags/service/applications.js";
+import GLib from "gi://GLib?version=2.0";
 
 const app_icons = new Applications().list.reduce(
     (acc, app) => {
@@ -11,9 +12,13 @@ const app_icons = new Applications().list.reduce(
     { classOrNames: {}, executables: {} },
 );
 
+function fileExists(path) {
+    return GLib.file_test(path, GLib.FileTest.EXISTS);
+}
+
 export function getIconName(client) {
     if (!client) {
-        return "missing";
+        return "";
     }
 
     let icon = app_icons.classOrNames[client.class];
@@ -65,7 +70,7 @@ export function getIconName(client) {
     }
 
     if (!icon) {
-        app_icons.classOrNames[client.class] = "missing";
+        app_icons.classOrNames[client.class] = "";
     }
 
     return icon;