Implemented battery, power profile and brightness all in one menu

modules/bar/battery/index.js

@@ -1,9 +1,9 @@
 const battery = await Service.import("battery");
+import { closeAllMenus } from "../bar.js";
 
 const BatteryLabel = () => {
   const isVis = Variable(battery.available);
 
-  const value = battery.bind("percent").as((p) => (p > 0 ? p / 100 : 0));
   const icon = battery
     .bind("percent")
     .as((p) => `battery-level-${Math.floor(p / 10) * 10}-symbolic`);
@@ -12,23 +12,58 @@ const BatteryLabel = () => {
     isVis.value = available;
   });
 
+  const formatTime = (seconds) => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return { hours, minutes };
+  };
+
+  const generateTooltip = (timeSeconds, isCharging, isCharged) => {
+    if (isCharged) {
+      return "Fully Charged!!!";
+    }
+
+    const { hours, minutes } = formatTime(timeSeconds);
+    if (isCharging) {
+      return `${hours} hours ${minutes} minutes until full`;
+    } else {
+      return `${hours} hours ${minutes} minutes left`;
+    }
+  };
+
   return {
     component: Widget.Box({
       class_name: "battery",
       visible: battery.bind("available"),
+      tooltip_text: battery.bind("time_remaining").as((t) => t.toString()),
       children: [
         Widget.Icon({ icon }),
         Widget.Label({
-          label: battery.bind("percent").as((p) => (`${p}%`)),
-        })
-        // Widget.LevelBar({
-        //   widthRequest: 20,
-        //   vpack: "center",
-        //   value,
-        // }),
+          label: battery.bind("percent").as((p) => ` ${p}%`),
+        }),
       ],
+      setup: (self) => {
+        self.hook(battery, () => {
+          self.tooltip_text = generateTooltip(
+            battery.time_remaining,
+            battery.charging,
+            battery.charged,
+          );
+        });
+      },
     }),
     isVis,
+    props: {
+      on_primary_click: (_, event) => {
+        const clickPos = event.get_root_coords();
+        const coords = [clickPos[1], clickPos[2]];
+
+        globalMousePos.value = coords;
+
+        closeAllMenus();
+        App.toggleWindow("energymenu");
+      },
+    },
   };
 };
 

modules/bar/media/index.js

