NXPPMJ1 Dashboard: live tiles that fill the stage

Configs/quickshell/aphotic/components/SignalTile.qml

@@ -0,0 +1,129 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.config
+import qs.services
+
+// The dashboard's one tile: dark glass, a hairline that warms toward the
+// accent under the pointer, light along the top edge, and a header with an
+// icon, a label and an optional figure. `live` lights a small dot beside
+// the label while the tile's subject is doing something. Content goes in
+// the body and is given all the room left under the header.
+Item {
+    id: root
+
+    property string icon: ""
+    property string label: ""
+    property string figure: ""
+    property bool live: false
+    property bool accent: false
+    property real padding: Tokens.padding.large
+
+    default property alias body: content.data
+    readonly property bool hovered: hover.hovered
+    readonly property real headerHeight: header.visible ? header.implicitHeight + Tokens.spacing.small : 0
+
+    Rectangle {
+        id: glass
+
+        anchors.fill: parent
+        radius: Tokens.rounding.large
+        color: root.hovered ? Colours.signalStyle.raised : Qt.alpha(Colours.signalStyle.surface, 0.72)
+        border.width: 1
+        border.color: root.accent ? Qt.alpha(Colours.signal, 0.65) : (root.hovered ? Qt.alpha(Colours.signal, 0.42) : Colours.signalStyle.hairline)
+
+        Behavior on color {
+            CAnim {}
+        }
+
+        Behavior on border.color {
+            CAnim {}
+        }
+
+        Rectangle {
+            x: glass.radius
+            width: parent.width - glass.radius * 2
+            height: 1
+            color: Colours.signalStyle.edgeLight
+        }
+    }
+
+    RowLayout {
+        id: header
+
+        visible: root.label !== "" || root.icon !== ""
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: root.padding
+        spacing: Tokens.spacing.small
+
+        MaterialIcon {
+            visible: root.icon !== ""
+            text: root.icon
+            color: root.live || root.accent ? Colours.signal : Colours.inkMuted
+            fontStyle: Tokens.font.icon.small
+        }
+
+        StyledText {
+            text: root.label.toUpperCase()
+            color: Colours.inkMuted
+            font: Tokens.font.label.builders.small.weight(Font.Medium).letterSpacing(1.2).build()
+        }
+
+        Rectangle {
+            visible: root.live
+            implicitWidth: 6
+            implicitHeight: 6
+            radius: Math.min(width, height) / 2
+            color: Colours.signal
+
+            SequentialAnimation on opacity {
+                running: root.live && RenderGate.decorative && root.visible
+                loops: Animation.Infinite
+                alwaysRunToEnd: true
+
+                NumberAnimation {
+                    to: 0.25
+                    duration: 900
+                    easing.type: Easing.InOutSine
+                }
+
+                NumberAnimation {
+                    to: 1
+                    duration: 900
+                    easing.type: Easing.InOutSine
+                }
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+        }
+
+        StyledText {
+            visible: root.figure !== ""
+            text: root.figure
+            color: Colours.ink
+            font: Tokens.font.mono.small
+        }
+    }
+
+    Item {
+        id: content
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.top: header.visible ? header.bottom : parent.top
+        anchors.leftMargin: root.padding
+        anchors.rightMargin: root.padding
+        anchors.bottomMargin: root.padding
+        anchors.topMargin: header.visible ? Tokens.spacing.small : root.padding
+    }
+
+    HoverHandler {
+        id: hover
+    }
+}

Configs/quickshell/aphotic/components/qmldir

@@ -39,3 +39,4 @@ SignalSurface 1.0 SignalSurface.qml
 SectionLabel 1.0 SectionLabel.qml
 SignalCard 1.0 SignalCard.qml
 Readout 1.0 Readout.qml
+SignalTile 1.0 SignalTile.qml

Configs/quickshell/aphotic/modules/dashboard/DashboardContent.qml

@@ -5,7 +5,7 @@ import qs.components
 import qs.services
 import qs.modules.flow
 import QtQuick.Window
-import "spine"
+import "bento"
 
 ColumnLayout {
     id: root
@@ -148,13 +148,13 @@ ColumnLayout {
             return pluginTabRepeater.itemAt(i) ?? tabLoader;
         }
 
-        readonly property real tabWidth: tabFrame.activeLoader.implicitWidth
-        readonly property real tabHeight: tabFrame.activeLoader.implicitHeight
+        readonly property real tabWidth: tabFrame.activeLoader.item?.implicitWidth ?? 0
+        readonly property real tabHeight: tabFrame.activeLoader.item?.implicitHeight ?? 0
 
         // One stage for every tab, so switching never resizes the frame.
         // A tab larger than the stage still gets room, it just grows it.
-        readonly property real stageWidth: Math.min(1280, (Window.width || 1280) - Tokens.padding.extraLarge * 4)
-        readonly property real stageHeight: Math.min(760, (Window.height || 760) - Tokens.padding.extraLarge * 8)
+        readonly property real stageWidth: Math.min(1680, (Window.width || 1280) - Tokens.padding.extraLarge * 4)
+        readonly property real stageHeight: Math.min(940, (Window.height || 760) - Tokens.padding.extraLarge * 8)
 
         Layout.preferredWidth: Math.max(tabFrame.stageWidth, tabFrame.tabWidth) + Tokens.padding.extraLarge * 2
         Layout.preferredHeight: Math.max(tabFrame.stageHeight, tabFrame.tabHeight) + Tokens.padding.extraLarge * 2
@@ -185,7 +185,9 @@ ColumnLayout {
         Loader {
             id: tabLoader
 
-            anchors.centerIn: parent
+            // Every tab gets the whole stage, edge to edge.
+            anchors.fill: parent
+            anchors.margins: Tokens.padding.extraLarge
             opacity: 1
             active: true
 
@@ -242,7 +244,8 @@ ColumnLayout {
 
                 required property var modelData
 
-                anchors.centerIn: parent
+                anchors.fill: parent
+                anchors.margins: Tokens.padding.extraLarge
                 active: root._openedTabIds.includes(pluginTabLoader.modelData.id)
                 asynchronous: true
                 visible: pluginTabLoader.opacity > 0
@@ -263,15 +266,7 @@ ColumnLayout {
     Component {
         id: spineComp
 
-        Item {
-            implicitWidth: tabFrame.stageWidth
-            implicitHeight: tabFrame.stageHeight
-
-            SpineSurface {
-                anchors.fill: parent
-                embedded: true
-            }
-        }
+        BentoDashboard {}
     }
     Component {
         id: flowComp