Added media, menu, network and power modules to bar.

modules/bar/bar.js

@@ -1,12 +1,15 @@
+import { Menu } from "./menu/index.js";
 import { Workspaces } from "./workspaces/index.js";
 import { ClientTitle } from "./window_title/index.js";
 import { Media } from "./media/index.js";
 import { Notification } from "./notification/index.js";
 import { Volume } from "./volume/index.js";
+import { Network } from "./network/index.js";
 import { Bluetooth } from "./bluetooth/index.js";
 import { BatteryLabel } from "./battery/index.js";
 import { Clock } from "./clock/index.js";
 import { SysTray } from "./systray/index.js";
+import { Power } from "./power/index.js";
 
 import { BarItemBox } from "../shared/barItemBox.js";
 
@@ -16,7 +19,7 @@ const Left = () => {
     class_name: "box-left",
     hpack: "start",
     spacing: 5,
-    children: [BarItemBox(Workspaces()), BarItemBox(ClientTitle())],
+    children: [Menu(), BarItemBox(Workspaces()), BarItemBox(ClientTitle())],
   });
 };
 
@@ -35,10 +38,12 @@ const Right = () => {
     spacing: 5,
     children: [
       BarItemBox(Volume()),
+      BarItemBox(Network()),
       BarItemBox(Bluetooth()),
       BarItemBox(BatteryLabel()),
       BarItemBox(SysTray()),
       BarItemBox(Clock()),
+      BarItemBox(Power()),
     ],
   });
 };

modules/bar/media/index.js

@@ -1,24 +1,49 @@
 const mpris = await Service.import("mpris");
 
 const Media = () => {
+  const activePlayer = Variable(mpris.players[0]);
+  mpris.connect("changed", (value) => {
+    const statusOrder = {
+      Playing: 1,
+      Paused: 2,
+      Stopped: 3,
+    };
+
+    const isPlaying = value.players.find(
+      (p) => p["play-back-status"] === "Playing",
+    );
+
+    if (isPlaying) {
+      activePlayer.value = value.players.sort(
+        (a, b) =>
+          statusOrder[a["play-back-status"]] -
+          statusOrder[b["play-back-status"]],
+      )[0];
+    }
+  });
+
   const label = Utils.watch("", mpris, "player-changed", () => {
-    if (mpris.players[0]) {
-      const { track_artists, track_title } = mpris.players[0];
-      return `${track_artists.join(", ")} - ${track_title}`;
+    if (activePlayer.value) {
+      const { track_artists, track_title } = activePlayer.value;
+      return `󰝚  ${track_title} - ${track_artists.join(", ")} 󰝚`;
     } else {
       return "Nothing is playing";
     }
   });
 
   return {
-    component: Widget.Button({
+    component: Widget.Box({
+      visible: false,
+      child: Widget.Button({
         class_name: "media",
         on_primary_click: () => mpris.getPlayer("")?.playPause(),
         on_scroll_up: () => mpris.getPlayer("")?.next(),
         on_scroll_down: () => mpris.getPlayer("")?.previous(),
         child: Widget.Label({ label }),
       }),
+    }),
     isVisible: false,
+    name: "media",
   };
 };
 

modules/bar/menu/index.js

@@ -0,0 +1,10 @@
+export const Menu = () => {
+  return Widget.Box({
+    child: Widget.Button({
+      child: Widget.Label({
+        class_name: "bar-menu_label",
+        label: "󰣇",
+      }),
+    }),
+  });
+};

modules/bar/network/index.js

@@ -0,0 +1,32 @@
+const network = await Service.import("network");
+
+const Network = () => {
+  const wifiIndicator = [
+    Widget.Icon({
+      icon: network.wifi.bind("icon_name"),
+    }),
+    Widget.Label({
+      label: network.wifi
+        .bind("ssid")
+        .as((ssid) => (ssid ? ` ${ssid}` : " Unknown")),
+    }),
+  ];
+
+  const wiredIndicator = [
+    Widget.Label({
+      label: network.bind("wired").as(() => "󰈀 Wired"),
+    }),
+  ];
+
+  return {
+    component: Widget.Box({
+      class_name: "bar-network",
+      children: network
+        .bind("primary")
+        .as((w) => (w === "wired" ? wiredIndicator : wifiIndicator)),
+    }),
+    isVisible: true,
+  };
+};
+
+export { Network };

modules/bar/power/index.js

@@ -0,0 +1,13 @@
+export const Power = () => {
+  return {
+    component: Widget.Box({
+      child: Widget.Button({
+        child: Widget.Label({
+          class_name: "bar-power_label",
+          label: "⏻",
+        }),
+      }),
+    }),
+    isVisible: true,
+  };
+};

modules/bar/window_title/index.js

@@ -15,8 +15,10 @@ const filterTitle = (titleString) => {
     ["  ", "󰇄  Desktop"],
     ["(.*) Spotify Free", "󰓇  Spotify"],
     ["(.*)Spotify Premium", "󰓇  Spotify"],
+    ["Spotify", "󰓇  Spotify"],
     ["  ~", " Terminal"],
     ["(.*) - Obsidian(.*)", "󱓧  Obsidian"],
+    ["(.*)", `󰣆  ${titleString.charAt(0).toUpperCase() + titleString.slice(1)}`],
   ];
 
   const foundMatch = windowTitleMap.find((wt) =>

modules/shared/barItemBox.js

@@ -5,11 +5,11 @@ export const BarItemBox = (child) => {
     }
 
     return child.isVisible;
-  }
+  };
 
   return Widget.Box({
     class_name: "bar_item_box_visible",
     child: child.component,
-    visible: computeVisible()
+    visible: computeVisible(),
   });
 };

scss/bar/audio.scss

@@ -27,7 +27,7 @@
 }
 
 .bar-volume_icon {
-  font-size: 17px;
+  font-size: 1.3rem;
   color: $peach;
 }
 

