bar: utils buttons, new battery indicator

.config/ags/config.js

@@ -5,7 +5,7 @@ import { App, Utils } from './imports.js';
 import Bar from './widgets/bar/main.js';
 import Cheatsheet from './widgets/cheatsheet/main.js';
 // import DesktopBackground from './widgets/desktopbackground/main.js';
-import Dock from './widgets/dock/main.js';
+// import Dock from './widgets/dock/main.js';
 import { CornerTopleft, CornerTopright, CornerBottomleft, CornerBottomright } from './widgets/screencorners/main.js';
 import Indicator from './widgets/indicators/main.js';
 import Osk from './widgets/onscreenkeyboard/main.js';
@@ -16,7 +16,7 @@ import SideRight from './widgets/sideright/main.js';
 
 const CLOSE_ANIM_TIME = 210; // Longer than actual anim time (see styles) to make sure widgets animate fully
 
-// Init cache and check first run
+// Init cache
 Utils.exec(`bash -c 'mkdir -p ~/.cache/ags/user/colorschemes'`);
 // SCSS compilation
 Utils.exec(`bash -c 'echo "" > ${App.configDir}/scss/_musicwal.scss'`); // reset music styles
@@ -44,7 +44,7 @@ export default {
         CornerBottomleft(),
         CornerBottomright(),
         // DesktopBackground(),
-        Dock(), // Buggy
+        // Dock(), // Buggy
         Overview(),
         Indicator(),
         Cheatsheet(),

.config/ags/scripts/templates/hypr/colors.conf

@@ -1,4 +1,5 @@
-# Auto generated color theme for image at: [Local wallpaper]
+$SLURP_COMMAND="$(slurp -d -c {{ $onSecondaryContainer }}BB -b {{ $secondaryContainer }}22 -s 00000000)"
+
 general {
     col.active_border = rgba({{ $onPrimary }}FF)
     col.inactive_border = rgba({{ $secondaryContainer }}CC)

.config/ags/scss/_bar.scss

@@ -4,6 +4,10 @@
 $black: black;
 $white: white;
 $bar_ws_width: 1.774rem;
+$bar_subgroup_bg: mix($surfaceVariant, $primary, 89%);
+@if $darkmode ==true {
+    $bar_subgroup_bg: $surfaceVariant;
+}
 
 @mixin bar-group-rounding {
     @include small-rounding;
@@ -33,6 +37,7 @@ $bar_ws_width: 1.774rem;
 .bar-group-pad {
     // padding: 0rem 1.023rem;
     padding: 0.205rem;
+    // padding-left: 0.341rem;
 }
 
 .bar-group-pad-less {
@@ -41,7 +46,7 @@ $bar_ws_width: 1.774rem;
 
 .bar-group-pad-system {
     padding-left: 1.023rem;
-    padding-right: 0.547rem;
+    padding-right: 0.341rem;
 }
 
 .bar-group-pad-music {
@@ -114,10 +119,7 @@ $bar_ws_width: 1.774rem;
 }
 
 .bar-ws-occupied {
-    background-color: mix($surfaceVariant, $primary, 89%);
+    background-color: $bar_subgroup_bg;
-    @if $darkmode ==true {
-        background-color: $surfaceVariant;
-    }
     color: $onSurfaceVariant;
 }
 
@@ -132,7 +134,6 @@ $bar_ws_width: 1.774rem;
 .bar-clock {
     @include titlefont;
     font-size: 1.2727rem;
-    color: $onBackground;
 }
 
 .bar-date {
@@ -143,10 +144,11 @@ $bar_ws_width: 1.774rem;
 
 .bar-batt {
     @include full-rounding;
-    padding: 0rem 0.341rem;
+    min-height: 1.77rem;
-    background-color: $t_secondaryContainer;
+    min-width: 1.77rem;
-    color: $t_onSecondaryContainer;
+    border-radius: 10rem;
-    // border: 0.068rem solid $outline;
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
 }
 
 .bar-sidemodule {
@@ -163,12 +165,29 @@ $bar_ws_width: 1.774rem;
     color: $onSuccessContainer;
 }
 
-.bar-batt-prog-low {
+.bar-batt-circprog {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
+}
+
+.bar-batt-circprog-low {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
     background-color: $error;
     color: $errorContainer;
 }
 
-.bar-batt-prog-full {
+.bar-batt-circprog-full {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
     background-color: $successContainer;
     color: $onSuccessContainer;
 }
@@ -304,30 +323,14 @@ $bar_ws_width: 1.774rem;
     border-radius: 10rem;
     min-width: 0.681rem;
     min-height: 0.681rem;
-    background-color: $t_onSecondaryContainer;
+    background-color: $onSurfaceVariant;
-    color: $secondaryContainer;
 }
 
 .bar-batt-chargestate-charging-smaller {
     border-radius: 10rem;
     min-width: 0.409rem;
     min-height: 0.409rem;
-    background-color: $t_onSecondaryContainer;
+    background-color: $onSurfaceVariant;
-    color: $secondaryContainer;
-}
-
-.bar-batt-chargestate-low {
-    background-color: $errorContainer;
-}
-
-.bar-batt-chargestate-full {
-    background-color: $onSuccessContainer;
-}
-
-.bar-batt-percentage {
-    font-size: 1rem;
-    margin-top: -0.068rem;
-    font-weight: 500;
 }
 
 .corner {
@@ -400,3 +403,19 @@ $bar_ws_width: 1.774rem;
 .bar-statusicons-active {
     background-color: mix($t_background, $t_onBackground, 80%);
 }
+
+.bar-util-btn {
+    @include full-rounding;
+    min-height: 1.77rem;
+    min-width: 1.77rem;
+    background-color: $bar_subgroup_bg;
+}
+
+.bar-util-btn:hover,
+.bar-util-btn:focus {
+    background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
+}
+
+.bar-util-btn:active {
+    background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
+}

.config/ags/scss/_colors.scss

@@ -16,7 +16,7 @@ $transparency_enabled: false;
     @if $darkmode ==false {
         $background: mix($background, $primary, 87%);
         $surface: mix($surface, $primary, 93%);
-        $surfaceVariant: mix($surfaceVariant, #FFFFFF, 25%);
+        $surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
     }
 }
 
@@ -30,7 +30,7 @@ $transparency_enabled: false;
     @if $darkmode ==false {
         $background: mix($background, $primary, 94%);
         $surface: mix($surface, $primary, 93%);
-        $surfaceVariant: mix($surfaceVariant, #FFFFFF, 55%);
+        $surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
     }
 }
 
@@ -40,7 +40,8 @@ $transparentize_surface_amount_less: 0.6;
 $transparentize_surface_amount_less_less: 0.55;
 $transparentize_surface_amount: 0.7;
 $transparentize_surface_amount_more: 0.8;
-$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
+$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
+    $transparentize_amount;
 
 @if $darkmode ==true {
     // Less transparency
@@ -49,7 +50,8 @@ $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount
     $transparentize_surface_amount_less_less: 0.55;
     $transparentize_surface_amount: 0.69;
     $transparentize_surface_amount_more: 0.9;
-    $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
+    $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
+        $transparentize_amount;
 }
 
 @if $transparency_enabled ==false {
@@ -74,33 +76,69 @@ $onSuccessContainer: #0c1f13;
 $t_primary: transparentize($primary, $transparentize_amount);
 $t_onPrimary: transparentize($onPrimary, $transparentize_amount);
 $t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
-$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
+$t_onPrimaryContainer: transparentize(
+    $onPrimaryContainer,
+    $transparentize_amount
+);
 $t_secondary: transparentize($secondary, $transparentize_amount);
 $t_onSecondary: transparentize($onSecondary, $transparentize_amount);
-$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
+$t_secondaryContainer: transparentize(
-$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
+    $secondaryContainer,
-$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
+    $transparentize_amount
+);
+$l_t_secondaryContainer: transparentize(
+    $secondaryContainer,
+    $transparentize_surface_amount_less
+);
+$t_onSecondaryContainer: transparentize(
+    $onSecondaryContainer,
+    $transparentize_amount
+);
 $t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
 $t_tertiary: transparentize($tertiary, $transparentize_amount);
 $t_onTertiary: transparentize($onTertiary, $transparentize_amount);
-$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
+$t_tertiaryContainer: transparentize(
-$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
+    $tertiaryContainer,
+    $transparentize_amount
+);
+$t_onTertiaryContainer: transparentize(
+    $onTertiaryContainer,
+    $transparentize_amount
+);
 $t_error: transparentize($error, $transparentize_amount);
 $t_onError: transparentize($onError, $transparentize_amount);
 $t_errorContainer: transparentize($errorContainer, $transparentize_amount);
 $t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
 $t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
 $t_background: transparentize($background, $transparentize_amount);
-$t_t_background: transparentize($background, $transparentize_surface_amount_more);
+$t_t_background: transparentize(
+    $background,
+    $transparentize_surface_amount_more
+);
 $t_onBackground: transparentize($onBackground, $transparentize_amount);
 $t_surface: transparentize($surface, $transparentize_surface_amount);
 $t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
 $t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
-$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
+$t_surfaceVariant: transparentize(
-$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
+    $surfaceVariant,
-$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
+    $transparentize_surface_amount
-$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
+);
-$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
+$t_onSurfaceVariant: transparentize(
+    $onSurfaceVariant,
+    $transparentize_surface_amount
+);
+$t_t_surfaceVariant: transparentize(
+    $surfaceVariant,
+    $transparentize_surface_amount_more
+);
+$l_t_surfaceVariant: transparentize(
+    $surfaceVariant,
+    $transparentize_surface_amount_less
+);
+$l_l_t_surfaceVariant: transparentize(
+    $surfaceVariant,
+    $transparentize_surface_amount_less_less
+);
 $t_outline: transparentize($outline, $transparentize_amount);
 $t_shadow: transparentize($shadow, $transparentize_amount);
 $t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
@@ -110,7 +148,10 @@ $t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
 $t_success: transparentize($error, $transparentize_amount);
 $t_onSuccess: transparentize($onError, $transparentize_amount);
 $t_successContainer: transparentize($errorContainer, $transparentize_amount);
-$t_onSuccessContainer: transparentize($onErrorContainer, $transparentize_amount);
+$t_onSuccessContainer: transparentize(
+    $onErrorContainer,
+    $transparentize_amount
+);
 
 // Others
 $hovercolor: mix($t_surface, $t_onSurface, 50%);

.config/ags/scss/_lib_classes.scss

@@ -69,6 +69,10 @@
     color: $onSecondaryContainer;
 }
 
+.txt-onSurfaceVariant {
+    color: $onSurfaceVariant;
+}
+
 .txt-shadow {
     text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
     margin: 10px;
@@ -433,43 +437,43 @@
     margin-right: 0rem;
 }
 
-.spacing-v--5>box {
+.spacing-v--5>* {
     margin-bottom: -0.341rem;
 }
 
-.spacing-v--5>box:last-child {
+.spacing-v--5>*:last-child {
     margin-bottom: 0rem;
 }
 
-.spacing-v--5>label {
+.spacing-h--10>* {
-    margin-bottom: -0.341rem;
-}
-
-.spacing-v--5>label:last-child {
-    margin-bottom: 0rem;
-}
-
-.spacing-v--10>box {
-    margin-bottom: -0.682rem;
-}
-
-.spacing-v--10>box:last-child {
-    margin-bottom: 0rem;
-}
-
-.spacing-v--10>label {
-    margin-bottom: -0.682rem;
-}
-
-.spacing-v--10>label:last-child {
-    margin-bottom: 0rem;
-}
-
-.spacing-h--20>box {
     margin-left: -1.364rem;
 }
 
-.spacing-h--20>box:first-child {
+.spacing-h--10>*:first-child {
+    margin-left: 0rem;
+}
+
+.spacing-v--10>* {
+    margin-bottom: -0.682rem;
+}
+
+.spacing-v--10>*:last-child {
+    margin-bottom: 0rem;
+}
+
+.spacing-v--10>* {
+    margin-bottom: -0.682rem;
+}
+
+.spacing-v--10>*:last-child {
+    margin-bottom: 0rem;
+}
+
+.spacing-h--20>* {
+    margin-left: -1.364rem;
+}
+
+.spacing-h--20>*:first-child {
     margin-left: 0rem;
 }
 

.config/ags/scss/_musicmaterial.scss

@@ -1 +0,0 @@
-

.config/ags/scss/_osd.scss

@@ -14,7 +14,6 @@
     border-radius: 1.023rem;
     padding: 0.625rem 1.023rem;
     padding-top: 0.313rem;
-    margin: 10px;
 }
 
 .osd-progress {

.config/ags/style.css

@@ -49,6 +49,9 @@
 .txt-onSecondaryContainer {
   color: #f8daee; }
 
+.txt-onSurfaceVariant {
+  color: #d1c2cb; }
+
 .txt-shadow {
   text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
   margin: 10px; }
@@ -324,34 +327,34 @@
 .spacing-h--5 > box:last-child {
   margin-right: 0rem; }
 
-.spacing-v--5 > box {
+.spacing-v--5 > * {
   margin-bottom: -0.341rem; }
 
-.spacing-v--5 > box:last-child {
+.spacing-v--5 > *:last-child {
   margin-bottom: 0rem; }
 
-.spacing-v--5 > label {
+.spacing-h--10 > * {
-  margin-bottom: -0.341rem; }
-
-.spacing-v--5 > label:last-child {
-  margin-bottom: 0rem; }
-
-.spacing-v--10 > box {
-  margin-bottom: -0.682rem; }
-
-.spacing-v--10 > box:last-child {
-  margin-bottom: 0rem; }
-
-.spacing-v--10 > label {
-  margin-bottom: -0.682rem; }
-
-.spacing-v--10 > label:last-child {
-  margin-bottom: 0rem; }
-
-.spacing-h--20 > box {
   margin-left: -1.364rem; }
 
-.spacing-h--20 > box:first-child {
+.spacing-h--10 > *:first-child {
+  margin-left: 0rem; }
+
+.spacing-v--10 > * {
+  margin-bottom: -0.682rem; }
+
+.spacing-v--10 > *:last-child {
+  margin-bottom: 0rem; }
+
+.spacing-v--10 > * {
+  margin-bottom: -0.682rem; }
+
+.spacing-v--10 > *:last-child {
+  margin-bottom: 0rem; }
+
+.spacing-h--20 > * {
+  margin-left: -1.364rem; }
+
+.spacing-h--20 > *:first-child {
   margin-left: 0rem; }
 
 .instant {
@@ -547,7 +550,7 @@ tooltip {
 
 .bar-group-pad-system {
   padding-left: 1.023rem;
-  padding-right: 0.547rem; }
+  padding-right: 0.341rem; }
 
 .bar-group-pad-music {
   padding-right: 1.023rem;
@@ -605,7 +608,6 @@ tooltip {
   color: #f8daee; }
 
 .bar-ws-occupied {
-  background-color: #51434d;
   background-color: #3b3338;
   color: #d1c2cb; }
 
@@ -619,8 +621,7 @@ tooltip {
 
 .bar-clock {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
-  font-size: 1.2727rem;
+  font-size: 1.2727rem; }
-  color: #eae0e4; }
 
 .bar-date {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
@@ -630,7 +631,9 @@ tooltip {
 .bar-batt {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  padding: 0rem 0.341rem;
+  min-height: 1.77rem;
+  min-width: 1.77rem;
+  border-radius: 10rem;
   background-color: #554050;
   color: #f8daee; }
 
@@ -645,11 +648,27 @@ tooltip {
   background-color: #374b3e;
   color: #d1e9d6; }
 
-.bar-batt-prog-low {
+.bar-batt-circprog {
+  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
+  min-width: 0.068rem;
+  min-height: 1.636rem;
+  padding: 0rem;
+  background-color: #554050;
+  color: #f8daee; }
+
+.bar-batt-circprog-low {
+  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
+  min-width: 0.068rem;
+  min-height: 1.636rem;
+  padding: 0rem;
   background-color: #ffb4a9;
   color: #930006; }
 
-.bar-batt-prog-full {
+.bar-batt-circprog-full {
+  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
+  min-width: 0.068rem;
+  min-height: 1.636rem;
+  padding: 0rem;
   background-color: #374b3e;
   color: #d1e9d6; }
 
@@ -757,26 +776,13 @@ tooltip {
   border-radius: 10rem;
   min-width: 0.681rem;
   min-height: 0.681rem;
-  background-color: #f8daee;
+  background-color: #d1c2cb; }
-  color: #554050; }
 
 .bar-batt-chargestate-charging-smaller {
   border-radius: 10rem;
   min-width: 0.409rem;
   min-height: 0.409rem;
-  background-color: #f8daee;
+  background-color: #d1c2cb; }
-  color: #554050; }
-
-.bar-batt-chargestate-low {
-  background-color: #930006; }
-
-.bar-batt-chargestate-full {
-  background-color: #d1e9d6; }
-
-.bar-batt-percentage {
-  font-size: 1rem;
-  margin-top: -0.068rem;
-  font-weight: 500; }
 
 .corner {
   background-color: #100d10;
@@ -839,6 +845,20 @@ tooltip {
 .bar-statusicons-active {
   background-color: #3c373a; }
 
+.bar-util-btn {
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+  min-height: 1.77rem;
+  min-width: 1.77rem;
+  background-color: #3b3338; }
+
+.bar-util-btn:hover,
+.bar-util-btn:focus {
+  background-color: #4a4147; }
+
+.bar-util-btn:active {
+  background-color: #595055; }
+
 .cheatsheet-bg {
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
@@ -1002,8 +1022,7 @@ tooltip {
   background-color: #100d10;
   border-radius: 1.023rem;
   padding: 0.625rem 1.023rem;
-  padding-top: 0.313rem;
+  padding-top: 0.313rem; }
-  margin: 10px; }
 
 .osd-progress {
   min-height: 0.955rem;

.config/ags/widgets/bar/music.js

@@ -9,7 +9,7 @@ const TrackProgress = () => {
     const _updateProgress = (circprog) => {
         const mpris = Mpris.getPlayer('');
         if (!mpris) return;
-        // Set circular progress (font size cuz that's how this hacky circprog works)
+        // Set circular progress value
         circprog.css = `font-size: ${Math.max(mpris.position / mpris.length * 100, 0)}px;`
     }
     return AnimatedCircProg({
@@ -65,7 +65,7 @@ export const ModuleMusic = () => Widget.EventBox({
                     Widget.Scrollable({
                         hexpand: true,
                         child: Widget.Label({
-                            className: 'txt txt-smallie',
+                            className: 'txt-smallie txt-onSurfaceVariant',
                             connections: [[Mpris, label => {
                                 const mpris = Mpris.getPlayer('');
                                 if (mpris)

.config/ags/widgets/bar/system.js

@@ -1,16 +1,34 @@
 // This is for the right pill of the bar. 
 // For the cool memory indicator on the sidebar, see sysinfo.js
 import { Service, Utils, Widget } from '../../imports.js';
+const { Box, Label, Button, Overlay, Revealer, Scrollable, Stack, EventBox } = Widget;
 const { exec, execAsync } = Utils;
 const { GLib } = imports.gi;
 import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
 import { MaterialIcon } from '../../lib/materialicon.js';
+import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
 
 const BATTERY_LOW = 20;
 
+const BatBatteryProgress = () => {
+    const _updateProgress = (circprog) => { // Set circular progress value
+        circprog.css = `font-size: ${Battery.percent}px;`
+
+        circprog.toggleClassName('bar-batt-circprog-low', Battery.percent <= BATTERY_LOW);
+        circprog.toggleClassName('bar-batt-circprog-full', Battery.charged);
+    }
+    return AnimatedCircProg({
+        className: 'bar-batt-circprog',
+        vpack: 'center', hpack: 'center',
+        connections: [
+            [Battery, _updateProgress],
+        ],
+    })
+}
+
 const BarClock = () => Widget.Box({
     vpack: 'center',
-    className: 'spacing-h-5',
+    className: 'spacing-h-5 txt-onSurfaceVariant',
     children: [
         Widget.Label({
             className: 'bar-clock',
@@ -20,11 +38,11 @@ const BarClock = () => Widget.Box({
             }),
         }),
         Widget.Label({
-            className: 'txt-norm txt',
+            className: 'txt-norm',
             label: '•',
         }),
         Widget.Label({
-            className: 'txt-smallie txt',
+            className: 'txt-smallie',
             label: GLib.DateTime.new_now_local().format("%A, %d/%m"),
             setup: (self) => self.poll(5000, label => {
                 label.label = GLib.DateTime.new_now_local().format("%A, %d/%m");
@@ -33,105 +51,110 @@ const BarClock = () => Widget.Box({
     ],
 });
 
-const BarBattery = () => {
+const UtilButton = ({ name, icon, onClicked }) => Button({
-    const BarResourceValue = (name, icon, command) => Widget.Box({
+    vpack: 'center',
-        vpack: 'center',
+    tooltipText: name,
-        className: 'bar-batt spacing-h-5',
+    onClicked: onClicked,
-        children: [
+    className: 'bar-util-btn icon-material txt-norm',
-            MaterialIcon(icon, 'small'),
+    label: `${icon}`,
-            Widget.ProgressBar({ // Progress
+})
-                vpack: 'center', hexpand: true,
+
-                className: 'bar-prog-batt',
+const Utilities = () => Scrollable({
-                setup: (self) => self.poll(5000, (progress) => execAsync(['bash', '-c', command])
+    hexpand: true,
-                    .then((output) => {
+    child: Box({
-                        progress.value = Number(output) / 100;
+        hpack: 'center',
-                        progress.tooltipText = `${name}: ${Number(output)}%`
-                    })
-                    .catch(print)
-                ),
-            }),
-        ]
-    });
-    const batteryWidget = Widget.Box({
-        vpack: 'center',
-        hexpand: true,
-        className: 'spacing-h-5 bar-batt',
-        setup: (self) => self.hook(Battery, box => {
-            box.toggleClassName('bar-batt-low', Battery.percent <= BATTERY_LOW);
-            box.toggleClassName('bar-batt-full', Battery.charged);
-        }),
-        children: [
-            MaterialIcon('settings_heart', 'small'),
-            Widget.Label({ // Percentage
-                className: 'bar-batt-percentage',
-                setup: (self) => self.hook(Battery, label => {
-                    label.label = `${Battery.percent}`;
-                }),
-            }),
-            Widget.ProgressBar({ // Progress
-                vpack: 'center',
-                hexpand: true,
-                className: 'bar-prog-batt',
-                setup: (self) => self.hook(Battery, progress => {
-                    progress.value = Math.abs(Battery.percent / 100); // battery could be initially negative wtf
-                    progress.toggleClassName('bar-prog-batt-low', Battery.percent <= BATTERY_LOW);
-                    progress.toggleClassName('bar-prog-batt-full', Battery.charged);
-                    batteryWidget.tooltipText = `Battery: ${Battery.percent}%`
-                }),
-            }),
-            Widget.Revealer({ // A dot for charging state
-                transitionDuration: 150,
-                revealChild: false,
-                transition: 'slide_left',
-                child: Widget.Box({
-                    className: 'spacing-h-3',
-                    children: [
-                        Widget.Box({
-                            vpack: 'center',
-                            className: 'bar-batt-chargestate-charging-smaller',
-                            setup: (self) => self.hook(Battery, box => {
-                                box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
-                                box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
-                            }),
-                        }),
-                        Widget.Box({
-                            vpack: 'center',
-                            className: 'bar-batt-chargestate-charging',
-                            setup: (self) => self.hook(Battery, box => {
-                                box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
-                                box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
-                            }),
-                        }),
-                    ]
-                }),
-                setup: (self) => self.hook(Battery, revealer => {
-                    revealer.revealChild = Battery.charging;
-                }),
-            }),
-        ],
-    });
-    const memUsage = Widget.Box({
         className: 'spacing-h-5',
         children: [
-            BarResourceValue('RAM usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
+            UtilButton({
-            BarResourceValue('Swap usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
+                name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
+                    Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`])
+                        .catch(print)
+                }
+            }),
+            UtilButton({
+                name: 'Color picker', icon: 'colorize', onClicked: () => {
+                    Utils.execAsync(['hyprpicker', '-a']).catch(print)
+                }
+            }),
+            UtilButton({
+                name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
+                    App.toggleWindow('osk');
+                }
+            }),
         ]
     })
-    const widgetStack = Widget.Stack({
+})
-        transition: 'slide_up_down',
+
-        vpack: 'center',
+const BarBattery = () => Box({
-        hexpand: true,
+    className: 'spacing-h-4 txt-onSurfaceVariant',
-        items: [
+    children: [
-            ['fallback', memUsage],
+        // Revealer({ // A dot for charging state
-            ['battery', batteryWidget],
+        //     transitionDuration: 150,
-        ],
+        //     revealChild: false,
-        setup: (stack) => Utils.timeout(1, () => { // On desktops systems with no battery, show memory usage instead
+        //     transition: 'crossfade',
-            if (Battery.available) stack.shown = 'battery';
+        //     child: Widget.Box({
-            else stack.shown = 'fallback';
+        //         className: 'spacing-h-3',
-        })
+        //         children: [
-    })
+        //             Widget.Box({
-    return widgetStack;
+        //                 vpack: 'center',
-}
+        //                 className: 'bar-batt-chargestate-charging-smaller',
+        //                 setup: (self) => self.hook(Battery, box => {
+        //                     box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
+        //                     box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
+        //                 }),
+        //             }),
+        //             Widget.Box({
+        //                 vpack: 'center',
+        //                 className: 'bar-batt-chargestate-charging',
+        //                 setup: (self) => self.hook(Battery, box => {
+        //                     box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
+        //                     box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
+        //                 }),
+        //             }),
+        //         ]
+        //     }),
+        //     setup: (self) => self.hook(Battery, revealer => {
+        //         revealer.revealChild = Battery.charging;
+        //     }),
+        // }),
+        Stack({
+            transition: 'slide_up_down',
+            items: [
+                ['discharging', Widget.Label({
+                    className: 'txt-norm txt',
+                    label: '•',
+                }),],
+                ['charging', MaterialIcon('bolt', 'norm')],
+            ],
+            setup: (self) => self.hook(Battery, revealer => {
+                self.shown = Battery.charging ? 'charging' : 'discharging';
+            }),
+        }),
+        Label({
+            className: 'txt-smallie txt-onSurfaceVariant',
+            setup: (self) => self.hook(Battery, label => {
+                label.label = `${Battery.percent}%`;
+            }),
+        }),
+        Overlay({
+            child: Widget.Box({
+                vpack: 'center',
+                className: 'bar-batt',
+                homogeneous: true,
+                children: [
+                    MaterialIcon('settings_heart', 'small'),
+                ],
+                setup: (self) => self.hook(Battery, box => {
+                    box.toggleClassName('bar-batt-low', Battery.percent <= BATTERY_LOW);
+                    box.toggleClassName('bar-batt-full', Battery.charged);
+                }),
+            }),
+            overlays: [
+                BatBatteryProgress(),
+            ]
+        }),
+    ]
+});
 
 export const ModuleSystem = () => Widget.EventBox({
     onScrollUp: () => execAsync('hyprctl dispatch workspace -1'),
@@ -141,9 +164,10 @@ export const ModuleSystem = () => Widget.EventBox({
         className: 'bar-group-margin bar-sides',
         children: [
             Widget.Box({
-                className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-15',
+                className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-5',
                 children: [
                     BarClock(),
+                    Utilities(),
                     BarBattery(),
                 ],
             }),

.config/ags/widgets/bar/workspaces.js

@@ -66,6 +66,7 @@ const WorkspaceContents = (count = 10) => {
                 const layout = PangoCairo.create_layout(cr);
                 const fontDesc = Pango.font_description_from_string(`${workspaceFontFamily[0]} ${workspaceFontSize}`);
                 layout.set_font_description(fontDesc);
+                cr.setAntialias(Cairo.Antialias.BEST);
                 // Get kinda min radius for number indicators
                 layout.set_text("0".repeat(count.toString().length), -1);
                 const [layoutWidth, layoutHeight] = layout.get_pixel_size();
@@ -84,7 +85,7 @@ const WorkspaceContents = (count = 10) => {
                             cr.fill();
                         }
                         else {
-                            cr.rectangle(wsCenterX - workspaceRadius , wsCenterY - workspaceRadius, workspaceRadius , workspaceRadius * 2)
+                            cr.rectangle(wsCenterX - workspaceRadius, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
                             cr.fill();
                         }
                         if (!(area._workspaceMask & (1 << (i + 1)))) { // Right
@@ -92,7 +93,7 @@ const WorkspaceContents = (count = 10) => {
                             cr.fill();
                         }
                         else {
-                            cr.rectangle(wsCenterX, wsCenterY - workspaceRadius, workspaceRadius , workspaceRadius * 2)
+                            cr.rectangle(wsCenterX, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
                             cr.fill();
                         }
 
@@ -118,7 +119,7 @@ const WorkspaceContents = (count = 10) => {
                 cr.fill();
                 // inner decor
                 cr.setSourceRGBA(activefg.red, activefg.green, activefg.blue, activefg.alpha);
-                cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius * 0.19, 0, 2 * Math.PI);
+                cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius * 0.2, 0, 2 * Math.PI);
                 cr.fill();
             }))
         ,
@@ -148,12 +149,15 @@ export default () => EventBox({
         self.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
         self.on('motion-notify-event', (self, event) => {
             if (!self._clicked) return;
+            console.log('switching move');
             const [_, cursorX, cursorY] = event.get_coords();
             const widgetWidth = self.get_allocation().width;
             const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES / widgetWidth);
             Hyprland.sendMessage(`dispatch workspace ${wsId}`)
         })
         self.on('button-press-event', (self, event) => {
+            if (!(event.get_button()[1] === 1)) return; // We're only interested in left-click here
+            console.log('switching');
             self._clicked = true;
             const [_, cursorX, cursorY] = event.get_coords();
             const widgetWidth = self.get_allocation().width;

.config/ags/widgets/desktopbackground/timeandlaunches.js

@@ -62,7 +62,7 @@ export default () => Box({
     hpack: 'start',
     vpack: 'end',
     vertical: true,
-    className: 'bg-time-box spacing-v-20',
+    className: 'bg-time-box spacing-h--10',
     children: [
         TimeAndDate(),
         // QuickLaunches(),

.config/ags/widgets/indicators/indicatorvalues.js

@@ -70,6 +70,7 @@ export default () => MarginRevealer({
     child: Box({
         hpack: 'center',
         vertical: false,
+        className: 'spacing-h--10',
         children: [
             brightnessIndicator,
             volumeIndicator,

.config/ags/widgets/sideright/quicktoggles.js

@@ -78,20 +78,16 @@ export const ModuleNightLight = (props = {}) => Widget.Button({ // TODO: Make th
     onClicked: (self) => {
         self._enabled = !self._enabled;
         self.toggleClassName('sidebar-button-active', self._enabled);
-        if (self._enabled) {
+        // if (self._enabled) Utils.execAsync(['bash', '-c', 'wlsunset & disown'])
-            self._inhibitor = Utils.subprocess(
+        if (self._enabled) Utils.execAsync('wlsunset')
-                ['wlsunset'],
+        else Utils.execAsync('pkill wlsunset');
-                (output) => print(output),
-                (err) => logError(err),
-                self,
-            );
-        }
-        else {
-            self._inhibitor.force_exit();
-        }
     },
     child: MaterialIcon('nightlight', 'norm'),
-    setup: setupCursorHover,
+    setup: (self) => {
+        setupCursorHover(self);
+        self._enabled = !!exec('pidof wlsunset');
+        self.toggleClassName('sidebar-button-active', self._enabled);
+    },
     ...props,
 });