Add cava and TODO for frequency graph

quickshell/ui/BluetoothIcon.qml

@@ -1,5 +1,7 @@
+import Quickshell
 import Quickshell.Io
 import QtQuick
+import QtQuick.Layouts
 
 import "../constants"
 import "../services"
@@ -7,8 +9,11 @@ import "../services"
 Text {
 	id: root
 
+	required property TopBar parentWindow;
+
 	// Nerd Font Bluetooth icon (nf-fa-bluetooth)
 	// cheat sheet: https://www.nerdfonts.com/cheat-sheet
+	// TODO make custom floating panel with animation and buttons to connect/disconnect devices
 	property string iconGlyph: "\udb80\udcaf"
 	property string connectedIconGlyph: "\udb80\udcb1"
 	property string disconnectedIconGlyph: "\udb80\udcaf"
@@ -42,9 +47,18 @@ Text {
 	MouseArea {
 		anchors.fill: parent
 		hoverEnabled: true
-
+ 
 		onClicked: {
 			bluemanManagerProcess.running = true;
+			popupWindow.visible = true;
 		}
 	}
+
+	PopupWindow {
+		id: popupWindow
+		visible: false
+		implicitWidth: 200
+		implicitHeight: 100
+		anchor.window: parentWindow
+	}
 }

quickshell/ui/NowPlaying.qml

@@ -14,6 +14,18 @@ Row {
     visible: title !== ""
     spacing: 6
 
+    //TODO add service that reads the data from cava
+    // the fifo buffer is in /tmp/cava.fifo. Example data is:
+    // 5;3;3;3;2;1;1;3;6;18;42;16;6;6;1;1;2;6;2;3;6;6;5;11;11;12;13;66;4;4;24;2;2;24;4;4;66;13;12;11;11;5;6;6;3;2;3;2;1;1;6;6;16;42;19;5;2;1;1;2;3;4;3;7;
+    // 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
+    }
+
     Image {
         width: 18
         height: 18
@@ -29,5 +41,6 @@ Row {
         font.pixelSize: Constants.fontSize
         elide: Text.ElideRight
         anchors.verticalCenter: parent.verticalCenter
+        z: 1
     }
 }

quickshell/ui/TopBar.qml

@@ -59,7 +59,9 @@ Item {
 
             LineSeparator {}
 
-            BluetoothIcon {}
+            BluetoothIcon {
+                parentWindow: root
+            }
 
             LineSeparator {}
             
@@ -82,9 +84,6 @@ Item {
                 value: gpuUsage
             }
 
-            LineSeparator {}
-
-
             LineSeparator {}
 
             Clock {}