Update astal widgets

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

hosts/common/configs/system/upower/default.nix

@@ -0,0 +1,8 @@
+{ ... }:
+{
+  services.upower = {
+    enable = true;
+    allowRiskyCriticalPowerAction = true;
+    criticalPowerAction = "Ignore";
+  };
+}

hosts/common/configs/user/gui/astal/config/app.ts

@@ -1,8 +1,10 @@
 import { App } from "astal/gtk3";
-import Bar from "./widget/Bar";
 import { monitorFile } from "astal/file";
 import { exec } from "astal/process";
 import GLib from "gi://GLib";
+import Left from "./widget/Left";
+import Center from "./widget/Center";
+import Right from "./widget/Right";
 
 const HOME = GLib.getenv("HOME");
 const css = `${HOME}/.config/astal/theme.css`;
@@ -18,6 +20,10 @@ exec(`sassc ${scss} ${css}`);
 App.start({
   css,
   main() {
-    App.get_monitors().map(Bar);
+    App.get_monitors().map((monitor) => {
+      Left(monitor);
+      Center(monitor);
+      Right(monitor);
+    });
   },
 });

hosts/common/configs/user/gui/astal/config/lib.ts

@@ -1,3 +1,16 @@
+import { Gdk } from "astal/gtk3";
+import Hyprland from "gi://AstalHyprland";
+
 export const range = (length: number, start = 1) => {
   return Array.from({ length }, (n, i) => i + start);
 };
+
+export const getHyprlandMonitor = (gdkmonitor: Gdk.Monitor) => {
+  const hyprland = Hyprland.get_default()
+  const display = Gdk.Display.get_default()!;
+  const screen = display.get_default_screen();
+  for (let i = 0; i < display.get_n_monitors(); ++i) {
+    if (gdkmonitor === display.get_monitor(i))
+      return hyprland.get_monitor_by_name(screen.get_monitor_plug_name(i)!);
+  }
+}

hosts/common/configs/user/gui/astal/config/widget/Bar.tsx

@@ -1,43 +0,0 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk3";
-import Launcher from "./components/Launcher";
-import Workspace from "./components/Workspaces";
-import Date from "./components/Date";
-import Systray from "./components/Tray";
-import Hyprland from "gi://AstalHyprland";
-
-const anchor =
-  Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
-
-const hyprland = Hyprland.get_default();
-
-function getHyprlandMonitor(gdkmonitor: Gdk.Monitor) {
-  const display = Gdk.Display.get_default()!;
-  const screen = display.get_default_screen();
-  for (let i = 0; i < display.get_n_monitors(); ++i) {
-    if (gdkmonitor === display.get_monitor(i))
-      return hyprland.get_monitor_by_name(screen.get_monitor_plug_name(i)!);
-  }
-}
-
-export default (monitor: Gdk.Monitor) => (
-  <window
-    className="bar"
-    gdkmonitor={monitor}
-    exclusivity={Astal.Exclusivity.EXCLUSIVE}
-    anchor={anchor}
-    application={App}
-  >
-    <centerbox className="widgets">
-      <box hexpand halign={Gtk.Align.START}>
-        <Launcher />
-        <Workspace monitor={getHyprlandMonitor(monitor)!} />
-      </box>
-      <box hexpand halign={Gtk.Align.CENTER}>
-        <Date />
-      </box>
-      <box hexpand halign={Gtk.Align.END}>
-        <Systray />
-      </box>
-    </centerbox>
-  </window>
-);

hosts/common/configs/user/gui/astal/config/widget/Center.tsx

@@ -0,0 +1,19 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
+import Date from "./components/Date";
+import Hidden from "./components/Hidden";
+
+export default (monitor: Gdk.Monitor) => (
+  <window
+    className="root"
+    gdkmonitor={monitor}
+    exclusivity={Astal.Exclusivity.IGNORE}
+    anchor={Astal.WindowAnchor.TOP}
+    application={App}
+  >
+    <Hidden>
+      <box className="widgets" hexpand halign={Gtk.Align.CENTER}>
+        <Date />
+      </box>
+    </Hidden>
+  </window>
+);

