bar/statusicons: add lock keys indicator (#514)

* [StatusIcons] Add caps lock indicator

* Seprate CapsLock icon

* Use material icon

* fixes

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

README.md

@@ -349,7 +349,8 @@ The module automatically adds Caelestia shell to the path with **full functional
             "showBattery": true,
             "showBluetooth": true,
             "showKbLayout": false,
-            "showNetwork": true
+            "showNetwork": true,
+            "showLockStatus": true
         },
         "tray": {
             "background": false,

config/BarConfig.qml

@@ -78,6 +78,7 @@ JsonObject {
         property bool showNetwork: true
         property bool showBluetooth: true
         property bool showBattery: true
+        property bool showLockStatus: true
     }
 
     component Clock: JsonObject {

modules/bar/components/StatusIcons.qml

@@ -21,14 +21,88 @@ StyledRect {
 
     clip: true
     implicitWidth: Config.bar.sizes.innerWidth
-    implicitHeight: iconColumn.implicitHeight + Appearance.padding.normal * 2
+    implicitHeight: iconColumn.implicitHeight + Appearance.padding.normal * 2 - (Config.bar.status.showLockStatus && !Hypr.capsLock && !Hypr.numLock ? iconColumn.spacing : 0)
 
     ColumnLayout {
         id: iconColumn
 
-        anchors.centerIn: parent
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: Appearance.padding.normal
+
         spacing: Appearance.spacing.smaller / 2
 
+        // Lock keys status
+        WrappedLoader {
+            name: "lockstatus"
+            active: Config.bar.status.showLockStatus
+
+            sourceComponent: ColumnLayout {
+                spacing: 0
+
+                Item {
+                    implicitWidth: capslockIcon.implicitWidth
+                    implicitHeight: Hypr.capsLock ? capslockIcon.implicitHeight : 0
+
+                    MaterialIcon {
+                        id: capslockIcon
+
+                        anchors.centerIn: parent
+
+                        scale: Hypr.capsLock ? 1 : 0.5
+                        opacity: Hypr.capsLock ? 1 : 0
+
+                        text: "keyboard_capslock_badge"
+                        color: root.colour
+
+                        Behavior on opacity {
+                            Anim {}
+                        }
+
+                        Behavior on scale {
+                            Anim {}
+                        }
+                    }
+
+                    Behavior on implicitHeight {
+                        Anim {}
+                    }
+                }
+
+                Item {
+                    Layout.topMargin: Hypr.capsLock && Hypr.numLock ? iconColumn.spacing : 0
+
+                    implicitWidth: numlockIcon.implicitWidth
+                    implicitHeight: Hypr.numLock ? numlockIcon.implicitHeight : 0
+
+                    MaterialIcon {
+                        id: numlockIcon
+
+                        anchors.centerIn: parent
+
+                        scale: Hypr.numLock ? 1 : 0.5
+                        opacity: Hypr.numLock ? 1 : 0
+
+                        text: "looks_one"
+                        color: root.colour
+
+                        Behavior on opacity {
+                            Anim {}
+                        }
+
+                        Behavior on scale {
+                            Anim {}
+                        }
+                    }
+
+                    Behavior on implicitHeight {
+                        Anim {}
+                    }
+                }
+            }
+        }
+
         // Audio icon
         WrappedLoader {
             name: "audio"
@@ -68,6 +142,8 @@ StyledRect {
 
         // Bluetooth section
         WrappedLoader {
+            Layout.preferredHeight: implicitHeight
+
             name: "bluetooth"
             active: Config.bar.status.showBluetooth
 
@@ -124,6 +200,10 @@ StyledRect {
                     }
                 }
             }
+
+            Behavior on Layout.preferredHeight {
+                Anim {}
+            }
         }
 
         // Battery icon
@@ -157,13 +237,6 @@ StyledRect {
         }
     }
 
-    Behavior on implicitHeight {
-        Anim {
-            duration: Appearance.anim.durations.large
-            easing.bezierCurve: Appearance.anim.curves.emphasized
-        }
-    }
-
     component WrappedLoader: Loader {
         required property string name
 

modules/bar/popouts/Content.qml

@@ -58,6 +58,11 @@ Item {
             source: "KbLayout.qml"
         }
 
+        Popout {
+            name: "lockstatus"
+            source: "LockStatus.qml"
+        }
+
         Repeater {
             model: ScriptModel {
                 values: [...SystemTray.items.values]

modules/bar/popouts/LockStatus.qml

@@ -0,0 +1,16 @@
+import qs.components
+import qs.services
+import qs.config
+import QtQuick.Layouts
+
+ColumnLayout {
+    spacing: Appearance.spacing.small
+
+    StyledText {
+        text: qsTr("Capslock: %1").arg(Hypr.capsLock ? "Enabled" : "Disabled")
+    }
+
+    StyledText {
+        text: qsTr("Numlock: %1").arg(Hypr.numLock ? "Enabled" : "Disabled")
+    }
+}