added settings options

Modules/Settings/Controls/SettingActionList.qml

@@ -0,0 +1,235 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ColumnLayout {
+	id: root
+
+	required property string name
+	required property var object
+	required property string setting
+
+	function addAction() {
+		const list = [...root.object[root.setting]];
+		list.push({
+			name: "New Action",
+			icon: "bolt",
+			description: "",
+			command: [],
+			enabled: true,
+			dangerous: false
+		});
+		root.object[root.setting] = list;
+		Config.save();
+	}
+
+	function removeAction(index) {
+		const list = [...root.object[root.setting]];
+		list.splice(index, 1);
+		root.object[root.setting] = list;
+		Config.save();
+	}
+
+	function updateAction(index, key, value) {
+		const list = [...root.object[root.setting]];
+		const entry = list[index];
+		entry[key] = value;
+		list[index] = entry;
+		root.object[root.setting] = list;
+		Config.save();
+	}
+
+	Layout.fillWidth: true
+	spacing: Appearance.spacing.smaller
+
+	CustomText {
+		Layout.fillWidth: true
+		font.pointSize: Appearance.font.size.larger
+		text: root.name
+	}
+
+	Repeater {
+		model: [...root.object[root.setting]]
+
+		CustomRect {
+			required property int index
+			required property var modelData
+
+			Layout.fillWidth: true
+			Layout.preferredHeight: layout.implicitHeight + Appearance.padding.normal * 2
+			color: DynamicColors.tPalette.m3surfaceContainer
+			radius: Appearance.rounding.normal
+
+			ColumnLayout {
+				id: layout
+
+				anchors.left: parent.left
+				anchors.margins: Appearance.padding.normal
+				anchors.right: parent.right
+				anchors.verticalCenter: parent.verticalCenter
+				spacing: Appearance.spacing.small
+
+				RowLayout {
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.fillWidth: true
+						font.pointSize: Appearance.font.size.larger
+						text: modelData.name ?? qsTr("Action")
+					}
+
+					IconButton {
+						font.pointSize: Appearance.font.size.large
+						icon: "delete"
+						type: IconButton.Tonal
+
+						onClicked: root.removeAction(index)
+					}
+				}
+
+				Separator {
+				}
+
+				RowLayout {
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.fillWidth: true
+						text: qsTr("Name")
+					}
+
+					CustomRect {
+						Layout.preferredHeight: 33
+						Layout.preferredWidth: 350
+						color: DynamicColors.tPalette.m3surfaceContainerHigh
+						radius: Appearance.rounding.full
+
+						CustomTextField {
+							anchors.fill: parent
+							anchors.leftMargin: Appearance.padding.normal
+							anchors.rightMargin: Appearance.padding.normal
+							text: modelData.name ?? ""
+
+							onEditingFinished: root.updateAction(index, "name", text)
+						}
+					}
+				}
+
+				RowLayout {
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.fillWidth: true
+						text: qsTr("Icon")
+					}
+
+					CustomRect {
+						Layout.preferredHeight: 33
+						Layout.preferredWidth: 350
+						color: DynamicColors.tPalette.m3surfaceContainerHigh
+						radius: Appearance.rounding.full
+
+						CustomTextField {
+							anchors.fill: parent
+							anchors.leftMargin: Appearance.padding.normal
+							anchors.rightMargin: Appearance.padding.normal
+							text: modelData.icon ?? ""
+
+							onEditingFinished: root.updateAction(index, "icon", text)
+						}
+					}
+				}
+
+				RowLayout {
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.fillWidth: true
+						text: qsTr("Description")
+					}
+
+					CustomRect {
+						Layout.preferredHeight: 33
+						Layout.preferredWidth: 350
+						color: DynamicColors.tPalette.m3surfaceContainerHigh
+						radius: Appearance.rounding.full
+
+						CustomTextField {
+							anchors.fill: parent
+							anchors.leftMargin: Appearance.padding.normal
+							anchors.rightMargin: Appearance.padding.normal
+							text: modelData.description ?? ""
+
+							onEditingFinished: root.updateAction(index, "description", text)
+						}
+					}
+				}
+
+				StringListEditor {
+					Layout.fillWidth: true
+					addLabel: qsTr("Add command argument")
+					values: [...(modelData.command ?? [])]
+
+					onListEdited: function (values) {
+						root.updateAction(index, "command", values);
+					}
+				}
+
+				Separator {
+				}
+
+				RowLayout {
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.fillWidth: true
+						text: qsTr("Enabled")
+					}
+
+					CustomSwitch {
+						checked: modelData.enabled ?? true
+
+						onToggled: root.updateAction(index, "enabled", checked)
+					}
+				}
+
+				Separator {
+				}
+
+				RowLayout {
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.fillWidth: true
+						text: qsTr("Dangerous")
+					}
+
+					CustomSwitch {
+						checked: modelData.dangerous ?? false
+
+						onToggled: root.updateAction(index, "dangerous", checked)
+					}
+				}
+			}
+		}
+	}
+
+	RowLayout {
+		Layout.fillWidth: true
+
+		IconButton {
+			font.pointSize: Appearance.font.size.large
+			icon: "add"
+
+			onClicked: root.addAction()
+		}
+
+		CustomText {
+			Layout.fillWidth: true
+			text: qsTr("Add action")
+		}
+	}
+}

