better height/width for bar

left-bar working, bottom bar semi-broken
initial commit for repositioning bar, currently broken
2026-08-14 18:03:56 +02:00 · 2026-08-14 16:31:52 +02:00 · 2026-08-12 20:15:55 +02:00
31 changed files with 581 additions and 215 deletions
@@ -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

@@ -61,6 +61,7 @@ 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 {
@@ -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
 		}
 	}
 }
@@ -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`);
+	}
+}
@@ -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"
@@ -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);
-	}
-
-	function onWheel(event: WheelEvent): void {
-		if (event.x < bar.implicitWidth) {
-			bar.handleWheel(event.y, event.angleDelta);
-		}
+		const panelHeight = panel.height * (1 - (panel.offsetScale ?? 0));
+		return y < geometry.insetTop(borderThickness) + panelHeight && withinPanelWidth(panel, x, y);
 	}

 	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)
-				root.bar.checkPopout(x);
+			if (root.geometry.barContains(x, y))
+				root.bar.checkPopout(root.geometry.axisPos(x, y));
 		}
 	}

@@ -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)
-		implicitWidth: resources.implicitWidth
+		implicitHeight: root.geometry.horizontal ? resources.implicitHeight * (1 - resources.offsetScale) : resources.implicitHeight
+		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.top: parent.top
+		anchors.bottom: root.geometry.barOnLeft || root.geometry.barOnBottom ? parent.bottom : undefined
+		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)
-		implicitWidth: dashboard.implicitWidth
+		implicitHeight: root.geometry.horizontal ? dashboard.implicitHeight * (1 - offsetScale) : dashboard.implicitHeight
+		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
-			anchors.top: parent.top
-			anchors.topMargin: (-implicitHeight - 5) * offsetScale
+			horizontal: root.geometry.horizontal
 			offsetScale: dashboardWrapper.offsetScale
 			visibilities: root.visibilities
 		}
@@ -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
-	x: win.borderThickness + win.dragMaskPadding
-	y: bar.implicitHeight + win.dragMaskPadding
+	width: win.width - geometry.insetLeft(borderThickness, true) * 2 - win.dragMaskPadding * 2
+	x: geometry.insetLeft(borderThickness, true) + 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
-		y: panel.y + root.bar.implicitHeight
+		x: panel.x + root.geometry.insetLeft(root.borderThickness)
+		y: panel.y + root.geometry.insetTop(root.borderThickness)
 	}
 }
@@ -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
-		y: panels.notifications.y + bar.implicitHeight
+		x: panels.notifications.x + geometry.insetLeft(root.borderThickness)
+		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
-			borderLeft: root.borderThickness - anchors.margins - root.sdfBorderOffset
+			borderBottom: geometry.insetBottom(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)
-			implicitWidth: panels.dashboard.width
+			implicitHeight: panels.dashboard.height * (geometry.horizontal ? 1 + extraExtent : 1)
+			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
-			y: panels.dashboardWrapper.y + panels.dashboard.y + bar.implicitHeight - panels.dashboard.height * extraHeight
+			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 + 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
-			y: panels.osdWrapper.y + panels.osd.y + bar.implicitHeight
+			x: panels.osdWrapper.x + panels.osd.x + geometry.insetLeft(root.borderThickness)
 		}

 		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)
-			implicitWidth: panels.popouts.width
+			implicitHeight: panels.popouts.height * (geometry.horizontal ? 1 + extraExtent : 1)
+			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
-			y: panels.popoutsWrapper.y + panels.popouts.y + bar.implicitHeight - panels.popouts.height * extraHeight
+			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 + 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
-			y: panels.resourcesWrapper.y + panels.resources.y + bar.implicitHeight
+			x: panels.resourcesWrapper.x + panels.resources.x + geometry.insetLeft(root.borderThickness)
+			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
-		y: panel.y + bar.implicitHeight
+		x: panel.x + geometry.insetLeft(root.borderThickness)
+		y: panel.y + geometry.insetTop(root.borderThickness)
 	}
 }
@@ -9,18 +9,24 @@ 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
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities

-	function checkPopout(x: real): void {
-		const ch = childAt(x, height / 2) as EntryWrapper;
+	function axisCenterOf(item: Item): real {
+		const c = item.mapToItem(root, item.implicitWidth / 2, item.implicitHeight / 2);
+		return horizontal ? c.x : c.y;
+	}
+
+	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) {
@@ -34,26 +40,21 @@ RowLayout {

 		if (id === "statusIcons" && Config.bar.popouts.statusIcons) {
 			const items = (ch.item as StatusIcons).items;
-			const localX = mapToItem(items, x, 0).x;
-			const icon = items.childAt(localX, items.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);
 			if (icon) {
 				popouts.currentName = icon.name;
-				popouts.currentCenter = Qt.binding(() => icon.mapToItem(root, icon.implicitWidth / 2, 0).x);
+				popouts.currentCenter = Qt.binding(() => axisCenterOf(icon));
 				popouts.hasCurrent = true;
 			}
 		} else if (id === "tray" && Config.bar.popouts.tray && Config.bar.tray.showOnHover) {
 			const tray = ch.item as TrayIcons;
 			const layout = tray.layout;
-			const localX = mapToItem(layout, x, 0).x;
-			const trayItem = layout.childAt(localX, layout.height / 2);
+			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(() => {
-					const it = tray.items.itemAt(idx);
-					return it ? it.mapToItem(root, it.implicitWidth / 2, 0).x : popouts.currentCenter;
-				});
+				popouts.currentCenter = Qt.binding(() => axisCenterOf(trayItem));
 				popouts.hasCurrent = true;
 			}

@@ -63,12 +64,19 @@ RowLayout {

 		if (id === "updates") {
 			popouts.currentName = "updates";
-			popouts.currentCenter = Qt.binding(() => ch.item.mapToItem(root, (ch.item as Item).implicitWidth / 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
@@ -85,6 +93,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					HyprsunsetWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -94,7 +103,8 @@ RowLayout {
 				roleValue: "spacer"

 				delegate: EntryWrapper {
-					Layout.fillWidth: true
+					Layout.fillHeight: !root.horizontal
+					Layout.fillWidth: root.horizontal
 				}
 			}

@@ -103,6 +113,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					Workspaces {
+						horizontal: root.horizontal
 						screen: root.screen
 						visible: !root.fullscreen
 					}
@@ -114,6 +125,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					TrayIcons {
+						horizontal: root.horizontal
 						loader: root
 						popouts: root.popouts
 						visible: !root.fullscreen
@@ -126,6 +138,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					StatusIcons {
+						horizontal: root.horizontal
 					}
 				}
 			}
@@ -135,6 +148,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					Resources {
+						horizontal: root.horizontal
 						visibilities: root.visibilities
 						visible: !root.fullscreen
 					}
@@ -146,6 +160,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					UpdatesWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -156,6 +171,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					NotifBell {
+						horizontal: root.horizontal
 						popouts: root.popouts
 						visibilities: root.visibilities
 						visible: !root.fullscreen
@@ -168,6 +184,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					Clock {
+						horizontal: root.horizontal
 						loader: root
 						popouts: root.popouts
 						visibilities: root.visibilities
@@ -182,6 +199,7 @@ RowLayout {
 				delegate: EntryWrapper {
 					WindowTitle {
 						bar: root
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -201,6 +219,7 @@ RowLayout {

 				delegate: EntryWrapper {
 					MediaWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen
 					}
 				}
@@ -214,9 +233,11 @@ RowLayout {
 		default property Item item
 		required property var modelData

-		Layout.alignment: Qt.AlignVCenter
-		Layout.leftMargin: index === 0 ? root.vPadding : (entryId === "statusIcons") ? -root.spacing + Appearance.spacing.extraSmall : 0
-		Layout.rightMargin: index === repeater.count - 1 ? root.vPadding : 0
+		Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+		Layout.bottomMargin: !root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
+		Layout.leftMargin: root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && root.horizontal) ? -root.rowSpacing + Appearance.spacing.extraSmall : 0
+		Layout.rightMargin: root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
+		Layout.topMargin: !root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && !root.horizontal) ? -root.columnSpacing + Appearance.spacing.extraSmall : 0
 		children: item
 		implicitHeight: item?.implicitHeight ?? 0
 		implicitWidth: item?.implicitWidth ?? 0
@@ -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 exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentHeight
+	readonly property int clampedExtent: Math.max(Config.bar.border, extent)
+	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 {
-		content.item?.checkPopout(x);
+	function checkPopout(pos: real): void {
+		(content.item as Bar)?.checkPopout(pos);
 	}

-	implicitHeight: fullscreen ? 0 : Config.bar.border
-	visible: height > Config.bar.border
+	function entryAt(pos: real): string {
+		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.left: parent.left
+		anchors.bottom: root.position !== "bottom" ? parent.bottom : undefined
+		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
@@ -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)
-	implicitWidth: content.implicitWidth
+	implicitHeight: horizontal ? content.implicitHeight * (1 - offsetScale) : content.implicitHeight
+	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.top: parent.top
+		anchors.bottom: root.position === "bottom" ? parent.bottom : undefined
+		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
 	}
@@ -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
-	implicitWidth: timeText.contentWidth + Appearance.padding.normal * 2
+	implicitHeight: horizontal ? shortSize : size
+	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 {
@@ -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.horizontalCenter: parent.horizontalCenter
+		anchors.bottom: root.horizontal ? parent.bottom : undefined
+		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
@@ -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
-	implicitWidth: implicitHeight
+	implicitHeight: horizontal ? Config.bar.height : width
+	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 {
@@ -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
-	implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2
+	implicitHeight: horizontal ? Config.bar.height : layout.implicitHeight + 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
@@ -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
-	implicitWidth: implicitHeight
+	implicitHeight: horizontal ? Config.bar.height : width
+	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: Appearance.font.size.larger
+		font.pointSize: root.horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 		text: NotifServer.list.length ? "\uf4fe" : "\ue7f4"

 		Behavior on color {
@@ -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.preferredWidth: 4
+		Layout.preferredHeight: root.horizontal ? icon.implicitHeight : 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 {
@@ -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
-	implicitWidth: rowLayout.implicitWidth + Appearance.padding.larger * 2
+	implicitHeight: horizontal ? Math.max(Config.bar.height, 24) : gridLayout.implicitHeight + Appearance.padding.normal * 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 {
-		id: rowLayout
+	GridLayout {
+		id: gridLayout

 		anchors.centerIn: parent
-		anchors.horizontalCenterOffset: -2
-		implicitHeight: root.implicitHeight
-		spacing: Appearance.spacing.smaller
+		anchors.horizontalCenterOffset: root.horizontal ? 0 : 1
+		anchors.verticalCenterOffset: root.horizontal ? 0 : -3
+		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
@@ -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
@@ -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")
@@ -18,9 +18,10 @@ CustomClippingRect {
 				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: row
+	readonly property alias items: grid
 	readonly property int lastPresent: {
 		const values = model.values;
 		for (let i = values.length - 1; i >= 0; i--)
@@ -28,6 +29,8 @@ CustomClippingRect {
 				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
@@ -37,19 +40,36 @@ CustomClippingRect {
 		return false;
 	}

-	bottomLeftRadius: Appearance.rounding.smallest / 2
+	bottomLeftRadius: horizontal ? Appearance.rounding.smallest / 2 : Appearance.rounding.full
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
-	implicitWidth: row.implicitWidth + Appearance.padding.small * 2
+	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

-	RowLayout {
-		id: row
+	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: Appearance.padding.small
-		anchors.rightMargin: Appearance.padding.small
+		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 {
@@ -68,6 +88,7 @@ CustomClippingRect {
 						name: "audio"

 						AudioWidget {
+							horizontal: root.horizontal
 						}
 					}
 				}
@@ -79,6 +100,7 @@ CustomClippingRect {
 						name: "audio"

 						MicWidget {
+							horizontal: root.horizontal
 						}
 					}
 				}
@@ -90,6 +112,7 @@ CustomClippingRect {
 						name: "upower"

 						UPowerWidget {
+							horizontal: root.horizontal
 						}
 					}
 				}
@@ -108,8 +131,10 @@ CustomClippingRect {
 		property real rightGap: present && index !== root.firstPresent ? margin : 0

 		Layout.alignment: Qt.AlignHCenter
-		Layout.leftMargin: Math.round(leftGap)
-		Layout.rightMargin: Math.round(rightGap)
+		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
@@ -11,24 +11,29 @@ import qs.Modules
 CustomClippingRect {
 	id: root

+	required property bool horizontal
 	readonly property alias items: repeater
-	readonly property alias layout: sysRow
-	required property RowLayout loader
+	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: Config.bar.height + Appearance.padding.smallest * 2
-	implicitWidth: sysRow.implicitWidth + Appearance.padding.small * 2
+	implicitHeight: horizontal ? shortSize : size
+	implicitWidth: horizontal ? size : shortSize
 	radius: Appearance.rounding.full
-	topRightRadius: Appearance.rounding.smallest / 2
+	topRightRadius: horizontal ? Appearance.rounding.smallest / 2 : Appearance.rounding.full

-	RowLayout {
-		id: sysRow
+	GridLayout {
+		id: sysGrid

 		anchors.centerIn: parent
-		spacing: 0
+		columns: root.horizontal ? -1 : 1
+		rowSpacing: -2

 		Repeater {
 			id: repeater
@@ -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 {
@@ -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);
@@ -80,9 +83,11 @@ RowLayout {
 		return null;
 	}

-	height: Config.bar.height + Appearance.padding.smallest * 2
-	spacing: Appearance.padding.small
-	width: sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small
+	columnSpacing: Appearance.padding.small
+	columns: horizontal ? -1 : 1
+	height: horizontal ? shortSize : size
+	rowSpacing: Appearance.padding.small
+	width: horizontal ? size : shortSize

 	CustomClippingRect {
 		id: sysTray
@@ -94,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
@@ -125,10 +137,12 @@ 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: sysIcons.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

@@ -138,6 +152,7 @@ RowLayout {
 			anchors.fill: parent
 			anchors.leftMargin: Appearance.padding.smaller
 			anchors.rightMargin: Appearance.padding.normal
+			horizontal: root.horizontal
 		}
 	}
 }
@@ -10,10 +10,12 @@ import qs.Components
 MaterialIcon {
 	id: speaker

+	required property bool horizontal
+
 	animate: true
 	color: Audio.muted ? DynamicColors.palette.m3error : DynamicColors.palette.m3onSurface
 	fill: 1
-	font.pointSize: Appearance.font.size.larger
+	font.pointSize: horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 	text: Audio.muted ? "volume_off" : "volume_up"

 	Behavior on Layout.maximumWidth {
@@ -10,10 +10,12 @@ 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: Appearance.font.size.larger
+	font.pointSize: horizontal ? Appearance.font.size.larger : Appearance.font.size.large
 	text: Audio.sourceMuted ? "mic_off" : "mic"

 	Behavior on Layout.maximumWidth {
@@ -8,6 +8,8 @@ import qs.Helpers
 Item {
 	id: root

+	required property bool horizontal
+
 	implicitHeight: Battery.isLaptop ? batteryIconLoader.item.implicitHeight : upowerIconLoader.item.implicitHeight
 	implicitWidth: Battery.isLaptop ? batteryIconLoader.item.implicitWidth : upowerIconLoader.item.implicitWidth

@@ -123,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";
@@ -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
-	implicitWidth: contentRow.implicitWidth + Appearance.spacing.small * 2
+	implicitHeight: horizontal ? Config.bar.height : content.implicitHeight + Appearance.spacing.small * 2
+	implicitWidth: horizontal ? content.implicitWidth + Appearance.spacing.small * 2 : Config.bar.height
 	radius: Appearance.rounding.full

-	RowLayout {
-		id: contentRow
+	GridLayout {
+		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
 		}
 	}
@@ -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: {
-		const otherModules = bar.children.filter(c => c.enabled && c.id && c.item !== this && c.id !== "spacer");
-		const otherWidth = otherModules.reduce((acc, curr) => {
-			return acc + (curr.item?.nonAnimWidth ?? curr.width ?? 0);
-		}, 0);
-		return bar.width - otherWidth - bar.spacing * (bar.children.length - 1) - bar.vPadding * 2;
+	readonly property int maxSize: {
+		const otherModules = bar.children.filter(c => c.enabled && c.entryId && c.item !== this && c.entryId !== "spacer");
+		const otherSize = otherModules.reduce((acc, curr) => acc + (horizontal ? (curr.item?.nonAnimWidth ?? curr.width ?? 0) : (curr.item.nonAnimHeight ?? curr.height ?? 0)), 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;
 	}

+	anchors.centerIn: parent
 	clip: true
-	implicitHeight: current.implicitHeight
-	implicitWidth: Math.min(current.implicitWidth, root.maxWidth)
+	implicitHeight: horizontal ? current.implicitHeight : current.implicitWidth + current.anchors.topMargin
+	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.verticalCenter: parent.verticalCenter
-		color: root.colour
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+		anchors.left: root.horizontal ? parent.left : undefined
+		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
+			}
+		]
 	}
 }
@@ -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: Config.bar.height + Appearance.padding.smaller * 2
-	implicitWidth: (root.workspaceButtonWidth * root.workspacesShown) + root.activeWorkspaceMargin * 2
+	implicitHeight: horizontal ? shortSize : size
+	implicitWidth: horizontal ? size : shortSize

+	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.right: parent.right
-		anchors.verticalCenter: parent.verticalCenter
+		anchors.bottom: root.horizontal ? undefined : parent.bottom
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+		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
-			implicitWidth: indicatorLength
+			implicitHeight: root.horizontal ? indicatorThickness : 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
 			}
 		}
 	}
Author	SHA1	Message	Date
zach	ef8811724f	better height/width for bar C++ / fmt (pull_request) Successful in 3s Details JS/TS / fmt (pull_request) Successful in 14s Details JS/TS / lint (pull_request) Successful in 19s Details Python / lint (pull_request) Successful in 30s Details Python / fmt (pull_request) Successful in 34s Details Python / test (pull_request) Successful in 1m0s Details Python / typecheck (pull_request) Failing after 1m18s Details C++ / build (pull_request) Successful in 1m49s Details Rust / fmt (pull_request) Successful in 33s Details Rust / build (pull_request) Successful in 1m33s Details Rust / clippy (pull_request) Successful in 1m17s Details Python / buildcheck (pull_request) Successful in 2m40s Details C++ / clang-tidy (pull_request) Successful in 3m25s Details	2026-08-14 18:03:56 +02:00
zach	4517e5ecd0	left-bar working, bottom bar semi-broken	2026-08-14 16:31:52 +02:00
zach	1d150292d3	initial commit for repositioning bar, currently broken	2026-08-12 20:15:55 +02:00