dune-weaver/dune-weaver-touch/qml/components/ModernPatternCard.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Effects

Rectangle {
    property string name: ""
    property string preview: ""  // Changed from alias to regular property

    // Clean up the pattern name for display
    property string cleanName: {
        var cleanedName = name
        // Remove path (get everything after the last slash)
        var parts = cleanedName.split('/')
        cleanedName = parts[parts.length - 1]
        // Remove .thr extension
        cleanedName = cleanedName.replace('.thr', '')
        return cleanedName
    }

    signal clicked()

    // Watch for preview changes and update image source
    onPreviewChanged: {
        if (preview) {
            previewImage.source = "file://" + preview
        } else {
            previewImage.source = ""
        }
    }
    
    color: "white"
    radius: 12
    border.width: 1
    border.color: "#e5e7eb"

    // Drop shadow effect - DISABLED for linuxfb compatibility
    // linuxfb doesn't support layer effects properly
    // layer.enabled: true
    // layer.effect: MultiEffect {
    //     shadowEnabled: true
    //     shadowColor: "#20000000"
    //     shadowBlur: 0.8
    //     shadowVerticalOffset: 2
    //     shadowHorizontalOffset: 0
    // }
    
    // Hover/press animation
    scale: mouseArea.pressed ? 0.95 : (mouseArea.containsMouse ? 1.02 : 1.0)
    
    Behavior on scale {
        NumberAnimation { duration: 150; easing.type: Easing.OutQuad }
    }
    
    Column {
        anchors.fill: parent
        anchors.margins: 8
        spacing: 6
        
        // Preview image container
        Rectangle {
            width: parent.width
            height: parent.height - nameLabel.height - 12
            radius: 8
            color: "#f8f8f8"
            clip: true
            
            Image {
                id: previewImage
                anchors.fill: parent
                fillMode: Image.PreserveAspectFit
                source: ""  // Set via onPreviewChanged handler
                smooth: true
                cache: false  // Disable caching to ensure images load properly with linuxfb
                asynchronous: true  // Load images asynchronously

                // Loading animation
                opacity: status === Image.Ready ? 1 : 0
                Behavior on opacity {
                    NumberAnimation { duration: 200 }
                }
            }
            
            // Placeholder when no preview
            Rectangle {
                anchors.fill: parent
                color: "#f0f0f0"
                visible: previewImage.status === Image.Error || previewImage.source == ""
                radius: 8
                
                Column {
                    anchors.centerIn: parent
                    spacing: 8
                    
                    Text {
                        text: "◻"
                        font.pixelSize: 32
                        anchors.horizontalCenter: parent.horizontalCenter
                        color: "#ddd"
                    }
                    
                    Text {
                        text: "No Preview"
                        anchors.horizontalCenter: parent.horizontalCenter
                        color: "#999"
                        font.pixelSize: 12
                    }
                }
            }
        }
        
        // Pattern name
        Label {
            id: nameLabel
            text: cleanName
            width: parent.width
            elide: Label.ElideRight
            horizontalAlignment: Label.AlignHCenter
            font.pixelSize: 13
            font.weight: Font.Medium
            color: "#333"
            wrapMode: Text.Wrap
            maximumLineCount: 2
        }
    }
    
    // Click area
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onClicked: parent.clicked()
        
        // Ripple effect on click
        Rectangle {
            id: ripple
            width: 0
            height: 0
            radius: width / 2
            color: "#20000000"
            anchors.centerIn: parent
            
            NumberAnimation {
                id: rippleAnimation
                target: ripple
                property: "width"
                from: 0
                to: mouseArea.width * 1.5
                duration: 300
                easing.type: Easing.OutQuad
                
                onFinished: {
                    ripple.width = 0
                    ripple.height = 0
                }
            }
            
            Connections {
                target: mouseArea
                function onPressed() {
                    ripple.height = ripple.width
                    rippleAnimation.start()
                }
            }
        }
    }
}