add battery info w/PowerProfiles

app.ts

@@ -1,22 +1,26 @@
 import style from "./styles/style.scss"
-import { SHELL } from "./settings.json";
 
 import { GLib, monitorFile, exec } from "astal";
-import { App, Gtk } from "astal/gtk4"
+import { App, Gtk } from "astal/gtk4";
 import Hyprland from "gi://AstalHyprland";
 
 import QuickSettings from "widget/quick_settings/quick_settings";
-import BluetoothWindow from "./widget/quick_settings/bluetooth";
+import BluetoothWindow from "widget/quick_settings/bluetooth";
-
 import Launcher from "widget/launcher/launcher";
+import BatteryInfo from "@/widget/bar/battery_info";
 import Bar from "widget/bar/bar";
 
 const hypr = Hyprland.get_default();
 const windows = new Map<number, Gtk.Window[]>();
+const components = [
+	Bar, 
+	Launcher, 
+	QuickSettings, 
+	BluetoothWindow,
+	BatteryInfo
+];
 
 const setupBars = async (monitor_id: number) => {
-    const components = [Bar, Launcher, QuickSettings, BluetoothWindow];
-
     const windows = await Promise.all(
         components.map(item => Promise.resolve(item(monitor_id)) as Promise<Gtk.Window>)
     );
@@ -26,7 +30,7 @@ const setupBars = async (monitor_id: number) => {
 
 const STYLES = `${GLib.get_user_config_dir()}/ags/styles`;
 const monitorCSS = () => monitorFile(
-	STYLES + '/colors/index.scss',
+	STYLES + '/colors.scss',
 	() => {
 		exec(`sass ${STYLES}/style.scss /tmp/ags-style.css`);
 		App.apply_css('/tmp/ags-style.css', true);

lib/icons.ts

@@ -0,0 +1,17 @@
+import { Binding } from "astal";
+
+type Substitution = { charging?: string, idle?: string }
+
+export const getBatteryIcon = (percentage: number, charging: Binding<boolean>) => {
+    const levels = Array.from({ length: 10 }, (_, i) => (i + 1) * 10);
+    const level = levels.find((level) => percentage <= level)!;
+
+    const substitutions: Record<number, Substitution> = {
+        100: { charging: "battery-level-100-charged-symbolic" }
+    };
+
+    return charging.as(c => c
+        ? substitutions[level]?.charging || `battery-level-${level}-charging-symbolic`
+        : substitutions[level]?.idle || `battery-level-${level}-symbolic`
+    );
+};

lib/icons.tsx

@@ -1,6 +0,0 @@
-export default {
-    battery: {
-        charging: "battery-symbolic",
-        discharging: "battery-caution-symbolic"
-    }
-};

lib/utils.ts

@@ -3,10 +3,18 @@ import { Gtk, Gdk } from "astal/gtk4";
 export type If<Condition, Then, Else> = Condition extends true ? Then : Else;
 export type Belongs<T, U> = {
     [K in keyof T]: T[K] extends U ? K : never;
-}[keyof T];  
+}[keyof T];
 
 export const hideWindow = (self: Gtk.Window, keyval: number) => {
-    if (keyval === Gdk.KEY_Escape) self.hide();
+    const keys = ["quick_settings"].includes(self.name)
+        ? [Gdk.KEY_Escape]
+        : [
+            Gdk.KEY_Escape, 
+            Gdk.KEY_Super_L, 
+            Gdk.KEY_Super_R
+        ];
+
+    if (keys.some(key => key === keyval)) self.hide();
 }
 
 export const openOnButton = (event: Gdk.ButtonEvent, keyval: number) => (action: () => void) => {

styles/colors.scss

@@ -0,0 +1,26 @@
+// SCSS Variables
+// Generated by 'wal'
+$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_62.jpg";
+
+// Special
+$background: #f2eff5;
+$foreground: #040404;
+$cursor: #040404;
+
+// Colors
+$color0: #f2eff5;
+$color1: #463C8B;
+$color2: #335092;
+$color3: #504E90;
+$color4: #695F9E;
+$color5: #93689E;
+$color6: #9D77B9;
+$color7: #040404;
+$color8: #655974;
+$color9: #463C8B;
+$color10: #335092;
+$color11: #504E90;
+$color12: #695F9E;
+$color13: #93689E;
+$color14: #9D77B9;
+$color15: #040404;

styles/colors/index.scss

@@ -1,52 +0,0 @@
-// SCSS Variables
-// Generated by 'wal'
-$wallpaper: "/home/sadorowo/images/wallpapers/youtube_Sheri_36.jpg";
-
-// Special
-$background: #0D0809;
-$foreground: #b5b4b9;
-$cursor: #b5b4b9;
-
-// Colors
-$color0: #0D0809;
-$color1: #655250;
-$color2: #975334;
-$color3: #9A6854;
-$color4: #C96F45;
-$color5: #B18970;
-$color6: #EC9863;
-$color7: #b5b4b9;
-$color8: #7e7d81;
-$color9: #655250;
-$color10: #975334;
-$color11: #9A6854;
-$color12: #C96F45;
-$color13: #B18970;
-$color14: #EC9863;
-$color15: #b5b4b9;
-$primary: lighten($color4, 20%);
-$onPrimary: darken($color2, 20%);
-$primaryContainer: darken($color2, 10%);
-$onPrimaryContainer: lighten($color4, 10%);
-$secondary: desaturate(lighten($color5, 20%), 20%);
-$onSecondary: desaturate(darken($color3, 20%), 20%);
-$secondaryContainer: desaturate(darken($color3, 20%), 20%);
-$onSecondaryContainer: desaturate(lighten($color5, 20%), 20%);
-$tertiary: adjust-hue(lighten($color4, 20%), 30deg);
-$onTertiary: adjust-hue(darken($color2, 20%), 30deg);
-$tertiaryContainer: adjust-hue(darken($color2, 10%), 30deg);
-$tertiaryContainer: adjust-hue(lighten($color4, 10%), 30deg);
-$error: #ffb4a9;
-$onError: #680003;
-$errorContainer: #930006;
-$onErrorContainer: #ffb4a9;
-$background: $color0;
-$onBackground: $color7;
-$surface: $color0;
-$onSurface: $color7;
-$surfaceVariant: $color1;
-$onSurfaceVariant: $color7;
-$outline: $color7;
-$inverseSurface: invert($surface);
-$inverseOnSurface: invert($onSurface);
-$inversePrimary: invert($primary);

styles/colors/material.scss

@@ -1,26 +0,0 @@
-$primary: lighten($color4, 20%);
-$onPrimary: darken($color2, 20%);
-$primaryContainer: darken($color2, 10%);
-$onPrimaryContainer: lighten($color4, 10%);
-$secondary: desaturate(lighten($color5, 20%), 20%);
-$onSecondary: desaturate(darken($color3, 20%), 20%);
-$secondaryContainer: desaturate(darken($color3, 20%), 20%);
-$onSecondaryContainer: desaturate(lighten($color5, 20%), 20%);
-$tertiary: adjust-hue(lighten($color4, 20%), 30deg);
-$onTertiary: adjust-hue(darken($color2, 20%), 30deg);
-$tertiaryContainer: adjust-hue(darken($color2, 10%), 30deg);
-$tertiaryContainer: adjust-hue(lighten($color4, 10%), 30deg);
-$error: #ffb4a9;
-$onError: #680003;
-$errorContainer: #930006;
-$onErrorContainer: #ffb4a9;
-$background: $color0;
-$onBackground: $color7;
-$surface: $color0;
-$onSurface: $color7;
-$surfaceVariant: $color1;
-$onSurfaceVariant: $color7;
-$outline: $color7;
-$inverseSurface: invert($surface);
-$inverseOnSurface: invert($onSurface);
-$inversePrimary: invert($primary);

styles/components/_bar.scss

@@ -1,7 +1,6 @@
 @use '../colors' as *;
 
 window.bar {
-    color: $onPrimary;
     font-weight: bold;
 
     >box {
@@ -11,21 +10,23 @@ window.bar {
     >.inner {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        background: $primary;
+        background: $color5;
         padding: 0.25rem 1rem;
         margin: 0;
 
-        * { color: $onPrimary; }
+        * { color: $color0; }
     }
 
     .tray .item {
         padding: 0;
         margin: 0;
-        background: $primary;
+        background: $color5;
 
         image {
             padding: 0;
             margin: 0;
         }
     }
+
+    calendar>header { border: none; }
 }

styles/components/_battery_info.scss

@@ -0,0 +1,56 @@
+@use '../colors' as *;
+
+window.battery_info {
+    font-weight: bold;
+
+    >box {
+        border: 1px solid $color0;
+        border-radius: 10px;
+        margin: 8px;
+    }
+    
+    >.inner {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        background: $color5;
+        padding: 0.75rem 3rem;
+        margin: 0;
+
+        label.percentage {
+            font-size: 300%;
+        }
+
+        * { 
+            transition: all 0.2s ease-in-out;
+            color: $color0;
+        }
+    }
+
+    button {
+        padding: 0.75rem 1rem;
+    }
+}
+
+window.battery_info button {
+    transition: all 0.2s ease-in-out;
+    background: $color5;
+    border: 2px solid $color0;
+    margin: 5px;
+
+    &:hover {
+        background: $color0;
+
+        * {
+            color: $color5;
+        }
+    }
+
+    &.active {
+        background: $color0;
+        border: 0.5px solid $color5;
+
+        * {
+            color: $color5;
+        }
+    }
+}

styles/components/_index.scss

@@ -1,3 +1,4 @@
 @forward '_bar';
 @forward '_launcher';
-@forward '_quick_settings';
+@forward '_battery_info';
+@forward '_quick_settings';

styles/components/_launcher.scss

@@ -2,29 +2,29 @@
 
 .launcher {
     entry {
-        background: $primary;
+        background: $color5;
-        color: $onPrimary;
+        color: $color0;
         padding: 8px 12px;
         border: none;
 
         margin-bottom: 6px;
         
         &:focus {
-            outline: 2px solid $onPrimary;
+            outline: 2px solid $color0;
         }
     }
 
     .application {
         padding: 10px;
-        background: $primary;
+        background: $color5;
         border-radius: 8px;
         transition: background 0.2s ease;
 
         &:hover {
-            background: $onPrimary;
+            background: $color0;
         
             box>.name, box>.description {
-                color: $primary;
+                color: $color5;
             }
         }
 
@@ -34,21 +34,21 @@
 
         box {
             .name {
-                color: $onPrimary;
+                color: $color0;
                 font-size: 14px;
                 font-weight: 600;
             }
 
             .description {
-                color: $onPrimary;
+                color: $color0;
                 font-size: 12px;
             }
         }
     }
 
     .not-found {
-        background: $primary;
+        background: $color5;
-        color: $onPrimary;
+        color: $color0;
         font-size: 14px;
         padding: 10px;
         border-radius: 8px;

styles/components/_quick_settings.scss

@@ -4,6 +4,7 @@ window.quick_settings {
     font-weight: bold;
 
     >box {
+        border: 1px solid $color0;
         border-radius: 10px;
         margin: 8px;
     }
@@ -11,13 +12,13 @@ window.quick_settings {
     >.inner {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        background: $primary;
+        background: $color5;
         padding: 0.75rem 3rem;
         margin: 0;
 
         * { 
             transition: all 0.2s ease-in-out;
-            color: $onPrimary;
+            color: $color0;
         }
     }
 
@@ -28,11 +29,11 @@ window.quick_settings {
 
 window.qs_bluetooth {
     >.inner {
-        background: $primary;
+        background: $color5;
         padding: 0.75rem 3rem;
         border-radius: 10px;
     
-        * { color: $onPrimary; }
+        * { color: $color0; }
     }
 
     .device {
@@ -46,24 +47,24 @@ window.qs_bluetooth {
 
 window.quick_settings button, window.qs_bluetooth button {
     transition: all 0.2s ease-in-out;
-    background: $primary;
+    background: $color5;
-    border: 2px solid $onPrimary;
+    border: 2px solid $color0;
     margin: 5px;
 
     &:hover {
-        background: $onPrimary;
+        background: $color0;
 
         * {
-            color: $primary;
+            color: $color5;
         }
     }
 
     &.active {
-        background: $onPrimary;
+        background: $color0;
-        border: 0.5px solid $primary;
+        border: 0.5px solid $color5;
 
         * {
-            color: $primary;
+            color: $color5;
         }
     }
 }

styles/style.scss

@@ -8,12 +8,16 @@
     font-family: $font-family;
 }
 
-popover>contents, calendar {
+separator {
-    background: $onPrimaryContainer;
+    background: $color0;
 }
 
-button:hover {
+popover>contents, calendar {
-    background: $primary;
+    background: $color5;
+}
+
+button {
+    background: transparent;
 }
 
 image {

widget/bar/bar.tsx

@@ -1,49 +1,13 @@
 import { App, Astal, Gdk, Gtk } from "astal/gtk4"
-import { bind, Binding } from "astal"
+import { Binding } from "astal"
 
-import PowerProfiles from "gi://AstalPowerProfiles";
 import Battery from "gi://AstalBattery";
 
+import { BatteryInfo } from "./components/battery";
 import DateTime from "@lib/widgets/datetime";
 import Workspace from "./workspace";
 import TrayView from "./tray";
 
-type Substitution = { charging?: string, idle?: string }
-
-const getBatteryIcon = (percentage: number, charging: Binding<boolean>) => {
-    const levels = Array.from({ length: 10 }, (_, i) => (i + 1) * 10);
-    const level = levels.find((level) => percentage <= level)!;
-
-    const substitutions: Record<number, Substitution> = {
-        100: { charging: "battery-level-100-charged-symbolic" }
-    };
-
-    return charging.as(c => c
-        ? substitutions[level]?.charging || `battery-level-${level}-charging-symbolic`
-        : substitutions[level]?.idle || `battery-level-${level}-symbolic`
-    );
-};
-
-const BatteryInfo = ({ battery }: { battery: Battery.Device }) => {
-    const percentage = bind(battery, "percentage").as(p => Math.floor(p * 100));
-    const charging = bind(battery, "charging");
-    const power = PowerProfiles.get_default();
-
-    return (
-        <box>
-            {percentage.as(p => <button
-                hasFrame={false}
-                tooltipText={bind(power, "active_profile")}
-            >
-                <box>
-                    <label>{percentage.as(p => `${p}%`)}</label>
-                    <image iconName={getBatteryIcon(p, charging)} />
-                </box>
-            </button>)}
-        </box>
-    );
-};
-
 export default function Bar(monitor_id: number) {
     const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
     const CENTER = Gtk.Align.CENTER;

widget/bar/battery_info.tsx

@@ -0,0 +1,53 @@
+import { App, Astal, Gtk } from "astal/gtk4";
+import { bind } from "astal";
+
+import { getBatteryIcon } from "@/lib/icons";
+import { hideWindow } from "@lib/utils";
+
+import PowerProfiles from "gi://AstalPowerProfiles?version=0.1";
+import Battery from "gi://AstalBattery?version=0.1";
+import Hyprland from "gi://AstalHyprland";
+
+export default function BatteryInfo(_monitor_id: number) {
+    const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
+    const CENTER = Gtk.Align.CENTER;
+
+    const hypr = Hyprland.get_default();
+    const power = PowerProfiles.get_default();
+    const battery = Battery.get_default();
+
+    const percentage = bind(battery, "percentage").as(p => Math.floor(p * 100));
+    const charging = bind(battery, "charging");
+
+    return <window
+        visible={false}
+        name={"battery_info"}
+        monitor={bind(hypr, "focusedMonitor").as(monitor => monitor.id)}
+        cssClasses={["battery_info"]}
+        keymode={Astal.Keymode.EXCLUSIVE}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        anchor={BOTTOM | LEFT | RIGHT}
+        onKeyPressed={hideWindow}
+        application={App}>
+        <box halign={CENTER} cssClasses={["inner"]} spacing={10}>
+            {percentage.as(p => <>
+                <image
+                    iconSize={Gtk.IconSize.LARGE}
+                    iconName={getBatteryIcon(p, charging)}
+                />
+
+                <label cssClasses={["percentage"]}>{percentage.as(p => `${p}%`)}</label>
+            </>)}
+
+            {power.get_profiles().map(profile => <button
+                label={profile.profile}
+                cssClasses={bind(power, "active_profile").as(active =>
+                    active === profile.profile
+                        ? ["active"]
+                        : []
+                )}
+                onClicked={() => power.set_active_profile(profile.profile)}
+            />)}
+        </box>
+    </window>
+}

widget/bar/components/battery.tsx

@@ -0,0 +1,26 @@
+import { App, Gdk } from "astal/gtk4";
+import { bind } from "astal";
+
+import Battery from "gi://AstalBattery";
+
+import { getBatteryIcon } from "@/lib/icons";
+import { openOnButton } from "@/lib/utils";
+
+export function BatteryInfo({ battery }: { battery: Battery.Device }) {
+    const percentage = bind(battery, "percentage").as(p => Math.floor(p * 100));
+    const charging = bind(battery, "charging");
+
+    return (
+        <box>
+            {percentage.as(p => <button hasFrame={false}>
+                <box onButtonPressed={(_self, event) =>
+                    openOnButton(event, Gdk.BUTTON_PRIMARY)
+                        (() => App.toggle_window("battery_info"))
+                }>
+                    <label>{percentage.as(p => `${p}%`)}</label>
+                    <image iconName={getBatteryIcon(p, charging)} />
+                </box>
+            </button>)}
+        </box>
+    );
+};

widget/bar/network/button.tsx

@@ -1,43 +0,0 @@
-import { bind, Variable } from "astal";
-
-import Network from "gi://AstalNetwork";
-
-export default function NetworkButton() {
-    const network = Network.get_default();
-
-    const state = Variable.derive(
-        [bind(network, "primary"), bind(network, "wifi"), bind(network, "wired")],
-        (primary, wifi, wired) => {
-            switch (primary) {
-                case Network.Primary.WIFI:
-                    return {
-                        icon: wifi.iconName,
-                        label: wifi.ssid,
-                        tooltip: `Connected to ${wifi.ssid}`,
-                    };
-                case Network.Primary.WIRED:
-                    return {
-                        icon: wired.iconName,
-                        label: "Wired",
-                        tooltip: {
-                            [Network.Internet.CONNECTED]: `Connected to Ethernet`,
-                            [Network.Internet.CONNECTING]: `Connecting to Ethernet...`,
-                            [Network.Internet.DISCONNECTED]: `Connected to Ethernet (no internet!)`,
-                        }[wired.internet],
-                    };
-                default:
-                    return {
-                        icon: "network-disconnected-symbolic",
-                        label: "Disconnected",
-                        tooltip: "No connection",
-                    };
-            }
-        }
-    )
-
-    const binding = bind(state);
-    return <box tooltipText={binding.as((t) => t.tooltip)} spacing={5}>
-        <image iconName={binding.as((i) => i.icon)} />
-        <label label={binding.as((l) => l.label)} />
-    </box>
-}

widget/quick_settings/bluetooth.tsx

@@ -46,9 +46,7 @@ export default function BluetoothWindow(_monitor_id: number) {
 
     const bt = Bluetooth.get_default();
     const hypr = Hyprland.get_default();
-
     const devices = bind(bt, "devices");
-    const connectedDevice = devices.as(devices => devices?.find(device => device.connected));
 
     return <window
         name={"qs_bluetooth"}