Settings UI for color scheme presets

Modules/Settings/Controls/SchemesListView.qml

@@ -0,0 +1,161 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Components
+
+Item {
+	id: root
+
+	required property string name
+	required property var object
+	property alias row: row
+	required property string setting
+	property bool shouldBeActive: true
+	required property list<var> stringList
+
+	signal optionSet(option: string)
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.height : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+
+		CustomText {
+			id: text
+
+			Layout.fillWidth: true
+			font.pointSize: Appearance.font.size.larger
+			text: root.name
+		}
+
+		CustomClippingRect {
+			Layout.preferredHeight: 42 * 6 + Appearance.padding.normal * 2 + Appearance.spacing.small * 5
+			Layout.preferredWidth: 500
+			color: DynamicColors.tPalette.m3surfaceContainer
+			radius: (21 + Appearance.padding.normal) * Appearance.rounding.scale
+
+			CustomRect {
+				id: searchBox
+
+				anchors.left: parent.left
+				anchors.margins: Appearance.padding.normal
+				anchors.right: parent.right
+				anchors.top: parent.top
+				color: DynamicColors.tPalette.m3surfaceContainer
+				implicitHeight: 42
+				radius: Appearance.rounding.full
+
+				MaterialIcon {
+					id: searchIcon
+
+					anchors.bottom: parent.bottom
+					anchors.left: parent.left
+					anchors.leftMargin: Appearance.padding.large
+					anchors.top: parent.top
+					font.pointSize: Appearance.font.size.large
+					text: "search"
+					verticalAlignment: Text.AlignVCenter
+				}
+
+				CustomTextField {
+					id: textSearch
+
+					anchors.left: searchIcon.right
+					anchors.leftMargin: Appearance.spacing.small
+					anchors.right: parent.right
+					anchors.rightMargin: Appearance.spacing.normal
+					anchors.verticalCenter: parent.verticalCenter
+					placeholderText: "Search..."
+				}
+			}
+
+			CustomClippingRect {
+				anchors.bottom: parent.bottom
+				anchors.left: parent.left
+				anchors.margins: Appearance.padding.normal
+				anchors.right: parent.right
+				anchors.top: searchBox.bottom
+				bottomLeftRadius: 21
+				bottomRightRadius: 21
+
+				CustomListView {
+					anchors.fill: parent
+					clip: true
+					spacing: Appearance.spacing.small
+
+					delegate: CustomRect {
+						id: delegate
+
+						required property string modelData
+
+						anchors.left: parent.left
+						anchors.right: parent.right
+						implicitHeight: 42
+						radius: Appearance.rounding.smallest
+
+						CustomText {
+							anchors.fill: parent
+							anchors.leftMargin: Appearance.padding.normal
+							text: modelData
+							verticalAlignment: Text.AlignVCenter
+						}
+
+						MaterialIcon {
+							anchors.fill: parent
+							anchors.rightMargin: Appearance.padding.normal
+							color: DynamicColors.palette.m3primary
+							font.pointSize: Appearance.font.size.large
+							horizontalAlignment: Text.AlignRight
+							text: "check_circle"
+							verticalAlignment: Text.AlignVCenter
+							visible: root.object[root.setting] === delegate.modelData
+						}
+
+						StateLayer {
+							onClicked: {
+								root.object[root.setting] = delegate.modelData;
+								root.optionSet(delegate.modelData);
+								Config.save();
+							}
+						}
+					}
+					model: ScriptModel {
+						values: {
+							const values = root.stringList;
+							const search = textSearch.text;
+							var regex = new RegExp(search, "i");
+
+							return values.filter(n => regex.test(n));
+						}
+					}
+				}
+			}
+		}
+	}
+}

Modules/Settings/Controls/Separator.qml

@@ -6,7 +6,26 @@ import qs.Config
 CustomRect {
 	id: root
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: 1
+	property bool shouldBeActive: true
+
+	anchors.left: parent.left
+	anchors.right: parent.right
 	color: DynamicColors.tPalette.m3outlineVariant
+	implicitHeight: shouldBeActive ? 1 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 }

Modules/Settings/Controls/SettingActionList.qml

