improve config for cava and add base for equalizer. It works but needs some performance fixes

quickshell/ui/NowPlaying.qml

@@ -1,9 +1,9 @@
-
 import QtQuick
 import QtQuick.Layouts
 
 import "../constants"
 import "../services"
+
 Row {
     id: root
 
@@ -12,10 +12,12 @@ Row {
     property string artUrl: ""
     property int maxTextLength: 50
 
+    property int numBands: 32
+
     // if the artist - title text is too long, truncate it
     readonly property string displayText: {
-        const fullText = artist !== "" ? (artist + " - " + title) : title
-        return fullText.length > maxTextLength ? fullText.substring(0, maxTextLength - 3) + "..." : fullText
+        const fullText = artist !== "" ? (artist + " - " + title) : title;
+        return fullText.length > maxTextLength ? fullText.substring(0, maxTextLength - 3) + "..." : fullText;
     }
 
     visible: title !== ""
@@ -27,20 +29,6 @@ Row {
     // where each number represents the amplitude of a frequency band.
     // this can be used to create a simple visualizer
     // also add cava to autostart
-    Canvas {
-        // implicitWidth: parent.implicitWidth
-        // implicitHeight: parent.implicitHeight
-        // anchors.fill: parent
-    }
-
-    CavaService {
-        id: cavaService
-        onCavaDataChanged: {
-            // TODO update the canvas with the new data
-            // console.log("Cava data changed: " + data)
-        }
-    }
-
     Image {
         width: 18
         height: 18
@@ -50,11 +38,107 @@ Row {
     }
 
     Text {
+        id: titleText
         text: root.displayText
         color: Colors.md3.primary
         font.family: Constants.fontFamily
         font.pixelSize: Constants.fontSize
         anchors.verticalCenter: parent.verticalCenter
-        z: 1
+        // z: 1
     }
-}
+
+    Item {
+        id: titleArea
+        anchors.bottom: parent.bottom
+        width: titleText.implicitWidth
+        height: Math.max(titleText.implicitHeight, visualizer.height)
+
+        // Canvas {
+        //     id: visualizer
+        //     anchors.fill: parent
+
+        //     property var cavaData: []
+        //     property var smoothedData: []
+        //     property real inputMax: 20
+        //     property real attackAlpha: 1.0
+        //     property real releaseAlpha: 0.9
+        //     property real maxStepPerFrame: 50
+        //     property bool needsInit: true
+
+        //     Component.onCompleted: {
+        //         for (let i = 0; i < root.numBands; i++) {
+        //             cavaData[i] = 0;
+        //             smoothedData[i] = 0;
+        //         }
+        //         needsInit = false;
+        //     }
+
+        //     function updateData(csvLine) {
+        //         // Fast in-place parse: split once, parse directly into pre-allocated array
+        //         let parts = csvLine.split(";");
+        //         let idx = 0;
+        //         for (let j = 0; j < parts.length && idx < root.numBands; j++) {
+        //             let val = Number(parts[j]);
+        //             if (!isNaN(val))
+        //                 cavaData[idx++] = Math.min(100, Math.max(0, val));
+        //         }
+        //         while (idx < root.numBands)
+        //             cavaData[idx++] = 0;
+
+        //         if (needsInit) {
+        //             for (let i = 0; i < root.numBands; i++)
+        //                 smoothedData[i] = cavaData[i];
+        //             needsInit = false;
+        //         } else {
+        //             // Two-speed smoothing in place with early exit if no significant change
+        //             let changed = false;
+        //             for (let i = 0; i < root.numBands; i++) {
+        //                 let prev = smoothedData[i];
+        //                 let next = cavaData[i];
+        //                 let alpha = next >= prev ? attackAlpha : releaseAlpha;
+        //                 let blended = prev + (next - prev) * alpha;
+        //                 let delta = blended - prev;
+        //                 if (Math.abs(delta) > 0.1)
+        //                     changed = true;
+        //                 if (delta > maxStepPerFrame)
+        //                     blended = prev + maxStepPerFrame;
+        //                 else if (delta < -maxStepPerFrame)
+        //                     blended = prev - maxStepPerFrame;
+        //                 smoothedData[i] = blended;
+        //             }
+        //             if (!changed)
+        //                 return;
+        //         }
+
+        //         visualizer.requestPaint();
+        //     }
+
+        //     onPaint: {
+        //         var ctx = getContext("2d");
+        //         ctx.clearRect(0, 0, width, height);
+        //         if (smoothedData.length === 0) {
+        //             return;
+        //         }
+
+        //         var barWidth = width / root.numBands;
+
+        //         ctx.fillStyle = Colors.md3.on_primary;
+        //         for (let i = 0; i < root.numBands; i++) {
+        //             let normalized = (smoothedData[i] || 0) / inputMax;
+        //             if (normalized > 1)
+        //                 normalized = 1;
+        //             let barHeight = normalized * height;
+
+        //             ctx.fillRect(Math.floor(i * barWidth), Math.floor(height - barHeight), Math.ceil(barWidth), Math.floor(barHeight));
+        //         }
+        //     }
+        // }
+    }
+
+    // CavaService {
+    //     id: cavaService
+    //     onCavaDataChanged: data => {
+    //         visualizer.updateData(data);
+    //     }
+    // }
+}

quickshell/ui/TopBar.qml

@@ -44,6 +44,8 @@ Item {
             artist: root.nowPlayingArtist
             title: root.nowPlayingTitle
             artUrl: root.nowPlayingArtUrl
+            Layout.fillHeight: true
+            Layout.alignment: Qt.AlignBottom
         }
 
         // Spacer