launcher v2: support CachingImage in icon renderer

quickshell/Modals/DankLauncherV2/TileItem.qml

@@ -21,24 +21,16 @@ Rectangle {
     border.width: isSelected ? 2 : 0
     border.color: Theme.primary
 
-    readonly property string imageSource: {
+    readonly property string iconValue: {
-        if (!item?.data)
+        if (!item)
             return "";
         var data = item.data;
-        if (data.imageUrl)
+        if (data?.imageUrl)
-            return data.imageUrl;
+            return "image:" + data.imageUrl;
-        if (data.imagePath)
+        if (data?.imagePath)
-            return data.imagePath;
+            return "image:" + data.imagePath;
-        if (data.path && isImageFile(data.path))
+        if (data?.path && isImageFile(data.path))
-            return data.path;
+            return "image:" + data.path;
-        return "";
-    }
-
-    readonly property bool useImage: imageSource.length > 0
-
-    readonly property string iconValue: {
-        if (!item || useImage)
-            return "";
         switch (item.iconType) {
         case "material":
         case "nerd":
@@ -71,22 +63,12 @@ Rectangle {
             color: Theme.surfaceContainerHigh
             clip: true
 
-            CachingImage {
-                anchors.fill: parent
-                visible: root.useImage
-                imagePath: root.imageSource
-                maxCacheSize: 256
-            }
-
             AppIconRenderer {
-                anchors.centerIn: parent
+                anchors.fill: parent
-                visible: !root.useImage
-                width: Math.min(parent.width, parent.height) * 0.6
-                height: width
                 iconValue: root.iconValue
-                iconSize: width
+                iconSize: Math.min(parent.width, parent.height)
                 fallbackText: (root.item?.name?.length > 0) ? root.item.name.charAt(0).toUpperCase() : "?"
-                materialIconSizeAdjustment: width * 0.3
+                materialIconSizeAdjustment: iconSize * 0.3
             }
 
             Rectangle {

quickshell/Widgets/AppIconRenderer.qml

@@ -26,8 +26,10 @@ Item {
     readonly property bool isUnicode: iconValue.startsWith("unicode:")
     readonly property bool isSvgCorner: iconValue.startsWith("svg+corner:")
     readonly property bool isSvg: !isSvgCorner && iconValue.startsWith("svg:")
+    readonly property bool isImage: iconValue.startsWith("image:")
     readonly property string materialName: isMaterial ? iconValue.substring(9) : ""
     readonly property string unicodeChar: isUnicode ? iconValue.substring(8) : ""
+    readonly property string imagePath: isImage ? iconValue.substring(6) : ""
     readonly property string svgSource: {
         if (isSvgCorner) {
             const parts = iconValue.substring(11).split("|");
@@ -38,7 +40,7 @@ Item {
         return "";
     }
     readonly property string svgCornerIcon: isSvgCorner ? (iconValue.substring(11).split("|")[1] || "") : ""
-    readonly property string iconPath: isMaterial || isUnicode || isSvg || isSvgCorner ? "" : Quickshell.iconPath(iconValue, true) || DesktopService.resolveIconPath(iconValue)
+    readonly property string iconPath: isMaterial || isUnicode || isSvg || isSvgCorner || isImage ? "" : Quickshell.iconPath(iconValue, true) || DesktopService.resolveIconPath(iconValue)
 
     visible: iconValue !== undefined && iconValue !== ""
 
@@ -66,6 +68,14 @@ Item {
         visible: root.isSvg || root.isSvgCorner
     }
 
+    CachingImage {
+        id: cachingImg
+        anchors.fill: parent
+        imagePath: root.imagePath
+        maxCacheSize: root.iconSize * 2
+        visible: root.isImage && status === Image.Ready
+    }
+
     IconImage {
         id: iconImg
 
@@ -74,7 +84,7 @@ Item {
         backer.sourceSize: Qt.size(root.iconSize, root.iconSize)
         mipmap: true
         asynchronous: true
-        visible: !root.isMaterial && !root.isUnicode && !root.isSvg && !root.isSvgCorner && root.iconPath !== "" && status === Image.Ready
+        visible: !root.isMaterial && !root.isUnicode && !root.isSvg && !root.isSvgCorner && !root.isImage && root.iconPath !== "" && status === Image.Ready
     }
 
     Rectangle {
@@ -85,7 +95,7 @@ Item {
         anchors.rightMargin: root.fallbackRightMargin
         anchors.topMargin: root.fallbackTopMargin
         anchors.bottomMargin: root.fallbackBottomMargin
-        visible: !root.isMaterial && !root.isUnicode && !root.isSvg && !root.isSvgCorner && (root.iconPath === "" || iconImg.status !== Image.Ready)
+        visible: !root.isMaterial && !root.isUnicode && !root.isSvg && !root.isSvgCorner && !root.isImage && (root.iconPath === "" || iconImg.status !== Image.Ready)
         color: root.fallbackBackgroundColor
         radius: Theme.cornerRadius
         border.width: 0