update and refactor

widget/Bar.scss

@@ -9,12 +9,15 @@ window.Bar {
         background: transparent;
         border-radius: 20px;
         margin: 2px 5px 0 5px;
+        min-height: 30px;
     }
 
     .Menubutton {
         all: unset;
-        background-color: black;
+        /* background-color: black; */
         border-radius: 25px;
+        border: 3pt solid black;
+        background-color: rgb(70, 70, 70);
         &:hover label {
             transition: 300ms;
             background-color: gray;

widget/Bar.tsx

@@ -13,10 +13,14 @@ import {
   LauncherButton,
   PowerMenuButton,
   MediaPlayerButton,
+  Volume,
 } from "./modules/export";
+// import Wp from "gi://AstalWp";
+// import { bind } from "astal";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+  // const speaker = Wp.get_default()?.audio.defaultSpeaker!;
   return (
     <>
       <window
@@ -39,6 +43,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
             <Workspaces />
           </box>
           <box hexpand halign={Gtk.Align.END} className="RoudedBlock">
+            <Volume />
             <MediaPlayerButton />
             <SysTray />
             <BatteryLevel />

widget/modules/Cpu/Cpu.scss

@@ -1,3 +1,6 @@
 .Cpu {
     padding: 0 5px;
+    border: 3pt solid black;
+    background-color: rgb(70, 70, 70);
+    border-radius: 25px;
 }

widget/modules/Media/Media.scss

@@ -4,18 +4,33 @@ window.Media {
     background-color: transparent;
     box {
         margin: 5px;
+        padding: 5px;
         background-color: black;
         border-radius: 25px;
-        padding: 2px;
+    }
+    box.MediaContent {
+        margin: 5px;
+        background-color: rgb(70, 70, 70);
+        border-radius: 25px;
+        padding: 5px;
+        box {
+            background-color: rgb(70, 70, 70);
+        }
     }
 
     box.title {
         padding: 5px;
         margin: 0;
+        /* background-color: rgb(70, 70, 70); */
         label {
             font-weight: bold;
             font-size: 1.1em;
         }
+        icon {
+            font-size: 30px;
+            padding: 0;
+            margin: 0;
+        }
     }
 
     .Cover {
@@ -30,4 +45,9 @@ window.Media {
     label.artist {
         padding: 5px;
     }
+
+    button {
+        margin: 5px;
+        border-radius: 25px;
+    }
 }

widget/modules/Media/Media.tsx

@@ -22,98 +22,102 @@ export default function Media() {
       application={App}
       visible={false}
     >
-      <box>
+      <box vertical>
         {bind(mpris, "players").as((ps) =>
-          ps[0] ? (
+          ps.map((psi) =>
-            <box>
+            psi ? (
-              <box
+              <box className="MediaContent">
-                className="Cover"
+                <box>
-                valign={Gtk.Align.CENTER}
+                  <box
-                css={bind(ps[0], "coverArt").as(
+                    className="Cover"
-                  (cover) => `background-image: url('${cover}');`,
+                    valign={Gtk.Align.CENTER}
-                )}
+                    css={bind(psi, "coverArt").as(
-              />
+                      (cover) => `background-image: url('${cover}');`,
-              <box vertical>
-                <box className="title">
-                  <label
-                    truncate
-                    hexpand
-                    halign={Gtk.Align.START}
-                    label={bind(ps[0], "metadata").as(() => `${ps[0].title}`)}
-                  />
-                  <icon
-                    icon={bind(ps[0], "entry").as((e) =>
-                      Astal.Icon.lookup_icon(e)
-                        ? e
-                        : "audio-x-generic-symbolic",
                     )}
                   />
-                </box>
+                  <box vertical>
-                <label
+                    <box className="title">
-                  halign={Gtk.Align.START}
+                      <label
-                  valign={Gtk.Align.START}
+                        truncate
-                  className="artist"
+                        hexpand
-                  vexpand
+                        halign={Gtk.Align.START}
-                  wrap
+                        label={bind(psi, "metadata").as(() => `${psi.title}`)}
-                  label={bind(ps[0], "metadata").as(() => `${ps[0].artist}`)}
+                      />
-                />
-                <slider
-                  visible={bind(ps[0], "length").as((l) => l > 0)}
-                  onDragged={({ value }) =>
-                    (ps[0].position = value * ps[0].length)
-                  }
-                  value={bind(ps[0], "position").as((p) =>
-                    ps[0].length > 0 ? p / ps[0].length : 0,
-                  )}
-                />
-                <centerbox className="actions">
-                  <label
-                    hexpand
-                    className="position"
-                    halign={Gtk.Align.START}
-                    visible={bind(ps[0], "length").as((l) => l > 0)}
-                    label={bind(ps[0], "position").as(lengthStr)}
-                  />
-                  <box>
-                    <button
-                      onClicked={() => ps[0].previous()}
-                      visible={bind(ps[0], "canGoPrevious")}
-                    >
-                      <icon icon="media-skip-backward-symbolic" />
-                    </button>
-                    <button
-                      onClicked={() => ps[0].play_pause()}
-                      visible={bind(ps[0], "canControl")}
-                    >
                       <icon
-                        icon={bind(ps[0], "playbackStatus").as((s) =>
+                        icon={bind(psi, "entry").as((e) =>
-                          s === Mpris.PlaybackStatus.PLAYING
+                          Astal.Icon.lookup_icon(e)
-                            ? "media-playback-pause-symbolic"
+                            ? e
-                            : "media-playback-start-symbolic",
+                            : "audio-x-generic-symbolic",
                         )}
                       />
-                    </button>
+                    </box>
-                    <button
+                    <label
-                      onClicked={() => ps[0].next()}
+                      halign={Gtk.Align.START}
-                      visible={bind(ps[0], "canGoNext")}
+                      valign={Gtk.Align.START}
-                    >
+                      className="artist"
-                      <icon icon="media-skip-forward-symbolic" />
+                      vexpand
-                    </button>
+                      wrap
+                      label={bind(psi, "metadata").as(() => `${psi.artist}`)}
+                    />
+                    <slider
+                      visible={bind(psi, "length").as((l) => l > 0)}
+                      onDragged={({ value }) =>
+                        (psi.position = value * psi.length)
+                      }
+                      value={bind(psi, "position").as((p) =>
+                        psi.length > 0 ? p / psi.length : 0,
+                      )}
+                    />
+                    <centerbox className="actions">
+                      <label
+                        hexpand
+                        className="position"
+                        halign={Gtk.Align.START}
+                        visible={bind(psi, "length").as((l) => l > 0)}
+                        label={bind(psi, "position").as(lengthStr)}
+                      />
+                      <box>
+                        <button
+                          onClicked={() => psi.previous()}
+                          visible={bind(psi, "canGoPrevious")}
+                        >
+                          <icon icon="media-skip-backward-symbolic" />
+                        </button>
+                        <button
+                          onClicked={() => psi.play_pause()}
+                          visible={bind(psi, "canControl")}
+                        >
+                          <icon
+                            icon={bind(psi, "playbackStatus").as((s) =>
+                              s === Mpris.PlaybackStatus.PLAYING
+                                ? "media-playback-pause-symbolic"
+                                : "media-playback-start-symbolic",
+                            )}
+                          />
+                        </button>
+                        <button
+                          onClicked={() => psi.next()}
+                          visible={bind(psi, "canGoNext")}
+                        >
+                          <icon icon="media-skip-forward-symbolic" />
+                        </button>
+                      </box>
+                      <label
+                        className="length"
+                        hexpand
+                        halign={Gtk.AlignEND}
+                        visible={bind(psi, "length").as((l) => l > 0)}
+                        label={bind(psi, "length").as((l) =>
+                          l > 0 ? lengthStr(l) : "0:00",
+                        )}
+                      />
+                    </centerbox>
                   </box>
-                  <label
+                </box>
-                    className="length"
-                    hexpand
-                    halign={Gtk.AlignEND}
-                    visible={bind(ps[0], "length").as((l) => l > 0)}
-                    label={bind(ps[0], "length").as((l) =>
-                      l > 0 ? lengthStr(l) : "0:00",
-                    )}
-                  />
-                </centerbox>
               </box>
-            </box>
+            ) : (
-          ) : (
+              <label label="Nothing Playing" />
-            <label label="Nothing Playing" />
+            ),
           ),
         )}
       </box>

widget/modules/Powermenu/PowerMenu.scss

@@ -12,6 +12,7 @@ window.Powermenu {
             background-color: black;
             border-radius: 25px;
             transition: 300ms;
+            background-color: rgb(70, 70, 70);
 
             &:hover {
                 background-color: gray;

widget/modules/Ram/Ram.scss

@@ -1,3 +1,6 @@
 .Ram {
     padding: 0 5px;
+    border: 3pt solid black;
+    background-color: rgb(70, 70, 70);
+    border-radius: 25px;
 }

widget/modules/Storage/Storage.scss

@@ -1,3 +1,6 @@
 .Storage {
     padding: 0 15px 0 5px;
+    border: 3pt solid black;
+    background-color: rgb(70, 70, 70);
+    border-radius: 25px;
 }

widget/modules/SysTray/SysTray.scss

@@ -7,8 +7,9 @@
         all: unset;
         padding: 5px 7px;
         border-radius: 25px;
-        border: 1pt solid black;
+        border: 3pt solid black;
         transition: 300ms;
+        background-color: rgb(70, 70, 70);
         &:hover {
             background-color: gray;
         }

widget/modules/Time/Time.scss

@@ -1,3 +1,6 @@
 .Time {
     padding: 0 15px;
+    background-color: rgb(70, 70, 70);
+    border-radius: 25px;
+    border: 3pt solid black;
 }

widget/modules/Volume/Volume.scss

@@ -0,0 +1,12 @@
+.VolumeMenuButton {
+    all: unset;
+    background-color: rgb(70, 70, 70);
+    border-radius: 25px;
+    border: 3pt solid black;
+    .VolumeBlock {
+        border-radius: 25px;
+        icon {
+            padding: 0 8px;
+        }
+    }
+}

widget/modules/Volume/Volume.tsx

@@ -0,0 +1,15 @@
+import Wp from "gi://AstalWp";
+import { bind } from "astal";
+
+export default function Volume() {
+  const speaker = Wp.get_default()?.audio.defaultSpeaker!;
+  const microphone = Wp.get_default()?.audio.defaultMicrophone!;
+  return (
+    <button className="VolumeMenuButton" onClicked="pavucontrol">
+      <box className="VolumeBlock">
+        <icon className="VolumeIcon" icon={bind(speaker, "volumeIcon")} />
+        <icon className="VolumeIcon" icon={bind(microphone, "volumeIcon")} />
+      </box>
+    </button>
+  );
+}

widget/modules/Workspaces/Workspaces.scss

@@ -20,7 +20,7 @@
         transition: 300ms;
         padding: 5px 15px;
         border-radius: 20px;
-        border: 1pt solid transparent;
+        border: 3pt solid black;
     }
 
     .focused label {

widget/modules/export.ts

@@ -11,6 +11,7 @@ import Media from "./Media/Media";
 import LauncherButton from "./LauncherButton";
 import PowerMenuButton from "./PowerMenuButton";
 import MediaPlayerButton from "./MediaPlayerButton";
+import Volume from "./Volume/Volume";
 
 export {
   BatteryLevel,
@@ -26,4 +27,5 @@ export {
   LauncherButton,
   PowerMenuButton,
   MediaPlayerButton,
+  Volume,
 };

widget/modules/modules.scss

@@ -7,3 +7,4 @@
 @use "./Storage/Storage.scss";
 @use "./Workspaces/Workspaces.scss";
 @use "./FocusedClient/FocusedClient.scss";
+@use "./Volume/Volume.scss";