From f1c32ead5dc12f4dd056dde077eaa9cd555c3fdd Mon Sep 17 00:00:00 2001
From: TolaMironcenko <mironcenkotola@gmail.com>
Date: Wed, 12 Mar 2025 15:40:34 +0700
Subject: [PATCH] update and refactor

---
 widget/Bar.scss                           |   5 +-
 widget/Bar.tsx                            |   5 +
 widget/modules/Cpu/Cpu.scss               |   3 +
 widget/modules/Media/Media.scss           |  22 ++-
 widget/modules/Media/Media.tsx            | 172 +++++++++++-----------
 widget/modules/Powermenu/PowerMenu.scss   |   1 +
 widget/modules/Ram/Ram.scss               |   3 +
 widget/modules/Storage/Storage.scss       |   3 +
 widget/modules/SysTray/SysTray.scss       |   3 +-
 widget/modules/Time/Time.scss             |   3 +
 widget/modules/Volume/Volume.scss         |  12 ++
 widget/modules/Volume/Volume.tsx          |  15 ++
 widget/modules/Workspaces/Workspaces.scss |   2 +-
 widget/modules/export.ts                  |   2 +
 widget/modules/modules.scss               |   1 +
 15 files changed, 164 insertions(+), 88 deletions(-)
 create mode 100644 widget/modules/Volume/Volume.scss
 create mode 100644 widget/modules/Volume/Volume.tsx

diff --git a/widget/Bar.scss b/widget/Bar.scss
index be19482..5651a14 100644
--- a/widget/Bar.scss
+++ b/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;
diff --git a/widget/Bar.tsx b/widget/Bar.tsx
index 638499a..7b3d82d 100644
--- a/widget/Bar.tsx
+++ b/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 />
diff --git a/widget/modules/Cpu/Cpu.scss b/widget/modules/Cpu/Cpu.scss
index dfdd79e..cea8eb2 100644
--- a/widget/modules/Cpu/Cpu.scss
+++ b/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;
 }
diff --git a/widget/modules/Media/Media.scss b/widget/modules/Media/Media.scss
index 60301da..097e646 100644
--- a/widget/modules/Media/Media.scss
+++ b/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;
+    }
 }
diff --git a/widget/modules/Media/Media.tsx b/widget/modules/Media/Media.tsx
index 7410cc0..8599edc 100644
--- a/widget/modules/Media/Media.tsx
+++ b/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] ? (
-            <box>
-              <box
-                className="Cover"
-                valign={Gtk.Align.CENTER}
-                css={bind(ps[0], "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",
+          ps.map((psi) =>
+            psi ? (
+              <box className="MediaContent">
+                <box>
+                  <box
+                    className="Cover"
+                    valign={Gtk.Align.CENTER}
+                    css={bind(psi, "coverArt").as(
+                      (cover) => `background-image: url('${cover}');`,
                     )}
                   />
-                </box>
-                <label
-                  halign={Gtk.Align.START}
-                  valign={Gtk.Align.START}
-                  className="artist"
-                  vexpand
-                  wrap
-                  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")}
-                    >
+                  <box vertical>
+                    <box className="title">
+                      <label
+                        truncate
+                        hexpand
+                        halign={Gtk.Align.START}
+                        label={bind(psi, "metadata").as(() => `${psi.title}`)}
+                      />
                       <icon
-                        icon={bind(ps[0], "playbackStatus").as((s) =>
-                          s === Mpris.PlaybackStatus.PLAYING
-                            ? "media-playback-pause-symbolic"
-                            : "media-playback-start-symbolic",
+                        icon={bind(psi, "entry").as((e) =>
+                          Astal.Icon.lookup_icon(e)
+                            ? e
+                            : "audio-x-generic-symbolic",
                         )}
                       />
-                    </button>
-                    <button
-                      onClicked={() => ps[0].next()}
-                      visible={bind(ps[0], "canGoNext")}
-                    >
-                      <icon icon="media-skip-forward-symbolic" />
-                    </button>
+                    </box>
+                    <label
+                      halign={Gtk.Align.START}
+                      valign={Gtk.Align.START}
+                      className="artist"
+                      vexpand
+                      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
-                    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>
-            </box>
-          ) : (
-            <label label="Nothing Playing" />
+            ) : (
+              <label label="Nothing Playing" />
+            ),
           ),
         )}
       </box>
diff --git a/widget/modules/Powermenu/PowerMenu.scss b/widget/modules/Powermenu/PowerMenu.scss
index a45591c..42f4769 100644
--- a/widget/modules/Powermenu/PowerMenu.scss
+++ b/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;
diff --git a/widget/modules/Ram/Ram.scss b/widget/modules/Ram/Ram.scss
index 0cd726f..8675506 100644
--- a/widget/modules/Ram/Ram.scss
+++ b/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;
 }
diff --git a/widget/modules/Storage/Storage.scss b/widget/modules/Storage/Storage.scss
index befc1b6..b79a9e8 100644
--- a/widget/modules/Storage/Storage.scss
+++ b/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;
 }
diff --git a/widget/modules/SysTray/SysTray.scss b/widget/modules/SysTray/SysTray.scss
index 3960a9d..a43021a 100644
--- a/widget/modules/SysTray/SysTray.scss
+++ b/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;
         }
diff --git a/widget/modules/Time/Time.scss b/widget/modules/Time/Time.scss
index 41468f1..d78efc7 100644
--- a/widget/modules/Time/Time.scss
+++ b/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;
 }
diff --git a/widget/modules/Volume/Volume.scss b/widget/modules/Volume/Volume.scss
new file mode 100644
index 0000000..a4f43a7
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/widget/modules/Volume/Volume.tsx b/widget/modules/Volume/Volume.tsx
new file mode 100644
index 0000000..7f2c2fb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/widget/modules/Workspaces/Workspaces.scss b/widget/modules/Workspaces/Workspaces.scss
index 7b2c1a6..e242cb3 100644
--- a/widget/modules/Workspaces/Workspaces.scss
+++ b/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 {
diff --git a/widget/modules/export.ts b/widget/modules/export.ts
index f82430c..617f852 100644
--- a/widget/modules/export.ts
+++ b/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,
 };
diff --git a/widget/modules/modules.scss b/widget/modules/modules.scss
index cb8abc5..3132511 100644
--- a/widget/modules/modules.scss
+++ b/widget/modules/modules.scss
@@ -7,3 +7,4 @@
 @use "./Storage/Storage.scss";
 @use "./Workspaces/Workspaces.scss";
 @use "./FocusedClient/FocusedClient.scss";
+@use "./Volume/Volume.scss";