add: DankColorSwatch component & settings sync

quickshell/Widgets/DankColorSwatch.qml

@@ -0,0 +1,45 @@
+import QtQuick
+import qs.Common
+
+Item {
+    id: root
+
+    property color swatchColor: "transparent"
+    property color ringColor: Theme.outline
+    property real minPreviewAlpha: 0.4
+    readonly property bool translucent: swatchColor.a > 0 && swatchColor.a < 1
+    readonly property color displayColor: translucent ? Qt.rgba(swatchColor.r, swatchColor.g, swatchColor.b, Math.max(swatchColor.a, minPreviewAlpha)) : swatchColor
+
+    Loader {
+        anchors.fill: parent
+        active: root.translucent
+        sourceComponent: Component {
+            Canvas {
+                onPaint: {
+                    const ctx = getContext("2d");
+                    ctx.reset();
+                    ctx.beginPath();
+                    ctx.arc(width / 2, height / 2, width / 2, 0, 2 * Math.PI);
+                    ctx.clip();
+                    const s = Math.max(2, Math.round(width / 4));
+                    for (let y = 0; y < height; y += s) {
+                        for (let x = 0; x < width; x += s) {
+                            ctx.fillStyle = (((x / s) + (y / s)) % 2 === 0) ? "#ffffff" : "#bdbdbd";
+                            ctx.fillRect(x, y, s, s);
+                        }
+                    }
+                }
+                onVisibleChanged: if (visible)
+                    requestPaint()
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: width / 2
+        color: root.displayColor
+        border.color: root.ringColor
+        border.width: 1
+    }
+}

quickshell/Widgets/DankDropdown.qml

@@ -161,19 +161,14 @@ Item {
             anchors.rightMargin: Theme.spacingS
             spacing: Theme.spacingS
 
-            Rectangle {
+            DankColorSwatch {
                 id: triggerSwatch
 
-                property var swatchColor: root.optionColorMap[root.currentValue]
-
                 width: 16
                 height: 16
-                radius: 8
-                color: swatchColor !== undefined ? swatchColor : "transparent"
-                border.color: Theme.outline
-                border.width: 1
                 anchors.verticalCenter: parent.verticalCenter
-                visible: swatchColor !== undefined
+                visible: root.optionColorMap[root.currentValue] !== undefined
+                swatchColor: visible ? root.optionColorMap[root.currentValue] : "transparent"
             }
 
             DankIcon {
@@ -473,17 +468,15 @@ Item {
                             anchors.verticalCenter: parent.verticalCenter
                             spacing: Theme.spacingS
 
-                            Rectangle {
+                            DankColorSwatch {
                                 id: optionSwatch
 
                                 width: 16
                                 height: 16
-                                radius: 8
-                                color: delegateRoot.swatchColor !== undefined ? delegateRoot.swatchColor : "transparent"
-                                border.color: delegateRoot.isCurrentValue ? Theme.primary : Theme.outline
-                                border.width: 1
                                 anchors.verticalCenter: parent.verticalCenter
                                 visible: delegateRoot.swatchColor !== undefined
+                                swatchColor: visible ? delegateRoot.swatchColor : "transparent"
+                                ringColor: delegateRoot.isCurrentValue ? Theme.primary : Theme.outline
                             }
 
                             DankIcon {