add about page in settings

Modules/SettingsNew/Common/InfoRow.qml

@@ -0,0 +1,78 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ConnectedRect {
+	id: root
+
+	property string icon
+	property color iconColor: DynamicColors.palette.m3onSurfaceVariant
+	property alias label: label.text
+	property Component leadingComponent: icon ? iconComp : null
+	property string subtext
+	property alias value: value.text
+
+	Layout.fillWidth: true
+	implicitHeight: rowLayout.implicitHeight + rowLayout.anchors.margins * 2
+
+	Component {
+		id: iconComp
+
+		MaterialIcon {
+			color: root.iconColor
+			font.pointSize: Appearance.font.size.small
+			text: root.icon
+		}
+	}
+
+	RowLayout {
+		id: rowLayout
+
+		anchors.fill: parent
+		anchors.leftMargin: Appearance.padding.largeIncreased
+		anchors.margins: Appearance.padding.larger
+		anchors.rightMargin: Appearance.padding.largeIncreased
+		spacing: Appearance.spacing.small
+
+		Loader {
+			active: root.leadingComponent
+			sourceComponent: root.leadingComponent
+			visible: root.leadingComponent
+		}
+
+		ColumnLayout {
+			Layout.fillWidth: true
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				Layout.fillWidth: true
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+			}
+
+			CustomText {
+				Layout.fillWidth: true
+				color: DynamicColors.palette.m3outline
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+				text: root.subtext
+				visible: root.subtext
+			}
+		}
+
+		CustomText {
+			id: value
+
+			Layout.maximumWidth: root.width / 2
+			color: DynamicColors.palette.m3onSurfaceVariant
+			elide: Text.ElideRight
+			font.pointSize: Appearance.font.size.small
+			horizontalAlignment: Text.AlignRight
+		}
+	}
+}

Modules/SettingsNew/PageCompRegistry.qml

@@ -150,6 +150,16 @@ QtObject {
 					}
 				}
 			}
+		},
+
+		// About
+		Component {
+			StackPage {
+				Component {
+					AboutPage {
+					}
+				}
+			}
 		}
 	]
 	readonly property Component placeholderComp: Component {

Modules/SettingsNew/PageRegistry.qml

@@ -60,5 +60,11 @@ Singleton {
 			description: qsTr("Poll intervals, audio and brightness increments"),
 			category: "shell"
 		},
+		{
+			name: qsTr("About"),
+			icon: "info",
+			description: qsTr("System information"),
+			category: "about"
+		},
 	]
 }

Modules/SettingsNew/Pages/AboutPage.qml

@@ -0,0 +1,117 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Io
+import ZShell
+import qs.Modules.SettingsNew.Common
+import qs.Config
+import qs.Helpers
+import qs.Components
+
+PageBase {
+	id: root
+
+	property string cliVersion
+	readonly property int pluginCount: 0
+	property string quickshellVersion
+
+	title: qsTr("About")
+
+	ColumnLayout {
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.top: parent.top
+		spacing: Appearance.spacing.extraSmall / 2
+		width: root.cappedWidth
+
+		Process {
+			command: ["quickshell", "--version"]
+			running: true
+
+			stdout: StdioCollector {
+				onStreamFinished: root.quickshellVersion = text.trim().split(" ")[1] ?? ""
+			}
+		}
+
+		ConnectedRect {
+			Layout.fillWidth: true
+			first: true
+			implicitHeight: hero.implicitHeight + Appearance.padding.extraLarge * 2
+			last: true
+
+			ColumnLayout {
+				id: hero
+
+				anchors.centerIn: parent
+				spacing: Appearance.spacing.small
+				width: parent.width - Appearance.padding.largeIncreased * 2
+
+				CustomText {
+					Layout.alignment: Qt.AlignHCenter
+					Layout.topMargin: Appearance.spacing.small
+					font.pointSize: Appearance.font.size.large
+					text: "ZShell"
+				}
+
+				CustomText {
+					Layout.alignment: Qt.AlignHCenter
+					color: DynamicColors.palette.m3onSurfaceVariant
+					font: Appearance.font.body.medium
+					text: ZUtils.version ? `v${ZUtils.version}` : "…"
+				}
+			}
+		}
+
+		// System
+		SectionHeader {
+			text: qsTr("System")
+		}
+
+		InfoRow {
+			first: true
+			label: qsTr("Hostname")
+			value: SystemInfo.hostname
+		}
+
+		InfoRow {
+			label: qsTr("Device")
+			value: SystemInfo.device
+		}
+
+		InfoRow {
+			label: qsTr("Distro")
+			value: SystemInfo.osPrettyName || SystemInfo.osName
+		}
+
+		InfoRow {
+			label: qsTr("Kernel")
+			value: SystemInfo.kernel
+		}
+
+		InfoRow {
+			label: qsTr("Firmware")
+			last: true
+			value: SystemInfo.firmware
+		}
+
+		// Software
+		SectionHeader {
+			text: qsTr("Software")
+		}
+
+		InfoRow {
+			first: true
+			label: qsTr("Shell")
+			value: ZUtils.version || "…"
+		}
+
+		InfoRow {
+			label: qsTr("Quickshell")
+			value: root.quickshellVersion || "…"
+		}
+
+		InfoRow {
+			label: qsTr("Qt")
+			last: true
+			value: ZUtils.qtVersion || "…"
+		}
+	}
+}