fancy open animation, but still no padding

config/Dimensions.qml

@@ -11,6 +11,7 @@ Singleton {
     property Bar bar: Bar {}
     property Mpris mpris: Mpris {}
     property Clock clock: Clock {}
+    property Caffeine caffeine: Caffeine {}
     property Workspace workspace: Workspace {}
     property Tray tray: Tray {}
     property TrayMenu trayMenu: TrayMenu {}
@@ -45,6 +46,15 @@ Singleton {
         property int verticalPadding: 6
     }
 
+    component Caffeine: QtObject {
+        id: clock
+
+        property int iconSize: 14
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
     component Workspace: QtObject {
         id: workspace
 

constants/Icons.qml

@@ -3,6 +3,7 @@ pragma Singleton
 import Quickshell
 
 Singleton {
+    property string coffee: "\u{E09a}"
     property string triangle: "\u{E192}"
     property string triangleDashed: "\u{E642}"
 }

modules/bar/Bar.qml

@@ -75,7 +75,9 @@ Scope {
 
                 spacing: Dimensions.bar.spacing
 
-                Mpris {}
+                Mpris {
+                    anchors.verticalCenter: parent.verticalCenter
+                }
             }
 
             Row {
@@ -90,7 +92,13 @@ Scope {
 
                 spacing: Dimensions.bar.spacing
 
-                Clock {}
+                Caffeine {
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+
+                Clock {
+                    anchors.verticalCenter: parent.verticalCenter
+                }
             }
         }
     }

modules/bar/components/Caffeine.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import Quickshell.Io
+import "../../../config/"
+import "../../../constants/"
+import "../../../styled/"
+
+Clickable {
+    id: clickable
+
+    implicitWidth: text.width
+    implicitHeight: Dimensions.caffeine.height
+
+    border.color: process.running ? Theme.palette.secondary : 'transparent'
+    border.width: 2
+
+    onClicked: {
+        if (process.running) {
+            process.signal(888);
+            process.running = false;
+        } else {
+            process.running = true;
+        }
+    }
+
+    StyledText {
+        id: text
+
+        font.family: Theme.lucide.font.family
+        font.pixelSize: Dimensions.workspace.iconSize
+        font.bold: true
+        text: Icons.coffee
+
+        color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+
+        anchors.verticalCenter: parent.verticalCenter
+        topPadding: Dimensions.mpris.verticalPadding
+        bottomPadding: Dimensions.mpris.verticalPadding
+        leftPadding: Dimensions.mpris.horizontalPadding
+        rightPadding: Dimensions.mpris.horizontalPadding
+    }
+
+    Process {
+        id: process
+        command: ["sh", "-c", "systemd-inhibit --what=idle --who=Caffeine --why=Caffeine --mode=block sleep inf"]
+    }
+}

modules/bar/components/Clock.qml

@@ -1,19 +1,11 @@
 import Quickshell
-import Quickshell.Io
-import QtQuick
 import "../../../styled/"
 import "../../../config/"
 
-Item {
+StyledLabel {
-    id: root
-
     implicitWidth: childrenRect.width
     implicitHeight: Dimensions.clock.height
 
-    StyledLabel {
-        anchors.fill: parent
-    }
-
     StyledText {
         id: text
         anchors.verticalCenter: parent.verticalCenter

modules/bar/components/tray/TrayItem.qml

@@ -38,32 +38,17 @@ Clickable {
         anchors.centerIn: parent
     }
 
-    PopupWindow {
+    Menu {
-        id: popup
+        id: menu
 
-        visible: root.menuOpened
+        opened: root.menuOpened
-
-        color: 'transparent'
 
         anchor.item: root
         anchor.rect.x: root.width / 2 - width / 2
         anchor.rect.y: root.height + 8
 
-        implicitWidth: menu.width
-        implicitHeight: menu.height
-
-        Rectangle {
-            anchors.fill: parent
-            color: Theme.palette.base300
-            radius: 8
-        }
-
-        Menu {
-            id: menu
-
         menuOpener: QsMenuOpener {
             menu: trayItem.menu
         }
     }
 }
-}

modules/bar/components/tray/menu/Menu.qml

@@ -1,30 +1,146 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import "../../../../../config/"
 import "../../../../../styled/"
 
+PopupWindow {
+    id: window
+
+    property QsMenuOpener menuOpener
+    property bool opened: false
+
+    color: 'transparent'
+
+    implicitWidth: menu.width
+    implicitHeight: menu.height
+
+    Rectangle {
+        id: background
+
+        anchors.fill: menu
+        color: Theme.palette.base300
+        border.color: Theme.palette.base200
+        border.width: 2
+        radius: 8
+
+        opacity: 0
+
+        states: State {
+            name: "opened"
+            when: window.opened
+            PropertyChanges {
+                background {
+                    opacity: 1
+                }
+            }
+        }
+
+        transitions: [
+            Transition {
+                from: ""
+                to: "opened"
+                SequentialAnimation {
+                    ScriptAction {
+                        script: window.visible = true
+                    }
+                    NumberAnimation {
+                        property: "background.opacity"
+                        duration: 200
+                    }
+                }
+            },
+            Transition {
+                from: "opened"
+                to: ""
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: repeater.count * 15
+                    }
+                    NumberAnimation {
+                        property: "background.opacity"
+                        duration: 200
+                    }
+                    ScriptAction {
+                        script: window.visible = false
+                    }
+                }
+            }
+        ]
+    }
+
     ColumnLayout {
         id: menu
-    property QsMenuOpener menuOpener
 
-    anchors.margins: 8
+        anchors.margins: 30
 
         Repeater {
-        model: menuOpener.children
+            id: repeater
+            model: window.menuOpener.children
             delegate: Loader {
+                id: loader
+
                 required property QsMenuEntry modelData
+                required property int index
+
                 active: true
 
+                opacity: 0
+
+                Layout.minimumWidth: 120
+
                 sourceComponent: modelData.isSeparator ? menuSeperator : menuItem
                 property Component menuSeperator: Rectangle {
-                implicitHeight: 1
                     implicitWidth: menu.width
-                color: Theme.palette.basecontent
+                    implicitHeight: 2
+
+                    color: Theme.palette.base100
                 }
                 property Component menuItem: MenuItem {
                     menuEntry: modelData
                 }
+
+                states: State {
+                    name: "opened"
+                    when: window.opened
+                    PropertyChanges {
+                        loader {
+                            opacity: 1
+                        }
+                    }
+                }
+
+                transitions: [
+                    Transition {
+                        from: ""
+                        to: "opened"
+                        SequentialAnimation {
+                            PauseAnimation {
+                                duration: 15 * loader.index
+                            }
+                            NumberAnimation {
+                                property: "opacity"
+                                duration: 100
+                            }
+                        }
+                    },
+                    Transition {
+                        from: "opened"
+                        to: ""
+                        SequentialAnimation {
+                            PauseAnimation {
+                                duration: 15 * (repeater.count - loader.index)
+                            }
+                            NumberAnimation {
+                                property: "opacity"
+                                duration: 200
+                            }
+                        }
+                    }
+                ]
+            }
         }
     }
 }

modules/bar/components/tray/menu/MenuItem.qml

@@ -16,6 +16,8 @@ Clickable {
     StyledText {
         id: text
 
+        opacity: item.opacity
+
         font.pixelSize: Dimensions.clock.fontSize
         anchors.verticalCenter: parent.verticalCenter
         topPadding: Dimensions.clock.verticalPadding

styled/Clickable.qml

@@ -6,8 +6,11 @@ MouseArea {
 
     hoverEnabled: true
     cursorShape: Qt.PointingHandCursor
+    property alias color: rectangle.color
+    property alias border: rectangle.border
 
     Rectangle {
+        id: rectangle
         anchors.fill: parent
 
         radius: Dimensions.radius