wip: progress

.gitignore

@@ -3,3 +3,4 @@ nix/nixos.qcow2
 nix_file.tar.gz
 nvim
 tmux/plugins
+modules/quickshell/quickshell/.qmlls.ini

modules/nixvim/home.nix

@@ -43,6 +43,9 @@ in
         servers = {
           qmlls = {
             enable = true;
+            config = {
+              cmd = "-E";
+            };
           };
           rust_analyzer = {
             enable = true;
@@ -57,6 +60,10 @@ in
           };
         };
       };
+      lsp-format = {
+        enable = true;
+        # lspServersToEnable = [ "qmlls" ];
+      };
       notify.enable = true;
       mini-cursorword.enable = true;
       # mini-statusline.enable = true;

modules/quickshell/home.nix

@@ -17,7 +17,7 @@ in
   };
   config.xdg.configFile."quickshell" = lib.mkIf cfg.enable {
     recursive = true;
-    source = config.lib.file.mkOutOfStoreSymlink "${nix-meow.flakeRoot}/modules/quickshell/quickshell";
+    source = config.lib.file.mkOutOfStoreSymlink /home/doloro/dotfiles/modules/quickshell/quickshell;
   };
   config.systemd.user.services.quickshell = lib.mkIf cfg.enable {
     Unit = {

modules/quickshell/quickshell/assets/bar/V2/mic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M479.97-389q-53.8 0-91.43-37.65-37.63-37.65-37.63-91.44v-238.32q0-53.79 37.66-91.44t91.46-37.65q53.8 0 91.43 37.65 37.63 37.65 37.63 91.44v238.32q0 53.79-37.66 91.44T479.97-389Zm-43.56 283.59v-123.96q-108.06-14.48-178.45-96.85-70.4-82.38-70.4-191.87h87.42q0 85.16 59.98 145.09 59.98 59.93 145.09 59.93 85.1 0 145.04-59.96 59.93-59.97 59.93-145.06h87.42q0 109.55-70.4 191.89-70.39 82.35-178.45 96.83v123.96h-87.18Z"/></svg>

modules/quickshell/quickshell/assets/bar/V2/micOff.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m715.83-357.41-58.74-58.74q9.8-19.81 15.58-40.99 5.79-21.19 5.79-44.95h79.17q0 38-10.52 75.34t-31.28 69.34ZM605.24-467.52 354.26-718.5v-33.63q3.11-48.57 39.54-82.97 36.44-34.4 87.4-34.4 53.82 0 91.57 37.63 37.75 37.63 37.75 91.46v238.32q0 8.52-1.26 17.52t-4.02 17.05ZM441.61-129.41v-99.72q-103.07-12.48-169.96-90.45-66.89-77.96-66.89-182.51h79.41q0 82.16 57.44 139.59 57.43 57.43 139.59 57.43 36.15 0 68.56-14.19 32.41-14.2 59.37-38.11l57.5 57.5q-30.43 27.39-67.71 46.33-37.27 18.93-78.14 24.41v99.72h-79.17Zm325.19 37.5-678-679 53.4-53.39 678 679-53.4 53.39Z"/></svg>

modules/quickshell/quickshell/assets/bar/V2/speaker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M566.22-126.93V-213q89.76-26.48 144.88-100.36 55.12-73.88 55.12-167.64 0-93.76-55.12-167.64Q655.98-722.52 566.22-749v-86.07q125.43 28.24 204.51 126.94Q849.8-609.43 849.8-481t-79.07 227.13q-79.08 98.7-204.51 126.94ZM110.2-351.87v-256.26h164.78l211.24-211.24v678.74L274.98-351.87H110.2Zm456.02 34.74v-327.74q47.95 22.72 75.77 67.2Q669.8-533.2 669.8-480q0 52.2-27.81 96.29-27.82 44.1-75.77 66.58Z"/></svg>

modules/quickshell/quickshell/assets/bar/V2/speakerOff.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M794.39-48.35 672.91-170.3q-24.04 15.04-50.96 25.94-26.93 10.9-55.97 17.43V-213q12.09-4.28 23.79-8.57 11.71-4.28 22.27-10.32L485.98-358.43v217.8L274.74-351.87H109.96v-256.26h128.47l-190.56-192 58.39-58.39 746.76 751.54-58.63 58.63Zm-1.78-237.02-60.63-61.11q17-30.76 25.5-64.64 8.5-33.88 8.5-69.88 0-93.76-55.24-167.64Q655.5-722.52 565.98-749v-86.07q125.43 28.24 204.63 126.94Q849.8-609.43 849.8-481q0 53.96-14.85 103.43-14.86 49.48-42.34 92.2ZM658.85-419.85l-92.87-93.35v-131.67q47.95 22.48 75.89 67.08Q669.8-533.2 669.8-480q0 15.72-2.73 30.82-2.74 15.09-8.22 29.33ZM485.98-593.91 373.85-707.24l112.13-112.13v225.46Z"/></svg>

modules/quickshell/quickshell/assets/bar/batt/1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M159.28-231.87q-53.58 0-91.21-37.63-37.64-37.63-37.64-91.22v-238.8q0-53.59 37.64-91.1 37.63-37.51 91.21-37.51h530.68q53.58 0 91.09 37.51 37.52 37.51 37.52 91.1v238.8q0 53.59-37.52 91.22-37.51 37.63-91.09 37.63H159.28Zm.24-91h530.2q16.04 0 26.94-11.02 10.9-11.02 10.9-27.07v-238.32q0-16.05-10.9-26.95-10.9-10.9-26.94-10.9h-530.2q-16.04 0-27.06 10.9-11.03 10.9-11.03 26.95v238.32q0 16.05 11.03 27.07 11.02 11.02 27.06 11.02Zm699.05-53.06v-208.14h25.5q19.15 0 32.32 13.18 13.18 13.17 13.18 32.32v117.14q0 19.15-13.18 32.32-13.17 13.18-32.32 13.18h-25.5Zm-697.14 13.06v-234.26h86.22v234.26h-86.22Z"/></svg>

modules/quickshell/quickshell/assets/bar/batt/2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M159.28-231.87q-53.58 0-91.21-37.63-37.64-37.63-37.64-91.22v-238.8q0-53.59 37.64-91.1 37.63-37.51 91.21-37.51h530.68q53.58 0 91.09 37.51 37.52 37.51 37.52 91.1v238.8q0 53.59-37.52 91.22-37.51 37.63-91.09 37.63H159.28Zm.24-91h530.2q16.04 0 26.94-11.02 10.9-11.02 10.9-27.07v-238.32q0-16.05-10.9-26.95-10.9-10.9-26.94-10.9h-530.2q-16.04 0-27.06 10.9-11.03 10.9-11.03 26.95v238.32q0 16.05 11.03 27.07 11.02 11.02 27.06 11.02Zm699.05-53.06v-208.14h25.5q19.15 0 32.32 13.18 13.18 13.17 13.18 32.32v117.14q0 19.15-13.18 32.32-13.17 13.18-32.32 13.18h-25.5Zm-697.14 13.06v-234.26h163.83v234.26H161.43Z"/></svg>

modules/quickshell/quickshell/assets/bar/batt/3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M159.28-231.87q-53.58 0-91.21-37.63-37.64-37.63-37.64-91.22v-238.8q0-53.59 37.64-91.1 37.63-37.51 91.21-37.51h530.68q53.58 0 91.09 37.51 37.52 37.51 37.52 91.1v238.8q0 53.59-37.52 91.22-37.51 37.63-91.09 37.63H159.28Zm.24-91h530.2q16.04 0 26.94-11.02 10.9-11.02 10.9-27.07v-238.32q0-16.05-11.02-26.95-11.02-10.9-27.06-10.9h-530.2q-16.04 0-26.94 11.02-10.91 11.02-10.91 27.07v238.32q0 16.05 11.03 26.95 11.02 10.9 27.06 10.9Zm699.05-53.06v-208.14h25.5q19.15 0 32.32 13.18 13.18 13.17 13.18 32.32v117.14q0 19.15-13.18 32.32-13.17 13.18-32.32 13.18h-25.5Zm-697.14 13.06v-234.26h241.44v234.26H161.43Z"/></svg>

modules/quickshell/quickshell/assets/bar/batt/4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M159.28-231.87q-53.58 0-91.21-37.63-37.64-37.63-37.64-91.22v-238.8q0-53.59 37.64-91.1 37.63-37.51 91.21-37.51h530.68q53.58 0 91.09 37.51 37.52 37.51 37.52 91.1v238.8q0 53.59-37.52 91.22-37.51 37.63-91.09 37.63H159.28Zm.24-91h530.2q16.04 0 26.94-11.02 10.9-11.02 10.9-27.07v-238.32q0-16.05-10.9-26.95-10.9-10.9-26.94-10.9h-530.2q-16.04 0-27.06 10.9-11.03 10.9-11.03 26.95v238.32q0 16.05 11.03 27.07 11.02 11.02 27.06 11.02Zm699.05-53.06v-208.14h25.5q19.15 0 32.32 13.18 13.18 13.17 13.18 32.32v117.14q0 19.15-13.18 32.32-13.17 13.18-32.32 13.18h-25.5Zm-697.14 13.06v-234.26h321.44v234.26H161.43Z"/></svg>

modules/quickshell/quickshell/assets/bar/batt/5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M159.28-231.87q-53.58 0-91.21-37.63-37.64-37.63-37.64-91.22v-238.8q0-53.59 37.64-91.1 37.63-37.51 91.21-37.51h530.68q53.58 0 91.09 37.51 37.52 37.51 37.52 91.1v238.8q0 53.59-37.52 91.22-37.51 37.63-91.09 37.63H159.28Zm.24-91h530.2q16.04 0 26.94-11.02 10.9-11.02 10.9-27.07v-238.32q0-16.05-10.9-26.95-10.9-10.9-26.94-10.9h-530.2q-16.04 0-27.06 10.9-11.03 10.9-11.03 26.95v238.32q0 16.05 11.03 27.07 11.02 11.02 27.06 11.02Zm699.05-53.06v-208.14h25.5q19.15 0 32.32 13.18 13.18 13.17 13.18 32.32v117.14q0 19.15-13.18 32.32-13.17 13.18-32.32 13.18h-25.5Zm-697.14 13.06v-234.26h401.44v234.26H161.43Z"/></svg>

modules/quickshell/quickshell/assets/bar/batt/6.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M159.28-231.87q-53.58 0-91.21-37.63-37.64-37.63-37.64-91.22v-238.8q0-53.59 37.64-91.1 37.63-37.51 91.21-37.51h530.68q53.58 0 91.09 37.51 37.52 37.51 37.52 91.1v238.8q0 53.59-37.52 91.22-37.51 37.63-91.09 37.63H159.28Zm.24-91h530.2q16.04 0 26.94-11.02 10.9-11.02 10.9-27.07v-238.32q0-16.05-10.9-26.95-10.9-10.9-26.94-10.9h-530.2q-16.04 0-27.06 10.9-11.03 10.9-11.03 26.95v238.32q0 16.05 11.03 27.07 11.02 11.02 27.06 11.02Zm699.05-53.06v-208.14h25.5q19.15 0 32.32 13.18 13.18 13.17 13.18 32.32v117.14q0 19.15-13.18 32.32-13.17 13.18-32.32 13.18h-25.5Zm-697.14 13.06v-234.26h470.68v234.26H161.43Z"/></svg>

modules/quickshell/quickshell/assets/bar/batt/7.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M159.28-231.87q-53.58 0-91.21-37.63-37.64-37.63-37.64-91.22v-238.8q0-53.59 37.64-91.1 37.63-37.51 91.21-37.51h530.68q53.58 0 91.09 37.51 37.52 37.51 37.52 91.1v238.8q0 53.59-37.52 91.22-37.51 37.63-91.09 37.63H159.28Zm.24-91h530.2q16.04 0 26.94-11.02 10.9-11.02 10.9-27.07v-238.32q0-16.05-10.9-26.95-10.9-10.9-26.94-10.9h-530.2q-16.04 0-27.06 10.9-11.03 10.9-11.03 26.95v238.32q0 16.05 11.03 27.07 11.02 11.02 27.06 11.02Zm699.05-53.06v-208.14h25.5q19.15 0 32.32 13.18 13.18 13.17 13.18 32.32v117.14q0 19.15-13.18 32.32-13.17 13.18-32.32 13.18h-25.5Zm-697.14 13.06v-234.26h526.13v234.26H161.43Z"/></svg>

modules/quickshell/quickshell/bar/Bar.qml

@@ -12,65 +12,50 @@ import "widgets/common" as Common
 import "widgets/clock" as Clock
 import "widgets/workspace" as Workspace
 
-// Tako kindly threatened you to sort the naming schema and to put all the svg's in an asset folder, so please do that
+PanelWindow {
+    property var modelData
+    screen: modelData.values[0]
 
-        PanelWindow {
-            property var modelData
-            screen: modelData.values[0];
+    color: '#20ffffff'
+    anchors {
+        top: true
+        left: true
+        right: true
+    }
 
-            color: '#20ffffff'
+    implicitHeight: 31
+    RowLayout {
+        height: 30
         anchors {
-          top: true
-          left: true
-          right: true
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            // bottomMargin: 2
+            leftMargin: 5
+            rightMargin: 5
         }
-
-        implicitHeight: 32
         RowLayout {
-            height: 28
-            anchors {
-                top: parent.top
-                left: parent.left
-                right: parent.right
-                // bottomMargin: 2
-                leftMargin: 10
-                rightMargin: 10
-            }
-            RowLayout { // Left
-                Layout.alignment: Qt.AlignLeft
-                Clock.Date {}
-                Clock.Clock {}
-                Workspace.WorkspaceWidget {}
-            }
-            RowLayout { // Center
-                // TODO: add icons of the active window per workspace in the workspace tab
-                anchors.centerIn: parent
-            }
-            RowLayout { // Right
-                Layout.alignment: Qt.AlignRight
-                Loader {
-                    sourceComponent: Widgets.Audio {}
-                }
-                RowLayout {
-                    Text {
-                        text: HyprlandWindowTracker.HyprlandWindowTracker.aaaa
-                    }
-                    visible: Player.activePlayer.isPlaying()
-                    Player.PlayerWidgetV2 {
-                    }
-                }
-                    Widgets.SystemTray {
-                        id: systemTray
-                    }
-            }
+            // Left
+            Layout.alignment: Qt.AlignLeft
+            Widgets.Workspaces {}
         }
-        Rectangle {
-            anchors {
-                bottom: parent.bottom
-                left: parent.left
-                right: parent.right
-            }
-            height: 1
-            color: "#8d8d8d"
+        RowLayout {
+            // Center
+            Layout.alignment: Qt.AlignCenter
         }
-      }
+        RowLayout {
+            // Right
+            Layout.alignment: Qt.AlignRight
+            Widgets.Demo {}
+        }
+    }
+    // Rectangle {
+    //     anchors {
+    //         bottom: parent.bottom
+    //         left: parent.left
+    //         right: parent.right
+    //     }
+    //     height: 1
+    //     color: "#8d8d8d"
+    // }
+}

modules/quickshell/quickshell/bar/widgets/Audio.qml

@@ -4,56 +4,59 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell.Widgets
 import Quickshell.Services.Pipewire
+import QtQuick.VectorImage
+import QtQuick.Effects
 import "common" as Common
 
-
-Item {
+Rectangle {
     id: root
     property PwNode speakerNode: Pipewire.defaultAudioSink
     property PwNode microphoneNode: Pipewire.defaultAudioSource
-    PwObjectTracker { objects: [ root.microphoneNode, root.speakerNode ] }
-
-    width: row.width
-    height: row.height
-
-    // console.log("a");
-
+    PwObjectTracker {
+        objects: [root.microphoneNode, root.speakerNode]
+    }
+    implicitWidth: itemContent.width + 4
+    implicitHeight: 24
+    radius: 5.5
+    Layout.alignment: Qt.AlignVCenter
+    color: "#2a2a2a" // Define item color
     RowLayout {
-        id: row
-        Item {
-            implicitWidth: 28
-            implicitHeight: 28
-            Rectangle {
-                width: parent.width
-                height: parent.height
-                radius: 7
-                color: "black"
-            }
-            Text {
-                anchors.centerIn: parent
-                // implicitSize: 25
-                font.pixelSize: 28
-                color: root.speakerNode.audio.muted ? "#FF474C" : "white"
-                font.family: "CaskaydiaCove Nerd Font Mono"
-                text: root.speakerNode.audio.muted ? Common.Icons.audioIcons.speakerMuted : Common.Icons.audioIcons.speaker
-            }
-        }
-        Item {
-            implicitWidth: 28
-            implicitHeight: 28
-            Rectangle {
-                width: parent.width
-                height: parent.height
-                radius: 7
-                color: "black"
-            }
-            Text {
-                anchors.centerIn: parent
-                // implicitSize: 25
-                font.pixelSize: 34
-                color: root.microphoneNode.audio.muted ? "#FF474C" : "white"
-                font.family: "CaskaydiaCove Nerd Font Mono"
-                text: root.microphoneNode.audio.muted ? Common.Icons.audioIcons.microphoneMuted : Common.Icons.audioIcons.microphone
+        id: itemContent
+        Repeater {
+            model: [
+                {
+                    on: "../../assets/bar/V2/speaker.svg",
+                    off: "../../assets/bar/V2/speakerOff.svg",
+                    node: root.speakerNode
+                },
+                {
+                    on: "../../assets/bar/V2/mic.svg",
+                    off: "../../assets/bar/V2/micOff.svg",
+                    node: root.microphoneNode
+                },
+            ]
+            Item {
+                implicitWidth: 24
+                implicitHeight: 24
+                // anchors.centerIn: parent
+                VectorImage {
+                    id: svgImage
+                    width: parent.width
+                    height: parent.height
+                    source: modelData.node.audio.muted ? modelData.off : modelData.on
+                    visible: false
+                    fillMode: Image.PreserveAspectFit // Adjusts the SVG while keeping the aspect ratio
+                }
+                MultiEffect {
+                    source: svgImage
+                    width: parent.width
+                    height: parent.height
+                    // anchors.centerIn: parent
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                    colorization: 1
+                    brightness: 1
+                    colorizationColor: modelData.node.audio.muted ? "#e53b3c" : "#b1b2b5"
+                }
             }
         }
     }

modules/quickshell/quickshell/bar/widgets/Battery.qml

@@ -0,0 +1,71 @@
+import Quickshell
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+import QtQuick.VectorImage
+import QtQuick.Effects
+import Quickshell.Services.UPower
+import "common" as Common
+
+Rectangle {
+    id: root
+    property int battPercent: 58
+    implicitWidth: itemContent.width + 4
+    implicitHeight: 24
+    radius: 5.5
+    Layout.alignment: Qt.AlignVCenter
+    color: "#2a2a2a" // Define item color
+    Item {
+        id: itemContent
+        implicitWidth: 24
+        implicitHeight: 24
+        // anchors.centerIn: parent
+        VectorImage {
+            id: svgImage
+            width: parent.width
+            height: parent.height
+            source: "../../assets/bar/batt/" + root.getBatteryState(UPower.displayDevice.percentage) + ".svg"
+            visible: false
+            fillMode: Image.PreserveAspectFit // Adjusts the SVG while keeping the aspect ratio
+        }
+        MultiEffect {
+            source: svgImage
+            width: parent.width
+            height: parent.height
+            // anchors.centerIn: parent
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+            // colorization: 1
+            brightness: 1
+            // colorizationColor: modelData.node.audio.muted ? "#e53b3c" : "#b1b2b5"
+        }
+    }
+    function getBatteryState(level) {
+        if (level === null) {
+            return 0;
+        }
+
+        level = Math.max(0, Math.min(100, level));
+
+        if (level === 0)
+            return 0; // 0% exactly
+        if (level === 100)
+            return 7; // 100% exactly
+
+        if (level > 0 && level <= 16)
+            return 1;
+        if (level > 16 && level <= 32)
+            return 2;
+        if (level > 32 && level <= 48)
+            return 3;
+        if (level > 48 && level <= 64)
+            return 4;
+        if (level > 64 && level <= 80)
+            return 5;
+        if (level > 80 && level < 100)
+            return 6;
+
+        return 0;
+    }
+}

modules/quickshell/quickshell/bar/widgets/Demo.qml

@@ -0,0 +1,40 @@
+import Quickshell
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+import "common" as Common
+import "clock" as Clock
+
+Rectangle {
+    id: backgroundRect
+    implicitWidth: rowLayout.implicitWidth + 6 // Account for padding (2px left + 2px right)
+    implicitHeight: rowLayout.implicitHeight + 4 // Account for padding (2px top + 2px bottom)
+    color: "black"
+    radius: 6.5 // Background rectangle with rounded corners
+    // border.color: "gray"
+    // border.width: 1
+
+    // Inner Rectangle for padding and layout
+    Rectangle {
+        id: content
+        anchors.fill: parent
+        anchors.margins: 2 // Create 2px padding on all sides
+        anchors.leftMargin: 3
+        anchors.rightMargin: 3
+        color: "transparent"
+
+        RowLayout {
+            id: rowLayout
+            anchors.fill: parent
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter // Center content
+            spacing: 10 // Space between items
+
+            Audio {}
+            Battery {}
+            Clock.Date {}
+            Clock.Clock {}
+        }
+    }
+}

modules/quickshell/quickshell/bar/widgets/V2/Audio.qml

@@ -0,0 +1,59 @@
+import Quickshell
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+import "common" as Common
+
+Item {
+    id: root
+    property PwNode speakerNode: Pipewire.defaultAudioSink
+    property PwNode microphoneNode: Pipewire.defaultAudioSource
+    PwObjectTracker {
+        objects: [root.microphoneNode, root.speakerNode]
+    }
+
+    width: row.width
+    height: row.height
+
+    // console.log("a");
+
+    RowLayout {
+        id: row
+        Item {
+            implicitWidth: 28
+            implicitHeight: 28
+            Rectangle {
+                width: parent.width
+                height: parent.height
+                radius: 7
+                color: "black"
+            }
+            Text {
+                anchors.centerIn: parent
+                font.pixelSize: 28
+                color: root.speakerNode.audio.muted ? "#B1B2B5" : "white"
+                font.family: "CaskaydiaCove Nerd Font Mono"
+                text: root.speakerNode.audio.muted ? Common.Icons.audioIcons.speakerMuted : Common.Icons.audioIcons.speaker
+            }
+        }
+        Item {
+            implicitWidth: 28
+            implicitHeight: 28
+            Rectangle {
+                width: parent.width
+                height: parent.height
+                radius: 7
+                color: "black"
+            }
+            Text {
+                anchors.centerIn: parent
+                font.pixelSize: 34
+                color: root.microphoneNode.audio.muted ? "#B1B2B5" : "white"
+                font.family: "CaskaydiaCove Nerd Font Mono"
+                text: root.microphoneNode.audio.muted ? Common.Icons.audioIcons.microphoneMuted : Common.Icons.audioIcons.microphone
+            }
+        }
+    }
+}

modules/quickshell/quickshell/bar/widgets/Wireless.qml

@@ -0,0 +1,58 @@
+import Quickshell
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+import QtQuick.VectorImage
+import QtQuick.Effects
+import "common" as Common
+
+Rectangle {
+    id: root
+    implicitWidth: itemContent.width + 4
+    implicitHeight: 24
+    radius: 5.5
+    Layout.alignment: Qt.AlignVCenter
+    color: "#2a2a2a" // Define item color
+    RowLayout {
+        id: itemContent
+        Repeater {
+            model: [
+                {
+                    on: "../../assets/bar/V2/speaker.svg",
+                    off: "../../assets/bar/V2/speakerOff.svg",
+                    node: root.speakerNode
+                },
+                {
+                    on: "../../assets/bar/V2/mic.svg",
+                    off: "../../assets/bar/V2/micOff.svg",
+                    node: root.microphoneNode
+                },
+            ]
+            Item {
+                implicitWidth: 24
+                implicitHeight: 24
+                // anchors.centerIn: parent
+                VectorImage {
+                    id: svgImage
+                    width: parent.width
+                    height: parent.height
+                    source: modelData.node.audio.muted ? modelData.off : modelData.on
+                    visible: false
+                    fillMode: Image.PreserveAspectFit // Adjusts the SVG while keeping the aspect ratio
+                }
+                MultiEffect {
+                    source: svgImage
+                    width: parent.width
+                    height: parent.height
+                    // anchors.centerIn: parent
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+                    colorization: 1
+                    brightness: 1
+                    colorizationColor: modelData.node.audio.muted ? "#e53b3c" : "#b1b2b5"
+                }
+            }
+        }
+    }
+}

modules/quickshell/quickshell/bar/widgets/Workspaces.qml

@@ -36,7 +36,7 @@ RowLayout {
                         Hyprland.dispatch('workspace ' + index_workspace.id);
                     }
                     for (x in index_workspace.toplevels.values) {
-                        console.log(index_workspace.toplevels.values[x].title)
+                        console.log(index_workspace.toplevels.values[x].title);
                     }
                 }
             }

modules/quickshell/quickshell/bar/widgets/clock/Clock.qml

@@ -1,19 +1,28 @@
 import Quickshell
 import Quickshell.Io
 import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+import QtQuick.VectorImage
+import QtQuick.Effects
+import "common" as Common
 
-import "../common" as Common
-
-Item {
+Rectangle {
     id: root
-    width: text.width + 15
-    height: text.height
-    Common.Container {}
+    implicitWidth: clock.width + 4
+    implicitHeight: clock.height
+    radius: 5.5
+    color: "#2a2a2a" // Define item color
     Text {
+        id: clock
+        // width: parent.width - 4
+        height: 24
         anchors.centerIn: parent
-        id: text
+        verticalAlignment: Qt.AlignVCenter
         text: ClockData.time
-        font.pointSize: 10.25
-        color: "white"
+        font.pixelSize: 16
+        lineHeight: 1
+        color: "#cacaca"
     }
 }

modules/quickshell/quickshell/bar/widgets/clock/Date.qml

@@ -4,16 +4,21 @@ import QtQuick
 
 import "../common" as Common
 
-Item {
+Rectangle {
     id: root
-    width: text.width + 15
-    height: text.height
-    Common.Container {}
+    implicitWidth: clock.width + 4
+    implicitHeight: clock.height
+    radius: 5.5
+    color: "#2a2a2a" // Define item color
     Text {
+        id: clock
+        // width: parent.width - 4
+        height: 24
         anchors.centerIn: parent
-        id: text
+        verticalAlignment: Qt.AlignVCenter
         text: ClockData.date
-        font.pointSize: 10.25
-        color: "white"
+        font.pixelSize: 16
+        lineHeight: 1
+        color: "#cacaca"
     }
 }

modules/quickshell/quickshell/bar/widgets/common/ChildContainer.qml

@@ -0,0 +1,14 @@
+import Quickshell
+import QtQuick
+
+Rectangle {
+    z: 1
+    color: "#2a2a2a"
+    opacity: 20
+    anchors {
+        verticalCenter: parent.verticalCenter
+    }
+    height: 24
+    width: parent.width
+    radius: 5.5
+}

modules/quickshell/quickshell/bar/widgets/common/Icons.qml

@@ -6,25 +6,32 @@ import Quickshell.Io
 Singleton {
     id: root
 
+    readonly property var svgs: ({
+            micOff: "../../../assets/bar/V2/micOff.svg",
+            mic: "../../../assets/bar/V2/mic.svg",
+            speaker: "../../../assets/bar/V2/speaker.svg",
+            speakerOff: "../../../assets/bar/V2/speakerOff.svg"
+        })
+
     readonly property var audioIcons: ({
-        microphone: "",
-        microphoneMuted: "",
-        speaker: "󰕾",
-        speakerMuted: "󰖁",
-    })
+            microphone: "",
+            microphoneMuted: "",
+            speaker: "󰕾",
+            speakerMuted: "󰖁"
+        })
 
     // {class}: {icon}
     readonly property var appIcons: ({
-        "vesktop": "",
-        "steam": "",
-        "org.telegram.desktop": "",
-        "chromium": "",
-        "dev.zed.Zed": "",
-        "foot": "",
-        "gamescope": "󰺵",
-        "blender": "󰂫",
-        "Spotify": "",
-        "Unity": "",
-        "fallback": "󰏩"
-    })
+            "vesktop": "",
+            "steam": "",
+            "org.telegram.desktop": "",
+            "chromium": "",
+            "dev.zed.Zed": "",
+            "foot": "",
+            "gamescope": "󰺵",
+            "blender": "󰂫",
+            "Spotify": "",
+            "Unity": "",
+            "fallback": "󰏩"
+        })
 }

modules/quickshell/quickshell/bar/widgets/common/ParentContainer.qml

@@ -0,0 +1,17 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    RowLayout {
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    }
+    Rectangle {
+        z: -1
+        color: "black"
+        // anchors: parent.anchors
+        height: 28
+        width: parent.width
+        radius: 6.5
+    }
+}

modules/quickshell/quickshell/shell.qml

@@ -1,4 +1,4 @@
-//@ pragma UseQApplication
+// @ pragma UseQApplication
 import Quickshell
 import QtQuick
 import "bar" as Bar