style: format code

assets/cava.conf

@@ -1,6 +1,7 @@
 [general]
 bars = 14
 framerate = 60
+sensitivity=140
 
 [input]
 method = pulse

assets/icons/network.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M14 22H10C6.22876 22 4.34315 22 3.17157 20.7881C2 19.5763 2 17.6258 2 13.725V12.2039C2 9.91549 2 8.77128 2.5192 7.82274C3.0384 6.87421 3.98695 6.28551 5.88403 5.10813L7.88403 3.86687C9.88939 2.62229 10.8921 2 12 2C13.1079 2 14.1106 2.62229 16.116 3.86687L18.116 5.10812C20.0131 6.28551 20.9616 6.87421 21.4808 7.82274C22 8.77128 22 9.91549 22 12.2039V13.725C22 17.6258 22 19.5763 20.8284 20.7881C19.6569 22 17.7712 22 14 22ZM17.4498 12.192C14.4329 8.93571 9.56706 8.93571 6.55017 12.192C6.26866 12.4959 5.79413 12.514 5.49028 12.2325C5.18643 11.951 5.16832 11.4764 5.44983 11.1726C9.06036 7.27552 14.9396 7.27552 18.5502 11.1726C18.8317 11.4764 18.8136 11.951 18.5097 12.2325C18.2059 12.514 17.7313 12.4959 17.4498 12.192ZM15.4498 14.3505C13.5375 12.2864 10.4625 12.2864 8.55019 14.3505C8.26868 14.6544 7.79415 14.6725 7.4903 14.391C7.18645 14.1095 7.16834 13.6349 7.44985 13.3311C9.95581 10.6262 14.0442 10.6262 16.5502 13.3311C16.8317 13.6349 16.8136 14.1095 16.5097 14.391C16.2059 14.6725 15.7314 14.6544 15.4498 14.3505ZM13.4499 16.5095C12.6421 15.6377 11.358 15.6377 10.5502 16.5095C10.2687 16.8134 9.79417 16.8315 9.49031 16.55C9.18646 16.2684 9.16835 15.7939 9.44986 15.4901C10.8513 13.9775 13.1488 13.9775 14.5502 15.4901C14.8317 15.7939 14.8136 16.2684 14.5098 16.55C14.2059 16.8315 13.7314 16.8134 13.4499 16.5095Z" fill="#000"></path> </g></svg>

config/BarLayout.qml

@@ -11,7 +11,7 @@ Singleton {
         return `${Quickshell.shellPath("modules/bar")}/${name}.qml`;
     }
 
-    property var left: [root.widget("LauncherButton"), root.widget("PowerProfileWidget"), root.widget("GPUWidget"), root.widget("HomeWidget"), root.widget("MusicWidget")]
+    property var left: [root.widget("LauncherButton"), root.widget("NetworkWidget"), root.widget("PowerProfileWidget"), root.widget("GPUWidget"), root.widget("HomeWidget"), root.widget("MusicWidget")]
 
     property var center: [root.widget("CavaVisualizer"), root.widget("Workspaces"), root.widget("CavaVisualizer"),]
 

flake.nix

@@ -15,14 +15,12 @@
     };
   };
 
-  outputs =
+  outputs = {
-    {
     self,
     nixpkgs,
     quickshell,
     treefmt-nix,
-    }:
+  }: let
-    let
     system = "x86_64-linux";
     pkgs = nixpkgs.legacyPackages.${system};
 
@@ -37,13 +35,12 @@
       projectRootFile = "flake.nix";
 
       programs = {
-          nixfmt.enable = true;
+        alejandra.enable = true;
         qmlformat.enable = true;
         clang-format.enable = true;
       };
     };
