1 files changed, 120 insertions, 0 deletions
diff --git a/desktop/modules/appearance/TransitionRow.qml b/desktop/modules/appearance/TransitionRow.qml
new file mode 100644
index 0000000..a127e0b
--- /dev/null
+++ b/desktop/modules/appearance/TransitionRow.qml
@@ -0,0 +1,120 @@
+// 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 "../.."
+
+// One line of the transitions page: a frame caught halfway through the
+// transition, its name, the Active mark, and the switch for Random's pool. A
+// click on the line previews it; only the Active mark changes the choice.
+// The line named "random" has no frame to preview and no switch.
+Item {
+    id: row
+    required property string name
+    required property string label
+    // Column widths, shared with the page's headings.
+    required property int activeWidth
+    required property int randomWidth
+    readonly property bool random: name === "random"
+    readonly property bool active: Transitions.draftPick === name
+    signal preview
+    signal activated
+
+    implicitHeight: 76
+
+    Rectangle {
+        anchors.fill: parent
+        radius: 6
+        color: row.active ? Qt.alpha(Theme.accent, 0.14)
+             : area.containsMouse ? Qt.alpha(Theme.text, 0.06) : "transparent"
+    }
+
+    MouseArea {
+        id: area
+        anchors.fill: parent
+        enabled: !row.random
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: row.preview()
+    }
+
+    Rectangle {
+        id: frame
+        anchors { left: parent.left; leftMargin: 6; verticalCenter: parent.verticalCenter }
+        // DP-1's shape, like the monitor above.
+        width: 152; height: 64
+        color: Theme.surface
+
+        TransitionView {
+            anchors.fill: parent
+            visible: !row.random
+            name: row.random ? "burn" : row.name
+            progress: 0.5
+            origin: Qt.point(0.35, 0.6)
+        }
+        Text {
+            anchors.centerIn: parent
+            visible: row.random
+            // nf-fa-shuffle, present in Inconsolata Nerd Font.
+            text: ""
+            color: Theme.subtext
+            font { family: Theme.iconFamily; pixelSize: Theme.fontSize * 2 }
+        }
+    }
+
+    Text {
+        anchors { left: frame.right; leftMargin: 14; verticalCenter: parent.verticalCenter }
+        text: row.label
+        color: row.active ? Theme.text : Theme.subtext
+        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
+    }
+
+    Item {
+        id: randomCell
+        anchors { right: parent.right; top: parent.top; bottom: parent.bottom }
+        width: row.randomWidth
+
+        Switch {
+            anchors.centerIn: parent
+            visible: !row.random
+            checked: Transitions.draftPool.indexOf(row.name) >= 0
+            onToggled: Transitions.toggle(row.name)
+        }
+    }
+
+    Item {
+        anchors { right: randomCell.left; top: parent.top; bottom: parent.bottom }
+        width: row.activeWidth
+
+        Rectangle {
+            anchors.centerIn: parent
+            width: 20; height: 20; radius: 10
+            color: "transparent"
+            border.width: 2
+            border.color: row.active ? Theme.accent : Qt.alpha(Theme.text, 0.3)
+
+            Rectangle {
+                anchors.centerIn: parent
+                visible: row.active
+                width: 10; height: 10; radius: 5
+                color: Theme.accent
+            }
+        }
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                Transitions.draftPick = row.name;
+                row.activated();
+            }
+        }
+    }
+}