illogical-impulse/.config/quickshell/modules/cheatsheet/Cheatsheet.qml

import "root:/"
import "root:/services"
import "root:/modules/common"
import "root:/modules/common/widgets"
import "root:/modules/common/functions/color_utils.js" as ColorUtils
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Quickshell.Io
import Quickshell
import Quickshell.Widgets
import Quickshell.Wayland
import Quickshell.Hyprland

Scope { // Scope
    id: root

    Loader {
        id: cheatsheetLoader
        active: false
        
        sourceComponent: PanelWindow { // Window
            id: cheatsheetRoot
            visible: cheatsheetLoader.active

            anchors {
                top: true
                bottom: true
                left: true
                right: true
            }

            function hide() {
                cheatsheetLoader.active = false
            }
            exclusiveZone: 0
            implicitWidth: cheatsheetBackground.width + Appearance.sizes.elevationMargin * 2
            implicitHeight: cheatsheetBackground.height + Appearance.sizes.elevationMargin * 2
            WlrLayershell.namespace: "quickshell:cheatsheet"
            // Hyprland 0.49: Focus is always exclusive and setting this breaks mouse focus grab
            // WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
            color: "transparent"

            mask: Region {
                item: cheatsheetBackground
            }

            HyprlandFocusGrab { // Click outside to close
                id: grab
                windows: [ cheatsheetRoot ]
                active: cheatsheetRoot.visible
                onCleared: () => {
                    if (!active) cheatsheetRoot.hide()
                }
            }

            // Background
            Rectangle {
                id: cheatsheetBackground
                anchors.centerIn: parent
                color: Appearance.colors.colLayer0
                radius: Appearance.rounding.windowRounding
                property real padding: 30
                implicitWidth: cheatsheetColumnLayout.implicitWidth + padding * 2
                implicitHeight: cheatsheetColumnLayout.implicitHeight + padding * 2

                Keys.onPressed: (event) => { // Esc to close
                    if (event.key === Qt.Key_Escape) {
                        cheatsheetRoot.hide()
                    }
                }

                Button { // Close button
                    id: closeButton
                    focus: cheatsheetRoot.visible
                    implicitWidth: 40
                    implicitHeight: 40
                    anchors {
                        top: parent.top
                        right: parent.right
                        topMargin: 20
                        rightMargin: 20
                    }

                    PointingHandInteraction {}
                    onClicked: {
                        cheatsheetRoot.hide()
                    }

                    background: null
                    contentItem: Rectangle {
                        anchors.fill: parent
                        radius: Appearance.rounding.full
                        color: closeButton.pressed ? Appearance.colors.colLayer0Active :
                            closeButton.hovered ? Appearance.colors.colLayer0Hover :
                            ColorUtils.transparentize(Appearance.colors.colLayer0, 1)
                        
                        Behavior on color {
                            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
                        }

                        MaterialSymbol {
                            anchors.centerIn: parent
                            font.pixelSize: Appearance.font.pixelSize.title
                            text: "close"
                        }
                    }
                }

                ColumnLayout { // Real content
                    id: cheatsheetColumnLayout
                    anchors.centerIn: parent
                    spacing: 20

                    StyledText {
                        id: cheatsheetTitle
                        Layout.alignment: Qt.AlignHCenter
                        font.family: Appearance.font.family.title
                        font.pixelSize: Appearance.font.pixelSize.title
                        text: qsTr("Cheat sheet")
                    }
                    CheatsheetKeybinds {}
                }
            }

            // Shadow
            DropShadow {
                anchors.fill: cheatsheetBackground
                horizontalOffset: 0
                verticalOffset: 2
                radius: Appearance.sizes.elevationMargin
                samples: Appearance.sizes.elevationMargin * 2 + 1 // Ideally should be 2 * radius + 1, see qt docs
                color: Appearance.colors.colShadow
                source: cheatsheetBackground
            }

        }
    }

    IpcHandler {
        target: "cheatsheet"

        function toggle(): void {
            cheatsheetLoader.active = !cheatsheetLoader.active
        }

        function close(): void {
            cheatsheetLoader.active = false
        }

        function open(): void {
            cheatsheetLoader.active = true
        }
    }

    GlobalShortcut {
        name: "cheatsheetToggle"
        description: qsTr("Toggles cheatsheet on press")

        onPressed: {
            cheatsheetLoader.active = !cheatsheetLoader.active;
        }
    }

    GlobalShortcut {
        name: "cheatsheetOpen"
        description: qsTr("Opens cheatsheet on press")

        onPressed: {
            cheatsheetLoader.active = true;
        }
    }

    GlobalShortcut {
        name: "cheatsheetClose"
        description: qsTr("Closes cheatsheet on press")

        onPressed: {
            cheatsheetLoader.active = false;
        }
    }

}