qtmaildir settings: a colour picker for colour fields

An account's chip colour and each tag colour were #rrggbb typed by
hand. A swatch beside each now shows the colour and opens Qt's own
ColorDialog, which writes the choice back as #rrggbb; typing still
works. The add-tag row has one too, filling its field. Setting.qml
gains a colour flag rather than a second component, since a colour
key is an ordinary text key with a swatch.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

5 files changed, 86 insertions, 12 deletions

diff --git a/desktop/modules/qtmaildir/AccountsPage.qml b/desktop/modules/qtmaildir/AccountsPage.qml
index 2f82154..8a40333 100644
--- a/desktop/modules/qtmaildir/AccountsPage.qml
+++ b/desktop/modules/qtmaildir/AccountsPage.qml
@@ -81,7 +81,7 @@ Column {
                           hint: "Run without a shell: an absolute path and plain arguments, e.g. /usr/bin/msmtp -a work -t." }
                 Setting { section: card.sec; key: "label"; label: "Chip label"; placeholder: card.modelData }
                 Setting { section: card.sec; key: "color"; label: "Chip colour"; placeholder: "generated"
-                          hint: "#rrggbb" }
+                          hint: "#rrggbb, or pick one with the swatch"; colour: true }
                 Setting { section: card.sec; key: "channel"; label: "mbsync channel"; placeholder: card.modelData }
             }
         }
diff --git a/desktop/modules/qtmaildir/ColourPick.qml b/desktop/modules/qtmaildir/ColourPick.qml
new file mode 100644
index 0000000..96933a9
--- /dev/null
+++ b/desktop/modules/qtmaildir/ColourPick.qml
@@ -0,0 +1,53 @@
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+import QtQuick
+import QtQuick.Dialogs
+import "../.."
+
+// A swatch of the current colour that opens the platform's colour dialog.
+// picked carries the choice as #rrggbb, the form qtmaildir.conf uses.
+Rectangle {
+    id: pick
+    property string colour: ""
+    signal picked(string hex)
+
+    width: 34; height: 34
+    radius: 8
+    color: /^#[0-9a-fA-F]{6}$/.test(pick.colour) ? pick.colour : Theme.surface
+    border.width: 1
+    border.color: area.containsMouse ? Theme.accent : Qt.alpha(Theme.text, 0.2)
+
+    Text {
+        anchors.centerIn: parent
+        visible: !/^#[0-9a-fA-F]{6}$/.test(pick.colour)
+        // nf-fa-eyedropper, present in Inconsolata Nerd Font.
+        text: ""
+        font { family: Theme.iconFamily; pixelSize: Theme.fontSize - 2 }
+        color: Theme.subtext
+    }
+
+    MouseArea {
+        id: area
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: dialog.open()
+    }
+
+    ColorDialog {
+        id: dialog
+        selectedColor: /^#[0-9a-fA-F]{6}$/.test(pick.colour) ? pick.colour : "#808080"
+        // toString() is #rrggbb for an opaque colour, and the dialog offers
+        // no alpha unless asked to; the slice is a guard all the same.
+        onAccepted: pick.picked(selectedColor.toString().slice(0, 7))
+    }
+}
diff --git a/desktop/modules/qtmaildir/README.md b/desktop/modules/qtmaildir/README.md
index 4bbcbfd..250ceb3 100644
--- a/desktop/modules/qtmaildir/README.md
+++ b/desktop/modules/qtmaildir/README.md
@@ -29,6 +29,10 @@ to the next `[`": values hold brackets (`[Gmail]/Bozze`), which is the trap
 AGENTS.md records. Values follow QSettings' reading: an unquoted `;` starts a
 comment, and a value holding `;` or `"` is written quoted.
 
+Colours (an account's chip, a tag's) have a swatch beside the field that
+opens Qt's colour dialog and writes the choice as `#rrggbb`; typing one
+still works.
+
 The shortcut actions offered are copied from qtmaildir's
 `KeyMap::knownActions()`, a `ponytail:` ceiling in `TagsKeysPage.qml`: a
 new action there needs adding here, and meanwhile can be typed, since the
