refactor: SettingsHeader on all panels

10 files changed, 127 insertions, 127 deletions

diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
index 2041bf8..3ba0549 100644
--- a/modules/controlcenter/appearance/AppearancePane.qml
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -97,19 +97,9 @@ Item {
                 anchors.top: parent.top
                 spacing: Appearance.spacing.normal
 
-                MaterialIcon {
-                    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
-                    Layout.topMargin: 0
-                    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
+                SettingsHeader {
+                    icon: "palette"
+                    title: qsTr("Appearance Settings")
                 }
 
                 StyledText {
diff --git a/modules/controlcenter/audio/AudioPane.qml b/modules/controlcenter/audio/AudioPane.qml
index 02cda5b..9b0c7d2 100644
--- a/modules/controlcenter/audio/AudioPane.qml
+++ b/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")
                         }
diff --git a/modules/controlcenter/bluetooth/Details.qml b/modules/controlcenter/bluetooth/Details.qml
index c9d10cd..5496966 100644
--- a/modules/controlcenter/bluetooth/Details.qml
+++ b/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 {
-                Layout.alignment: Qt.AlignHCenter
-                animate: true
-                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
+            SettingsHeader {
+                icon: Icons.getBluetoothIcon(root.device?.icon ?? "")
+                title: root.device?.name ?? ""
             }
 
             StyledText {
diff --git a/modules/controlcenter/bluetooth/Settings.qml b/modules/controlcenter/bluetooth/Settings.qml
index c8453b6..b3245ab 100644
--- a/modules/controlcenter/bluetooth/Settings.qml
+++ b/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 {
-        Layout.alignment: Qt.AlignHCenter
-        text: "bluetooth"
-        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
+    SettingsHeader {
+        icon: "bluetooth"
+        title: qsTr("Bluetooth Settings")
     }
 
     StyledText {
diff --git a/modules/controlcenter/components/SettingsHeader.qml b/modules/controlcenter/components/SettingsHeader.qml
new file mode 100644
index 0000000..9a77968
--- /dev/null
+++ b/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
+        }
+    }
+}
+
diff --git a/modules/controlcenter/launcher/LauncherPane.qml b/modules/controlcenter/launcher/LauncherPane.qml
index a8c5c76..cf965e8 100644
--- a/modules/controlcenter/launcher/LauncherPane.qml
+++ b/modules/controlcenter/launcher/LauncherPane.qml
@@ -509,53 +509,54 @@ Item {
 
             spacing: Appearance.spacing.normal
 
+            // Show SettingsHeader when no app is selected, or show app icon + title when app is selected
+            SettingsHeader {
+                Layout.leftMargin: Appearance.padding.large * 2
+                Layout.rightMargin: Appearance.padding.large * 2
+                Layout.topMargin: Appearance.padding.large * 2
+                visible: displayedApp === null
+                icon: "apps"
+                title: qsTr("Launcher Applications")
+            }
+
+            // App icon and title display (shown when app is selected)
             Item {
-            Layout.alignment: Qt.AlignHCenter
-            Layout.leftMargin: Appearance.padding.large * 2
-            Layout.rightMargin: Appearance.padding.large * 2
-            Layout.topMargin: Appearance.padding.large * 2
-            implicitWidth: iconLoader.implicitWidth
-            implicitHeight: iconLoader.implicitHeight
+                Layout.alignment: Qt.AlignHCenter
+                Layout.leftMargin: Appearance.padding.large * 2
+                Layout.rightMargin: Appearance.padding.large * 2
+                Layout.topMargin: Appearance.padding.large * 2
+                visible: displayedApp !== null
+                implicitWidth: Math.max(appIconImage.implicitWidth, appTitleText.implicitWidth)
+                implicitHeight: appIconImage.implicitHeight + Appearance.spacing.normal + appTitleText.implicitHeight
 
-            Loader {
-                id: iconLoader
-                sourceComponent: parent.parent.displayedApp ? appIconComponent : defaultIconComponent
-            }
+                ColumnLayout {
+                    anchors.centerIn: parent
+                    spacing: Appearance.spacing.normal
 
-            Component {
-                id: appIconComponent
-                IconImage {
-                    implicitSize: Appearance.font.size.extraLarge * 3 * 2
-                    source: {
-                        const app = iconLoader.parent.parent.displayedApp;
-                        if (!app) return "image-missing";
-                        const entry = app.entry;
-                        if (entry && entry.icon) {
-                            return Quickshell.iconPath(entry.icon, "image-missing");
+                    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";
                     }
-                }
-            }
 
-            Component {
-                id: defaultIconComponent
-                MaterialIcon {
-                    text: "apps"
-                    font.pointSize: Appearance.font.size.extraLarge * 3
-                    font.bold: true
+                    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
+                    }
                 }
             }
-        }
-
-        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
diff --git a/modules/controlcenter/launcher/Settings.qml b/modules/controlcenter/launcher/Settings.qml
index 1fef7f5..161221e 100644
--- a/modules/controlcenter/launcher/Settings.qml
+++ b/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 {
-        Layout.alignment: Qt.AlignHCenter
-        text: "apps"
-        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
+    SettingsHeader {
+        icon: "apps"
+        title: qsTr("Launcher Settings")
     }
 
     SectionHeader {
diff --git a/modules/controlcenter/network/EthernetSettings.qml b/modules/controlcenter/network/EthernetSettings.qml
index 161492c..f0f66b4 100644
--- a/modules/controlcenter/network/EthernetSettings.qml
+++ b/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 {
-        Layout.alignment: Qt.AlignHCenter
-        text: "cable"
-        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
+    SettingsHeader {
+        icon: "cable"
+        title: qsTr("Ethernet settings")
     }
 
     StyledText {
diff --git a/modules/controlcenter/network/NetworkSettings.qml b/modules/controlcenter/network/NetworkSettings.qml
index 75a7660..22e07cb 100644
--- a/modules/controlcenter/network/NetworkSettings.qml
+++ b/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 {
-        Layout.alignment: Qt.AlignHCenter
-        text: "router"
-        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
+    SettingsHeader {
+        icon: "router"
+        title: qsTr("Network Settings")
     }
 
     SectionHeader {
diff --git a/modules/controlcenter/network/WirelessSettings.qml b/modules/controlcenter/network/WirelessSettings.qml
index 0eb1578..f87fe39 100644
--- a/modules/controlcenter/network/WirelessSettings.qml
+++ b/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 {
-        Layout.alignment: Qt.AlignHCenter
-        text: "wifi"
-        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
+    SettingsHeader {
+        icon: "wifi"
+        title: qsTr("Network settings")
     }
 
     SectionHeader {