menu switch

Modules/Bar/BarLoader.qml

@@ -73,6 +73,7 @@ RowLayout {
 	Repeater {
 		id: repeater
 
+		// model: Config.barConfig.entries.filted(n => n.index > 50).sort(n => n.index)
 		model: Config.barConfig.entries
 
 		DelegateChooser {

Modules/Dashboard/Background.qml

@@ -49,12 +49,12 @@ ShapePath {
 		radiusX: root.rounding
 		radiusY: Math.min(root.rounding, root.wrapper.height)
 		relativeX: root.rounding
-		relativeY: -root.roundingY
+		relativeY: root.roundingY
 	}
 
 	PathLine {
 		relativeX: 0
-		relativeY: -(root.wrapper.height - root.roundingY * 2)
+		relativeY: -(root.wrapper.height)
 	}
 
 	PathArc {

Modules/Lock/LockSurface.qml

@@ -164,6 +164,21 @@ WlSessionLockSurface {
 		implicitWidth: size
 		scale: 0
 
+		// MultiEffect {
+		// 	anchors.fill: lockBg
+		// 	autoPaddingEnabled: false
+		// 	blur: 1
+		// 	blurEnabled: true
+		// 	blurMax: 64
+		// 	maskEnabled: true
+		// 	maskSource: lockBg
+		//
+		// 	source: ShaderEffectSource {
+		// 		sourceItem: background
+		// 		sourceRect: Qt.rect(lockBg.x, lockBg.y, lockBg.width, lockBg, height)
+		// 	}
+		// }
+
 		CustomRect {
 			id: lockBg
 

Modules/Resources/Background.qml

@@ -28,15 +28,14 @@ ShapePath {
 
 	PathLine {
 		relativeX: 0
-		relativeY: root.wrapper.height - root.roundingY * 2
+		relativeY: root.wrapper.height
 	}
 
 	PathArc {
-		direction: PathArc.Counterclockwise
 		radiusX: root.rounding
 		radiusY: Math.min(root.rounding, root.wrapper.height)
 		relativeX: root.rounding
-		relativeY: root.roundingY
+		relativeY: -root.roundingY
 	}
 
 	PathLine {

Modules/Settings/Background.qml

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

Modules/Settings/Categories.qml

@@ -0,0 +1,178 @@
+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
+
+	implicitHeight: clayout.contentHeight + Appearance.padding.smaller * 2
+	implicitWidth: clayout.contentWidth + Appearance.padding.smaller * 2
+
+	ListModel {
+		id: listModel
+
+		ListElement {
+			icon: "settings"
+			name: "General"
+		}
+
+		ListElement {
+			icon: "wallpaper"
+			name: "Wallpaper"
+		}
+
+		ListElement {
+			icon: "settop_component"
+			name: "Bar"
+		}
+
+		ListElement {
+			icon: "lock"
+			name: "Lockscreen"
+		}
+
+		ListElement {
+			icon: "build_circle"
+			name: "Services"
+		}
+
+		ListElement {
+			icon: "notifications"
+			name: "Notifications"
+		}
+
+		ListElement {
+			icon: "view_sidebar"
+			name: "Sidebar"
+		}
+
+		ListElement {
+			icon: "handyman"
+			name: "Utilities"
+		}
+
+		ListElement {
+			icon: "dashboard"
+			name: "Dashboard"
+		}
+
+		ListElement {
+			icon: "colors"
+			name: "Appearance"
+		}
+
+		ListElement {
+			icon: "display_settings"
+			name: "On screen display"
+		}
+
+		ListElement {
+			icon: "rocket_launch"
+			name: "Launcher"
+		}
+
+		ListElement {
+			icon: "colors"
+			name: "Colors"
+		}
+	}
+
+	CustomRect {
+		anchors.fill: parent
+		color: DynamicColors.tPalette.m3surfaceContainer
+		radius: 4
+
+		CustomListView {
+			id: clayout
+
+			anchors.centerIn: parent
+			contentHeight: contentItem.childrenRect.height
+			contentWidth: contentItem.childrenRect.width
+			highlightFollowsCurrentItem: false
+			implicitHeight: contentItem.childrenRect.height
+			implicitWidth: contentItem.childrenRect.width
+			model: listModel
+			spacing: 5
+
+			delegate: Category {
+			}
+			highlight: CustomRect {
+				color: DynamicColors.palette.m3primary
+				implicitHeight: clayout.currentItem?.implicitHeight ?? 0
+				implicitWidth: clayout.width
+				radius: 4
+				y: clayout.currentItem?.y ?? 0
+
+				Behavior on y {
+					Anim {
+						duration: Appearance.anim.durations.small
+						easing.bezierCurve: Appearance.anim.curves.expressiveEffects
+					}
+				}
+			}
+		}
+	}
+
+	component Category: CustomRect {
+		id: categoryItem
+
+		required property string icon
+		required property int index
+		required property string name
+
+		implicitHeight: 42
+		implicitWidth: 200
+		radius: 4
+
+		RowLayout {
+			id: layout
+
+			anchors.left: parent.left
+			anchors.margins: Appearance.padding.smaller
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+
+			MaterialIcon {
+				id: icon
+
+				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+				Layout.fillHeight: true
+				Layout.preferredWidth: icon.contentWidth
+				color: categoryItem.index === clayout.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+				font.pointSize: 22
+				text: categoryItem.icon
+				verticalAlignment: Text.AlignVCenter
+			}
+
+			CustomText {
+				id: text
+
+				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+				Layout.fillHeight: true
+				Layout.fillWidth: true
+				Layout.leftMargin: Appearance.spacing.normal
+				color: categoryItem.index === clayout.currentIndex ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+				text: categoryItem.name
+				verticalAlignment: Text.AlignVCenter
+			}
+		}
+
+		StateLayer {
+			id: layer
+
+			onClicked: {
+				root.content.currentCategory = categoryItem.name.toLowerCase();
+				clayout.currentIndex = categoryItem.index;
+			}
+		}
+	}
+}

Modules/Settings/Categories/Appearance.qml

@@ -0,0 +1,97 @@
+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.fillWidth: true
+			Layout.preferredHeight: colorLayout.implicitHeight
+			color: DynamicColors.tPalette.m3surfaceContainer
+
+			ColumnLayout {
+				id: colorLayout
+
+				anchors.left: parent.left
+				anchors.margins: Appearance.padding.large
+				anchors.right: parent.right
+
+				Settings {
+					name: "smth"
+				}
+
+				SettingSwitch {
+					name: "wallust"
+					object: Config.general.color
+					setting: "wallust"
+				}
+
+				CustomSplitButtonRow {
+					enabled: true
+					label: qsTr("Scheme mode")
+
+					menuItems: [
+						MenuItem {
+							property string val: "light"
+
+							icon: "light_mode"
+							text: qsTr("Light")
+						},
+						MenuItem {
+							property string val: "dark"
+
+							icon: "dark_mode"
+							text: qsTr("Dark")
+						}
+					]
+
+					Component.onCompleted: {
+						if (Config.general.color.mode === "light")
+							active = menuItems[0];
+						else
+							active = menuItems[1];
+					}
+					onSelected: item => {
+						Config.general.color.mode = item.val;
+						Config.save();
+					}
+				}
+			}
+		}
+	}
+
+	component Settings: CustomRect {
+		id: settingsItem
+
+		required property string name
+
+		Layout.preferredHeight: 42
+		Layout.preferredWidth: 200
+		radius: 4
+
+		CustomText {
+			id: text
+
+			anchors.left: parent.left
+			anchors.margins: Appearance.padding.smaller
+			anchors.right: parent.right
+			font.bold: true
+			font.pointSize: 32
+			text: settingsItem.name
+			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,55 @@
+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
+
+		implicitHeight: 42
+		implicitWidth: 200
+		radius: 4
+
+		RowLayout {
+			id: layout
+
+			anchors.left: parent.left
+			anchors.margins: Appearance.padding.smaller
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+
+			CustomText {
+				id: text
+
+				Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+				Layout.fillHeight: true
+				Layout.fillWidth: true
+				Layout.leftMargin: Appearance.spacing.normal
+				text: settingsItem.name
+				verticalAlignment: Text.AlignVCenter
+			}
+		}
+	}
+}

Modules/Settings/Content.qml

@@ -0,0 +1,102 @@
+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
+
+	property string currentCategory: "general"
+	readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
+	readonly property real nonAnimWidth: view.implicitWidth + 500 + viewWrapper.anchors.margins * 2
+	required property PersistentProperties visibilities
+
+	implicitHeight: nonAnimHeight
+	implicitWidth: nonAnimWidth
+
+	Connections {
+		function onCurrentCategoryChanged() {
+			stack.pop();
+			if (currentCategory === "general") {
+				stack.push(general);
+			} else if (currentCategory === "wallpaper") {
+				stack.push(background);
+			} else if (currentCategory === "appearance") {
+				stack.push(appearance);
+			}
+		}
+
+		target: root
+	}
+
+	ClippingRectangle {
+		id: viewWrapper
+
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.smaller
+		color: "transparent"
+
+		Item {
+			id: view
+
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.top: parent.top
+			implicitHeight: layout.implicitHeight
+			implicitWidth: layout.implicitWidth
+
+			Categories {
+				id: layout
+
+				anchors.fill: parent
+				content: root
+			}
+		}
+
+		CustomClippingRect {
+			id: categoryContent
+
+			anchors.bottom: parent.bottom
+			anchors.left: view.right
+			anchors.leftMargin: Appearance.spacing.smaller
+			anchors.right: parent.right
+			anchors.top: parent.top
+			color: DynamicColors.tPalette.m3surfaceContainer
+			radius: 4
+
+			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 QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+RowLayout {
+	id: root
+
+	required property string name
+	required property var object
+	required property string setting
+
+	Layout.fillWidth: true
+	Layout.preferredHeight: 42
+
+	CustomText {
+		id: text
+
+		Layout.alignment: Qt.AlignLeft
+		Layout.fillWidth: true
+		font.pointSize: 16
+		text: root.name
+	}
+
+	CustomSwitch {
+		id: cswitch
+
+		Layout.alignment: Qt.AlignRight
+		checked: root.object[root.setting]
+
+		onToggled: {
+			root.object[root.setting] = checked;
+			Config.save();
+		}
+	}
+}

Modules/Settings/Wrapper.qml

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