Preview theme colors in the theme picker

bin/blob-menu-select

@@ -7,8 +7,9 @@
 # blob:examples=blob menu select Format jpg png|blob-menu-select Resolution 4k 1080p 720p -- --width 400
 
 # An option may lead with an icon, as "<glyph><TAB><label>", and may trail a
-# subtext shown under the label, as "<glyph><TAB><label><TAB><subtext>". The
+# subtext shown under the label, as "<glyph><TAB><label><TAB><subtext>", and
-# menu shows the glyph but never returns it. A plain option returns the label
+# then space-separated hex colors drawn as swatches, as a fourth field. The
+# menu shows the glyph and swatches but never returns them. A plain option returns the label
 # alone; an option with a subtext returns "<label><TAB><subtext>", so callers
 # with same-named rows get the subtext back as the stable key.
 

bin/blob-theme-menu

@@ -20,8 +20,27 @@ current_mode() {
   fi
 }
 
+theme_swatches() {
+  awk -F'"' '
+    /^[a-z_]+ *= *"#[0-9A-Fa-f]+"/ {
+      split($1, key_parts, /[ =]/)
+      colors[key_parts[1]] = $2
+    }
+    END {
+      count = split("background foreground accent red green yellow blue magenta cyan", swatch_keys, " ")
+      for (index_number = 1; index_number <= count; index_number++) {
+        color = colors[swatch_keys[index_number]]
+        if (color != "") printf "%s%s", (printed++ ? " " : ""), color
+      }
+    }
+  ' "$1"
+}
+
 list_theme_rows() {
-  printf '\tDynamic (from wallpaper)\tblob-dynamic\n'
+  local dynamic_colors="$current_dir/theme/colors.toml"
+  local dynamic_swatches=""
+  [ "$(current_mode)" = "dynamic" ] && [ -f "$dynamic_colors" ] && dynamic_swatches=$(theme_swatches "$dynamic_colors")
+  printf '\tDynamic (from wallpaper)\tblob-dynamic\t%s\n' "$dynamic_swatches"
 
   {
     find "$user_themes_dir" -mindepth 1 -maxdepth 1 -type d 2>/dev/null
@@ -30,7 +49,7 @@ list_theme_rows() {
     [ -f "$theme_dir/colors.toml" ] || continue
     slug=$(basename "$theme_dir")
     [ "$slug" = "blob-dynamic" ] && continue
-    printf '\t%s\t%s\n' "$(prettify "$slug")" "$slug"
+    printf '\t%s\t%s\t%s\n' "$(prettify "$slug")" "$slug" "$(theme_swatches "$theme_dir/colors.toml")"
   done | sort -u -t$'\t' -k3,3
 }
 

shell/plugins/menu/Menu.qml

@@ -519,13 +519,15 @@ Item {
     var query = root.filterText.trim().toLowerCase()
     for (var i = 0; i < root.dmenuOptions.length; i++) {
       // An option is "<label>", "<glyph>\t<label>", or
-      // "<glyph>\t<label>\t<subtext>". The glyph never comes back with the
+      // "<glyph>\t<label>\t<subtext>", optionally followed by
-      // selection; the subtext renders under the label, filters alongside it,
+      // "\t<swatches>". The glyph never comes back with the selection; the
-      // and returns with the selection as a stable key for same-named rows.
+      // subtext renders under the label, filters alongside it, and returns
+      // with the selection as a stable key for same-named rows.
       var parts = String(root.dmenuOptions[i] || "").split("\t")
       var icon = parts.length > 1 ? parts.shift() : ""
       var label = parts.shift() || ""
-      var detail = parts.join("\t")
+      var detail = parts.shift() || ""
+      var swatches = parts.join(" ")
       if (query && label.toLowerCase().indexOf(query) < 0
           && detail.toLowerCase().indexOf(query) < 0) continue
       displayModel.append({
@@ -538,6 +540,7 @@ Item {
         label: label,
         target: "",
         detail: detail,
+        swatches: swatches,
         path: "",
         childCount: 0,
         action: "",
@@ -1209,6 +1212,7 @@ Item {
               required property string label
               required property string target
               required property string detail
+              required property string swatches
               required property string path
               required property string action
               required property int childCount
@@ -1272,7 +1276,7 @@ Item {
                 id: contentColumn
                 anchors.left: row.hasIcon ? iconText.right : parent.left
                 anchors.leftMargin: row.hasIcon ? Style.space(6) : root.rowReservedBorderLeft + Style.space(18)
-                anchors.right: trail.left
+                anchors.right: swatchRow.left
                 anchors.rightMargin: Style.space(6)
                 anchors.verticalCenter: parent.verticalCenter
                 spacing: Style.space(3)
@@ -1302,6 +1306,28 @@ Item {
                 }
               }
 
+              Row {
+                id: swatchRow
+                anchors.right: trail.left
+                anchors.rightMargin: Style.space(6)
+                anchors.verticalCenter: parent.verticalCenter
+                spacing: Style.space(4)
+
+                Repeater {
+                  model: row.swatches.split(" ").filter(function(color) { return color.length > 0 })
+
+                  Rectangle {
+                    required property string modelData
+                    width: Style.space(16)
+                    height: Style.space(16)
+                    radius: Style.space(4)
+                    color: modelData
+                    border.width: 1
+                    border.color: Util.alpha(row.hasCursor ? root.selectedText : root.foreground, 0.35)
+                  }
+                }
+              }
+
               Row {
                 id: trail
                 width: Style.space(14)

shell/plugins/menu/MenuModel.js

@@ -363,6 +363,7 @@ function displayRow(items, itemOrder, checkedResults, entry, detail, score, sect
     label: labelFor(entry, checkedResults),
     target: target,
     detail: detail || "",
+    swatches: "",
     path: pathFor(items, entry.id),
     childCount: (entry.kind === "menu" || entry.kind === "link") ? childCount(items, itemOrder, target) : 0,
     action: entry.action || "",