feat: add power bar to login card

2 files changed, 71 insertions, 0 deletions

diff --git a/theme/components/LoginCard.qml b/theme/components/LoginCard.qml
index b12eecb..e980dfd 100644
--- a/theme/components/LoginCard.qml
+++ b/theme/components/LoginCard.qml
@@ -215,6 +215,10 @@ Item {
             }
         }
 
+        PowerBar {
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+
         Text {
             width: parent.width
             horizontalAlignment: Text.AlignHCenter
diff --git a/theme/components/PowerBar.qml b/theme/components/PowerBar.qml
new file mode 100644
index 0000000..9db65e7
--- /dev/null
+++ b/theme/components/PowerBar.qml
@@ -0,0 +1,67 @@
+// SPDX-License-Identifier: GPL-2.0-only
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// Shutdown, restart, sleep and hibernate. Each button is disabled when SDDM
+// reports the action is unavailable.
+
+import QtQuick
+import QtQuick.Controls.Basic
+import QtQuick.Effects
+
+Row {
+    id: bar
+    spacing: 8
+
+    readonly property var actions: [
+        { icon: "../icons/power.svg", label: "Shut down", enabled: sddm.canPowerOff, run: function() { sddm.powerOff() } },
+        { icon: "../icons/reboot.svg", label: "Restart", enabled: sddm.canReboot, run: function() { sddm.reboot() } },
+        { icon: "../icons/suspend.svg", label: "Sleep", enabled: sddm.canSuspend, run: function() { sddm.suspend() } },
+        { icon: "../icons/hibernate.svg", label: "Hibernate", enabled: sddm.canHibernate, run: function() { sddm.hibernate() } }
+    ]
+
+    Repeater {
+        model: bar.actions
+        delegate: Item {
+            width: 44
+            height: 44
+            opacity: modelData.enabled ? 1 : 0.35
+
+            Rectangle {
+                anchors.fill: parent
+                radius: 8
+                color: config.stringValue("surface0")
+                opacity: mouse.containsMouse && modelData.enabled ? 1 : 0
+            }
+
+            Image {
+                id: icon
+                anchors.centerIn: parent
+                width: 22
+                height: 22
+                source: modelData.icon
+                visible: false
+            }
+
+            MultiEffect {
+                anchors.fill: icon
+                source: icon
+                colorization: 1.0
+                colorizationColor: mouse.containsMouse && modelData.enabled
+                    ? config.stringValue("accent")
+                    : config.stringValue("subtext0")
+            }
+
+            MouseArea {
+                id: mouse
+                anchors.fill: parent
+                hoverEnabled: true
+                enabled: modelData.enabled
+                onClicked: modelData.run()
+            }
+
+            ToolTip.visible: mouse.containsMouse && modelData.enabled
+            ToolTip.text: modelData.label
+            ToolTip.delay: 400
+        }
+    }
+}