scss/bar/bar.scss

@@ -2,16 +2,14 @@
 
 .bar {
   background: $mantle;
-}
-
-.bar * {
-  font-weight: bold;
+  font-size: 1.15rem;
+  font-weight: 800;
 }
 
 .bar_item_box_visible {
   background: $surface0;
   border-radius: 8px;
-  padding: 1px 12px;
+  padding: 2px 12px;
   margin: 6px 3px;
 }
 

scss/bar/bluetooth.scss

@@ -1,7 +1,7 @@
 @import '../colors';
 
 .bar-bt_icon {
-  font-size: 17px;
+  font-size: 1.3rem;
   color: $sky;
 }
 

scss/bar/media.scss

@@ -0,0 +1,5 @@
+@import "../colors";
+
+.media {
+  color: $green;
+}

scss/bar/menu.scss

@@ -0,0 +1,7 @@
+@import "../colors";
+
+.bar-menu_label {
+  color: $teal;
+  margin-right: 20px;
+  font-size: 2rem;
+}

scss/bar/network.scss

@@ -0,0 +1,5 @@
+@import "../colors";
+
+.bar-network {
+  color: $mauve;
+}

scss/bar/power.scss

@@ -0,0 +1,6 @@
+@import "../colors";
+
+.bar-power_label {
+  color: $red;
+  margin-right: 2px;
+}

scss/main.scss

@@ -8,10 +8,14 @@
 @import "common";
 
 //modules - bar
+@import "bar/menu";
 @import "bar/audio";
+@import "bar/media";
+@import "bar/network";
 @import "bar/bluetooth";
 @import "bar/clock";
 @import "bar/workspace";
 @import "bar/window_title";
 @import "bar/systray";
+@import "bar/power";
 @import "bar/bar";

style.css

@@ -232,6 +232,12 @@ spinner:checked {
   animation: spin 1s linear infinite;
 }
 
