✨ chore(osd): use AstalWp.Endpoint.description instead of name

ags/style/_osd.scss

@@ -2,10 +2,12 @@
 @use "./wal";
 @use "./functions" as funs;
 
+
 .osd {
   background: funs.toRGB(color.change($color: wal.$background, $alpha: 65%));
-  padding: 14px 16px;
-  border-radius: 20px;
+  padding: 16px;
+  border-radius: 24px;
+  min-width: 180px;
 
   .icon {
     margin-right: 10px;

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Frieren Rain.jpg";
+$wallpaper: "/home/joaov/wallpapers/Gumi Forest Sunlight.jpg";
 
 // Special
-$background: #25301c;
-$foreground: #c8cbc6;
-$cursor: #c8cbc6;
+$background: #2a2825;
+$foreground: #c9c9c8;
+$cursor: #c9c9c8;
 
 // Colors
-$color0: #25301c;
-$color1: #6c8251;
-$color2: #7c9357;
-$color3: #78846e;
-$color4: #948a88;
-$color5: #899869;
-$color6: #98a27b;
-$color7: #9ba197;
-$color8: #707c66;
-$color9: #91AE6D;
-$color10: #A6C574;
-$color11: #A0B093;
-$color12: #C6B9B6;
-$color13: #B7CB8D;
-$color14: #CBD9A4;
-$color15: #c8cbc6;
+$color0: #2a2825;
+$color1: #6a6a3b;
+$color2: #7b7b48;
+$color3: #908a45;
+$color4: #7e876d;
+$color5: #8a9680;
+$color6: #a5a679;
+$color7: #a29f98;
+$color8: #7d7667;
+$color9: #8E8E4F;
+$color10: #A5A560;
+$color11: #C0B85C;
+$color12: #A9B592;
+$color13: #B9C8AB;
+$color14: #DDDEA2;
+$color15: #c9c9c8;

ags/window/OSD.ts

@@ -1,4 +1,4 @@
-import { bind, Binding, Variable } from "astal";
+import { bind, Variable } from "astal";
 import { Astal, Gtk, Widget } from "astal/gtk3";
 import { Wireplumber } from "../scripts/volume";
 
@@ -8,7 +8,6 @@ export enum OSDModes {
 }
 
 let osdMode: (Variable<OSDModes>|null);
-let osdIcon: (Binding<string | undefined>|null);
 
 export function setOSDMode(newMode: OSDModes): void {
     if(!osdMode) return;
@@ -18,31 +17,24 @@ export function setOSDMode(newMode: OSDModes): void {
 
 export const OSD = (mon: number) => {
     osdMode = new Variable<OSDModes>(OSDModes.SINK);
-    osdIcon = osdMode().as((mode: OSDModes) => {
-        switch(mode) {
-            case OSDModes.SINK: return "󰕾";
-            case OSDModes.BRIGHTNESS: return "󰃠";
-            default: return "󱧣";
-        }
-    });
 
     return new Widget.Window({
         namespace: "osd",
+        className: "osd-window",
         layer: Astal.Layer.OVERLAY,
         anchor: Astal.WindowAnchor.BOTTOM,
         canFocus: false,
-        marginBottom: 80,
-        focusOnClick: false,
         clickThrough: true,
+        focusOnClick: false,
+        marginBottom: 80,
         monitor: mon,
         onDestroy: () => {
             osdMode?.drop();
-
             osdMode = null;
-            osdIcon = null;
         },
         child: new Widget.Box({
             className: "osd",
+            expand: true,
             children: [
                 new Widget.Icon({
                     className: "icon",
@@ -53,37 +45,24 @@ export const OSD = (mon: number) => {
                     className: "volume",
                     orientation: Gtk.Orientation.VERTICAL,
                     valign: Gtk.Align.CENTER,
+                    expand: true,
                     children: [
                         new Widget.Label({
                             className: "device",
-                            label: bind(Wireplumber.getDefault().getDefaultSink(), "name").as((name: string) => 
-                                name || "Speaker"),
-                            halign: Gtk.Align.CENTER
+                            label: bind(Wireplumber.getDefault().getDefaultSink(), "description").as(description => 
+                                description ?? "Speaker"),
+                            truncate: true,
                         } as Widget.LabelProps),
                         new Widget.Box({
-                            vexpand: false,
-                            expand: false,
-                            children: [
-                                new Widget.LevelBar({
-                                    className: "levelbar",
-                                    width_request: 120,
-                                    value: bind(Wireplumber.getDefault().getDefaultSink(), "volume").as((volume: number) => 
-                                        Math.floor(volume * 100)),
-                                    maxValue: bind(Wireplumber.getWireplumber(), "defaultSpeaker").as(() =>
-                                        Wireplumber.getDefault().getMaxSinkVolume()),
-                                    vexpand: false,
-                                    expand: false,
-                                    halign: Gtk.Align.CENTER
-                                } as Widget.LevelBarProps),
-                                /*new Widget.Label({
-                                    className: "value",
-                                    label: bind(Wireplumber.getDefault().getDefaultSink(), "volume").as((volume: number) => 
-                                        `${Math.floor(volume * 100)}%`),
-                                    vexpand: false,
-                                    expand: false,
-                                    halign: Gtk.Align.CENTER
-                                } as Widget.LabelProps)*/
-                            ]
+                            expand: true,
+                            child: new Widget.LevelBar({
+                                className: "levelbar",
+                                value: bind(Wireplumber.getDefault().getDefaultSink(), "volume").as((volume: number) => 
+                                    Math.floor(volume * 100)),
+                                maxValue: bind(Wireplumber.getWireplumber(), "defaultSpeaker").as(() =>
+                                    Wireplumber.getDefault().getMaxSinkVolume()),
+                                expand: true
+                            } as Widget.LevelBarProps)
                         } as Widget.BoxProps)
                     ]
                 } as Widget.BoxProps)