-    in
+  in rec {
-    rec {
     formatter.${system} = treefmtEval.config.build.wrapper;
 
     packages.${system} = {

modules/bar/CavaVisualizer.qml

@@ -31,14 +31,28 @@ Rectangle {
                 id: bar
 
                 required property int index
-                readonly property real value: Cava.values[index] ?? 0
+                readonly property real level: Math.min(1, (Cava.values[index] ?? 0) / root.maxValue)
 
                 width: (barRow.width - barRow.spacing * (root.barCount - 1)) / root.barCount
-                height: Math.max(Theme.cava.barMinHeight, (bar.value / root.maxValue) * barRow.height)
+                height: Math.max(Theme.cava.barMinHeight, Math.pow(bar.level, 0.6) * barRow.height)
-                anchors.bottom: parent.bottom
+                anchors.verticalCenter: parent.verticalCenter
                 radius: bar.width / 2
                 color: Theme.colors.accent
                 antialiasing: true
+                opacity: 0.45 + (bar.level * 0.55)
+
+                Behavior on height {
+                    NumberAnimation {
+                        duration: 90
+                        easing.type: Easing.OutCubic
+                    }
+                }
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: 150
+                        easing.type: Easing.OutCubic
+                    }
+                }
             }
         }
     }

modules/bar/NetworkWidget.qml

@@ -0,0 +1,11 @@
+pragma ComponentBehavior: Bound
+
+import qs.ui
+import qs.services
+
+BarButton {
+    hoverHighlight: false
+    pointerCursor: false
+    label: Network.statusText
+    iconSource: Network.icon
+}

modules/bar/Workspaces.qml

@@ -4,11 +4,24 @@ import QtQuick
 import Quickshell.Hyprland
 import qs.config
 
-Row {
+Item {
     id: root
 
     property int count: 7
 
+    implicitWidth: pillsRow.implicitWidth
+    implicitHeight: Theme.workspaces.height
+    Behavior on implicitWidth {
+        NumberAnimation {
+            duration: Theme.duration
+            easing.type: Easing.OutQuint
+        }
+    }
+
+    Row {
+        id: pillsRow
+
+        anchors.fill: parent
         spacing: Theme.spacing
 
         Repeater {
@@ -21,14 +34,17 @@ Row {
                 property var ws: Hyprland.workspaces.values.find(w => w.id === pill.index + 1)
                 property bool isActive: Hyprland.focusedWorkspace?.id === (pill.index + 1)
 
+                z: 1
                 radius: Theme.workspaces.radius
                 implicitHeight: Theme.workspaces.height
                 implicitWidth: pill.isActive ? pill.implicitHeight * Theme.workspaces.activeWidthRatio : pill.implicitHeight
                 color: {
+                    if (pill.isActive)
+                        return "transparent";
                     if (handler.hovered)
                         return Theme.colors.accent;
-                if (pill.isActive || pill.ws)
+                    if (pill.ws)
-                    return Theme.colors.accent;
+                        return Theme.colors.secondaryForeground;
                     return Theme.colors.inActive;
                 }
 
@@ -36,7 +52,7 @@ Row {
                     hoverEnabled: true
                     anchors.fill: parent
                     cursorShape: Qt.PointingHandCursor
-                onClicked: Hyprland.dispatch("workspace " + (pill.index + 1))
+                    onClicked: Hyprland.dispatch("hl.dsp.focus({ workspace = " + (pill.index + 1) + " })")
                 }
 
                 HoverHandler {
@@ -45,7 +61,7 @@ Row {
 
                 Behavior on color {
                     ColorAnimation {
-                    duration: Theme.duration
+                        duration: Theme.duration + 50
                     }
                 }
 
@@ -58,3 +74,71 @@ Row {
             }
         }
     }
+
+    Rectangle {
+        id: highlight
+
+        z: 2
+        radius: Theme.workspaces.radius
+        color: Theme.colors.accent
+
+        readonly property real activeW: Theme.workspaces.height * Theme.workspaces.activeWidthRatio
+        readonly property real inactiveW: Theme.workspaces.height
+        property int curIdx: Hyprland.focusedWorkspace ? Hyprland.focusedWorkspace.id - 1 : -1
+        property int prevIdx: 0
+
+        function getX(index, activeIndex) {
+            if (index < 0)
+                return 0;
+            let x = 0;
+            for (let i = 0; i < index; i++)
+                x += (i === activeIndex ? activeW : inactiveW) + pillsRow.spacing;
+            return x;
+        }
+
+        property real targetLeft: curIdx >= 0 ? getX(curIdx, curIdx) : 0
+        property real targetRight: curIdx >= 0 ? targetLeft + activeW : 0
+        property real actualLeft: targetLeft
+        property real actualRight: targetRight
+
+        Behavior on actualLeft {
+            NumberAnimation {
+                id: leftAnim
+                duration: Theme.duration
+                easing.type: Easing.OutQuint
+            }
+        }
+
+        Behavior on actualRight {
+            NumberAnimation {
+                id: rightAnim
+                duration: Theme.duration
+                easing.type: Easing.OutQuint
+            }
+        }
+
+        onCurIdxChanged: {
+            if (curIdx >= 0 && prevIdx >= 0) {
+                if (curIdx > prevIdx) {
+                    leftAnim.duration = 400;
+                    rightAnim.duration = 300;
+                } else if (curIdx < prevIdx) {
+                    leftAnim.duration = 300;
+                    rightAnim.duration = 400;
+                }
+            }
+            if (curIdx >= 0)
+                prevIdx = curIdx;
+        }
+
+        x: actualLeft
+        width: actualRight - actualLeft
+        height: parent.height
+        opacity: curIdx >= 0 ? 1 : 0
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 180
+            }
+        }
+    }
+}

package.nix

@@ -11,11 +11,11 @@
   wallust,
   nerd-fonts,
   extraRuntimeDeps ? [],
-}:
+}: let
-let
   version = "0.1.0";
 
