Modules/Settings/Background.qml

@@ -7,7 +7,7 @@ ShapePath {
 	id: root
 
 	readonly property bool flatten: wrapper.height < rounding * 2
-	readonly property real rounding: 8
+	readonly property real rounding: Appearance.rounding.large
 	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
 	required property Wrapper wrapper
 

Modules/Settings/Categories.qml

@@ -86,10 +86,10 @@ Item {
 		}
 	}
 
-	CustomRect {
+	CustomClippingRect {
 		anchors.fill: parent
 		color: DynamicColors.tPalette.m3surfaceContainer
-		radius: 4
+		radius: Appearance.rounding.normal
 
 		CustomListView {
 			id: clayout

Modules/Settings/Categories/Appearance.qml

@@ -20,10 +20,11 @@ CustomFlickable {
 		anchors.left: parent.left
 		anchors.right: parent.right
 
-		CustomRect {
+		CustomClippingRect {
 			Layout.fillWidth: true
 			Layout.preferredHeight: colorLayout.implicitHeight + Appearance.padding.normal * 2
 			color: DynamicColors.tPalette.m3surfaceContainer
+			radius: Appearance.rounding.normal - Appearance.padding.smaller
 
 			ColumnLayout {
 				id: colorLayout
@@ -106,10 +107,11 @@ CustomFlickable {
 			}
 		}
 
-		CustomRect {
+		CustomClippingRect {
 			Layout.fillWidth: true
 			Layout.preferredHeight: idleLayout.implicitHeight + Appearance.padding.normal * 2
 			color: DynamicColors.tPalette.m3surfaceContainer
+			radius: Appearance.rounding.normal - Appearance.padding.smaller
 
 			Idle {
 				id: idleLayout
@@ -129,7 +131,6 @@ CustomFlickable {
 
 		Layout.preferredHeight: 60
 		Layout.preferredWidth: 200
-		radius: 4
 
 		CustomText {
 			id: text

Modules/Settings/Categories/Appearance/Idle.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
 import qs.Components
@@ -35,7 +37,7 @@ ColumnLayout {
 	spacing: Appearance.spacing.smaller
 
 	Repeater {
-		model: Config.general.idle.timeouts
+		model: [...Config.general.idle.timeouts]
 
 		SettingList {
 			Layout.fillWidth: true
@@ -49,8 +51,9 @@ ColumnLayout {
 		}
 	}
 
-	CustomButton {
-		text: qsTr("Add timeout entry")
+	IconButton {
+		font.pointSize: Appearance.font.size.large
+		icon: "add"
 
 		onClicked: root.addTimeoutEntry()
 	}

Modules/Settings/Content.qml

@@ -12,8 +12,8 @@ Item {
 	id: root
 
 	property string currentCategory: "general"
-	readonly property real nonAnimHeight: (screen.height - 400) + viewWrapper.anchors.margins * 2
-	readonly property real nonAnimWidth: view.implicitWidth + (screen.width - 400 * 2) + viewWrapper.anchors.margins * 2
+	readonly property real nonAnimHeight: Math.floor(screen.height / 1.5) + viewWrapper.anchors.margins * 2
+	readonly property real nonAnimWidth: view.implicitWidth + Math.floor(screen.width / 2) + viewWrapper.anchors.margins * 2
 	required property ShellScreen screen
 	required property PersistentProperties visibilities
 
@@ -35,12 +35,12 @@ Item {
 		target: root
 	}
 
-	ClippingRectangle {
+	CustomClippingRect {
 		id: viewWrapper
 
 		anchors.fill: parent
 		anchors.margins: Appearance.padding.smaller
-		color: "transparent"
+		radius: Appearance.rounding.large - Appearance.padding.smaller
 
 		Item {
 			id: view
@@ -68,7 +68,7 @@ Item {
 			anchors.right: parent.right
 			anchors.top: parent.top
 			color: DynamicColors.tPalette.m3surfaceContainer
-			radius: 4
+			radius: Appearance.rounding.normal
 
 			StackView {
 				id: stack

Modules/Settings/Controls/SettingList.qml

@@ -34,11 +34,86 @@ Item {
 		anchors.verticalCenter: parent.verticalCenter
 		spacing: Appearance.spacing.large
 
-		CustomText {
-			Layout.alignment: Qt.AlignLeft
+		Item {
+			id: nameCell
+
+			property string draftName: ""
+			property bool editing: false
+
+			function beginEdit() {
+				draftName = root.modelData.name ?? "";
+				editing = true;
+				nameEditor.forceActiveFocus();
+			}
+
+			function cancelEdit() {
+				draftName = root.modelData.name ?? "";
+				editing = false;
+			}
+
+			function commitEdit() {
+				editing = false;
+
+				if (draftName !== (root.modelData.name ?? "")) {
+					root.fieldEdited("name", draftName);
+				}
+			}
+
+			Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+			Layout.fillHeight: true
 			Layout.preferredWidth: root.width / 2
+
+			HoverHandler {
+				id: nameHover
+
+			}
+
+			CustomText {
+				anchors.left: parent.left
+				anchors.right: editButton.left
+				anchors.rightMargin: Appearance.spacing.small
+				anchors.verticalCenter: parent.verticalCenter
+				elide: Text.ElideRight    // enable if CustomText supports it
 				font.pointSize: Appearance.font.size.larger
 				text: root.modelData.name
+				visible: !nameCell.editing
+			}
+
+			IconButton {
+				id: editButton
+
+				anchors.right: parent.right
+				anchors.verticalCenter: parent.verticalCenter
+				font.pointSize: Appearance.font.size.large
+				icon: "edit"
+				visible: nameHover.hovered && !nameCell.editing
+
+				onClicked: nameCell.beginEdit()
+			}
+
+			CustomRect {
+				anchors.fill: parent
+				color: DynamicColors.tPalette.m3surface
+				radius: Appearance.rounding.small
+				visible: nameCell.editing
+
+				CustomTextField {
+					id: nameEditor
+
+					anchors.fill: parent
+					text: nameCell.draftName
+
+					Keys.onEscapePressed: {
+						nameCell.cancelEdit();
+					}
+					onEditingFinished: {
+						nameCell.commitEdit();
+					}
+					onTextEdited: {
+						nameCell.draftName = nameEditor.text;
+					}
+				}
+			}
 		}
 
 		VSeparator {