KeyboardLayout.qml

pragma ComponentBehavior: Bound

import QtQuick
import Quickshell
import Quickshell.Hyprland
import Quickshell.Io
import qs.Commons
import qs.Ui
import "lib/shortcuts" as Shortcuts

Panel {
    id: root
    moduleName: "io.github.ilyazar.keyboard-layout"

    readonly property string tealColor: "#2aa198"
    readonly property string purpleColor: "#a77bd8"
    readonly property string blueColor: "#3b82f6"
    readonly property string yellowColor: "#ebcb8b"
    readonly property var colorPresets: [
        {
            label: "Teal",
            value: tealColor
        },
        {
            label: "Purple",
            value: purpleColor
        },
        {
            label: "Blue",
            value: blueColor
        },
        {
            label: "Yellow",
            value: yellowColor
        }
    ]
    readonly property string keyboardConfigPath: Quickshell.env("HOME") + "/.config/hypr/input.lua"
    readonly property string pluginPath: Quickshell.env("HOME") + "/.config/omarchy/plugins/" + moduleName
    readonly property string legacySettingsPath: pluginPath + "/.settings.json"
    readonly property var trackerService: bar?.shell?.serviceFor(moduleName)
    readonly property string pulseColor: normalizedPulseColor(setting("pulseColor", tealColor))
    readonly property bool animationEnabled: setting("animation", true) !== false
    readonly property bool showSingleLayout: setting("showSingleLayout", false) === true
    readonly property bool perWindowLayouts: setting("perWindowLayouts", false) === true
    readonly property bool trackerSupportKnown: trackerService ? trackerService.supportKnown : false
    readonly property bool trackerSupported: trackerService ? trackerService.supported : false
    readonly property bool perWindowLayoutsActive: perWindowLayouts && trackerSupported
    readonly property color urgent: bar ? bar.urgent : Color.urgent
    property bool settingsPage: false
    property bool customColorEditorVisible: false
    property int keyboardOptionsLine: 1

    property string keyboardName: ""
    property var keyboardNames: []
    property string layoutConfig: ""
    property var layouts: []
    property int activeLayoutIndex: -1
    property int cursorIndex: 0
    property bool cursorActive: false
    property string layoutFull: ""
    property string layoutLabel: ""
    property bool multipleLayouts: true
    property real pulseOpacity: 1
    property real pulseScale: 1
    property int automaticRestoreLayout: -1
    property var legacySettings: null
    property bool legacySettingsLoaded: false
    property bool legacySettingsMigrated: false

    function isPulseColor(value) {
        return /^#[0-9a-fA-F]{6}$/.test(String(value || "").trim());
    }

    function normalizedPulseColor(value) {
        var color = String(value || "").trim().toLowerCase();
        return isPulseColor(color) ? color : tealColor;
    }

    function presetForColor(value) {
        var color = normalizedPulseColor(value);
        return color === tealColor || color === purpleColor || color === blueColor || color === yellowColor ? color :
                                                                                                              "custom";
    }

    function storeSettings(next) {
        root.settings = next;
        if (!root.bar || !root.bar.shell || typeof root.bar.shell.updateEntryInline !== "function") {
            console.warn("Keyboard Layout Pulse: inline settings are unavailable");
            return false;
        }
        return root.bar.shell.updateEntryInline(root.moduleName, next);
    }

    function persistSettings(values) {
        var next = {};
        for (var existing in root.settings)
            next[existing] = root.settings[existing];
        for (var key in values)
            next[key] = values[key];
        return root.storeSettings(next);
    }

    function loadLegacySettings(raw) {
        try {
            var value = JSON.parse(raw || "{}");
            root.legacySettings = value && typeof value === "object" && !Array.isArray(value) ? value : null;
        } catch (error) {
            root.legacySettings = null;
        }
        root.legacySettingsLoaded = true;
        Qt.callLater(root.migrateLegacySettings);
    }

    function migrateLegacySettings() {
        if (root.legacySettingsMigrated || !root.legacySettingsLoaded || !root.bar || !root.bar.shell
                || typeof root.bar.shell.updateEntryInline !== "function")
            return;
        root.legacySettingsMigrated = true;
        if (!root.legacySettings)
            return;
        var next = {};
        for (var legacy in root.legacySettings)
            next[legacy] = root.legacySettings[legacy];
        for (var current in root.settings)
            next[current] = root.settings[current];

        if (JSON.stringify(next) !== JSON.stringify(root.settings))
            root.storeSettings(next);
    }

    function setPulseColor(value) {
        if (!isPulseColor(value))
            return;
        var color = normalizedPulseColor(value);
        persistSettings({
                            pulseColor: color
                        });
        customColorField.text = color;
    }

    function applyPulseColor(value) {
        if (!isPulseColor(value))
            return;
        setPulseColor(value);
        root.close();
    }

    function resetPulse() {
        pulseAnimation.stop();
        root.pulseOpacity = 1;
        root.pulseScale = 1;
    }

    function setAnimationEnabled(enabled) {
        persistSettings({
                            animation: enabled
                        });
        if (!enabled)
            resetPulse();
    }

    function setShowSingleLayout(enabled) {
        persistSettings({
                            showSingleLayout: enabled
                        });
        if (!enabled && !root.multipleLayouts)
            root.close();
    }

    function setPerWindowLayouts(enabled) {
        persistSettings({
                            perWindowLayouts: enabled
                        });
        syncLayoutTracker();
    }

    function syncLayoutTracker() {
        if (root.trackerService && typeof root.trackerService.setTrackingEnabled === "function")
            root.trackerService.setTrackingEnabled(root.perWindowLayouts);
        if (!root.perWindowLayoutsActive) {
            automaticRestoreTimer.stop();
            root.automaticRestoreLayout = -1;
        }
    }

    function expectAutomaticRestore(layout) {
        root.automaticRestoreLayout = Number(layout);
        automaticRestoreTimer.restart();
    }

    function selectPresetColor(value) {
        root.customColorEditorVisible = false;
        setPulseColor(value);
        keyCatcher.forceActiveFocus();
    }

    function openCustomColorEditor() {
        root.customColorEditorVisible = true;
        customColorField.text = root.pulseColor;
        Qt.callLater(function () {
            customColorField.selectAll();
            customColorField.forceActiveFocus();
        });
    }

    function updateKeyboardConfig(raw) {
        var lines = String(raw || "").split("\n");
        var commentedLine = 1;

        for (var index = 0; index < lines.length; index++) {
            if (/^\s*kb_options\s*=/.test(lines[index])) {
                root.keyboardOptionsLine = index + 1;
                return;
            }
            if (/kb_options\s*=/.test(lines[index]))
                commentedLine = index + 1;
        }

        root.keyboardOptionsLine = commentedLine;
    }

    function openSettings() {
        root.settingsPage = true;
        customColorField.text = root.pulseColor;
        root.customColorEditorVisible = root.presetForColor(root.pulseColor) === "custom";
    }

    function closeSettings() {
        root.settingsPage = false;
        root.customColorEditorVisible = false;
        keyCatcher.forceActiveFocus();
    }

    function editKeyboardShortcut() {
        root.close();
        Quickshell.execDetached(["omarchy-launch-terminal", "nvim", "+" + String(root.keyboardOptionsLine),
                                 "+normal! zz", root.keyboardConfigPath]);
    }

    function typingKeyboards(keyboards) {
        var physical = keyboards.filter(function (keyboard) {
            return !String(keyboard.name).startsWith("hl-virtual-keyboard");
        });
        var typing = physical.filter(function (keyboard) {
            var name = String(keyboard.name);
            // Hotkey-only devices do not follow layout group switches.
            return !name.endsWith("-system-control") && !name.endsWith("-consumer-control") && name !== "video-bus" &&
                    !name.startsWith("power-button") && !name.endsWith("-extra-buttons") && !name.endsWith(
                        "-wmi-hotkeys");
        });
        return typing.length > 0 ? typing : physical;
    }

    function selectKeyboard(keyboards) {
        var typing = root.typingKeyboards(keyboards);
        return typing.find(function (keyboard) {
            return keyboard.name === root.keyboardName;
        }) || typing.find(function (keyboard) {
            return keyboard.main;
        }) || typing[0];
    }

    function updateKeyboards(keyboards) {
        var keyboard = root.selectKeyboard(keyboards);
        if (!keyboard || !keyboard.active_keymap)
            return;
        var nextLayouts = keyboard.layout ? String(keyboard.layout).split(",") : [];
        var variants = String(keyboard.variant || "").split(",");
        var index = Number(keyboard.active_layout_index || 0);
        var config = JSON.stringify([nextLayouts, variants]);
        var sameConfig = root.layoutConfig === config;
        var changed = sameConfig && root.activeLayoutIndex >= 0 && root.activeLayoutIndex !== index;
        var automatic = root.automaticRestoreLayout === index;

        root.keyboardName = String(keyboard.name || "");
        root.keyboardNames = root.typingKeyboards(keyboards).map(function (item) {
            return String(item.name || "");
        }).filter(Boolean);
        root.layoutConfig = config;
        root.layouts = nextLayouts.map(function (layout, i) {
            var variant = String(variants[i] || "").trim();
            return layout.trim().toUpperCase() + (variant ? "(" + variant + ")" : "");
        });
        root.activeLayoutIndex = index;
        root.layoutFull = String(keyboard.active_keymap);
        root.layoutLabel = root.layouts[index] || root.layoutFull;
        root.multipleLayouts = nextLayouts.length > 1;
        if (!sameConfig || automatic) {
            automaticRestoreTimer.stop();
            root.automaticRestoreLayout = -1;
            resetPulse();
        } else if (changed && root.animationEnabled) {
            pulseAnimation.restart();
        }
    }

    function refresh() {
        if (!queryProcess.running)
            queryProcess.running = true;
    }

    function switchLayouts(target) {
        if (!root.bar || root.keyboardNames.length === 0)
            return;
        var commands = root.keyboardNames.map(function (name) {
            return "hyprctl switchxkblayout -- " + Util.shellQuote(name) + " " + Util.shellQuote(target);
        });
        root.bar.run(commands.join("; "));
        refreshTimer.restart();
    }

    function cycle(direction) {
        root.switchLayouts(direction);
    }

    function selectLayout(index) {
        if (index < 0 || index >= root.layouts.length)
            return;
        root.switchLayouts(String(index));
        root.close();
    }

    function moveCursor(delta) {
        var itemCount = root.layouts.length + 1;
        if (!root.cursorActive) {
            root.cursorActive = true;
            return;
        }
        root.cursorIndex = (root.cursorIndex + delta + itemCount) % itemCount;
    }

    function activateCursor() {
        if (!root.cursorActive)
            return;
        if (root.cursorIndex === root.layouts.length)
            root.openSettings();
        else
            root.selectLayout(root.cursorIndex);
    }

    onOpenedChanged: {
        if (!opened)
            return;
        root.settingsPage = false;
        root.cursorIndex = root.activeLayoutIndex;
        root.cursorActive = false;
        root.refresh();
        layoutShortcut.refresh();
    }

    onAnimationEnabledChanged: if (!animationEnabled)
                                   resetPulse()
    onPerWindowLayoutsChanged: syncLayoutTracker()
    onTrackerServiceChanged: syncLayoutTracker()
    onBarChanged: Qt.callLater(root.migrateLegacySettings)
    onSettingsChanged: Qt.callLater(root.migrateLegacySettings)

    Component.onCompleted: {
        legacySettingsFile.reload();
        refresh();
    }

    Shortcuts.XkbGroupOption {
        id: layoutShortcut
    }

    Connections {
        target: Hyprland
        function onRawEvent(event) {
            if (!event)
                return;
            var name = String(event.name || "");
            if (name.indexOf("activelayout") !== -1) {
                var device = String(event.data || "").split(",")[0];
                if (device && !device.startsWith("hl-virtual-keyboard"))
                    root.keyboardName = device;
            } else if (name !== "configreloaded")
                return;
            root.refresh();
        }
    }

    Connections {
        target: root.trackerService
        ignoreUnknownSignals: true
        function onRestoreRequested(layout) {
            root.expectAutomaticRestore(layout);
        }
    }

    Process {
        id: queryProcess
        command: ["hyprctl", "-j", "devices"]
        stdout: StdioCollector {
            waitForEnd: true
            onStreamFinished: {
                try {
                    root.updateKeyboards(JSON.parse(text || "{}").keyboards || []);
                } catch (error) {
                    root.layoutLabel = "";
                }
            }
        }
    }

    FileView {
        id: legacySettingsFile
        path: root.legacySettingsPath
        printErrors: false
        onLoaded: root.loadLegacySettings(text())
        onLoadFailed: root.loadLegacySettings("")
    }

    FileView {
        path: root.keyboardConfigPath
        watchChanges: true
        printErrors: false
        onLoaded: root.updateKeyboardConfig(text())
        onFileChanged: reload()
    }

    Timer {
        id: refreshTimer
        interval: 600
        onTriggered: root.refresh()
    }

    Timer {
        id: automaticRestoreTimer
        interval: 1500
        onTriggered: root.automaticRestoreLayout = -1
    }

    Timer {
        interval: 10000
        running: true
        repeat: true
        onTriggered: root.refresh()
    }

    SequentialAnimation {
        id: pulseAnimation
        loops: 3
        onStopped: {
            root.pulseOpacity = 1;
            root.pulseScale = 1;
        }
        ParallelAnimation {
            NumberAnimation {
                target: root
                property: "pulseOpacity"
                from: 0.65
                to: 1
                duration: 650
                easing.type: Easing.InOutSine
            }
            SequentialAnimation {
                NumberAnimation {
                    target: root
                    property: "pulseScale"
                    from: 1
                    to: 1.16
                    duration: 325
                    easing.type: Easing.InOutSine
                }
                NumberAnimation {
                    target: root
                    property: "pulseScale"
                    from: 1.16
                    to: 1
                    duration: 325
                    easing.type: Easing.InOutSine
                }
            }
        }
    }

    visible: layoutLabel !== "" && (multipleLayouts || showSingleLayout)
    implicitWidth: button.implicitWidth
    implicitHeight: button.implicitHeight

    WidgetButton {
        id: button
        anchors.fill: parent
        bar: root.bar
        text: ""
        hasVisualContent: root.layoutLabel !== ""
        labelVisible: false
        fixedWidth: Math.max(12, labelProbe.implicitWidth + Style.space(12))
        horizontalMargin: 6
        tooltipText: root.layoutFull
        onPressed: function (mouseButton) {
            if (mouseButton === Qt.LeftButton)
                root.toggle();
        }
        onWheelMoved: function (delta) {
            root.cycle(delta > 0 ? "next" : "prev");
        }
    }

    Text {
        id: labelProbe
        visible: false
        text: root.layoutLabel
        font.family: button.fontFamily
        font.pixelSize: Style.font.caption
    }

    Text {
        id: pulseLabel
        anchors.centerIn: button
        text: root.layoutLabel
        color: root.animationEnabled && pulseAnimation.running ? root.pulseColor : button.foreground
        opacity: root.pulseOpacity
        scale: root.pulseScale
        transformOrigin: Item.Center
        font.family: button.fontFamily
        font.pixelSize: Style.font.caption
        font.bold: root.animationEnabled && pulseAnimation.running
        renderType: Text.NativeRendering
        layer.enabled: root.animationEnabled && pulseAnimation.running
        layer.smooth: true

        Behavior on color {
            ColorAnimation {
                duration: 160
            }
        }
    }

    KeyboardPanel {
        id: panel
        anchorItem: button
        owner: root
        bar: root.bar
        open: root.opened
        focusTarget: keyCatcher
        contentWidth: panel.fittedContentWidth(Style.space(root.settingsPage ? 260 : 180))
        contentHeight: panel.fittedContentHeight(panelColumn.implicitHeight)

        PanelKeyCatcher {
            id: keyCatcher
            anchors.fill: parent
            blocked: root.settingsPage && (colorDropdown.popupOpen || (root.customColorEditorVisible
                                                                       && customColorField.activeFocus))
            onMoveRequested: function (dx, dy) {
                if (!root.settingsPage)
                    root.moveCursor(dy !== 0 ? dy : dx);
            }
            onActivateRequested: root.activateCursor()
            onCloseRequested: {
                if (root.settingsPage)
                    root.closeSettings();
                else
                    root.close();
            }
            onTabRequested: function (direction) {
                root.switchPanel(direction);
            }

            Column {
                id: panelColumn
                width: parent.width
                spacing: Style.space(6)

                Column {
                    id: layoutColumn
                    visible: !root.settingsPage
                    width: parent.width
                    spacing: Style.space(6)

                    Repeater {
                        model: root.layouts

                        Button {
                            required property var modelData
                            required property int index
                            width: layoutColumn.width
                            text: modelData
                            foreground: root.bar.foreground
                            fontFamily: root.bar.fontFamily
                            fontSize: Style.font.bodySmall
                            leftAlign: true
                            bordered: true
                            selected: root.activeLayoutIndex === index
                            hasCursor: root.cursorActive && root.cursorIndex === index
                            onClicked: root.selectLayout(index)
                            onHovered: function (hovered) {
                                if (!hovered)
                                    return;
                                root.cursorActive = true;
                                root.cursorIndex = index;
                            }
                        }
                    }

                    PanelSeparator {
                        foreground: root.bar.foreground
                    }

                    Button {
                        width: layoutColumn.width
                        text: "Settings"
                        foreground: root.bar.foreground
                        fontFamily: root.bar.fontFamily
                        fontSize: Style.font.bodySmall
                        leftAlign: true
                        bordered: true
                        hasCursor: root.cursorActive && root.cursorIndex === root.layouts.length
                        onClicked: root.openSettings()
                        onHovered: function (hovered) {
                            if (!hovered)
                                return;
                            root.cursorActive = true;
                            root.cursorIndex = root.layouts.length;
                        }
                    }
                }

                Column {
                    id: settingsColumn
                    visible: root.settingsPage
                    width: parent.width
                    spacing: Style.space(8)

                    Item {
                        width: parent.width
                        implicitHeight: Math.max(pulseColorHeader.implicitHeight, animationToggleRow.implicitHeight)

                        PanelSectionHeader {
                            id: pulseColorHeader
                            text: "Pulse color"
                            foreground: root.bar.foreground
                            fontFamily: root.bar.fontFamily
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                        }

                        Row {
                            id: animationToggleRow
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                            spacing: Style.space(5)

                            PanelSectionHeader {
                                id: animationToggleLabel
                                text: "Animation"
                                foreground: root.animationEnabled ? root.bar.foreground : Color.muted
                                fontFamily: root.bar.fontFamily
                                anchors.verticalCenter: parent.verticalCenter
                            }

                            ToggleSwitch {
                                id: animationToggle
                                anchors.verticalCenter: animationToggleLabel.verticalCenter
                                anchors.verticalCenterOffset: Math.round(animationToggleLabel.topPadding / 2)
                                trackHeight: Math.round(animationToggleLabel.font.pixelSize * 1.2)
                                cursorPad: Style.space(3)
                                checked: root.animationEnabled
                                foreground: root.bar.foreground
                                onToggled: root.setAnimationEnabled(!checked)

                                PanelToolTip {
                                    visible: animationToggle.containsMouse
                                    text: root.animationEnabled ? "Disable the layout-change animation" :
                                                                  "Enable the layout-change animation"
                                    fontFamily: root.bar.fontFamily
                                }
                            }
                        }
                    }

                    ColorDropdown {
                        id: colorDropdown
                        width: parent.width
                        enabled: root.animationEnabled
                        opacity: root.animationEnabled ? 1 : 0.35
                        value: root.customColorEditorVisible ? "custom" : root.presetForColor(root.pulseColor)
                        customColor: root.isPulseColor(customColorField.text) ? root.normalizedPulseColor(
                                                                                    customColorField.text) :
                                                                                root.pulseColor
                        presets: root.colorPresets
                        foreground: root.bar.foreground
                        fontFamily: root.bar.fontFamily
                        onChanged: function (value) {
                            if (value === "custom")
                                root.openCustomColorEditor();
                            else
                                root.selectPresetColor(value);
                        }
                    }

                    Row {
                        visible: root.customColorEditorVisible
                        width: parent.width
                        spacing: Style.space(6)
                        enabled: root.animationEnabled
                        opacity: root.animationEnabled ? 1 : 0.35

                        TextField {
                            id: customColorField
                            width: parent.width - applyColorButton.width - parent.spacing
                            placeholderText: "#RRGGBB"
                            foreground: root.bar.foreground
                            font.family: root.bar.fontFamily
                            validator: RegularExpressionValidator {
                                regularExpression: /^#[0-9a-fA-F]{6}$/
                            }
                            onAccepted: root.applyPulseColor(text)
                            Keys.onEscapePressed: root.closeSettings()
                        }

                        Button {
                            id: applyColorButton
                            text: "Apply"
                            foreground: root.bar.foreground
                            fontFamily: root.bar.fontFamily
                            fontSize: Style.font.bodySmall
                            bordered: true
                            focusable: true
                            enabled: customColorField.acceptableInput
                            onClicked: root.applyPulseColor(customColorField.text)
                        }
                    }

                    Text {
                        visible: root.animationEnabled && root.customColorEditorVisible && customColorField.text !== ""
                                 && !customColorField.acceptableInput
                        width: parent.width
                        text: "Use #RRGGBB, for example #2aa198."
                        color: Qt.darker(root.bar.foreground, 1.4)
                        font.family: root.bar.fontFamily
                        font.pixelSize: Style.font.caption
                        wrapMode: Text.WordWrap
                    }

                    Text {
                        visible: !root.animationEnabled
                        width: parent.width
                        text: "Please enable animations first."
                        color: root.urgent
                        font.family: root.bar.fontFamily
                        font.pixelSize: Style.font.caption
                        wrapMode: Text.WordWrap
                    }

                    PanelSeparator {
                        foreground: root.bar.foreground
                    }

                    PanelSectionHeader {
                        text: "Keyboard layouts & shortcut"
                        foreground: root.bar.foreground
                        fontFamily: root.bar.fontFamily
                    }

                    Item {
                        width: parent.width
                        implicitHeight: Math.max(shortcutText.implicitHeight, editShortcutButton.implicitHeight)

                        Text {
                            id: shortcutText
                            anchors.left: parent.left
                            anchors.right: editShortcutButton.left
                            anchors.rightMargin: Style.space(6)
                            anchors.verticalCenter: parent.verticalCenter
                            text: layoutShortcut.label
                            color: root.bar.foreground
                            font.family: root.bar.fontFamily
                            font.pixelSize: Style.font.bodySmall
                            elide: Text.ElideRight
                        }

                        PanelActionButton {
                            id: editShortcutButton
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                            iconText: "󰒓"
                            tooltipText: "Edit layouts and keybinding shortcut"
                            foreground: root.bar.foreground
                            fontFamily: root.bar.fontFamily
                            fontSize: Style.font.bodySmall
                            size: Style.space(24)
                            bordered: true
                            focusable: true
                            onClicked: root.editKeyboardShortcut()
                        }
                    }

                    Item {
                        width: parent.width
                        implicitHeight: Math.max(singleLayoutHeader.implicitHeight, singleLayoutToggle.implicitHeight)

                        PanelSectionHeader {
                            id: singleLayoutHeader
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            text: "Show with one layout"
                            foreground: root.showSingleLayout ? root.bar.foreground : Color.muted
                            fontFamily: root.bar.fontFamily
                        }

                        ToggleSwitch {
                            id: singleLayoutToggle
                            anchors.right: parent.right
                            anchors.verticalCenter: singleLayoutHeader.verticalCenter
                            anchors.verticalCenterOffset: Math.round(singleLayoutHeader.topPadding / 2)
                            trackHeight: Math.round(singleLayoutHeader.font.pixelSize * 1.2)
                            cursorPad: Style.space(3)
                            checked: root.showSingleLayout
                            foreground: root.bar.foreground
                            onToggled: root.setShowSingleLayout(!checked)

                            PanelToolTip {
                                visible: singleLayoutToggle.containsMouse
                                text: root.showSingleLayout ? "Hide when only one layout is configured" :
                                                              "Keep visible when only one layout is configured"
                                fontFamily: root.bar.fontFamily
                            }
                        }
                    }

                    Item {
                        width: parent.width
                        implicitHeight: Math.max(perWindowHeader.implicitHeight, perWindowToggle.implicitHeight)
                        opacity: root.trackerSupportKnown && root.trackerSupported ? 1 : 0.45

                        PanelSectionHeader {
                            id: perWindowHeader
                            anchors.left: parent.left
                            anchors.right: perWindowToggle.left
                            anchors.rightMargin: Style.space(6)
                            anchors.verticalCenter: parent.verticalCenter
                            text: "Activate per-window layouts"
                            elide: Text.ElideRight
                            foreground: root.perWindowLayoutsActive ? root.bar.foreground : Color.muted
                            fontFamily: root.bar.fontFamily
                        }

                        ToggleSwitch {
                            id: perWindowToggle
                            anchors.right: parent.right
                            anchors.verticalCenter: perWindowHeader.verticalCenter
                            anchors.verticalCenterOffset: Math.round(perWindowHeader.topPadding / 2)
                            trackHeight: Math.round(perWindowHeader.font.pixelSize * 1.2)
                            cursorPad: Style.space(3)
                            enabled: root.trackerSupportKnown && root.trackerSupported
                            checked: root.perWindowLayoutsActive
                            foreground: root.bar.foreground
                            onToggled: root.setPerWindowLayouts(!checked)

                            PanelToolTip {
                                visible: perWindowToggle.containsMouse
                                text: root.trackerSupported ? (root.perWindowLayoutsActive
                                                               ? "Use one layout across all windows" :
                                                                 "Remember the layout used in each window") :
                                                              "Per-window layouts require x86-64"
                                fontFamily: root.bar.fontFamily
                            }
                        }
                    }

                    PanelSeparator {
                        foreground: root.bar.foreground
                    }

                    Button {
                        id: backButton
                        width: Style.space(82)
                        text: "Back"
                        foreground: root.bar.foreground
                        fontFamily: root.bar.fontFamily
                        fontSize: Style.font.bodySmall
                        leftAlign: true
                        bordered: true
                        focusable: true
                        onClicked: root.closeSettings()

                        Text {
                            anchors.right: parent.right
                            anchors.rightMargin: backButton.horizontalPadding
                            anchors.verticalCenter: parent.verticalCenter
                            text: "󰅁"
                            color: backButton.foreground
                            font.family: backButton.fontFamily
                            font.pixelSize: backButton.iconSize
                        }
                    }
                }
            }
        }
    }
}