shift-shell/components/mobileshell/qml/actiondrawer/private/QuickSettingsStatusRow.qml

// SPDX-FileCopyrightText: 2026 Marco Allegretti
// SPDX-License-Identifier: EUPL-1.2

import QtQuick 2.15
import QtQuick.Layouts 1.1

import org.kde.kirigami as Kirigami
import org.kde.plasma.private.mobileshell as MobileShell
import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings

/**
 * Full-width management row (Wi-Fi, Bluetooth, Audio, Battery) shown in
 * convergence mode.  Two interaction zones:
 *   - Left toggle pill: icon + indicator dot, tap toggles the service.
 *   - Right detail area: name + status + chevron, tap opens detail popup.
 */
Item {
    id: root

    required property string text
    required property string status
    required property string icon
    required property bool enabled
    required property var toggleFunction

    signal detailClicked()

    implicitHeight: Kirigami.Units.gridUnit * 3.6

    Kirigami.Theme.inherit: false
    Kirigami.Theme.colorSet: Kirigami.Theme.Button

    // ── Palette (shared with tile delegates) ────────────────────────────
    readonly property color enabledBg: Kirigami.ColorUtils.tintWithAlpha(
        Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.6)
    readonly property color enabledBgPressed: Kirigami.ColorUtils.tintWithAlpha(
        Kirigami.Theme.highlightColor, Kirigami.Theme.backgroundColor, 0.4)
    readonly property color enabledBorder: Qt.darker(Kirigami.Theme.highlightColor, 1.25)

    readonly property color disabledBg: Kirigami.Theme.backgroundColor
    readonly property color disabledBgPressed: Qt.darker(disabledBg, 1.1)
    readonly property color disabledBorder: {
        let bg = Kirigami.Theme.backgroundColor;
        let fg = Kirigami.Theme.textColor;
        if (Kirigami.ColorUtils.brightnessForColor(bg) === Kirigami.ColorUtils.Light) {
            return Kirigami.ColorUtils.linearInterpolation(bg, fg, 0.2);
        } else {
            return Kirigami.ColorUtils.linearInterpolation(bg, fg, 0.1);
        }
    }

    MobileShell.HapticsEffect { id: haptics }

    // ── Outer card ──────────────────────────────────────────────────────
    // Shadow
    Rectangle {
        anchors.top: parent.top
        anchors.topMargin: 1
        anchors.left: parent.left
        anchors.right: parent.right
        height: parent.height
        radius: Kirigami.Units.cornerRadius
        color: Qt.rgba(0, 0, 0, 0.075)
    }

    // Card background — always neutral base (the toggle pill carries the
    // enabled highlight, not the whole row).
    Rectangle {
        id: cardBg
        anchors.fill: parent
        radius: Kirigami.Units.cornerRadius
        border.pixelAligned: false
        border.width: 1
        border.color: root.disabledBorder
        color: root.disabledBg
    }

    RowLayout {
        anchors.fill: parent
        anchors.margins: Kirigami.Units.smallSpacing
        spacing: Kirigami.Units.smallSpacing

        // ── Toggle pill (left zone) ─────────────────────────────────
        Item {
            id: togglePill
            Layout.alignment: Qt.AlignVCenter
            Layout.preferredWidth: root.height - Kirigami.Units.smallSpacing * 2
            Layout.fillHeight: true

            Rectangle {
                id: pillBg
                anchors.fill: parent
                radius: Kirigami.Units.cornerRadius
                border.pixelAligned: false
                border.width: 1
                border.color: root.enabled ? root.enabledBorder : root.disabledBorder
                color: {
                    if (root.enabled) {
                        return toggleMouse.pressed ? root.enabledBgPressed : root.enabledBg;
                    }
                    return toggleMouse.pressed ? root.disabledBgPressed : root.disabledBg;
                }

                Behavior on color {
                    ColorAnimation { duration: Kirigami.Units.shortDuration }
                }
            }

            // Scale on press
            property real zoomScale: (ShellSettings.Settings.animationsEnabled && toggleMouse.pressed) ? 0.9 : 1
            Behavior on zoomScale {
                NumberAnimation { duration: Kirigami.Units.longDuration; easing.type: Easing.OutExpo }
            }
            transform: Scale {
                origin.x: togglePill.width / 2
                origin.y: togglePill.height / 2
                xScale: togglePill.zoomScale
                yScale: togglePill.zoomScale
            }

            ColumnLayout {
                anchors.centerIn: parent
                spacing: Kirigami.Units.smallSpacing

                Kirigami.Icon {
                    Layout.alignment: Qt.AlignHCenter
                    implicitWidth: Kirigami.Units.iconSizes.smallMedium
                    implicitHeight: implicitWidth
                    source: root.icon
                }

                // Indicator dot
                Rectangle {
                    Layout.alignment: Qt.AlignHCenter
                    width: Kirigami.Units.smallSpacing * 1.5
                    height: width
                    radius: width / 2
                    color: root.enabled ? Kirigami.Theme.highlightColor : Kirigami.Theme.disabledTextColor
                    opacity: root.enabled ? 1.0 : 0.4
                }
            }

            MouseArea {
                id: toggleMouse
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onPressed: haptics.buttonVibrate()
                onClicked: {
                    if (root.toggleFunction) root.toggleFunction();
                }
            }
        }

        // ── Detail area (right zone) ────────────────────────────────
        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            // Hover/press highlight
            Rectangle {
                anchors.fill: parent
                radius: Kirigami.Units.cornerRadius
                color: detailMouse.pressed ? Qt.rgba(Kirigami.Theme.textColor.r,
                                                      Kirigami.Theme.textColor.g,
                                                      Kirigami.Theme.textColor.b, 0.06)
                     : detailMouse.containsMouse ? Qt.rgba(Kirigami.Theme.textColor.r,
                                                           Kirigami.Theme.textColor.g,
                                                           Kirigami.Theme.textColor.b, 0.03)
                     : "transparent"
            }

            MouseArea {
                id: detailMouse
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onPressed: haptics.buttonVibrate()
                onClicked: root.detailClicked()
            }

            RowLayout {
                anchors.fill: parent
                anchors.leftMargin: Kirigami.Units.smallSpacing * 2
                anchors.rightMargin: Kirigami.Units.smallSpacing * 2
                spacing: Kirigami.Units.smallSpacing

                ColumnLayout {
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignVCenter
                    spacing: 2

                    MobileShell.MarqueeLabel {
                        Layout.fillWidth: true
                        inputText: root.text
                        font.weight: Font.Bold
                        font.pointSize: Kirigami.Theme.defaultFont.pointSize * 0.9
                    }

                    MobileShell.MarqueeLabel {
                        Layout.fillWidth: true
                        inputText: root.status ? root.status : (root.enabled ? i18n("On") : i18n("Off"))
                        opacity: 0.6
                        font.pointSize: Kirigami.Theme.defaultFont.pointSize * 0.8
                    }
                }

                Kirigami.Icon {
                    Layout.alignment: Qt.AlignVCenter
                    implicitWidth: Kirigami.Units.iconSizes.small
                    implicitHeight: implicitWidth
                    source: "go-next-symbolic"
                    opacity: 0.5
                }
            }
        }
    }
}