illogical-impulse/.config/quickshell/modules/sidebarLeft/BooruResponse.qml

import "root:/"
import "root:/services"
import "root:/modules/common"
import "root:/modules/common/widgets"
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Io
import Quickshell
import Quickshell.Widgets
import Quickshell.Wayland
import Quickshell.Hyprland
import Qt5Compat.GraphicalEffects

Rectangle {
    id: root
    property var responseData
    property var tagInputField

    property real availableWidth: parent?.width
    property real rowTooShortThreshold: 100
    property real imageSpacing: 5
    property real responsePadding: 5

    anchors.left: parent?.left
    anchors.right: parent?.right
    implicitHeight: columnLayout.implicitHeight + root.responsePadding * 2

    radius: Appearance.rounding.normal
    color: Appearance.colors.colLayer1

    ColumnLayout {
        id: columnLayout
        
        anchors.fill: parent
        anchors.margins: responsePadding
        spacing: root.imageSpacing

        // Header: provider name
        Rectangle {
            id: providerNameWrapper
            color: Appearance.m3colors.m3secondaryContainer
            radius: Appearance.rounding.small
            // height: providerName.implicitHeight
            implicitWidth: providerName.implicitWidth + 10 * 2
            implicitHeight: Math.max(providerName.implicitHeight + 5 * 2, 30)
            Layout.alignment: Qt.AlignLeft

            StyledText {
                id: providerName
                anchors.centerIn: parent
                font.pixelSize: Appearance.font.pixelSize.large
                color: Appearance.m3colors.m3onSecondaryContainer
                text: Booru.providers[root.responseData.provider].name
            }
        }

        // Tags
        Flickable {
            id: tagsFlickable
            Layout.alignment: Qt.AlignLeft
            Layout.fillWidth: {
                console.log(root.responseData)
                return true
            }
            implicitHeight: tagRowLayout.implicitHeight
            // height: tagRowLayout.implicitHeight
            contentWidth: tagRowLayout.implicitWidth

            layer.enabled: true
            layer.effect: OpacityMask {
                maskSource: Rectangle {
                    width: tagsFlickable.width
                    height: tagsFlickable.height
                    radius: Appearance.rounding.small
                }
            }

            Behavior on height {
                NumberAnimation {
                    duration: Appearance.animation.elementDecel.duration
                    easing.type: Appearance.animation.elementDecel.type
                }
            }
            Behavior on implicitHeight {
                NumberAnimation {
                    duration: Appearance.animation.elementDecel.duration
                    easing.type: Appearance.animation.elementDecel.type
                }
            }

            RowLayout {
                id: tagRowLayout
                Layout.alignment: Qt.AlignBottom

                Repeater {
                    id: tagRepeater
                    model: root.responseData.tags

                    BooruTagButton {
                        Layout.fillWidth: false
                        buttonText: modelData
                        onClicked: {
                            root.tagInputField.text += " " + modelData
                        }
                    }
                }
                
            }
        }

        Repeater {
            model: {
                // Group two images every row, ensuring they are of the same height
                // If the height ends up being too small, put one image in the row and continue
                // In other words, this is similar to Android's gallery layout at largest zoom level
                let i = 0;
                let rows = [];
                const responseList = root.responseData.images;
                while (i < responseList.length) {
                    let row = {
                        height: 0,
                        images: [],
                    };
                    if (i + 1 < responseList.length) {
                        const img1 = responseList[i];
                        const img2 = responseList[i + 1];
                        // Calculate combined height if both are in the same row
                        // Let h = row height, w1 = h * aspect1, w2 = h * aspect2
                        // w1 + w2 = availableWidth => h = availableWidth / (aspect1 + aspect2)
                        const combinedAspect = img1.aspect_ratio + img2.aspect_ratio;
                        const rowHeight = (availableWidth - root.imageSpacing - responsePadding * 2) / combinedAspect;
                        if (rowHeight >= rowTooShortThreshold) {
                            row.height = rowHeight;
                            row.images.push(img1);
                            row.images.push(img2);
                            rows.push(row);
                            i += 2;
                            continue;
                        }
                    }
                    // Otherwise, put only one image in the row
                    rows.push({
                        height: availableWidth / responseList[i].aspect_ratio,
                        images: [responseList[i]],
                    });
                    i += 1;
                }
                return rows;
            }
            delegate: RowLayout {
                id: imageRow
                property var rowHeight: modelData.height
                spacing: root.imageSpacing

                Repeater {
                    model: modelData.images
                    Rectangle {
                        implicitWidth: image.width
                        implicitHeight: image.height
                        radius: Appearance.rounding.small
                        color: Appearance.colors.colLayer2
                        Image {
                            id: image
                            anchors.fill: parent
                            sourceSize.width: imageRow.rowHeight * modelData.aspect_ratio
                            sourceSize.height: imageRow.rowHeight
                            fillMode: Image.PreserveAspectFit
                            source: modelData.preview_url
                            width: imageRow.rowHeight * modelData.aspect_ratio
                            height: imageRow.rowHeight

                            layer.enabled: true
                            layer.effect: OpacityMask {
                                maskSource: Rectangle {
                                    width: image.width
                                    height: image.height
                                    radius: Appearance.rounding.small
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}