diff --git a/desktop/modules/qtmaildir/Setting.qml b/desktop/modules/qtmaildir/Setting.qml
index 59e9c1b..66d0a46 100644
--- a/desktop/modules/qtmaildir/Setting.qml
+++ b/desktop/modules/qtmaildir/Setting.qml
@@ -26,6 +26,8 @@ Column {
     property string kind: "text"
     property real min: -Infinity
     property real max: Infinity
+    // A #rrggbb key: a swatch beside the field opens a colour dialog.
+    property bool colour: false
     // What a search hit scrolls to.
     objectName: section + "/" + key
     width: parent ? parent.width : 0
@@ -61,8 +63,17 @@ Column {
             color: Theme.subtext
             font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
         }
+        ColourPick {
+            id: pick
+            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+            visible: s.colour
+            width: s.colour ? 34 : 0
+            colour: s.value
+            onPicked: hex => s.commit(hex)
+        }
         Rectangle {
-            anchors { left: lbl.right; leftMargin: 8; right: parent.right; top: parent.top; bottom: parent.bottom }
+            anchors { left: lbl.right; leftMargin: 8; right: pick.left; rightMargin: s.colour ? 8 : 0
+                      top: parent.top; bottom: parent.bottom }
             radius: 8
             color: Theme.surface
             TextInput {
diff --git a/desktop/modules/qtmaildir/TagsKeysPage.qml b/desktop/modules/qtmaildir/TagsKeysPage.qml
index fcbd3a0..b47e1f2 100644
--- a/desktop/modules/qtmaildir/TagsKeysPage.qml
+++ b/desktop/modules/qtmaildir/TagsKeysPage.qml
@@ -93,26 +93,26 @@ Column {
             objectName: "tag:" + modelData.key
             width: page.width
             height: 34
-            Rectangle {
-                id: tagSwatch
-                anchors { left: parent.left; verticalCenter: parent.verticalCenter }
-                width: 16; height: 16; radius: 4
-                color: tagRow.modelData.value
-            }
             Text {
                 id: tagName
-                anchors { left: tagSwatch.right; leftMargin: 10; verticalCenter: parent.verticalCenter }
-                width: 200
+                anchors { left: parent.left; verticalCenter: parent.verticalCenter }
+                width: 226
                 elide: Text.ElideRight
                 text: tagRow.modelData.key
                 color: Theme.text
                 font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
             }
             Box {
-                anchors { left: tagName.right; leftMargin: 8; right: tagDel.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
+                anchors { left: tagName.right; leftMargin: 8; right: tagPick.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
                 text: tagRow.modelData.value
                 onAccepted: if (/^#[0-9a-fA-F]{6}$/.test(text)) Qtm.set("tagcolors", tagRow.modelData.key, text)
             }
+            ColourPick {
+                id: tagPick
+                anchors { right: tagDel.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
+                colour: tagRow.modelData.value
+                onPicked: hex => Qtm.set("tagcolors", tagRow.modelData.key, hex)
+            }
             Button {
                 id: tagDel
                 anchors { right: parent.right; verticalCenter: parent.verticalCenter }
@@ -138,8 +138,14 @@ Column {
         }
         Box { id: newTag; anchors { left: parent.left; verticalCenter: parent.verticalCenter }
               width: 226; placeholder: "tag" }
-        Box { id: newColour; anchors { left: newTag.right; leftMargin: 8; right: tagAdd.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
+        Box { id: newColour; anchors { left: newTag.right; leftMargin: 8; right: newPick.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
               placeholder: "#rrggbb"; onAccepted: parent.add() }
+        ColourPick {
+            id: newPick
+            anchors { right: tagAdd.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
+            colour: newColour.text
+            onPicked: hex => newColour.text = hex
+        }
         Button { id: tagAdd; anchors { right: parent.right; verticalCenter: parent.verticalCenter }
                  text: "Add"; enabled: parent.ok; onClicked: parent.add() }
     }