controlcenter: add header when floating

modules/controlcenter/ControlCenter.qml

@@ -30,10 +30,27 @@ Item {
     implicitWidth: implicitHeight * Config.controlCenter.sizes.ratio
     implicitHeight: screen.height * Config.controlCenter.sizes.heightMult
 
-    RowLayout {
+    GridLayout {
         anchors.fill: parent
 
-        spacing: 0
+        rowSpacing: 0
+        columnSpacing: 0
+        rows: root.floating ? 2 : 1
+        columns: 2
+
+        Loader {
+            Layout.fillWidth: true
+            Layout.columnSpan: 2
+
+            asynchronous: true
+            active: root.floating
+            visible: active
+
+            sourceComponent: WindowTitle {
+                screen: root.screen
+                session: root.session
+            }
+        }
 
         StyledRect {
             Layout.fillHeight: true

modules/controlcenter/WindowFactory.qml

@@ -38,6 +38,8 @@ Singleton {
             implicitWidth: cc.implicitWidth
             implicitHeight: cc.implicitHeight
 
+            title: qsTr("Caelestia Settings - %1").arg(cc.active.slice(0, 1).toUpperCase() + cc.active.slice(1))
+
             ControlCenter {
                 id: cc
 
@@ -46,7 +48,7 @@ Singleton {
                 floating: true
 
                 function close(): void {
-                    win.visible = false;
+                    win.destroy();
                 }
             }
 

modules/controlcenter/WindowTitle.qml

@@ -0,0 +1,51 @@
+import qs.components
+import qs.services
+import qs.config
+import Quickshell
+import QtQuick
+
+StyledRect {
+    id: root
+
+    required property ShellScreen screen
+    required property Session session
+
+    implicitHeight: text.implicitHeight + Appearance.padding.normal
+    color: Colours.palette.m3surfaceContainer
+
+    StyledText {
+        id: text
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+
+        text: qsTr("Caelestia Settings - %1").arg(root.session.active)
+        font.capitalization: Font.Capitalize
+        font.pointSize: Appearance.font.size.larger
+        font.weight: 500
+    }
+
+    Item {
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: Appearance.padding.normal
+
+        implicitWidth: implicitHeight
+        implicitHeight: closeIcon.implicitHeight + Appearance.padding.small
+
+        StateLayer {
+            radius: Appearance.rounding.full
+
+            function onClicked(): void {
+                QsWindow.window.destroy();
+            }
+        }
+
+        MaterialIcon {
+            id: closeIcon
+
+            anchors.centerIn: parent
+            text: "close"
+        }
+    }
+}