refactor: SettingsHeader on all panels

modules/controlcenter/appearance/AppearancePane.qml

@@ -97,19 +97,9 @@ Item {
                 anchors.top: parent.top
                 spacing: Appearance.spacing.normal
 
-                MaterialIcon {
+                SettingsHeader {
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+                    icon: "palette"
-                    Layout.topMargin: 0
+                    title: qsTr("Appearance Settings")
-                    text: "palette"
-                    font.pointSize: Appearance.font.size.extraLarge * 3
-                    font.bold: true
-                }
-
-                StyledText {
-                    Layout.alignment: Qt.AlignHCenter
-                    text: qsTr("Appearance Settings")
-                    font.pointSize: Appearance.font.size.large
-                    font.bold: true
                 }
 
                 StyledText {

modules/controlcenter/audio/AudioPane.qml

@@ -233,7 +233,7 @@ Item {
                     anchors.top: parent.top
                     spacing: Appearance.spacing.normal
 
-                        ConnectionHeader {
+                        SettingsHeader {
                             icon: "volume_up"
                             title: qsTr("Audio Settings")
                         }

modules/controlcenter/bluetooth/Details.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.effects
@@ -41,20 +42,9 @@ StyledFlickable {
                 anchors.top: parent.top
                 spacing: Appearance.spacing.normal
 
-            MaterialIcon {
+            SettingsHeader {
-                Layout.alignment: Qt.AlignHCenter
+                icon: Icons.getBluetoothIcon(root.device?.icon ?? "")
-                animate: true
+                title: root.device?.name ?? ""
-                text: Icons.getBluetoothIcon(root.device?.icon ?? "")
-                font.pointSize: Appearance.font.size.extraLarge * 3
-                font.bold: true
-            }
-
-            StyledText {
-                Layout.alignment: Qt.AlignHCenter
-                animate: true
-                text: root.device?.name ?? ""
-                font.pointSize: Appearance.font.size.large
-                font.bold: true
             }
 
             StyledText {

modules/controlcenter/bluetooth/Settings.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.effects
@@ -17,18 +18,9 @@ ColumnLayout {
 
     spacing: Appearance.spacing.normal
 
-    MaterialIcon {
+    SettingsHeader {
-        Layout.alignment: Qt.AlignHCenter
+        icon: "bluetooth"
-        text: "bluetooth"
+        title: qsTr("Bluetooth Settings")
-        font.pointSize: Appearance.font.size.extraLarge * 3
-        font.bold: true
-    }
-
-    StyledText {
-        Layout.alignment: Qt.AlignHCenter
-        text: qsTr("Bluetooth Settings")
-        font.pointSize: Appearance.font.size.large
-        font.bold: true
     }
 
     StyledText {

modules/controlcenter/components/SettingsHeader.qml

@@ -0,0 +1,59 @@
+pragma ComponentBehavior: Bound
+
+import qs.components
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+/**
+ * SettingsHeader
+ * 
+ * Reusable header component for settings panes. Displays a large icon and title
+ * in a consistent format across all settings screens.
+ * 
+ * Usage:
+ * ```qml
+ * SettingsHeader {
+ *     icon: "router"
+ *     title: qsTr("Network Settings")
+ * }
+ * ```
+ */
+Item {
+    id: root
+
+    /**
+     * Material icon name to display
+     */
+    required property string icon
+
+    /**
+     * Title text to display
+     */
+    required property string title
+
+    Layout.fillWidth: true
+    implicitHeight: column.implicitHeight
+
+    ColumnLayout {
+        id: column
+
+        anchors.centerIn: parent
+        spacing: Appearance.spacing.normal
+
+        MaterialIcon {
+            Layout.alignment: Qt.AlignHCenter
+            text: root.icon
+            font.pointSize: Appearance.font.size.extraLarge * 3
+            font.bold: true
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignHCenter
+            text: root.title
+            font.pointSize: Appearance.font.size.large
+            font.bold: true
+        }
+    }
+}
+

modules/controlcenter/launcher/LauncherPane.qml

@@ -509,54 +509,55 @@ Item {
 
             spacing: Appearance.spacing.normal
 
-            Item {
+            // Show SettingsHeader when no app is selected, or show app icon + title when app is selected
-            Layout.alignment: Qt.AlignHCenter
+            SettingsHeader {
-            Layout.leftMargin: Appearance.padding.large * 2
+                Layout.leftMargin: Appearance.padding.large * 2
-            Layout.rightMargin: Appearance.padding.large * 2
+                Layout.rightMargin: Appearance.padding.large * 2
-            Layout.topMargin: Appearance.padding.large * 2
+                Layout.topMargin: Appearance.padding.large * 2
-            implicitWidth: iconLoader.implicitWidth
+                visible: displayedApp === null
-            implicitHeight: iconLoader.implicitHeight
+                icon: "apps"
-
+                title: qsTr("Launcher Applications")
-            Loader {
-                id: iconLoader
-                sourceComponent: parent.parent.displayedApp ? appIconComponent : defaultIconComponent
             }
 
-            Component {
+            // App icon and title display (shown when app is selected)
-                id: appIconComponent
+            Item {
-                IconImage {
+                Layout.alignment: Qt.AlignHCenter
-                    implicitSize: Appearance.font.size.extraLarge * 3 * 2
+                Layout.leftMargin: Appearance.padding.large * 2
-                    source: {
+                Layout.rightMargin: Appearance.padding.large * 2
-                        const app = iconLoader.parent.parent.displayedApp;
+                Layout.topMargin: Appearance.padding.large * 2
-                        if (!app) return "image-missing";
+                visible: displayedApp !== null
-                        const entry = app.entry;
+                implicitWidth: Math.max(appIconImage.implicitWidth, appTitleText.implicitWidth)
-                        if (entry && entry.icon) {
+                implicitHeight: appIconImage.implicitHeight + Appearance.spacing.normal + appTitleText.implicitHeight
-                            return Quickshell.iconPath(entry.icon, "image-missing");
+
+                ColumnLayout {
+                    anchors.centerIn: parent
+                    spacing: Appearance.spacing.normal
+
+                    IconImage {
+                        id: appIconImage
+                        Layout.alignment: Qt.AlignHCenter
+                        implicitSize: Appearance.font.size.extraLarge * 3 * 2
+                        source: {
+                            const app = appDetailsLayout.displayedApp;
+                            if (!app) return "image-missing";
+                            const entry = app.entry;
+                            if (entry && entry.icon) {
+                                return Quickshell.iconPath(entry.icon, "image-missing");
+                            }
+                            return "image-missing";
                         }
-                        return "image-missing";
+                    }
+
+                    StyledText {
+                        id: appTitleText
+                        Layout.alignment: Qt.AlignHCenter
+                        text: displayedApp ? (displayedApp.name || displayedApp.entry?.name || qsTr("Application Details")) : ""
+                        font.pointSize: Appearance.font.size.large
+                        font.bold: true
                     }
                 }
             }
 
-            Component {
-                id: defaultIconComponent
-                MaterialIcon {
-                    text: "apps"
-                    font.pointSize: Appearance.font.size.extraLarge * 3
-                    font.bold: true
-                }
-            }
-        }
-
-        StyledText {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.leftMargin: Appearance.padding.large * 2
-            Layout.rightMargin: Appearance.padding.large * 2
-            text: displayedApp ? (displayedApp.name || displayedApp.entry?.name || qsTr("Application Details")) : qsTr("Launcher Applications")
-            font.pointSize: Appearance.font.size.large
-            font.bold: true
-        }
-
             Item {
                 Layout.fillWidth: true
                 Layout.fillHeight: true

modules/controlcenter/launcher/Settings.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.effects
@@ -16,18 +17,9 @@ ColumnLayout {
 
     spacing: Appearance.spacing.normal
 
-    MaterialIcon {
+    SettingsHeader {
-        Layout.alignment: Qt.AlignHCenter
+        icon: "apps"
-        text: "apps"
+        title: qsTr("Launcher Settings")
-        font.pointSize: Appearance.font.size.extraLarge * 3
-        font.bold: true
-    }
-
-    StyledText {
-        Layout.alignment: Qt.AlignHCenter
-        text: qsTr("Launcher Settings")
-        font.pointSize: Appearance.font.size.large
-        font.bold: true
     }
 
     SectionHeader {

modules/controlcenter/network/EthernetSettings.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.effects
@@ -16,18 +17,9 @@ ColumnLayout {
 
     spacing: Appearance.spacing.normal
 
-    MaterialIcon {
+    SettingsHeader {
-        Layout.alignment: Qt.AlignHCenter
+        icon: "cable"
-        text: "cable"
+        title: qsTr("Ethernet settings")
-        font.pointSize: Appearance.font.size.extraLarge * 3
-        font.bold: true
-    }
-
-    StyledText {
-        Layout.alignment: Qt.AlignHCenter
-        text: qsTr("Ethernet settings")
-        font.pointSize: Appearance.font.size.large
-        font.bold: true
     }
 
     StyledText {

modules/controlcenter/network/NetworkSettings.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.effects
@@ -16,18 +17,9 @@ ColumnLayout {
 
     spacing: Appearance.spacing.normal
 
-    MaterialIcon {
+    SettingsHeader {
-        Layout.alignment: Qt.AlignHCenter
+        icon: "router"
-        text: "router"
+        title: qsTr("Network Settings")
-        font.pointSize: Appearance.font.size.extraLarge * 3
-        font.bold: true
-    }
-
-    StyledText {
-        Layout.alignment: Qt.AlignHCenter
-        text: qsTr("Network Settings")
-        font.pointSize: Appearance.font.size.large
-        font.bold: true
     }
 
     SectionHeader {

modules/controlcenter/network/WirelessSettings.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import ".."
+import "../components"
 import qs.components
 import qs.components.controls
 import qs.components.effects
@@ -16,18 +17,9 @@ ColumnLayout {
 
     spacing: Appearance.spacing.normal
 
-    MaterialIcon {
+    SettingsHeader {
-        Layout.alignment: Qt.AlignHCenter
+        icon: "wifi"
-        text: "wifi"
+        title: qsTr("Network settings")
-        font.pointSize: Appearance.font.size.extraLarge * 3
-        font.bold: true
-    }
-
-    StyledText {
-        Layout.alignment: Qt.AlignHCenter
-        text: qsTr("Network settings")
-        font.pointSize: Appearance.font.size.large
-        font.bold: true
     }
 
     SectionHeader {