Keyboard layout indicator for bar

[eugene-reim]

It would be cool to be able to display the current keyboard layout on the bar because I often use several languages and this causes inconvenience because I don't see which language is currently enabled.

[eugene-reim]

So i've made it by editing caelestia/modules/bar/components/StatusIcons.qml
This is how it looks

Code for reproducing
DISCLAIMER: I dont have enough expirience in quickshell and maybe you can do it better but at least it works for me

//add hyprland to import section
import Quickshell.Hyprland

//other code
ColumnLayout {
//other loaders
  Loader {
              id: keyboardLayout
              asynchronous: true
              active: true
              visible: active
              
              sourceComponent: Item {
                  id: keyboardItem
                  implicitWidth: layoutText.implicitWidth
                  implicitHeight: layoutText.implicitHeight
                  
                  property string layout: "EN"
                  
                  // Hyprland event listener
                  Connections {
                      target: Hyprland
                      
                      function onRawEvent(event) {
                          if (event.name === "activelayout") {
                              updateLayoutFromEvent(event.data)
                          }
                      }
                      
                      function onResponseReceived(response) {
                          if (response.query === "device:keyboard:activekeymap") {
                              updateLayout(response.response)
                          }
                      }
                  }
                  
                  // Component initialisation
                  Component.onCompleted: {
                      // Get current keyboard layout
                      Hyprland.dispatch("keyword", "device:keyboard:activekeymap")
                  }
                  
                  function transformLayout(layoutName) {
                      //define custom shorteners for languages
                      if (layoutName.includes("Russian")) return "RU"
                      if (layoutName.includes("English")) return "EN"
                      //if no shorteners defined default to first two letter
                      return layoutName.substring(0, 2).toUpperCase()
                  }
                  
                  function updateLayout(layoutName) {
                      const newLayout = transformLayout(layoutName)
                      if (newLayout !== keyboardItem.layout) {
                          keyboardItem.layout = newLayout
                      }
                  }
                  
                  function updateLayoutFromEvent(eventData) {
                      // event parsing: activelayout,<keyboard>,<layout>
                      const parts = eventData.split(',')
                      if (parts.length > 1) {
                          updateLayout(parts[1])
                      }
                  }
                  
                  Text {
                      id: layoutText
                      anchors.centerIn: parent
                      text: parent.layout
                      font.family: "FiraCode Nerd Font"
                      font.pixelSize: 14
                      color: root.colour
                      font.weight: Font.Medium
                  }
              }
          }
//other code
}