plugins: use grid-style plugin browser

port 1.5

quickshell/Modules/Settings/PluginBadge.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Rectangle {
+    id: root
+
+    property string label: ""
+    property string iconName: ""
+    property color tone: Theme.primary
+    property bool onImage: false
+
+    height: 20
+    width: content.implicitWidth + Theme.spacingS * 2
+    radius: height / 2
+    color: onImage ? Theme.withAlpha(Theme.surfaceContainerHigh, 0.92) : Theme.withAlpha(tone, 0.12)
+    border.color: Theme.withAlpha(tone, onImage ? 0.5 : 0.35)
+    border.width: 1
+
+    Row {
+        id: content
+        anchors.centerIn: parent
+        spacing: Theme.spacingXXS
+
+        DankIcon {
+            name: root.iconName
+            size: 11
+            color: root.tone
+            visible: root.iconName.length > 0
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+            text: root.label
+            font.pixelSize: Theme.fontSizeSmall - 2
+            font.weight: Font.Medium
+            color: root.tone
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+}

quickshell/Widgets/CachingImage.qml

@@ -94,27 +94,36 @@ Item {
         }
     }
 
+    // Derives everything from a local snapshot of imagePath: sibling property
+    // bindings (isRemoteUrl, encodedImagePath, ...) are still stale when
+    // onImagePathChanged runs, so reading them here routes remote URLs down
+    // the local-file branch on the first path change
     function resolveSource() {
-        if (!imagePath) {
+        const path = imagePath;
+        if (!path) {
             _fromCache = false;
             staticImg.source = "";
             return;
         }
-        if (isAnimated)
+        const lower = path.toLowerCase();
+        if (animate && (lower.endsWith(".gif") || lower.endsWith(".webp")))
             return;
-        if (isRemoteUrl) {
+        if (path.startsWith("http://") || path.startsWith("https://")) {
             _fromCache = false;
-            staticImg.source = imagePath;
+            staticImg.source = path;
             return;
         }
-        if (!cachePath) {
+        const stripped = path.startsWith("file://") ? path.substring(7) : path;
+        const encoded = "file://" + stripped.split('/').map(s => encodeURIComponent(s)).join('/');
+        const hash = djb2Hash(stripped);
+        if (!hash) {
             _fromCache = false;
-            staticImg.source = encodedImagePath;
+            staticImg.source = encoded;
             return;
         }
         // Cache-first; a miss errors and falls back to encodedImagePath
         _fromCache = true;
-        staticImg.source = cachePath;
+        staticImg.source = `${Paths.stringify(Paths.imagecache)}/${hash}@${maxCacheSize}x${maxCacheSize}.png`;
     }
 
     onImagePathChanged: resolveSource()