WidgetBase for bar widget + fixed resources and dashboard popouts in left- and bottom-edge bar

Modules/Bar/Components/MediaWidget.qml

@@ -1,21 +1,19 @@
 import QtQuick
 import QtQuick.Layouts
-import qs.Components
-import qs.Daemons
 import ZShell.Config
+import qs.Components
+import qs.Modules.Bar.Components.Common
 import qs.Helpers
 import qs.Services
 
-CustomRect {
+WidgetBase {
 	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: Colors.tPalette.m3surfaceContainer
-	implicitHeight: horizontal ? Math.max(Config.bar.height, Tokens.bar.innerSize) : layout.implicitHeight + Tokens.padding.normal * 2
-	implicitWidth: horizontal ? layout.implicitWidth + Tokens.padding.normal * 2 : Math.max(Config.bar.height, Tokens.bar.innerSize)
+	implicitHeight: horizontal ? baseSize : layout.implicitHeight + Tokens.padding.normal * 2
+	implicitWidth: horizontal ? layout.implicitWidth + Tokens.padding.normal * 2 : baseSize
 	radius: Tokens.rounding.full
 
 	Behavior on implicitHeight {
@@ -69,34 +67,26 @@ CustomRect {
 			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
 			font.pointSize: Tokens.font.size.normal
 			horizontalAlignment: Text.AlignHCenter
-			implicitWidth: root.textWidth
+			implicitHeight: root.horizontal ? root.implicitHeight : root.textWidth
+			implicitWidth: root.horizontal ? root.textWidth : root.implicitWidth
 			marqueeEnabled: false
 			pauseMs: 4000
 			text: root.currentMedia
+			vertical: !root.horizontal
+		}
+	}
 
-			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
 
-			CustomMouseArea {
-				anchors.fill: parent
-				hoverEnabled: true
-
-				onContainsMouseChanged: {
-					if (!containsMouse) {
-						mediatext.marqueeEnabled = false;
-					} else {
-						mediatext.marqueeEnabled = true;
-						mediatext.anim.start();
-					}
-				}
+		onContainsMouseChanged: {
+			console.log(root.textWidth, mediatext.implicitWidth, mediatext.implicitHeight);
+			if (!containsMouse) {
+				mediatext.marqueeEnabled = false;
+			} else {
+				mediatext.marqueeEnabled = true;
+				mediatext.anim.start();
 			}
 		}
 	}