Squash merge bar-rework into main

.gitignore

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

modules/nixvim/home.nix

@@ -37,12 +37,16 @@ in
       configs = true;
     };
     plugins = {
+      todo-comments.enable = true;
       lsp-status.enable = true;
       lsp = {
         enable = true;
         servers = {
           qmlls = {
             enable = true;
+            config = {
+              cmd = "-E";
+            };
           };
           rust_analyzer = {
             enable = true;
@@ -57,6 +61,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/Mic.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-420q-41.92 0-70.96-29.04Q380-478.08 380-520v-240q0-41.92 29.04-70.96Q438.08-860 480-860q41.92 0 70.96 29.04Q580-801.92 580-760v240q0 41.92-29.04 70.96Q521.92-420 480-420Zm-30 290v-131.85q-99-11.31-164.5-84.92Q220-420.39 220-520h60q0 83 58.5 141.5T480-320q83 0 141.5-58.5T680-520h60q0 99.61-65.5 173.23Q609-273.16 510-261.85V-130h-60Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M479.93-379q-56.47 0-95.94-40.01-39.47-40.02-39.47-96.47v-232.04q0-56.45 39.53-95.97Q423.59-883 480.07-883q56.47 0 95.94 39.51 39.47 39.52 39.47 95.97v232.04q0 56.45-39.53 96.47Q536.41-379 479.93-379ZM434.02-93.52v-124.76q-111.11-14.13-183.26-99.16-72.15-85.03-72.15-198.04h92.52q0 87.09 61.13 147.98 61.13 60.89 147.85 60.89 86.73 0 147.75-61.09 61.01-61.1 61.01-147.78h92.52q0 113.24-72.15 198.16-72.15 84.91-183.26 99.04v124.76h-91.96Z"/></svg>

modules/quickshell/quickshell/assets/bar/MutedMic.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#EA3323"><path d="m710-362-58-58q14-23 21-48t7-52h80q0 44-13 83.5T710-362ZM592-482 360-714v-46q0-50 35-85t85-35q50 0 85 35t35 85v240q0 11-2.5 20t-5.5 18ZM440-120v-124q-104-14-172-92.5T200-520h80q0 83 58.5 141.5T480-320q34 0 64.5-10.5T600-360l57 57q-29 23-63.5 38.5T520-244v124h-80Zm352 64L56-792l56-56 736 736-56 56Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="m735.55-357.02-68.57-68.7q11.17-19.04 16.48-41.43 5.3-22.39 5.3-48.33h91.96q0 42.93-11.12 83.44-11.12 40.52-34.05 75.02ZM610.07-482.37 348.93-744v-31.22q7.35-44.11 43.99-75.94Q429.57-883 479.33-883q56.54 0 96.29 39.47 39.75 39.46 39.75 96.01v232.04q0 8.87-1.43 17.87-1.44 9-3.87 15.24ZM433.35-93.52v-124.7q-111.11-14.13-183.26-99.02-72.16-84.9-72.16-198.24h92.53q0 87.09 61.01 147.98 61.01 60.89 147.86 60.89 39.08 0 74.11-13.59 35.02-13.59 62.28-37.58l67 67q-31.89 29.15-71.76 47.9-39.87 18.74-85.66 24.83v124.53h-91.95Zm351.82 20.5-723.5-723.5 57.66-57.65 723 723-57.16 58.15Z"/></svg>

modules/quickshell/quickshell/assets/bar/MutedSpeaker.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#EA3323"><path d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M790.15-48.91 666.02-174.17q-20.24 12.24-43.19 21.57-22.96 9.34-48.2 14.71v-86.61q7.98-2.8 15.49-5.61 7.51-2.8 15.12-6.54L499.63-343.39v215.17L281.06-346.78h-166.3v-266.44h120.13l-187.61-191 58.65-58.65 743.44 754.74-59.22 59.22Zm-.3-238.87-60.72-61.85q17-29.44 25.75-62.4 8.75-32.97 8.75-68.47 0-88.43-52.56-158.65-52.57-70.22-136.44-97.35v-86.61q119.89 28.57 196.47 123.89 76.58 95.33 76.58 218.72 0 53.76-15.1 102.14t-42.73 90.58ZM669.41-409.91l-94.78-95.92v-137.95q48.76 22.13 79.9 65.79 31.15 43.66 31.15 97.99 0 19.2-4.07 36.61t-12.2 33.48ZM499.63-582.52 376.41-708.57l123.22-123.21v249.26Z"/></svg>

modules/quickshell/quickshell/assets/bar/Speaker.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M561.54-155.62v-62q86.54-27.53 139.42-100 52.89-72.46 52.89-163.38t-52.89-163.38q-52.88-72.47-139.42-100v-62q111.69 29.92 182 119.92 70.3 90 70.3 205.46 0 115.46-70.3 205.46-70.31 90-182 119.92ZM146.16-380v-200h148.46l171.53-171.53v543.06L294.62-380H146.16Zm415.38 46.15v-294.3q40.46 22 62.54 61.96 22.07 39.96 22.07 86.19 0 45.61-22.27 84.88-22.27 39.27-62.34 61.27Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M565.7-158.89v-79.61q80.43-24.13 130.71-90.85 50.29-66.72 50.29-150.15t-50.79-149.15q-50.78-65.72-130.21-92.85v-79.61q111.89 25.57 184.18 115.64 72.3 90.08 72.3 204.97t-71.8 205.47q-71.79 90.57-184.68 116.14ZM137.82-371.78v-218.44h150.31L498.7-800.78v639.56L288.13-371.78H137.82Zm427.88 44.56v-306.56q46.76 20.69 76.62 61.07 29.86 40.38 29.86 91.71 0 51.83-29.86 92.24t-76.62 61.54Z"/></svg>

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="#FFFFFF"><path d="M479.93-379q-56.47 0-95.94-40.01-39.47-40.02-39.47-96.47v-232.04q0-56.45 39.53-95.97Q423.59-883 480.07-883q56.47 0 95.94 39.51 39.47 39.52 39.47 95.97v232.04q0 56.45-39.53 96.47Q536.41-379 479.93-379ZM434.02-93.52v-124.76q-111.11-14.13-183.26-99.16-72.15-85.03-72.15-198.04h92.52q0 87.09 61.13 147.98 61.13 60.89 147.85 60.89 86.73 0 147.75-61.09 61.01-61.1 61.01-147.78h92.52q0 113.24-72.15 198.16-72.15 84.91-183.26 99.04v124.76h-91.96Z"/></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="#FFFFFF"><path d="m735.55-357.02-68.57-68.7q11.17-19.04 16.48-41.43 5.3-22.39 5.3-48.33h91.96q0 42.93-11.12 83.44-11.12 40.52-34.05 75.02ZM610.07-482.37 348.93-744v-31.22q7.35-44.11 43.99-75.94Q429.57-883 479.33-883q56.54 0 96.29 39.47 39.75 39.46 39.75 96.01v232.04q0 8.87-1.43 17.87-1.44 9-3.87 15.24ZM433.35-93.52v-124.7q-111.11-14.13-183.26-99.02-72.16-84.9-72.16-198.24h92.53q0 87.09 61.01 147.98 61.01 60.89 147.86 60.89 39.08 0 74.11-13.59 35.02-13.59 62.28-37.58l67 67q-31.89 29.15-71.76 47.9-39.87 18.74-85.66 24.83v124.53h-91.95Zm351.82 20.5-723.5-723.5 57.66-57.65 723 723-57.16 58.15Z"/></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="#FFFFFF"><path d="M565.7-158.89v-79.61q80.43-24.13 130.71-90.85 50.29-66.72 50.29-150.15t-50.79-149.15q-50.78-65.72-130.21-92.85v-79.61q111.89 25.57 184.18 115.64 72.3 90.08 72.3 204.97t-71.8 205.47q-71.79 90.57-184.68 116.14ZM137.82-371.78v-218.44h150.31L498.7-800.78v639.56L288.13-371.78H137.82Zm427.88 44.56v-306.56q46.76 20.69 76.62 61.07 29.86 40.38 29.86 91.71 0 51.83-29.86 92.24t-76.62 61.54Z"/></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="#FFFFFF"><path d="M790.15-48.91 666.02-174.17q-20.24 12.24-43.19 21.57-22.96 9.34-48.2 14.71v-86.61q7.98-2.8 15.49-5.61 7.51-2.8 15.12-6.54L499.63-343.39v215.17L281.06-346.78h-166.3v-266.44h120.13l-187.61-191 58.65-58.65 743.44 754.74-59.22 59.22Zm-.3-238.87-60.72-61.85q17-29.44 25.75-62.4 8.75-32.97 8.75-68.47 0-88.43-52.56-158.65-52.57-70.22-136.44-97.35v-86.61q119.89 28.57 196.47 123.89 76.58 95.33 76.58 218.72 0 53.76-15.1 102.14t-42.73 90.58ZM669.41-409.91l-94.78-95.92v-137.95q48.76 22.13 79.9 65.79 31.15 43.66 31.15 97.99 0 19.2-4.07 36.61t-12.2 33.48ZM499.63-582.52 376.41-708.57l123.22-123.21v249.26Z"/></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 {
-
-        PanelWindow {
     property var modelData
-            screen: modelData.values[0];
+    screen: modelData.values[0]
 
-            color: '#20ffffff'
+    color: Common.Colors.colors.mainBackground
     anchors {
         top: true
         left: true
         right: true
     }
 
-        implicitHeight: 32
+    implicitHeight: 31
     RowLayout {
-            height: 28
+        height: 30
         anchors {
             top: parent.top
             left: parent.left
             right: parent.right
             // bottomMargin: 2
-                leftMargin: 10
+            leftMargin: 5
-                rightMargin: 10
+            rightMargin: 5
-            }
-            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 {
+            // Left
-                        text: HyprlandWindowTracker.HyprlandWindowTracker.aaaa
+            Layout.alignment: Qt.AlignLeft
+            Widgets.Workspaces {}
         }
-                    visible: Player.activePlayer.isPlaying()
+        RowLayout {
-                    Player.PlayerWidgetV2 {
+            // Center
-                    }
+            Layout.alignment: Qt.AlignCenter
-                }
+        }
-                    Widgets.SystemTray {
+        RowLayout {
-                        id: systemTray
+            // Right
-                    }
+            Layout.alignment: Qt.AlignRight
-            }
+            Widgets.Demo {}
-        }
-        Rectangle {
-            anchors {
-                bottom: parent.bottom
-                left: parent.left
-                right: parent.right
-            }
-            height: 1
-            color: "#8d8d8d"
         }
     }
+    // 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,55 @@ import QtQuick
 import QtQuick.Layouts
 import Quickshell.Widgets
 import Quickshell.Services.Pipewire
+import QtQuick.VectorImage
+import QtQuick.Effects
+import QtQuick.Shapes 1.10
+import QtQuick.Effects
 import "common" as Common
 
-
+Rectangle {
-Item {
     id: root
     property PwNode speakerNode: Pipewire.defaultAudioSink
     property PwNode microphoneNode: Pipewire.defaultAudioSource
-    PwObjectTracker { objects: [ root.microphoneNode, root.speakerNode ] }
+    PwObjectTracker {
-
+        objects: [root.microphoneNode, root.speakerNode]
-    width: row.width
+    }
-    height: row.height
+    implicitWidth: itemContent.width + 8
-
+    implicitHeight: 24
-    // console.log("a");
+    radius: 5.5
-
+    Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    color: Common.Colors.colors.secondary // Define item color
+		// color: "#2a2a2a"
     RowLayout {
-        id: row
+        id: itemContent
-        Item {
-            implicitWidth: 28
-            implicitHeight: 28
-            Rectangle {
-                width: parent.width
-                height: parent.height
-                radius: 7
-                color: "black"
-            }
-            Text {
 				anchors.centerIn: parent
-                // implicitSize: 25
+				// spacing: 100
-                font.pixelSize: 28
+        Repeater {
-                color: root.speakerNode.audio.muted ? "#FF474C" : "white"
+            model: [
-                font.family: "CaskaydiaCove Nerd Font Mono"
+                {
-                text: root.speakerNode.audio.muted ? Common.Icons.audioIcons.speakerMuted : Common.Icons.audioIcons.speaker
+                    on: Common.Icons.audioIcons["speaker"],
-            }
+                    off: Common.Icons.audioIcons["speakerMuted"],
-        }
+                    node: root.speakerNode
+                },
+                {
+                    on: Common.Icons.audioIcons["microphone"],
+                    off: Common.Icons.audioIcons["microphoneMuted"],
+                    node: root.microphoneNode
+                },
+            ]
             Item {
-            implicitWidth: 28
+							id: meow
-            implicitHeight: 28
+                implicitWidth: 24
-            Rectangle {
+								Layout.alignment: Qt.AlignHCenter
-                width: parent.width
+                implicitHeight: 24
-                height: parent.height
-                radius: 7
-                color: "black"
-            }
 								Text {
-                anchors.centerIn: parent
+									id: textElement
-                // implicitSize: 25
+									anchors.centerIn: parent // Ensure the text fills the parent item
-                font.pixelSize: 34
+									text: modelData.node.audio.muted ? modelData.off : modelData.on
-                color: root.microphoneNode.audio.muted ? "#FF474C" : "white"
+									font.pointSize: 18.25
-                font.family: "CaskaydiaCove Nerd Font Mono"
+									font.weight: Font.DemiBold
-                text: root.microphoneNode.audio.muted ? Common.Icons.audioIcons.microphoneMuted : Common.Icons.audioIcons.microphone
+									color: modelData.node.audio.muted ? Common.Colors.colors.critial2 : Common.Colors.colors.primary
+								}
             }
         }
     }

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

@@ -0,0 +1,76 @@
+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 {
+	// TODO eventually fix the alignment (it isnt centered horizentally)
+    id: root
+    property int battPercent: 58
+    implicitWidth: itemContent.width + 8
+    implicitHeight: 24
+		visible: {if (UPower.displayDevice.ready) { true } else {false}}
+    radius: 5.5
+    Layout.alignment: Qt.AlignVCenter
+    color: "#2a2a2a" // Define item color
+    RowLayout {
+        id: itemContent
+        implicitWidth: 24
+        implicitHeight: 24
+        anchors.centerIn: parent
+				Text {
+					// anchors.centerIn: parent
+					text: UPower.displayDevice.percentage + "%"
+					color: Common.Colors.colors.primary
+					font.weight: Font.DemiBold
+					font.pointSize: 12
+				}
+				Item {
+					Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+					Text {
+						anchors.centerIn: parent
+						text: root.getBatteryState(UPower.displayDevice.percentage, (UPower.displayDevice.changeRate > 0))
+						color: root.getBatteryColor(UPower.displayDevice.percentage)
+						font.weight: Font.DemiBold
+						font.pointSize: 24/1.4
+				}
+			}
+    }
+function getBatteryState(level, isCharging) {
+    if (level === null || level === 0) {
+        // Return the battery empty icon
+        return isCharging ? Common.Icons.battery.charging["1"] : Common.Icons.battery["0"];
+    }
+
+    if (level === 100) {
+        // Return the battery full icon
+        return isCharging ? Common.Icons.battery.charging["10"] : Common.Icons.battery["10"];
+    }
+
+    // Calculate step as a value between 1 and 10 (divide level into 10 ranges)
+    let step = Math.ceil(level / 10); // Range mapping
+    if (step > 10) step = 10; // Clamp to 10 if it exceeds bounds
+
+    // Return the correct icon based on state
+    return isCharging ? Common.Icons.battery.charging[String(step)] : Common.Icons.battery[String(step)];
+}
+function getBatteryColor(level) {
+    if (level === null || level === 0) {
+        // Use critical color for empty battery
+        return Common.Colors.colors.critial2;
+    }
+
+    if (level > 0 && level <= 20) {
+        // Use critical color for low battery
+        return Common.Colors.colors.critial2;
+    }
+    // Default color if no specific condition is met
+    return Common.Colors.colors.primary;
+}
+}

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

@@ -0,0 +1,41 @@
+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: Common.Colors.colors.background
+    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 {}
+						Common.VerticalSeprator {}
+            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
+Rectangle {
-
-Item {
     id: root
-    width: text.width + 15
+    implicitWidth: clock.width + 4
-    height: text.height
+    implicitHeight: clock.height
-    Common.Container {}
+    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
+        font.pixelSize: 16
-        color: "white"
+        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
+    implicitWidth: clock.width + 4
-    height: text.height
+    implicitHeight: clock.height
-    Common.Container {}
+    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
+        font.pixelSize: 16
-        color: "white"
+        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/Colors.qml

@@ -6,7 +6,16 @@ import Quickshell.Io
 Singleton {
     id: root
 
+		// XX (alpha) XXXXXX (color)
+
+		// For oled screen that risk burn in, set up these colors as semi-transparent and have a rotating wallpaper (!!)
     readonly property var colors: ({
-        "primary": "",
+        primary: "#59b1b2b5", // Icons & Text colors
+				secondary: "#BF2a2a2a", // Pill container colors
+				background: "#BF000000", // Background of containers
+				mainBackground: "#20ffffff", // Color of the main bar
+				warning: "#E9D502", // (i.e battery nearing low)
+				critial: "#e53b3c", // (i.e battery is low)
+				critial2: "#e53b3c", // (Speaker and Mic being off)
     })
 }

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

@@ -6,11 +6,43 @@ 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 battery: ({
+			"0": "󰂎",
+			"1": "󰁺",
+			"2": "󰁻",
+			"3": "󰁼",
+			"4": "󰁾",
+			"5": "󰁾",
+			"6": "󰁿",
+			"7": "󰂀",
+			"8": "󰂁",
+			"9": "󰂂",
+			"10": "󰁹",
+			charging: ({
+				"1": "󰢜",
+				"2": "󰂆",
+				"3": "󰂇",
+				"4": "󰂈",
+				"5": "󰢝",
+				"6": "󰂉",
+				"7": "󰢞",
+				"8": "󰂊",
+				"9": "󰂋",
+				"10": "󰂅",
+			})
+		})
+
     readonly property var audioIcons: ({
-        microphone: "",
+            microphone: "󰍬",
-        microphoneMuted: "",
+            microphoneMuted: "󰍭",
             speaker: "󰕾",
-        speakerMuted: "󰖁",
+            speakerMuted: "󰖁"
         })
 
     // {class}: {icon}

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

@@ -0,0 +1,30 @@
+// ColorOverlayShader.qml
+import QtQuick 2.15
+    Rectangle {
+        id: mainContent
+        anchors.fill: parent
+        color: "blue"
+
+        // Clip the rectangle to a shape
+        clip: true
+
+        Shape {
+            anchors.fill: parent
+
+            // Custom Path defined as a vector
+            Path {
+                PathSvg {
+                    path: "M10,80 C40,10 65,10 95,80 S150,150 180,80" // Vector path
+                }
+            }
+
+            ShapePath {
+                strokeColor: "transparent" // No stroke, act only as the mask
+                fillColor: "blue"
+                fillGradient: Gradient {
+                    GradientStop { position: 0.0; color: "yellow" }
+                    GradientStop { position: 1.0; color: "orange" }
+                }
+            }
+        }
+    }

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/bar/widgets/common/VerticalSeprator.qml

@@ -2,12 +2,16 @@ import Quickshell
 import QtQml
 import QtQuick
 
-    Rectangle {
+    Item {
-        id: a
+        id: root
         anchors {
             top: parent.top
             bottom: parent.bottom
         }
-        width: 2
+				Rectangle {
+					anchors.centerIn: root
+					implicitHeight: root.height - 4
+					width: 1
 					color: "#8d8d8d"
 				}
+    }

modules/quickshell/quickshell/shell.qml

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