clipboard: improve image thumbnail (#1759)

- thumbnail image is now bigger
- circular mask has been replaced with rounded rectangular mask

quickshell/Modals/Clipboard/ClipboardConstants.qml

@@ -12,7 +12,7 @@ Singleton {
     readonly property int popoutWidth: 550
     readonly property int popoutHeight: 500
     readonly property int itemHeight: 72
-    readonly property int thumbnailSize: 48
+    readonly property int thumbnailSize: 100
     readonly property int retryInterval: 50
     readonly property int viewportBuffer: 100
     readonly property int extendedBuffer: 200

quickshell/Modals/Clipboard/ClipboardEntry.qml

@@ -84,7 +84,8 @@ Rectangle {
         anchors.right: actionButtons.left
         anchors.rightMargin: Theme.spacingM
         anchors.verticalCenter: parent.verticalCenter
-        height: contentColumn.implicitHeight
+        // height: contentColumn.implicitHeight
+        height: ClipboardConstants.itemHeight
         clip: true
 
         ClipboardThumbnail {
@@ -92,7 +93,7 @@ Rectangle {
             anchors.left: parent.left
             anchors.verticalCenter: parent.verticalCenter
             width: entryType === "image" ? ClipboardConstants.thumbnailSize : Theme.iconSize
-            height: entryType === "image" ? ClipboardConstants.thumbnailSize : Theme.iconSize
+            height: entryType === "image" ? ClipboardConstants.itemHeight - 4 : Theme.iconSize // 100 - 4 = 96, 96:72 = 4:3
             entry: root.entry
             entryType: root.entryType
             modal: root.modal

quickshell/Modals/Clipboard/ClipboardThumbnail.qml

@@ -137,23 +137,23 @@ Item {
         anchors.margins: 2
         source: thumbnailImage
         maskEnabled: true
-        maskSource: clipboardCircularMask
+        maskSource: clipboardRoundedRectangularMask
         visible: entryType === "image" && thumbnailImage.status === Image.Ready && thumbnailImage.source != ""
         maskThresholdMin: 0.5
         maskSpreadAtMin: 1
     }
 
     Item {
-        id: clipboardCircularMask
-        width: ClipboardConstants.thumbnailSize - 4
-        height: ClipboardConstants.thumbnailSize - 4
+        id: clipboardRoundedRectangularMask
+        width: ClipboardConstants.thumbnailSize
+        height: ClipboardConstants.itemHeight - 4
         layer.enabled: true
         layer.smooth: true
         visible: false
 
         Rectangle {
             anchors.fill: parent
-            radius: width / 2
+            radius: Theme.cornerRadius / 2 // Thumbnail corner radius is divided by 2 so it doesnt look weird on large corner radius (eg: 32px)
             color: "black"
             antialiasing: true
         }