-  runtimeDeps = [
+  runtimeDeps =
+    [
       cava
       wallust
     ]
@@ -29,9 +29,7 @@ let
   # git-tracked paths) while dropping build artifacts.
   src = lib.cleanSourceWith {
     src = lib.cleanSource ./.;
-    filter =
+    filter = path: _: let
-      path: _:
-      let
       name = baseNameOf path;
     in
       !(name == "dist" || name == "result" || name == "result-bin" || lib.hasPrefix "build" name);

services/Network.qml

@@ -0,0 +1,81 @@
+pragma Singleton
+
+import QtQuick
+import Quickshell
+import Quickshell.Networking
+
+Singleton {
+    id: root
+
+    readonly property url icon: `${Quickshell.shellPath("assets")}/icons/network.svg`
+
+    property var wifiDevice: {
+        for (const device of Networking.devices.values) {
+            if (device.type === DeviceType.Wifi)
+                return device;
+        }
+        return null;
+    }
+
+    property var wiredDevice: {
+        for (const device of Networking.devices.values) {
+            if (device.type === DeviceType.Wired)
+                return device;
+        }
+        return null;
+    }
+
+    readonly property bool ethernetConnected: !!(root.wiredDevice && root.wiredDevice.connected)
+
+    readonly property bool wifiConnected: !!(root.wifiDevice && root.wifiDevice.connected)
+
+    readonly property bool wifiConnecting: !!(root.wifiDevice && root.wifiDevice.state === ConnectionState.Connecting)
+
+    property var activeNetwork: null
+
+    function refreshActiveNetwork() {
+        root.activeNetwork = null;
+
+        if (!root.wifiDevice || !root.wifiDevice.networks)
+            return;
+
+        for (const network of root.wifiDevice.networks.values) {
+            if (network.connected) {
+                root.activeNetwork = network;
+                return;
+            }
+        }
+    }
+
+    readonly property string statusText: {
+        if (root.ethernetConnected)
+            return "Wired";
+
+        if (root.wifiConnecting)
+            return "Connecting";
+
+        if (root.wifiConnected && root.activeNetwork)
+            return root.activeNetwork.name;
+
+        return "NA";
+    }
+
+    Connections {
+        target: root.wifiDevice ? root.wifiDevice.networks : null
+
+        function onValuesChanged() {
+            root.refreshActiveNetwork();
+        }
+    }
+
+    Timer {
+        interval: 1000
+        running: true
+        repeat: true
+        triggeredOnStart: true
+
+        onTriggered: {
+            root.refreshActiveNetwork();
+        }
+    }
+}