@@ -13,6 +13,7 @@ ColumnLayout {
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 
 	function addAction() {
 		const list = [...root.object[root.setting]];
@@ -44,8 +45,26 @@ ColumnLayout {
 		Config.save();
 	}
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
+	anchors.right: parent.right
+	height: shouldBeActive ? implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
 	spacing: Appearance.spacing.smaller
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent

Modules/Settings/Controls/SettingAliasList.qml

@@ -13,6 +13,7 @@ ColumnLayout {
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 
 	function addAlias() {
 		const list = [...root.object[root.setting]];
@@ -40,8 +41,26 @@ ColumnLayout {
 		Config.save();
 	}
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
+	anchors.right: parent.right
+	height: shouldBeActive ? implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
 	spacing: Appearance.spacing.smaller
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent

Modules/Settings/Controls/SettingBarEntryList.qml

@@ -25,6 +25,7 @@ Item {
 	required property var object
 	property var pendingCommitEntries: []
 	required property string setting
+	property bool shouldBeActive: true
 	property int uidCounter: 0
 	property var visualEntries: []
 
@@ -146,8 +147,25 @@ Item {
 		Config.save();
 	}
 
-	Layout.fillWidth: true
-	implicitHeight: layout.implicitHeight
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? layout.implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Component.onCompleted: root.rebuildVisualEntries()
 

Modules/Settings/Controls/SettingHyprSpinner.qml

@@ -11,6 +11,7 @@ Item {
 	required property string name
 	required property var object
 	required property list<string> settings
+	property bool shouldBeActive: true
 
 	function commitChoice(choice: int, setting: string): void {
 		root.object[setting] = choice;
@@ -32,8 +33,25 @@ Item {
 		return Qt.formatTime(d, "h AP");
 	}
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent

Modules/Settings/Controls/SettingInput.qml

@@ -11,6 +11,7 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 
 	function formattedValue(): string {
 		const value = root.object[root.setting];
@@ -21,8 +22,25 @@ Item {
 		return String(value);
 	}
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent

Modules/Settings/Controls/SettingList.qml

@@ -8,13 +8,31 @@ Item {
 
 	required property int index
 	required property var modelData
+	property bool shouldBeActive: true
 
 	signal addActiveActionRequested
 	signal deleteRequested(int index)
 	signal fieldEdited(string key, var value)
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	CustomRect {
 		anchors.left: parent.left

Modules/Settings/Controls/SettingListView.qml

@@ -11,10 +11,32 @@ Item {
 
 	required property string name
 	required property var object
+	property alias row: row
 	required property string setting
+	property bool shouldBeActive: true
+	required property list<var> stringList
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.height
+	signal optionSet
+
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.height : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	RowLayout {
 		id: row
@@ -120,17 +142,18 @@ Item {
 						StateLayer {
 							onClicked: {
 								root.object[root.setting] = fontDelegate.modelData;
+								root.optionSet();
 								Config.save();
 							}
 						}
 					}
 					model: ScriptModel {
 						values: {
-							const fonts = Qt.fontFamilies();
+							const values = root.stringList;
 							const search = fontSearch.text;
 							var regex = new RegExp(search, "i");
 
-							return fonts.filter(n => regex.test(n));
+							return values.filter(n => regex.test(n));
 						}
 					}
 				}

Modules/Settings/Controls/SettingReadOnly.qml

@@ -9,10 +9,28 @@ Item {
 
 	readonly property bool highlighted: SettingsHighlight.highlightedSetting === name
 	required property string name
+	property bool shouldBeActive: true
 	required property string value
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent

Modules/Settings/Controls/SettingSpinBox.qml

@@ -13,10 +13,28 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 	property real step: 1
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent

Modules/Settings/Controls/SettingSpinner.qml

@@ -11,6 +11,7 @@ Item {
 	required property string name
 	required property var object
 	required property list<string> settings
+	property bool shouldBeActive: true
 
 	function commitChoice(choice: int, setting: string): void {
 		root.object[setting] = choice;
@@ -32,8 +33,25 @@ Item {
 		return Qt.formatTime(d, "h AP");
 	}
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent

Modules/Settings/Controls/SettingStringList.qml

@@ -12,9 +12,27 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: layout.implicitHeight
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? layout.implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent
@@ -46,6 +64,9 @@ Item {
 		StringListEditor {
 			Layout.fillWidth: true
 			addLabel: root.addLabel
+			anchors.left: undefined
+			anchors.right: undefined
+			anchors.verticalCenter: undefined
 			values: [...(root.object[root.setting] ?? [])]
 
 			onListEdited: function (values) {

Modules/Settings/Controls/SettingSwitch.qml

@@ -11,9 +11,27 @@ Item {
 	required property string name
 	required property var object
 	required property string setting
+	property bool shouldBeActive: true
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: row.implicitHeight + Appearance.padding.smaller * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? row.implicitHeight + Appearance.padding.smaller * 2 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Rectangle {
 		anchors.fill: parent

Modules/Settings/Controls/SettingsHeader.qml

@@ -7,9 +7,13 @@ CustomRect {
 	id: root
 
 	required property string name
+	property bool shouldBeActive: true
 
-	Layout.preferredHeight: 60
-	Layout.preferredWidth: 200
+	implicitHeight: 60
+	implicitWidth: 200
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
 
 	CustomText {
 		anchors.fill: parent

Modules/Settings/Controls/SettingsPage.qml

@@ -60,12 +60,18 @@ CustomClippingRect {
 			}
 		}
 
-		ColumnLayout {
+		Column {
 			id: clayout
 
 			anchors.left: parent.left
 			anchors.right: parent.right
 			spacing: Appearance.spacing.small
+
+			// move: Transition {
+			// 	Anim {
+			// 		properties: "y"
+			// 	}
+			// }
 		}
 	}
 }

Modules/Settings/Controls/SettingsSection.qml

@@ -10,18 +10,39 @@ CustomRect {
 	property real contentPadding: Appearance.padding.large
 	property string sectionId: ""
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: layout.implicitHeight + contentPadding * 2
+	anchors.left: parent.left
+	anchors.right: parent.right
 	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: layout.height + contentPadding * 2
 	radius: Appearance.rounding.normal - Appearance.padding.smaller
 
-	ColumnLayout {
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
+
+	Column {
 		id: layout
 
 		anchors.left: parent.left
 		anchors.margins: root.contentPadding
 		anchors.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
+		anchors.top: parent.top
+		// anchors.verticalCenter: parent.verticalCenter
 		spacing: Appearance.spacing.normal
+
+		Behavior on height {
+			Anim {
+			}
+		}
+		move: Transition {
+			Anim {
+				properties: "y"
+			}
+		}
 	}
 }

Modules/Settings/Controls/SpinnerButton.qml

@@ -12,12 +12,29 @@ CustomRect {
 	property alias expanded: menu.expanded
 	property alias label: label
 	property alias menu: menu
+	property bool shouldBeActive: true
 	property alias text: label.text
 
 	color: enabled ? DynamicColors.palette.m3primary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
+	opacity: shouldBeActive ? 1 : 0
 	radius: Appearance.rounding.full
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
 	z: expanded ? 100 : 0
 
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
+
 	CustomText {
 		id: label
 

Modules/Settings/Controls/StringListEditor.qml

@@ -9,6 +9,7 @@ ColumnLayout {
 	id: root
 
 	property string addLabel: qsTr("Add entry")
+	property bool shouldBeActive: true
 	property var values: []
 
 	signal listEdited(var values)
@@ -31,8 +32,26 @@ ColumnLayout {
 		root.listEdited(list);
 	}
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
+	anchors.right: parent.right
+	height: shouldBeActive ? implicitHeight : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
 	spacing: Appearance.spacing.smaller
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	Repeater {
 		model: [...root.values]

Modules/Settings/Controls/WallpaperCropper.qml

@@ -13,11 +13,29 @@ Item {
 	id: wrapper
 
 	property bool changesMade: false
+	property bool shouldBeActive: true
 
 	signal requestCrop
 
-	Layout.fillWidth: true
-	Layout.preferredHeight: 400
+	anchors.left: parent.left
+	anchors.right: parent.right
+	implicitHeight: shouldBeActive ? 400 : 0
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
+
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 
 	IconButton {
 		anchors.margins: Appearance.padding.normal

Modules/Settings/Controls/WallpaperGrid.qml

@@ -12,13 +12,19 @@ GridView {
 
 	readonly property int columnsCount: Math.max(1, Math.floor(width / minCellWidth))
 	readonly property int minCellWidth: 200 + Appearance.spacing.normal
+	property bool shouldBeActive: true
 
-	Layout.preferredHeight: contentHeight
+	anchors.left: parent.left
+	anchors.right: parent.right
 	cellHeight: 140 + Appearance.spacing.normal
 	cellWidth: width / columnsCount
 	clip: true
+	implicitHeight: shouldBeActive ? contentHeight : 0
 	interactive: false
 	model: Wallpapers.list
+	opacity: shouldBeActive ? 1 : 0
+	scale: shouldBeActive ? 1 : 0.8
+	visible: opacity > 0
 
 	delegate: Item {
 		required property int index
@@ -137,4 +143,16 @@ GridView {
 			radius: itemRadius
 		}
 	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+	Behavior on y {
+		Anim {
+		}
+	}
 }