waffles: power menu and user account menu

2025-12-01 13:27:01 +01:00
parent 61b5cf8cb6
commit 8d2c8bd38e
13 changed files with 611 additions and 61 deletions
@@ -0,0 +1,17 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_525_6" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="4" width="56" height="56">
+<rect x="4.5" y="4.5" width="26.5" height="26.5" fill="#D9D9D9"/>
+<rect x="4.5" y="33" width="26.5" height="26.5" fill="#D9D9D9"/>
+<rect x="33" y="4.5" width="26.5" height="26.5" fill="#D9D9D9"/>
+<rect x="33" y="33" width="26.5" height="26.5" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_525_6)">
+<rect width="64" height="64" fill="url(#paint0_linear_525_6)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_525_6" x1="0" y1="0" x2="63.6279" y2="64" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5AE8C0"/>
+<stop offset="0.99563" stop-color="#119979"/>
+</linearGradient>
+</defs>
+</svg>
@@ -1,24 +1,120 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6.2C4 4.98497 4.98497 4 6.2 4H28.2C29.415 4 30.4 4.98497 30.4 6.2V28.2C30.4 29.415 29.415 30.4 28.2 30.4H6.2C4.98497 30.4 4 29.415 4 28.2V6.2Z" fill="url(#paint0_radial_520_19)"/>
-<path d="M32.6 6.2C32.6 4.98497 33.585 4 34.8 4H56.8C58.015 4 59 4.98497 59 6.2V28.2C59 29.415 58.015 30.4 56.8 30.4H34.8C33.585 30.4 32.6 29.415 32.6 28.2V6.2Z" fill="url(#paint1_radial_520_19)"/>
-<path d="M32.6 34.8C32.6 33.585 33.585 32.6 34.8 32.6H56.8C58.015 32.6 59 33.585 59 34.8V56.8C59 58.015 58.015 59 56.8 59H34.8C33.585 59 32.6 58.015 32.6 56.8V34.8Z" fill="url(#paint2_radial_520_19)"/>
-<path d="M4 34.8C4 33.585 4.98497 32.6 6.2 32.6H28.2C29.415 32.6 30.4 33.585 30.4 34.8V56.8C30.4 58.015 29.415 59 28.2 59H6.2C4.98497 59 4 58.015 4 56.8V34.8Z" fill="url(#paint3_radial_520_19)"/>
-<defs>
-<radialGradient id="paint0_radial_520_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(45) scale(77.7817)">
-<stop stop-color="#0B9BFE"/>
-<stop offset="1" stop-color="#0B9BFE"/>
-</radialGradient>
-<radialGradient id="paint1_radial_520_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(45) scale(77.7817)">
-<stop stop-color="#0B9BFE"/>
-<stop offset="1" stop-color="#0B9BFE"/>
-</radialGradient>
-<radialGradient id="paint2_radial_520_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(45) scale(77.7817)">
-<stop stop-color="#0B9BFE"/>
-<stop offset="1" stop-color="#0B9BFE"/>
-</radialGradient>
-<radialGradient id="paint3_radial_520_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(45) scale(77.7817)">
-<stop stop-color="#0B9BFE"/>
-<stop offset="1" stop-color="#0B9BFE"/>
-</radialGradient>
-</defs>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64"
+   height="64"
+   viewBox="0 0 64 64"
+   fill="none"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="start-here-pressed.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="6.375"
+     inkscape:cx="32.156863"
+     inkscape:cy="28.862745"
+     inkscape:window-width="1164"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g11"
+     transform="translate(0.5,0.5)">
+    <path
+       d="M 4,6.2 C 4,4.98497 4.98497,4 6.2,4 h 22 c 1.215,0 2.2,0.98497 2.2,2.2 v 22 c 0,1.215 -0.985,2.2 -2.2,2.2 H 6.2 C 4.98497,30.4 4,29.415 4,28.2 Z"
+       fill="url(#paint0_radial_520_19)"
+       id="path1"
+       style="fill:url(#paint0_radial_520_19)" />
+    <path
+       d="M 32.6,6.2 C 32.6,4.98497 33.585,4 34.8,4 h 22 C 58.015,4 59,4.98497 59,6.2 v 22 c 0,1.215 -0.985,2.2 -2.2,2.2 h -22 c -1.215,0 -2.2,-0.985 -2.2,-2.2 z"
+       fill="url(#paint1_radial_520_19)"
+       id="path2"
+       style="fill:url(#paint1_radial_520_19)" />
+    <path
+       d="m 32.6,34.8 c 0,-1.215 0.985,-2.2 2.2,-2.2 h 22 c 1.215,0 2.2,0.985 2.2,2.2 v 22 c 0,1.215 -0.985,2.2 -2.2,2.2 h -22 c -1.215,0 -2.2,-0.985 -2.2,-2.2 z"
+       fill="url(#paint2_radial_520_19)"
+       id="path3"
+       style="fill:url(#paint2_radial_520_19)" />
+    <path
+       d="m 4,34.8 c 0,-1.215 0.98497,-2.2 2.2,-2.2 h 22 c 1.215,0 2.2,0.985 2.2,2.2 v 22 c 0,1.215 -0.985,2.2 -2.2,2.2 H 6.2 C 4.98497,59 4,58.015 4,56.8 Z"
+       fill="url(#paint3_radial_520_19)"
+       id="path4"
+       style="fill:url(#paint3_radial_520_19)" />
+  </g>
+  <defs
+     id="defs11">
+    <radialGradient
+       id="paint0_radial_520_19"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(54.999968,54.999968,-54.999968,54.999968,4,4)">
+      <stop
+         stop-color="#0B9BFE"
+         id="stop4" />
+      <stop
+         offset="1"
+         stop-color="#0B9BFE"
+         id="stop5" />
+    </radialGradient>
+    <radialGradient
+       id="paint1_radial_520_19"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(54.999968,54.999968,-54.999968,54.999968,4,4)">
+      <stop
+         stop-color="#0B9BFE"
+         id="stop6" />
+      <stop
+         offset="1"
+         stop-color="#0B9BFE"
+         id="stop7" />
+    </radialGradient>
+    <radialGradient
+       id="paint2_radial_520_19"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(54.999968,54.999968,-54.999968,54.999968,4,4)">
+      <stop
+         stop-color="#0B9BFE"
+         id="stop8" />
+      <stop
+         offset="1"
+         stop-color="#0B9BFE"
+         id="stop9" />
+    </radialGradient>
+    <radialGradient
+       id="paint3_radial_520_19"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(54.999968,54.999968,-54.999968,54.999968,4,4)">
+      <stop
+         stop-color="#0B9BFE"
+         id="stop10" />
+      <stop
+         offset="1"
+         stop-color="#0B9BFE"
+         id="stop11" />
+    </radialGradient>
+  </defs>
 </svg>
@@ -1,24 +1,120 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 6.2C4 4.98497 4.98497 4 6.2 4H28.2C29.415 4 30.4 4.98497 30.4 6.2V28.2C30.4 29.415 29.415 30.4 28.2 30.4H6.2C4.98497 30.4 4 29.415 4 28.2V6.2Z" fill="url(#paint0_radial_519_6)"/>
-<path d="M32.6 6.2C32.6 4.98497 33.585 4 34.8 4H56.8C58.015 4 59 4.98497 59 6.2V28.2C59 29.415 58.015 30.4 56.8 30.4H34.8C33.585 30.4 32.6 29.415 32.6 28.2V6.2Z" fill="url(#paint1_radial_519_6)"/>
-<path d="M32.6 34.8C32.6 33.585 33.585 32.6 34.8 32.6H56.8C58.015 32.6 59 33.585 59 34.8V56.8C59 58.015 58.015 59 56.8 59H34.8C33.585 59 32.6 58.015 32.6 56.8V34.8Z" fill="url(#paint2_radial_519_6)"/>
-<path d="M4 34.8C4 33.585 4.98497 32.6 6.2 32.6H28.2C29.415 32.6 30.4 33.585 30.4 34.8V56.8C30.4 58.015 29.415 59 28.2 59H6.2C4.98497 59 4 58.015 4 56.8V34.8Z" fill="url(#paint3_radial_519_6)"/>
-<defs>
-<radialGradient id="paint0_radial_519_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(45) scale(77.7817)">
-<stop stop-color="#81DFFF"/>
-<stop offset="1" stop-color="#0A99F9"/>
-</radialGradient>
-<radialGradient id="paint1_radial_519_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(45) scale(77.7817)">
-<stop stop-color="#81DFFF"/>
-<stop offset="1" stop-color="#0A99F9"/>
-</radialGradient>
-<radialGradient id="paint2_radial_519_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(45) scale(77.7817)">
-<stop stop-color="#81DFFF"/>
-<stop offset="1" stop-color="#0A99F9"/>
-</radialGradient>
-<radialGradient id="paint3_radial_519_6" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(4 4) rotate(45) scale(77.7817)">
-<stop stop-color="#81DFFF"/>
-<stop offset="1" stop-color="#0A99F9"/>
-</radialGradient>
-</defs>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="64"
+   height="64"
+   viewBox="0 0 64 64"
+   fill="none"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="start-here.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="4.5078057"
+     inkscape:cx="53.3519"
+     inkscape:cy="28.838865"
+     inkscape:window-width="1113"
+     inkscape:window-height="1020"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <g
+     id="g11"
+     transform="translate(0.5,0.5)">
+    <path
+       d="M 4,6.2 C 4,4.98497 4.98497,4 6.2,4 h 22 c 1.215,0 2.2,0.98497 2.2,2.2 v 22 c 0,1.215 -0.985,2.2 -2.2,2.2 H 6.2 C 4.98497,30.4 4,29.415 4,28.2 Z"
+       fill="url(#paint0_radial_519_6)"
+       id="path1"
+       style="fill:url(#paint0_radial_519_6)" />
+    <path
+       d="M 32.6,6.2 C 32.6,4.98497 33.585,4 34.8,4 h 22 C 58.015,4 59,4.98497 59,6.2 v 22 c 0,1.215 -0.985,2.2 -2.2,2.2 h -22 c -1.215,0 -2.2,-0.985 -2.2,-2.2 z"
+       fill="url(#paint1_radial_519_6)"
+       id="path2"
+       style="fill:url(#paint1_radial_519_6)" />
+    <path
+       d="m 32.6,34.8 c 0,-1.215 0.985,-2.2 2.2,-2.2 h 22 c 1.215,0 2.2,0.985 2.2,2.2 v 22 c 0,1.215 -0.985,2.2 -2.2,2.2 h -22 c -1.215,0 -2.2,-0.985 -2.2,-2.2 z"
+       fill="url(#paint2_radial_519_6)"
+       id="path3"
+       style="fill:url(#paint2_radial_519_6)" />
+    <path
+       d="m 4,34.8 c 0,-1.215 0.98497,-2.2 2.2,-2.2 h 22 c 1.215,0 2.2,0.985 2.2,2.2 v 22 c 0,1.215 -0.985,2.2 -2.2,2.2 H 6.2 C 4.98497,59 4,58.015 4,56.8 Z"
+       fill="url(#paint3_radial_519_6)"
+       id="path4"
+       style="fill:url(#paint3_radial_519_6)" />
+  </g>
+  <defs
+     id="defs11">
+    <radialGradient
+       id="paint0_radial_519_6"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(54.999968,54.999968,-54.999968,54.999968,4,4)">
+      <stop
+         stop-color="#81DFFF"
+         id="stop4" />
+      <stop
+         offset="1"
+         stop-color="#0A99F9"
+         id="stop5" />
+    </radialGradient>
+    <radialGradient
+       id="paint1_radial_519_6"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(54.999968,54.999968,-54.999968,54.999968,4,4)">
+      <stop
+         stop-color="#81DFFF"
+         id="stop6" />
+      <stop
+         offset="1"
+         stop-color="#0A99F9"
+         id="stop7" />
+    </radialGradient>
+    <radialGradient
+       id="paint2_radial_519_6"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(54.999968,54.999968,-54.999968,54.999968,4,4)">
+      <stop
+         stop-color="#81DFFF"
+         id="stop8" />
+      <stop
+         offset="1"
+         stop-color="#0A99F9"
+         id="stop9" />
+    </radialGradient>
+    <radialGradient
+       id="paint3_radial_519_6"
+       cx="0"
+       cy="0"
+       r="1"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(54.999968,54.999968,-54.999968,54.999968,4,4)">
+      <stop
+         stop-color="#81DFFF"
+         id="stop10" />
+      <stop
+         offset="1"
+         stop-color="#0A99F9"
+         id="stop11" />
+    </radialGradient>
+  </defs>
 </svg>
@@ -153,6 +153,7 @@ Singleton {

            property JsonObject apps: JsonObject {
                property string bluetooth: "kcmshell6 kcm_bluetooth"
+                property string manageUser: "kcmshell6 kcm_users"
                property string network: "kitty -1 fish -c nmtui"
                property string networkEthernet: "kcmshell6 kcm_networkmanagement"
                property string taskManager: "plasma-systemmonitor --page-name Processes"
@@ -7,6 +7,10 @@ import qs.services
 Singleton {
    id: root

+    function pathForName(iconName) {
+        return Quickshell.shellPath(`assets/icons/fluent/${iconName}.svg`);
+    }
+
    function wifiIconForStrength(strength) {
        if (strength > 75)
            return "wifi-1";
@@ -0,0 +1,83 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+Menu {
+    id: root
+
+    property bool downDirection: false
+    property bool hasIcons: false // TODO: implement
+
+    implicitWidth: background.implicitWidth + root.padding * 2
+    implicitHeight: background.implicitHeight + root.padding * 2
+    padding: 3
+    property real sourceEdgeMargin: -implicitHeight
+    clip: true
+    
+    enter: Transition {
+        NumberAnimation {
+            property: "sourceEdgeMargin"
+            from: -root.implicitHeight
+            to: root.padding
+            duration: 200
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
+        }
+    }
+    exit: Transition {
+        NumberAnimation {
+            property: "sourceEdgeMargin"
+            from: root.padding
+            to: -root.implicitHeight
+            duration: 150
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Looks.transition.easing.bezierCurve.easeOut
+        }
+    }
+
+    background: WPane {
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: root.downDirection ? parent.top : undefined
+            bottom: root.downDirection ? undefined : parent.bottom
+            margins: root.padding
+            topMargin: root.downDirection ? root.sourceEdgeMargin : root.padding
+            bottomMargin: root.downDirection ? root.padding : root.sourceEdgeMargin
+        }
+        contentItem: Rectangle {
+            color: Looks.colors.bg1Base
+            implicitWidth: menuListView.implicitWidth + root.padding * 2
+            implicitHeight: root.contentItem.implicitHeight + root.padding * 2
+        }
+    }
+
+    contentItem: ListView {
+        id: menuListView
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: root.downDirection ? parent.top : undefined
+            bottom: root.downDirection ? undefined : parent.bottom
+            margins: root.padding * 2
+            topMargin: root.downDirection ? root.sourceEdgeMargin : root.padding
+            bottomMargin: root.downDirection ? root.padding : root.sourceEdgeMargin
+        }
+        implicitHeight: contentHeight
+        implicitWidth: Array.from({
+            length: count
+        }, (_, i) => itemAtIndex(i)?.implicitWidth ?? 0).reduce((a, b) => a > b ? a : b)
+
+        model: root.contentModel
+    }
+
+    delegate: WMenuItem {
+        id: menuItemDelegate
+    }
+}
@@ -0,0 +1,93 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+MenuItem {
+    id: root
+
+    property color colBackground: ColorUtils.transparentize(Looks.colors.bg1)
+    property color colBackgroundHover: Looks.colors.bg2Hover
+    property color colBackgroundActive: Looks.colors.bg2Active
+    property color colBackgroundToggled: Looks.colors.accent
+    property color colBackgroundToggledHover: Looks.colors.accentHover
+    property color colBackgroundToggledActive: Looks.colors.accentActive
+    property color colForeground: Looks.colors.fg
+    property color colForegroundToggled: Looks.colors.accentFg
+    property color colForegroundDisabled: ColorUtils.transparentize(Looks.colors.subfg, 0.4)
+    property color color: {
+        if (!root.enabled)
+            return colBackground;
+        if (root.checked) {
+            if (root.down) {
+                return root.colBackgroundToggledActive;
+            } else if (root.hovered) {
+                return root.colBackgroundToggledHover;
+            } else {
+                return root.colBackgroundToggled;
+            }
+        }
+        if (root.down) {
+            return root.colBackgroundActive;
+        } else if (root.hovered) {
+            return root.colBackgroundHover;
+        } else {
+            return root.colBackground;
+        }
+    }
+    property color fgColor: {
+        if (root.checked)
+            return root.colForegroundToggled;
+        if (root.enabled)
+            return root.colForeground;
+        return root.colForegroundDisabled;
+    }
+
+    property real inset: 2
+    topInset: inset
+    bottomInset: inset
+    leftInset: inset
+    rightInset: inset
+    horizontalPadding: 11
+
+    background: Rectangle {
+        id: backgroundRect
+        radius: Looks.radius.medium
+        color: root.color
+        Behavior on color {
+            animation: Looks.transition.color.createObject(this)
+        }
+    }
+
+    implicitHeight: Math.max(28, contentItem.implicitHeight) + topInset + bottomInset
+    implicitWidth: contentItem.implicitWidth + leftInset + rightInset + leftPadding + rightPadding
+
+    contentItem: RowLayout {
+        id: contentLayout
+        spacing: 12
+        FluentIcon {
+            id: buttonIcon
+            monochrome: true
+            implicitSize: 20
+            Layout.fillWidth: false
+            Layout.alignment: Qt.AlignVCenter
+            color: root.fgColor
+            visible: root.icon.name !== "";
+            icon: root.icon.name
+        }
+        WText {
+            id: buttonText
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            text: root.text
+            horizontalAlignment: Text.AlignLeft
+            font.pixelSize: Looks.font.pixelSize.large
+            color: root.fgColor
+        }
+    }
+}
@@ -10,7 +10,7 @@ import qs.modules.waffle.looks

 Item {
    id: root
-    required property Item contentItem
+    property Item contentItem
    property real radius: Looks.radius.large
    property alias border: borderRect
    property alias borderColor: borderRect.border.color
@@ -25,6 +25,8 @@ StyledToolTip {
    verticalPadding: 8
    horizontalPadding: 10

+    delay: 400
+
    contentItem: WToolTipContent {
        id: tooltipContent
        realContentItem: root.realContentItem
@@ -6,6 +6,7 @@ Item {
    id: root
    anchors.centerIn: parent
    required property Item realContentItem
+    property alias radius: realContent.radius
    property real verticalPadding: 8
    property real horizontalPadding: 10
    implicitWidth: realContent.implicitWidth + 2 * 2
@@ -0,0 +1,27 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import qs.modules.waffle.looks
+
+StyledImage {
+    id: avatar
+    Layout.alignment: Qt.AlignTop
+    sourceSize: Qt.size(32, 32)
+    source: Directories.userAvatarPathAccountsService
+    fallbacks: [Directories.userAvatarPathRicersAndWeirdSystems, Directories.userAvatarPathRicersAndWeirdSystems2]
+
+    layer.enabled: true
+    layer.effect: OpacityMask {
+        maskSource: Circle {
+            diameter: avatar.height
+        }
+    }
+}
@@ -7,6 +7,7 @@ import qs.modules.common.widgets
 import qs.modules.common.functions
 import qs.modules.waffle.looks

+// TODO: Swipe to dismiss
 MouseArea {
    id: root

@@ -4,7 +4,6 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 import Quickshell
-import org.kde.kirigami as Kirigami
 import qs
 import qs.services
 import qs.modules.common
@@ -60,20 +59,8 @@ WPanelPageColumn {
                anchors.centerIn: parent
                spacing: 12

-                StyledImage {
-                    id: avatar
-                    // Use this for free fallback because I'm lazy
-                    Layout.alignment: Qt.AlignTop
+                WUserAvatar {
                    sourceSize: Qt.size(32, 32)
-                    source: Directories.userAvatarPathAccountsService
-                    fallbacks: [Directories.userAvatarPathRicersAndWeirdSystems, Directories.userAvatarPathRicersAndWeirdSystems2]
-
-                    layer.enabled: true
-                    layer.effect: OpacityMask {
-                        maskSource: Circle {
-                            diameter: avatar.height
-                        }
-                    }
                }
                WText {
                    Layout.alignment: Qt.AlignVCenter
@@ -81,9 +68,116 @@ WPanelPageColumn {
                }
            }
        }
+
+        onClicked: {
+            userMenu.open();
+        }
+
+        WToolTip {
+            text: SystemInfo.username
+        }
+
+        Popup {
+            id: userMenu
+            x: -51
+            y: -userMenu.implicitHeight + userButton.implicitHeight / 2 - 10
+
+            background: null
+            
+            WToolTipContent {
+                id: popupContent
+                horizontalPadding: 10
+                verticalPadding: 7
+                radius: Looks.radius.large
+                realContentItem: Item {
+                    implicitWidth: userMenuContentLayout.implicitWidth
+                    implicitHeight: userMenuContentLayout.implicitHeight
+                    
+                    ColumnLayout {
+                        id: userMenuContentLayout
+                        anchors {
+                            fill: parent
+                            leftMargin: popupContent.horizontalPadding
+                            rightMargin: popupContent.horizontalPadding
+                            topMargin: popupContent.verticalPadding
+                            bottomMargin: popupContent.verticalPadding
+                        }
+                        spacing: 5
+
+                        RowLayout {
+                            Layout.fillWidth: true
+                            Layout.leftMargin: 6
+                            FluentIcon {
+                                Layout.alignment: Qt.AlignVCenter
+                                implicitSize: 22
+                                icon: "corporation"
+                                monochrome: false
+                            }
+                            WText {
+                                Layout.alignment: Qt.AlignVCenter
+                                text: "Megahard"
+                                font.pixelSize: Looks.font.pixelSize.large
+                                font.weight: Looks.font.weight.strong
+                            }
+                            Item { Layout.fillWidth: true }
+                            WBorderlessButton {
+                                Layout.alignment: Qt.AlignVCenter
+                                implicitHeight: 36
+                                implicitWidth: textItem.implicitWidth + 10 * 2
+                                contentItem: WText {
+                                    id: textItem
+                                    text: Translation.tr("Sign out")
+                                    font.pixelSize: Looks.font.pixelSize.large
+                                }
+                                onClicked: Session.logout()
+                            }
+                        }
+                        Item { // Force min width 360 (using min on the item somehow doesn't work)
+                            implicitWidth: 334
+                        }
+                        RowLayout {
+                            Layout.fillWidth: true
+                            Layout.bottomMargin: 7
+                            Layout.leftMargin: 6
+                            spacing: 12
+                            WUserAvatar {
+                                sourceSize: Qt.size(58, 58)
+                            }
+                            ColumnLayout {
+                                Layout.fillWidth: true
+                                Layout.alignment: Qt.AlignVCenter
+                                spacing: 2
+                                WText {
+                                    text: SystemInfo.username
+                                    font.pixelSize: Looks.font.pixelSize.larger
+                                    font.weight: Looks.font.weight.strong
+                                }
+                                WText {
+                                    color: Looks.colors.fg1
+                                    text: Translation.tr("Local account")
+                                }
+                                WText {
+                                    color: Looks.colors.accent
+                                    text: Translation.tr("Manage my account")
+                                    MouseArea {
+                                        anchors.fill: parent
+                                        cursorShape: Qt.PointingHandCursor
+                                        onClicked: {
+                                            Quickshell.execDetached(["bash", "-c", Config.options.apps.manageUser])
+                                            GlobalStates.searchOpen = false;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
    }

    component PowerButton: WBorderlessButton {
+        id: powerButton
        implicitWidth: 40
        implicitHeight: 40

@@ -94,5 +188,40 @@ WPanelPageColumn {
                implicitSize: 20
            }
        }
+
+        WToolTip {
+            extraVisibleCondition: !powerMenu.visible
+            text: qsTr("Power")
+        }
+
+        onClicked: {
+            powerMenu.open()
+        }
+
+        WMenu {
+            id: powerMenu
+            x: -powerMenu.implicitWidth / 2 + powerButton.implicitWidth / 2
+            y: -powerMenu.implicitHeight - 4
+            Action {
+                icon.name: "lock-closed"
+                text: Translation.tr("Lock")
+                onTriggered: Session.lock()
+            }
+            Action {
+                icon.name: "weather-moon"
+                text: Translation.tr("Sleep")
+                onTriggered: Session.suspend()
+            }
+            Action {
+                icon.name: "power"
+                text: Translation.tr("Shut down")
+                onTriggered: Session.poweroff()
+            }
+            Action {
+                icon.name: "arrow-counterclockwise"
+                text: Translation.tr("Restart")
+                onTriggered: Session.reboot()
+            }
+        }
    }
 }