refactor(bar): restructure panel window and corners

2026-09-19 10:19:02 +05:30 · 2026-08-23 02:02:38 +05:30
parent ab5587fd90
commit a1533e73c7
4 changed files with 444 additions and 309 deletions
--- a/Bar.qml
+++ b/Bar.qml
@@ -4,33 +4,151 @@ import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
 import QtQuick.Effects
-import Quickshell.Wayland
+import QtQuick.Shapes
 import Quickshell.Hyprland
-import Quickshell.Services.UPower
 import Quickshell.Services.SystemTray
+import Quickshell.Widgets
+import Quickshell.Wayland
 import qs.config

-Scope {
-    Variants {
-        model: Quickshell.screens
-
 PanelWindow {
-            required property var modelData
-            screen: modelData
-            color: "transparent"
+  id: window

-            anchors {
-                top: true
+  property color barColor: Appearance.colors.background
+
+  color: "transparent"
+  exclusionMode: ExclusionMode.Ignore
+  mask: Region {
+    item: cornersArea
+    intersection: Intersection.Subtract
  }

-            implicitHeight: 50
-            implicitWidth: 1150
+  anchors {
+    left: true
+    top: true
+    right: true
+    bottom: true
+  }

+  // Inline Components
+  component Corner: WrapperItem {
+    id: root
+
+    property int corner
+    property real radius: Appearance.radius
+    property color color
+
+    Component.onCompleted: {
+      switch (corner) {
+      case 0:
+        anchors.left = parent.left;
+        anchors.top = parent.top;
+        break;
+      case 1:
+        anchors.top = parent.top;
+        anchors.right = parent.right;
+        rotation = 90;
+        break;
+      case 2:
+        anchors.right = parent.right;
+        anchors.bottom = parent.bottom;
+        rotation = 180;
+        break;
+      case 3:
+        anchors.left = parent.left;
+        anchors.bottom = parent.bottom;
+        rotation = -90;
+        break;
+      }
+    }
+
+    Shape {
+      preferredRendererType: Shape.CurveRenderer
+
+      ShapePath {
+        strokeWidth: 0
+        fillColor: root.color
+        startX: root.radius
+
+        PathArc {
+          relativeX: -root.radius
+          relativeY: root.radius
+          radiusX: root.radius
+          radiusY: radiusX
+          direction: PathArc.Counterclockwise
+        }
+
+        PathLine {
+          relativeX: 0
+          relativeY: -root.radius
+        }
+
+        PathLine {
+          relativeX: root.radius
+          relativeY: 0
+        }
+      }
+    }
+  }
+  component Exclusion: PanelWindow {
+    property string name
+    implicitWidth: 0
+    implicitHeight: 0
+    WlrLayershell.namespace: `quickshell:${name}ExclusionZone`
+  }
+
+  // Exclusions
+  Scope {
+    Exclusion {
+      name: "left"
+      exclusiveZone: leftBar.implicitWidth
+      anchors.left: true
+    }
+    Exclusion {
+      name: "top"
+      exclusiveZone: topBar.implicitHeight
+      anchors.top: true
+    }
+    Exclusion {
+      name: "right"
+      exclusiveZone: rightBar.implicitWidth
+      anchors.right: true
+    }
+    Exclusion {
+      name: "bottom"
+      exclusiveZone: bottomBar.implicitHeight
+      anchors.bottom: true
+    }
+  }
+
+  // Bars
  Rectangle {
-                anchors.fill: parent
-                anchors.topMargin: 10
-                radius: Appearance.radius
-                color: Appearance.colors.background
+    id: leftBar
+    implicitWidth: 10
+    implicitHeight: QsWindow.window?.height ?? 0
+    color: window.barColor
+    anchors.left: parent.left
+  }
+  Rectangle {
+    id: rightBar
+    implicitWidth: 10
+    implicitHeight: QsWindow.window?.height ?? 0
+    color: window.barColor
+    anchors.right: parent.right
+  }
+  Rectangle {
+    id: bottomBar
+    implicitWidth: QsWindow.window?.width ?? 0
+    implicitHeight: 10
+    color: window.barColor
+    anchors.bottom: parent.bottom
+  }
+  Rectangle {
+    id: topBar
+    implicitWidth: QsWindow.window?.width ?? 0
+    implicitHeight: 50
+    color: window.barColor
+    anchors.top: parent.top

    FlexboxLayout {
      id: flexLayout
@@ -41,6 +159,7 @@ Scope {
      direction: FlexboxLayout.Row
      justifyContent: FlexboxLayout.JustifySpaceBetween

+
      Rectangle {
        color: 'transparent'
        implicitHeight: parent.height
@@ -82,20 +201,15 @@ Scope {
          }

          Button {
-                                property real percentage: Math.round(UPower.displayDevice.percentage * 100)
-                                property real energyRate: UPower.displayDevice.changeRate
-                                property string iconBase: Quickshell.shellPath("assets") + "/icons/"
-                                property string iconName: parent.percentage < 30 ? "battery-low.svg" : parent.percentage < 70 ? "battery-medium.svg" : "battery-full.svg"
-
            padding: Appearance.padding

-                                text: `${percentage}% ${energyRate}W`
+            text: `${Battery.percentage}% ${Battery.energyRate}W`
            palette.buttonText: Appearance.colors.foreground
            font.family: Appearance.font.family
            font.pointSize: Appearance.font.pointSize

            icon.color: Appearance.colors.foreground
-                                icon.source: iconBase + iconName
+            icon.source: Battery.icon

            background: Rectangle {
              anchors.fill: parent
@@ -176,69 +290,12 @@ Scope {
          anchors.right: parent.right
          spacing: Appearance.spacing

-                            Button {
-                                padding: Appearance.padding
-                                display: AbstractButton.IconOnly
-
-                                icon.color: Appearance.colors.foreground
-                                icon.source: Quickshell.shellPath("assets") + "/icons/wifi.svg"
-                                onClicked: {
-                                    Quickshell.execDetached(["vicinae", "vicinae://extensions/dagimg-dot/wifi-commander/scan-wifi"]);
-                                }
-
-                                hoverEnabled: true
-
-                                HoverHandler {
-                                    cursorShape: Qt.PointingHandCursor
-                                }
-
-                                background: Rectangle {
-                                    anchors.fill: parent
-                                    radius: Appearance.radius
-                                    color: parent.hovered ? Appearance.colors.inActive : Appearance.colors.background
-
-                                    Behavior on color {
-                                        ColorAnimation {
-                                            duration: Appearance.duration
-                                        }
-                                    }
-                                }
-                            }
-
-                            Button {
-                                padding: Appearance.padding
-                                display: AbstractButton.IconOnly
-
-                                icon.color: Appearance.colors.foreground
-                                icon.source: Quickshell.shellPath("assets") + "/icons/bluetooth.svg"
-                                onClicked: {
-                                    Quickshell.execDetached(["vicinae", "vicinae://extensions/Gelei/bluetooth/devices"]);
-                                }
-
-                                hoverEnabled: true
-
-                                HoverHandler {
-                                    cursorShape: Qt.PointingHandCursor
-                                }
-
-                                background: Rectangle {
-                                    anchors.fill: parent
-                                    radius: Appearance.radius
-                                    color: parent.hovered ? Appearance.colors.inActive : Appearance.colors.background
-
-                                    Behavior on color {
-                                        ColorAnimation {
-                                            duration: Appearance.duration
-                                        }
-                                    }
-                                }
-                            }
-
          Rectangle {
            implicitWidth: sysTrayRow.implicitWidth + 10
            implicitHeight: parent.height
            radius: Appearance.radius
            color: Appearance.colors.inActive
+            visible: SystemTray.items.values.length > 0

            Row {
              id: sysTrayRow
@@ -250,8 +307,8 @@ Scope {
                model: SystemTray.items.values.length
                Image {
                  source: SystemTray.items.values[index].icon
-                                            height: parent.parent.height - 15
-                                            width: parent.parent.height - 15
+                  height: parent.parent.height - 18
+                  width: parent.parent.height - 18
                }
              }
            }
@@ -300,7 +357,27 @@ Scope {
        }
      }
    }
+
+  }
+
+  Rectangle {
+    id: cornersArea
+    implicitWidth: QsWindow.window?.width - (leftBar.implicitWidth + rightBar.implicitWidth)
+    implicitHeight: QsWindow.window?.height - (topBar.implicitHeight + bottomBar.implicitHeight)
+    color: "transparent"
+    x: leftBar.implicitWidth
+    y: topBar.implicitHeight
+
+    Repeater {
+      model: [0, 1, 2, 3]
+
+      Corner {
+        required property int modelData
+        corner: modelData
+        color: window.barColor
      }
    }
  }
 }
+
+
--- a/Battery.qml
+++ b/Battery.qml
@@ -0,0 +1,13 @@
+pragma Singleton
+
+import Quickshell
+import QtQuick
+import Quickshell.Services.UPower
+
+Singleton {
+    id: root
+    readonly property int percentage: Math.round(UPower.displayDevice.percentage * 100)
+    readonly property real energyRate: UPower.displayDevice.changeRate
+    readonly property string iconName: root.percentage < 30 ? "battery-low.svg" : root.percentage < 70 ? "battery-medium.svg" : "battery-full.svg"
+    readonly property url icon: `${Quickshell.shellPath("assets")}/icons/${root.iconName}`
+}
--- a/flake.lock
+++ b/flake.lock
@@ -2,15 +2,15 @@
  "nodes": {
    "nixpkgs": {
      "locked": {
-        "lastModified": 1771848320,
-        "narHash": "sha256-0MAd+0mun3K/Ns8JATeHT1sX28faLII5hVLq0L3BdZU=",
-        "owner": "nixos",
+        "lastModified": 1787360063,
+        "narHash": "sha256-dt4WdcvsA8/RCe+VZZwqU0X+XMM3wBbGCWA0/sFWzGo=",
+        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "2fc6539b481e1d2569f25f8799236694180c0993",
+        "rev": "2c423e03bbafcff28bfadc6781a4a8257f205cb5",
        "type": "github"
      },
      "original": {
-        "owner": "nixos",
+        "owner": "NixOS",
        "ref": "nixos-unstable",
        "repo": "nixpkgs",
        "type": "github"
@@ -23,11 +23,11 @@
        ]
      },
      "locked": {
-        "lastModified": 1771926182,
-        "narHash": "sha256-QbXuSLhiSxOq6ydBL3+KGe1aiYWBW+e3J6qjJZaRMq0=",
+        "lastModified": 1787279335,
+        "narHash": "sha256-CLX2Zp5i5BuLbOxNOkwRd9YY84IOrACNxBV79o9/F9Y=",
        "ref": "refs/heads/master",
-        "rev": "cddb4f061bab495f4473ca5f2c571b6c710efef7",
-        "revCount": 744,
+        "rev": "1a4716cde794a59928d9d9fc15f2afc7a95de360",
+        "revCount": 846,
        "type": "git",
        "url": "https://git.outfoxxed.me/outfoxxed/quickshell"
      },
@@ -39,7 +39,28 @@
    "root": {
      "inputs": {
        "nixpkgs": "nixpkgs",
-        "quickshell": "quickshell"
+        "quickshell": "quickshell",
+        "treefmt-nix": "treefmt-nix"
+      }
+    },
+    "treefmt-nix": {
+      "inputs": {
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1786901030,
+        "narHash": "sha256-WSFCsDSE5ffgD2MqzkM2CYjeFiKhRF/dJUN8uedb6YE=",
+        "owner": "numtide",
+        "repo": "treefmt-nix",
+        "rev": "27b3b12a8e6375f28ebe122f07d230ca5459bbfa",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "treefmt-nix",
+        "type": "github"
      }
    }
  },
--- a/flake.nix
+++ b/flake.nix
@@ -2,30 +2,54 @@
  description = "tux's widgets for wayland";

  inputs = {
-    nixpkgs.url = "github:nixos/nixpkgs?ref=nixos-unstable";
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";

    quickshell = {
      url = "git+https://git.outfoxxed.me/outfoxxed/quickshell";
      inputs.nixpkgs.follows = "nixpkgs";
    };
+
+    treefmt-nix = {
+      url = "github:numtide/treefmt-nix";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
  };

-  outputs = {
+  outputs =
+    {
      self,
      nixpkgs,
      quickshell,
-  }: let
+      treefmt-nix,
+    }:
+    let
      system = "x86_64-linux";
      pkgs = nixpkgs.legacyPackages.${system};
-  in {
-    devShells.${system} = {
-      default = pkgs.mkShell {
-        buildInputs = [
-          quickshell.packages.${system}.default
-          pkgs.kdePackages.qtdeclarative
-          pkgs.kdePackages.qt5compat
+
+      quickshellWithModules = quickshell.packages.${system}.default.withModules [
+        pkgs.qt6.qtbase
+        pkgs.qt6.qtdeclarative
+        pkgs.qt6.qtmultimedia
+        pkgs.qt6.qttranslations
+      ];
+
+      treefmtEval = treefmt-nix.lib.evalModule pkgs {
+        projectRootFile = "flake.nix";
+
+        programs = {
+          nixfmt.enable = true;
+        };
+      };
+    in
+    {
+      formatter.${system} = treefmtEval.config.build.wrapper;
+
+      devShells.${system}.default = pkgs.mkShell {
+        packages = [
+          quickshellWithModules
+          pkgs.cava
+          pkgs.wallust
        ];
      };
    };
-  };
 }