feat(waybar): add battery module and styles

waybar/.config/waybar/config.jsonc

@@ -23,6 +23,7 @@
     "pulseaudio",
     "cpu",
     "memory",
+    "battery",
     "tray",
     "custom/power"
   ],
@@ -34,6 +35,27 @@
     "interval": 5,
     "format": "󰻠 {usage}%"
   },
+  "battery": {
+    "states": {
+      "warning": 30,
+      "critical": 15
+    },
+    "format": "{icon} {capacity}%",
+    "format-charging": "󰂄 {capacity}%",
+    "format-plugged": " {capacity}%",
+    "format-full": "󰁹 100%",
+    "format-icons": [
+      "󰂎",
+      "󰁺",
+      "󰁼",
+      "󰁾",
+      "󰂀",
+      "󰂂",
+      "󰁹"
+    ],
+    "interval": 10,
+    "tooltip": true
+  },
   "tray": {
     "icon-size": 18,
     "spacing": 6,
@@ -83,7 +105,7 @@
     }
   },
   "clock": {
-    "format": "{:%a %d %b}",
+    "format": "{:%a %d %b - %H:%m}",
     "rotate": 0,
     "tooltip-format": "<tt>{calendar}</tt>",
     "calendar": {

waybar/.config/waybar/power_menu.xml

@@ -1,51 +1,81 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <object class="GtkMenu" id="menu">
+    <child>
+      <object class="GtkMenuItem" id="section-session">
+        <property name="label">Session</property>
+        <property name="sensitive">False</property>
+        <property name="can-focus">False</property>
+        <style>
+          <class name="section-header"/>
+        </style>
+      </object>
+    </child>
 
-    <!-- Session controls -->
     <child>
       <object class="GtkMenuItem" id="lock">
-        <property name="label">   Lock</property>
+        <property name="label">󰌾  Lock</property>
       </object>
     </child>
 
     <child>
       <object class="GtkMenuItem" id="logout">
-        <property name="label">󰍃   Logout</property>
+        <property name="label">󰍃  Log Out</property>
       </object>
     </child>
 
     <child>
-      <object class="GtkSeparatorMenuItem" id="sep1" />
+      <object class="GtkSeparatorMenuItem" id="sep1"/>
+    </child>
+
+    <child>
+      <object class="GtkMenuItem" id="section-sleep">
+        <property name="label">Sleep</property>
+        <property name="sensitive">False</property>
+        <property name="can-focus">False</property>
+        <style>
+          <class name="section-header"/>
+        </style>
+      </object>
     </child>
 
-    <!-- Power controls -->
     <child>
       <object class="GtkMenuItem" id="suspend">
-        <property name="label">   Suspend</property>
+        <property name="label">󰤄  Suspend</property>
-      </object>
-    </child>
-    <child>
-      <object class="GtkMenuItem" id="hibernate">
-        <property name="label">⏾   Hibernate</property>
       </object>
     </child>
 
     <child>
-      <object class="GtkSeparatorMenuItem" id="sep2" />
+      <object class="GtkMenuItem" id="hibernate">
+        <property name="label">󰒲  Hibernate</property>
+      </object>
+    </child>
+
+    <child>
+      <object class="GtkSeparatorMenuItem" id="sep2"/>
+    </child>
+
+    <child>
+      <object class="GtkMenuItem" id="section-power">
+        <property name="label">Power</property>
+        <property name="sensitive">False</property>
+        <property name="can-focus">False</property>
+        <style>
+          <class name="section-header"/>
+        </style>
+      </object>
+    </child>
+
+    <child>
+      <object class="GtkMenuItem" id="reboot">
+        <property name="label">󰜉  Reboot</property>
+      </object>
     </child>
 
     <child>
       <object class="GtkMenuItem" id="shutdown">
-        <property name="label">⏻   Shutdown</property>
+        <property name="label">󰐥  Shut Down</property>
       </object>
     </child>
-    <child>
-      <object class="GtkMenuItem" id="reboot">
-        <property name="label">   Reboot</property>
-      </object>
-    </child>
-
   </object>
-
 </interface>

waybar/.config/waybar/style.css

@@ -44,6 +44,7 @@ tooltip {
 #pulseaudio,
 #cpu,
 #memory,
+#battery,
 #tray,
 #custom-power {
   background: @background;
@@ -100,7 +101,7 @@ tooltip {
 #clock {
   border-color: alpha(@accent, 0.35);
   color: @foreground;
-  font-weight: 700;
+  font-weight: 400;
   padding: 0 18px;
 }
 
@@ -121,6 +122,23 @@ tooltip {
   color: @warning;
 }
 
+#battery {
+  color: @accent-soft;
+}
+
+#battery.charging,
+#battery.plugged {
+  color: @accent;
+}
+
+#battery.warning:not(.charging) {
+  color: @warning;
+}
+
+#battery.critical:not(.charging) {
+  color: @danger;
+}
+
 #tray {
   padding: 0 14px;
 }
@@ -137,6 +155,7 @@ tooltip {
 #pulseaudio:hover,
 #cpu:hover,
 #memory:hover,
+#battery:hover,
 #tray:hover,
 #custom-power:hover,
 #clock:hover {
@@ -152,3 +171,54 @@ tooltip {
 .hidden {
   opacity: 0;
 }
+
+menu#menu {
+  background: @background;
+  border: 1px solid alpha(@accent-alt, 0.24);
+  border-radius: 14px;
+  padding: 8px;
+}
+
+menu#menu menuitem {
+  border-radius: 10px;
+  margin: 2px 4px;
+  padding: 6px 12px;
+}
+
+menu#menu menuitem:hover {
+  background: @background-alt;
+}
+
+menu#menu menuitem.section-header {
+  color: @foreground-muted;
+  font-size: 12px;
+  margin-top: 4px;
+  padding: 4px 12px;
+}
+
+menu#menu menuitem#lock {
+  color: @accent;
+}
+
+menu#menu menuitem#logout {
+  color: @accent-soft;
+}
+
+menu#menu menuitem#suspend,
+menu#menu menuitem#hibernate {
+  color: @type;
+}
+
+menu#menu menuitem#reboot {
+  color: @warning;
+}
+
+menu#menu menuitem#shutdown {
+  color: @danger;
+  font-weight: 700;
+}
+
+menu#menu separator {
+  background: alpha(@accent-alt, 0.24);
+  margin: 6px 10px;
+}