Modules/Settings/Controls/SettingAliasList.qml

@@ -0,0 +1,155 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ColumnLayout {
+	id: root
+
+	required property string name
+	required property var object
+	required property string setting
+
+	function addAlias() {
+		const list = [...root.object[root.setting]];
+		list.push({
+			from: "",
+			to: ""
+		});
+		root.object[root.setting] = list;
+		Config.save();
+	}
+
+	function removeAlias(index) {
+		const list = [...root.object[root.setting]];
+		list.splice(index, 1);
+		root.object[root.setting] = list;
+		Config.save();
+	}
+
+	function updateAlias(index, key, value) {
+		const list = [...root.object[root.setting]];
+		const entry = [...list[index]];
+		entry[key] = value;
+		list[index] = entry;
+		root.object[root.setting] = list;
+		Config.save();
+	}
+
+	Layout.fillWidth: true
+	spacing: Appearance.spacing.smaller
+
+	CustomText {
+		Layout.fillWidth: true
+		font.pointSize: Appearance.font.size.larger
+		text: root.name
+	}
+
+	Repeater {
+		model: [...root.object[root.setting]]
+
+		Item {
+			required property int index
+			required property var modelData
+
+			Layout.fillWidth: true
+			Layout.preferredHeight: layout.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: index !== 0
+			}
+
+			ColumnLayout {
+				id: layout
+
+				anchors.left: parent.left
+				anchors.margins: Appearance.padding.small
+				anchors.right: parent.right
+				anchors.verticalCenter: parent.verticalCenter
+				spacing: Appearance.spacing.small
+
+				RowLayout {
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.fillWidth: true
+						text: qsTr("From")
+					}
+
+					CustomRect {
+						Layout.fillWidth: true
+						Layout.preferredHeight: 33
+						color: DynamicColors.tPalette.m3surfaceContainerHigh
+						radius: Appearance.rounding.full
+
+						CustomTextField {
+							anchors.fill: parent
+							anchors.leftMargin: Appearance.padding.normal
+							anchors.rightMargin: Appearance.padding.normal
+							text: modelData.from ?? ""
+
+							onEditingFinished: root.updateAlias(index, "from", text)
+						}
+					}
+
+					IconButton {
+						font.pointSize: Appearance.font.size.large
+						icon: "delete"
+						type: IconButton.Tonal
+
+						onClicked: root.removeAlias(index)
+					}
+				}
+
+				RowLayout {
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.fillWidth: true
+						text: qsTr("To")
+					}
+
+					CustomRect {
+						Layout.fillWidth: true
+						Layout.preferredHeight: 33
+						color: DynamicColors.tPalette.m3surface
+						radius: Appearance.rounding.small
+
+						CustomTextField {
+							anchors.fill: parent
+							anchors.leftMargin: Appearance.padding.normal
+							anchors.rightMargin: Appearance.padding.normal
+							text: modelData.to ?? ""
+
+							onEditingFinished: root.updateAlias(index, "to", text)
+						}
+					}
+				}
+			}
+		}
+	}
+
+	RowLayout {
+		Layout.fillWidth: true
+
+		IconButton {
+			font.pointSize: Appearance.font.size.large
+			icon: "add"
+
+			onClicked: root.addAlias()
+		}
+
+		CustomText {
+			Layout.fillWidth: true
+			text: qsTr("Add alias")
+		}
+	}
+}

