Switch power panel buttons to icon tiles

Labels are gone; each action shows only an icon with a tooltip
on hover, keeping the panel narrow. A user avatar at the bottom
opens User Accounts on click. The shadow is on a backing
Rectangle rather than via layer.enabled, which would rasterize
the panel and blur icons at non-integer scale.

containments/homescreens/folio/qml/main.qml

@@ -19,6 +19,9 @@ import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
 
 import org.kde.layershell 1.0 as LayerShell
 import org.kde.plasma.private.sessions 2.0
+import org.kde.coreaddons as KCoreAddons
+import org.kde.kcmutils as KCM
+import org.kde.kirigamiaddons.components as KirigamiAddonsComponents
 
 import plasma.applet.org.kde.plasma.mobile.homescreen.folio as Folio
 
@@ -349,19 +352,17 @@ ContainmentItem {
             }
         }
 
+        // Drop shadow rendered separately so powerPanel itself needs no layer FBO,
+        // which would rasterize and blur the icons inside.
         Rectangle {
-            id: powerPanel
+            id: powerPanelShadow
-
+            width: powerPanel.width
-            readonly property real buttonHeight: Kirigami.Units.gridUnit * 5
+            height: powerPanel.height
-
+            x: powerPanel.x
-            width: Kirigami.Units.gridUnit * 8
+            y: powerPanel.y
-            height: overlayDrawer.popupHeight
+            radius: powerPanel.radius
-            x: overlayDrawer.x + overlayDrawer.width + Kirigami.Units.smallSpacing
+            color: powerPanel.color
-            y: overlayDrawer.y
+            opacity: powerPanel.opacity
-            opacity: overlayDrawer.opacity
-            radius: Kirigami.Units.cornerRadius
-            color: Kirigami.Theme.backgroundColor
-
             layer.enabled: true
             layer.effect: DropShadow {
                 transparentBorder: true
@@ -371,51 +372,63 @@ ContainmentItem {
                 samples: 25
                 color: Qt.rgba(0, 0, 0, 0.4)
             }
+        }
+
+        Rectangle {
+            id: powerPanel
+
+            // Width: just enough for one icon button + side margins
+            readonly property real tileSize: Kirigami.Units.iconSizes.medium + 2 * Kirigami.Units.largeSpacing
+
+            width: tileSize
+            height: overlayDrawer.popupHeight
+            x: overlayDrawer.x + overlayDrawer.width + Kirigami.Units.smallSpacing
+            y: overlayDrawer.y
+            opacity: overlayDrawer.opacity
+            radius: Kirigami.Units.cornerRadius
+            color: Kirigami.Theme.backgroundColor
 
             MouseArea {
                 anchors.fill: parent
             }
 
+            KCoreAddons.KUser {
+                id: kuser
+            }
+
             SessionManagement {
                 id: powerSession
             }
 
+            // Power buttons stacked at top — icon only, tooltip on hover
             Column {
-                anchors {
+                id: powerColumn
-                    top: parent.top
+                anchors.top: parent.top
-                    left: parent.left
+                anchors.left: parent.left
-                    right: parent.right
+                anchors.right: parent.right
-                    margins: Kirigami.Units.smallSpacing
+                anchors.margins: Kirigami.Units.smallSpacing
-                }
                 spacing: Kirigami.Units.smallSpacing
 
                 Rectangle {
                     width: parent.width
-                    height: powerPanel.buttonHeight
+                    height: width
                     radius: Kirigami.Units.cornerRadius
                     color: lockArea.containsPress
                         ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.2)
                         : lockArea.containsMouse
                             ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.1)
                             : "transparent"
-
+                    Kirigami.Icon {
-                    Column {
                         anchors.centerIn: parent
-                        spacing: Kirigami.Units.smallSpacing / 2
+                        width: Kirigami.Units.iconSizes.medium
-                        Kirigami.Icon {
+                        height: width
-                            anchors.horizontalCenter: parent.horizontalCenter
+                        source: "system-lock-screen"
-                            width: Kirigami.Units.iconSizes.smallMedium
+                        active: lockArea.containsMouse
-                            height: Kirigami.Units.iconSizes.smallMedium
+                    }
-                            source: "system-lock-screen"
+                    PlasmaComponents.ToolTip {
-                            active: lockArea.containsMouse
+                        text: i18n("Lock Screen")
-                        }
+                        visible: lockArea.containsMouse
-                        PlasmaComponents.Label {
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            font: Kirigami.Theme.smallFont
-                            text: i18n("Lock Screen")
-                        }
                     }
-
                     MouseArea {
                         id: lockArea
                         anchors.fill: parent
@@ -430,31 +443,24 @@ ContainmentItem {
 
                 Rectangle {
                     width: parent.width
-                    height: powerPanel.buttonHeight
+                    height: width
                     radius: Kirigami.Units.cornerRadius
                     color: rebootArea.containsPress
                         ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.2)
                         : rebootArea.containsMouse
                             ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.1)
                             : "transparent"
-
+                    Kirigami.Icon {
-                    Column {
                         anchors.centerIn: parent
-                        spacing: Kirigami.Units.smallSpacing / 2
+                        width: Kirigami.Units.iconSizes.medium
-                        Kirigami.Icon {
+                        height: width
-                            anchors.horizontalCenter: parent.horizontalCenter
+                        source: "system-reboot"
-                            width: Kirigami.Units.iconSizes.smallMedium
+                        active: rebootArea.containsMouse
-                            height: Kirigami.Units.iconSizes.smallMedium
+                    }
-                            source: "system-reboot"
+                    PlasmaComponents.ToolTip {
-                            active: rebootArea.containsMouse
+                        text: i18n("Restart")
-                        }
+                        visible: rebootArea.containsMouse
-                        PlasmaComponents.Label {
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            font: Kirigami.Theme.smallFont
-                            text: i18n("Restart")
-                        }
                     }
-
                     MouseArea {
                         id: rebootArea
                         anchors.fill: parent
@@ -469,31 +475,24 @@ ContainmentItem {
 
                 Rectangle {
                     width: parent.width
-                    height: powerPanel.buttonHeight
+                    height: width
                     radius: Kirigami.Units.cornerRadius
                     color: shutdownArea.containsPress
                         ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.2)
                         : shutdownArea.containsMouse
                             ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.1)
                             : "transparent"
-
+                    Kirigami.Icon {
-                    Column {
                         anchors.centerIn: parent
-                        spacing: Kirigami.Units.smallSpacing / 2
+                        width: Kirigami.Units.iconSizes.medium
-                        Kirigami.Icon {
+                        height: width
-                            anchors.horizontalCenter: parent.horizontalCenter
+                        source: "system-shutdown"
-                            width: Kirigami.Units.iconSizes.smallMedium
+                        active: shutdownArea.containsMouse
-                            height: Kirigami.Units.iconSizes.smallMedium
+                    }
-                            source: "system-shutdown"
+                    PlasmaComponents.ToolTip {
-                            active: shutdownArea.containsMouse
+                        text: i18n("Shut Down")
-                        }
+                        visible: shutdownArea.containsMouse
-                        PlasmaComponents.Label {
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            font: Kirigami.Theme.smallFont
-                            text: i18n("Shut Down")
-                        }
                     }
-
                     MouseArea {
                         id: shutdownArea
                         anchors.fill: parent
@@ -506,6 +505,56 @@ ContainmentItem {
                     }
                 }
             }
+
+            // Separator above user avatar
+            Rectangle {
+                anchors.bottom: userSection.top
+                anchors.bottomMargin: Kirigami.Units.smallSpacing
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.leftMargin: Kirigami.Units.smallSpacing
+                anchors.rightMargin: Kirigami.Units.smallSpacing
+                height: 1
+                color: Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.15)
+            }
+
+            // User avatar anchored to bottom — tooltip shows name, click opens user settings
+            Rectangle {
+                id: userSection
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: Kirigami.Units.smallSpacing
+                height: width
+                radius: Kirigami.Units.cornerRadius
+                color: userArea.containsPress
+                    ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.2)
+                    : userArea.containsMouse
+                        ? Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, 0.1)
+                        : "transparent"
+
+                KirigamiAddonsComponents.Avatar {
+                    anchors.centerIn: parent
+                    width: Kirigami.Units.iconSizes.medium
+                    height: width
+                    source: kuser.faceIconUrl
+                    name: kuser.fullName || kuser.loginName
+                }
+                PlasmaComponents.ToolTip {
+                    text: kuser.fullName || kuser.loginName
+                    visible: userArea.containsMouse
+                }
+                MouseArea {
+                    id: userArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        KCM.KCMLauncher.openSystemSettings("kcm_users")
+                        folio.HomeScreenState.closeAppDrawer()
+                    }
+                }
+            }
         }
     }