display config: fix monitor names overflowing, add identity overlay to

ease configuration
fixes #1398

quickshell/Modules/Settings/DisplayConfig/MonitorIdentifyOverlay.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+import qs.Common
+import qs.Widgets
+
+Variants {
+    model: Quickshell.screens
+
+    PanelWindow {
+        id: identifyWindow
+
+        required property var modelData
+        readonly property var outputData: DisplayConfigState.allOutputs[screen.name]
+        readonly property string displayName: DisplayConfigState.getOutputDisplayName(outputData, screen.name)
+
+        screen: modelData
+        visible: true
+        color: "transparent"
+
+        WlrLayershell.namespace: "dms:monitor-identify"
+        WlrLayershell.layer: WlrLayer.Overlay
+        WlrLayershell.exclusiveZone: -1
+        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+
+        anchors {
+            top: true
+            bottom: true
+            left: true
+            right: true
+        }
+
+        mask: Region {}
+
+        Item {
+            anchors.fill: parent
+            opacity: 0
+
+            Component.onCompleted: opacity = 1
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: Theme.mediumDuration
+                    easing.type: Theme.emphasizedEasing
+                }
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                color: "transparent"
+                border.color: Theme.primary
+                border.width: 4
+            }
+
+            Rectangle {
+                anchors.top: parent.top
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: identifyLabel.implicitWidth + Theme.spacingL * 2
+                height: identifyLabel.implicitHeight + Theme.spacingS * 2
+                color: Theme.primary
+                bottomLeftRadius: Theme.cornerRadius
+                bottomRightRadius: Theme.cornerRadius
+
+                StyledText {
+                    id: identifyLabel
+                    anchors.centerIn: parent
+                    text: {
+                        const phys = DisplayConfigState.getPhysicalSize(identifyWindow.outputData);
+                        const res = phys.w + "x" + phys.h;
+                        if (identifyWindow.displayName === identifyWindow.screen.name)
+                            return identifyWindow.displayName + "  •  " + res;
+                        return identifyWindow.displayName + "  (" + identifyWindow.screen.name + ")  •  " + res;
+                    }
+                    font.pixelSize: Theme.fontSizeMedium
+                    font.weight: Font.Medium
+                    color: Theme.primaryText
+                }
+            }
+        }
+    }
+}

quickshell/Modules/Settings/DisplayConfig/MonitorRect.qml

@@ -85,6 +85,8 @@ Rectangle {
             color: root.isConnected ? Theme.surfaceText : Theme.surfaceVariantText
             horizontalAlignment: Text.AlignHCenter
             anchors.horizontalCenter: parent.horizontalCenter
+            wrapMode: Text.NoWrap
+            maximumLineCount: 1
             elide: Text.ElideMiddle
             width: Math.min(implicitWidth, root.width - 8)
         }

quickshell/Modules/Settings/DisplayConfigTab.qml

@@ -632,4 +632,17 @@ Item {
         onConfirmed: DisplayConfigState.confirmChanges(root.selectedProfileId)
         onReverted: DisplayConfigState.revertChanges()
     }
+
+    readonly property bool identifyConfigured: {
+        if (!DisplayConfigState.hasOutputBackend || DisplayConfigState.readOnly)
+            return false;
+        if (!["niri", "hyprland", "mango"].includes(CompositorService.compositor))
+            return true;
+        return DisplayConfigState.includeStatus.included;
+    }
+
+    Loader {
+        active: root.visible && root.identifyConfigured
+        sourceComponent: MonitorIdentifyOverlay {}
+    }
 }