DankMaterialShell/quickshell/Modules/Settings/Widgets/SettingsLayoutPicker.qml

pragma ComponentBehavior: Bound

import QtQuick
import qs.Common
import qs.Widgets

Row {
    id: root

    readonly property var barModes: [
        {
            "key": "standard",
            "label": I18n.tr("Standard")
        },
        {
            "key": "frame",
            "label": I18n.tr("Frame")
        },
        {
            "key": "island",
            "label": I18n.tr("Island")
        }
    ]
    readonly property string activeBarMode: SettingsData.frameEnabled ? "frame" : SettingsData.dankIslandBarId ? "island" : "standard"

    function leaveIsland() {
        const config = SettingsData.islandBarConfig;
        if (SettingsData.dankIslandBarId)
            SettingsData.set("dankIslandBarId", "");
        if (config && !config.enabled)
            SettingsData.updateBarConfig(config.id, {
                enabled: true
            });
    }

    function applyBarMode(mode) {
        switch (mode) {
        case "frame":
            if (SettingsData.frameEnabled)
                return;
            leaveIsland();
            SettingsData.set("frameEnabled", true);
            return;
        case "island":
            {
                const configs = SettingsData.barConfigs || [];
                const target = SettingsData.islandBarConfig ?? SettingsData.getBarConfig(SettingsUiState.selectedBarId) ?? configs.find(cfg => cfg.enabled) ?? configs[0];
                if (target)
                    SettingsData.setIslandBarId(target.id);
                return;
            }
        default:
            if (SettingsData.frameEnabled)
                SettingsData.set("frameEnabled", false);
            leaveIsland();
            return;
        }
    }

    width: parent?.width ?? 0
    spacing: Theme.spacingS

    Repeater {
        model: root.barModes

        Rectangle {
            id: modeCard
            required property var modelData
            readonly property bool isActive: root.activeBarMode === modelData.key

            width: (root.width - Theme.spacingS * 2) / 3
            height: Math.round(Theme.fontSizeMedium * 7.5)
            radius: Theme.cornerRadius
            color: Theme.floatingWindowNestedSurface
            border.width: isActive ? 2 : 1
            border.color: isActive ? Theme.primary : Theme.outlineMedium

            Rectangle {
                anchors.fill: parent
                radius: parent.radius
                color: Theme.primary
                opacity: modeMouse.containsMouse ? 0.12 : 0
            }

            Column {
                anchors.centerIn: parent
                spacing: Theme.spacingS

                Rectangle {
                    id: screenPreview
                    readonly property real edgePad: Math.max(2, Math.round(width * 0.045))
                    readonly property real stripSize: Math.round(width * 0.11)

                    width: Math.round(Theme.iconSize * 2.9)
                    height: Math.round(width * 0.62)
                    radius: Theme.spacingXS
                    color: Theme.surfaceContainerHighest
                    border.width: 1
                    border.color: Theme.outline
                    anchors.horizontalCenter: parent.horizontalCenter

                    Rectangle {
                        visible: modeCard.modelData.key === "standard"
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.margins: screenPreview.edgePad
                        height: screenPreview.stripSize
                        radius: height / 2
                        color: Theme.primary
                    }

                    Rectangle {
                        visible: modeCard.modelData.key === "frame"
                        anchors.fill: parent
                        anchors.margins: screenPreview.edgePad
                        radius: screenPreview.radius
                        color: "transparent"
                        border.width: Math.max(2, Math.round(screenPreview.stripSize * 0.55))
                        border.color: Theme.primary
                    }

                    Rectangle {
                        visible: modeCard.modelData.key === "frame"
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.right: parent.right
                        anchors.margins: screenPreview.edgePad
                        height: screenPreview.stripSize
                        radius: screenPreview.radius
                        color: Theme.primary
                    }

                    Rectangle {
                        visible: modeCard.modelData.key === "island"
                        anchors.top: parent.top
                        anchors.topMargin: screenPreview.edgePad
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: Math.round(parent.width * 0.42)
                        height: screenPreview.stripSize
                        radius: height / 2
                        color: Theme.primary
                    }
                }

                StyledText {
                    text: modeCard.modelData.label
                    font.pixelSize: Theme.fontSizeSmall
                    font.weight: Font.Medium
                    color: modeCard.isActive ? Theme.primary : Theme.surfaceText
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }

            MouseArea {
                id: modeMouse
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onClicked: root.applyBarMode(modeCard.modelData.key)
            }
        }
    }
}