Components/CustomButton.qml

@@ -1,12 +1,13 @@
 import QtQuick
 import QtQuick.Controls
+import qs.Config
 
 Button {
 	id: control
 
-	required property color bgColor
+	property color bgColor: DynamicColors.palette.m3primary
 	property int radius: 4
-	required property color textColor
+	property color textColor: DynamicColors.palette.m3onPrimary
 
 	background: CustomRect {
 		color: control.bgColor

Config/General.qml

@@ -30,10 +30,12 @@ JsonObject {
 	component Idle: JsonObject {
 		property list<var> timeouts: [
 			{
+				name: "Lock",
 				timeout: 180,
 				idleAction: "lock"
 			},
 			{
+				name: "Screen",
 				timeout: 300,
 				idleAction: "dpms off",
 				activeAction: "dpms on"

Drawers/Panels.qml

@@ -143,6 +143,7 @@ Item {
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
 		panels: root
+		screen: root.screen
 		visibilities: root.visibilities
 	}
 

Modules/Settings/Categories/Appearance.qml

@@ -5,12 +5,15 @@ import QtQuick.Layouts
 import qs.Components
 import qs.Modules as Modules
 import qs.Modules.Settings.Controls
+import qs.Modules.Settings.Categories.Appearance
 import qs.Config
 import qs.Helpers
 
-CustomRect {
+CustomFlickable {
 	id: root
 
+	contentHeight: clayout.implicitHeight
+
 	ColumnLayout {
 		id: clayout
 
@@ -108,17 +111,13 @@ CustomRect {
 			Layout.preferredHeight: idleLayout.implicitHeight + Appearance.padding.normal * 2
 			color: DynamicColors.tPalette.m3surfaceContainer
 
-			ColumnLayout {
+			Idle {
 				id: idleLayout
 
 				anchors.left: parent.left
 				anchors.margins: Appearance.padding.large
 				anchors.right: parent.right
 				anchors.verticalCenter: parent.verticalCenter
-
-				Settings {
-					name: "Idle"
-				}
 			}
 		}
 	}

Modules/Settings/Categories/Appearance/Idle.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+import qs.Modules.Settings.Controls
+
+ColumnLayout {
+	id: root
+
+	function addTimeoutEntry() {
+		let list = [...Config.general.idle.timeouts];
+
+		list.push({
+			name: "New Entry",
+			timeout: 600,
+			idleAction: "lock"
+		});
+
+		Config.general.idle.timeouts = list;
+		Config.save();
+	}
+
+	function updateTimeoutEntry(i, key, value) {
+		const list = [...Config.general.idle.timeouts];
+		let entry = list[i];
+
+		entry[key] = value;
+		list[i] = entry;
+
+		Config.general.idle.timeouts = list;
+		Config.save();
+	}
+
+	Layout.fillWidth: true
+	spacing: Appearance.spacing.smaller
+
+	Repeater {
+		model: Config.general.idle.timeouts
+
+		SettingList {
+			Layout.fillWidth: true
+
+			onAddActiveActionRequested: {
+				root.updateTimeoutEntry(index, "activeAction", "");
+			}
+			onFieldEdited: function (key, value) {
+				root.updateTimeoutEntry(index, key, value);
+			}
+		}
+	}
+
+	CustomButton {
+		text: qsTr("Add timeout entry")
+
+		onClicked: root.addTimeoutEntry()
+	}
+}

Modules/Settings/Content.qml

@@ -12,8 +12,9 @@ Item {
 	id: root
 
 	property string currentCategory: "general"
-	readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
+	readonly property real nonAnimHeight: (screen.height - 400) + viewWrapper.anchors.margins * 2
-	readonly property real nonAnimWidth: view.implicitWidth + 700 + viewWrapper.anchors.margins * 2
+	readonly property real nonAnimWidth: view.implicitWidth + (screen.width - 400 * 2) + viewWrapper.anchors.margins * 2
+	required property ShellScreen screen
 	required property PersistentProperties visibilities
 
 	implicitHeight: nonAnimHeight

Modules/Settings/Controls/SettingList.qml

@@ -6,12 +6,25 @@ import qs.Config
 Item {
 	id: root
 
-	required property list<var> modelData
+	required property int index
-	required property string name
+	required property var modelData
+
+	signal addActiveActionRequested
+	signal fieldEdited(string key, var value)
 
 	Layout.fillWidth: true
 	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
 
+	CustomRect {
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+		anchors.topMargin: -(Appearance.spacing.smaller / 2)
+		color: DynamicColors.tPalette.m3outlineVariant
+		implicitHeight: 1
+		visible: root.index !== 0
+	}
+
 	RowLayout {
 		id: row
 
@@ -19,14 +32,13 @@ Item {
 		anchors.margins: Appearance.padding.small
 		anchors.right: parent.right
 		anchors.verticalCenter: parent.verticalCenter
+		spacing: Appearance.spacing.large
 
 		CustomText {
-			id: text
-
 			Layout.alignment: Qt.AlignLeft
-			Layout.fillWidth: true
+			Layout.preferredWidth: root.width / 2
 			font.pointSize: Appearance.font.size.larger
-			text: root.name
+			text: root.modelData.name
 		}
 
 		VSeparator {
@@ -35,21 +47,17 @@ Item {
 		ColumnLayout {
 			id: cLayout
 
-			RowLayout {
+			Layout.fillWidth: true
-				id: timeLayout
 
+			RowLayout {
 				Layout.fillWidth: true
 
 				CustomText {
-					id: timeText
-
 					Layout.fillWidth: true
-					text: root.modelData.name
+					text: qsTr("Timeout")
 				}
 
 				CustomRect {
-					id: timeRect
-
 					Layout.preferredHeight: 33
 					Layout.preferredWidth: Math.max(Math.min(timeField.contentWidth + Appearance.padding.normal * 3, 200), 50)
 					color: DynamicColors.tPalette.m3surface
@@ -60,11 +68,10 @@ Item {
 
 						anchors.centerIn: parent
 						horizontalAlignment: Text.AlignHCenter
-						text: root.modelData.timeout
+						text: String(root.modelData.timeout ?? "")
 
 						onEditingFinished: {
-							root.modelData.timeout = timeField.text;
+							root.fieldEdited("timeout", Number(text));
-							Config.save();
 						}
 					}
 				}
@@ -74,20 +81,14 @@ Item {
 			}
 
 			RowLayout {
-				id: idleLayout
-
 				Layout.fillWidth: true
 
 				CustomText {
-					id: idleText
-
 					Layout.fillWidth: true
-					text: root.modelData.name
+					text: qsTr("Idle Action")
 				}
 
 				CustomRect {
-					id: idleRect
-
 					Layout.preferredHeight: 33
 					Layout.preferredWidth: Math.max(Math.min(idleField.contentWidth + Appearance.padding.normal * 3, 200), 50)
 					color: DynamicColors.tPalette.m3surface
@@ -98,11 +99,10 @@ Item {
 
 						anchors.centerIn: parent
 						horizontalAlignment: Text.AlignHCenter
-						text: root.modelData.idleAction
+						text: root.modelData.idleAction ?? ""
 
 						onEditingFinished: {
-							root.modelData.idleAction = idleField.text;
+							root.fieldEdited("idleAction", text);
-							Config.save();
 						}
 					}
 				}
@@ -111,25 +111,23 @@ Item {
 			Separator {
 			}
 
-			Loader {
+			Item {
-				id: loader
-
 				Layout.fillWidth: true
-				active: root.modelData.activeAction ?? false
+				implicitHeight: activeActionRow.visible ? activeActionRow.implicitHeight : addButtonRow.implicitHeight
 
 				RowLayout {
-					id: actionLayout
+					id: activeActionRow
+
+					anchors.left: parent.left
+					anchors.right: parent.right
+					visible: root.modelData.activeAction !== undefined
 
 					CustomText {
-						id: actionText
-
 						Layout.fillWidth: true
-						text: root.modelData.name
+						text: qsTr("Active Action")
 					}
 
 					CustomRect {
-						id: actionRect
-
 						Layout.preferredHeight: 33
 						Layout.preferredWidth: Math.max(Math.min(actionField.contentWidth + Appearance.padding.normal * 3, 200), 50)
 						color: DynamicColors.tPalette.m3surface
@@ -140,13 +138,30 @@ Item {
 
 							anchors.centerIn: parent
 							horizontalAlignment: Text.AlignHCenter
-							text: root.modelData.activeAction
+							text: root.modelData.activeAction ?? ""
 
 							onEditingFinished: {
-								root.modelData.activeAction = actionField.text;
+								root.fieldEdited("activeAction", text);
-								Config.save();
+							}
-							}
+						}
-						}
+					}
+				}
+
+				RowLayout {
+					id: addButtonRow
+
+					anchors.left: parent.left
+					anchors.right: parent.right
+					visible: root.modelData.activeAction === undefined
+
+					Item {
+						Layout.fillWidth: true
+					}
+
+					CustomButton {
+						text: qsTr("Add active action")
+
+						onClicked: root.addActiveActionRequested()
 					}
 				}
 			}

Modules/Settings/Wrapper.qml

@@ -8,6 +8,7 @@ Item {
 	id: root
 
 	required property var panels
+	required property ShellScreen screen
 	required property PersistentProperties visibilities
 
 	implicitHeight: 0
@@ -46,6 +47,9 @@ Item {
 		}
 	]
 
+	CustomClippingRect {
+		anchors.fill: parent
+
 		Loader {
 			id: content
 
@@ -55,7 +59,9 @@ Item {
 			visible: true
 
 			sourceComponent: Content {
+				screen: root.screen
 				visibilities: root.visibilities
 			}
 		}
 	}
+}