update category changes

Helpers/Updates.qml

@@ -11,10 +11,13 @@ Singleton {
 	id: root
 
 	property int availableUpdates: 0
+	property string cmd: ""
 	property bool commandReady
 	property bool loaded
 	property double now: Date.now()
 	property var updates: ({})
+	property bool updating
+	property string updatingPackage: ""
 
 	function formatUpdateTime(timestamp) {
 		const diffMs = root.now - timestamp;
@@ -34,6 +37,22 @@ Singleton {
 		return Qt.formatDateTime(new Date(timestamp), "dd hh:mm");
 	}
 
+	function performPackageUpdate(pkg: string): void {
+		if (root.cmd === "pacman")
+			pkgUpdateProc.command = ["pkexec", root.cmd, "--noconfirm", "-Sy", pkg];
+		else
+			pkgUpdateProc.command = [root.cmd, "--noconfirm", "--sudo", "pkexec", "-Sy", pkg];
+		pkgUpdateProc.running = true;
+	}
+
+	function performSystemUpdate(): void {
+		if (root.cmd === "pacman")
+			sysUpdateProc.command = ["pkexec", root.cmd, "--noconfirm", "-Syu"];
+		else
+			sysUpdateProc.command = [root.cmd, "--noconfirm", "--sudo", "pkexec", "-Syu"];
+		sysUpdateProc.running = true;
+	}
+
 	onUpdatesChanged: {
 		if (!root.loaded)
 			return;
@@ -92,6 +111,28 @@ Singleton {
 		}
 	}
 
+	Process {
+		id: updateCmdDetect
+
+		command: ["sh", "-c", "command -v yay || command -v paru"]
+		running: true
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				const cmd = this.text.trim();
+				let helper;
+
+				if (cmd.length > 0) {
+					helper = cmd.split("/").pop();
+				} else {
+					helper = "pacman";
+				}
+
+				root.cmd = helper;
+			}
+		}
+	}
+
 	Process {
 		id: updatesProc
 
@@ -115,6 +156,44 @@ Singleton {
 		}
 	}
 
+	Process {
+		id: sysUpdateProc
+
+		command: []
+		running: false
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				root.updating = false;
+			}
+		}
+
+		onRunningChanged: {
+			if (running)
+				root.updating = true;
+		}
+	}
+
+	Process {
+		id: pkgUpdateProc
+
+		command: []
+		running: false
+
+		stdout: StdioCollector {
+			onStreamFinished: {
+				root.updating = false;
+			}
+		}
+
+		onRunningChanged: {
+			if (running) {
+				root.updatingPackage = command[command.length - 1];
+				root.updating = true;
+			}
+		}
+	}
+
 	Timer {
 		id: saveTimer
 

Modules/Settings/Categories/SystemUpdates.qml

@@ -6,12 +6,76 @@ import qs.Helpers
 import qs.Components
 import qs.Modules.Settings.Controls
 
-SettingsPage {
+ColumnLayout {
-	SettingsSection {
+	id: root
-		sectionId: "Updates"
 
-		SettingsHeader {
+	RowLayout {
-			name: "System updates"
+		Layout.fillWidth: true
+		Layout.margins: Appearance.padding.large
+		spacing: Appearance.spacing.large
+
+		MaterialIcon {
+			font.pointSize: Appearance.font.size.larger * 4
+			text: "update"
+		}
+
+		ColumnLayout {
+			CustomText {
+				font.pointSize: Appearance.font.size.large * 2
+				text: "System updates"
+			}
+
+			RowLayout {
+				id: row
+
+				// Layout.fillHeight: true
+				Layout.fillWidth: true
+
+				// anchors.left: parent.left
+				// anchors.margins: Appearance.padding.small
+				// anchors.right: parent.right
+				// anchors.verticalCenter: parent.verticalCenter
+
+				CustomText {
+					id: text
+
+					Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+					Layout.fillWidth: true
+					font.pointSize: Appearance.font.size.larger
+					text: `${Updates.availableUpdates} available updates`
+				}
+
+				CustomRect {
+					Layout.preferredHeight: 40
+					Layout.preferredWidth: 150
+					color: Updates.updating ? DynamicColors.layer(DynamicColors.palette.m3outline, 2) : DynamicColors.palette.m3primary
+					radius: Appearance.rounding.full
+
+					RowLayout {
+						anchors.centerIn: parent
+
+						MaterialIcon {
+							animate: true
+							color: DynamicColors.palette.m3onPrimary
+							font.pointSize: Appearance.font.size.large
+							text: Updates.updating ? "update" : "download"
+						}
+
+						CustomText {
+							color: Updates.updating ? DynamicColors.palette.m3onSurface : DynamicColors.palette.m3onPrimary
+							text: "Update all"
+						}
+					}
+
+					StateLayer {
+						color: DynamicColors.palette.m3onPrimary
+						disabled: Updates.updating
+
+						onClicked: Updates.performSystemUpdate()
+					}
+				}
+			}
+		}
 	}
 
 	CustomListView {
@@ -19,8 +83,10 @@ SettingsPage {
 
 		readonly property int itemHeight: 50 + Appearance.padding.smaller * 2
 
+		Layout.fillHeight: true
 		Layout.fillWidth: true
-			Layout.preferredHeight: contentHeight
+		clip: true
+		contentHeight: height
 		spacing: Appearance.spacing.normal
 
 		delegate: CustomRect {
@@ -113,7 +179,7 @@ SettingsPage {
 					icon: "download"
 
 					onClicked: {
-							Quickshell.execDetached(["pkexec", "yay", "-Sy", update.sections[0], "--noconfirm"]);
+						Updates.performPackageUpdate(update.sections[0]);
 					}
 				}
 			}
@@ -128,5 +194,4 @@ SettingsPage {
 					}))
 		}
 	}
-	}
 }