1 files changed, 120 insertions, 0 deletions
diff --git a/desktop/modules/appearance/TransitionTile.qml b/desktop/modules/appearance/TransitionTile.qml
new file mode 100644
index 0000000..9c6d9eb
--- /dev/null
+++ b/desktop/modules/appearance/TransitionTile.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 choice on the transitions page. A click selects it in the draft and
+// plays it once between the two current wallpapers. The tick puts it in
+// Random's pool. The tile named "random" has no shader and no tick.
+Item {
+    id: tile
+    required property string name
+    required property string label
+    readonly property bool random: name === "random"
+    readonly property bool selected: Transitions.draftPick === name
+    readonly property bool shows: !random && Wallpapers.currentH !== "" && Wallpapers.currentV !== ""
+    property real progress: 0
+    property point origin: Qt.point(0.5, 0.5)
+
+    implicitHeight: thumb.height + 30
+
+    Glow {
+        anchors.fill: thumb
+        on: tile.selected
+    }
+
+    Rectangle {
+        id: thumb
+        width: tile.width
+        height: Math.round(width * 9 / 16)
+        color: Theme.surface
+        clip: true
+
+        // Same layering as the cover, WallpaperSpread.qml. ponytail: rests on
+        // the old picture again after playing, with a cut.
+        Image {
+            id: newImg
+            visible: tile.shows
+            anchors.fill: parent
+            source: tile.shows ? Wallpapers.currentV : ""
+            fillMode: Image.PreserveAspectCrop
+            sourceSize: Qt.size(thumb.width, thumb.height)
+            asynchronous: true
+            layer.enabled: tile.shows
+        }
+        Image {
+            id: oldImg
+            visible: tile.shows
+            anchors.fill: parent
+            source: tile.shows ? Wallpapers.currentH : ""
+            fillMode: Image.PreserveAspectCrop
+            sourceSize: Qt.size(thumb.width, thumb.height)
+            asynchronous: true
+            layer.enabled: tile.shows
+            layer.effect: WallShader {
+                name: tile.name
+                target: newImg
+                progress: tile.progress
+                aspect: thumb.width / Math.max(1, thumb.height)
+                origin: tile.origin
+            }
+        }
+
+        Text {
+            anchors.centerIn: parent
+            visible: tile.random
+            // nf-fa-shuffle, present in Inconsolata Nerd Font.
+            text: ""
+            color: Theme.subtext
+            font { family: Theme.iconFamily; pixelSize: Theme.fontSize * 2 }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: {
+                Transitions.draftPick = tile.name;
+                if (!tile.shows) return;
+                tile.origin = Qt.point(Math.random(), Math.random());
+                play.restart();
+            }
+        }
+    }
+
+    NumberAnimation {
+        id: play
+        target: tile
+        property: "progress"
+        from: 0
+        to: 1
+        duration: Transitions.duration
+        onFinished: tile.progress = 0
+    }
+
+    Toggle {
+        anchors { top: thumb.bottom; topMargin: 6; left: parent.left }
+        visible: !tile.random
+        label: tile.label
+        // Toggle assigns checked itself, which would break a plain binding
+        // and leave the tick stale after Reset.
+        Binding on checked { value: Transitions.draftPool.indexOf(tile.name) >= 0 }
+        onToggled: Transitions.toggle(tile.name)
+    }
+
+    Text {
+        anchors { top: thumb.bottom; topMargin: 8; left: parent.left }
+        visible: tile.random
+        text: tile.label
+        color: Theme.subtext
+        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+    }
+}