hosts/common/configs/user/gui/astal/config/widget/Left.tsx

@@ -0,0 +1,22 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
+import Launcher from "./components/Launcher";
+import Workspace from "./components/Workspaces";
+import Hidden from "./components/Hidden";
+import { getHyprlandMonitor } from "../lib";
+
+export default (monitor: Gdk.Monitor) => (
+  <window
+    className="root"
+    gdkmonitor={monitor}
+    exclusivity={Astal.Exclusivity.IGNORE}
+    anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT}
+    application={App}
+  >
+    <Hidden>
+      <box className="widgets" hexpand halign={Gtk.Align.START}>
+        <Launcher />
+        <Workspace monitor={getHyprlandMonitor(monitor)!} />
+      </box>
+    </Hidden>
+  </window >
+);

hosts/common/configs/user/gui/astal/config/widget/Right.tsx

@@ -0,0 +1,21 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
+import Systray from "./components/Tray";
+import Hidden from "./components/Hidden";
+import Battery from "./components/Battery";
+
+export default (monitor: Gdk.Monitor) => (
+  <window
+    className="root"
+    gdkmonitor={monitor}
+    exclusivity={Astal.Exclusivity.IGNORE}
+    anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT}
+    application={App}
+  >
+    <Hidden>
+      <box className="widgets" hexpand halign={Gtk.Align.END}>
+        <Systray />
+        <Battery />
+      </box>
+    </Hidden>
+  </window>
+);

hosts/common/configs/user/gui/astal/config/widget/components/Battery.tsx

@@ -0,0 +1,30 @@
+import { bind, Variable } from "astal";
+import AstalBattery from "gi://AstalBattery";
+
+const battery = AstalBattery.get_default();
+
+const formatTime = (seconds: number) => seconds > 0
+  ? `${String(Math.floor(seconds / 3600)).padStart(2, "0")}:${String(Math.floor((seconds % 3600) / 60)).padStart(2, "0")}`
+  : "--:--";
+
+export default () => {
+  const percentage = bind(battery, "percentage").as((p) => Math.round(p * 100) + "%");
+  const charging = bind(battery, "charging");
+  const timeToFull = bind(battery, "timeToFull");
+  const timeToEmpty = bind(battery, "timeToEmpty");
+
+  const time = Variable.derive([charging, timeToFull, timeToEmpty], (charging, full, empty) =>
+    formatTime(charging ? full : empty)
+  );
+
+  const label = Variable.derive([percentage, charging, time], (percentage, charging, time) => {
+    const arrow = charging ? "▲" : "▼";
+    return `${percentage} (${time}) ${arrow}`;
+  });
+
+  return (
+    <button className="battery">
+      <label className="label" label={bind(label)} />
+    </button>
+  );
+};

hosts/common/configs/user/gui/astal/config/widget/components/Date.tsx

@@ -1,13 +1,15 @@
-import { Variable } from "astal/variable";
+import { bind, Variable } from "astal";
 import { GLib } from "astal";
 
-const time = Variable<string>("").poll(
+export default () => {
-  1000,
+  const time = Variable(GLib.DateTime.new_now_local().format("%H:%M - %A, %d %B %Y")!).poll(
-  () => GLib.DateTime.new_now_local().format("%H:%M - %A, %d %B %Y")!,
+    1000,
-);
+    () => GLib.DateTime.new_now_local().format("%H:%M - %A, %d %B %Y")!,
+  );
 
-export default () => (
+  return (
-  <button className="date">
+    <button className="date">
-    <label className="label" onDestroy={() => time.drop()} label={time()} />
+      <label className="label" onDestroy={() => time.drop()} label={bind(time)} />
-  </button>
+    </button>
-);
+  );
+}

hosts/common/configs/user/gui/astal/config/widget/components/Hidden.tsx

