settings

Modules/Settings/Controls/SettingList.qml

@@ -229,14 +229,20 @@ Item {
 					anchors.right: parent.right
 					visible: root.modelData.activeAction === undefined
 
-					Item {
-						Layout.fillWidth: true
+					IconButton {
+						id: button
+
+						Layout.alignment: Qt.AlignLeft
+						font.pointSize: Appearance.font.size.large
+						icon: "add"
+
+						onClicked: console.log(button.width)
+						// onClicked: root.addActiveActionRequested()
 					}
 
-					CustomButton {
+					CustomText {
+						Layout.alignment: Qt.AlignLeft
 						text: qsTr("Add active action")
-
-						onClicked: root.addActiveActionRequested()
 					}
 				}
 			}

Modules/Settings/Controls/SettingSpinner.qml

@@ -0,0 +1,88 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	required property string name
+	required property var object
+	required property list<string> settings
+
+	function commitChoice(choice: int, setting: string): void {
+		root.object[setting] = choice;
+		Config.save();
+	}
+
+	function formattedValue(setting: string): string {
+		const value = root.object[setting];
+
+		console.log(value);
+		if (value === null || value === undefined)
+			return "";
+
+		return String(value);
+	}
+
+	function hourToAmPm(hour) {
+		var h = Number(hour) % 24;
+		var d = new Date(2000, 0, 1, h, 0, 0);
+		return Qt.formatTime(d, "h AP");
+	}
+
+	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
+
+		ColumnLayout {
+			Layout.fillHeight: true
+			Layout.fillWidth: true
+
+			CustomText {
+				id: text
+
+				Layout.alignment: Qt.AlignLeft
+				Layout.fillWidth: true
+				font.pointSize: Appearance.font.size.larger
+				text: root.name
+			}
+
+			CustomText {
+				Layout.alignment: Qt.AlignLeft
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.normal
+				text: qsTr("Dark mode will turn on at %1, and turn off at %2.").arg(root.hourToAmPm(root.object[root.settings[0]])).arg(root.hourToAmPm(root.object[root.settings[1]]))
+			}
+		}
+
+		SpinnerButton {
+			Layout.preferredHeight: Appearance.font.size.large + Appearance.padding.smaller * 2
+			Layout.preferredWidth: height * 2
+			currentIndex: root.object[root.settings[0]]
+			text: root.formattedValue(root.settings[0])
+
+			menu.onItemSelected: item => {
+				root.commitChoice(item, root.settings[0]);
+			}
+		}
+
+		SpinnerButton {
+			Layout.preferredHeight: Appearance.font.size.large + Appearance.padding.smaller * 2
+			Layout.preferredWidth: height * 2
+			currentIndex: root.object[root.settings[1]]
+			text: root.formattedValue(root.settings[1])
+
+			menu.onItemSelected: item => {
+				root.commitChoice(item, root.settings[1]);
+			}
+		}
+	}
+}

Modules/Settings/Controls/SpinnerButton.qml

@@ -0,0 +1,42 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Helpers
+import qs.Config
+
+CustomRect {
+	id: root
+
+	property alias currentIndex: menu.currentIndex
+	property alias expanded: menu.expanded
+	property alias label: label
+	property alias menu: menu
+	property alias text: label.text
+
+	color: DynamicColors.palette.m3primary
+	radius: Appearance.rounding.full
+
+	CustomText {
+		id: label
+
+		anchors.centerIn: parent
+		color: DynamicColors.palette.m3onPrimary
+		font.pointSize: Appearance.font.size.large
+	}
+
+	StateLayer {
+		function onClicked(): void {
+			SettingsDropdowns.toggle(menu, root);
+		}
+	}
+
+	PathViewMenu {
+		id: menu
+
+		anchors.centerIn: parent
+		from: 1
+		implicitWidth: root.width
+		itemHeight: root.height
+		to: 24
+	}
+}