Modules/Settings/Controls/SettingBarEntryList.qml

@@ -0,0 +1,523 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import QtQml.Models
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	property bool dragActive: false
+	property real dragHeight: 0
+	property real dragStartX: 0
+	property real dragStartY: 0
+	property real dragX: 0
+	property real dragY: 0
+	property var draggedModelData: null
+	property string draggedUid: ""
+	property bool dropAnimating: false
+	required property string name
+	required property var object
+	property var pendingCommitEntries: []
+	required property string setting
+	property int uidCounter: 0
+	property var visualEntries: []
+
+	function beginVisualDrag(uid, modelData, item) {
+		const pos = item.mapToItem(root, 0, 0);
+
+		root.draggedUid = uid;
+		root.draggedModelData = modelData;
+		root.dragHeight = item.height;
+		root.dragStartX = pos.x;
+		root.dragStartY = pos.y;
+		root.dragX = pos.x;
+		root.dragY = pos.y;
+		root.dragActive = true;
+		root.dropAnimating = false;
+		root.pendingCommitEntries = [];
+	}
+
+	function commitVisualOrder(entries) {
+		const list = [];
+
+		for (let i = 0; i < entries.length; i++)
+			list.push(entries[i].entry);
+
+		root.object[root.setting] = list;
+		Config.save();
+		root.rebuildVisualEntries();
+	}
+
+	function endVisualDrag() {
+		const entries = root.visualEntries.slice();
+		const finalIndex = root.indexForUid(root.draggedUid);
+		const finalItem = listView.itemAtIndex(finalIndex);
+
+		root.dragActive = false;
+
+		if (!finalItem) {
+			root.pendingCommitEntries = entries;
+			root.finishVisualDrag();
+			return;
+		}
+
+		const pos = finalItem.mapToItem(root, 0, 0);
+
+		root.pendingCommitEntries = entries;
+		root.dropAnimating = true;
+		settleX.to = pos.x;
+		settleY.to = pos.y;
+		settleAnim.start();
+	}
+
+	function ensureVisualEntries() {
+		if (!root.dragActive && !root.dropAnimating)
+			root.rebuildVisualEntries();
+	}
+
+	function finishVisualDrag() {
+		const entries = root.pendingCommitEntries.slice();
+
+		root.dragActive = false;
+		root.dropAnimating = false;
+		root.draggedUid = "";
+		root.draggedModelData = null;
+		root.pendingCommitEntries = [];
+		root.dragHeight = 0;
+
+		root.commitVisualOrder(entries);
+	}
+
+	function iconForId(id) {
+		switch (id) {
+		case "workspaces":
+			return "dashboard";
+		case "audio":
+			return "volume_up";
+		case "media":
+			return "play_arrow";
+		case "resources":
+			return "monitoring";
+		case "updates":
+			return "system_update";
+		case "dash":
+			return "space_dashboard";
+		case "spacer":
+			return "horizontal_rule";
+		case "activeWindow":
+			return "web_asset";
+		case "tray":
+			return "widgets";
+		case "upower":
+			return "battery_full";
+		case "network":
+			return "wifi";
+		case "clock":
+			return "schedule";
+		case "notifBell":
+			return "notifications";
+		default:
+			return "drag_indicator";
+		}
+	}
+
+	function indexForUid(uid) {
+		for (let i = 0; i < root.visualEntries.length; i++) {
+			if (root.visualEntries[i].uid === uid)
+				return i;
+		}
+
+		return -1;
+	}
+
+	function labelForId(id) {
+		switch (id) {
+		case "workspaces":
+			return qsTr("Workspaces");
+		case "audio":
+			return qsTr("Audio");
+		case "media":
+			return qsTr("Media");
+		case "resources":
+			return qsTr("Resources");
+		case "updates":
+			return qsTr("Updates");
+		case "dash":
+			return qsTr("Dash");
+		case "spacer":
+			return qsTr("Spacer");
+		case "activeWindow":
+			return qsTr("Active window");
+		case "tray":
+			return qsTr("Tray");
+		case "upower":
+			return qsTr("Power");
+		case "network":
+			return qsTr("Network");
+		case "clock":
+			return qsTr("Clock");
+		case "notifBell":
+			return qsTr("Notification bell");
+		default:
+			return id;
+		}
+	}
+
+	function moveArrayItem(list, from, to) {
+		const next = list.slice();
+		const [item] = next.splice(from, 1);
+		next.splice(to, 0, item);
+		return next;
+	}
+
+	function previewVisualMove(from, hovered, before) {
+		let to = hovered + (before ? 0 : 1);
+
+		if (to > from)
+			to -= 1;
+
+		to = Math.max(0, Math.min(visualModel.items.count - 1, to));
+
+		if (from === to)
+			return;
+
+		visualModel.items.move(from, to);
+		root.visualEntries = root.moveArrayItem(root.visualEntries, from, to);
+	}
+
+	function rebuildVisualEntries() {
+		const entries = root.object[root.setting] ?? [];
+		const next = [];
+
+		for (let i = 0; i < entries.length; i++) {
+			const entry = entries[i];
+			let existing = null;
+
+			for (let j = 0; j < root.visualEntries.length; j++) {
+				if (root.visualEntries[j].entry === entry) {
+					existing = root.visualEntries[j];
+					break;
+				}
+			}
+
+			if (existing)
+				next.push(existing);
+			else
+				next.push({
+					uid: `entry-${root.uidCounter++}`,
+					entry
+				});
+		}
+
+		root.visualEntries = next;
+	}
+
+	function updateEntry(index, value) {
+		const list = [...root.object[root.setting]];
+		const entry = list[index];
+		entry.enabled = value;
+		list[index] = entry;
+		root.object[root.setting] = list;
+		Config.save();
+		root.ensureVisualEntries();
+	}
+
+	Layout.fillWidth: true
+	implicitHeight: layout.implicitHeight
+
+	Component.onCompleted: root.rebuildVisualEntries()
+
+	ParallelAnimation {
+		id: settleAnim
+
+		onFinished: root.finishVisualDrag()
+
+		Anim {
+			id: settleX
+
+			duration: Appearance.anim.durations.normal
+			property: "dragX"
+			target: root
+		}
+
+		Anim {
+			id: settleY
+
+			duration: Appearance.anim.durations.normal
+			property: "dragY"
+			target: root
+		}
+	}
+
+	ColumnLayout {
+		id: layout
+
+		anchors.fill: parent
+		spacing: Appearance.spacing.smaller
+
+		CustomText {
+			Layout.fillWidth: true
+			font.pointSize: Appearance.font.size.larger
+			text: root.name
+		}
+
+		DelegateModel {
+			id: visualModel
+
+			delegate: entryDelegate
+
+			model: ScriptModel {
+				objectProp: "uid"
+				values: root.visualEntries
+			}
+		}
+
+		ListView {
+			id: listView
+
+			Layout.fillWidth: true
+			Layout.preferredHeight: contentHeight
+			boundsBehavior: Flickable.StopAtBounds
+			clip: false
+			implicitHeight: contentHeight
+			implicitWidth: width
+			interactive: !(root.dragActive || root.dropAnimating)
+			model: visualModel
+			spacing: Appearance.spacing.small
+
+			add: Transition {
+				Anim {
+					properties: "opacity,scale"
+					to: 1
+				}
+			}
+			addDisplaced: Transition {
+				Anim {
+					duration: Appearance.anim.durations.normal
+					property: "y"
+				}
+			}
+			displaced: Transition {
+				Anim {
+					duration: Appearance.anim.durations.normal
+					property: "y"
+				}
+			}
+			move: Transition {
+				Anim {
+					duration: Appearance.anim.durations.normal
+					property: "y"
+				}
+			}
+			removeDisplaced: Transition {
+				Anim {
+					duration: Appearance.anim.durations.normal
+					property: "y"
+				}
+			}
+		}
+	}
+
+	Loader {
+		active: root.dragActive || root.dropAnimating
+		asynchronous: false
+
+		sourceComponent: Item {
+			Drag.active: root.dragActive
+			Drag.hotSpot.x: width / 2
+			Drag.hotSpot.y: height / 2
+			height: proxyRect.implicitHeight
+			implicitHeight: proxyRect.implicitHeight
+			implicitWidth: listView.width
+			visible: root.draggedModelData !== null
+			width: listView.width
+			x: root.dragX
+			y: root.dragY
+			z: 100
+
+			Drag.source: QtObject {
+				property string uid: root.draggedUid
+				property int visualIndex: root.indexForUid(root.draggedUid)
+			}
+
+			CustomRect {
+				id: proxyRect
+
+				color: DynamicColors.tPalette.m3surface
+				implicitHeight: proxyRow.implicitHeight + Appearance.padding.small * 2
+				implicitWidth: parent.width
+				opacity: 0.95
+				radius: Appearance.rounding.normal
+				width: parent.width
+
+				RowLayout {
+					id: proxyRow
+
+					anchors.fill: parent
+					anchors.margins: Appearance.padding.small
+					spacing: Appearance.spacing.normal
+
+					CustomRect {
+						color: Qt.alpha(DynamicColors.palette.m3onSurface, 0.12)
+						implicitHeight: 32
+						implicitWidth: implicitHeight
+						radius: Appearance.rounding.small
+
+						MaterialIcon {
+							anchors.centerIn: parent
+							color: DynamicColors.palette.m3onSurfaceVariant
+							text: "drag_indicator"
+						}
+					}
+
+					MaterialIcon {
+						color: DynamicColors.palette.m3onSurfaceVariant
+						text: root.iconForId(root.draggedModelData?.entry?.id ?? "")
+					}
+
+					CustomText {
+						Layout.fillWidth: true
+						font.pointSize: Appearance.font.size.larger
+						text: root.labelForId(root.draggedModelData?.entry?.id ?? "")
+					}
+
+					CustomSwitch {
+						checked: root.draggedModelData?.entry?.enabled ?? true
+						enabled: false
+					}
+				}
+			}
+		}
+	}
+
+	Component {
+		id: entryDelegate
+
+		DropArea {
+			id: slot
+
+			readonly property var entryData: modelData.entry
+			required property var modelData
+			readonly property string uid: modelData.uid
+
+			function previewReorder(drag) {
+				const source = drag.source;
+				if (!source || !source.uid || source.uid === slot.uid)
+					return;
+
+				const from = source.visualIndex;
+				const hovered = slot.DelegateModel.itemsIndex;
+
+				if (from < 0 || hovered < 0)
+					return;
+
+				root.previewVisualMove(from, hovered, drag.y < height / 2);
+			}
+
+			height: entryRow.implicitHeight
+			implicitHeight: entryRow.implicitHeight
+			implicitWidth: listView.width
+			width: ListView.view ? ListView.view.width : listView.width
+
+			onEntered: drag => previewReorder(drag)
+			onPositionChanged: drag => previewReorder(drag)
+
+			CustomRect {
+				id: entryRow
+
+				anchors.fill: parent
+				color: DynamicColors.tPalette.m3surface
+				implicitHeight: entryLayout.implicitHeight + Appearance.padding.small * 2
+				implicitWidth: parent.width
+				opacity: root.draggedUid === slot.uid ? 0 : 1
+				radius: Appearance.rounding.full
+
+				Behavior on opacity {
+					Anim {
+					}
+				}
+
+				RowLayout {
+					id: entryLayout
+
+					anchors.fill: parent
+					anchors.margins: Appearance.padding.small
+					spacing: Appearance.spacing.normal
+
+					CustomRect {
+						id: handle
+
+						color: Qt.alpha(DynamicColors.palette.m3onSurface, handleDrag.active ? 0.12 : handleHover.hovered ? 0.09 : 0.06)
+						implicitHeight: 32
+						implicitWidth: implicitHeight
+						radius: Appearance.rounding.full
+
+						Behavior on color {
+							CAnim {
+							}
+						}
+
+						MaterialIcon {
+							anchors.centerIn: parent
+							color: DynamicColors.palette.m3onSurfaceVariant
+							text: "drag_indicator"
+						}
+
+						HoverHandler {
+							id: handleHover
+
+							cursorShape: handleDrag.active ? Qt.ClosedHandCursor : Qt.OpenHandCursor
+						}
+
+						DragHandler {
+							id: handleDrag
+
+							enabled: true
+							grabPermissions: PointerHandler.CanTakeOverFromAnything
+							target: null
+							xAxis.enabled: false
+							yAxis.enabled: true
+
+							onActiveChanged: {
+								if (active) {
+									root.beginVisualDrag(slot.uid, slot.modelData, entryRow);
+								} else if (root.draggedUid === slot.uid) {
+									root.endVisualDrag();
+								}
+							}
+							onActiveTranslationChanged: {
+								if (!active || root.draggedUid !== slot.uid)
+									return;
+
+								root.dragX = root.dragStartX;
+								root.dragY = root.dragStartY + activeTranslation.y;
+							}
+						}
+					}
+
+					MaterialIcon {
+						color: DynamicColors.palette.m3onSurfaceVariant
+						text: root.iconForId(slot.entryData.id)
+					}
+
+					CustomText {
+						Layout.fillWidth: true
+						font.pointSize: Appearance.font.size.larger
+						text: root.labelForId(slot.entryData.id)
+					}
+
+					CustomSwitch {
+						Layout.rightMargin: Appearance.padding.small
+						checked: slot.entryData.enabled ?? true
+
+						onToggled: root.updateEntry(slot.DelegateModel.itemsIndex, checked)
+					}
+				}
+			}
+		}
+	}
+}

