booru: more sexy

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

@@ -12,7 +12,13 @@ Button {
     property var imageData
     property var rowHeight
 
+    // onImageDataChanged: {
+    //     console.log("Image data changed:", imageData)
+    // }
+
     padding: 0
+    implicitWidth: imageObject.width
+    implicitHeight: imageObject.height
 
     PointingHandInteraction {}
 
@@ -21,27 +27,27 @@ Button {
     }
 
     background: Rectangle {
-        implicitWidth: imageData.width
-        implicitHeight: imageData.height
+        implicitWidth: imageObject.width
+        implicitHeight: imageObject.height
         radius: Appearance.rounding.small
         color: Appearance.colors.colLayer2
     }
 
     contentItem: Image {
-        id: imageData
+        id: imageObject
         anchors.fill: parent
-        sourceSize.width: imageRow.rowHeight * modelData.aspect_ratio
-        sourceSize.height: imageRow.rowHeight
+        sourceSize.width: root.rowHeight * modelData.aspect_ratio
+        sourceSize.height: root.rowHeight
         fillMode: Image.PreserveAspectFit
         source: modelData.preview_url
-        width: imageRow.rowHeight * modelData.aspect_ratio
-        height: imageRow.rowHeight
+        width: root.rowHeight * modelData.aspect_ratio
+        height: root.rowHeight
 
         layer.enabled: true
         layer.effect: OpacityMask {
             maskSource: Rectangle {
-                width: imageData.width
-                height: imageData.height
+                width: imageObject.width
+                height: imageObject.height
                 radius: Appearance.rounding.small
             }
         }

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

@@ -14,9 +14,13 @@ import Qt5Compat.GraphicalEffects
 
 Rectangle {
     id: root
-    property var responseData
+    property var responseData: {}
     property var tagInputField
 
+    onResponseDataChanged: {
+        console.log("Response data changed:", responseData)
+    }
+
     property real availableWidth: parent?.width
     property real rowTooShortThreshold: 100
     property real imageSpacing: 5
@@ -38,9 +42,8 @@ Rectangle {
         anchors.margins: responsePadding
         spacing: root.imageSpacing
 
-        // Provider name
-        RowLayout {
-            Rectangle {
+        RowLayout { // Header
+            Rectangle { // Provider name
                 id: providerNameWrapper
                 color: Appearance.m3colors.m3secondaryContainer
                 radius: Appearance.rounding.small
@@ -52,31 +55,33 @@ Rectangle {
                     id: providerName
                     anchors.centerIn: parent
                     font.pixelSize: Appearance.font.pixelSize.large
+                    font.weight: Font.DemiBold
                     color: Appearance.m3colors.m3onSecondaryContainer
                     text: Booru.providers[root.responseData.provider].name
                 }
             }
             Item { Layout.fillWidth: true }
-            Rectangle {
+            Rectangle { // Page number
+                visible: root.responseData.page != "" && root.responseData.page > 0
                 color: Appearance.colors.colLayer2
                 radius: Appearance.rounding.small
-                implicitWidth: Math.max(pageNumber.implicitWidth + 10 * 2, 20)
+                implicitWidth: Math.max(pageNumber.implicitWidth + 10 * 2, 30)
                 implicitHeight: pageNumber.implicitHeight + 5 * 2
-                Layout.alignment: Qt.AlignVCenter
+                Layout.alignment: Qt.AlignTop
 
                 StyledText {
                     id: pageNumber
                     anchors.centerIn: parent
-                    font.pixelSize: Appearance.font.pixelSize.small
+                    font.pixelSize: Appearance.font.pixelSize.smaller
                     color: Appearance.colors.colOnLayer2
                     text: `Page ${root.responseData.page}`
                 }
             }
         }
 
-        // Tags
-        Flickable {
+        Flickable { // Tag strip
             id: tagsFlickable
+            visible: root.responseData.tags.length > 0
             Layout.alignment: Qt.AlignLeft
             Layout.fillWidth: {
                 console.log(root.responseData)
@@ -128,6 +133,28 @@ Rectangle {
             }
         }
 
+        StyledText { // Message
+            id: messageText
+            Layout.fillWidth: true
+            visible: root.responseData.message.length > 0
+            font.pixelSize: Appearance.font.pixelSize.small
+            color: Appearance.colors.colOnLayer1
+            text: root.responseData.message
+            wrapMode: Text.WordWrap
+            Layout.margins: responsePadding
+            textFormat: Text.MarkdownText
+            onLinkActivated: (link) => {
+                Qt.openUrlExternally(link)
+                Hyprland.dispatch("global quickshell:sidebarLeftClose")
+            }
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.NoButton // Only for hover
+                hoverEnabled: true
+                cursorShape: parent.hoveredLink !== "" ? Qt.PointingHandCursor : Qt.ArrowCursor
+            }
+        }
+
         Repeater {
             model: {
                 // Group two images every row, ensuring they are of the same height

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

@@ -22,8 +22,6 @@ Button {
         color: (button.down ? Appearance.colors.colSurfaceContainerHighestActive : 
             button.hovered ? Appearance.colors.colSurfaceContainerHighestHover :
             Appearance.m3colors.m3surfaceContainerHighest)
-        
-
     }
 
     contentItem: StyledText {