1 files changed, 94 insertions, 0 deletions
diff --git a/appearance/MockScreen.qml b/appearance/MockScreen.qml
new file mode 100644
index 0000000..7a09ee2
--- /dev/null
+++ b/appearance/MockScreen.qml
@@ -0,0 +1,94 @@
+// 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
+
+// One monitor in the mock desk layout: a bezel, a stand, and the panel at the
+// screen's real aspect ratio. Drawn rather than loaded from an SVG so it takes
+// its colours from the theme and stays sharp at any scale.
+Item {
+    id: mock
+
+    property string label: ""
+    property string source: ""
+    property bool targeted: false
+
+    // The panel's size; the bezel and stand are added around it.
+    property real panelWidth: 100
+    property real panelHeight: 100
+
+    readonly property real bezel: Math.max(4, Math.round(panelWidth * 0.02))
+    // Proportional to width rather than height: the vertical monitor is tall
+    // and narrow, and a share of its height would give it an absurd stand.
+    readonly property real standHeight: Math.max(14, Math.round(panelWidth * 0.1))
+
+    implicitWidth: panelWidth + bezel * 2
+    implicitHeight: panelHeight + bezel * 2 + standHeight
+
+    Column {
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: 0
+
+        // Case.
+        Rectangle {
+            width: mock.panelWidth + mock.bezel * 2
+            height: mock.panelHeight + mock.bezel * 2
+            radius: Math.max(3, mock.bezel)
+            color: "#1a1a1e"
+            border.width: 1
+            border.color: mock.targeted ? Theme.accent : Qt.alpha("#ffffff", 0.14)
+
+            // Screen.
+            Rectangle {
+                anchors.centerIn: parent
+                width: mock.panelWidth
+                height: mock.panelHeight
+                color: Theme.base
+                clip: true
+
+                Image {
+                    anchors.fill: parent
+                    source: mock.source === "" ? "" : "file://" + mock.source
+                    asynchronous: true
+                    cache: false
+                    // swaybg is called with -m fill, so the mock crops the same way.
+                    fillMode: Image.PreserveAspectCrop
+                    sourceSize.width: 640
+                }
+
+                Text {
+                    anchors.centerIn: parent
+                    visible: mock.source === ""
+                    text: mock.label
+                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+                    color: Theme.overlay
+                }
+            }
+        }
+
+        // Neck.
+        Rectangle {
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.max(8, Math.round(mock.panelWidth * 0.09))
+            height: Math.round(mock.standHeight * 0.55)
+            color: "#26262e"
+        }
+
+        // Foot.
+        Rectangle {
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: Math.max(30, Math.round(mock.panelWidth * 0.32))
+            height: Math.max(5, Math.round(mock.standHeight * 0.45))
+            radius: height / 2
+            color: "#2c2c35"
+        }
+    }
+}