booru: put context menu in loader, add tooltip for tags

.config/quickshell/modules/common/functions/string_utils.js

@@ -92,3 +92,20 @@ function splitMarkdownBlocks(markdown) {
 function escapeBackslashes(str) {
     return str.replace(/\\/g, '\\\\');
 }
+
+function wordWrap(str, maxLen) {
+    if (!str) return "";
+    let words = str.split(" ");
+    let lines = [];
+    let current = "";
+    for (let i = 0; i < words.length; ++i) {
+        if ((current + (current.length > 0 ? " " : "") + words[i]).length > maxLen) {
+            if (current.length > 0) lines.push(current);
+            current = words[i];
+        } else {
+            current += (current.length > 0 ? " " : "") + words[i];
+        }
+    }
+    if (current.length > 0) lines.push(current);
+    return lines.join("\n");
+}

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

@@ -7,6 +7,7 @@ import Qt.labs.platform
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Quickshell
 import Quickshell.Io
 import Quickshell.Hyprland
 import Qt5Compat.GraphicalEffects
@@ -21,9 +22,9 @@ Button {
     property string nsfwPath
     property string fileName: decodeURIComponent((imageData.file_url).substring((imageData.file_url).lastIndexOf('/') + 1))
     property string filePath: `${root.previewDownloadPath}/${root.fileName}`
+    property int maxTagStringLineLength: 50
 
     property bool showActions: false
-
     Process {
         id: downloadProcess
         running: false
@@ -95,6 +96,10 @@ Button {
 
             PointingHandInteraction {}
 
+            StyledToolTip {
+                content: StringUtils.wordWrap(root.imageData.tags, root.maxTagStringLineLength)
+            }
+
             background: Rectangle {
                 color: menuButton.down ? Appearance.transparentize(Appearance.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.6), 0.1) :
                     menuButton.hovered ? Appearance.transparentize(Appearance.mix(Appearance.m3colors.m3surface, Appearance.m3colors.m3onSurface, 0.8), 0.2) :
@@ -114,15 +119,24 @@ Button {
             }
         }
 
+        Loader {
+            id: contextMenuLoader
+            active: root.showActions
+            anchors.top: menuButton.bottom
+            anchors.right: parent.right
+            anchors.margins: 8
+
+            sourceComponent: Item {
+                width: contextMenu.width
+                height: contextMenu.height
+
                 Rectangle {
                     id: contextMenu
+                    anchors.centerIn: parent
                     opacity: root.showActions ? 1 : 0
                     visible: opacity > 0
                     radius: Appearance.rounding.small
                     color: Appearance.m3colors.m3surfaceContainer
-            anchors.top: menuButton.bottom
-            anchors.right: parent.right
-            anchors.margins: 8
                     implicitHeight: contextMenuColumnLayout.implicitHeight + radius * 2
                     implicitWidth: contextMenuColumnLayout.implicitWidth
 
@@ -156,7 +170,6 @@ Button {
                             enabled: root.imageData.source && root.imageData.source.length > 0
                             onClicked: {
                                 root.showActions = false
-                        Hyprland.dispatch("global quickshell:sidebarLeftClose")
                                 Qt.openUrlExternally(root.imageData.source)
                             }
                         }
@@ -191,6 +204,7 @@ Button {
                         }
                     }
                 }
-
+            }
+        }
     }
 }