feat: initial commit for pixel-snapping components and helpers

Modules/Sidebar/Utils/Cards/Record.qml

@@ -3,8 +3,10 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import QtQuick.Layouts
-import qs.Components
+import ZShell.Components
+import ZShell
 import ZShell.Config
+import qs.Components
 import qs.Helpers
 import qs.Services
 
@@ -15,17 +17,18 @@ CustomRect {
 
 	Layout.fillWidth: true
 	color: Colors.tPalette.m3surfaceContainer
-	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
+	implicitHeight: ZUtils.snap(layout.implicitHeight + layout.anchors.margins * 2, root)
 	radius: Tokens.rounding.small
 
-	ColumnLayout {
+	SnapLayout {
+orientation: Qt.Vertical
 		id: layout
 
 		anchors.fill: parent
 		anchors.margins: Tokens.padding.large
 		spacing: Tokens.spacing.medium
 
-		RowLayout {
+		SnapLayout {
 			spacing: Tokens.spacing.medium
 			z: 1
 
@@ -50,7 +53,8 @@ CustomRect {
 				}
 			}
 
-			ColumnLayout {
+			SnapLayout {
+orientation: Qt.Vertical
 				Layout.fillWidth: true
 				spacing: 0
 
@@ -194,7 +198,7 @@ CustomRect {
 	Component {
 		id: recordingControls
 
-		RowLayout {
+		SnapLayout {
 			spacing: Tokens.spacing.medium
 
 			CustomRect {

Modules/Sidebar/Utils/Cards/RecordingList.qml

@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
 
 import QtQuick
 import QtQuick.Layouts
+import ZShell.Components
 import Quickshell
 import Quickshell.Widgets
 import ZShell.Models
@@ -11,7 +12,8 @@ import qs.Paths
 import ZShell.Config
 import qs.Services
 
-ColumnLayout {
+SnapLayout {
+orientation: Qt.Vertical
 	id: root
 
 	required property ScreenState screenState
@@ -24,7 +26,7 @@ ColumnLayout {
 
 		onClicked: root.screenState.recordingListExpanded = !root.screenState.recordingListExpanded
 
-		RowLayout {
+		SnapLayout {
 			spacing: Tokens.spacing.small
 
 			MaterialIcon {
@@ -74,7 +76,7 @@ ColumnLayout {
 				to: 1
 			}
 		}
-		delegate: RowLayout {
+		delegate: SnapLayout {
 			id: recording
 
 			property string baseName
@@ -168,7 +170,8 @@ ColumnLayout {
 			Behavior on opacity {
 				Anim {}
 			}
-			sourceComponent: ColumnLayout {
+			sourceComponent: SnapLayout {
+orientation: Qt.Vertical
 				spacing: Tokens.spacing.small
 
 				MaterialIcon {
@@ -191,7 +194,7 @@ ColumnLayout {
 					}
 				}
 
-				RowLayout {
+				SnapLayout {
 					spacing: Tokens.spacing.small
 
 					MaterialIcon {

Modules/Sidebar/Utils/Cards/Toggles.qml

@@ -45,7 +45,8 @@ CustomRect {
 	implicitHeight: layout.implicitHeight + Tokens.padding.extraLargeIncreased
 	radius: Tokens.rounding.small
 
-	ColumnLayout {
+	SnapLayout {
+orientation: Qt.Vertical
 		id: layout
 
 		anchors.fill: parent