wallpaper: one monitor to preview, a line per transition

Selecting was unclear with a tile doing both jobs. A mock monitor now
plays whatever line is clicked, and a click changes nothing else; the
choice is an Active mark per line, and Random's pool a Switch beside it.
Each line shows a frame caught halfway through its transition.

MockScreen takes children, drawn on its panel.

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

1 files changed, 83 insertions, 16 deletions

diff --git a/desktop/modules/appearance/TransitionsTab.qml b/desktop/modules/appearance/TransitionsTab.qml
index 190a117..5da88f2 100644
--- a/desktop/modules/appearance/TransitionsTab.qml
+++ b/desktop/modules/appearance/TransitionsTab.qml
@@ -16,42 +16,109 @@ Item {
     id: tab
     implicitHeight: col.implicitHeight
 
-    readonly property int gap: 14
-    readonly property int columns: Math.max(1, Math.floor((width + gap) / 260))
-    readonly property real tileWidth: (width - (columns - 1) * gap) / columns
+    readonly property int activeWidth: 70
+    readonly property int randomWidth: 90
+
+    // What the monitor shows: the last one previewed, or else the choice.
+    property string previewed: ""
+    readonly property string staged: previewed !== "" ? previewed
+        : Transitions.draftPick !== "random" ? Transitions.draftPick
+        : Transitions.draftPool[0] ?? "burn"
+    property real progress: 0
+    property point origin: Qt.point(0.5, 0.5)
+
+    function play(name) {
+        previewed = name;
+        origin = Qt.point(Math.random(), Math.random());
+        anim.restart();
+    }
+
+    NumberAnimation {
+        id: anim
+        target: tab
+        property: "progress"
+        from: 0
+        to: 1
+        duration: Transitions.duration
+        // ponytail: back on the old picture with a cut.
+        onFinished: tab.progress = 0
+    }
 
     Column {
         id: col
         width: parent.width
         spacing: 14
 
+        MockScreen {
+            anchors.horizontalCenter: parent.horizontalCenter
+            panelWidth: Math.min(col.width, 640)
+            panelHeight: Math.round(panelWidth * 1080 / 2560)
+
+            TransitionView {
+                anchors.fill: parent
+                name: tab.staged
+                progress: tab.progress
+                origin: tab.origin
+            }
+        }
+
         Text {
             width: col.width
+            horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.Wrap
-            text: "Click a transition to see it between your two current wallpapers. "
-                + "Random draws from the ticked ones, and never the same one twice running."
+            text: (Transitions.all.find(t => t.name === tab.staged) ?? { label: "" }).label
+                + ". Click a line to play it here; Active is what wallpaper changes use."
             color: Theme.overlay
             font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
         }
 
-        Grid {
-            columns: tab.columns
-            spacing: tab.gap
+        Column {
+            width: col.width
+            spacing: 2
+
+            Item {
+                width: parent.width
+                height: 22
+
+                Text {
+                    anchors { left: parent.left; leftMargin: 6; verticalCenter: parent.verticalCenter }
+                    text: "Transition"
+                    color: Theme.overlay
+                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+                }
+                Text {
+                    id: randomHead
+                    anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+                    width: tab.randomWidth
+                    horizontalAlignment: Text.AlignHCenter
+                    text: "In Random"
+                    color: Theme.overlay
+                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+                }
+                Text {
+                    anchors { right: randomHead.left; verticalCenter: parent.verticalCenter }
+                    width: tab.activeWidth
+                    horizontalAlignment: Text.AlignHCenter
+                    text: "Active"
+                    color: Theme.overlay
+                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+                }
+            }
 
             Repeater {
-                model: Transitions.all
-                TransitionTile {
+                model: Transitions.all.concat([{ name: "random", label: "Random" }])
+
+                TransitionRow {
                     required property var modelData
-                    width: tab.tileWidth
+                    width: parent.width
                     name: modelData.name
                     label: modelData.label
+                    activeWidth: tab.activeWidth
+                    randomWidth: tab.randomWidth
+                    onPreview: tab.play(name)
+                    onActivated: if (!random) tab.play(name)
                 }
             }
-            TransitionTile {
-                width: tab.tileWidth
-                name: "random"
-                label: "Random"
-            }
         }
     }
 }