better height/width for bar

Reviewed-on: #141
Reviewed-by: Inorishio <inorishio@gmail.com>

.gitea/ISSUE_TEMPLATE/bug.yaml

@@ -0,0 +1,108 @@
+name: Bug Report
+about: Something broke
+title: "bug: "
+labels:
+    - bug
+
+body:
+    - type: textarea
+      id: description
+      attributes:
+          label: What happened
+          placeholder: Describe the bug
+      validations:
+          required: true
+
+    - type: textarea
+      id: expected
+      attributes:
+          label: What should happen
+          placeholder: Expected behavior
+      validations:
+          required: true
+
+    - type: textarea
+      id: steps
+      attributes:
+          label: Steps to reproduce
+          placeholder: |
+              1.
+              2.
+              3.
+          render: shell
+      validations:
+          required: true
+
+    - type: dropdown
+      id: os
+      attributes:
+          label: OS
+          options:
+              - NixOS
+              - Arch
+              - Debian / Ubuntu
+              - Fedora
+              - Alpine
+              - Artix
+              - Gentoo
+              - Other
+      validations:
+          required: false
+
+    - type: input
+      id: other-os
+      attributes:
+          label: Other OS (if "Other" above)
+          placeholder: e.g. Void, Gentoo, FreeBSD
+      validations:
+          required: false
+
+    - type: dropdown
+      id: init
+      attributes:
+          label: Init system
+          description: Relevant for UWSM configuration
+          options:
+              - systemd
+              - non-systemd (openrc / runit / s6 / ...)
+      validations:
+          required: false
+
+    - type: input
+      id: other-init
+      attributes:
+          label: Other init system (if "non-systemd" above)
+          placeholder: e.g. openrc, runit, s6, dinit
+      validations:
+          required: false
+
+    - type: input
+      id: qt-version
+      attributes:
+          label: Qt version
+          placeholder: 6.11.1
+      validations:
+          required: false
+
+    - type: input
+      id: commit
+      attributes:
+          label: Branch / commit
+          placeholder: main / abc1234
+      validations:
+          required: false
+
+    - type: textarea
+      id: logs
+      attributes:
+          label: Logs / backtrace / screenshots
+          render: shell
+      validations:
+          required: false
+
+    - type: textarea
+      id: workaround
+      attributes:
+          label: Found a workaround?
+      validations:
+          required: false

.gitea/ISSUE_TEMPLATE/feature.yaml

@@ -0,0 +1,51 @@
+name: Feature Request
+about: Idea or improvement
+title: "feat: "
+labels:
+  - enhancement
+
+body:
+  - type: textarea
+    id: problem
+    attributes:
+      label: What's missing / annoying
+      placeholder: The use case or pain point
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: How should it work
+      placeholder: Describe the desired behavior
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Other approaches considered
+    validations:
+      required: false
+
+  - type: dropdown
+    id: scope
+    attributes:
+      label: Area
+      options:
+        - Core / Daemon
+        - UI / Components
+        - Plugin system
+        - CMake / Build
+        - CI / Tooling
+        - Documentation
+        - Other
+    validations:
+      required: false
+
+  - type: textarea
+    id: context
+    attributes:
+      label: Mockups / references / notes
+    validations:
+      required: false

.gitea/PULL_REQUEST_TEMPLATE.yaml

@@ -0,0 +1,59 @@
+name: Pull Request
+about: Submit changes
+title: ""
+labels: []
+
+body:
+  - type: textarea
+    id: description
+    attributes:
+      label: What & why
+      placeholder: Describe the change and motivation
+    validations:
+      required: true
+
+  - type: input
+    id: issue
+    attributes:
+      label: Related issue
+      placeholder: "#123"
+    validations:
+      required: false
+
+  - type: dropdown
+    id: type
+    attributes:
+      label: Type
+      options:
+        - Bug fix
+        - New feature
+        - Refactor / style
+        - CI / build / tooling
+        - Documentation
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: tested
+    attributes:
+      label: Tested
+      options:
+        - label: Build succeeds
+        - label: Existing tests pass
+        - label: Manually verified
+
+  - type: textarea
+    id: breaking
+    attributes:
+      label: Breaking changes?
+      placeholder: API/ABI breakage? Migration path?
+
+  - type: checkboxes
+    id: checklist
+    attributes:
+      label: Checklist
+      options:
+        - label: CI passes (format, lint, typecheck)
+        - label: Clean commits
+        - label: No new warnings
+        - label: Docs updated if needed

.gitea/workflows/python.yml

@@ -81,6 +81,29 @@ jobs:
                   cd cli
                   python -m pytest tests/ -v
 
+    typecheck:
+        runs-on: alpine
+        container: node:26-alpine
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Install tools
+              run: |
+                  apk add --no-cache \
+                      git \
+                      python3 \
+                      py3-pip
+                  python3 -m venv .venv
+                  . .venv/bin/activate
+                  pip install --no-cache-dir basedpyright
+
+            - name: Type check
+              run: |
+                  . .venv/bin/activate
+                  basedpyright
+
     buildcheck:
         runs-on: alpine
         container: node:26-alpine

.gitignore

@@ -15,3 +15,4 @@ dist/
 **/target/
 **/test-plugins/
 **/Charts/
+network-dev/

Components/ButtonBase.qml

