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({
-      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 }),
+    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) =>