+.bar-menu_label {
+  color: #94e2d5;
+  margin-right: 20px;
+  font-size: 2rem;
+}
+
 .audio-volume-box .audio-volume-label {
   min-width: 3rem;
 }
@@ -253,7 +259,7 @@ spinner:checked {
 }
 
 .bar-volume_icon {
-  font-size: 17px;
+  font-size: 1.3rem;
   color: #fab387;
 }
 
@@ -261,8 +267,16 @@ spinner:checked {
   color: #fab387;
 }
 
+.media {
+  color: #a6e3a1;
+}
+
+.bar-network {
+  color: #cba6f7;
+}
+
 .bar-bt_icon {
-  font-size: 17px;
+  font-size: 1.3rem;
   color: #89dceb;
 }
 
@@ -328,18 +342,21 @@ spinner:checked {
   background-color: #b4befe;
 }
 
-.bar {
-  background: #181825;
+.bar-power_label {
+  color: #f38ba8;
+  margin-right: 2px;
 }
 
-.bar * {
-  font-weight: bold;
+.bar {
+  background: #181825;
+  font-size: 1.15rem;
+  font-weight: 800;
 }
 
 .bar_item_box_visible {
   background: #313244;
   border-radius: 8px;
-  padding: 1px 12px;
+  padding: 2px 12px;
   margin: 6px 3px;
 }
 

style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common.scss","scss/colors.scss","scss/bar/audio.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/bar.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC9CW;;;ADiDb;AAAA;AAAA;EAGE;EACA,kBCrDW;;;ADwDb;AAAA;AAAA;EAGE;EACA,kBC5DW;;;AD+Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC3EW;;;AD8Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCzHW;;;AD4Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC3IW;ED4IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AEjOA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,ODRM;;;ACWR;EACE,ODZM;;;AEpBR;EACE;EACA,OFsBI;;;AEnBN;EACE,OFkBI;;;AGxBN;EACE,OHeK;;;AIfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBJmBO;;AIjBP;EACE,kBJQG;EIPH;EACA;;AAGF;EACE,kBJOA;EINA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OLoBO;;;AMrBT;EACE;;;AAGF;EACE,YNiCO;;;AM/BT;EACE;EACA,ONkBS;;;AMfX;EACE,kBNsBS;;;AMnBX;EACE,kBNmBS;EMlBT;;;AAGF;EACE,kBNKS;;;AO3BX;EACE,YPqCO;;;AOlCT;EACE;;;AAGF;EACE,YP2BS;EO1BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common.scss","scss/colors.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC9CW;;;ADiDb;AAAA;AAAA;EAGE;EACA,kBCrDW;;;ADwDb;AAAA;AAAA;EAGE;EACA,kBC5DW;;;AD+Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC3EW;;;AD8Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCzHW;;;AD4Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC3IW;ED4IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AElOF;EACE,ODsBK;ECrBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OFRM;;;AEWR;EACE,OFZM;;;AGpBR;EACE,OHqBM;;;AItBR;EACE,OJgBM;;;AKjBR;EACE;EACA,OLsBI;;;AKnBN;EACE,OLkBI;;;AMxBN;EACE,ONeK;;;AOfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBPmBO;;AOjBP;EACE,kBPQG;EOPH;EACA;;AAGF;EACE,kBPOA;EONA;EACA;;;AAMN;EACE;;;AC1BF;EACE,ORoBO;;;ASrBT;EACE;;;AAGF;EACE,YTiCO;;;AS/BT;EACE;EACA,OTkBS;;;ASfX;EACE,kBTsBS;;;ASnBX;EACE,kBTmBS;ESlBT;;;AAGF;EACE,kBTKS;;;AU3BX;EACE,OViBI;EUhBJ;;;ACFF;EACE,YXqCO;EWpCP;EACA;;;AAGF;EACE,YX6BS;EW5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"style.css"}