@@ -35,7 +35,7 @@ CustomRect {
 	readonly property color onColor: !enabled ? disabledOnColor : internalChecked ? activeOnColor : inactiveOnColor
 	property real padding
 	readonly property alias pressed: stateLayer.pressed
-	property real pressedRadius: Appearance.rounding.small
+	property real pressedRadius: Appearance.rounding.smallest
 	readonly property alias radiusAnim: radiusAnim
 	property bool radiusMorph: true
 	property alias shapeMorph: stateLayer.shapeMorph

Components/CustomTextField.qml

@@ -21,8 +21,6 @@ TextFieldBase {
 	property bool isError
 	property string leadingIcon
 	readonly property int leadingOffset: leadingIcon ? leadingIconLoader.width + leadingIconLoader.anchors.leftMargin : 0
-	readonly property real outlineGap: placeholder.width * root.smallFontScale + Appearance.spacing.extraSmall * 2
-	property real outlineGapScale: activeFocus || text ? 1 : 0
 	property int radius: Appearance.rounding.small
 	readonly property real smallFontScale: smallFontSize / font.pointSize
 	property int smallFontSize: Appearance.font.size.small
@@ -57,11 +55,6 @@ TextFieldBase {
 			onClicked: root.focus = true
 		}
 	}
-	Behavior on outlineGapScale {
-		Anim {
-			type: Anim.DefaultEffects
-		}
-	}
 
 	onEditingFinished: {
 		if (!valid)
@@ -103,7 +96,7 @@ TextFieldBase {
 					when: root.type === CustomTextField.Outlined && (root.activeFocus || root.text)
 
 					PropertyChanges {
-						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding + -Appearance.spacing.extraSmall
+						placeholder.anchors.leftMargin: -(1 - root.smallFontScale) * placeholder.width / 2 + root.horizontalPadding
 						placeholder.scale: root.smallFontScale
 					}
 
@@ -136,7 +129,7 @@ TextFieldBase {
 
 				AnchorAnim {
 					duration: Appearance.anim.durations.expressiveEffects
-					easing: Appearance.anim.curves.expressiveDefaultEffects
+					easing.bezierCurve: Appearance.anim.curves.expressiveEffects
 				}
 			}
 		}
@@ -146,12 +139,11 @@ TextFieldBase {
 
 			active: root.leadingIcon
 			anchors.left: parent.left
-			anchors.leftMargin: Appearance.padding.larger
+			anchors.leftMargin: Appearance.padding.normal
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
 				text: root.leadingIcon
 			}
 		}
@@ -161,12 +153,11 @@ TextFieldBase {
 
 			active: root.trailingIcon
 			anchors.right: parent.right
-			anchors.rightMargin: Appearance.padding.larger
+			anchors.rightMargin: Appearance.padding.normal
 			anchors.verticalCenter: parent.verticalCenter
 
 			sourceComponent: MaterialIcon {
 				color: DynamicColors.palette.m3onSurfaceVariant
-				font.pointSize: Appearance.font.size.large
 				text: root.trailingIcon
 			}
 		}
@@ -201,12 +192,24 @@ TextFieldBase {
 			preferredRendererType: Shape.CurveRenderer
 
 			ShapePath {
+				id: path
+
+				readonly property real inset: strokeWidth / 2
+				readonly property real outlineGap: placeholder.width * root.smallFontScale + Appearance.spacing.small * 2
+				property real outlineGapScale: root.activeFocus || root.text ? 1 : 0
+
 				capStyle: ShapePath.RoundCap
 				fillColor: "transparent"
-				startX: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2 + root.outlineGap * root.outlineGapScale
+				startX: path.inset + root.horizontalPadding - root.clampedRadius + path.outlineGap * (1 - path.outlineGapScale) / 2 + path.outlineGap * path.outlineGapScale
+				startY: path.inset
 				strokeColor: root.isError ? DynamicColors.palette.m3error : (root.activeFocus ? DynamicColors.palette.m3primary : DynamicColors.palette.m3outline)
 				strokeWidth: root.activeFocus ? 2 : 1
 
+				Behavior on outlineGapScale {
+					Anim {
+						type: Anim.DefaultEffects
+					}
+				}
 				Behavior on strokeColor {
 					CAnim {
 					}
@@ -217,54 +220,56 @@ TextFieldBase {
 				}
 
 				PathLine {
-					x: bg.width - root.clampedRadius
+					x: bg.width - path.inset - root.clampedRadius
+					y: path.inset
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: bg.width
+					x: bg.width - path.inset
-					y: root.clampedRadius
+					y: path.inset + root.clampedRadius
 				}
 
 				PathLine {
-					x: bg.width
+					x: bg.width - path.inset
-					y: bg.height - root.clampedRadius
+					y: bg.height - path.inset - root.clampedRadius
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: bg.width - root.clampedRadius
+					x: bg.width - path.inset - root.clampedRadius
-					y: bg.height
+					y: bg.height - path.inset
 				}
 
 				PathLine {
-					x: root.clampedRadius
+					x: path.inset + root.clampedRadius
-					y: bg.height
+					y: bg.height - path.inset
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: 0
+					x: path.inset
-					y: bg.height - root.clampedRadius
+					y: bg.height - path.inset - root.clampedRadius
 				}
 
 				PathLine {
-					x: 0
+					x: path.inset
-					y: root.clampedRadius
+					y: path.inset + root.clampedRadius
 				}
 
 				PathArc {
 					radiusX: root.clampedRadius
 					radiusY: root.clampedRadius
-					x: root.clampedRadius
+					x: path.inset + root.clampedRadius
-					y: 0
+					y: path.inset
 				}
 
 				PathLine {
-					x: root.horizontalPadding - root.clampedRadius + root.outlineGap * (1 - root.outlineGapScale) / 2
+					x: path.inset + root.horizontalPadding - root.clampedRadius / 2 + path.outlineGap * (1 - path.outlineGapScale) / 2
+					y: path.inset
 				}
 			}
 		}

Components/MarqueeText.qml

@@ -40,7 +40,7 @@ Item {
 		}
 	}
 
-	clip: true
+	clip: false
 	implicitHeight: elideText.implicitHeight
 
 	Behavior on leftFadeStrength {
@@ -80,7 +80,7 @@ Item {
 		id: marqueeViewport
 
 		anchors.fill: parent
-		clip: true
+		clip: false
 		layer.enabled: true
 		visible: root.overflowing
 

Config/Appearance.qml

@@ -1,13 +1,119 @@
 pragma Singleton
 
 import Quickshell
+import QtQuick
 
 Singleton {
-	readonly property AppearanceConf.Anim anim: Config.appearance.anim
+	property Anim anim: Anim {
-	readonly property AppearanceConf.Deform deform: Config.appearance.deform
+	}
-	readonly property AppearanceConf.FontStuff font: Config.appearance.font
+	property Deform deform: Deform {
-	readonly property AppearanceConf.Padding padding: Config.appearance.padding
+	}
-	readonly property AppearanceConf.Rounding rounding: Config.appearance.rounding
+	property FontStuff font: FontStuff {
-	readonly property AppearanceConf.Spacing spacing: Config.appearance.spacing
+	}
-	readonly property AppearanceConf.Transparency transparency: Config.appearance.transparency
+	property Padding padding: Padding {
+	}
+	property Rounding rounding: Rounding {
+	}
+	property Spacing spacing: Spacing {
+	}
+	property Transparency transparency: Transparency {
+	}
+
+	component Anim: QtObject {
+		property AnimCurves curves: AnimCurves {
+		}
+		property AnimDurations durations: AnimDurations {
+		}
+		property real mediaGifSpeedAdjustment: Config.appearance.anim.mediaGifSpeedAdjustment
+		property real sessionGifSpeed: Config.appearance.anim.sessionGifSpeed
+	}
+	component AnimCurves: QtObject {
+		property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
+		property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
+		property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
+		property list<real> expressiveDefaultEffects: [0.34, 0.8, 0.34, 1, 1, 1]
+		property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
+		property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
+		property list<real> expressiveFastEffects: [0.31, 0.94, 0.34, 1, 1, 1]
+		property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
+		property list<real> expressiveSlowEffects: [0.34, 0.88, 0.34, 1, 1, 1]
+		property list<real> expressiveSlowSpatial: [0.39, 1.29, 0.35, 0.98, 1, 1]
+		property list<real> standard: [0.2, 0, 0, 1, 1, 1]
+		property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
+		property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
+	}
+	component AnimDurations: QtObject {
+		property int expressiveDefaultSpatial: 500 * scale
+		property int expressiveEffects: 200 * scale
+		property int expressiveFastEffects: 150 * scale
+		property int expressiveFastSpatial: 350 * scale
+		property int expressiveSlowEffects: 300 * scale
+		property int extraLarge: 1000 * scale
+		property int large: 600 * scale
+		property int normal: 400 * scale
+		property real scale: 1
+		property int small: 200 * scale
+	}
+	component Deform: QtObject {
+		property real scale: Config.appearance.deform.scale
+	}
+	component FontFamily: QtObject {
+		property string clock: Config.appearance.font.family.clock
+		property string material: Config.appearance.font.family.material
+		property string mono: Config.appearance.font.family.mono
+		property string sans: Config.appearance.font.family.sans
+	}
+	component FontSize: QtObject {
+		property int extraLarge: 28 * scale
+		property int large: 18 * scale
+		property int larger: 16 * scale
+		property int medium: 14 * scale
+		property int normal: 13 * scale
+		property real scale: 1
+		property int small: 11 * scale
+		property int smaller: 12 * scale
+	}
+	component FontStuff: QtObject {
+		property FontFamily family: FontFamily {
+		}
+		property FontSize size: FontSize {
+		}
+	}
+	component Padding: QtObject {
+		property int extraLarge: 28 * scale
+		property int extraLargeIncreased: 32 * scale
+		property int extraSmall: 4 * scale
+		property int large: 16 * scale
+		property int largeIncreased: 20 * scale
+		property int larger: 12 * scale
+		property int normal: 8 * scale
+		property real scale: 1
+		property int small: 5 * scale
+		property int smaller: 7 * scale
+		property int smallest: 2 * scale
+	}
+	component Rounding: QtObject {
+		property int extraSmall: 4 * scale
+		property int full: 1000 * scale
+		property int large: 24 * scale
+		property int medium: 16 * scale
+		property int normal: 18 * scale
+		property real scale: 1
+		property int small: 12 * scale
+		property int smallest: 8 * scale
+	}
+	component Spacing: QtObject {
+		property int extraSmall: 4 * scale
+		property int large: 20 * scale
+		property int larger: 16 * scale
+		property int normal: 12 * scale
+		property real scale: 1
+		property int small: 8 * scale
+		property int smaller: 10 * scale
+	}
+	component Transparency: QtObject {
+		property real base: Config.appearance.transparency.base
+		property bool enabled: Config.appearance.transparency.enabled
+		property real layers: Config.appearance.transparency.layers
+	}
 }

Config/AppearanceConf.qml

@@ -7,50 +7,13 @@ JsonObject {
 	}
 	property FontStuff font: FontStuff {
 	}
-	property Padding padding: Padding {
-	}
-	property Rounding rounding: Rounding {
-	}
-	property Spacing spacing: Spacing {
-	}
 	property Transparency transparency: Transparency {
 	}
 
 	component Anim: JsonObject {
-		property AnimCurves curves: AnimCurves {
-		}
-		property AnimDurations durations: AnimDurations {
-		}
 		property real mediaGifSpeedAdjustment: 300
 		property real sessionGifSpeed: 0.7
 	}
-	component AnimCurves: JsonObject {
-		property list<real> emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1]
-		property list<real> emphasizedAccel: [0.3, 0, 0.8, 0.15, 1, 1]
-		property list<real> emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
-		property list<real> expressiveDefaultEffects: [0.34, 0.8, 0.34, 1, 1, 1]
-		property list<real> expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1, 1, 1]
-		property list<real> expressiveEffects: [0.34, 0.8, 0.34, 1, 1, 1]
-		property list<real> expressiveFastEffects: [0.31, 0.94, 0.34, 1, 1, 1]
-		property list<real> expressiveFastSpatial: [0.42, 1.67, 0.21, 0.9, 1, 1]
-		property list<real> expressiveSlowEffects: [0.34, 0.88, 0.34, 1, 1, 1]
-		property list<real> expressiveSlowSpatial: [0.39, 1.29, 0.35, 0.98, 1, 1]
-		property list<real> standard: [0.2, 0, 0, 1, 1, 1]
-		property list<real> standardAccel: [0.3, 0, 1, 1, 1, 1]
-		property list<real> standardDecel: [0, 0, 0, 1, 1, 1]
-	}
-	component AnimDurations: JsonObject {
-		property int expressiveDefaultSpatial: 500 * scale
-		property int expressiveEffects: 200 * scale
-		property int expressiveFastEffects: 150 * scale
-		property int expressiveFastSpatial: 350 * scale
-		property int expressiveSlowEffects: 300 * scale
-		property int extraLarge: 1000 * scale
-		property int large: 600 * scale
-		property int normal: 400 * scale
-		property real scale: 1
-		property int small: 200 * scale
-	}
 	component Deform: JsonObject {
 		property real scale: 1
 	}
@@ -60,53 +23,9 @@ JsonObject {
 		property string mono: "CaskaydiaCove NF"
 		property string sans: "Segoe UI Variable Text"
 	}
-	component FontSize: JsonObject {
-		property int extraLarge: 28 * scale
-		property int large: 18 * scale
-		property int larger: 16 * scale
-		property int medium: 14 * scale
-		property int normal: 13 * scale
-		property real scale: 1
-		property int small: 11 * scale
-		property int smaller: 12 * scale
-	}
 	component FontStuff: JsonObject {
 		property FontFamily family: FontFamily {
 		}
-		property FontSize size: FontSize {
-		}
-	}
-	component Padding: JsonObject {
-		property int extraLarge: 28 * scale
-		property int extraLargeIncreased: 32 * scale
-		property int extraSmall: 4 * scale
-		property int large: 16 * scale
-		property int largeIncreased: 20 * scale
-		property int larger: 12 * scale
-		property int normal: 8 * scale
-		property real scale: 1
-		property int small: 5 * scale
-		property int smaller: 7 * scale
-		property int smallest: 2 * scale
-	}
-	component Rounding: JsonObject {
-		property int extraSmall: 4 * scale
-		property int full: 1000 * scale
-		property int large: 24 * scale
-		property int medium: 16 * scale
-		property int normal: 18 * scale
-		property real scale: 1
-		property int small: 12 * scale
-		property int smallest: 8 * scale
-	}
-	component Spacing: JsonObject {
-		property int extraSmall: 4 * scale
-		property int large: 20 * scale
-		property int larger: 16 * scale
-		property int normal: 12 * scale
-		property real scale: 1
-		property int small: 8 * scale
-		property int smaller: 10 * scale
 	}
 	component Transparency: JsonObject {
 		property real base: 0.85

Config/BackgroundConfig.qml

@@ -4,11 +4,4 @@ import qs.Config
 JsonObject {
 	property bool enabled: true
 	property int wallFadeDuration: MaterialEasing.standardTime
-	property real alignX: 0.5
-	property real alignY: 0.5
-	property real zoom: 1.0
-	property real sourceClipX: 0
-	property real sourceClipY: 0
-	property real sourceClipW: 0
-	property real sourceClipH: 0
 }

Config/BarConfig.qml

@@ -40,6 +40,10 @@ JsonObject {
 			id: "tray",
 			enabled: true
 		},
+		{
+			id: "statusIcons",
+			enabled: true
+		},
 		{
 			id: "network",
 			enabled: false
@@ -57,29 +61,45 @@ JsonObject {
 	property bool hideWhenNotif: false
 	property Popouts popouts: Popouts {
 	}
+	property string position: "top"
 	property int rounding: 8
 	property int smoothing: 32
 	property Tray tray: Tray {
 	}
 
 	component Popouts: JsonObject {
-		property bool activeWindow: true
+		property bool statusIcons: true
-		property bool audio: true
-		property bool clock: true
-		property bool network: true
-		property bool resources: true
 		property bool tray: true
-		property bool upower: true
 	}
 	component Tray: JsonObject {
 		property bool recolorIcons: false
-		property bool showAudio: true
-		property bool showBluetooth: false
-		property bool showMicrophone: true
-		property bool showNetwork: false
 		property bool showOnHover: false
-		property bool showPower: true
+		property list<var> statusIcons: [
-		property bool showWifi: false
+			{
+				id: "audio",
+				enabled: true
+			},
+			{
+				id: "microphone",
+				enabled: true
+			},
+			{
+				id: "bluetooth",
+				enabled: true
+			},
+			{
+				id: "network",
+				enabled: false
+			},
+			{
+				id: "wifi",
+				enabled: false
+			},
+			{
+				id: "power",
+				enabled: true
+			},
+		]
 		property int trayIconSize: 24
 	}
 }

Config/Screenshot.qml

@@ -5,6 +5,7 @@ JsonObject {
 	property string mode: "manual"
 	property real radius: 12.0
 	property bool rounding: false
+	property bool saveOnCopy: false
 	property bool shadow: true
 	property real shadow_blur: 22.0
 	property list<int> shadow_color: [0, 0, 0, 160]

Drawers/Drawers.qml

@@ -11,15 +11,50 @@ Variants {
 
 		required property ShellScreen modelData
 
+		function rebuild(): void {
+			loader.active = false;
+			loader.active = true;
+		}
+
+		LazyLoader {
+			id: loader
+
+			active: true
+
+			Drawer {
+				screen: scope.modelData
+			}
+		}
+
+		Connections {
+			function onConfigDashboardPositionChanged(): void {
+				Qt.callLater(scope.rebuild);
+			}
+
+			function onConfigPositionChanged(): void {
+				Qt.callLater(scope.rebuild);
+			}
+
+			target: (loader.item as Drawer)?.geometry ?? null
+		}
+	}
+
+	component Drawer: Scope {
+		id: drawer
+
+		readonly property alias geometry: content.geometry
+		required property ShellScreen screen
+
 		Exclusions {
 			bar: content.bar
-			screen: scope.modelData
+			geometry: content.geometry
+			screen: drawer.screen
 		}
 
 		Windows {
 			id: content
 
-			screen: scope.modelData
+			screen: drawer.screen
 		}
 	}
 }

Drawers/EdgeGeometry.qml

@@ -0,0 +1,55 @@
+import QtQuick
+import qs.Modules.Bar as Bar
+
+QtObject {
+	id: root
+
+	required property Bar.BarLoader bar
+	readonly property real barClamped: bar.clampedExtent
+	readonly property real barExtent: bar.extent
+	readonly property bool barOnBottom: position === "bottom"
+	readonly property bool barOnLeft: position === "left"
+	readonly property bool barOnTop: position === "top"
+	required property string configPosition
+	readonly property bool horizontal: position !== "left"
+	readonly property string position: configPosition === "top" || configPosition === "bottom" ? configPosition : "left"
+	required property var win
+
+	function axisPos(x: real, y: real): real {
+		return horizontal ? x : y;
+	}
+
+	function barContains(x: real, y: real, clamped = false): bool {
+		const extent = clamped ? barClamped : barExtent;
+		if (barOnTop)
+			return y < extent;
+		if (barOnBottom)
+			return y > win.height - extent;
+		return x < extent;
+	}
+
+	function insetBottom(border: real, clamped = false): real {
+		return barOnBottom ? (clamped ? barClamped : barExtent) : border;
+	}
+
+	function insetLeft(border: real, clamped = false): real {
+		return barOnLeft ? (clamped ? barClamped : barExtent) : border;
+	}
+
+	function insetTop(border: real, clamped = false): real {
+		return barOnTop ? (clamped ? barClamped : barExtent) : border;
+	}
+
+	function inwardDrag(dragX: real, dragY: real): real {
+		if (barOnTop)
+			return dragY;
+		if (barOnBottom)
+			return -dragY;
+		return dragX;
+	}
+
+	onConfigPositionChanged: {
+		if (!["left", "top", "bottom"].includes(configPosition))
+			console.warn(`Invalid bar position '${configPosition}', falling back to left`);
+	}
+}

Drawers/Exclusions.qml

@@ -9,19 +9,21 @@ Scope {
 	id: root
 
 	required property Item bar
+	required property EdgeGeometry geometry
 	required property ShellScreen screen
 
 	ExclusionZone {
 		id: top
 
 		anchors.top: true
-		exclusiveZone: root.bar.exclusiveZone
+		hasBar: root.geometry.barOnTop
 	}
 
 	ExclusionZone {
 		id: left
 
 		anchors.left: true
+		hasBar: root.geometry.barOnLeft
 	}
 
 	ExclusionZone {
@@ -34,6 +36,7 @@ Scope {
 		id: bottom
 
 		anchors.bottom: true
+		hasBar: root.geometry.barOnBottom
 	}
 
 	Timer {
@@ -44,7 +47,9 @@ Scope {
 	}
 
 	component ExclusionZone: CustomWindow {
-		exclusiveZone: Config.bar.border
+		property bool hasBar
+
+		exclusiveZone: hasBar ? root.bar.exclusiveZone : Config.bar.border
 		implicitHeight: 1
 		implicitWidth: 1
 		name: "Bar-Exclusion"

Drawers/Interactions.qml

@@ -12,6 +12,7 @@ Item {
 	required property real borderThickness
 	property bool dashboardShortcutActive
 	required property Drawing drawing
+	required property EdgeGeometry geometry
 	property bool osdShortcutActive
 	required property Panels panels
 	required property BarPopouts.Wrapper popouts
@@ -21,34 +22,37 @@ Item {
 	required property PersistentProperties visibilities
 
 	function inBottomPanel(panel: Item, x: real, y: real): bool {
-		return y > root.height - panel.height - Config.bar.border && withinPanelWidth(panel, x, y);
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
+		return y > root.height - (panelHeight + geometry.insetBottom(borderThickness)) && withinPanelWidth(panel, x, y);
 	}
 
 	function inLeftPanel(panel: Item, x: real, y: real): bool {
-		return x < panel.x + panel.width + Config.bar.border && withinPanelHeight(panel, x, y);
+		return x < panel.x + panel.width + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
+	}
+
+	function inPopoutArea(x: real, y: real): bool {
+		const panel = panels.popoutsWrapper;
+		if (!geometry.horizontal)
+			return inLeftPanel(panel, x, y);
+		return withinPanelWidth(panel, x, y) && withinPanelHeight(panel, x, y);
 	}
 
 	function inRightPanel(panel: Item, x: real, y: real): bool {
-		return x > panel.x - Config.bar.border && withinPanelHeight(panel, x, y);
+		return x > panel.x + geometry.insetLeft(borderThickness) && withinPanelHeight(panel, x, y);
 	}
 
 	function inTopPanel(panel: Item, x: real, y: real): bool {
-		return y < bar.implicitHeight + panel.height && withinPanelWidth(panel, x, y);
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
-	}
+		return y < geometry.insetTop(borderThickness) + panelHeight && withinPanelWidth(panel, x, y);
-
-	function onWheel(event: WheelEvent): void {
-		if (event.x < bar.implicitWidth) {
-			bar.handleWheel(event.y, event.angleDelta);
-		}
 	}
 
 	function withinPanelHeight(panel: Item, x: real, y: real): bool {
-		const panelY = panel.y + bar.implicitHeight;
+		const panelY = panel.y + geometry.insetTop(borderThickness);
 		return y >= panelY && y <= panelY + panel.height;
 	}
 
 	function withinPanelWidth(panel: Item, x: real, y: real): bool {
-		const panelX = panel.x + root.borderThickness;
+		const panelX = panel.x + geometry.insetLeft(borderThickness);
 		return x >= panelX && x <= panelX + panel.width;
 	}
 
@@ -81,7 +85,7 @@ Item {
 			if (root.singleGestureTriggered)
 				return;
 
-			if (centroid.pressPosition.y < root.bar.implicitHeight) {
+			if (root.geometry.insetTop(root.borderThickness) > centroid.pressPosition.y) {
 				if (dragY > 20) {
 					root.visibilities.settings = true;
 					root.singleGestureTriggered = true;
@@ -91,10 +95,10 @@ Item {
 				}
 			}
 
-			if (centroid.pressPosition.y > root.screen.height - Config.bar.border && centroid.pressPosition.x < root.screen.width / 5 && dragY < -50)
+			if (centroid.pressPosition.y > root.screen.height - root.geometry.insetBottom(root.borderThickness) && centroid.pressPosition.x < root.screen.width / 5 && dragY < -50)
 				root.visibilities.clipboard = true;
 
-			if (!Config.dock.hoverToReveal && centroid.pressPosition.y > root.screen.height - root.bar.implicitHeight && centroid.pressPosition.x > root.screen.width / 5 && !root.visibilities.launcher)
+			if (!Config.dock.hoverToReveal && centroid.pressPosition.y > root.screen.height - root.geometry.insetTop(root.borderThickness) && centroid.pressPosition.x > root.screen.width / 5 && !root.visibilities.launcher)
 				if (dragY < -10) {
 					root.visibilities.dock = true;
 					root.singleGestureTriggered = true;
@@ -193,7 +197,7 @@ Item {
 				return;
 			}
 
-			if (!root.visibilities.bar && Config.bar.autoHide && y < root.bar.implicitHeight)
+			if (!root.visibilities.bar && Config.bar.autoHide && root.geometry.barContains(x, y, true))
 				root.bar.isHovered = true;
 
 			if (root.panels.sidebar.offsetScale === 1) {
@@ -219,8 +223,8 @@ Item {
 			if (Config.dock.enable && Config.dock.hoverToReveal && !root.visibilities.dock && !root.visibilities.launcher && root.inBottomPanel(root.panels.dock, x, y))
 				root.visibilities.dock = true;
 
-			if (y < root.bar.implicitHeight)
+			if (root.geometry.barContains(x, y))
-				root.bar.checkPopout(x);
+				root.bar.checkPopout(root.geometry.axisPos(x, y));
 		}
 	}
 

Drawers/Panels.qml

@@ -27,6 +27,7 @@ Item {
 	readonly property alias dock: dock
 	readonly property alias drawing: drawing
 	required property var drawingItem
+	required property EdgeGeometry geometry
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
@@ -43,9 +44,11 @@ Item {
 	readonly property alias utilities: utilities
 	required property PersistentProperties visibilities
 
+	anchors.bottomMargin: geometry.insetBottom(borderThickness)
 	anchors.fill: parent
+	anchors.leftMargin: geometry.insetLeft(borderThickness)
 	anchors.margins: borderThickness
-	anchors.topMargin: bar.implicitHeight
+	anchors.topMargin: geometry.insetTop(borderThickness)
 
 	Item {
 		id: resourcesWrapper
@@ -53,14 +56,15 @@ Item {
 		anchors.left: parent.left
 		anchors.top: parent.top
 		clip: true
-		implicitHeight: resources.implicitHeight * (1 - resources.offsetScale)
+		implicitHeight: root.geometry.horizontal ? resources.implicitHeight * (1 - resources.offsetScale) : resources.implicitHeight
-		implicitWidth: resources.implicitWidth
+		implicitWidth: root.geometry.horizontal ? resources.implicitWidth : resources.implicitWidth * (1 - resources.offsetScale)
 
 		Resources.Wrapper {
 			id: resources
 
 			anchors.left: parent.left
 			anchors.top: parent.top
+			horizontal: root.geometry.horizontal
 			visibilities: root.visibilities
 		}
 	}
@@ -99,8 +103,8 @@ Item {
 	Modules.ClipWrapper {
 		id: popouts
 
-		anchors.top: parent.top
 		borderThickness: root.borderThickness
+		position: root.geometry.position
 		screen: root.screen
 	}
 
@@ -147,11 +151,13 @@ Item {
 
 		property real offsetScale: dashboard.shouldBeActive ? 0 : 1
 
-		anchors.right: parent.right
+		anchors.bottom: root.geometry.barOnLeft || root.geometry.barOnBottom ? parent.bottom : undefined
-		anchors.top: parent.top
+		anchors.left: root.geometry.barOnLeft ? parent.left : undefined
+		anchors.right: root.geometry.barOnLeft ? undefined : parent.right
+		anchors.top: root.geometry.barOnBottom || root.geometry.barOnLeft ? undefined : parent.top
 		clip: true
-		implicitHeight: dashboard.implicitHeight * (1 - offsetScale)
+		implicitHeight: root.geometry.horizontal ? dashboard.implicitHeight * (1 - offsetScale) : dashboard.implicitHeight
-		implicitWidth: dashboard.implicitWidth
+		implicitWidth: root.geometry.horizontal ? dashboard.implicitWidth : dashboard.implicitWidth * (1 - offsetScale)
 
 		Behavior on offsetScale {
 			Anim {
@@ -163,9 +169,7 @@ Item {
 		Dashboard.Wrapper {
 			id: dashboard
 
-			anchors.right: parent.right
+			horizontal: root.geometry.horizontal
-			anchors.top: parent.top
-			anchors.topMargin: (-implicitHeight - 5) * offsetScale
 			offsetScale: dashboardWrapper.offsetScale
 			visibilities: root.visibilities
 		}

Drawers/Regions.qml

@@ -7,17 +7,18 @@ import qs.Modules.Bar as Bar
 Region {
 	id: root
 
-	required property Bar.BarLoader bar
+	// required property Bar.BarLoader bar
 	readonly property real borderThickness: win.borderThickness
+	required property EdgeGeometry geometry
 	readonly property alias menuPopoutRegion: menuPopoutRegion
 	required property Panels panels
 	required property var win
 
-	height: win.height - bar.implicitHeight - win.borderThickness - win.dragMaskPadding * 2
+	height: win.height - geometry.insetTop(borderThickness, true) - geometry.insetBottom(borderThickness, true) - win.dragMaskPadding * 2
 	intersection: Intersection.Xor
-	width: win.width - win.borderThickness * 2 - win.dragMaskPadding * 2
+	width: win.width - geometry.insetLeft(borderThickness, true) * 2 - win.dragMaskPadding * 2
-	x: win.borderThickness + win.dragMaskPadding
+	x: geometry.insetLeft(borderThickness, true) + win.dragMaskPadding
-	y: bar.implicitHeight + win.dragMaskPadding
+	y: geometry.insetTop(borderThickness, true) + win.dragMaskPadding
 
 	R {
 		panel: root.panels.dashboardWrapper
@@ -41,17 +42,21 @@ Region {
 	}
 
 	R {
+		height: panel.height + root.geometry.insetTop(root.borderThickness)
 		panel: root.panels.notifications
+		y: 0
 	}
 
 	R {
-		height: panel.height * (1 - root.panels.utilities.offsetScale) + root.borderThickness
+		height: panel.height * (1 - root.panels.utilities.offsetScale) + root.geometry.insetBottom(root.borderThickness)
 		panel: root.panels.utilities
 		y: root.win.height - height
 	}
 
 	R {
+		height: root.geometry.horizontal ? panel.height * (1 - root.panels.popoutsWrapper.offsetScale) : panel.height
 		panel: root.panels.popoutsWrapper
+		width: root.geometry.horizontal ? panel.width : panel.width * (1 - root.panels.popoutsWrapper.offsetScale)
 	}
 
 	R {
@@ -82,7 +87,7 @@ Region {
 		height: panel.height
 		intersection: Intersection.Subtract
 		width: panel.width
-		x: panel.x + root.borderThickness
+		x: panel.x + root.geometry.insetLeft(root.borderThickness)
-		y: panel.y + root.bar.implicitHeight
+		y: panel.y + root.geometry.insetTop(root.borderThickness)
 	}
 }

Drawers/Windows.qml

@@ -32,6 +32,7 @@ CustomWindow {
 		return 100;
 	}
 	property real fsTransitionProg: hasFullscreen ? 1 : 0
+	readonly property alias geometry: geometry
 	readonly property bool hasFullscreen: {
 		if (hasSpecialWorkspace) {
 			const specialName = monitor?.lastIpcObject.specialWorkspace?.name;
@@ -94,13 +95,21 @@ CustomWindow {
 		panels.popouts.hasCurrent = false;
 	}
 
+	EdgeGeometry {
+		id: geometry
+
+		bar: bar
+		configPosition: Config.bar.position
+		win: root
+	}
+
 	Region {
 		id: emptyRegion
 
 		height: panels.notifications.height
 		width: panels.notifications.width
-		x: panels.notifications.x + root.borderThickness
+		x: panels.notifications.x + geometry.insetLeft(root.borderThickness)
-		y: panels.notifications.y + bar.implicitHeight
+		y: panels.notifications.y + geometry.insetTop(root.borderThickness)
 
 		Region {
 			height: panels.osd.height
@@ -113,7 +122,7 @@ CustomWindow {
 	Regions {
 		id: regions
 
-		bar: bar
+		geometry: geometry
 		panels: panels
 		win: root
 	}
@@ -192,10 +201,10 @@ CustomWindow {
 		BlobInvertedRect {
 			anchors.fill: parent
 			anchors.margins: -50
-			borderBottom: root.borderThickness - anchors.margins - root.sdfBorderOffset
+			borderBottom: geometry.insetBottom(root.borderThickness) - anchors.margins - root.sdfBorderOffset
-			borderLeft: root.borderThickness - anchors.margins - root.sdfBorderOffset
+			borderLeft: geometry.insetLeft(root.borderThickness) - anchors.margins - root.sdfBorderOffset
 			borderRight: root.borderThickness - anchors.margins - root.sdfBorderOffset
-			borderTop: bar.implicitHeight - anchors.margins - root.sdfBorderOffset
+			borderTop: geometry.insetTop(root.borderThickness) - anchors.margins - root.sdfBorderOffset
 			group: blobGroup
 			radius: root.borderRounding
 		}
@@ -203,15 +212,15 @@ CustomWindow {
 		PanelBg {
 			id: dashBg
 
-			property real extraHeight: 0.2
+			property real extraExtent: 0.2
 
 			deformAmount: 0.06
-			implicitHeight: panels.dashboard.height * (1 + extraHeight)
+			implicitHeight: panels.dashboard.height * (geometry.horizontal ? 1 + extraExtent : 1)
-			implicitWidth: panels.dashboard.width
+			implicitWidth: panels.dashboard.width * (geometry.horizontal ? 1 : 1 + extraExtent)
 			panel: panels.dashboardWrapper
 			radius: Appearance.rounding.normal
-			x: panels.dashboardWrapper.x + panels.dashboard.x + root.borderThickness
+			x: panels.dashboardWrapper.x + panels.dashboard.x + geometry.insetLeft(root.borderThickness) - (geometry.horizontal ? 0 : panels.dashboard.width * extraExtent)
-			y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
+			y: panels.dashboardWrapper.y + panels.dashboard.y + geometry.insetTop(root.borderThickness) - (geometry.horizontal ? panels.dashboard.height * extraExtent : 0)
 		}
 
 		PanelBg {
@@ -223,7 +232,7 @@ CustomWindow {
 			implicitHeight: panels.launcher.height * (1 + extraHeight)
 			panel: panels.launcher
 			radius: Appearance.rounding.smallest + 5
-			y: panels.launcher.y + bar.implicitHeight
+			y: panels.launcher.y + geometry.insetTop(root.borderThickness)
 		}
 
 		PanelBg {
@@ -244,8 +253,7 @@ CustomWindow {
 			implicitWidth: panels.osd.width
 			panel: panels.osdWrapper
 			radius: 20
-			x: panels.osdWrapper.x + panels.osd.x + root.borderThickness
+			x: panels.osdWrapper.x + panels.osd.x + geometry.insetLeft(root.borderThickness)
-			y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
 		}
 
 		PanelBg {
@@ -267,17 +275,17 @@ CustomWindow {
 		PanelBg {
 			id: popoutBg
 
-			property real extraHeight: 0.2
+			property real extraExtent: 0.2
 
 			deformAmount: panels.popouts.currentName.startsWith("traymenu") ? 0.15 : 0.08
-			implicitHeight: panels.popouts.height * (1 + extraHeight)
+			implicitHeight: panels.popouts.height * (geometry.horizontal ? 1 + extraExtent : 1)
-			implicitWidth: panels.popouts.width
+			implicitWidth: panels.popouts.width * (geometry.horizontal ? 1 : 1 + extraExtent)
 			panel: panels.popoutsWrapper
 			radius: panels.popouts.current?.panelRadius ?? Appearance.rounding.normal
-			x: panels.popoutsWrapper.x + panels.popouts.x + root.borderThickness
+			x: panels.popoutsWrapper.x + panels.popouts.x + geometry.insetLeft(root.borderThickness) - (geometry.horizontal ? 0 : panels.popouts.width * extraExtent)
-			y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
+			y: panels.popoutsWrapper.y + panels.popouts.y + geometry.insetTop(root.borderThickness) - (geometry.barOnTop ? panels.popouts.height * extraExtent : 0)
 
-			Behavior on extraHeight {
+			Behavior on extraExtent {
 				Anim {
 				}
 			}
@@ -291,8 +299,8 @@ CustomWindow {
 			implicitWidth: panels.resources.width
 			panel: panels.resourcesWrapper
 			radius: Appearance.rounding.large
-			x: panels.resourcesWrapper.x + panels.resources.x + root.borderThickness
+			x: panels.resourcesWrapper.x + panels.resources.x + geometry.insetLeft(root.borderThickness)
-			y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
+			y: panels.resourcesWrapper.y + panels.resources.y + geometry.insetTop(root.borderThickness)
 		}
 
 		PanelBg {
@@ -370,6 +378,7 @@ CustomWindow {
 		borderThickness: root.borderLayoutThickness
 		drawing: drawing
 		enabled: true
+		geometry: geometry
 		panels: panels
 		popouts: panels.popouts
 		screen: root.screen
@@ -381,6 +390,7 @@ CustomWindow {
 			bar: bar
 			borderThickness: root.borderThickness
 			drawingItem: drawing
+			geometry: geometry
 			screen: root.screen
 			visibilities: visibilities
 
@@ -422,14 +432,18 @@ CustomWindow {
 		BarLoader {
 			id: bar
 
+			anchors.bottom: geometry.barOnBottom ? parent.bottom : undefined
 			anchors.left: parent.left
-			anchors.right: parent.right
+			anchors.top: geometry.barOnBottom ? undefined : parent.top
 			enabled: !visibilities.isDrawing
 			fullscreen: root.hasFullscreen
+			height: geometry.horizontal ? implicitHeight : parent.height
 			popouts: panels.popouts
 			popoutsWrapper: panels.popoutsWrapper
+			position: geometry.position
 			screen: root.screen
 			visibilities: visibilities
+			width: geometry.horizontal ? parent.width : implicitWidth
 		}
 	}
 
@@ -442,7 +456,7 @@ CustomWindow {
 		implicitHeight: panel.height
 		implicitWidth: panel.width
 		radius: Appearance.rounding.smallest
-		x: panel.x + root.borderThickness
+		x: panel.x + geometry.insetLeft(root.borderThickness)
-		y: panel.y + bar.implicitHeight
+		y: panel.y + geometry.insetTop(root.borderThickness)
 	}
 }

Helpers/Picker.qml

@@ -7,9 +7,10 @@ import QtQuick
 import QtQuick.Effects
 import qs.Components
 import qs.Config
-import qs.Helpers
+import qs.Helpers.Picker
+import qs.Paths
 
-MouseArea {
+Item {
 	id: root
 
 	property list<var> clients: {
@@ -29,9 +30,11 @@ MouseArea {
 	readonly property int cornerRadius: Hypr.options.decoration.rounding
 	property real ex: screen.width
 	property real ey: screen.height
+	property color inkColor: "#ff3b30"
 	required property LazyLoader loader
+	property string mode: "select"
 	property bool onClient
-	property real realBorderWidth: onClient ? (Hypr.options.general.border_size ?? 1) : 2
+	property real realBorderWidth: 2
 	property real realRounding: onClient ? (Hypr.options.decoration.rounding ?? 0) : 0
 	property real rsx: Math.min(sx, ex)
 	property real rsy: Math.min(sy, ey)
@@ -48,6 +51,12 @@ MouseArea {
 	property real sw: Math.abs(sx - ex)
 	property real sx: 0
 	property real sy: 0
+	property string tool: "move"
+
+	function cancel(): void {
+		annotations.clearAll();
+		closeAnim.start();
+	}
 
 	function checkClientRects(x: real, y: real): void {
 		for (const client of clients) {
@@ -71,24 +80,49 @@ MouseArea {
 		}
 	}
 
-	function save(): void {
+	function enterEditMode(): void {
-		const tmpfile = Qt.resolvedUrl(`/tmp/zshell-picker-${Quickshell.processId}-${Date.now()}.png`);
+		mode = "edit";
+		tool = "move";
+	}
+
+	function save(copyToClipboard: bool): void {
 		const rounding = root.cornerRadius > 0;
 		const shadow_blur = root.shadowRange / root.shadowRenderPower;
 		const r = Math.floor(root.shadowColor.r * 256);
 		const g = Math.floor(root.shadowColor.g * 256);
 		const b = Math.floor(root.shadowColor.b * 256);
 		const a = Math.floor(root.shadowColor.a * 256);
+		const tmpfile = Qt.resolvedUrl(`/tmp/zshell-picker-${Quickshell.processId}-${Date.now()}.png`);
 		const args = Config.screenshot.mode === "auto" ? ["--rounding", `${rounding}`, "--radius", root.cornerRadius, "--shadow", root.shadowEnabled, "--shadow-blur", `${shadow_blur}`, "--shadow-color", `${r},${g},${b},${a}`, "--shadow-offset-x", root.shadowOffset[0], "--shadow-offset-y", root.shadowOffset[1]] : [];
-		const cmd = Config.screenshot.enable_pp ? ["zshell-img-tools", "--scale", root.scaleRatio, ...args, "--image"] : ["swappy", "-f"];
+		const postCmd = Config.screenshot.enable_pp ? ["zshell-img-tools", "--scale", root.scaleRatio, ...args, "--image"] : null;
-		ZShellIo.saveItem(screencopy, tmpfile, Qt.rect(Math.ceil(rsx), Math.ceil(rsy), Math.floor(sw), Math.floor(sh)), path => Quickshell.execDetached([...cmd, path]));
+
+		overlay.visible = border.visible = false;
+		handles.visible = false;
+		toolbar.visible = false;
+
+		ZShellIo.saveItem(captureLayer, tmpfile, Qt.rect(Math.ceil(rsx), Math.ceil(rsy), Math.floor(sw), Math.floor(sh)), path => {
+			const finalize = finalPath => {
+				if (copyToClipboard) {
+					Quickshell.execDetached(["sh", "-c", `wl-copy --type image/png < '${finalPath.replace(/'/g, `'\\''`)}'`]);
+				}
+				if (!copyToClipboard || Config.screenshot.saveOnCopy) {
+					const dest = `${Paths.screenshots}/zshell-${Date.now()}.png`;
+					Quickshell.execDetached(["sh", "-c", `mkdir -p "$(dirname '${dest}')" && cp '${path.replace(/'/g, `'\\''`)}' '${dest}'`]);
+				}
+			};
+
+			if (postCmd) {
+				Quickshell.execDetached(postCmd.concat([path]));
+				finalize(path);
+			} else {
+				finalize(path);
+			}
+		});
 		closeAnim.start();
 	}
 
 	anchors.fill: parent
-	cursorShape: Qt.CrossCursor
 	focus: true
-	hoverEnabled: true
 	opacity: 0
 
 	Behavior on opacity {
@@ -97,25 +131,25 @@ MouseArea {
 		}
 	}
 	Behavior on rsx {
-		enabled: !root.pressed
+		enabled: !selectArea.pressed && root.mode === "select"
 
 		ExAnim {
 		}
 	}
 	Behavior on rsy {
-		enabled: !root.pressed
+		enabled: !selectArea.pressed && root.mode === "select"
 
 		ExAnim {
 		}
 	}
 	Behavior on sh {
-		enabled: !root.pressed
+		enabled: !selectArea.pressed && root.mode === "select"
 
 		ExAnim {
 		}
 	}
 	Behavior on sw {
-		enabled: !root.pressed
+		enabled: !selectArea.pressed && root.mode === "select"
 
 		ExAnim {
 		}
@@ -123,8 +157,7 @@ MouseArea {
 
 	Component.onCompleted: {
 		Hypr.extras.refreshOptions();
-		if (loader.freeze)
+		screencopy.active = true;
-			clients = clients;
 
 		opacity = 1;
 
@@ -144,48 +177,49 @@ MouseArea {
 			ey = screen.height / 2 + 100;
 		}
 	}
-	Keys.onEscapePressed: closeAnim.start()
+	Keys.onEscapePressed: root.mode === "edit" ? cancel() : closeAnim.start()
-	onClientsChanged: checkClientRects(mouseX, mouseY)
+	Keys.onPressed: e => {
-	onPositionChanged: event => {
+		if ((e.key == Qt.Key_C) && (e.modifiers & Qt.ControlModifier)) {
-		const x = event.x;
+			save(true);
-		const y = event.y;
+			e.accepted = true;
-
+		} else if ((e.key == Qt.Key_S) && (e.modifiers & Qt.ControlModifier)) {
-		if (pressed) {
+			save(false);
-			onClient = false;
+			e.accepted = true;
-			sx = ssx;
-			sy = ssy;
-			ex = x;
-			ey = y;
-		} else if (!saveTimer.running) {
-			checkClientRects(x, y);
 		}
 	}
-	onPressed: event => {
+	onClientsChanged: {
-		ssx = event.x;
+		if (root.mode === "select")
-		ssy = event.y;
+			checkClientRects(selectArea.mouseX, selectArea.mouseY);
 	}
-	onReleased: {
-		if (closeAnim.running)
-			return;
 
-		if (root.loader.freeze) {
+	MouseArea {
-			saveTimer.start();
+		id: selectArea
-		} else {
+
-			overlay.visible = border.visible = false;
+		anchors.fill: parent
-			screencopy.visible = false;
+		cursorShape: Qt.CrossCursor
-			screencopy.active = true;
+		enabled: root.mode === "select"
-			saveTimer.start();
+		hoverEnabled: true
+		visible: root.mode === "select"
+
+		onPositionChanged: event => {
+			const x = event.x;
+			const y = event.y;
+
+			if (pressed) {
+				root.onClient = false;
+				root.sx = root.ssx;
+				root.sy = root.ssy;
+				root.ex = x;
+				root.ey = y;
+			} else {
+				root.checkClientRects(x, y);
+			}
 		}
-	}
+		onPressed: event => {
-
+			root.ssx = event.x;
-	Timer {
+			root.ssy = event.y;
-		id: saveTimer
+		}
-
+		onReleased: root.enterEditMode()
-		interval: 25
-		repeat: false
-		running: false
-
-		onTriggered: root.save()
 	}
 
 	SequentialAnimation {
@@ -231,16 +265,38 @@ MouseArea {
 		}
 	}
 
-	Loader {
+	Item {
-		id: screencopy
+		id: captureLayer
 
-		active: root.loader.freeze
 		anchors.fill: parent
-		asynchronous: true
 
-		sourceComponent: ScreencopyView {
+		Loader {
-			captureSource: root.screen
+			id: screencopy
-			paintCursor: false
+
+			active: false
+			anchors.fill: parent
+			asynchronous: true
+
+			sourceComponent: ScreencopyView {
+				captureSource: root.screen
+				paintCursor: false
+			}
+		}
+
+		AnnotationCanvas {
+			id: annotations
+
+			anchors.fill: parent
+			inkColor: root.inkColor
+			layer.enabled: true
+			tool: root.mode === "edit" && root.tool !== "move" ? root.tool : "none"
+
+			layer.effect: MultiEffect {
+				maskEnabled: true
+				maskSource: selectionWrapper
+				maskSpreadAtMin: 1
+				maskThresholdMin: 0.5
+			}
 		}
 	}
 
@@ -252,7 +308,7 @@ MouseArea {
 		layer.enabled: true
 		opacity: 0.3
 		radius: root.realRounding
-		visible: screencopy.item.hasContent || !root.loader.freeze
+		visible: screencopy.item?.hasContent ?? false
 
 		layer.effect: MultiEffect {
 			maskEnabled: true
@@ -290,7 +346,7 @@ MouseArea {
 		implicitHeight: selectionRect.implicitHeight + root.realBorderWidth * 2
 		implicitWidth: selectionRect.implicitWidth + root.realBorderWidth * 2
 		radius: root.realRounding > 0 ? root.realRounding + root.realBorderWidth : 0
-		visible: screencopy.item.hasContent || !root.loader.freeze
+		visible: screencopy.item?.hasContent ?? false
 		x: selectionRect.x - root.realBorderWidth
 		y: selectionRect.y - root.realBorderWidth
 
@@ -300,6 +356,51 @@ MouseArea {
 		}
 	}
 
+	SelectionHandles {
+		id: handles
+
+		selH: root.sh
+		selW: root.sw
+		selX: root.rsx
+		selY: root.rsy
+		visible: root.mode === "edit" && root.tool === "move"
+
+		onBoundsChanged: (x, y, w, h) => {
+			root.sx = x;
+			root.sy = y;
+			root.ex = x + w;
+			root.ey = y + h;
+		}
+		onMoveBy: (dx, dy) => {
+			const w = root.sw, h = root.sh;
+			let nx = root.rsx + dx, ny = root.rsy + dy;
+			nx = Math.max(0, Math.min(nx, root.screen.width - w));
+			ny = Math.max(0, Math.min(ny, root.screen.height - h));
+			root.sx = nx;
+			root.sy = ny;
+			root.ex = nx + w;
+			root.ey = ny + h;
+		}
+	}
+
+	AnnotationToolbar {
+		id: toolbar
+
+		inkColor: root.inkColor
+		tool: root.tool
+		visible: root.mode === "edit"
+		x: Math.max(8, Math.min(root.rsx + root.sw / 2 - width / 2, root.screen.width - width - 8))
+		y: (root.rsy + root.sh + height + Appearance.padding.normal <= root.screen.height) ? root.rsy + root.sh + Appearance.padding.normal : (root.rsy - height - Appearance.padding.normal <= 0) ? root.rsy + root.sh - height - Appearance.padding.normal : root.rsy - height - Appearance.padding.normal
+
+		onCancelRequested: root.cancel()
+		onClearRequested: annotations.clearAll()
+		onColorSelected: c => root.inkColor = c
+		onCopyRequested: root.save(true)
+		onSaveRequested: root.save(false)
+		onToolSelected: t => root.tool = t
+		onUndoRequested: annotations.undo()
+	}
+
 	component ExAnim: Anim {
 		duration: MaterialEasing.expressiveEffectsTime
 		easing.bezierCurve: MaterialEasing.expressiveEffects

Helpers/Picker/AnnotationCanvas.qml

@@ -0,0 +1,143 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import ZShell.Internal
+
+Item {
+	id: root
+
+	property color inkColor: "#ff3b30"
+	property real inkWidth: 4
+	property string tool: "none"
+
+	signal changed
+
+	function clearAll() {
+		committedCanvas.clear();
+		previewCanvas.clear();
+		changed();
+	}
+
+	function sampleShape(tool, x1, y1, x2, y2) {
+		const pts = [];
+		switch (tool) {
+		case "line":
+			pts.push([x1, y1], [x2, y2]);
+			break;
+		case "arrow":
+			{
+				const angle = Math.atan2(y2 - y1, x2 - x1);
+				const headLen = 14 + root.inkWidth * 2;
+				pts.push([x1, y1], [x2, y2]);
+				pts.push([x2 - headLen * Math.cos(angle - Math.PI / 6), y2 - headLen * Math.sin(angle - Math.PI / 6)]);
+				pts.push([x2, y2]);
+				pts.push([x2 - headLen * Math.cos(angle + Math.PI / 6), y2 - headLen * Math.sin(angle + Math.PI / 6)]);
+				break;
+			}
+		case "rect":
+			pts.push([x1, y1], [x2, y1], [x2, y2], [x1, y2], [x1, y1]);
+			break;
+		case "ellipse":
+			{
+				const cx = (x1 + x2) / 2, cy = (y1 + y2) / 2;
+				const rx = Math.abs(x2 - x1) / 2, ry = Math.abs(y2 - y1) / 2;
+				const perimeter = Math.PI * (3 * (rx + ry) - Math.sqrt((3 * rx + ry) * (rx + 3 * ry)));
+				const steps = Math.max(48, Math.min(256, Math.ceil(perimeter / 4)));
+				for (let i = 0; i <= steps; i++) {
+					const a = (i / steps) * Math.PI * 2;
+					pts.push([cx + rx * Math.cos(a), cy + ry * Math.sin(a)]);
+				}
+				break;
+			}
+		}
+		return pts;
+	}
+
+	function undo() {
+		committedCanvas.undoLastGroup();
+		changed();
+	}
+
+	anchors.fill: parent
+
+	StrokeCanvas {
+		id: committedCanvas
+
+		anchors.fill: parent
+		penColor: root.inkColor
+		penWidth: root.inkWidth
+	}
+
+	StrokeCanvas {
+		id: previewCanvas
+
+		anchors.fill: parent
+		penColor: root.inkColor
+		penWidth: root.inkWidth
+	}
+
+	PointHandler {
+		id: drawHandler
+
+		property real startX
+		property real startY
+		property bool started: false
+
+		acceptedButtons: Qt.LeftButton | Qt.RightButton
+		enabled: root.tool !== "none"
+
+		onActiveChanged: {
+			if (active)
+				return;
+
+			if (root.tool === "pen") {
+				committedCanvas.endStroke();
+			} else if (started) {
+				const pts = root.sampleShape(root.tool, startX, startY, point.position.x, point.position.y);
+				if (pts.length > 0) {
+					committedCanvas.beginStroke(pts[0][0], pts[0][1], true);
+					for (let i = 1; i < pts.length; i++)
+						committedCanvas.appendPoint(pts[i][0], pts[i][1]);
+					committedCanvas.endStroke();
+				}
+				previewCanvas.clear();
+			}
+			started = false;
+			root.changed();
+		}
+		onPointChanged: {
+			if (!active)
+				return;
+
+			if (point.pressedButtons & Qt.RightButton) {
+				root.clearAll();
+				return;
+			}
+
+			const x = point.position.x;
+			const y = point.position.y;
+
+			if (root.tool === "pen") {
+				if (!started) {
+					started = true;
+					committedCanvas.beginStroke(x, y);
+					return;
+				}
+				committedCanvas.appendPoint(x, y);
+				return;
+			}
+
+			if (!started) {
+				started = true;
+				startX = point.pressPosition.x;
+				startY = point.pressPosition.y;
+			}
+			const pts = root.sampleShape(root.tool, startX, startY, x, y);
+			if (pts.length > 0) {
+				previewCanvas.beginStroke(pts[0][0], pts[0][1], true);
+				for (let i = 1; i < pts.length; i++)
+					previewCanvas.appendPoint(pts[i][0], pts[i][1]);
+			}
+		}
+	}
+}

Helpers/Picker/AnnotationToolbar.qml

@@ -0,0 +1,184 @@
+pragma ComponentBehavior: Bound
+
+import ZShell.Components
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Config
+
+CustomRect {
+	id: root
+
+	readonly property var colorPalette: ["#ff3b30", "#ff9500", "#ffcc00", "#34c759", "#0a84ff", "#af52de", "#ffffff", "#000000"]
+	property color inkColor: "#ff3b30"
+	property string tool: "move"
+	readonly property var toolList: [
+		{
+			id: "move",
+			glyph: "arrows_output"
+		},
+		{
+			id: "pen",
+			glyph: "draw"
+		},
+		{
+			id: "line",
+			glyph: "diagonal_line"
+		},
+		{
+			id: "arrow",
+			glyph: "arrow_outward"
+		},
+		{
+			id: "rect",
+			glyph: "rectangle"
+		},
+		{
+			id: "ellipse",
+			glyph: "circle"
+		}
+	]
+
+	signal cancelRequested
+	signal clearRequested
+	signal colorSelected(color c)
+	signal copyRequested
+	signal saveRequested
+	signal toolSelected(string tool)
+	signal undoRequested
+
+	color: DynamicColors.palette.m3surface
+	height: row.implicitHeight + Appearance.padding.normal * 2
+	radius: Appearance.rounding.full
+	width: row.implicitWidth + Appearance.padding.normal * 2
+
+	RowLayout {
+		id: row
+
+		anchors.centerIn: parent
+		spacing: 6
+
+		ButtonRow {
+			id: toolRow
+
+			spacing: Appearance.spacing.extraSmall
+
+			Repeater {
+				model: root.toolList
+
+				delegate: IconButton {
+					id: tool
+
+					required property var modelData
+
+					color: root.tool === modelData.id ? "#3584e4" : "transparent"
+					icon: tool.modelData.glyph
+					inactiveColor: root.tool === modelData.id ? DynamicColors.palette.m3primary : "transparent"
+					inactiveOnColor: root.tool === modelData.id ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
+					isRound: true
+					shapeMorph: true
+					shapeMorphExpansion: shapeMorph && pressed ? 12 : 0
+
+					onClicked: root.toolSelected(tool.modelData.id)
+				}
+			}
+		}
+
+		CustomRect {
+			Layout.fillHeight: true
+			Layout.preferredWidth: 1
+			color: DynamicColors.palette.m3outlineVariant
+		}
+
+		ButtonRow {
+			spacing: Appearance.spacing.extraSmall
+
+			Repeater {
+				model: root.colorPalette
+
+				delegate: IconButton {
+					readonly property real buttonSize: toolRow.implicitHeight - Appearance.padding.normal
+					required property color modelData
+
+					fillWidth: false
+					font.pointSize: 0
+					icon: ""
+					implicitHeight: buttonSize
+					implicitWidth: buttonSize
+					inactiveColor: modelData
+					inactiveOnColor: DynamicColors.on(modelData)
+					isRound: true
+					shapeMorph: true
+					shapeMorphExpansion: pressed ? 12 : 0
+
+					onClicked: root.colorSelected(modelData)
+				}
+			}
+		}
+
+		CustomRect {
+			Layout.fillHeight: true
+			Layout.preferredWidth: 1
+			color: DynamicColors.palette.m3outlineVariant
+		}
+
+		ButtonRow {
+			spacing: Appearance.spacing.extraSmall
+
+			IconButton {
+				icon: "undo"
+				inactiveColor: "transparent"
+				inactiveOnColor: DynamicColors.palette.m3onSurface
+				isRound: true
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+
+				onClicked: root.undoRequested()
+			}
+
+			IconButton {
+				icon: "delete_history"
+				inactiveColor: "transparent"
+				inactiveOnColor: DynamicColors.palette.m3onSurface
+				isRound: true
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+
+				onClicked: root.clearRequested()
+			}
+
+			IconButton {
+				icon: "content_copy"
+				inactiveColor: "transparent"
+				inactiveOnColor: DynamicColors.palette.m3onSurface
+				isRound: true
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+
+				onClicked: root.copyRequested()
+			}
+
+			IconButton {
+				icon: "delete_forever"
+				inactiveColor: "transparent"
+				inactiveOnColor: DynamicColors.palette.m3onSurface
+				isRound: true
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+
+				onClicked: root.cancelRequested()
+			}
+
+			IconButton {
+				icon: "check"
+				inactiveColor: "transparent"
+				inactiveOnColor: DynamicColors.palette.m3onSurface
+				isRound: true
+				shapeMorph: true
+				shapeMorphExpansion: pressed ? 12 : 0
+
+				onClicked: root.saveRequested()
+			}
+		}
+	}
+}

Helpers/Picker/SelectionHandles.qml

@@ -0,0 +1,183 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+
+Item {
+	id: root
+
+	property color handleBorder: "#3584e4"
+	property color handleFill: "white"
+	property real hs: 12
+	property real minSize: 24
+	required property real selH
+	required property real selW
+	required property real selX
+	required property real selY
+
+	signal boundsChanged(x: real, y: real, w: real, h: real)
+	signal dragFinished
+	signal moveBy(dx: real, dy: real)
+
+	height: selH
+	width: selW
+	x: selX
+	y: selY
+
+	DragHandler {
+		id: moveHandler
+
+		property real accumX: 0
+		property real accumY: 0
+
+		target: null
+
+		onActiveChanged: {
+			accumX = 0;
+			accumY = 0;
+			if (!active)
+				root.dragFinished();
+		}
+		onTranslationChanged: {
+			const t = moveHandler.translation;
+			root.moveBy(t.x - accumX, t.y - accumY);
+			accumX = t.x;
+			accumY = t.y;
+		}
+	}
+
+	Handle {
+		edge: "tl"
+		x: -root.hs / 2
+		y: -root.hs / 2
+	}
+
+	Handle {
+		edge: "t"
+		x: root.width / 2 - root.hs / 2
+		y: -root.hs / 2
+	}
+
+	Handle {
+		edge: "tr"
+		x: root.width - root.hs / 2
+		y: -root.hs / 2
+	}
+
+	Handle {
+		edge: "r"
+		x: root.width - root.hs / 2
+		y: root.height / 2 - root.hs / 2
+	}
+
+	Handle {
+		edge: "br"
+		x: root.width - root.hs / 2
+		y: root.height - root.hs / 2
+	}
+
+	Handle {
+		edge: "b"
+		x: root.width / 2 - root.hs / 2
+		y: root.height - root.hs / 2
+	}
+
+	Handle {
+		edge: "bl"
+		x: -root.hs / 2
+		y: root.height - root.hs / 2
+	}
+
+	Handle {
+		edge: "l"
+		x: -root.hs / 2
+		y: root.height / 2 - root.hs / 2
+	}
+
+	component Handle: Rectangle {
+		id: handle
+
+		required property string edge
+
+		border.color: root.handleBorder
+		border.width: 2
+		color: root.handleFill
+		height: root.hs
+		radius: root.hs / 2
+		width: root.hs
+		z: 10
+
+		HoverHandler {
+			cursorShape: {
+				switch (handle.edge) {
+				case "tl":
+				case "br":
+					return Qt.SizeFDiagCursor;
+				case "tr":
+				case "bl":
+					return Qt.SizeBDiagCursor;
+				case "t":
+				case "b":
+					return Qt.SizeVerCursor;
+				default:
+					return Qt.SizeHorCursor;
+				}
+			}
+		}
+
+		DragHandler {
+			id: dh
+
+			property real startH
+			property real startW
+			property real startX
+			property real startY
+
+			grabPermissions: PointerHandler.CanTakeOverFromAnything | PointerHandler.TakeOverForbidden
+			target: null
+
+			onActiveChanged: {
+				if (active) {
+					startX = root.x;
+					startY = root.y;
+					startW = root.width;
+					startH = root.height;
+				} else {
+					root.dragFinished();
+				}
+			}
+			onTranslationChanged: {
+				const delta = dh.translation;
+				const e = handle.edge;
+				let nx = startX, ny = startY, nw = startW, nh = startH;
+
+				if (e.includes("l")) {
+					nx = startX + delta.x;
+					nw = startW - delta.x;
+				}
+				if (e.includes("r")) {
+					nw = startW + delta.x;
+				}
+				if (e.includes("t")) {
+					ny = startY + delta.y;
+					nh = startH - delta.y;
+				}
+				if (e.includes("b")) {
+					nh = startH + delta.y;
+				}
+
+				if (nw < root.minSize) {
+					if (e.includes("l"))
+						nx = startX + startW - root.minSize;
+					nw = root.minSize;
+				}
+				if (nh < root.minSize) {
+					if (e.includes("t"))
+						ny = startY + startH - root.minSize;
+					nh = root.minSize;
+				}
+
+				root.boundsChanged(nx, ny, nw, nh);
+			}
+		}
+	}
+}

Helpers/Time.qml

@@ -20,7 +20,19 @@ Singleton {
 	readonly property string timeStr: format("hh:mm:ss")
 
 	function format(fmt: string): string {
-		return Qt.formatDateTime(clock.date, fmt);
+		return Qt.formatDateTime(clock.date, resolveFormat(fmt));
+	}
+
+	function resolveFormat(fmt: string): string {
+		if (!Config.services.useTwelveHourClock)
+			return fmt;
+
+		let f = fmt.replace(/hh/g, "h");
+
+		if (/h/.test(f) && !/AP|ap/.test(f))
+			f += " AP";
+
+		return f;
 	}
 
 	SystemClock {

Modules/Bar/Bar.qml

@@ -9,20 +9,27 @@ import qs.Modules.SysTray
 import qs.Modules.Network
 import qs.Modules.Updates
 
-RowLayout {
+GridLayout {
 	id: root
 
+	required property bool fullscreen
+	required property bool horizontal
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
 	required property ShellScreen screen
-	required property bool fullscreen
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
-	function checkPopout(x: real): void {
+	function axisCenterOf(item: Item): real {
-		const ch = childAt(x, height / 2) as WrappedLoader;
+		const c = item.mapToItem(root, item.implicitWidth / 2, item.implicitHeight / 2);
+		return horizontal ? c.x : c.y;
+	}
 
-		if (!ch || ch?.id === "spacer") {
+	function checkPopout(pos: real): void {
+		const ch = (horizontal ? childAt(pos, height / 2) : childAt(width / 2, pos)) as EntryWrapper;
+		const id = ch?.entryId;
+
+		if (!ch || id === undefined) {
 			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover)
 				popouts.hasCurrent = false;
 			return;
@@ -31,42 +38,52 @@ RowLayout {
 		if (visibilities.sidebar || visibilities.dashboard || visibilities.resources || visibilities.settings)
 			return;
 
-		if (ch.id === "tray") {
+		if (id === "statusIcons" && Config.bar.popouts.statusIcons) {
-			const tray = ch.item;
+			const items = (ch.item as StatusIcons).items;
-			const localPos = tray.mapFromItem(root, x, height / 2);
+			const icon = horizontal ? items.childAt(mapToItem(items, pos, 0).x, items.height / 2) : items.childAt(items.width / 2, mapToItem(items, 0, pos).y);
-			const sub = tray.getHoveredSubItem(localPos.x, localPos.y);
+			if (icon) {
-			if (sub) {
+				popouts.currentName = icon.name;
-				popouts.currentName = sub.id;
+				popouts.currentCenter = Qt.binding(() => axisCenterOf(icon));
-				popouts.currentCenter = Qt.binding(() => {
+				popouts.hasCurrent = true;
-					const centerX = sub.item.mapToItem(root, sub.item.width / 2, 0).x;
+			}
-					return centerX;
+		} else if (id === "tray" && Config.bar.popouts.tray && Config.bar.tray.showOnHover) {
-				});
+			const tray = ch.item as TrayIcons;
+			const layout = tray.layout;
+			const trayItem = horizontal ? layout.childAt(mapToItem(layout, pos, 0).x, layout.height / 2) : layout.childAt(tray.width / 2, mapToItem(layout, 0, pos).y);
+
+			if (trayItem) {
+				const idx = trayItem.index;
+				popouts.currentName = `traymenu${idx}`;
+				popouts.currentCenter = Qt.binding(() => axisCenterOf(trayItem));
 				popouts.hasCurrent = true;
-				return;
 			}
 
-			if (!popouts.currentName.startsWith("traymenu") || Config.bar.tray.showOnHover)
+			if (!popouts.currentName.startsWith("traymenu"))
 				popouts.hasCurrent = false;
 		}
 
-		const id = ch.id;
-		const top = ch.x;
-		const item = ch.item;
-		const itemWidth = item.implicitWidth;
-
 		if (id === "updates") {
 			popouts.currentName = "updates";
-			popouts.currentCenter = Qt.binding(() => item.mapToItem(root, itemWidth / 2, 0).x);
+			popouts.currentCenter = Qt.binding(() => axisCenterOf(ch.item as Item));
 			popouts.hasCurrent = true;
 		}
 	}
 
-	spacing: Appearance.spacing.small
+	function entryAt(pos: real): string {
+		const ch = (horizontal ? childAt(pos, height / 2) : childAt(width / 2, pos)) as EntryWrapper;
+		return ch?.entryId ?? "";
+	}
+
+	columnSpacing: Appearance.spacing.small
+	columns: horizontal ? -1 : 1
+	rowSpacing: Appearance.spacing.small
 
 	Repeater {
 		id: repeater
 
-		model: Config.bar.entries
+		model: ScriptModel {
+			values: Config.bar.entries.filter(e => e.enabled)
+		}
 
 		DelegateChooser {
 			role: "id"
@@ -74,8 +91,9 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "hyprsunset"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: HyprsunsetWidget {
+					HyprsunsetWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -84,16 +102,18 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "spacer"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					Layout.fillWidth: true
+					Layout.fillHeight: !root.horizontal
+					Layout.fillWidth: root.horizontal
 				}
 			}
 
 			DelegateChoice {
 				roleValue: "workspaces"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: Workspaces {
+					Workspaces {
+						horizontal: root.horizontal
 						screen: root.screen
 						visible: !root.fullscreen
 					}
@@ -103,8 +123,9 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "tray"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: TrayWidget {
+					TrayIcons {
+						horizontal: root.horizontal
 						loader: root
 						popouts: root.popouts
 						visible: !root.fullscreen
@@ -112,11 +133,22 @@ RowLayout {
 				}
 			}
 
+			DelegateChoice {
+				roleValue: "statusIcons"
+
+				delegate: EntryWrapper {
+					StatusIcons {
+						horizontal: root.horizontal
+					}
+				}
+			}
+
 			DelegateChoice {
 				roleValue: "resources"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: Resources {
+					Resources {
+						horizontal: root.horizontal
 						visibilities: root.visibilities
 						visible: !root.fullscreen
 					}
@@ -126,8 +158,9 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "updates"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: UpdatesWidget {
+					UpdatesWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -136,8 +169,9 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "notifBell"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: NotifBell {
+					NotifBell {
+						horizontal: root.horizontal
 						popouts: root.popouts
 						visibilities: root.visibilities
 						visible: !root.fullscreen
@@ -148,8 +182,9 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "clock"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: Clock {
+					Clock {
+						horizontal: root.horizontal
 						loader: root
 						popouts: root.popouts
 						visibilities: root.visibilities
@@ -161,9 +196,10 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "activeWindow"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: WindowTitle {
+					WindowTitle {
 						bar: root
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -172,8 +208,8 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "network"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: NetworkWidget {
+					NetworkWidget {
 					}
 				}
 			}
@@ -181,8 +217,9 @@ RowLayout {
 			DelegateChoice {
 				roleValue: "media"
 
-				delegate: WrappedLoader {
+				delegate: EntryWrapper {
-					sourceComponent: MediaWidget {
+					MediaWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -190,34 +227,19 @@ RowLayout {
 		}
 	}
 
-	component WrappedLoader: Loader {
+	component EntryWrapper: Item {
-		required property bool enabled
+		readonly property string entryId: modelData.id
-		required property string id
 		required property int index
+		default property Item item
+		required property var modelData
 
-		function findFirstEnabled(): Item {
+		Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
-			const count = repeater.count;
+		Layout.bottomMargin: !root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
-			for (let i = 0; i < count; i++) {
+		Layout.leftMargin: root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && root.horizontal) ? -root.rowSpacing + Appearance.spacing.extraSmall : 0
-				const item = repeater.itemAt(i);
+		Layout.rightMargin: root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
-				if (item?.enabled)
+		Layout.topMargin: !root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && !root.horizontal) ? -root.columnSpacing + Appearance.spacing.extraSmall : 0
-					return item;
+		children: item
-			}
+		implicitHeight: item?.implicitHeight ?? 0
-			return null;
+		implicitWidth: item?.implicitWidth ?? 0
-		}
-
-		function findLastEnabled(): Item {
-			for (let i = repeater.count - 1; i >= 0; i--) {
-				const item = repeater.itemAt(i);
-				if (item?.enabled)
-					return item;
-			}
-			return null;
-		}
-
-		Layout.alignment: Qt.AlignVCenter
-		Layout.leftMargin: findFirstEnabled() === this ? root.vPadding : 0
-		Layout.rightMargin: findLastEnabled() === this ? root.vPadding : 0
-		active: enabled
-		visible: enabled
 	}
 }

Modules/Bar/BarLoader.qml

@@ -1,45 +1,48 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
-import Quickshell.Hyprland
 import QtQuick
-import QtQuick.Layouts
 import qs.Components
 import qs.Modules
 import qs.Config
-import qs.Helpers
-import qs.Modules.SysTray
-import qs.Modules.SysTray.Widgets
-import qs.Modules.Network
 
 Item {
 	id: root
 
-	readonly property int contentHeight: Config.bar.height + padding * 2
+	readonly property int clampedExtent: Math.max(Config.bar.border, extent)
-	readonly property int exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentHeight
+	readonly property int contentThickness: Math.max(Config.bar.height, 30) + padding * 2
+	readonly property int exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentThickness
+	property real extent: fullscreen ? 0 : Config.bar.border
 	required property bool fullscreen
+	readonly property bool horizontal: position !== "left"
 	property bool isHovered
-	readonly property int padding: Math.max(Appearance.padding.smaller, Config.bar.border)
+	readonly property int padding: Appearance.padding.smaller
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
+	required property string position
 	required property ShellScreen screen
 	readonly property bool shouldBeVisible: !fullscreen && (!Config.bar.autoHide || visibilities.bar || isHovered)
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
-	function checkPopout(x: real): void {
+	function checkPopout(pos: real): void {
-		content.item?.checkPopout(x);
+		(content.item as Bar)?.checkPopout(pos);
 	}
 
-	implicitHeight: fullscreen ? 0 : Config.bar.border
+	function entryAt(pos: real): string {
-	visible: height > Config.bar.border
+		return (content.item as Bar)?.entryAt(pos) ?? "";
+	}
+
+	implicitHeight: extent
+	implicitWidth: extent
+	visible: extent > Config.bar.border
 
 	states: State {
 		name: "visible"
 		when: root.shouldBeVisible
 
 		PropertyChanges {
-			root.implicitHeight: root.contentHeight
+			root.extent: root.contentThickness
 		}
 	}
 	transitions: [
@@ -50,7 +53,7 @@ Item {
 			Anim {
 				duration: MaterialEasing.expressiveEffectsTime
 				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
+				property: "extent"
 				target: root
 			}
 		},
@@ -61,7 +64,7 @@ Item {
 			Anim {
 				duration: MaterialEasing.expressiveEffectsTime
 				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
+				property: "extent"
 				target: root
 			}
 		}
@@ -71,13 +74,16 @@ Item {
 		id: content
 
 		active: root.shouldBeVisible || root.visible
-		anchors.bottom: parent.bottom
+		anchors.bottom: root.position !== "bottom" ? parent.bottom : undefined
-		anchors.left: parent.left
+		anchors.left: root.horizontal ? parent.left : undefined
 		anchors.right: parent.right
+		anchors.top: root.position !== "top" ? parent.top : undefined
+		height: root.contentThickness
+		width: root.contentThickness
 
 		sourceComponent: Bar {
 			fullscreen: root.fullscreen
-			height: root.contentHeight
+			horizontal: root.horizontal
 			popouts: root.popouts
 			popoutsWrapper: root.popoutsWrapper
 			screen: root.screen

Modules/ClipWrapper.qml

@@ -10,27 +10,51 @@ Item {
 
 	required property real borderThickness
 	readonly property alias content: content
-	property real offsetScale: y > 0 || content.hasCurrent ? 0 : 1
+	readonly property bool horizontal: position !== "left"
+	// property real offsetScale: y > 0 || content.hasCurrent ? 0 : 1
+	property real offsetScale: {
+		if (content.hasCurrent)
+			return 0;
+		if (position === "top")
+			return y > 0 ? 0 : 1;
+		if (position === "bottom")
+			return 1;
+		return x > 0 ? 0 : 1;
+	}
+	required property string position
 	required property ShellScreen screen
 
+	anchors.bottom: position === "bottom" ? parent.bottom : undefined
 	clip: true
-	implicitHeight: content.implicitHeight * (1 - offsetScale)
+	implicitHeight: horizontal ? content.implicitHeight * (1 - offsetScale) : content.implicitHeight
-	implicitWidth: content.implicitWidth
+	implicitWidth: horizontal ? content.implicitWidth : content.implicitWidth * (1 - offsetScale)
 	visible: width > 0 && height > 0
 	x: {
+		if (!horizontal)
+			return 0;
 		const off = content.currentCenter - borderThickness - content.nonAnimWidth / 2;
 		const diff = parent.width - Math.floor(off + content.nonAnimWidth);
 		if (diff < 0)
 			return off + diff;
 		return Math.floor(Math.max(off, 0));
 	}
+	y: {
+		if (horizontal)
+			return 0;
+
+		const off = content.currentCenter - borderThickness - content.nonAnimHeight / 2;
+		const diff = parent.height - Math.floor(off + content.nonAnimHeight);
+		if (diff < 0)
+			return off + diff;
+		return Math.max(off, 0);
+	}
 
 	Behavior on offsetScale {
 		Anim {
 		}
 	}
 	Behavior on x {
-		enabled: root.offsetScale < 1
+		enabled: !root.horizontal || root.offsetScale < 1
 
 		Anim {
 			duration: content.animLength
@@ -38,6 +62,8 @@ Item {
 		}
 	}
 	Behavior on y {
+		enabled: root.horizontal || root.offsetScale < 1
+
 		Anim {
 			duration: content.animLength
 			easing.bezierCurve: content.animCurve
@@ -47,9 +73,14 @@ Item {
 	Wrapper {
 		id: content
 
-		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.bottom: root.position === "bottom" ? parent.bottom : undefined
-		anchors.top: parent.top
+		anchors.bottomMargin: (-implicitHeight - 5) * root.offsetScale
+		anchors.horizontalCenter: root.horizontal ? parent.horizontalCenter : undefined
+		anchors.left: root.horizontal ? undefined : parent.left
+		anchors.leftMargin: (-implicitWidth - 5) * root.offsetScale
+		anchors.top: root.position === "top" ? parent.top : undefined
 		anchors.topMargin: (-implicitHeight - 5) * root.offsetScale
+		anchors.verticalCenter: root.horizontal ? undefined : parent.verticalCenter
 		offsetScale: root.offsetScale
 		screen: root.screen
 	}

Modules/Clock.qml

@@ -9,27 +9,44 @@ import qs.Components
 CustomRect {
 	id: root
 
-	required property RowLayout loader
+	required property bool horizontal
+	required property GridLayout loader
 	required property Wrapper popouts
+	readonly property real shortSize: Config.bar.height
+	readonly property real size: timeText.contentWidth + (horizontal ? Appearance.padding.normal : Appearance.padding.larger) * 2
 	required property PersistentProperties visibilities
 
 	color: visibilities.dashboard ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? shortSize : size
-	implicitWidth: timeText.contentWidth + Appearance.padding.normal * 2
+	implicitWidth: horizontal ? size : shortSize
 	radius: Appearance.rounding.full
 
 	CustomText {
 		id: timeText
 
 		anchors.centerIn: parent
+		// anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+		// anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
 		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 		font: Appearance.font.family.mono // qmllint disable incompatible-type
+		height: root.horizontal ? implicitHeight : implicitWidth
 		text: Time.dateStr
+		width: root.horizontal ? implicitWidth : implicitHeight
 
 		Behavior on color {
 			CAnim {
 			}
 		}
+		transform: [
+			Translate {
+				x: !root.horizontal ? -timeText.implicitWidth + timeText.implicitHeight : 0
+			},
+			Rotation {
+				angle: root.horizontal ? 0 : 270
+				origin.x: timeText.implicitHeight / 2
+				origin.y: timeText.implicitHeight / 2
+			}
+		]
 	}
 
 	StateLayer {

Modules/Dashboard/Wrapper.qml

@@ -14,11 +14,16 @@ Item {
 
 		reloadableId: "dashboardState"
 	}
+	required property bool horizontal
 	readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
 	required property real offsetScale
 	readonly property bool shouldBeActive: root.visibilities.dashboard && Config.dashboard.enabled
 	required property PersistentProperties visibilities
 
+	anchors.left: horizontal ? undefined : parent.left
+	anchors.leftMargin: horizontal ? 0 : (-implicitWidth - 5) * offsetScale
+	anchors.top: horizontal ? parent.top : undefined
+	anchors.topMargin: horizontal ? (-implicitHeight - 5) * offsetScale : 0
 	implicitHeight: content.implicitHeight
 	implicitWidth: content.implicitWidth || 854
 	opacity: 1 - offsetScale
@@ -28,8 +33,10 @@ Item {
 		id: content
 
 		active: root.shouldBeActive || root.visible
-		anchors.bottom: parent.bottom
+		anchors.bottom: root.horizontal ? parent.bottom : undefined
-		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.horizontalCenter: root.horizontal ? parent.horizontalCenter : undefined
+		anchors.right: root.horizontal ? undefined : parent.right
+		anchors.verticalCenter: root.horizontal ? undefined : parent.verticalCenter
 
 		sourceComponent: Content {
 			dashState: root.dashState

Modules/HyprsunsetWidget.qml

@@ -6,11 +6,12 @@ import qs.Config
 CustomRect {
 	id: root
 
+	required property bool horizontal
 	property bool tempEnabled: Hyprsunset.enabled
 
 	color: root.tempEnabled ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height : width
-	implicitWidth: implicitHeight
+	implicitWidth: horizontal ? height : Config.bar.height
 	radius: Appearance.rounding.full
 
 	StateLayer {
@@ -25,6 +26,7 @@ CustomRect {
 		animate: true
 		color: root.tempEnabled ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 		fill: root.tempEnabled ? 1 : 0
+		font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 		text: root.tempEnabled ? "lightbulb" : "light_off"
 
 		Behavior on fill {

Modules/MediaWidget.qml

@@ -9,11 +9,12 @@ CustomRect {
 	id: root
 
 	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
+	required property bool horizontal
 	readonly property int textWidth: Math.min(metrics.width, 200)
 
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height : layout.implicitHeight + Appearance.padding.normal * 2
-	implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2
+	implicitWidth: horizontal ? layout.implicitWidth + Appearance.padding.normal * 2 : Config.bar.height
 	radius: Appearance.rounding.full
 
 	Behavior on implicitWidth {
@@ -28,10 +29,11 @@ CustomRect {
 		text: mediatext.text
 	}
 
-	RowLayout {
+	GridLayout {
 		id: layout
 
 		anchors.centerIn: parent
+		columns: root.horizontal ? -1 : 1
 
 		Behavior on implicitWidth {
 			Anim {
@@ -39,6 +41,7 @@ CustomRect {
 		}
 
 		MaterialIcon {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
 			animate: true
 			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 			font.pointSize: Appearance.font.size.larger
@@ -48,7 +51,8 @@ CustomRect {
 		MarqueeText {
 			id: mediatext
 
-			Layout.preferredWidth: root.textWidth
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			Layout.preferredHeight: root.horizontal ? root.height : root.textWidth
 			animate: true
 			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 			font.pointSize: Appearance.font.size.normal
@@ -58,6 +62,17 @@ CustomRect {
 			text: root.currentMedia
 			width: root.textWidth
 
+			transform: [
+				Translate {
+					x: !root.horizontal ? -root.textWidth + mediatext.implicitHeight : 0
+				},
+				Rotation {
+					angle: root.horizontal ? 0 : 270
+					origin.x: mediatext.implicitHeight / 2
+					origin.y: mediatext.implicitHeight / 2
+				}
+			]
+
 			CustomMouseArea {
 				anchors.fill: parent
 				hoverEnabled: true

Modules/NotifBell.qml

@@ -7,12 +7,13 @@ import qs.Components
 CustomRect {
 	id: root
 
+	required property bool horizontal
 	required property Wrapper popouts
 	required property PersistentProperties visibilities
 
 	color: visibilities.sidebar ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height : width
-	implicitWidth: implicitHeight
+	implicitWidth: horizontal ? height : Config.bar.height
 	radius: Appearance.rounding.full
 
 	MaterialIcon {
@@ -21,8 +22,7 @@ CustomRect {
 		anchors.centerIn: parent
 		color: root.visibilities.sidebar ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 		fill: root.visibilities.sidebar ? 1 : 0
-		font.family: "Material Symbols Rounded"
+		font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
-		font.pointSize: Appearance.font.size.larger
 		text: NotifServer.list.length ? "\uf4fe" : "\ue7f4"
 
 		Behavior on color {

Modules/Resource.qml

@@ -4,13 +4,14 @@ import QtQuick.Shapes
 import qs.Components
 import qs.Config
 
-RowLayout {
+GridLayout {
 	id: root
 
 	property color accentColor: warning ? DynamicColors.palette.m3error : mainColor
 	property real animatedPercentage: 0
 	readonly property real arcStartAngle: 0.75 * Math.PI
 	readonly property real arcSweep: 1.5 * Math.PI
+	required property bool horizontal
 	property string icon
 	required property color iconColor
 	required property color mainColor
@@ -20,8 +21,9 @@ RowLayout {
 	property bool warning: percentage * 100 >= warningThreshold
 	property int warningThreshold: 80
 
+	columnSpacing: Appearance.spacing.smaller
+	columns: horizontal ? -1 : 1
 	percentage: 0
-	spacing: Appearance.spacing.smaller
 
 	Behavior on animatedPercentage {
 		Anim {
@@ -46,8 +48,8 @@ RowLayout {
 	}
 
 	CustomClippingRect {
-		Layout.preferredHeight: root.height - Appearance.padding.small
+		Layout.preferredHeight: root.horizontal ? icon.implicitHeight : 4
-		Layout.preferredWidth: 4
+		Layout.preferredWidth: root.horizontal ? 4 : icon.implicitWidth
 		color: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
 		radius: Appearance.rounding.full
 
@@ -56,9 +58,11 @@ RowLayout {
 
 			anchors.bottom: parent.bottom
 			anchors.left: parent.left
-			anchors.right: parent.right
+			anchors.right: root.horizontal ? parent.right : undefined
+			anchors.top: root.horizontal ? undefined : parent.top
 			color: root.mainColor
-			implicitHeight: Math.ceil(root.percentage * parent.height)
+			implicitHeight: root.horizontal ? Math.ceil(root.percentage * parent.height) : 0
+			implicitWidth: root.horizontal ? 0 : Math.ceil(root.percentage * parent.height)
 
 			// Behavior on implicitHeight {
 			// 	Anim {

Modules/Resources.qml

@@ -12,12 +12,13 @@ import qs.Components
 CustomRect {
 	id: root
 
+	required property bool horizontal
 	required property PersistentProperties visibilities
 
 	clip: true
 	color: visibilities.resources ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Math.max(Config.bar.height, 24) : gridLayout.implicitHeight + Appearance.padding.normal * 2
-	implicitWidth: rowLayout.implicitWidth + Appearance.padding.larger * 2
+	implicitWidth: horizontal ? gridLayout.implicitWidth + Appearance.padding.larger * 2 : Config.bar.height
 	radius: Appearance.rounding.full
 
 	StateLayer {
@@ -26,13 +27,14 @@ CustomRect {
 		onClicked: root.visibilities.resources = !root.visibilities.resources
 	}
 
-	RowLayout {
+	GridLayout {
-		id: rowLayout
+		id: gridLayout
 
 		anchors.centerIn: parent
-		anchors.horizontalCenterOffset: -2
+		anchors.horizontalCenterOffset: root.horizontal ? 0 : 1
-		implicitHeight: root.implicitHeight
+		anchors.verticalCenterOffset: root.horizontal ? 0 : -3
-		spacing: Appearance.spacing.smaller
+		columnSpacing: Appearance.spacing.smaller
+		columns: root.horizontal ? -1 : 1
 
 		ServiceRef {
 			service: Gpu
@@ -48,7 +50,9 @@ CustomRect {
 
 		Resource {
 			Layout.alignment: Qt.AlignVCenter
-			Layout.fillHeight: true
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
 			icon: "memory"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary
@@ -57,7 +61,9 @@ CustomRect {
 		}
 
 		Resource {
-			Layout.fillHeight: true
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
 			icon: "memory_alt"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3secondary
@@ -66,7 +72,9 @@ CustomRect {
 		}
 
 		Resource {
-			Layout.fillHeight: true
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
 			icon: "gamepad"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3tertiary
@@ -74,7 +82,9 @@ CustomRect {
 		}
 
 		Resource {
-			Layout.fillHeight: true
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
 			icon: "developer_board"
 			iconColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 			mainColor: root.visibilities.resources ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3primary

Modules/Resources/Wrapper.qml

@@ -8,12 +8,14 @@ import qs.Config
 Item {
 	id: root
 
+	required property bool horizontal
 	readonly property real nonAnimHeight: content.item?.nonAnimHeight ?? 0
 	property real offsetScale: shouldBeActive ? 0 : 1
 	readonly property bool shouldBeActive: root.visibilities.resources
 	required property PersistentProperties visibilities
 
-	anchors.topMargin: (-implicitHeight - 5) * offsetScale
+	anchors.leftMargin: horizontal ? 0 : (-implicitWidth - 5) * offsetScale
+	anchors.topMargin: horizontal ? (-implicitHeight - 5) * offsetScale : 0
 	clip: true
 	implicitHeight: content.implicitHeight
 	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open

Modules/Settings/Common/ConnectedRect.qml

@@ -16,9 +16,15 @@ CustomRect {
 	bottomLeftRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
 	bottomRightRadius: last ? Appearance.rounding.large : Appearance.rounding.extraSmall
 	color: DynamicColors.tPalette.m3surfaceContainer
+	opacity: enabled && parent.enabled ? 1 : 0.5
 	topLeftRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
 	topRightRadius: first ? Appearance.rounding.large : Appearance.rounding.extraSmall
 
+	Behavior on opacity {
+		Anim {
+		}
+	}
+
 	CustomRect {
 		id: highlight
 

Modules/Settings/Common/DialogRowButton.qml

@@ -0,0 +1,249 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Blobs
+import qs.Components
+import qs.Config
+
+Item {
+	id: root
+
+	property bool acceptAllowed: true
+	required property string acceptLabel
+	required property Component content
+	required property string header
+	property int horizontalContentMargin
+	required property string icon
+	required property string label
+	property bool open
+	property real openHeight: Math.min(rootParent.height * 0.8, 600)
+	property real openWidth: Math.min(rootParent.width * 0.8, 400)
+	required property Item rootParent
+	property bool separateContent
+
+	signal accepted
+	signal cancelled
+
+	function reparentWrapper(): void {
+		const newParent = open ? rootParent : root;
+		const pos = dialogWrapper.mapToItem(newParent, 0, 0);
+		dialogWrapper.parent = newParent;
+		dialogWrapper.x = pos.x;
+		dialogWrapper.y = pos.y;
+	}
+
+	Layout.fillWidth: true
+	implicitHeight: openButton.implicitHeight
+	z: open || dialogTransition.running ? 2 : 0
+
+	BlobGroup {
+		id: blobGroup
+
+		color: root.open ? DynamicColors.palette.m3surfaceContainerHighest : DynamicColors.tPalette.m3surfaceContainer
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+	}
+
+	MouseArea {
+		id: backdrop
+
+		anchors.fill: parent
+		enabled: false
+		hoverEnabled: enabled
+		parent: root.open ? root.rootParent : root
+
+		onClicked: root.open = false
+	}
+
+	Item {
+		id: dialogWrapper
+
+		height: openButton.implicitHeight
+		width: root.width
+		z: 1
+
+		states: State {
+			name: "open"
+			when: root.open
+
+			PropertyChanges {
+				backdrop.enabled: true
+				dialogBg.bottomLeftRadius: Appearance.rounding.large
+				dialogBg.bottomRightRadius: Appearance.rounding.large
+				dialogBg.radius: Appearance.rounding.large
+				dialogContent.opacity: 1
+				dialogWrapper.height: root.openHeight
+				dialogWrapper.width: root.openWidth
+				dialogWrapper.x: (root.rootParent.width - root.openWidth) / 2
+				dialogWrapper.y: (root.rootParent.height - root.openHeight) / 2
+				elevation.opacity: 1
+				openButton.opacity: 0
+			}
+		}
+		transitions: Transition {
+			id: dialogTransition
+
+			SequentialAnimation {
+				ScriptAction {
+					script: root.reparentWrapper()
+				}
+
+				Anim {
+					properties: "x,y"
+				}
+			}
+
+			PropertyAction {
+				property: "enabled"
+			}
+
+			Anim {
+				properties: "opacity,radius,bottomLeftRadius,bottomRightRadius"
+				type: Anim.DefaultEffects
+			}
+
+			Anim {
+				properties: "width,height"
+			}
+		}
+
+		Elevation {
+			id: elevation
+
+			anchors.fill: parent
+			bottomLeftRadius: dialogBg.bottomLeftRadius
+			bottomRightRadius: dialogBg.bottomRightRadius
+			level: 4
+			opacity: 0
+			radius: dialogBg.radius
+
+			transform: Matrix4x4 {
+				matrix: dialogBg.deformMatrix
+			}
+		}
+
+		BlobRect {
+			id: dialogBg
+
+			anchors.fill: parent
+			bottomLeftRadius: Appearance.rounding.large
+			bottomRightRadius: Appearance.rounding.large
+			deformScale: 0
+			group: blobGroup
+			opacity: blobGroup.color.a * (root.enabled ? 1 : 0.5)
+			radius: Appearance.rounding.extraSmall
+		}
+
+		RowButton {
+			id: openButton
+
+			anchors.left: parent.left
+			anchors.right: parent.right
+			color: "transparent"
+			height: Math.min(implicitHeight, parent.height) // Clamp to parent height due to overshoot anim
+			icon: root.icon
+			last: true
+			text: root.label
+
+			transform: Matrix4x4 {
+				matrix: dialogBg.deformMatrix
+			}
+
+			onClicked: root.open = true
+		}
+
+		Loader {
+			id: dialogContent
+
+			active: opacity > 0
+			anchors.fill: parent
+			asynchronous: true
+			opacity: 0
+
+			sourceComponent: MouseArea {
+				onWheel: event => event.accepted = true
+
+				ColumnLayout {
+					anchors.bottomMargin: Appearance.padding.largeIncreased
+					anchors.fill: parent
+					anchors.margins: Appearance.padding.extraLarge
+					spacing: 0
+
+					CustomText {
+						font.pointSize: Appearance.font.size.large
+						text: root.header
+					}
+
+					Loader {
+						Layout.fillWidth: true
+						Layout.topMargin: Appearance.spacing.normal
+						active: root.separateContent
+
+						sourceComponent: CustomRect {
+							color: DynamicColors.palette.m3outline
+							implicitHeight: 1
+						}
+					}
+
+					Loader {
+						Layout.fillHeight: true
+						Layout.fillWidth: true
+						Layout.leftMargin: root.horizontalContentMargin
+						Layout.rightMargin: root.horizontalContentMargin
+						sourceComponent: root.content
+					}
+
+					Loader {
+						Layout.bottomMargin: Appearance.spacing.normal
+						Layout.fillWidth: true
+						active: root.separateContent
+
+						sourceComponent: CustomRect {
+							color: DynamicColors.palette.m3outline
+							implicitHeight: 1
+						}
+					}
+
+					RowLayout {
+						Layout.alignment: Qt.AlignRight
+						spacing: Appearance.spacing.extraSmall
+
+						TextButton {
+							horizontalPadding: Appearance.padding.largeIncreased
+							isRound: true
+							text: qsTr("Cancel")
+							type: TextButton.Text
+							verticalPadding: Appearance.padding.normal
+
+							onClicked: {
+								root.cancelled();
+								root.open = false;
+							}
+						}
+
+						TextButton {
+							enabled: root.acceptAllowed
+							horizontalPadding: Appearance.padding.largeIncreased
+							isRound: true
+							text: root.acceptLabel
+							type: TextButton.Text
+							verticalPadding: Appearance.padding.normal
+
+							onClicked: {
+								root.accepted();
+								root.open = false;
+							}
+						}
+					}
+				}
+			}
+			transform: Matrix4x4 {
+				matrix: dialogBg.deformMatrix
+			}
+		}
+	}
+}

Modules/Settings/Common/DialogSelectButton.qml

@@ -0,0 +1,96 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Config
+import qs.Components
+
+DialogRowButton {
+	id: root
+
+	required property var model
+	property var selectedItem
+
+	function keyFor(item: var): string {
+		return item.id;
+	}
+
+	function labelFor(item: var): string {
+		return item.label;
+	}
+
+	acceptAllowed: !!selectedItem
+	horizontalContentMargin: -Appearance.padding.small
+	separateContent: true
+
+	content: Component {
+		VerticalFadeListView {
+			bottomMargin: Appearance.padding.large
+			model: root.model
+			spacing: 0
+			topMargin: Appearance.padding.large
+
+			delegate: CustomRect {
+				id: item
+
+				required property var modelData
+				readonly property bool selected: root.selectedItem === root.keyFor(modelData)
+
+				anchors.left: ListView.view.contentItem.left
+				anchors.margins: 1 // Gets cut off for some reason without this
+				anchors.right: ListView.view.contentItem.right
+				color: Qt.alpha(DynamicColors.palette.m3tertiaryContainer, selected ? 1 : 0)
+				implicitHeight: label.implicitHeight + Appearance.padding.normal * 2
+				radius: stateLayer.pressed ? Appearance.rounding.extraSmall : selected ? Appearance.rounding.large : Appearance.rounding.normal
+
+				Behavior on radius {
+					Anim {
+						type: Anim.SlowEffects
+					}
+				}
+
+				StateLayer {
+					id: stateLayer
+
+					onClicked: root.selectedItem = root.keyFor(item.modelData)
+				}
+
+				CustomText {
+					id: label
+
+					anchors.left: parent.left
+					anchors.margins: Appearance.padding.large
+					anchors.right: item.selected ? checkIcon.left : parent.right
+					anchors.rightMargin: item.selected ? Appearance.spacing.normal : anchors.margins
+					anchors.verticalCenter: parent.verticalCenter
+					color: item.selected ? DynamicColors.palette.m3onTertiaryContainer : DynamicColors.palette.m3onSurface
+					elide: Text.ElideRight
+					font.pointSize: Appearance.font.size.smaller
+					text: root.labelFor(item.modelData)
+				}
+
+				MaterialIcon {
+					id: checkIcon
+
+					anchors.margins: Appearance.padding.large
+					anchors.right: parent.right
+					anchors.verticalCenter: parent.verticalCenter
+					color: DynamicColors.palette.m3onTertiaryContainer
+					font.pointSize: Appearance.font.size.medium
+					opacity: item.selected ? 1 : 0
+					text: "check"
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.SlowEffects
+						}
+					}
+				}
+			}
+		}
+	}
+
+	onOpenChanged: {
+		if (open)
+			selectedItem = null;
+	}
+}

Modules/Settings/Common/ListEditor.qml

@@ -0,0 +1,317 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Config
+import qs.Components
+
+ListView {
+	id: root
+
+	property bool first
+	property alias values: valuesModel.values
+
+	signal itemMoved(from: int, to: int)
+	signal itemRemoved(index: int)
+	signal itemToggled(index: int, checked: bool)
+
+	function dampOvershoot(overshoot: real, maxOvershoot: real): real {
+		return overshoot / (1 + overshoot / maxOvershoot);
+	}
+
+	function labelFor(item: var): string {
+		return item.label;
+	}
+
+	function toggledFor(item: var): bool {
+		return false;
+	}
+
+	Layout.fillWidth: true
+	implicitHeight: contentHeight
+	interactive: false
+	spacing: Appearance.spacing.extraSmall / 2
+
+	add: Transition {
+		Anim {
+			from: 0
+			properties: "opacity"
+			to: 1
+			type: Anim.DefaultEffects
+		}
+	}
+	displaced: Transition {
+		Anim {
+			properties: "opacity"
+			to: 1
+			type: Anim.DefaultEffects
+		}
+
+		Anim {
+			properties: "y"
+		}
+	}
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
+	model: DelegateModel {
+		id: visualModel
+
+		delegate: ListRow {
+		}
+		model: ScriptModel {
+			id: valuesModel
+		}
+	}
+	move: Transition {
+		Anim {
+			properties: "opacity"
+			to: 1
+			type: Anim.DefaultEffects
+		}
+
+		Anim {
+			properties: "y"
+		}
+	}
+	remove: Transition {
+		Anim {
+			properties: "opacity"
+			to: 0
+			type: Anim.DefaultEffects
+		}
+	}
+
+	component ListRow: Item {
+		id: item
+
+		property bool held
+		property real lastMoveY
+		required property var modelData
+		property int pressIndex
+		property point pressPos
+		property real radiusLerpProg
+		property real topRadius: root?.first && DelegateModel.itemsIndex === 0 ? Appearance.rounding.large : Appearance.rounding.extraSmall
+
+		function lerpRadius(a: real, b: real): real {
+			return a + (b - a) * radiusLerpProg;
+		}
+
+		anchors.left: root?.contentItem.left
+		anchors.right: root?.contentItem.right
+		implicitHeight: row.implicitHeight + row.anchors.margins * 2
+		state: held ? "held" : ""
+		z: held || returnAnim.running ? 1 : 0
+
+		states: State {
+			name: "held"
+
+			PropertyChanges {
+				dragIcon.color: DynamicColors.palette.m3onPrimaryContainer
+				elevation.opacity: 1
+				item.radiusLerpProg: 1
+				itemBg.color: DynamicColors.palette.m3primaryContainer
+				label.color: DynamicColors.palette.m3onPrimaryContainer
+				placeholder.opacity: 0.1
+			}
+		}
+		Behavior on topRadius {
+			Anim {
+				type: Anim.DefaultEffects
+			}
+		}
+		transitions: Transition {
+			Anim {
+				properties: "opacity,radiusLerpProg"
+				type: Anim.SlowEffects
+			}
+
+			PropertyAction {
+				properties: "color,inactiveOnColor"
+			}
+		}
+
+		CustomRect {
+			id: placeholder
+
+			anchors.fill: parent
+			color: DynamicColors.palette.m3primary
+			opacity: 0
+			radius: Appearance.rounding.extraSmall
+			topLeftRadius: item.topRadius
+			topRightRadius: item.topRadius
+		}
+
+		MouseArea {
+			id: mouse
+
+			anchors.fill: parent
+			preventStealing: true
+
+			onPositionChanged: e => {
+				item.lastMoveY = item.y;
+				const absY = item.mapToItem(root.contentItem, 0, e.y).y;
+
+				const swap = root.itemAt(0, absY);
+				if (!swap || swap === item)
+					return;
+
+				const idx = item.DelegateModel.itemsIndex;
+				const swapIdx = swap.DelegateModel.itemsIndex;
+				visualModel.items.move(idx, swapIdx);
+			}
+			onPressed: e => {
+				returnAnim.stop();
+				item.pressPos = Qt.point(e.x, e.y);
+				item.pressIndex = item.DelegateModel.itemsIndex;
+				item.lastMoveY = item.y;
+				item.held = true;
+
+				itemContent.x = Qt.binding(() => {
+					if (!root)
+						return 0;
+
+					const maxOvershoot = Appearance.padding.extraExtraLarge;
+					const x = mouse.mouseX - item.pressPos.x;
+					return root.dampOvershoot(Math.abs(x), maxOvershoot) * Math.sign(x);
+				});
+				itemContent.y = Qt.binding(() => {
+					if (!root)
+						return 0;
+
+					const maxOvershoot = Appearance.padding.extraLarge;
+					const yDiff = item.y - item.lastMoveY; // Extra offset if the y of the item changed between mouseY updates
+					const y = mouse.mouseY - item.pressPos.y - yDiff;
+					const absY = item.mapToItem(root.contentItem, 0, y).y;
+					const maxY = root.implicitHeight - item.implicitHeight;
+					if (absY < 0)
+						return y - absY - root.dampOvershoot(-absY, maxOvershoot);
+					if (absY > maxY)
+						return y - absY + maxY + root.dampOvershoot(absY - maxY, maxOvershoot);
+					return y;
+				});
+			}
+			onReleased: e => {
+				// Break bindings
+				itemContent.x = itemContent.x;
+				itemContent.y = itemContent.y;
+				returnAnim.start();
+				item.held = false;
+
+				const idx = item.DelegateModel.itemsIndex;
+				if (idx !== item.pressIndex)
+					root.itemMoved(item.pressIndex, idx);
+			}
+		}
+
+		Anim {
+			id: returnAnim
+
+			properties: "x,y"
+			target: itemContent
+			to: 0
+		}
+
+		Item {
+			id: itemContent
+
+			implicitHeight: item.implicitHeight
+			implicitWidth: item.width
+
+			Elevation {
+				id: elevation
+
+				anchors.fill: parent
+				level: 3
+				opacity: 0
+				radius: itemBg.radius
+				topLeftRadius: itemBg.topLeftRadius
+				topRightRadius: itemBg.topRightRadius
+			}
+
+			CustomRect {
+				id: itemBg
+
+				anchors.fill: parent
+				color: DynamicColors.tPalette.m3surfaceContainer
+				radius: item.lerpRadius(Appearance.rounding.extraSmall, Appearance.rounding.large)
+				topLeftRadius: item.lerpRadius(item.topRadius, Appearance.rounding.large)
+				topRightRadius: item.lerpRadius(item.topRadius, Appearance.rounding.large)
+			}
+
+			MouseArea {
+				id: stateLayer
+
+				acceptedButtons: Qt.NoButton
+				anchors.fill: parent
+				cursorShape: mouse.pressed ? Qt.ClosedHandCursor : Qt.OpenHandCursor
+				hoverEnabled: true
+
+				CustomRect {
+					anchors.fill: parent
+					color: DynamicColors.palette.m3onSurface
+					opacity: parent.containsMouse && !item.held ? 0.08 : 0
+					radius: itemBg.radius
+					topLeftRadius: itemBg.topLeftRadius
+					topRightRadius: itemBg.topRightRadius
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
+				}
+			}
+
+			RowLayout {
+				id: row
+
+				anchors.fill: parent
+				anchors.leftMargin: Appearance.padding.largeIncreased
+				anchors.margins: Appearance.padding.normal
+				anchors.rightMargin: Appearance.padding.large
+				spacing: Appearance.spacing.normal
+
+				MaterialIcon {
+					id: dragIcon
+
+					color: Qt.alpha(DynamicColors.palette.m3onSurfaceVariant, enabledSwitch.checked ? 1 : 0.5)
+					font.pointSize: Appearance.font.size.medium
+					text: "drag_indicator"
+				}
+
+				CustomText {
+					id: label
+
+					Layout.fillWidth: true
+					color: Qt.alpha(DynamicColors.palette.m3onSurface, enabledSwitch.checked ? 1 : 0.5)
+					elide: Text.ElideRight
+					font.pointSize: Appearance.font.size.smaller
+					text: root.labelFor(item.modelData)
+				}
+
+				CustomSwitch {
+					id: enabledSwitch
+
+					checked: root.toggledFor(item.modelData)
+					font.pointSize: Appearance.font.size.medium
+
+					onToggled: root.itemToggled(item.DelegateModel.itemsIndex, checked)
+				}
+
+				IconButton {
+					font.pointSize: Appearance.font.size.large
+					icon: "delete"
+					inactiveOnColor: DynamicColors.palette.m3error
+					isRound: true
+					label.fill: 0
+					type: IconButton.Text
+
+					onClicked: root.itemRemoved(item.DelegateModel.itemsIndex)
+				}
+			}
+		}
+	}
+}

Modules/Settings/Common/Logo.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Shapes
+import qs.Config
+import qs.Components
+
+Item {
+	id: root
+
+	readonly property real designHeight: 80.419373
+	readonly property real designWidth: 98.057144
+
+	implicitHeight: designHeight
+	implicitWidth: designWidth
+
+	Shape {
+		id: shape
+
+		anchors.centerIn: parent
+		height: root.designHeight
+		preferredRendererType: Shape.CurveRenderer
+		scale: Math.min(root.implicitHeight / height, root.implicitWidth / width)
+		width: root.designWidth
+
+		ShapePath {
+			strokeColor: "transparent"
+
+			fillGradient: LinearGradient {
+				x1: 0
+				x2: shape.width
+				y1: 0
+				y2: shape.height
+
+				GradientStop {
+					color: DynamicColors.palette.m3primary
+					position: 0.0
+				}
+
+				GradientStop {
+					color: DynamicColors.palette.m3tertiary
+					position: 1.0
+				}
+			}
+
+			PathSvg {
+				path: "m 51.981821,0.026059 c -1.39501,-0.04986 -2.77607,-0.02697 -4.1305,0.05839 -9.029544,0.569111 -16.873893,3.910515 -19.747638,6.917924 -4.597996,4.811856 -9.516732,6.095236 -9.516732,6.095236 -4.063345,1.817811 -10.372493,1.390096 -10.372493,1.390096 -1.283162,6.736594 -5.560032,10.051544 -7.377844,12.724804 -1.817812,2.67325 -0.106971,4.38371 -0.106971,4.38371 7.805897,9.40985 5.132504,15.93288 5.132504,15.93288 3.421763,5.13265 5.132503,8.87491 5.132503,8.87491 0.855441,17.21575 24.059513,19.14095 24.059513,19.14095 8.019764,4.38413 21.813738,6.09496 33.041398,3.95635 11.22766,-2.1386 22.13426,-8.66133 25.44909,-12.40389 3.31484,-3.74255 4.70506,-4.70528 4.4912,-7.80625 -0.21386,-3.10098 -8.34057,-6.73654 -8.34057,-6.73654 4.70492,-26.73253 -10.5857,-43.627569 -25.12819,-49.829514 -4.09007,-1.744297 -8.40025,-2.549484 -12.58527,-2.69906 z m 0.0522,6.437333 c 2.11073,-0.04742 4.33196,0.144541 6.65179,0.645956 18.55865,4.011316 31.22355,22.883281 24.70082,47.477201 0,0 0.42763,1.06939 6.62957,4.38423 0,0 -6.09519,11.86918 -29.40596,14.97015 0,0 -16.039134,2.13849 -27.908379,-8.55452 0,0 -4.491338,2.24573 -10.372493,0.53485 0,0 6.094988,-3.3149 4.063317,-8.44755 -2.031672,-5.13264 -10.051071,-6.84383 -11.441162,-7.69927 -1.390091,-0.85544 -2.673221,-2.24534 -2.673221,-2.24534 0,0 8.12664,-1.49702 9.516731,-8.23361 1.390092,-6.7366 -2.994298,-11.01376 -4.812109,-12.29692 -1.817812,-1.28317 -3.421899,-2.5665 -4.491199,-4.59816 0,0 6.415801,-1.069 9.623702,-3.31453 0,0 2.566413,-0.42817 2.994133,9.83712 0,0 3.40241,0.98386 2.780192,-10.05106 0,0 9.369134,-12.076644 24.144268,-12.408547 z m 1.44952,11.296987 c -7.539424,-0.42396 -14.807124,3.94504 -19.819474,11.69747 -8.019756,12.40389 -4.597866,33.04123 15.505004,39.45703 20.10286,6.41581 34.21755,-8.76794 34.21755,-8.76794 0,0 -6.20221,-5.34688 -7.5923,-16.14682 -1.39009,-10.79994 -8.87492,-19.99568 -8.87492,-19.99568 -4.29057,-4.00988 -8.91222,-5.98969 -13.43587,-6.24406 z m 0.43874,3.91759 c 5.90958,0.2395 10.57783,4.70548 11.60704,7.352 1.49702,3.84948 2.88726,10.26522 -3.74241,13.58005 1e-5,-1.81781 1.06895,-2.13837 -0.96273,-4.91856 1.81781,-1.17623 2.99392,-3.10096 1.06918,-5.45342 -1.71088,0.53465 -0.85529,1.38993 -3.7424,-0.42788 -2.88711,-1.81781 -0.85514,-3.10083 -3.31453,-5.1325 0,0 -1.06951,-0.42772 -1.92495,0 -0.85544,0.42772 0.96245,2.88717 -2.56625,4.27726 -3.528694,1.39009 -2.673344,-0.21375 -2.994134,-2.45928 0,0 -4.49095,4.27695 -1.06919,10.37197 3.421764,6.09501 9.730474,-0.10662 7.805734,-1.92443 -1.92474,-1.81782 -2.13858,-2.1386 -4.06332,-1.39009 0,0 0.21415,-3.7426 4.91908,-1.49707 4.70492,2.24553 3.84939,13.90048 -5.77432,12.61732 -9.623714,-1.28316 -13.366163,-15.07666 -3.849384,-22.13405 2.973994,-2.20543 5.916404,-2.97018 8.602584,-2.86132 z m -44.322368,1.76475 c 0.177759,-0.002 0.290475,0.19502 0.325562,0.66869 0.21386,2.88712 7.806121,5.98809 7.485331,12.40389 -0.32079,6.41581 -6.309176,5.77433 -6.309176,5.77433 0.962372,-5.34651 -7.591784,-13.36663 -7.591784,-13.36663 2.592219,-0.26816 5.184343,-5.46781 6.090067,-5.48028 z m 60.847968,11.36158 c 0,0 3.10099,17.10864 5.56039,18.81952 0,0 -4.7046,-3.20747 -7.37785,-1.60352 -2.67325,1.60395 -2.67322,5.23955 -2.67322,6.84351 0,0 -3.31509,-4.27761 -7.5923,-2.4598 -4.2772,1.81781 -11.013604,-2.13842 -11.869044,-5.02553 0,0 9.623444,2.45961 14.435294,-3.52847 0,0 8.98208,-0.85568 9.51673,-13.04571 z"
+			}
+		}
+	}
+}

Modules/Settings/Common/RowButton.qml

@@ -0,0 +1,93 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import qs.Config
+import qs.Components
+
+ConnectedRect {
+	id: root
+
+	property alias icon: iconLabel.text
+	readonly property alias iconLabel: iconLabel
+	readonly property alias label: label
+	property alias stateEnabled: stateLayer.enabled
+	readonly property alias subLabel: subLabel
+	property alias subtext: subLabel.text
+	property alias text: label.text
+	property string trailingIcon
+
+	signal clicked(event: MouseEvent)
+
+	Layout.fillWidth: true
+	implicitHeight: row.implicitHeight + Appearance.padding.normal * 2
+
+	StateLayer {
+		id: stateLayer
+
+		onClicked: e => root.clicked(e)
+	}
+
+	RowLayout {
+		id: row
+
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.largeIncreased
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		opacity: root.enabled ? 1 : 0.5
+		spacing: Appearance.spacing.normal
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+
+		MaterialIcon {
+			id: iconLabel
+
+			color: DynamicColors.palette.m3onSurfaceVariant
+			fill: 1
+			font.pointSize: Appearance.font.size.medium
+		}
+
+		Column {
+			id: column
+
+			Layout.fillWidth: true
+			spacing: 0
+
+			CustomText {
+				id: label
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+			}
+
+			CustomText {
+				id: subLabel
+
+				anchors.left: parent.left
+				anchors.right: parent.right
+				color: DynamicColors.palette.m3outline
+				elide: Text.ElideRight
+				font.pointSize: Appearance.font.size.small
+				visible: text
+			}
+		}
+
+		Loader {
+			active: root.trailingIcon
+			asynchronous: true
+			visible: active
+
+			sourceComponent: MaterialIcon {
+				color: DynamicColors.palette.m3onSurfaceVariant
+				font.pointSize: Appearance.font.size.medium
+				text: root.trailingIcon
+			}
+		}
+	}
+}

Modules/Settings/Common/ToggleRow.qml

@@ -62,7 +62,13 @@ CustomSwitch {
 					f.pointSize = Appearance.font.size.smaller;
 					return f;
 				}
+				opacity: root.enabled ? 1 : 0.5
 				text: root.text
+
+				Behavior on opacity {
+					Anim {
+					}
+				}
 			}
 
 			CustomText {
@@ -77,8 +83,14 @@ CustomSwitch {
 					f.pointSize = Appearance.font.size.small;
 					return f;
 				}
+				opacity: root.enabled ? 1 : 0.5
 				text: root.subtext
 				visible: root.subtext
+
+				Behavior on opacity {
+					Anim {
+					}
+				}
 			}
 		}
 	}

Modules/Settings/PageRegistry.qml

@@ -15,9 +15,9 @@ Singleton {
 			category: "appearance"
 		},
 		{
-			name: qsTr("Screenshot"),
+			name: qsTr("Screenshots"),
 			icon: "screenshot_region",
-			description: qsTr("Set screenshot effects"),
+			description: qsTr("Set screenshot options and effects"),
 			category: "appearance"
 		},
 

Modules/Settings/Pages/AboutPage.qml

@@ -44,6 +44,14 @@ PageBase {
 				spacing: Appearance.spacing.small
 				width: parent.width - Appearance.padding.largeIncreased * 2
 
+				Logo {
+					Layout.alignment: Qt.AlignHCenter
+					Layout.preferredHeight: implicitHeight
+					Layout.preferredWidth: implicitWidth
+					implicitHeight: designHeight * 2
+					implicitWidth: designWidth * 2
+				}
+
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
 					Layout.topMargin: Appearance.spacing.small

Modules/Settings/Pages/Panels/Bar/BarStatusIcons.qml

@@ -7,6 +7,12 @@ import qs.Modules.Settings.Common
 PageBase {
 	id: root
 
+	readonly property var builtinIcons: ({
+			audio: qsTr("Speakers"),
+			microphone: qsTr("Microphone"),
+			power: qsTr("Battery")
+		})
+
 	isSubPage: true
 	title: qsTr("System icons")
 
@@ -22,77 +28,89 @@ PageBase {
 			text: qsTr("Visible icons")
 		}
 
-		ToggleRow {
+		ListEditor {
-			checked: Config.bar.tray.showAudio
+			function labelFor(item: var): string {
+				const prettyName = root.builtinIcons[item.id];
+				if (prettyName)
+					return prettyName;
+				const label = item.id.replace(/([A-Z])/g, " $1");
+				return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
+			}
+
+			function toggledFor(item: var): bool {
+				return item.enabled;
+			}
+
 			first: true
-			settingAnchor: "bar-status-speakers"
+			values: Config.bar.tray.statusIcons
-			text: qsTr("Speakers")
+			z: 1
 
-			onToggled: Config.bar.tray.showAudio = checked
+			onItemMoved: (from, to) => {
+				const icons = Config.bar.tray.statusIcons.slice();
+				const [moved] = icons.splice(from, 1);
+				icons.splice(to, 0, moved);
+				Config.bar.tray.statusIcons = icons;
+			}
+			onItemRemoved: index => {
+				const icons = Config.bar.tray.statusIcons.slice();
+				icons.splice(index, 1);
+				Config.bar.tray.statusIcons = icons;
+			}
+			onItemToggled: (index, checked) => {
+				const icons = Config.bar.tray.statusIcons.slice();
+				icons[index] = Object.assign({}, icons[index], {
+					enabled: checked
+				});
+				Config.bar.tray.statusIcons = icons;
+			}
 		}
 
-		ToggleRow {
+		DialogSelectButton {
-			checked: Config.bar.tray.showMicrophone
+			id: addItemContainer
-			settingAnchor: "bar-status-mic"
-			text: qsTr("Microphone")
 
-			onToggled: Config.bar.tray.showMicrophone = checked
+			acceptLabel: qsTr("Add")
+			enabled: {
+				console.log(Object.keys(model).length);
+				return Object.keys(model).length > 0;
+			}
+			header: qsTr("Add new entry")
+			icon: "add"
+			label: qsTr("Add entry")
+			model: {
+				const present = new Set(Config.bar.tray.statusIcons.map(item => item.id));
+				return Object.keys(root.builtinIcons).filter(id => !present.has(id)).map(id => ({
+							id: id,
+							label: root.builtinIcons[id]
+						}));
+			}
+			rootParent: root.flickable
+
+			onAccepted: {
+				if (!selectedItem)
+					return;
+
+				const icons = Config.bar.tray.statusIcons.slice();
+				icons.push({
+					id: selectedItem,
+					enabled: true
+				});
+				Config.bar.tray.statusIcons = icons;
+			}
 		}
 
-		//////// FOR LATER:
+		// Behavior
-		// ToggleRow {
-		// 	checked: Config.bar.tray.showNetwork
-		// 	text: qsTr("Network")
-		//
-		// 	onToggled: Config.bar.tray.showNetwork = checked
-		// }
-		//
-		// ToggleRow {
-		// 	checked: Config.bar.tray.showWifi
-		// 	text: qsTr("Wi-Fi")
-		//
-		// 	onToggled: Config.bar.tray.showWifi = checked
-		// }
-		//
-		// ToggleRow {
-		// 	checked: Config.bar.tray.showBluetooth
-		// 	text: qsTr("Bluetooth")
-		//
-		// 	onToggled: Config.bar.tray.showBluetooth = checked
-		// }
-
-		ToggleRow {
-			checked: Config.bar.tray.showPower
-			last: true
-			settingAnchor: "bar-status-power"
-			text: qsTr("Battery")
-
-			onToggled: Config.bar.tray.showPower = checked
-		}
-
-		// Behaviour
 		SectionHeader {
 			text: qsTr("Behavior")
 		}
 
 		ToggleRow {
-			checked: Config.bar.popouts.audio
+			checked: Config.bar.popouts.statusIcons
 			first: true
-			settingAnchor: "bar-status-audio-popout"
+			settingAnchor: "bar-status-popout-on-hover"
-			subtext: qsTr("Show a details popout when hovering the audio icons")
+			subtext: qsTr("Show a details popout when hovering the status icons")
-			text: qsTr("Audio popout on hover")
+			text: qsTr("Popout on hover")
 
-			onToggled: Config.bar.popouts.audio = checked
+			onToggled: Config.bar.popouts.statusIcons = checked
-		}
-
-		ToggleRow {
-			checked: Config.bar.popouts.upower
-			last: true
-			settingAnchor: "bar-status-power-popout"
-			subtext: qsTr("Show a details popout when hovering the power icon")
-			text: qsTr("Power popout on hover")
-
-			onToggled: Config.bar.popouts.upower = checked
 		}
 	}
 }

Modules/Settings/Pages/Panels/Bar/BarTray.qml

@@ -28,8 +28,18 @@ PageBase {
 			onMoved: value => Config.bar.tray.trayIconSize = value
 		}
 
+		ToggleRow {
+			checked: Config.bar.popouts.tray
+			settingAnchor: "bar-tray-enable-tray-popouts"
+			subtext: Config.bar.popouts.tray ? qsTr("Enabled") : qsTr("Disabled")
+			text: qsTr("Enable tray menu popouts")
+
+			onToggled: Config.bar.popouts.tray = checked
+		}
+
 		ToggleRow {
 			checked: Config.bar.tray.showOnHover
+			enabled: Config.bar.popouts.tray
 			settingAnchor: "bar-tray-show-popout-on-hover"
 			subtext: Config.bar.tray.showOnHover ? qsTr("Will show context menu on hover") : qsTr("Will show context menu on right-click")
 			text: qsTr("Show popout on hover")

Modules/Settings/Pages/Panels/BarPanel.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick.Layouts
+import qs.Components
 import qs.Config
 import qs.Modules.Settings.Common
 
@@ -25,7 +26,6 @@ PageBase {
 		ToggleRow {
 			checked: Config.bar.autoHide
 			first: true
-			last: true
 			settingAnchor: "bar-autohide"
 			subtext: qsTr("Hide the bar, reveal on hover")
 			text: qsTr("Auto hide")
@@ -33,6 +33,37 @@ PageBase {
 			onToggled: Config.bar.autoHide = checked
 		}
 
+		SelectRow {
+			active: Config.bar.position === "top" ? menuItems[0] : Config.bar.position === "left" ? menuItems[1] : menuItems[2]
+			last: true
+			settingAnchor: "bar-position"
+			subtext: qsTr("Automatic or manual effect values")
+			text: qsTr("Effects mode")
+
+			menuItems: [
+				MenuItem {
+					icon: "build"
+					text: qsTr("Top")
+					value: "top"
+				},
+				MenuItem {
+					icon: "rotate_auto"
+					text: qsTr("Left")
+					value: "left"
+				},
+				MenuItem {
+					icon: "rotate_auto"
+					text: qsTr("Bottom")
+					value: "bottom"
+				}
+			]
+
+			onSelected: item => {
+				Config.bar.position = item.value;
+				Config.save();
+			}
+		}
+
 		// Components
 		SectionHeader {
 			text: qsTr("Components")

Modules/Settings/Pages/ScreenshotPage.qml

@@ -12,7 +12,7 @@ import qs.Modules.Settings.Common
 PageBase {
 	id: root
 
-	title: qsTr("Screenshot effects")
+	title: qsTr("Screenshots")
 
 	ColumnLayout {
 		anchors.horizontalCenter: parent.horizontalCenter
@@ -22,6 +22,21 @@ PageBase {
 
 		SectionHeader {
 			first: true
+			text: qsTr("Behavior")
+		}
+
+		ToggleRow {
+			checked: Config.screenshot.saveOnCopy
+			first: true
+			last: true
+			settingAnchor: "screenshot-save-on-copy"
+			subtext: qsTr("Also save screenshot to disk when copying to clipboard")
+			text: qsTr("Save on copy")
+
+			onToggled: Config.screenshot.saveOnCopy = checked
+		}
+
+		SectionHeader {
 			text: qsTr("Effects")
 		}
 

Modules/SysTray/StatusIcons.qml

@@ -0,0 +1,153 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Helpers
+import qs.Modules.SysTray.Widgets
+import qs.Config
+import qs.Components
+
+CustomClippingRect {
+	id: root
+
+	readonly property int firstPresent: {
+		const values = model.values;
+		for (let i = 0; i < values.length; i++)
+			if (!collapsed(values[i]))
+				return i;
+		return -1;
+	}
+	required property bool horizontal
+
+	// Index of the first/last entry that isn't collapsed, for edge margin gating
+	readonly property alias items: grid
+	readonly property int lastPresent: {
+		const values = model.values;
+		for (let i = values.length - 1; i >= 0; i--)
+			if (!collapsed(values[i]))
+				return i;
+		return -1;
+	}
+	readonly property real shortSize: Config.bar.height
+	readonly property real size: horizontal ? grid.implicitWidth + Appearance.padding.small * 2 : grid.implicitHeight + Appearance.padding.small * 2
+	readonly property int spacing: Appearance.spacing.normal / 2
+
+	// Entries that can shrink to nothing, spacing included
+	function collapsed(entry: var): bool {
+		if (entry.id === "lockStatus")
+			return !Hypr.capsLock && !Hypr.numLock;
+		return false;
+	}
+
+	bottomLeftRadius: horizontal ? Appearance.rounding.smallest / 2 : Appearance.rounding.full
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? shortSize : size
+	implicitWidth: horizontal ? size : shortSize
+	radius: Appearance.rounding.full
+	topLeftRadius: Appearance.rounding.smallest / 2
+	topRightRadius: horizontal ? Appearance.rounding.full : Appearance.rounding.smallest / 2
+
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.horizontal
+
+		Anim {
+		}
+	}
+
+	GridLayout {
+		id: grid
+
+		anchors.bottomMargin: root.horizontal ? 0 : Appearance.padding.small
+		anchors.fill: parent
+		anchors.leftMargin: root.horizontal ? Appearance.padding.small : 0
+		anchors.rightMargin: root.horizontal ? Appearance.padding.small : 0
+		anchors.topMargin: root.horizontal ? 0 : Appearance.padding.small
+		columns: root.horizontal ? -1 : 1
+
+		Repeater {
+			model: ScriptModel {
+				id: model
+
+				values: Config.bar.tray.statusIcons.filter(e => e.enabled)
+			}
+
+			DelegateChooser {
+				role: "id"
+
+				DelegateChoice {
+					roleValue: "audio"
+
+					delegate: EntryWrapper {
+						name: "audio"
+
+						AudioWidget {
+							horizontal: root.horizontal
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "microphone"
+
+					delegate: EntryWrapper {
+						name: "audio"
+
+						MicWidget {
+							horizontal: root.horizontal
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "power"
+
+					delegate: EntryWrapper {
+						name: "upower"
+
+						UPowerWidget {
+							horizontal: root.horizontal
+						}
+					}
+				}
+			}
+		}
+	}
+
+	component EntryWrapper: Item {
+		required property int index
+		default property Item item
+		property real leftGap: present && index !== root.lastPresent ? margin : 0
+		property int margin: root.spacing / 2
+		required property var modelData
+		property string name: modelData.id.toLowerCase()
+		readonly property bool present: !root.collapsed(modelData)
+		property real rightGap: present && index !== root.firstPresent ? margin : 0
+
+		Layout.alignment: Qt.AlignHCenter
+		Layout.bottomMargin: root.horizontal ? 0 : Math.round(rightGap)
+		Layout.leftMargin: root.horizontal ? Math.round(leftGap) : 0
+		Layout.rightMargin: root.horizontal ? Math.round(rightGap) : 0
+		Layout.topMargin: root.horizontal ? 0 : Math.round(leftGap)
+		children: item
+		implicitHeight: item?.implicitHeight ?? 0
+		implicitWidth: item?.implicitWidth ?? 0
+
+		Behavior on leftGap {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+		Behavior on rightGap {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+	}
+}

Modules/SysTray/TrayIcons.qml

@@ -0,0 +1,58 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.SystemTray
+import qs.Components
+import qs.Config
+import qs.Modules.SysTray.Widgets
+import qs.Modules
+
+CustomClippingRect {
+	id: root
+
+	required property bool horizontal
+	readonly property alias items: repeater
+	readonly property alias layout: sysGrid
+	required property GridLayout loader
+	readonly property int padding: Appearance.padding.small
+	required property Wrapper popouts
+	readonly property real shortSize: Config.bar.height
+	readonly property real size: horizontal ? sysGrid.implicitWidth + Appearance.padding.small : sysGrid.implicitHeight + Appearance.padding.small
+
+	bottomLeftRadius: horizontal ? Appearance.rounding.full : Appearance.rounding.smallest / 2
+	bottomRightRadius: Appearance.rounding.smallest / 2
+	color: DynamicColors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? shortSize : size
+	implicitWidth: horizontal ? size : shortSize
+	radius: Appearance.rounding.full
+	topRightRadius: horizontal ? Appearance.rounding.smallest / 2 : Appearance.rounding.full
+
+	GridLayout {
+		id: sysGrid
+
+		anchors.centerIn: parent
+		columns: root.horizontal ? -1 : 1
+		rowSpacing: -2
+
+		Repeater {
+			id: repeater
+
+			model: SystemTray.items
+
+			TrayItem {
+				id: trayItem
+
+				required property int index
+				required property SystemTrayItem modelData
+
+				implicitHeight: 34
+				implicitWidth: 34
+				ind: index
+				item: modelData
+				loader: root.loader
+				popouts: root.popouts
+			}
+		}
+	}
+}

Modules/SysTray/TrayItem.qml

@@ -12,10 +12,10 @@ Item {
 	id: root
 
 	property bool current: popouts.currentName.startsWith(`traymenu${ind}`) && popouts.hasCurrent
-	readonly property real dpr: Hypr.monitorFor(loader.screen).scale
+	readonly property real dpr: Hypr.monitorFor(loader?.screen).scale
 	required property int ind
 	required property SystemTrayItem item
-	required property RowLayout loader
+	required property GridLayout loader
 	required property Wrapper popouts
 
 	function resolveIcon(app: string, icon: string): string {

Modules/SysTray/TrayWidget.qml

@@ -8,12 +8,15 @@ import qs.Config
 import qs.Modules.SysTray.Widgets
 import qs.Modules
 
-RowLayout {
+GridLayout {
 	id: root
 
+	required property bool horizontal
 	readonly property alias items: repeater
-	required property RowLayout loader
+	required property GridLayout loader
 	required property Wrapper popouts
+	readonly property real shortSize: Config.bar.height + Appearance.padding.smallest * 2
+	readonly property real size: horizontal ? sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small : sysTray.implicitHeight + sysTrayMod.implicitHeight + Appearance.padding.small
 
 	function closestRowChild(row, x) {
 		let child = row.childAt(x, row.height / 2);
@@ -44,15 +47,20 @@ RowLayout {
 	function getHoveredSubItem(localX, localY) {
 		let modPos = mapToItem(sysTrayMod, localX, localY);
 		if (sysTrayMod.contains(Qt.point(modPos.x, modPos.y))) {
-			let modRowPos = sysTrayMod.mapToItem(sysModRow, modPos.x, modPos.y);
+			let modRowPos = sysTrayMod.mapToItem(sysIcons, modPos.x, modPos.y);
-			let child = closestRowChild(sysModRow, modRowPos.x);
+			let child = closestRowChild(sysIcons, modRowPos.x);
 			if (child) {
-				if (child.objectName === "audioWidget" && Config.bar.popouts.audio)
+				if (child.objectName === "audio" && Config.bar.popouts.audio)
 					return {
 						id: "audio",
 						item: child
 					};
-				if (child.objectName === "upowerWidget" && Config.bar.popouts.upower)
+				if (child.objectName === "microphone" && Config.bar.popouts.audio)
+					return {
+						id: "audio",
+						item: child
+					};
+				if (child.objectName === "upower" && Config.bar.popouts.upower)
 					return {
 						id: "upower",
 						item: child
@@ -75,9 +83,11 @@ RowLayout {
 		return null;
 	}
 
-	height: Config.bar.height + Appearance.padding.smallest * 2
+	columnSpacing: Appearance.padding.small
-	spacing: Appearance.padding.small
+	columns: horizontal ? -1 : 1
-	width: sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small
+	height: horizontal ? shortSize : size
+	rowSpacing: Appearance.padding.small
+	width: horizontal ? size : shortSize
 
 	CustomClippingRect {
 		id: sysTray
@@ -89,11 +99,18 @@ RowLayout {
 		radius: Appearance.rounding.full
 		topRightRadius: Appearance.rounding.smallest / 2
 
-		Row {
+		GridLayout {
 			id: sysRow
 
+			anchors.bottom: root.horizontal ? undefined : parent.bottom
 			anchors.centerIn: parent
-			spacing: 0
+			anchors.horizontalCenter: root.horizontal ? parent.horizontalCenter : undefined
+			anchors.left: root.horizontal ? undefined : parent.left
+			anchors.right: root.horizontal ? undefined : parent.right
+			anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+			columnSpacing: Appearance.spacing.small / 2
+			columns: root.horizontal ? -1 : 1
+			rowSpacing: Appearance.spacing.small / 2
 
 			Repeater {
 				id: repeater
@@ -120,36 +137,22 @@ RowLayout {
 	CustomClippingRect {
 		id: sysTrayMod
 
-		Layout.fillHeight: true
+		Layout.fillHeight: root.horizontal
+		Layout.fillWidth: !root.horizontal
 		bottomLeftRadius: Appearance.rounding.smallest / 2
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitWidth: sysModRow.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal
+		implicitHeight: root.horizontal ? sysIcons.implicitHeight : sysIcons.implicitHeight + Appearance.padding.smaller + Appearance.padding.normal
+		implicitWidth: root.horizontal ? sysIcons.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal : sysIcons.implicitWidth
 		radius: Appearance.rounding.full
 		topLeftRadius: Appearance.rounding.smallest / 2
 
-		RowLayout {
+		StatusIcons {
-			id: sysModRow
+			id: sysIcons
 
 			anchors.fill: parent
 			anchors.leftMargin: Appearance.padding.smaller
 			anchors.rightMargin: Appearance.padding.normal
-
+			horizontal: root.horizontal
-			AudioWidget {
-				Layout.fillHeight: true
-				Layout.rightMargin: hasContent ? Appearance.spacing.extraSmall / 2 : 0
-				objectName: "audioWidget"
-
-				Behavior on Layout.rightMargin {
-					Anim {
-						type: Anim.FastEffects
-					}
-				}
-			}
-
-			UPowerWidget {
-				Layout.fillHeight: true
-				objectName: "upowerWidget"
-			}
 		}
 	}
 }

Modules/SysTray/Widgets/AudioWidget.qml

@@ -7,72 +7,27 @@ import qs.Modules
 import qs.Config
 import qs.Components
 
-RowLayout {
+MaterialIcon {
-	id: root
+	id: speaker
 
-	property color barColor: DynamicColors.palette.m3primary
+	required property bool horizontal
-	readonly property bool hasContent: mic.visible || speaker.visible
-	property color textColor: DynamicColors.palette.m3onSurface
 
-	width: hasContent ? implicitWidth : 0
+	animate: true
+	color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+	fill: 1
+	font.pointSize: horizontal ? Appearance.font.size.larger : Appearance.font.size.large
+	text: Audio.muted ? "volume_off" : "volume_up"
 
-	MaterialIcon {
+	Behavior on Layout.maximumWidth {
-		id: mic
+		Anim {
-
-		readonly property bool shouldBeVisible: Config.bar.tray.showMicrophone
-
-		Layout.alignment: Qt.AlignVCenter
-		Layout.maximumWidth: shouldBeVisible ? implicitWidth : 0
-		animate: true
-		color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : root.textColor
-		fill: 1
-		font.pointSize: Appearance.font.size.larger
-		opacity: shouldBeVisible ? 1 : 0
-		scale: shouldBeVisible ? 1 : 0
-		text: Audio.sourceMuted ? "mic_off" : "mic"
-		visible: opacity > 0
-
-		Behavior on Layout.maximumWidth {
-			Anim {
-			}
-		}
-		Behavior on opacity {
-			Anim {
-			}
-		}
-		Behavior on scale {
-			Anim {
-			}
 		}
 	}
-
+	Behavior on opacity {
-	MaterialIcon {
+		Anim {
-		id: speaker
-
-		readonly property bool shouldBeVisible: Config.bar.tray.showAudio
-
-		Layout.alignment: Qt.AlignVCenter
-		Layout.maximumWidth: shouldBeVisible ? implicitWidth : 0
-		animate: true
-		color: Audio.muted ? DynamicColors.palette.m3error : root.textColor
-		fill: 1
-		font.pointSize: Appearance.font.size.larger
-		opacity: shouldBeVisible ? 1 : 0
-		scale: shouldBeVisible ? 1 : 0
-		text: Audio.muted ? "volume_off" : "volume_up"
-		visible: opacity > 0
-
-		Behavior on Layout.maximumWidth {
-			Anim {
-			}
 		}
-		Behavior on opacity {
+	}
-			Anim {
+	Behavior on scale {
-			}
+		Anim {
-		}
-		Behavior on scale {
-			Anim {
-			}
 		}
 	}
 }

Modules/SysTray/Widgets/MicWidget.qml

@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Io
+import Quickshell.Services.Pipewire
+import qs.Daemons
+import qs.Modules
+import qs.Config
+import qs.Components
+
+MaterialIcon {
+	id: mic
+
+	required property bool horizontal
+
+	animate: true
+	color: (Audio.sourceMuted ?? false) ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
+	fill: 1
+	font.pointSize: horizontal ? Appearance.font.size.larger : Appearance.font.size.large
+	text: Audio.sourceMuted ? "mic_off" : "mic"
+
+	Behavior on Layout.maximumWidth {
+		Anim {
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+}

Modules/SysTray/Widgets/UPowerWidget.qml

@@ -8,15 +8,10 @@ import qs.Helpers
 Item {
 	id: root
 
-	readonly property bool shouldBeActive: Config.bar.tray.showPower
+	required property bool horizontal
 
-	Layout.preferredHeight: shouldBeActive ? implicitHeight : 0
-	Layout.preferredWidth: shouldBeActive ? implicitWidth : 0
 	implicitHeight: Battery.isLaptop ? batteryIconLoader.item.implicitHeight : upowerIconLoader.item.implicitHeight
 	implicitWidth: Battery.isLaptop ? batteryIconLoader.item.implicitWidth : upowerIconLoader.item.implicitWidth
-	opacity: shouldBeActive ? 1 : 0
-	scale: shouldBeActive ? 1 : 0
-	visible: opacity > 0
 
 	Behavior on Layout.preferredHeight {
 		Anim {
@@ -130,6 +125,7 @@ Item {
 			Layout.alignment: Qt.AlignVCenter
 			animate: true
 			fill: 1
+			font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 			text: {
 				if (PowerProfiles.profile === PowerProfile.PowerSaver)
 					return "energy_savings_leaf";

Modules/Updates/UpdatesWidget.qml

@@ -9,27 +9,31 @@ CustomRect {
 	id: root
 
 	property int countUpdates: Updates.availableUpdates
+	required property bool horizontal
 	property color textColor: DynamicColors.palette.m3onSurface
 
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
+	implicitHeight: horizontal ? Config.bar.height : content.implicitHeight + Appearance.spacing.small * 2
-	implicitWidth: contentRow.implicitWidth + Appearance.spacing.small * 2
+	implicitWidth: horizontal ? content.implicitWidth + Appearance.spacing.small * 2 : Config.bar.height
 	radius: Appearance.rounding.full
 
-	RowLayout {
+	GridLayout {
-		id: contentRow
+		id: content
 
 		anchors.centerIn: parent
-		spacing: Appearance.spacing.small
+		columnSpacing: Appearance.spacing.small
+		columns: root.horizontal ? -1 : 1
 
 		MaterialIcon {
-			font.pointSize: Appearance.font.size.larger
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 			text: "package_2"
 		}
 
 		CustomText {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
 			color: root.textColor
-			font.pointSize: Appearance.font.size.normal
+			font.pointSize: root.horizontal ? Appearance.font.size.normal : Appearance.font.size.larger
 			text: root.countUpdates
 		}
 	}

Modules/WindowTitle.qml

@@ -9,22 +9,32 @@ Item {
 	id: root
 
 	required property var bar
-	property color colour: DynamicColors.palette.m3primary
+	property color color: DynamicColors.palette.m3primary
 	property Title current: text1
+	required property bool horizontal
 	// readonly property int maxWidth: 300
-	readonly property int maxWidth: {
+	readonly property int maxSize: {
-		const otherModules = bar.children.filter(c => c.enabled && c.id && c.item !== this && c.id !== "spacer");
+		const otherModules = bar.children.filter(c => c.enabled && c.entryId && c.item !== this && c.entryId !== "spacer");
-		const otherWidth = otherModules.reduce((acc, curr) => {
+		const otherSize = otherModules.reduce((acc, curr) => acc + (horizontal ? (curr.item?.nonAnimWidth ?? curr.width ?? 0) : (curr.item.nonAnimHeight ?? curr.height ?? 0)), 0);
-			return acc + (curr.item?.nonAnimWidth ?? curr.width ?? 0);
+		return horizontal ? bar.width - otherSize - bar.spacing * (bar.children.length - 1) - bar.vPadding * 2 : bar.height - otherSize - bar.vPadding * (bar.children.length - 1) - bar.vPadding * 4;
-		}, 0);
-		return bar.width - otherWidth - bar.spacing * (bar.children.length - 1) - bar.vPadding * 2;
 	}
 
+	anchors.centerIn: parent
 	clip: true
-	implicitHeight: current.implicitHeight
+	implicitHeight: horizontal ? current.implicitHeight : current.implicitWidth + current.anchors.topMargin
-	implicitWidth: Math.min(current.implicitWidth, root.maxWidth)
+	implicitWidth: horizontal ? Math.min(current.implicitWidth, root.maxSize) : current.implicitHeight + current.anchors.topMargin
 
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+			duration: MaterialEasing.expressiveEffectsTime
+			easing.bezierCurve: MaterialEasing.expressiveEffects
+		}
+	}
 	Behavior on implicitWidth {
+		enabled: root.horizontal
+
 		Anim {
 			duration: MaterialEasing.expressiveEffectsTime
 			easing.bezierCurve: MaterialEasing.expressiveEffects
@@ -33,19 +43,17 @@ Item {
 
 	Title {
 		id: text1
-
 	}
 
 	Title {
 		id: text2
-
 	}
 
 	TextMetrics {
 		id: metrics
 
 		elide: Qt.ElideRight
-		elideWidth: root.maxWidth
+		elideWidth: root.maxSize - (root.horizontal ? root.current.anchors.leftMargin : 0)
 		font.family: "Rubik"
 		font.pointSize: Appearance.font.size.normal
 		text: Hypr.activeToplevel?.title ?? qsTr("Desktop")
@@ -61,18 +69,32 @@ Item {
 	component Title: CustomText {
 		id: text
 
-		anchors.leftMargin: 7
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
-		anchors.verticalCenter: parent.verticalCenter
+		anchors.left: root.horizontal ? parent.left : undefined
-		color: root.colour
+		anchors.leftMargin: root.horizontal ? Appearance.spacing.small : 0
+		anchors.top: root.horizontal ? undefined : parent.top
+		anchors.topMargin: root.horizontal ? 0 : Appearance.spacing.small
+		anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+		color: root.color
 		font.family: metrics.font.family
 		font.pointSize: metrics.font.pointSize
-		height: implicitHeight
+		height: root.horizontal ? implicitHeight : implicitWidth
 		opacity: root.current === this ? 1 : 0
-		width: implicitWidth
+		width: root.horizontal ? implicitWidth : implicitHeight
 
 		Behavior on opacity {
 			Anim {
 			}
 		}
+		transform: [
+			Translate {
+				x: !root.horizontal ? -text.implicitWidth + text.implicitHeight : 0
+			},
+			Rotation {
+				angle: root.horizontal ? 0 : 270
+				origin.x: text.implicitHeight / 2
+				origin.y: text.implicitHeight / 2
+			}
+		]
 	}
 }

Modules/Workspaces.qml

@@ -13,41 +13,57 @@ Item {
 
 	property real activeWorkspaceMargin: Math.ceil(Appearance.padding.small / 2)
 	readonly property int effectiveActiveWorkspaceId: monitor?.activeWorkspace?.id ?? 1
+	required property bool horizontal
 	readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen)
 	required property ShellScreen screen
-	property int workspaceButtonWidth: bgRect.implicitHeight - root.activeWorkspaceMargin * 2
+	readonly property real shortSize: Math.max(Config.bar.height, 24)
+	readonly property real size: (workspaceButtonWidth * workspacesShown) + activeWorkspaceMargin * 2
+	property int workspaceButtonWidth: (horizontal ? bgRect.implicitHeight : bgRect.implicitWidth) - root.activeWorkspaceMargin * 2
 	property int workspaceIndexInGroup: (effectiveActiveWorkspaceId - 1) % root.workspacesShown
 	readonly property list<var> workspaces: Hyprland.workspaces.values.filter(w => w.monitor === root.monitor)
 	readonly property int workspacesShown: workspaces.length
 
-	height: implicitHeight
+	implicitHeight: horizontal ? shortSize : size
-	implicitHeight: Config.bar.height + Appearance.padding.smaller * 2
+	implicitWidth: horizontal ? size : shortSize
-	implicitWidth: (root.workspaceButtonWidth * root.workspacesShown) + root.activeWorkspaceMargin * 2
 
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+		}
+	}
 	Behavior on implicitWidth {
+		enabled: root.horizontal
+
 		Anim {
 		}
 	}
 
 	CustomRect {
+		// qmllint disable Quick.anchor-combinations
 		id: bgRect
 
-		anchors.left: parent.left
+		anchors.bottom: root.horizontal ? undefined : parent.bottom
-		anchors.right: parent.right
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
-		anchors.verticalCenter: parent.verticalCenter
+		anchors.left: root.horizontal ? parent.left : undefined
+		anchors.right: root.horizontal ? parent.right : undefined
+		anchors.top: root.horizontal ? undefined : parent.top
+		anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitHeight: root.implicitHeight - ((Appearance.padding.small - 1) * 2)
+		implicitHeight: root.horizontal ? root.implicitHeight : 0
+		implicitWidth: root.horizontal ? 0 : root.implicitWidth
 		radius: height / 2
 
+		// qmllint enable Quick.anchor-combinations
 		Grid {
 			id: grid
 
 			anchors.fill: parent
 			anchors.margins: root.activeWorkspaceMargin
 			columnSpacing: 0
-			columns: root.workspacesShown
+			columns: root.horizontal ? root.workspacesShown : 1
 			rowSpacing: 0
-			rows: 1
+			rows: root.horizontal ? 1 : root.workspacesShown
 
 			Repeater {
 				model: root.workspaces
@@ -93,13 +109,15 @@ Item {
 			property real indicatorPosition: Math.min(idxPair.idx1, idxPair.idx2) * root.workspaceButtonWidth + root.activeWorkspaceMargin
 			property real indicatorThickness: root.workspaceButtonWidth
 
-			anchors.verticalCenter: parent.verticalCenter
+			anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+			anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
 			clip: true
 			color: DynamicColors.palette.m3primary
-			implicitHeight: indicatorThickness
+			implicitHeight: root.horizontal ? indicatorThickness : indicatorLength
-			implicitWidth: indicatorLength
+			implicitWidth: root.horizontal ? indicatorLength : indicatorThickness
 			radius: Appearance.rounding.full
-			x: indicatorPosition
+			x: root.horizontal ? indicatorPosition : 0
+			y: root.horizontal ? 0 : indicatorPosition
 
 			AnimatedTabIndexPair {
 				id: idxPair
@@ -113,7 +131,8 @@ Item {
 				implicitWidth: grid.width
 				source: grid
 				sourceColor: DynamicColors.palette.m3onSurface
-				x: -indicator.x + 3
+				x: root.horizontal ? -indicator.x + 3 : 0
+				y: root.horizontal ? 0 : -indicator.y + 3
 			}
 		}
 	}

Paths/Paths.qml

@@ -17,6 +17,7 @@ Singleton {
 	readonly property string notifimagecache: `${imagecache}/notifs`
 	readonly property string pictures: Quickshell.env("XDG_PICTURES_DIR") || `${home}/Pictures`
 	readonly property string recsdir: Quickshell.env("ZSHELL_RECORDINGS_DIR") || `${videos}/Recordings`
+	readonly property string screenshots: Quickshell.env("ZSHELL_SCREENSHOTS_DIR") || `${home}/Pictures/Screenshots`
 	readonly property string state: `${Quickshell.env("XDG_STATE_HOME") || `${home}/.local/state`}/zshell`
 	readonly property string videos: Quickshell.env("XDG_VIDEOS_DIR") || `${home}/Videos`
 	readonly property string wallsdir: Quickshell.env("ZSHELL_WALLPAPERS_DIR") || absolutePath(Config.general.wallpaperPath)

Plugins/ZShell/Internal/stroke.hpp

@@ -14,6 +14,7 @@ struct Stroke {
 	qreal width;
 	int groupId = -1;
 	bool isSinglePoint = false;
+	bool isPolyline = false;
 };
 
 }; // namespace ZShell::internal

Plugins/ZShell/Internal/strokecanvasitem.cpp

@@ -25,7 +25,8 @@ static bool shouldAddPoint(
 	return QPointF::dotProduct(delta, delta) >= minDistance * minDistance;
 }
 
-static QCanvasPath buildStrokePath(const QVector<QPointF>& points, qreal width) {
+static QCanvasPath buildStrokePath(
+	const QVector<QPointF>& points, qreal width, bool polyline) {
 	QCanvasPath path;
 
 	if (points.size() == 1) {
@@ -33,6 +34,13 @@ static QCanvasPath buildStrokePath(const QVector<QPointF>& points, qreal width)
 		return path;
 	}
 
+	if (polyline) {
+		path.moveTo(points[0]);
+		for (int i = 1; i < points.size(); i++)
+			path.lineTo(points[i]);
+		return path;
+	}
+
 	auto catmullToBezier = [](const QPointF& p0,
 							  const QPointF& p1,
 							  const QPointF& p2,
@@ -61,6 +69,16 @@ static QCanvasPath buildStrokePath(const QVector<QPointF>& points, qreal width)
 	return path;
 }
 
+void StrokeCanvasItem::undoLastGroup() {
+	if (m_strokes.isEmpty()) return;
+	const int lastGroup = m_strokes.last().groupId;
+	for (int i = m_strokes.size() - 1;
+		 i >= 0 && m_strokes[i].groupId == lastGroup;
+		 --i)
+		m_strokes.remove(i);
+	update();
+}
+
 void StrokeCanvasItem::setPenColor(const QColor& color) {
 	if (m_penColor == color) return;
 
@@ -121,13 +139,14 @@ void StrokeCanvasItem::setPenWidth(qreal width) {
 	emit penWidthChanged();
 }
 
-void StrokeCanvasItem::beginStroke(qreal x, qreal y) {
+void StrokeCanvasItem::beginStroke(qreal x, qreal y, bool polyline) {
 	m_isDrawing = true;
 	m_currentStroke.points.clear();
 	m_currentStroke.points.append({x, y});
 
 	m_currentStroke.color = m_penColor;
 	m_currentStroke.width = m_penWidth;
+	m_currentStroke.isPolyline = polyline;
 
 	update();
 }
@@ -135,6 +154,12 @@ void StrokeCanvasItem::beginStroke(qreal x, qreal y) {
 void StrokeCanvasItem::appendPoint(qreal x, qreal y) {
 	const QPointF incoming{x, y};
 
+	if (m_currentStroke.isPolyline) {
+		m_currentStroke.points.append(incoming);
+		update();
+		return;
+	}
+
 	if (!shouldAddPoint(m_currentStroke.points, incoming, 2.0)) return;
 
 	QPointF smoothed;
@@ -166,8 +191,10 @@ void StrokeCanvasItem::endStroke() {
 	if (m_currentStroke.points.isEmpty()) return;
 
 	m_currentStroke.isSinglePoint = (m_currentStroke.points.size() == 1);
-	m_currentStroke.path =
+	m_currentStroke.path = buildStrokePath(
-		buildStrokePath(m_currentStroke.points, m_currentStroke.width);
+		m_currentStroke.points,
+		m_currentStroke.width,
+		m_currentStroke.isPolyline);
 	m_currentStroke.groupId = m_nextGroupId++;
 	m_currentStroke.points.clear();
 	m_strokes.append(m_currentStroke);

Plugins/ZShell/Internal/strokecanvasitem.hpp

@@ -39,6 +39,7 @@ class StrokeCanvasItem : public QCanvasPainterItem {
 
 	Q_INVOKABLE void showHover(qreal x, qreal y);
 	Q_INVOKABLE void hideHover();
+	Q_INVOKABLE void undoLastGroup();
 
 	[[nodiscard]] QColor penColor() const { return m_penColor; }
 	[[nodiscard]] qreal penWidth() const { return m_penWidth; }
@@ -48,7 +49,7 @@ class StrokeCanvasItem : public QCanvasPainterItem {
 
 	Q_INVOKABLE void clear();
 
-	Q_INVOKABLE void beginStroke(qreal x, qreal y);
+	Q_INVOKABLE void beginStroke(qreal x, qreal y, bool polyline = false);
 	Q_INVOKABLE void appendPoint(qreal x, qreal y);
 	Q_INVOKABLE void endStroke();
 

Plugins/ZShell/Internal/strokecanvasrenderer.cpp

@@ -8,7 +8,8 @@ static void drawStroke(
 	QCanvasPainter* painter,
 	const QVector<QPointF>& points,
 	const QColor& color,
-	qreal width) {
+	qreal width,
+	bool polyline) {
 	if (points.isEmpty()) return;
 
 	painter->setStrokeStyle(color);
@@ -17,6 +18,15 @@ static void drawStroke(
 	painter->setLineCap(QCanvasPainter::LineCap::Round);
 	painter->setLineJoin(QCanvasPainter::LineJoin::Round);
 
+	if (polyline) {
+		painter->beginPath();
+		painter->moveTo(points[0]);
+		for (int i = 1; i < points.size(); i++)
+			painter->lineTo(points[i]);
+		painter->stroke();
+		return;
+	}
+
 	if (points.size() == 1) {
 		painter->beginPath();
 		painter->circle(points.front(), width * 0.5);
@@ -180,7 +190,8 @@ void StrokeCanvasRenderer::paint(QCanvasPainter* painter) {
 		painter,
 		m_currentStroke.points,
 		m_currentStroke.color,
-		m_currentStroke.width);
+		m_currentStroke.width,
+		m_currentStroke.isPolyline);
 
 	if (m_hoverVisible)
 		drawHoverCursor(

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <img src="/images/shell.png" alt="ZShell screenshot">
+    <img src="./assets/logo.svg" alt="ZShell logo" width="480">
 </div>
 
 # ZShell
@@ -8,6 +8,10 @@ ZShell is a Hyprland-focused desktop shell built with Quickshell + Qt6/QML.
 
 It includes a configurable top bar, launcher, notifications daemon + sidebar, wallpaper and dynamic color pipeline, lock screen, OSD widgets, dashboard, dock, desktop icons, and a separate greetd-compatible greeter.
 
+<div align="center">
+    <img src="/images/shell.png" alt="ZShell screenshot">
+</div>
+
 ## Highlights
 
 - Multi-window shell layout driven by `Drawers/Windows.qml` and panel/interactions wrappers
@@ -218,14 +222,14 @@ Action-driven flows (`>` prefix by default) include calculator, wallpaper picker
 
 ### `shell` — daemon management
 
-| Command | Description |
+| Command   | Description                                                      |
-|---------|-------------|
+| --------- | ---------------------------------------------------------------- |
-| `start` | Start the shell daemon (pass `--no-daemon` to run in foreground) |
+| `start`   | Start the shell daemon (pass `--no-daemon` to run in foreground) |
-| `kill`  | Kill the running shell daemon |
+| `kill`    | Kill the running shell daemon                                    |
-| `restart` | Kill then restart the daemon |
+| `restart` | Kill then restart the daemon                                     |
-| `lock`  | Lock the session via IPC |
+| `lock`    | Lock the session via IPC                                         |
-| `show`  | Show the shell window via IPC |
+| `show`    | Show the shell window via IPC                                    |
-| `log`   | Print daemon logs |
+| `log`     | Print daemon logs                                                |
 
 ### `scheme` — color scheme generation
 

assets/logo.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="370.60901"
+   height="370.60901"
+   viewBox="0 0 98.056968 98.056968"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:export-filename="logo.svg"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     showborder="false"><inkscape:page
+       x="0"
+       y="0"
+       width="98.056969"
+       height="98.056969"
+       id="page2"
+       margin="0"
+       bleed="0" /></sodipodi:namedview><defs
+     id="defs1"><style
+       id="theme-style">
+      .grad-stop-1 { stop-color: #9898ff; stop-opacity: 1; }
+      .grad-stop-2 { stop-color: #ff9ac3; stop-opacity: 1; }
+      @media (prefers-color-scheme: light) {
+        .grad-stop-1 { stop-color: #000080; stop-opacity: 1; }
+        .grad-stop-2 { stop-color: #800037; stop-opacity: 1; }
+      }
+    </style><linearGradient
+       id="linearGradient7"
+       inkscape:collect="always"><stop
+         class="grad-stop-1"
+         offset="0.00635612"
+         id="stop7" /><stop
+         class="grad-stop-2"
+         offset="1"
+         id="stop8" /></linearGradient><linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient7"
+       id="linearGradient8"
+       x1="52.200813"
+       y1="75.440575"
+       x2="150.25795"
+       y2="155.85995"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-8.4478442e-5,8.8187943)" /></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-52.200813,-75.440577)"><path
+       id="path2"
+       style="fill:url(#linearGradient8);stroke-width:0.264583"
+       d="m 104.18255,84.28543 c -1.39501,-0.04986 -2.77607,-0.02697 -4.1305,0.05839 -9.029544,0.569111 -16.873893,3.910515 -19.747638,6.917924 -4.597996,4.811856 -9.516732,6.095236 -9.516732,6.095236 -4.063345,1.817811 -10.372493,1.390096 -10.372493,1.390096 -1.283162,6.736594 -5.560032,10.051544 -7.377844,12.724804 -1.817812,2.67325 -0.106971,4.38371 -0.106971,4.38371 7.805897,9.40985 5.132504,15.93288 5.132504,15.93288 3.421763,5.13265 5.132503,8.87491 5.132503,8.87491 0.855441,17.21575 24.059513,19.14095 24.059513,19.14095 8.019764,4.38413 21.813738,6.09496 33.041398,3.95635 11.22766,-2.1386 22.13426,-8.66133 25.44909,-12.40389 3.31484,-3.74255 4.70506,-4.70528 4.4912,-7.80625 -0.21386,-3.10098 -8.34057,-6.73654 -8.34057,-6.73654 4.70492,-26.73253 -10.5857,-43.627569 -25.12819,-49.829514 -4.09007,-1.744297 -8.40025,-2.549484 -12.58527,-2.69906 z m 0.0522,6.437333 c 2.11073,-0.04742 4.33196,0.144541 6.65179,0.645956 18.55865,4.011316 31.22355,22.883281 24.70082,47.477201 0,0 0.42763,1.06939 6.62957,4.38423 0,0 -6.09519,11.86918 -29.40596,14.97015 0,0 -16.039134,2.13849 -27.908379,-8.55452 0,0 -4.491338,2.24573 -10.372493,0.53485 0,0 6.094988,-3.3149 4.063317,-8.44755 -2.031672,-5.13264 -10.051071,-6.84383 -11.441162,-7.69927 -1.390091,-0.85544 -2.673221,-2.24534 -2.673221,-2.24534 0,0 8.12664,-1.49702 9.516731,-8.23361 1.390092,-6.7366 -2.994298,-11.01376 -4.812109,-12.29692 -1.817812,-1.28317 -3.421899,-2.5665 -4.491199,-4.59816 0,0 6.415801,-1.069 9.623702,-3.31453 0,0 2.566413,-0.42817 2.994133,9.83712 0,0 3.40241,0.98386 2.780192,-10.05106 0,0 9.369134,-12.076644 24.144268,-12.408547 z m 1.44952,11.296987 c -7.539424,-0.42396 -14.807124,3.94504 -19.819474,11.69747 -8.019756,12.40389 -4.597866,33.04123 15.505004,39.45703 20.10286,6.41581 34.21755,-8.76794 34.21755,-8.76794 0,0 -6.20221,-5.34688 -7.5923,-16.14682 -1.39009,-10.79994 -8.87492,-19.99568 -8.87492,-19.99568 -4.29057,-4.00988 -8.91222,-5.98969 -13.43587,-6.24406 z m 0.43874,3.91759 c 5.90958,0.2395 10.57783,4.70548 11.60704,7.352 1.49702,3.84948 2.88726,10.26522 -3.74241,13.58005 1e-5,-1.81781 1.06895,-2.13837 -0.96273,-4.91856 1.81781,-1.17623 2.99392,-3.10096 1.06918,-5.45342 -1.71088,0.53465 -0.85529,1.38993 -3.7424,-0.42788 -2.88711,-1.81781 -0.85514,-3.10083 -3.31453,-5.1325 0,0 -1.06951,-0.42772 -1.92495,0 -0.85544,0.42772 0.96245,2.88717 -2.56625,4.27726 -3.528694,1.39009 -2.673344,-0.21375 -2.994134,-2.45928 0,0 -4.49095,4.27695 -1.06919,10.37197 3.421764,6.09501 9.730474,-0.10662 7.805734,-1.92443 -1.92474,-1.81782 -2.13858,-2.1386 -4.06332,-1.39009 0,0 0.21415,-3.7426 4.91908,-1.49707 4.70492,2.24553 3.84939,13.90048 -5.77432,12.61732 -9.623714,-1.28316 -13.366163,-15.07666 -3.849384,-22.13405 2.973994,-2.20543 5.916404,-2.97018 8.602584,-2.86132 z m -44.322368,1.76475 c 0.177759,-0.002 0.290475,0.19502 0.325562,0.66869 0.21386,2.88712 7.806121,5.98809 7.485331,12.40389 -0.32079,6.41581 -6.309176,5.77433 -6.309176,5.77433 0.962372,-5.34651 -7.591784,-13.36663 -7.591784,-13.36663 2.592219,-0.26816 5.184343,-5.46781 6.090067,-5.48028 z m 60.847968,11.36158 c 0,0 3.10099,17.10864 5.56039,18.81952 0,0 -4.7046,-3.20747 -7.37785,-1.60352 -2.67325,1.60395 -2.67322,5.23955 -2.67322,6.84351 0,0 -3.31509,-4.27761 -7.5923,-2.4598 -4.2772,1.81781 -11.013604,-2.13842 -11.869044,-5.02553 0,0 9.623444,2.45961 14.435294,-3.52847 0,0 8.98208,-0.85568 9.51673,-13.04571 z" /></g></svg>

network-dev/wifi-sim.sh

@@ -1,310 +0,0 @@
-#!/bin/bash
-# =============================================================================
-# wifi-sim.sh — Virtual WiFi environment for development & testing
-#
-# Creates 3 dummy networks using mac80211_hwsim + hostapd:
-#   - FreeWifi       (open,  strong signal, ch 1)
-#   - OfficeNetwork  (open,  medium signal, ch 6)
-#   - HomeNetwork    (WPA2,  weak signal,   ch 11)
-#
-# Usage:
-#   sudo ./wifi-sim.sh start
-#   sudo ./wifi-sim.sh stop
-#   sudo ./wifi-sim.sh status
-# =============================================================================
-
-set -euo pipefail
-
-# --- User configuration ------------------------------------------------------
-
-SSID_STRONG="FreeWifi"      # Open network, strong signal
-SSID_MEDIUM="OfficeNetwork" # Open network, medium signal
-SSID_SECURE="HomeNetwork"   # WPA2 network, weak signal
-WIFI_PASSWORD="testpassword123"
-
-# TX power levels in mBm (millibel-milliwatts). Higher = stronger signal.
-# These affect the RSSI reported to scanning clients.
-TXPOWER_STRONG=3000 # 30 dBm
-TXPOWER_MEDIUM=1500 # 15 dBm
-TXPOWER_WEAK=100    #  1 dBm
-
-RUN_DIR="/tmp/wifi-sim"
-
-# --- Helpers -----------------------------------------------------------------
-
-die() {
-	echo "ERROR: $*" >&2
-	exit 1
-}
-info() { echo "[*] $*"; }
-ok() { echo "[+] $*"; }
-
-require_cmds() {
-	local missing=()
-	for cmd in "$@"; do
-		command -v "$cmd" &>/dev/null || missing+=("$cmd")
-	done
-	if [[ ${#missing[@]} -gt 0 ]]; then
-		die "Missing required tools: ${missing[*]}
-       Install with: sudo apt install hostapd wpasupplicant iw"
-	fi
-}
-
-get_phy_for_iface() {
-	iw dev "$1" info | awk '/wiphy/{print "phy"$2}'
-}
-
-# --- Start -------------------------------------------------------------------
-
-cmd_start() {
-	[[ $EUID -ne 0 ]] && die "Please run as root:  sudo $0 start"
-	require_cmds hostapd iw ip
-
-	if [[ -d "$RUN_DIR" && -f "$RUN_DIR/interfaces" ]]; then
-		die "wifi-sim appears to already be running. Run 'sudo $0 stop' first."
-	fi
-	mkdir -p "$RUN_DIR"
-
-	# Snapshot existing wlan interfaces so we can identify the new ones
-	info "Snapshotting existing interfaces..."
-	BEFORE=($(iw dev 2>/dev/null | awk '/Interface/{print $2}' | grep -v '^hwsim' || true))
-
-	# Load the kernel module with 4 radios (3 APs + 1 client)
-	info "Loading mac80211_hwsim (4 radios)..."
-	if lsmod | grep -q mac80211_hwsim; then
-		die "mac80211_hwsim is already loaded. Run 'sudo $0 stop' or 'sudo rmmod mac80211_hwsim' first."
-	fi
-	modprobe mac80211_hwsim radios=4
-	sleep 1 # Give the kernel a moment to register all interfaces
-
-	# Find the interfaces created by our modprobe
-	AFTER=($(iw dev 2>/dev/null | awk '/Interface/{print $2}' | grep -v '^hwsim'))
-	NEW_IFACES=()
-	for iface in "${AFTER[@]}"; do
-		[[ ! " ${BEFORE[*]:-} " =~ " $iface " ]] && NEW_IFACES+=("$iface")
-	done
-
-	if [[ ${#NEW_IFACES[@]} -lt 4 ]]; then
-		rmmod mac80211_hwsim 2>/dev/null || true
-		die "Expected 4 new wlan interfaces, found ${#NEW_IFACES[@]}. Check 'dmesg' for errors."
-	fi
-
-	AP1="${NEW_IFACES[0]}"    # Will host SSID_STRONG
-	AP2="${NEW_IFACES[1]}"    # Will host SSID_MEDIUM
-	AP3="${NEW_IFACES[2]}"    # Will host SSID_SECURE
-	CLIENT="${NEW_IFACES[3]}" # Client-side interface for your code to use
-
-	info "Interfaces assigned: AP1=$AP1  AP2=$AP2  AP3=$AP3  Client=$CLIENT"
-	echo "$AP1 $AP2 $AP3 $CLIENT" >"$RUN_DIR/interfaces"
-
-	# Prevent NetworkManager from fighting us over these interfaces
-	if command -v nmcli &>/dev/null && nmcli general status &>/dev/null 2>&1; then
-		info "Marking interfaces as unmanaged in NetworkManager..."
-		for iface in "$AP1" "$AP2" "$AP3"; do
-			nmcli device set "$iface" managed no 2>/dev/null || true
-		done
-
-		nmcli device set "$CLIENT" managed yes
-	fi
-
-	# Set TX power on each physical radio to simulate signal strength differences.
-	# mac80211_hwsim factors TX power into the RSSI reported to scanning clients.
-	# Note: for precise RSSI control, consider 'wmediumd' (a wireless medium daemon).
-	info "Setting TX power levels for signal strength simulation..."
-	PHY1=$(get_phy_for_iface "$AP1")
-	PHY2=$(get_phy_for_iface "$AP2")
-	PHY3=$(get_phy_for_iface "$AP3")
-
-	iw phy "$PHY1" set txpower fixed $TXPOWER_STRONG
-	iw phy "$PHY2" set txpower fixed $TXPOWER_MEDIUM
-	iw phy "$PHY3" set txpower fixed $TXPOWER_WEAK
-
-	# --- hostapd config: AP1 (open, strong, channel 1) -----------------------
-	cat >"$RUN_DIR/ap1.conf" <<EOF
-interface=$AP1
-driver=nl80211
-ssid=$SSID_STRONG
-hw_mode=g
-channel=1
-auth_algs=1
-wmm_enabled=0
-ignore_broadcast_ssid=0
-EOF
-
-	# --- hostapd config: AP2 (open, medium, channel 6) -----------------------
-	cat >"$RUN_DIR/ap2.conf" <<EOF
-interface=$AP2
-driver=nl80211
-ssid=$SSID_MEDIUM
-hw_mode=g
-channel=6
-auth_algs=1
-wmm_enabled=0
-ignore_broadcast_ssid=0
-EOF
-
-	# --- hostapd config: AP3 (WPA2, weak, channel 11) ------------------------
-	cat >"$RUN_DIR/ap3.conf" <<EOF
-interface=$AP3
-driver=nl80211
-ssid=$SSID_SECURE
-hw_mode=g
-channel=11
-auth_algs=1
-wpa=2
-wpa_passphrase=$WIFI_PASSWORD
-wpa_key_mgmt=WPA-PSK
-rsn_pairwise=CCMP
-wmm_enabled=0
-ignore_broadcast_ssid=0
-EOF
-
-	# Start a hostapd instance for each AP
-	info "Starting hostapd instances..."
-	hostapd -B -P "$RUN_DIR/ap1.pid" "$RUN_DIR/ap1.conf" \
-		>"$RUN_DIR/ap1.log" 2>&1 ||
-		{
-			cat "$RUN_DIR/ap1.log"
-			die "hostapd failed for AP1. See log above."
-		}
-
-	hostapd -B -P "$RUN_DIR/ap2.pid" "$RUN_DIR/ap2.conf" \
-		>"$RUN_DIR/ap2.log" 2>&1 ||
-		{
-			cat "$RUN_DIR/ap2.log"
-			die "hostapd failed for AP2. See log above."
-		}
-
-	hostapd -B -P "$RUN_DIR/ap3.pid" "$RUN_DIR/ap3.conf" \
-		>"$RUN_DIR/ap3.log" 2>&1 ||
-		{
-			cat "$RUN_DIR/ap3.log"
-			die "hostapd failed for AP3. See log above."
-		}
-
-	# Bring up the client interface so it's ready to scan/connect
-	ip link set "$CLIENT" up
-
-	# --- Summary -------------------------------------------------------------
-	ok "Virtual WiFi environment is up!"
-	echo ""
-	echo "  Networks:"
-	echo "  ┌──────────────────┬──────────┬────────┬─────────────┐"
-	echo "  │ SSID             │ Security │ Signal │ Interface   │"
-	echo "  ├──────────────────┼──────────┼────────┼─────────────┤"
-	printf "  │ %-16s │ %-8s │ %-6s │ %-11s │\n" "$SSID_STRONG" "Open" "Strong" "$AP1"
-	printf "  │ %-16s │ %-8s │ %-6s │ %-11s │\n" "$SSID_MEDIUM" "Open" "Medium" "$AP2"
-	printf "  │ %-16s │ %-8s │ %-6s │ %-11s │\n" "$SSID_SECURE" "WPA2" "Weak" "$AP3"
-	echo "  └──────────────────┴──────────┴────────┴─────────────┘"
-	echo ""
-	echo "  WPA2 password : $WIFI_PASSWORD"
-	echo "  Client iface  : $CLIENT  (use this in your code)"
-	echo ""
-	echo "  Useful commands:"
-	echo "    Scan for networks : sudo iw dev $CLIENT scan | grep -E 'SSID|signal'"
-	echo "    Connect (open)    : sudo iw dev $CLIENT connect \"$SSID_STRONG\""
-	echo "    Connect (WPA2)    : sudo wpa_supplicant -Dnl80211 -i$CLIENT \\"
-	echo "                          -c <(wpa_passphrase \"$SSID_SECURE\" \"$WIFI_PASSWORD\")"
-	echo "    Stop simulation   : sudo $0 stop"
-	echo ""
-	echo "  Logs: $RUN_DIR/ap{1,2,3}.log"
-}
-
-# --- Stop --------------------------------------------------------------------
-
-cmd_stop() {
-	[[ $EUID -ne 0 ]] && die "Please run as root:  sudo $0 stop"
-
-	info "Stopping virtual WiFi environment..."
-	local had_something=false
-
-	# Kill hostapd processes via PID files
-	for ap in ap1 ap2 ap3; do
-		PID_FILE="$RUN_DIR/$ap.pid"
-		if [[ -f "$PID_FILE" ]]; then
-			PID=$(cat "$PID_FILE")
-			if kill "$PID" 2>/dev/null; then
-				info "Stopped hostapd for $ap (PID $PID)"
-			fi
-			rm -f "$PID_FILE"
-			had_something=true
-		fi
-	done
-
-	# Re-enable NetworkManager management for these interfaces
-	if [[ -f "$RUN_DIR/interfaces" ]]; then
-		read -r AP1 AP2 AP3 CLIENT <"$RUN_DIR/interfaces"
-		if command -v nmcli &>/dev/null; then
-			for iface in "$AP1" "$AP2" "$AP3" "$CLIENT"; do
-				nmcli device set "$iface" managed yes 2>/dev/null || true
-			done
-		fi
-	fi
-
-	# Unload the kernel module (also destroys all virtual interfaces)
-	if lsmod | grep -q mac80211_hwsim; then
-		info "Unloading mac80211_hwsim..."
-		rmmod mac80211_hwsim && had_something=true
-	fi
-
-	# Clean up runtime directory
-	rm -rf "$RUN_DIR"
-
-	if $had_something; then
-		ok "Virtual WiFi environment stopped."
-	else
-		echo "Nothing was running."
-	fi
-}
-
-# --- Status ------------------------------------------------------------------
-
-cmd_status() {
-	if [[ ! -f "$RUN_DIR/interfaces" ]]; then
-		echo "wifi-sim is not running."
-		return
-	fi
-
-	read -r AP1 AP2 AP3 CLIENT <"$RUN_DIR/interfaces"
-	echo "wifi-sim is running."
-	echo ""
-	echo "  Interfaces:"
-	for iface in "$AP1" "$AP2" "$AP3" "$CLIENT"; do
-		STATE=$(ip link show "$iface" 2>/dev/null | awk '/state/{print $9}' || echo "unknown")
-		CHANNEL=$(iw dev "$iface" info 2>/dev/null | awk '/channel/{print $2}' || echo "?")
-		printf "  %-10s  state=%-4s  channel=%s\n" "$iface" "$STATE" "$CHANNEL"
-	done
-	echo ""
-	echo "  Processes:"
-	for ap in ap1 ap2 ap3; do
-		PID_FILE="$RUN_DIR/$ap.pid"
-		if [[ -f "$PID_FILE" ]]; then
-			PID=$(cat "$PID_FILE")
-			if kill -0 "$PID" 2>/dev/null; then
-				echo "  hostapd ($ap)  PID=$PID  running"
-			else
-				echo "  hostapd ($ap)  PID=$PID  DEAD (check $RUN_DIR/$ap.log)"
-			fi
-		fi
-	done
-}
-
-# --- Entry point -------------------------------------------------------------
-
-case "${1:-help}" in
-start) cmd_start ;;
-stop) cmd_stop ;;
-status) cmd_status ;;
-*)
-	echo "Usage: sudo $0 {start|stop|status}"
-	echo ""
-	echo "  start   Load mac80211_hwsim and bring up 3 virtual APs"
-	echo "  stop    Tear down all virtual interfaces and unload module"
-	echo "  status  Show current state of interfaces and processes"
-	echo ""
-	echo "Networks created on start:"
-	printf "  %-16s  open,  strong signal\n" "$SSID_STRONG"
-	printf "  %-16s  open,  medium signal\n" "$SSID_MEDIUM"
-	printf "  %-16s  WPA2,  weak signal   (password: $WIFI_PASSWORD)\n" "$SSID_SECURE"
-	;;
-esac

pyproject.toml

@@ -54,6 +54,10 @@ select = [
 	"RUF",
 ]
 
+[tool.basedpyright]
+typeCheckingMode = "basic"
+include = ["cli/src"]
+
 [tool.pytest.ini_options]
 testpaths = ["cli/tests"]
 pythonpath = ["cli/src"]