clear and exit buttons on drawing popout + pin button

Modules/Drawing/Content.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Layouts
 import ZShell.Components
 import qs.Config
 import qs.Components
@@ -13,6 +12,7 @@ Item {
 	readonly property var colors2: ["#3b82f6", "#a855f7", "#ec4899", "#ffffff", "#000000"]
 	required property var drawing
 	required property var visibilities
+	required property Wrapper wrapper
 
 	function syncFromPenColor() {
 		if (!drawing)
@@ -92,6 +92,8 @@ Item {
 		}
 
 		ButtonRow {
+			id: row1
+
 			anchors.left: parent.left
 			anchors.right: parent.right
 			spacing: Appearance.spacing.normal
@@ -100,11 +102,14 @@ Item {
 				model: root.colors1
 
 				delegate: ColorButton {
+					row: row1
 				}
 			}
 		}
 
 		ButtonRow {
+			id: row2
+
 			anchors.left: parent.left
 			anchors.right: parent.right
 			spacing: Appearance.spacing.normal
@@ -113,6 +118,7 @@ Item {
 				model: root.colors2
 
 				delegate: ColorButton {
+					row: row2
 				}
 			}
 		}
@@ -130,19 +136,69 @@ Item {
 
 			onMoved: root.drawing.drawingState.penWidth = value
 		}
+
+		ButtonRow {
+			anchors.left: parent.left
+			anchors.right: parent.right
+			spacing: Appearance.spacing.small
+
+			IconTextButton {
+				fillWidth: true
+				font.pointSize: Appearance.font.size.normal
+				icon: "close"
+				inactiveColor: DynamicColors.palette.m3error
+				inactiveOnColor: DynamicColors.palette.m3onError
+				isRound: true
+				shapeMorph: true
+				text: "Exit"
+
+				onClicked: root.visibilities.isDrawing = false
+			}
+
+			IconTextButton {
+				fillWidth: true
+				font.pointSize: Appearance.font.size.normal
+				icon: "ink_eraser"
+				inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+				inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+				isRound: true
+				shapeMorph: true
+				text: "Clear"
+
+				onClicked: root.drawing.content.clear()
+			}
+		}
+	}
+
+	IconButton {
+		anchors.margins: Appearance.padding.normal
+		anchors.right: parent.right
+		anchors.top: parent.top
+		checked: root.wrapper.pinned
+		icon: "keep"
+		isToggle: true
+		shapeMorph: true
+
+		onClicked: {
+			root.wrapper.togglePinned();
+		}
 	}
 
 	component ColorButton: IconButton {
 		id: colorButton
 
+		readonly property real buttonSize: (row.width - row.spacing * 4) / 5
 		required property color modelData
+		required property ButtonRow row
 
 		fillWidth: false
+		font.pointSize: Appearance.font.size.normal
 		icon: ""
+		implicitHeight: buttonSize
+		implicitWidth: buttonSize
 		inactiveColor: modelData
 		inactiveOnColor: DynamicColors.on(modelData)
 		isRound: true
-		padding: Appearance.padding.extraSmall
 		shapeMorph: true
 		shapeMorphExpansion: pressed ? 12 : 0
 

Modules/Drawing/Wrapper.qml

@@ -13,10 +13,33 @@ Item {
 	required property var drawing
 	property bool expanded: true
 	property real offsetScale: shouldBeActive ? 0 : 1
+	property bool pinned: false
 	required property ShellScreen screen
 	readonly property bool shouldBeActive: visibilities.isDrawing
 	required property var visibilities
 
+	function collapse(): void {
+		if (pinned)
+			return;
+
+		expanded = false;
+	}
+
+	function expand(): void {
+		expanded = true;
+	}
+
+	function toggleExpanded(): void {
+		if (pinned)
+			return;
+
+		expanded = !expanded;
+	}
+
+	function togglePinned(): void {
+		pinned = !pinned;
+	}
+
 	anchors.leftMargin: (-implicitWidth - 5) * offsetScale
 	implicitHeight: content.implicitHeight
 	implicitWidth: root.expanded ? content.implicitWidth : icon.implicitWidth
@@ -76,6 +99,7 @@ Item {
 		sourceComponent: Content {
 			drawing: root.drawing
 			visibilities: root.visibilities
+			wrapper: root
 		}
 	}
 }

Modules/Notifications/Notification.qml

@@ -427,8 +427,8 @@ CustomRect {
 			ButtonRow {
 				id: actions
 
-				anchors.left: body.left
-				anchors.right: body.right
+				anchors.left: parent.left
+				anchors.right: parent.right
 				anchors.top: body.bottom
 				anchors.topMargin: Appearance.spacing.small
 				opacity: root.expanded ? 1 : 0
@@ -459,6 +459,7 @@ CustomRect {
 						required property var modelData
 
 						fillWidth: true
+						implicitWidth: label.implicitWidth
 						inactiveColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondary : DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
 						inactiveOnColor: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3onSecondary : DynamicColors.palette.m3onSurfaceVariant
 						isRound: true