DankMaterialShell/quickshell/Modules/Settings/WidgetsTabSection.qml

import QtQuick
import qs.Common
import qs.Widgets
import qs.Services
import qs.Modules.Settings.Widgets

Column {
    id: root
    readonly property var log: Log.scoped("WidgetsTabSection")

    property var items: []
    property var allWidgets: []
    property string title: ""
    property string titleIcon: "widgets"
    property string sectionId: ""

    signal itemEnabledChanged(string sectionId, string itemId, bool enabled)
    signal itemOrderChanged(string sectionId, var indices)
    signal addWidget(string sectionId)
    signal removeWidget(string sectionId, int widgetIndex)
    signal spacerSizeChanged(string sectionId, int widgetIndex, int newSize)
    signal configureWidget(string sectionId, int widgetIndex)

    signal dragStarted(string sectionId, string itemId)

    property var reorderGroup: null
    property string highlightedId: ""
    property string highlightedSection: ""

    width: parent.width
    height: implicitHeight
    spacing: Theme.spacingM

    Item {
        width: parent.width
        height: Math.max(headerRow.implicitHeight, centeringModeRow.implicitHeight)
        LayoutMirroring.enabled: I18n.isRtl
        LayoutMirroring.childrenInherit: true

        Row {
            id: headerRow
            spacing: Theme.spacingM
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter

            DankIcon {
                name: root.titleIcon
                size: Theme.iconSize
                color: Theme.primary
                anchors.verticalCenter: parent.verticalCenter
            }

            StyledText {
                text: root.title
                font.pixelSize: Theme.fontSizeLarge
                font.weight: Theme.fontWeightMedium
                color: Theme.surfaceText
                anchors.verticalCenter: parent.verticalCenter
            }
        }

        Row {
            id: centeringModeRow
            spacing: Theme.spacingXS
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            visible: root.sectionId === "center"

            DankActionButton {
                id: indexCenterButton
                buttonSize: 28
                iconName: "format_list_numbered"
                tooltipText: I18n.tr("Index centering")
                iconSize: 16
                iconColor: SettingsData.centeringMode === "index" ? Theme.primary : Theme.outline
                onClicked: {
                    SettingsData.set("centeringMode", "index");
                }
            }

            DankActionButton {
                id: geometricCenterButton
                buttonSize: 28
                iconName: "center_focus_weak"
                tooltipText: I18n.tr("Geometric centering")
                iconSize: 16
                iconColor: SettingsData.centeringMode === "geometric" ? Theme.primary : Theme.outline
                onClicked: {
                    SettingsData.set("centeringMode", "geometric");
                }
            }
        }
    }

    SettingsReorderList {
        id: reorderArea

        model: root.items
        group: root.reorderGroup
        groupKey: root.sectionId
        dropArea: root
        onReordered: indices => root.itemOrderChanged(root.sectionId, indices)
        onDragStarted: (index, position) => root.dragStarted(root.sectionId, root.items[index].id)

        delegate: SettingsReorderRow {
            id: widgetRow

            required property var modelData

            readonly property bool configurable: BarWidgetCatalog.hasOptions(modelData.id) || !!modelData.pluginId
            readonly property bool highlighted: root.highlightedId === modelData.id && root.highlightedSection === root.sectionId

            reorderList: reorderArea
            opacity: dragging && reorderArea.crossSectionActive ? 0 : 1
            title: modelData.text
            iconName: modelData.icon
            iconColor: modelData.enabled ? Theme.primary : Theme.onSurfaceVariant
            titleColor: modelData.enabled ? Theme.onSurface : Theme.onSurfaceVariant
            subtitle: {
                if (modelData.id !== "gpuTemp")
                    return modelData.description ?? "";
                const selectedIndex = modelData.selectedGpuIndex ?? 0;
                const gpu = DgopService.availableGpus?.[selectedIndex];
                if (!gpu)
                    return I18n.tr("No GPU detected", "empty state when no graphics card is found");
                return gpu.driver?.toUpperCase() ?? "";
            }
            clickable: configurable
            onClicked: root.configureWidget(root.sectionId, index)

            Item {
                width: Theme.iconButtonSize
                height: Theme.iconButtonSize
                visible: !!widgetRow.modelData.warning
                anchors.verticalCenter: parent.verticalCenter

                DankIcon {
                    name: "warning"
                    size: Theme.iconSizeMedium
                    color: Theme.error
                    anchors.centerIn: parent
                }

                MouseArea {
                    id: warningArea
                    anchors.fill: parent
                    hoverEnabled: true
                }

                DankTooltipHost {
                    text: widgetRow.modelData.warning
                    target: parent
                    hoverArea: warningArea
                }
            }

            DankIcon {
                name: "chevron_right"
                size: Theme.iconSize
                color: Theme.onSurfaceVariant
                rotation: I18n.isRtl ? 180 : 0
                visible: widgetRow.configurable
                anchors.verticalCenter: parent.verticalCenter
            }

            Rectangle {
                width: Theme.dividerWidth
                height: SettingsMetrics.splitDividerHeight
                color: Theme.outlineVariant
                visible: widgetRow.configurable
                anchors.verticalCenter: parent.verticalCenter
            }

            DankNumberStepper {
                visible: widgetRow.modelData.id === "spacer"
                anchors.verticalCenter: parent.verticalCenter
                text: (widgetRow.modelData.size || 20).toString()
                decrementEnabled: (widgetRow.modelData.size || 20) > 5
                incrementEnabled: (widgetRow.modelData.size || 20) < 5000
                onDecrement: () => root.spacerSizeChanged(root.sectionId, widgetRow.index, Math.max(5, (widgetRow.modelData.size || 20) - 5))
                onIncrement: () => root.spacerSizeChanged(root.sectionId, widgetRow.index, Math.min(5000, (widgetRow.modelData.size || 20) + 5))
            }

            DankToggle {
                hideText: true
                visible: widgetRow.modelData.id !== "spacer"
                checked: widgetRow.modelData.enabled
                anchors.verticalCenter: parent.verticalCenter
                onToggled: value => root.itemEnabledChanged(root.sectionId, widgetRow.modelData.id, value)
            }

            DankActionButton {
                iconName: "close"
                iconColor: Theme.error
                Accessible.name: I18n.tr("Remove")
                anchors.verticalCenter: parent.verticalCenter
                onClicked: root.removeWidget(root.sectionId, widgetRow.index)
            }

            Rectangle {
                parent: widgetRow
                anchors.fill: parent
                anchors.margins: Theme.focusRingWidth / 2
                topLeftRadius: Math.max(0, widgetRow.topRadius - Theme.focusRingWidth / 2)
                topRightRadius: topLeftRadius
                bottomLeftRadius: Math.max(0, widgetRow.bottomRadius - Theme.focusRingWidth / 2)
                bottomRightRadius: bottomLeftRadius
                color: "transparent"
                border.width: Theme.focusRingWidth
                border.color: Theme.focusRingColor
                visible: widgetRow.highlighted && !widgetRow.dragging
            }
        }
    }

    DankButton {
        anchors.horizontalCenter: parent.horizontalCenter
        text: I18n.tr("Add widget")
        iconName: "add"
        backgroundColor: Theme.secondaryContainer
        textColor: Theme.onSecondaryContainer
        onClicked: root.addWidget(root.sectionId)
    }
}