DankMaterialShell/Widgets/DankSections.qml

import QtQuick
import QtQuick.Controls
import qs.Common
import qs.Widgets

Column {
    id: root

    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(var newOrder)
    signal addWidget(string sectionId)
    signal removeLastWidget(string sectionId)

    width: parent.width
    spacing: Theme.spacingM

    // Header
    Row {
        width: parent.width
        spacing: Theme.spacingM

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

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

        Item {
            width: parent.width - 60
            height: 1
        }
    }

    // Widget Items
    Column {
        id: itemsList
        width: parent.width
        spacing: Theme.spacingS

        Repeater {
            model: root.items
            
            delegate: Item {
                id: delegateItem
                width: itemsList.width
                height: 70
                
                property int visualIndex: index
                property bool held: dragArea.pressed
                property string itemId: modelData.id
                
                z: held ? 2 : 1
                
                Rectangle {
                    id: itemBackground
                    anchors.fill: parent
                    anchors.margins: 2
                    radius: Theme.cornerRadius
                    color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.8)
                    border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
                    border.width: 1

                    // Drag handle
                    Rectangle {
                        width: 40
                        height: parent.height
                        color: "transparent"
                        anchors.left: parent.left
                        anchors.leftMargin: Theme.spacingM
                        anchors.verticalCenter: parent.verticalCenter
                        
                        DankIcon {
                            name: "drag_indicator"
                            size: Theme.iconSize - 4
                            color: Theme.outline
                            anchors.centerIn: parent
                            opacity: 0.8
                        }
                    }

                    // Widget icon
                    DankIcon {
                        name: modelData.icon
                        size: Theme.iconSize
                        color: modelData.enabled ? Theme.primary : Theme.outline
                        anchors.left: parent.left
                        anchors.leftMargin: Theme.spacingM + 40 + Theme.spacingM
                        anchors.verticalCenter: parent.verticalCenter
                    }

                    // Widget info
                    Column {
                        anchors.left: parent.left
                        anchors.leftMargin: Theme.spacingM + 40 + Theme.spacingM + Theme.iconSize + Theme.spacingM
                        anchors.right: toggle.left
                        anchors.rightMargin: Theme.spacingM
                        anchors.verticalCenter: parent.verticalCenter
                        spacing: 2

                        StyledText {
                            text: modelData.text
                            font.pixelSize: Theme.fontSizeMedium
                            font.weight: Font.Medium
                            color: modelData.enabled ? Theme.surfaceText : Theme.outline
                            elide: Text.ElideRight
                            width: parent.width
                        }

                        StyledText {
                            text: modelData.description
                            font.pixelSize: Theme.fontSizeSmall
                            color: modelData.enabled ? Theme.outline : Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.6)
                            elide: Text.ElideRight
                            width: parent.width
                            wrapMode: Text.WordWrap
                        }
                    }

                    // Toggle - positioned at right edge
                    DankToggle {
                        id: toggle
                        anchors.right: parent.right
                        anchors.rightMargin: Theme.spacingM
                        anchors.verticalCenter: parent.verticalCenter
                        width: 48
                        height: 24
                        hideText: true
                        checked: modelData.enabled
                        onToggled: (checked) => {
                            root.itemEnabledChanged(root.sectionId, modelData.id, checked)
                        }
                    }

                    // Drag functionality
                    MouseArea {
                        id: dragArea
                        anchors.fill: parent
                        hoverEnabled: true
                        
                        property bool validDragStart: false
                        
                        drag.target: held && validDragStart ? delegateItem : undefined
                        drag.axis: Drag.YAxis
                        drag.minimumY: -delegateItem.height
                        drag.maximumY: itemsList.height
                        
                        onPressed: (mouse) => {
                            // Only allow dragging from the drag handle area (first 60px)
                            if (mouse.x <= 60) {
                                validDragStart = true
                                delegateItem.z = 2
                            } else {
                                validDragStart = false
                                mouse.accepted = false
                            }
                        }
                        
                        onReleased: {
                            delegateItem.z = 1
                            
                            if (drag.active && validDragStart) {
                                // Calculate new index based on position
                                var newIndex = Math.round(delegateItem.y / (delegateItem.height + itemsList.spacing))
                                newIndex = Math.max(0, Math.min(newIndex, root.items.length - 1))
                                
                                if (newIndex !== index) {
                                    var newItems = root.items.slice()
                                    var draggedItem = newItems.splice(index, 1)[0]
                                    newItems.splice(newIndex, 0, draggedItem)
                                    
                                    root.itemOrderChanged(newItems.map(item => ({id: item.id, enabled: item.enabled})))
                                }
                            }
                            
                            // Reset position
                            delegateItem.x = 0
                            delegateItem.y = 0
                            validDragStart = false
                        }
                    }

                    // Animations for drag
                    Behavior on y {
                        enabled: !dragArea.held && !dragArea.drag.active
                        NumberAnimation {
                            duration: Theme.shortDuration
                            easing.type: Theme.standardEasing
                        }
                    }
                }
            }
        }
    }

    // Add/Remove Controls
    Rectangle {
        width: parent.width * 0.5
        height: 40
        radius: Theme.cornerRadius
        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
        border.width: 1
        anchors.horizontalCenter: parent.horizontalCenter

        Row {
            anchors.centerIn: parent
            spacing: Theme.spacingL

            StyledText {
                text: "Add or remove widgets"
                font.pixelSize: Theme.fontSizeSmall
                color: Theme.outline
                anchors.verticalCenter: parent.verticalCenter
            }

            Row {
                spacing: Theme.spacingS
                anchors.verticalCenter: parent.verticalCenter

                // Add button
                DankActionButton {
                    iconName: "add"
                    iconSize: Theme.iconSize - 4
                    iconColor: Theme.primary
                    hoverColor: Theme.primaryContainer
                    onClicked: {
                        root.addWidget(root.sectionId);
                    }
                }

                // Remove button
                DankActionButton {
                    iconName: "remove"
                    iconSize: Theme.iconSize - 4
                    iconColor: Theme.error
                    hoverColor: Qt.rgba(Theme.error.r, Theme.error.g, Theme.error.b, 0.1)
                    enabled: root.items.length > 0
                    opacity: root.items.length > 0 ? 1.0 : 0.5
                    onClicked: {
                        if (root.items.length > 0) {
                            root.removeLastWidget(root.sectionId);
                        }
                    }
                }
            }
        }
    }
}