@@ -0,0 +1,32 @@
+import { Gtk } from "astal/gtk3";
+import { Variable, bind, timeout } from "astal";
+
+export default function Hidden({
+  child,
+  children,
+  orientation = Gtk.Orientation.VERTICAL,
+  transitionType = Gtk.RevealerTransitionType.SLIDE_DOWN,
+}: {
+  child?: JSX.Element;
+  children?: JSX.Element | JSX.Element[];
+  orientation?: Gtk.Orientation;
+  transitionType?: Gtk.RevealerTransitionType;
+}) {
+  const show = Variable(true);
+  const contents = child ?? children;
+
+  return (
+    <eventbox
+      clickThrough
+      onHover={() => show.set(true)}
+      onHoverLost={() => show.set(false)}
+    >
+      <box orientation={orientation} >
+        <revealer setup={self => timeout(2000, () => self.revealChild = false)} revealChild={bind(show)} transitionType={transitionType}>
+          {Array.isArray(contents) ? (<>{contents}</>) : (contents)}
+        </revealer>
+        <box clickThrough className="trigger-guard" />
+      </box>
+    </eventbox>
+  );
+}

hosts/common/configs/user/gui/astal/default.nix

@@ -25,6 +25,7 @@ in
       extraPackages = with pkgs; [
         inputs.ags.packages.${system}.hyprland
         inputs.ags.packages.${system}.tray
+        inputs.ags.packages.${system}.battery
         sassc
         hyprland
         nixos-icons

hosts/common/configs/user/gui/astal/theme.sass

@@ -1,5 +1,5 @@
-.bar
+.root
-  background-color: {{colors.surface.default.hex}}
+  background-color: transparent
 
   @mixin interactive
     min-height: {{custom.font_size}}pt
@@ -16,8 +16,16 @@
     &:active
       background-color: {{colors.surface_container_highest.default.hex}}
 
+  .trigger-guard
+    min-height: 5pt
+    background-color: transparent
+
   .widgets
-    padding: 2pt
+    margin: 5pt
+    padding: 5pt
+    background-color: {{colors.surface.default.hex}}
+    border-radius: {{custom.font_size}}pt
+    border: 2px solid {{colors.outline.default.hex}}
 
     .launcher
       @include interactive
@@ -71,3 +79,6 @@
           font-size: {{custom.font_size}}pt
           padding: 0 2pt
           color: {{colors.on_surface.default.hex}}
+
+    .battery
+      @include interactive

hosts/eirene/default.nix

@@ -42,6 +42,7 @@
     ../common/configs/system/tlp
     ../common/configs/system/tmux
     ../common/configs/system/tree
+    ../common/configs/system/upower
     ../common/configs/system/users
     ../common/configs/system/zsh
 

hosts/elara/default.nix

@@ -45,6 +45,7 @@
     ../common/configs/system/tlp
     ../common/configs/system/tmux
     ../common/configs/system/tree
+    ../common/configs/system/upower
     ../common/configs/system/users
     ../common/configs/system/zsh
 

hosts/himalia/default.nix

@@ -41,6 +41,7 @@
     ../common/configs/system/tlp
     ../common/configs/system/tmux
     ../common/configs/system/tree
+    ../common/configs/system/upower
     ../common/configs/system/users
     ../common/configs/system/zsh
 

hosts/himalia/users/nick/default.nix

@@ -45,8 +45,7 @@ in
     (import ../../../common/configs/user/console/yt-dlp { inherit user home; })
     (import ../../../common/configs/user/console/zsh { inherit user home; })
 
-    # TODO
+    (import ../../../common/configs/user/gui/astal { inherit user home; })
-    # (import ../../../common/configs/user/gui/astal { inherit user home; })
     (import ../../../common/configs/user/gui/bluetooth { inherit user home; })
     (import ../../../common/configs/user/gui/brightnessctl { inherit user home; })
     (import ../../../common/configs/user/gui/btop { inherit user home; })