Modules/Settings/Controls/SettingInput.qml

@@ -13,7 +13,6 @@ Item {
 	function formattedValue(): string {
 		const value = root.object[root.setting];
 
-		console.log(value);
 		if (value === null || value === undefined)
 			return "";
 
@@ -44,15 +43,16 @@ Item {
 			id: rect
 
 			Layout.preferredHeight: 33
-			Layout.preferredWidth: Math.max(Math.min(textField.contentWidth + Appearance.padding.normal * 3, 200), 50)
-			color: DynamicColors.tPalette.m3surface
-			radius: Appearance.rounding.small
+			Layout.preferredWidth: Math.max(Math.min(textField.contentWidth + Appearance.padding.normal * 2, 550), 50)
+			color: DynamicColors.tPalette.m3surfaceContainerHigh
+			radius: Appearance.rounding.full
 
 			CustomTextField {
 				id: textField
 
 				anchors.centerIn: parent
 				horizontalAlignment: Text.AlignHCenter
+				implicitWidth: Math.min(contentWidth, 550)
 				text: root.formattedValue()
 
 				onEditingFinished: {

Modules/Settings/Controls/SettingList.qml

@@ -236,8 +236,7 @@ Item {
 						font.pointSize: Appearance.font.size.large
 						icon: "add"
 
-						onClicked: console.log(button.width)
-						// onClicked: root.addActiveActionRequested()
+						onClicked: root.addActiveActionRequested()
 					}
 
 					CustomText {

Modules/Settings/Controls/SettingReadOnly.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	required property string name
+	required property string value
+
+	Layout.fillWidth: true
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+
+		CustomText {
+			Layout.fillWidth: true
+			font.pointSize: Appearance.font.size.larger
+			text: root.name
+		}
+
+		CustomText {
+			color: DynamicColors.palette.m3onSurfaceVariant
+			font.family: Appearance.font.family.mono
+			font.pointSize: Appearance.font.size.normal
+			text: root.value
+		}
+	}
+}

Modules/Settings/Controls/SettingSpinBox.qml

@@ -0,0 +1,47 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	required property string name
+	required property var object
+	required property string setting
+	property real max: Infinity
+	property real min: -Infinity
+	property real step: 1
+
+	Layout.fillWidth: true
+	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+
+		CustomText {
+			Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+			Layout.fillWidth: true
+			font.pointSize: Appearance.font.size.larger
+			text: root.name
+		}
+
+		CustomSpinBox {
+			Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+			max: root.max
+			min: root.min
+			step: root.step
+			value: Number(root.object[root.setting] ?? 0)
+
+			onValueModified: function (value) {
+				root.object[root.setting] = value;
+				Config.save();
+			}
+		}
+	}
+}

Modules/Settings/Controls/SettingSpinner.qml

@@ -18,7 +18,6 @@ Item {
 	function formattedValue(setting: string): string {
 		const value = root.object[setting];
 
-		console.log(value);
 		if (value === null || value === undefined)
 			return "";
 

Modules/Settings/Controls/SettingStringList.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	required property string name
+	required property var object
+	required property string setting
+	property string addLabel: qsTr("Add entry")
+
+	Layout.fillWidth: true
+	Layout.preferredHeight: layout.implicitHeight
+
+	ColumnLayout {
+		id: layout
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		spacing: Appearance.spacing.small
+
+		CustomText {
+			Layout.fillWidth: true
+			font.pointSize: Appearance.font.size.larger
+			text: root.name
+		}
+
+		StringListEditor {
+			Layout.fillWidth: true
+			addLabel: root.addLabel
+			values: [...(root.object[root.setting] ?? [])]
+
+			onListEdited: function (values) {
+				root.object[root.setting] = values;
+				Config.save();
+			}
+		}
+	}
+}

Modules/Settings/Controls/SettingsHeader.qml

@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	required property string name
+
+	Layout.preferredHeight: 60
+	Layout.preferredWidth: 200
+
+	CustomText {
+		anchors.fill: parent
+		font.bold: true
+		font.pointSize: Appearance.font.size.large * 2
+		text: root.name
+		verticalAlignment: Text.AlignVCenter
+	}
+}

Modules/Settings/Controls/SettingsPage.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+import qs.Helpers
+
+CustomFlickable {
+	id: root
+
+	default property alias contentData: clayout.data
+
+	contentHeight: clayout.implicitHeight
+
+	TapHandler {
+		acceptedButtons: Qt.LeftButton
+
+		onTapped: function (eventPoint) {
+			const menu = SettingsDropdowns.activeMenu;
+			if (!menu)
+				return;
+
+			const p = eventPoint.scenePosition;
+
+			if (SettingsDropdowns.hit(SettingsDropdowns.activeTrigger, p))
+				return;
+
+			if (SettingsDropdowns.hit(menu, p))
+				return;
+
+			SettingsDropdowns.closeActive();
+		}
+	}
+
+	ColumnLayout {
+		id: clayout
+
+		anchors.left: parent.left
+		anchors.right: parent.right
+		spacing: Appearance.spacing.small
+	}
+}

Modules/Settings/Controls/SettingsSection.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	default property alias contentData: layout.data
+	property real contentPadding: Appearance.padding.large
+
+	Layout.fillWidth: true
+	Layout.preferredHeight: layout.implicitHeight + contentPadding * 2
+	color: DynamicColors.tPalette.m3surfaceContainer
+	radius: Appearance.rounding.normal - Appearance.padding.smaller
+
+	ColumnLayout {
+		id: layout
+
+		anchors.left: parent.left
+		anchors.margins: root.contentPadding
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		spacing: Appearance.spacing.normal
+	}
+}

Modules/Settings/Controls/StringListEditor.qml

@@ -0,0 +1,107 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+ColumnLayout {
+	id: root
+
+	property string addLabel: qsTr("Add entry")
+	property var values: []
+
+	signal listEdited(var values)
+
+	function addValue() {
+		const list = [...root.values];
+		list.push("");
+		root.listEdited(list);
+	}
+
+	function removeValue(index) {
+		const list = [...root.values];
+		list.splice(index, 1);
+		root.listEdited(list);
+	}
+
+	function updateValue(index, value) {
+		const list = [...root.values];
+		list[index] = value;
+		root.listEdited(list);
+	}
+
+	Layout.fillWidth: true
+	spacing: Appearance.spacing.smaller
+
+	Repeater {
+		model: [...root.values]
+
+		Item {
+			required property int index
+			required property var modelData
+
+			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: index !== 0
+			}
+
+			RowLayout {
+				id: row
+
+				anchors.left: parent.left
+				anchors.margins: Appearance.padding.small
+				anchors.right: parent.right
+				anchors.verticalCenter: parent.verticalCenter
+
+				CustomRect {
+					Layout.fillWidth: true
+					Layout.preferredHeight: 33
+					color: DynamicColors.tPalette.m3surfaceContainerHigh
+					radius: Appearance.rounding.full
+
+					CustomTextField {
+						anchors.fill: parent
+						anchors.leftMargin: Appearance.padding.normal
+						anchors.rightMargin: Appearance.padding.normal
+						text: String(modelData ?? "")
+
+						onEditingFinished: root.updateValue(index, text)
+					}
+				}
+
+				IconButton {
+					font.pointSize: Appearance.font.size.large
+					icon: "delete"
+					type: IconButton.Tonal
+
+					onClicked: root.removeValue(index)
+				}
+			}
+		}
+	}
+
+	RowLayout {
+		Layout.fillWidth: true
+
+		IconButton {
+			font.pointSize: Appearance.font.size.large
+			icon: "add"
+
+			onClicked: root.addValue()
+		}
+
+		CustomText {
+			Layout.fillWidth: true
+			text: root.addLabel
+		}
+	}
+}