Drawers/Backgrounds.qml

@@ -8,6 +8,7 @@ import qs.Modules.Notifications.Sidebar.Utils as Utils
 import qs.Modules.Dashboard as Dashboard
 import qs.Modules.Osd as Osd
 import qs.Modules.Launcher as Launcher
+import qs.Modules.Settings as Settings
 
 Shape {
     id: root
@@ -77,4 +78,13 @@ Shape {
 		startX: root.width
 		startY: root.panels.notifications.height
 	}
+
+	Settings.Background {
+		id: settings
+
+		wrapper: root.panels.settings
+
+		startX: ( root.width - wrapper.width ) / 2 - rounding
+		startY: 0
+	}
 }

Drawers/Bar.qml

@@ -113,6 +113,7 @@ Variants {
 				property bool osd
 				property bool launcher
 				property bool notif: NotifServer.popups.length > 0
+				property bool settings
 
 				Component.onCompleted: Visibilities.load(scope.modelData, this)
 			}

Drawers/Panels.qml

@@ -9,6 +9,7 @@ import qs.Modules.Dashboard as Dashboard
 import qs.Modules.Osd as Osd
 import qs.Components.Toast as Toasts
 import qs.Modules.Launcher as Launcher
+import qs.Modules.Settings as Settings
 import qs.Config
 
 Item {
@@ -26,6 +27,7 @@ Item {
 	readonly property alias osd: osd
 	readonly property alias toasts: toasts
 	readonly property alias launcher: launcher
+	readonly property alias settings: settings
 
     anchors.fill: parent
     // anchors.margins: 8
@@ -121,4 +123,14 @@ Item {
 		anchors.bottom: utilities.top
 		anchors.right: parent.right
 	}
+
+	Settings.Wrapper {
+		id: settings
+
+		visibilities: root.visibilities
+		panels: root
+
+		anchors.top: parent.top
+		anchors.horizontalCenter: parent.horizontalCenter
+	}
 }

Modules/Settings/Background.qml

@@ -0,0 +1,67 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Components
+import qs.Modules as Modules
+import qs.Config
+import qs.Helpers
+
+ShapePath {
+	id: root
+	
+	required property Wrapper wrapper
+	readonly property real rounding: 8
+	readonly property bool flatten: wrapper.height < rounding * 2
+	readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+
+    strokeWidth: -1
+	fillColor: DynamicColors.palette.m3surface
+
+	PathArc {
+		relativeX: root.rounding
+		relativeY: root.roundingY
+		radiusX: root.rounding
+		radiusY: Math.min( root.roundingY, root.wrapper.height )
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: root.wrapper.height - root.roundingY * 2
+	}
+
+	PathArc {
+		relativeX: root.rounding 
+		relativeY: root.roundingY
+		radiusX: root.rounding
+		radiusY: Math.min( root.rounding, root.wrapper.height )
+		direction: PathArc.Counterclockwise
+	}
+
+	PathLine {
+		relativeX: root.wrapper.width - root.rounding * 2
+		relativeY: 0
+	}
+
+	PathArc {
+		relativeX: root.rounding
+		relativeY: - root.roundingY
+		radiusX: root.rounding
+		radiusY: Math.min( root.rounding, root.wrapper.height )
+		direction: PathArc.Counterclockwise
+	}
+
+	PathLine {
+		relativeX: 0
+		relativeY: - ( root.wrapper.height - root.roundingY * 2 )
+	}
+
+	PathArc {
+		relativeX: root.rounding
+		relativeY: - root.roundingY
+		radiusX: root.rounding
+		radiusY: Math.min( root.rounding, root.wrapper.height )
+	}
+
+	Behavior on fillColor {
+		Modules.CAnim {}
+	}
+}

Modules/Settings/Categories.qml

@@ -0,0 +1,176 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Modules as Modules
+import qs.Config
+import qs.Helpers
+
+Item {
+	id: root
+
+	required property Item content
+
+	implicitWidth: clayout.implicitWidth + Appearance.padding.smaller * 2
+	implicitHeight: clayout.implicitHeight + Appearance.padding.smaller * 2
+
+	CustomRect {
+
+		anchors.fill: parent
+
+		color: DynamicColors.tPalette.m3surfaceContainer
+		radius: 4
+
+		ColumnLayout {
+			id: clayout
+
+			spacing: 5
+
+			anchors.centerIn: parent
+
+			Category {
+				name: "General"
+				icon: "settings"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+			
+			Category {
+				name: "Wallpaper"
+				icon: "wallpaper"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Bar"
+				icon: "settop_component"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Lockscreen"
+				icon: "lock"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+			
+			Category {
+				name: "Services"
+				icon: "build_circle"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Notifications"
+				icon: "notifications"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Sidebar"
+				icon: "view_sidebar"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Utilities"
+				icon: "handyman"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Dashboard"
+				icon: "dashboard"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Appearance"
+				icon: "colors"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "On screen display"
+				icon: "display_settings"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Launcher"
+				icon: "rocket_launch"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+
+			Category {
+				name: "Colors"
+				icon: "colors"
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+			}
+		}
+	}
+
+	component Category: CustomRect {
+		id: categoryItem
+
+		required property string name
+		required property string icon
+
+		implicitWidth: 200
+		implicitHeight: 42
+		radius: 4
+
+		RowLayout {
+			id: layout
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.margins: Appearance.padding.smaller
+			
+			MaterialIcon {
+				id: icon
+
+				text: categoryItem.icon
+				font.pointSize: 22
+				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+				Layout.preferredWidth: icon.contentWidth
+				Layout.fillHeight: true
+				verticalAlignment: Text.AlignVCenter
+			}
+
+			CustomText {
+				id: text
+
+				text: categoryItem.name
+				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+				Layout.fillWidth: true
+				Layout.fillHeight: true
+				Layout.leftMargin: Appearance.spacing.normal
+				verticalAlignment: Text.AlignVCenter
+			}
+		}
+
+		StateLayer {
+			id: layer
+
+			onClicked: {
+				root.content.currentCategory = categoryItem.name.toLowerCase();
+			}
+		}
+	}
+}

Modules/Settings/Categories/Appearance.qml

@@ -0,0 +1,68 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Modules as Modules
+import qs.Modules.Settings.Controls
+import qs.Config
+import qs.Helpers
+
+CustomRect {
+	id: root
+
+	ColumnLayout {
+		id: clayout
+		
+		anchors.left: parent.left
+		anchors.right: parent.right
+
+		CustomRect {
+			
+			Layout.preferredHeight: colorLayout.implicitHeight
+			Layout.fillWidth: true
+
+			color: DynamicColors.tPalette.m3surfaceContainer
+			
+			ColumnLayout {
+				id: colorLayout
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				anchors.margins: Appearance.padding.large
+
+				Settings {
+					name: "smth"
+				}
+
+				SettingSwitch {
+					name: "wallust"
+					setting: Config.general.color.wallust
+				}
+			}
+		}
+	}
+
+	component Settings: CustomRect {
+		id: settingsItem
+
+		required property string name
+
+		Layout.preferredWidth: 200
+		Layout.preferredHeight: 42
+		radius: 4
+
+		CustomText {
+			id: text
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.margins: Appearance.padding.smaller
+
+			text: settingsItem.name
+			font.pointSize: 32
+			font.bold: true
+			verticalAlignment: Text.AlignVCenter
+		}
+	}
+}

Modules/Settings/Categories/Background.qml

@@ -0,0 +1,13 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Modules as Modules
+import qs.Config
+import qs.Helpers
+
+CustomRect {
+	id: root
+	
+}

Modules/Settings/Categories/General.qml

@@ -0,0 +1,56 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Modules as Modules
+import qs.Config
+import qs.Helpers
+
+CustomRect {
+	id: root
+
+	ColumnLayout {
+		id: clayout
+
+		anchors.fill: parent
+
+		Settings {
+			name: "apps"
+		}
+
+		Item {
+			
+		}
+	}
+
+	component Settings: CustomRect {
+		id: settingsItem
+
+		required property string name
+
+		implicitWidth: 200
+		implicitHeight: 42
+		radius: 4
+
+		RowLayout {
+			id: layout
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			anchors.margins: Appearance.padding.smaller
+
+			CustomText {
+				id: text
+
+				text: settingsItem.name
+				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+				Layout.fillWidth: true
+				Layout.fillHeight: true
+				Layout.leftMargin: Appearance.spacing.normal
+				verticalAlignment: Text.AlignVCenter
+			}
+		}
+	}
+}

Modules/Settings/Content.qml

@@ -0,0 +1,101 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Controls
+import qs.Components
+import qs.Modules as Modules
+import qs.Modules.Settings.Categories as Cat
+import qs.Config
+import qs.Helpers
+
+Item {
+	id: root
+
+	required property PersistentProperties visibilities
+	readonly property real nonAnimWidth: view.implicitWidth + 500 + viewWrapper.anchors.margins * 2 
+	readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
+	property string currentCategory: "general"
+
+	implicitWidth: nonAnimWidth
+	implicitHeight: nonAnimHeight
+
+	Connections {
+		target: root
+		
+		function onCurrentCategoryChanged() {
+			stack.pop();
+			if ( currentCategory === "general" ) {
+				stack.push(general);
+			} else if ( currentCategory === "wallpaper" ) {
+				stack.push(background);
+			} else if ( currentCategory === "appearance" ) {
+				stack.push(appearance);
+			}
+		}
+	}
+
+	ClippingRectangle {
+		id: viewWrapper
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.smaller
+		color: "transparent"
+
+		Item {
+			id: view
+			anchors.top: parent.top
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			implicitWidth: layout.implicitWidth
+			implicitHeight: layout.implicitHeight
+			
+			Categories {
+				id: layout
+
+				content: root
+				
+				anchors.fill: parent
+			}
+		}
+
+		CustomClippingRect {
+			id: categoryContent
+			
+			anchors.top: parent.top
+			anchors.bottom: parent.bottom
+			anchors.right: parent.right
+			anchors.left: view.right
+			anchors.leftMargin: Appearance.spacing.smaller
+
+			radius: 4
+
+			color: DynamicColors.tPalette.m3surfaceContainer
+
+			StackView {
+				id: stack
+
+				anchors.fill: parent
+				anchors.margins: Appearance.padding.smaller
+
+				initialItem: general
+			}
+		}
+	}
+
+	Component {
+		id: general
+
+		Cat.General {}
+	}
+
+	Component {
+		id: background
+
+		Cat.Background {}
+	}
+
+	Component {
+		id: appearance
+
+		Cat.Appearance {}
+	}
+}

Modules/Settings/Controls/SettingSwitch.qml

@@ -0,0 +1,36 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Modules as Modules
+import qs.Config
+import qs.Helpers
+
+RowLayout {
+	id: root
+
+	required property bool setting
+	required property string name
+	
+	Layout.preferredHeight: 42
+	Layout.fillWidth: true
+	
+	CustomText {
+		id: text
+		
+		text: root.name
+		font.pointSize: 16
+		Layout.fillWidth: true
+		Layout.alignment: Qt.AlignLeft
+	}
+
+	CustomSwitch {
+		id: cswitch
+
+		Layout.alignment: Qt.AlignRight
+
+		checked: root.setting
+		onToggled: root.setting = checked
+	}
+}

Modules/Settings/Settings.qml

@@ -0,0 +1,12 @@
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Modules as Modules
+import qs.Config
+import qs.Helpers
+
+Item {
+
+}

Modules/Settings/Wrapper.qml

@@ -0,0 +1,66 @@
+import Quickshell
+import QtQuick
+import qs.Components
+import qs.Modules as Modules
+import qs.Config
+import qs.Helpers
+
+Item {
+	id: root
+
+	required property PersistentProperties visibilities
+	required property var panels
+
+	implicitWidth: content.implicitWidth
+	implicitHeight: 0
+
+	visible: height > 0
+
+	states: State {
+		name: "visible"
+
+		when: root.visibilities.settings
+
+		PropertyChanges {
+			root.implicitHeight: content.implicitHeight
+		}
+	}
+
+	transitions: [
+		Transition {
+			from: ""
+			to: "visible"
+
+			Modules.Anim {
+				target: root
+				property: "implicitHeight"
+				duration: MaterialEasing.expressiveEffectsTime
+				easing.bezierCurve: MaterialEasing.expressiveEffects
+			}
+		},
+
+		Transition {
+			from: "visible"
+			to: ""
+
+			Modules.Anim {
+				target: root
+				property: "implicitHeight"
+				easing.bezierCurve: MaterialEasing.expressiveEffects
+			}
+		}
+	]
+
+	Loader {
+		id: content
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.bottom: parent.bottom
+
+		visible: true
+		active: true
+
+		sourceComponent: Content {
+			visibilities: root.visibilities
+		}
+	}
+}

Modules/Shortcuts.qml

@@ -41,4 +41,13 @@ Scope {
 			visibilities.osd = !visibilities.osd
 		}
 	}
+
+	CustomShortcut {
+		name: "toggle-settings"
+
+		onPressed: {
+			const visibilities = Visibilities.getForActive()
+			visibilities.settings = !visibilities.settings
+		}
+	}
 }