// One category of shortcuts, as a column.
//
// Deliberately plain: a chord on the left, what it does on the right, and no
// separators between rows. The cheatsheet is read at a glance while a key is
// held, so anything that draws the eye away from the two columns is in the way.

import QtQuick
import qs.config

Column {
    id: root

    required property string name
    required property var binds

    spacing: 3

    Text {
        text: root.name
        color: Theme.accent
        font.family: Theme.fontFamily
        font.pixelSize: Theme.fontSizeSmall
        font.weight: Font.DemiBold
        font.capitalization: Font.AllUppercase
        font.letterSpacing: 0.6
        bottomPadding: 5
    }

    Repeater {
        model: root.binds

        Item {
            required property var modelData

            width: root.width
            height: chord.implicitHeight + 5

            // The chord is monospaced and tabular so a column of them lines up
            // rather than jittering with the width of each key name. This is
            // the one place in the shell where a monospaced face is correct:
            // it is showing keys, not prose.
            Text {
                id: chord
                width: 168
                text: modelData.chord
                color: Theme.fg
                font.family: Theme.fontMono
                font.pixelSize: Theme.fontSizeSmall
                font.features: Theme.tabularFigures
                elide: Text.ElideRight
            }

            Text {
                anchors.left: chord.right
                anchors.leftMargin: 10
                anchors.right: parent.right
                anchors.verticalCenter: chord.verticalCenter
                text: modelData.description
                color: Theme.fgDim
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                elide: Text.ElideRight
            }
        }
    }
}