Add popup header with avatar and system actions

modules/home/ags/app/style.scss

@@ -220,8 +220,18 @@ $module-bg: transparentize($base02, 0.4);
     color: $base05;
 }
 
-.power-header {
+.header {
-    margin-bottom: 10px;
+    margin-bottom: 6px;
+
+    .avatar {
+        padding: 7px;
+        border-radius: 10px;
+        background: transparentize($base02, 0.4);
+    }
+
+    .username {
+        font-weight: bold;
+    }
 }
 
 .power-action {
@@ -372,9 +382,7 @@ $module-bg: transparentize($base02, 0.4);
 }
 
 .battery-section {
-    margin-top: 10px;
+    margin-bottom: 8px;
-    border-top: 1px solid $base02;
-    padding-top: 8px;
 
     icon {
         font-size: 16px;

modules/home/ags/app/widget/QuickSettings.tsx

@@ -1,4 +1,5 @@
 import Gtk from "gi://Gtk?version=3.0"
+import GLib from "gi://GLib"
 import AstalWp from "gi://AstalWp"
 import Notifd from "gi://AstalNotifd"
 import { execAsync, Variable, bind } from "astal"
@@ -33,14 +34,37 @@ const micIcon = mic
       )
     : null
 
-const actions = [
+const user = GLib.get_user_name()
+
+const actions: { icon: string; cmd?: string[] }[] = [
+    { icon: "emblem-system-symbolic" },
     { icon: "system-lock-screen-symbolic", cmd: ["hyprlock"] },
     { icon: "weather-clear-night-symbolic", cmd: ["systemctl", "suspend"] },
-    { icon: "system-log-out-symbolic", cmd: ["hyprctl", "dispatch", "exit"] },
     { icon: "system-reboot-symbolic", cmd: ["systemctl", "reboot"] },
+    { icon: "system-log-out-symbolic", cmd: ["hyprctl", "dispatch", "exit"] },
     { icon: "system-shutdown-symbolic", cmd: ["systemctl", "poweroff"] },
 ]
 
+function Header() {
+    return (
+        <box className="header" spacing={8}>
+            <box className="avatar">
+                <icon icon="nix-snowflake-white" pixelSize={16} />
+            </box>
+            <label className="username" label={user} valign={Gtk.Align.CENTER} />
+            <box hexpand />
+            {actions.map((action) => (
+                <button
+                    className="power-action"
+                    onClicked={() => action.cmd && execAsync(action.cmd)}
+                >
+                    <icon icon={action.icon} />
+                </button>
+            ))}
+        </box>
+    )
+}
+
 export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
     const open = Variable(false)
     const notifOpen = Variable(false)
@@ -86,16 +110,8 @@ export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
 
     const popup = (
         <Dropdown gdkmonitor={gdkmonitor} target={button} open={open} width={280}>
-            <box className="power-header" homogeneous>
+            <Header />
-                {actions.map((action) => (
+            <BatterySection />
-                    <button
-                        className="power-action"
-                        onClicked={() => execAsync(action.cmd)}
-                    >
-                        <icon icon={action.icon} />
-                    </button>
-                ))}
-            </box>
             <box className="qs-row">
                 <button
                     className="qs-toggle"
@@ -129,7 +145,6 @@ export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
             <BrightnessRow />
             <WifiSection open={open} />
             <BluetoothSection open={open} />
-            <BatterySection />
             <box className="notif-section" vertical spacing={6}>
                 <box className="notif-header-row" spacing={6}>
                     <button