Rebuild Displays around the canvas, and let the transaction keep color

Claude-Session: https://claude.ai/code/session_01Ms2FbjQy31TVf3CEvQhGM8
2026-08-24 10:44:11 -04:00
parent 1f694b00b6
commit 9bc68ba358
29 changed files with 3065 additions and 388 deletions
@@ -0,0 +1,165 @@
+// The identity of the display everything below it belongs to.
+//
+// A card title would say the same words in the same place, but this panel has
+// to carry four facts at once -- which display, on which connector, what it is
+// showing right now, and whether Panama is overriding it -- and a title with a
+// subtitle can only carry two of them.
+
+import QtQuick
+import QtQuick.Controls
+import qs.config
+
+Item {
+    id: root
+
+    property string title: ""
+    property string connector: ""
+    property string meta: ""
+    property bool overridden: false
+    property bool enabled: true
+
+    signal forgetRequested
+
+    width: parent ? parent.width : 620
+    implicitHeight: Math.max(44, copy.implicitHeight) + 14
+
+    // A screen on a stand. Drawn rather than iconified: no symbolic icon in the
+    // set reads as "this particular display" beside its own name.
+    Rectangle {
+        id: glyph
+
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.topMargin: 2
+        width: 44
+        height: 33
+        radius: 7
+        border.width: 1
+        border.color: Theme.alpha(Theme.fg, 0.3)
+
+        gradient: Gradient {
+            orientation: Gradient.Horizontal
+            GradientStop { position: 0.0; color: Theme.alpha(Theme.accent, 0.45) }
+            GradientStop { position: 1.0; color: Theme.alpha(Theme.accentSecondary, 0.35) }
+        }
+
+        Rectangle {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.bottom
+            anchors.topMargin: 2
+            width: 16
+            height: 3
+            radius: 2
+            border.width: 0
+            color: Theme.alpha(Theme.fg, 0.25)
+        }
+    }
+
+    Column {
+        id: copy
+
+        anchors.left: glyph.right
+        anchors.leftMargin: 13
+        anchors.right: actions.left
+        anchors.rightMargin: 12
+        anchors.top: parent.top
+        spacing: 3
+
+        Row {
+            width: parent.width
+            spacing: 8
+
+            Text {
+                anchors.verticalCenter: parent.verticalCenter
+                width: Math.max(0, parent.width - (connectorChip.visible ? connectorChip.width + 8 : 0))
+                text: root.title
+                color: Theme.fg
+                font.family: Theme.fontFamily
+                font.pixelSize: Theme.fontSizeLarge
+                font.weight: Font.DemiBold
+                elide: Text.ElideRight
+            }
+
+            Rectangle {
+                id: connectorChip
+
+                anchors.verticalCenter: parent.verticalCenter
+                visible: root.connector !== ""
+                width: visible ? connectorLabel.implicitWidth + 16 : 0
+                height: 19
+                radius: Theme.pillRadius
+                color: Theme.alpha(Theme.fg, 0.08)
+                border.width: 1
+                border.color: Theme.alpha(Theme.fg, 0.12)
+
+                Text {
+                    id: connectorLabel
+                    anchors.centerIn: parent
+                    text: root.connector
+                    color: Theme.fgDim
+                    font.family: Theme.fontFamily
+                    font.pixelSize: Math.max(9, Theme.fontSizeSmall - 1)
+                    font.weight: Font.DemiBold
+                }
+            }
+        }
+
+        Text {
+            width: parent.width
+            visible: root.meta !== ""
+            text: root.meta
+            color: Theme.fgDim
+            font.family: Theme.fontFamily
+            font.features: Theme.tabularFigures
+            font.pixelSize: Theme.fontSizeSmall
+            elide: Text.ElideRight
+        }
+    }
+
+    Row {
+        id: actions
+
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.topMargin: 4
+        spacing: 8
+
+        Rectangle {
+            id: customPill
+
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.overridden
+            width: visible ? customLabel.implicitWidth + 20 : 0
+            height: 24
+            radius: Theme.pillRadius
+            color: Theme.alpha(Theme.accent, 0.1)
+            border.width: 1
+            border.color: Theme.alpha(Theme.accent, 0.25)
+
+            ToolTip.visible: customHover.hovered
+            ToolTip.delay: 400
+            ToolTip.text: "This display uses a setting you chose. Forget returns it to the one Panama ships."
+
+            Text {
+                id: customLabel
+                anchors.centerIn: parent
+                text: "Custom setting"
+                color: Theme.accentAlt
+                font.family: Theme.fontFamily
+                font.pixelSize: Math.max(9, Theme.fontSizeSmall - 1)
+                font.weight: Font.DemiBold
+            }
+
+            HoverHandler { id: customHover }
+        }
+
+        SettingsButton {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: root.overridden
+            width: visible ? implicitWidth : 0
+            text: "Forget"
+            enabled: root.enabled
+            onClicked: root.forgetRequested()
+        }
+    }
+}