move anime stuff in their own folder

.config/quickshell/modules/sidebarLeft/anime/BooruImage.qml

@@ -0,0 +1,49 @@
+import "root:/"
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Hyprland
+import Qt5Compat.GraphicalEffects
+
+Button {
+    id: root
+    property var imageData
+    property var rowHeight
+
+    padding: 0
+
+    PointingHandInteraction {}
+
+    onClicked: {
+        Hyprland.dispatch(`exec xdg-open ${imageData.source}`)
+    }
+
+    background: Rectangle {
+        implicitWidth: imageData.width
+        implicitHeight: imageData.height
+        radius: Appearance.rounding.small
+        color: Appearance.colors.colLayer2
+    }
+
+    contentItem: Image {
+        id: imageData
+        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: imageData.width
+                height: imageData.height
+                radius: Appearance.rounding.small
+            }
+        }
+    }
+}

.config/quickshell/modules/sidebarLeft/anime/BooruResponse.qml

@@ -0,0 +1,185 @@
+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.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: responsePadding
+        spacing: root.imageSpacing
+
+        // Provider name
+        RowLayout {
+            Rectangle {
+                id: providerNameWrapper
+                color: Appearance.m3colors.m3secondaryContainer
+                radius: Appearance.rounding.small
+                implicitWidth: providerName.implicitWidth + 10 * 2
+                implicitHeight: Math.max(providerName.implicitHeight + 5 * 2, 30)
+                Layout.alignment: Qt.AlignVCenter
+
+                StyledText {
+                    id: providerName
+                    anchors.centerIn: parent
+                    font.pixelSize: Appearance.font.pixelSize.large
+                    color: Appearance.m3colors.m3onSecondaryContainer
+                    text: Booru.providers[root.responseData.provider].name
+                }
+            }
+            Item { Layout.fillWidth: true }
+            Rectangle {
+                color: Appearance.colors.colLayer2
+                radius: Appearance.rounding.small
+                implicitWidth: Math.max(pageNumber.implicitWidth + 10 * 2, 20)
+                implicitHeight: pageNumber.implicitHeight + 5 * 2
+                Layout.alignment: Qt.AlignVCenter
+
+                StyledText {
+                    id: pageNumber
+                    anchors.centerIn: parent
+                    font.pixelSize: Appearance.font.pixelSize.small
+                    color: Appearance.colors.colOnLayer2
+                    text: `Page ${root.responseData.page}`
+                }
+            }
+        }
+
+        // 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
+                    delegate: BooruImage {
+                        imageData: modelData
+                        rowHeight: imageRow.rowHeight
+                    }
+                }
+            }
+        }
+    }
+}

.config/quickshell/modules/sidebarLeft/anime/BooruTagButton.qml

@@ -0,0 +1,34 @@
+import "root:/modules/common"
+import "root:/modules/common/widgets"
+import "root:/services"
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Notifications
+
+Button {
+    id: button
+    property string buttonText
+
+    implicitHeight: 30
+    leftPadding: 10
+    rightPadding: 10
+
+    // PointingHandInteraction {}
+
+    background: Rectangle {
+        radius: Appearance.rounding.small
+        color: (button.down ? Appearance.colors.colSurfaceContainerHighestActive : 
+            button.hovered ? Appearance.colors.colSurfaceContainerHighestHover :
+            Appearance.m3colors.m3surfaceContainerHighest)
+        
+
+    }
+
+    contentItem: StyledText {
+        horizontalAlignment: Text.AlignHCenter
+        text: buttonText
+        color: Appearance.m3colors.m3onSurface
+    }
+}