@@ -50,7 +50,7 @@ const Media = () => {
 
   const songIcon = Variable("");
 
-  const label = Utils.watch("󰎇 No media playing 󰎇", mpris, "changed", () => {
+  const label = Utils.watch("󰎇 Media 󰎇", mpris, "changed", () => {
     if (activePlayer.value) {
       const { track_title, identity } = activePlayer.value;
       songIcon.value = getIconForPlayer(identity);
@@ -59,7 +59,7 @@ const Media = () => {
         : `  ${track_title}`;
     } else {
       songIcon.value = "";
-      return "󰎇 No media playing 󰎇";
+      return "󰎇 Media 󰎇";
     }
   });
 

modules/bar/network/index.js

@@ -11,7 +11,7 @@ const Network = () => {
     Widget.Label({
       label: network.wifi
         .bind("ssid")
-        .as((ssid) => (ssid ? ` ${ssid}` : " Unknown")),
+        .as((ssid) => (ssid ? `  ${ssid}` : " --").substring(0, 7)),
     }),
   ];
 

modules/menus/energy/brightness/index.js

@@ -0,0 +1,53 @@
+import brightness from "../../../../services/Brightness.js";
+import icons from "../../../icons/index.js";
+
+const Brightness = () => {
+  return Widget.Box({
+    class_name: "menu-section-container brightness",
+    vertical: true,
+    children: [
+      Widget.Box({
+        class_name: "menu-label-container",
+        hpack: "fill",
+        child: Widget.Label({
+          class_name: "menu-label",
+          hexpand: true,
+          hpack: "start",
+          label: "Brightness",
+        }),
+      }),
+      Widget.Box({
+        class_name: "menu-items-section",
+        vpack: "fill",
+        vexpand: true,
+        vertical: true,
+        child: Widget.Box({
+          class_name: "brightness-container",
+          children: [
+            Widget.Icon({
+              class_name: "brightness-slider-icon",
+              icon: icons.brightness.screen,
+            }),
+            Widget.Slider({
+              value: brightness.bind("screen_value"),
+              class_name: "menu-active-slider menu-slider brightness",
+              draw_value: false,
+              hexpand: true,
+              min: 0,
+              max: 1,
+              onChange: ({ value }) => (brightness.screen_value = value),
+            }),
+            Widget.Label({
+              class_name: "brightness-slider-label",
+              label: brightness
+                .bind("screen_value")
+                .as((b) => `${Math.floor(b * 100)}%`),
+            }),
+          ],
+        }),
+      }),
+    ],
+  });
+};
+
+export { Brightness };

modules/menus/energy/index.js

@@ -0,0 +1,25 @@
+import DropdownMenu from "../DropdownMenu.js";
+import { EnergyProfiles } from "./profiles/index.js";
+import { Brightness } from "./brightness/index.js";
+
+export default () => {
+  return DropdownMenu({
+    name: "energymenu",
+    transition: "crossfade",
+    child: Widget.Box({
+      class_name: "menu-items",
+      hpack: "fill",
+      hexpand: true,
+      child: Widget.Box({
+        vertical: true,
+        hpack: "fill",
+        hexpand: true,
+        class_name: "menu-items-container energy",
+        children: [
+          Brightness(),
+          EnergyProfiles(),
+        ],
+      }),
+    }),
+  });
+};

modules/menus/energy/profiles/index.js

@@ -0,0 +1,58 @@
+const powerProfiles = await Service.import("powerprofiles");
+import icons from "../../../icons/index.js";
+
+const EnergyProfiles = () => {
+  return Widget.Box({
+    class_name: "menu-section-container",
+    vertical: true,
+    children: [
+      Widget.Box({
+        class_name: "menu-label-container",
+        hpack: "fill",
+        child: Widget.Label({
+          class_name: "menu-label",
+          hexpand: true,
+          hpack: "start",
+          label: "Power Profile",
+        }),
+      }),
+      Widget.Box({
+        class_name: "menu-items-section",
+        vpack: "fill",
+        vexpand: true,
+        vertical: true,
+        children: powerProfiles.bind("profiles").as((profiles) => {
+          return profiles.map((prof) => {
+            const ProfileLabels = {
+              "power-saver": "Power Saver",
+              balanced: "Balanced",
+              performance: "Performance",
+            };
+            return Widget.Button({
+              on_primary_click: () => {
+                powerProfiles.active_profile = prof.Profile;
+              },
+              class_name: powerProfiles.bind("active_profile").as((active) => {
+                return `power-profile-item ${active === prof.Profile ? "active" : ""}`;
+              }),
+              child: Widget.Box({
+                children: [
+                  Widget.Icon({
+                    class_name: "power-profile-icon",
+                    icon: icons.powerprofile[prof.Profile],
+                  }),
+                  Widget.Label({
+                    class_name: "power-profile-label",
+                    label: ProfileLabels[prof.Profile],
+                  }),
+                ],
+              }),
+            });
+          });
+        }),
+      }),
+    ],
+  });
+};
+
+export { EnergyProfiles };

modules/menus/main.js

@@ -6,5 +6,15 @@ import BluetoothMenu from "./bluetooth/index.js";
 import MediaMenu from "./media/index.js";
 import NotificationsMenu from "./notifications/index.js";
 import CalendarMenu from "./calendar/index.js";
-
-export default [PowerMenu(), Verification(), AudioMenu(), NetworkMenu(), BluetoothMenu(), MediaMenu(), NotificationsMenu(), CalendarMenu()];
+import EnergyMenu from "./energy/index.js";
+export default [
+  PowerMenu(),
+  Verification(),
+  AudioMenu(),
+  NetworkMenu(),
+  BluetoothMenu(),
+  MediaMenu(),
+  NotificationsMenu(),
+  CalendarMenu(),
+  EnergyMenu(),
+];

modules/menus/network/ethernet/index.js

@@ -41,7 +41,7 @@ const Ethernet = () => {
                         hpack: "start",
                         truncate: "end",
                         wrap: true,
-                        label: `Ethernet Connection ${typeof wired.speed === "number" ? `(${wired.speed / 1000} Gbps)` : ""}`,
+                        label: `Ethernet Connection ${wired.state !== "unknown" && typeof wired?.speed === "number" ? `(${wired?.speed / 1000} Gbps)` : ""}`,
                       }),
                       Widget.Label({
                         hpack: "start",