style: format qml files

2026-09-19 10:19:02 +05:30 · 2026-08-24 15:44:57 +05:30
parent ca7ac0696b
commit adfd353e85
19 changed files with 500 additions and 519 deletions
--- a/config/BarLayout.qml
+++ b/config/BarLayout.qml
@@ -5,29 +5,15 @@ import qs.ui
 import qs.services

 Singleton {
-  id: root
+    id: root

-  function widget(name: string): url {
-    return `${Quickshell.shellPath("modules/bar")}/${name}.qml`;
-  }
+    function widget(name: string): url {
+        return `${Quickshell.shellPath("modules/bar")}/${name}.qml`;
+    }

-  property var left: [
-    root.widget("LauncherButton"),
-    root.widget("PowerProfileWidget"),
-    root.widget("HomeWidget"),
-  ]
+    property var left: [root.widget("LauncherButton"), root.widget("PowerProfileWidget"), root.widget("HomeWidget"),]

-  property var center: [
-    root.widget("CavaVisualizer"),
-    root.widget("Workspaces"),
-    root.widget("CavaVisualizer"),
-  ]
+    property var center: [root.widget("CavaVisualizer"), root.widget("Workspaces"), root.widget("CavaVisualizer"),]

-  property var right: [
-    root.widget("AudioWidget"),
-    root.widget("BatteryIndicator"),
-    root.widget("SystemTrayWidget"),
-    root.widget("ClockWidget"),
-    root.widget("GhostButton")
-  ]
+    property var right: [root.widget("AudioWidget"), root.widget("BatteryIndicator"), root.widget("SystemTrayWidget"), root.widget("ClockWidget"), root.widget("GhostButton")]
 }
--- a/modules/bar/AudioWidget.qml
+++ b/modules/bar/AudioWidget.qml
@@ -5,20 +5,17 @@ import qs.ui
 import qs.services

 RowLayout {
-BarButton {
-  hoverHighlight: false
-  pointerCursor: false
-  label: Audio.inputName
-  iconSource: Audio.inputIcon
+    BarButton {
+        hoverHighlight: false
+        pointerCursor: false
+        label: Audio.inputName
+        iconSource: Audio.inputIcon
+    }
+
+    BarButton {
+        hoverHighlight: false
+        pointerCursor: false
+        label: Audio.outputName
+        iconSource: Audio.outputIcon
+    }
 }
-
-
-BarButton {
-  hoverHighlight: false
-  pointerCursor: false
-  label: Audio.outputName
-  iconSource: Audio.outputIcon
-}
-
-}
-
--- a/modules/bar/BatteryIndicator.qml
+++ b/modules/bar/BatteryIndicator.qml
@@ -4,8 +4,8 @@ import qs.ui
 import qs.services

 BarButton {
-  hoverHighlight: false
-  pointerCursor: false
-  label: `${Battery.percentage}% ${Battery.energyRate}W`
-  iconSource: Battery.icon
+    hoverHighlight: false
+    pointerCursor: false
+    label: `${Battery.percentage}% ${Battery.energyRate}W`
+    iconSource: Battery.icon
 }
--- a/modules/bar/CavaVisualizer.qml
+++ b/modules/bar/CavaVisualizer.qml
@@ -5,47 +5,47 @@ import qs.config
 import qs.services

 Rectangle {
-  id: root
+    id: root

-  property int barCount: 14
-  property real maxValue: 100
-  readonly property bool shouldVisualize: barCount > 0 && Cava.values.some(v => v >= 0.001)
+    property int barCount: 14
+    property real maxValue: 100
+    readonly property bool shouldVisualize: barCount > 0 && Cava.values.some(v => v >= 0.001)

-  implicitWidth: 96
-  implicitHeight: 32
-  radius: Appearance.radius
-  color: Appearance.colors.inActive
-  visible: shouldVisualize
+    implicitWidth: 96
+    implicitHeight: 32
+    radius: Appearance.radius
+    color: Appearance.colors.inActive
+    visible: shouldVisualize

-  Row {
-    id: barRow
+    Row {
+        id: barRow

-    anchors.fill: parent
-    anchors.margins: 8
-    spacing: 3
+        anchors.fill: parent
+        anchors.margins: 8
+        spacing: 3

-    Repeater {
-      model: root.barCount
+        Repeater {
+            model: root.barCount

-      Rectangle {
-        id: bar
+            Rectangle {
+                id: bar

-        required property int index
-        readonly property real value: Cava.values[index] ?? 0
+                required property int index
+                readonly property real value: Cava.values[index] ?? 0

-        width: (barRow.width - barRow.spacing * (root.barCount - 1)) / root.barCount
-        height: Math.max(2, (bar.value / root.maxValue) * barRow.height)
-        anchors.bottom: parent.bottom
-        radius: bar.width / 2
-        color: Appearance.colors.accent
-        antialiasing: true
+                width: (barRow.width - barRow.spacing * (root.barCount - 1)) / root.barCount
+                height: Math.max(2, (bar.value / root.maxValue) * barRow.height)
+                anchors.bottom: parent.bottom
+                radius: bar.width / 2
+                color: Appearance.colors.accent
+                antialiasing: true

-        Behavior on height {
-          NumberAnimation {
-            duration: Appearance.duration
-          }
+                Behavior on height {
+                    NumberAnimation {
+                        duration: Appearance.duration
+                    }
+                }
+            }
        }
-      }
    }
-  }
 }
--- a/modules/bar/ClockWidget.qml
+++ b/modules/bar/ClockWidget.qml
@@ -4,7 +4,7 @@ import qs.ui
 import qs.services

 BarButton {
-  hoverHighlight: false
-  pointerCursor: false
-  label: Time.time
+    hoverHighlight: false
+    pointerCursor: false
+    label: Time.time
 }
--- a/modules/bar/GhostButton.qml
+++ b/modules/bar/GhostButton.qml
@@ -4,6 +4,6 @@ import Quickshell
 import qs.ui

 BarButton {
-  iconOnly: true
-  iconSource: `${Quickshell.shellPath("assets")}/icons/ghost.svg`
+    iconOnly: true
+    iconSource: `${Quickshell.shellPath("assets")}/icons/ghost.svg`
 }
--- a/modules/bar/HomeWidget.qml
+++ b/modules/bar/HomeWidget.qml
@@ -4,8 +4,8 @@ import qs.ui
 import qs.services

 BarButton {
-  hoverHighlight: false
-  pointerCursor: false
-  label: Home.latency >= 0 ? `${Home.latency} ms` : "NA"
-  iconSource: Home.icon
+    hoverHighlight: false
+    pointerCursor: false
+    label: Home.latency >= 0 ? `${Home.latency} ms` : "NA"
+    iconSource: Home.icon
 }
--- a/modules/bar/LauncherButton.qml
+++ b/modules/bar/LauncherButton.qml
@@ -4,7 +4,7 @@ import Quickshell
 import qs.ui

 BarButton {
-  iconOnly: true
-  iconSource: `${Quickshell.shellPath("assets")}/icons/nix.svg`
-  onClicked: Quickshell.execDetached(["vicinae", "toggle"])
+    iconOnly: true
+    iconSource: `${Quickshell.shellPath("assets")}/icons/nix.svg`
+    onClicked: Quickshell.execDetached(["vicinae", "toggle"])
 }
--- a/modules/bar/PowerProfileWidget.qml
+++ b/modules/bar/PowerProfileWidget.qml
@@ -4,8 +4,8 @@ import qs.ui
 import qs.services

 BarButton {
-  hoverHighlight: false
-  pointerCursor: false
-  label: PowerProfile.name
-  iconSource: PowerProfile.icon
+    hoverHighlight: false
+    pointerCursor: false
+    label: PowerProfile.name
+    iconSource: PowerProfile.icon
 }
--- a/modules/bar/SystemTrayWidget.qml
+++ b/modules/bar/SystemTrayWidget.qml
@@ -6,27 +6,27 @@ import qs.config
 import qs.ui

 BarButton {
-  id: root
+    id: root

-  property int iconSize: 16
+    property int iconSize: 16

-  hoverHighlight: false
-  pointerCursor: false
-  visible: SystemTray.items.values.length > 0
+    hoverHighlight: false
+    pointerCursor: false
+    visible: SystemTray.items.values.length > 0

-  contentItem: Row {
-    spacing: Appearance.spacing
+    contentItem: Row {
+        spacing: Appearance.spacing

-    Repeater {
-      model: SystemTray.items.values
+        Repeater {
+            model: SystemTray.items.values

-      Image {
-        required property var modelData
+            Image {
+                required property var modelData

-        source: modelData.icon
-        width: root.iconSize
-        height: root.iconSize
-      }
+                source: modelData.icon
+                width: root.iconSize
+                height: root.iconSize
+            }
+        }
    }
-  }
 }
--- a/modules/bar/Workspaces.qml
+++ b/modules/bar/Workspaces.qml
@@ -5,56 +5,56 @@ import Quickshell.Hyprland
 import qs.config

 Row {
-  id: root
+    id: root

-  property int count: 7
+    property int count: 7

-  spacing: Appearance.spacing
+    spacing: Appearance.spacing

-  Repeater {
-    model: root.count
+    Repeater {
+        model: root.count

-    Rectangle {
-      id: pill
+        Rectangle {
+            id: pill

-      required property int index
-      property var ws: Hyprland.workspaces.values.find(w => w.id === pill.index + 1)
-      property bool isActive: Hyprland.focusedWorkspace?.id === (pill.index + 1)
+            required property int index
+            property var ws: Hyprland.workspaces.values.find(w => w.id === pill.index + 1)
+            property bool isActive: Hyprland.focusedWorkspace?.id === (pill.index + 1)

-      radius: 1000
-      implicitHeight: 15
-      implicitWidth: pill.isActive ? pill.implicitHeight * 2.3 : pill.implicitHeight
-      color: {
-        if (handler.hovered)
-          return Appearance.colors.accent;
-        if (pill.isActive || pill.ws)
-          return Appearance.colors.accent;
-        return Appearance.colors.inActive;
-      }
+            radius: 1000
+            implicitHeight: 15
+            implicitWidth: pill.isActive ? pill.implicitHeight * 2.3 : pill.implicitHeight
+            color: {
+                if (handler.hovered)
+                    return Appearance.colors.accent;
+                if (pill.isActive || pill.ws)
+                    return Appearance.colors.accent;
+                return Appearance.colors.inActive;
+            }

-      MouseArea {
-        hoverEnabled: true
-        anchors.fill: parent
-        cursorShape: Qt.PointingHandCursor
-        onClicked: Hyprland.dispatch("workspace " + (pill.index + 1))
-      }
+            MouseArea {
+                hoverEnabled: true
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: Hyprland.dispatch("workspace " + (pill.index + 1))
+            }

-      HoverHandler {
-        id: handler
-      }
+            HoverHandler {
+                id: handler
+            }

-      Behavior on color {
-        ColorAnimation {
-          duration: Appearance.duration
+            Behavior on color {
+                ColorAnimation {
+                    duration: Appearance.duration
+                }
+            }
+
+            Behavior on implicitWidth {
+                NumberAnimation {
+                    duration: Appearance.duration
+                    easing.type: Easing.OutQuad
+                }
+            }
        }
-      }
-
-      Behavior on implicitWidth {
-        NumberAnimation {
-          duration: Appearance.duration
-          easing.type: Easing.OutQuad
-        }
-      }
    }
-  }
 }
--- a/modules/osd/NotificationCard.qml
+++ b/modules/osd/NotificationCard.qml
@@ -7,111 +7,110 @@ import Quickshell.Services.Notifications
 import qs.config

 Rectangle {
-  id: root
+    id: root

-  property Notification notif
-  readonly property bool critical: notif?.urgency === NotificationUrgency.Critical
-  readonly property int timeoutDuration: {
-    const seconds = Math.round((notif?.expireTimeout ?? 0) / 1000);
-    return seconds > 0 ? seconds : 5;
-  }
-  readonly property string iconName: {
-    if (!notif)
-      return "";
+    property Notification notif
+    readonly property bool critical: notif?.urgency === NotificationUrgency.Critical
+    readonly property int timeoutDuration: {
+        const seconds = Math.round((notif?.expireTimeout ?? 0) / 1000);
+        return seconds > 0 ? seconds : 5;
+    }
+    readonly property string iconName: {
+        if (!notif)
+            return "";

-    const hints = notif.hints ?? {};
-    const hinted = String(hints["image-path"] ?? hints["image_path"] ?? hints["icon_path"] ?? "");
-    return notif.appIcon || notif.desktopEntry || hinted;
-  }
-  readonly property url themedIconUrl: iconName !== "" ? Quickshell.iconPath(iconName, false) : ""
-  readonly property url iconUrl: `${Quickshell.shellPath("assets")}/icons/notification.svg`
+        const hints = notif.hints ?? {};
+        const hinted = String(hints["image-path"] ?? hints["image_path"] ?? hints["icon_path"] ?? "");
+        return notif.appIcon || notif.desktopEntry || hinted;
+    }
+    readonly property url themedIconUrl: iconName !== "" ? Quickshell.iconPath(iconName, false) : ""
+    readonly property url iconUrl: `${Quickshell.shellPath("assets")}/icons/notification.svg`

-  implicitWidth: 360
-  implicitHeight: content.implicitHeight + Appearance.padding * 2
-  radius: Appearance.radius
-  color: Appearance.colors.background
-  border.width: critical ? 1 : 0
-  border.color: Appearance.colors.accent
+    implicitWidth: 360
+    implicitHeight: content.implicitHeight + Appearance.padding * 2
+    radius: Appearance.radius
+    color: Appearance.colors.background
+    border.width: critical ? 1 : 0
+    border.color: Appearance.colors.accent

-  Timer {
-    id: countdown
+    Timer {
+        id: countdown

-    interval: root.timeoutDuration * 1000
-    repeat: false
-    running: !root.critical && !hovered.hovered && visible
-    onTriggered: root.notif.expire()
-  }
-
-  HoverHandler {
-    id: hovered
-  }
-
-  RowLayout {
-    id: content
-
-    anchors.left: parent.left
-    anchors.right: parent.right
-    anchors.top: parent.top
-    anchors.margins: Appearance.padding
-    spacing: Appearance.spacing
-
-    Item {
-      width: 40
-      height: 40
-      Layout.alignment: Qt.AlignTop
-
-      Image {
-        anchors.fill: parent
-        source: root.iconUrl
-        fillMode: Image.PreserveAspectFit
-        smooth: true
-      }
-
-      Image {
-        anchors.fill: parent
-        source: root.themedIconUrl
-        visible: root.themedIconUrl !== "" && status === Image.Ready
-        fillMode: Image.PreserveAspectFit
-        smooth: true
-      }
+        interval: root.timeoutDuration * 1000
+        repeat: false
+        running: !root.critical && !hovered.hovered && visible
+        onTriggered: root.notif.expire()
    }

-    ColumnLayout {
-      spacing: 2
-      Layout.fillWidth: true
-      Layout.alignment: Qt.AlignVCenter
-
-      Text {
-        text: root.notif?.appName ?? ""
-        color: Appearance.colors.accent
-        font.family: Appearance.font.family
-        font.pointSize: Appearance.font.pointSize - 2
-        elide: Text.ElideRight
-        Layout.fillWidth: true
-      }
-      Text {
-        text: root.notif?.summary ?? ""
-        color: Appearance.colors.foreground
-        font.family: Appearance.font.family
-        font.pointSize: Appearance.font.pointSize
-        font.weight: Font.DemiBold
-        elide: Text.ElideRight
-        Layout.fillWidth: true
-      }
-      Text {
-        text: root.notif?.body ?? ""
-        visible: text !== ""
-        color: Appearance.colors.foreground
-        opacity: 0.8
-        font.family: Appearance.font.family
-        font.pointSize: Appearance.font.pointSize - 1
-        wrapMode: Text.Wrap
-        maximumLineCount: 3
-        elide: Text.ElideRight
-        textFormat: Text.PlainText
-        Layout.fillWidth: true
-      }
+    HoverHandler {
+        id: hovered
+    }
+
+    RowLayout {
+        id: content
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: Appearance.padding
+        spacing: Appearance.spacing
+
+        Item {
+            width: 40
+            height: 40
+            Layout.alignment: Qt.AlignTop
+
+            Image {
+                anchors.fill: parent
+                source: root.iconUrl
+                fillMode: Image.PreserveAspectFit
+                smooth: true
+            }
+
+            Image {
+                anchors.fill: parent
+                source: root.themedIconUrl
+                visible: root.themedIconUrl !== "" && status === Image.Ready
+                fillMode: Image.PreserveAspectFit
+                smooth: true
+            }
+        }
+
+        ColumnLayout {
+            spacing: 2
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+
+            Text {
+                text: root.notif?.appName ?? ""
+                color: Appearance.colors.accent
+                font.family: Appearance.font.family
+                font.pointSize: Appearance.font.pointSize - 2
+                elide: Text.ElideRight
+                Layout.fillWidth: true
+            }
+            Text {
+                text: root.notif?.summary ?? ""
+                color: Appearance.colors.foreground
+                font.family: Appearance.font.family
+                font.pointSize: Appearance.font.pointSize
+                font.weight: Font.DemiBold
+                elide: Text.ElideRight
+                Layout.fillWidth: true
+            }
+            Text {
+                text: root.notif?.body ?? ""
+                visible: text !== ""
+                color: Appearance.colors.foreground
+                opacity: 0.8
+                font.family: Appearance.font.family
+                font.pointSize: Appearance.font.pointSize - 1
+                wrapMode: Text.Wrap
+                maximumLineCount: 3
+                elide: Text.ElideRight
+                textFormat: Text.PlainText
+                Layout.fillWidth: true
+            }
+        }
    }
-  }
 }
-
--- a/services/Cava.qml
+++ b/services/Cava.qml
@@ -5,22 +5,22 @@ import Quickshell
 import Quickshell.Io

 Singleton {
-  id: root
+    id: root

-  readonly property string configPath: {
-    const url = Quickshell.shellPath("assets/cava.conf").toString();
-    return url.startsWith("file://") ? decodeURIComponent(url.substring(7)) : url;
-  }
-  property var values: []
-
-  Process {
-    running: true
-    command: ["cava", "-p", root.configPath]
-
-    stdout: SplitParser {
-      onRead: line => {
-        root.values = line.split(";").map(Number).filter(v => !Number.isNaN(v));
-      }
+    readonly property string configPath: {
+        const url = Quickshell.shellPath("assets/cava.conf").toString();
+        return url.startsWith("file://") ? decodeURIComponent(url.substring(7)) : url;
+    }
+    property var values: []
+
+    Process {
+        running: true
+        command: ["cava", "-p", root.configPath]
+
+        stdout: SplitParser {
+            onRead: line => {
+                root.values = line.split(";").map(Number).filter(v => !Number.isNaN(v));
+            }
+        }
    }
-  }
 }
--- a/shell.qml
+++ b/shell.qml
@@ -5,4 +5,3 @@ Scope {
    Bar {}
    Notification {}
 }
-
--- a/ui/BarButton.qml
+++ b/ui/BarButton.qml
@@ -5,42 +5,42 @@ import QtQuick.Controls
 import qs.config

 Button {
-  id: root
+    id: root

-  property string label: ""
-  property url iconSource: ""
-  property bool iconOnly: false
-  property bool hoverHighlight: true
-  property bool pointerCursor: true
+    property string label: ""
+    property url iconSource: ""
+    property bool iconOnly: false
+    property bool hoverHighlight: true
+    property bool pointerCursor: true

-  padding: Appearance.padding
-  display: iconOnly ? AbstractButton.IconOnly : AbstractButton.TextBesideIcon
+    padding: Appearance.padding
+    display: iconOnly ? AbstractButton.IconOnly : AbstractButton.TextBesideIcon

-  text: label
-  font.family: Appearance.font.family
-  font.pointSize: Appearance.font.pointSize
-  palette.buttonText: Appearance.colors.foreground
-  icon.color: Appearance.colors.foreground
-  icon.source: iconSource
+    text: label
+    font.family: Appearance.font.family
+    font.pointSize: Appearance.font.pointSize
+    palette.buttonText: Appearance.colors.foreground
+    icon.color: Appearance.colors.foreground
+    icon.source: iconSource

-  HoverHandler {
-    cursorShape: Qt.PointingHandCursor
-    enabled: root.pointerCursor
-  }
-
-  background: Rectangle {
-    anchors.fill: parent
-    radius: Appearance.radius
-    color: {
-      if (!root.hoverHighlight)
-        return Appearance.colors.inActive;
-      return root.hovered ? Appearance.colors.inActive : Appearance.colors.background;
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+        enabled: root.pointerCursor
    }

-    Behavior on color {
-      ColorAnimation {
-        duration: Appearance.duration
-      }
+    background: Rectangle {
+        anchors.fill: parent
+        radius: Appearance.radius
+        color: {
+            if (!root.hoverHighlight)
+                return Appearance.colors.inActive;
+            return root.hovered ? Appearance.colors.inActive : Appearance.colors.background;
+        }
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Appearance.duration
+            }
+        }
    }
-  }
 }
--- a/ui/ExclusionZone.qml
+++ b/ui/ExclusionZone.qml
@@ -4,9 +4,9 @@ import Quickshell
 import Quickshell.Wayland

 PanelWindow {
-  property string name
+    property string name

-  implicitWidth: 0
-  implicitHeight: 0
-  WlrLayershell.namespace: `quickshell:${name}ExclusionZone`
+    implicitWidth: 0
+    implicitHeight: 0
+    WlrLayershell.namespace: `quickshell:${name}ExclusionZone`
 }
--- a/ui/RoundedCorner.qml
+++ b/ui/RoundedCorner.qml
@@ -6,61 +6,61 @@ import Quickshell.Widgets
 import qs.config

 WrapperItem {
-  id: root
+    id: root

-  property int corner
-  property real radius: Appearance.radius
-  property color color
+    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;
+    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
+    Shape {
+        preferredRendererType: Shape.CurveRenderer

-    ShapePath {
-      strokeWidth: 0
-      fillColor: root.color
-      startX: root.radius
+        ShapePath {
+            strokeWidth: 0
+            fillColor: root.color
+            startX: root.radius

-      PathArc {
-        relativeX: -root.radius
-        relativeY: root.radius
-        radiusX: root.radius
-        radiusY: radiusX
-        direction: PathArc.Counterclockwise
-      }
+            PathArc {
+                relativeX: -root.radius
+                relativeY: root.radius
+                radiusX: root.radius
+                radiusY: radiusX
+                direction: PathArc.Counterclockwise
+            }

-      PathLine {
-        relativeX: 0
-        relativeY: -root.radius
-      }
+            PathLine {
+                relativeX: 0
+                relativeY: -root.radius
+            }

-      PathLine {
-        relativeX: root.radius
-        relativeY: 0
-      }
+            PathLine {
+                relativeX: root.radius
+                relativeY: 0
+            }
+        }
    }
-  }
 }
--- a/windows/Bar.qml
+++ b/windows/Bar.qml
@@ -8,154 +8,154 @@ import qs.config
 import qs.ui

 PanelWindow {
-  id: window
+    id: window

-  property color barColor: Appearance.colors.background
-
-  color: "transparent"
-  exclusionMode: ExclusionMode.Ignore
-  mask: Region {
-    item: cornersArea
-    intersection: Intersection.Subtract
-  }
-
-  anchors {
-    left: true
-    top: true
-    right: true
-    bottom: true
-  }
-
-  component BarSection: Rectangle {
-    id: section
-
-    property var widgets: []
-    property int alignment: Qt.AlignLeft
+    property color barColor: Appearance.colors.background

    color: "transparent"
-    implicitHeight: parent.height
-    Layout.fillWidth: true
+    exclusionMode: ExclusionMode.Ignore
+    mask: Region {
+        item: cornersArea
+        intersection: Intersection.Subtract
+    }

-    RowLayout {
-      id: secRow
+    anchors {
+        left: true
+        top: true
+        right: true
+        bottom: true
+    }

-      anchors.verticalCenter: parent.verticalCenter
-      x: section.alignment === Qt.AlignLeft ? 0 : section.alignment === Qt.AlignRight ? parent.width - width : (parent.width - width) / 2
-      spacing: Appearance.spacing
+    component BarSection: Rectangle {
+        id: section

-      Repeater {
-        model: section.widgets
+        property var widgets: []
+        property int alignment: Qt.AlignLeft

-        Loader {
-          required property var modelData
+        color: "transparent"
+        implicitHeight: parent.height
+        Layout.fillWidth: true

-          source: modelData
-          Layout.alignment: Qt.AlignVCenter
+        RowLayout {
+            id: secRow
+
+            anchors.verticalCenter: parent.verticalCenter
+            x: section.alignment === Qt.AlignLeft ? 0 : section.alignment === Qt.AlignRight ? parent.width - width : (parent.width - width) / 2
+            spacing: Appearance.spacing
+
+            Repeater {
+                model: section.widgets
+
+                Loader {
+                    required property var modelData
+
+                    source: modelData
+                    Layout.alignment: Qt.AlignVCenter
+                }
+            }
        }
-      }
    }
-  }

-  // Exclusions
-  Scope {
-    ExclusionZone {
-      name: "left"
-      exclusiveZone: leftBar.implicitWidth
-      anchors.left: true
+    // Exclusions
+    Scope {
+        ExclusionZone {
+            name: "left"
+            exclusiveZone: leftBar.implicitWidth
+            anchors.left: true
+        }
+        ExclusionZone {
+            name: "top"
+            exclusiveZone: topBar.implicitHeight
+            anchors.top: true
+        }
+        ExclusionZone {
+            name: "right"
+            exclusiveZone: rightBar.implicitWidth
+            anchors.right: true
+        }
+        ExclusionZone {
+            name: "bottom"
+            exclusiveZone: bottomBar.implicitHeight
+            anchors.bottom: true
+        }
    }
-    ExclusionZone {
-      name: "top"
-      exclusiveZone: topBar.implicitHeight
-      anchors.top: true
-    }
-    ExclusionZone {
-      name: "right"
-      exclusiveZone: rightBar.implicitWidth
-      anchors.right: true
-    }
-    ExclusionZone {
-      name: "bottom"
-      exclusiveZone: bottomBar.implicitHeight
-      anchors.bottom: true
-    }
-  }

-  // Bars
-  Rectangle {
-    id: leftBar
+    // Bars
+    Rectangle {
+        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
-
-      anchors.fill: parent
-      anchors.margins: Appearance.margin
-
-      wrap: FlexboxLayout.Wrap
-      direction: FlexboxLayout.Row
-      justifyContent: FlexboxLayout.JustifySpaceBetween
-
-      BarSection {
-        widgets: BarLayout.left
-        alignment: Qt.AlignLeft
-      }
-      BarSection {
-        widgets: BarLayout.center
-        alignment: Qt.AlignHCenter
-      }
-      BarSection {
-        widgets: BarLayout.right
-        alignment: Qt.AlignRight
-      }
-    }
-  }
-
-  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: 4
-
-      RoundedCorner {
-        required property int modelData
-
-        corner: modelData
+        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
+
+            anchors.fill: parent
+            anchors.margins: Appearance.margin
+
+            wrap: FlexboxLayout.Wrap
+            direction: FlexboxLayout.Row
+            justifyContent: FlexboxLayout.JustifySpaceBetween
+
+            BarSection {
+                widgets: BarLayout.left
+                alignment: Qt.AlignLeft
+            }
+            BarSection {
+                widgets: BarLayout.center
+                alignment: Qt.AlignHCenter
+            }
+            BarSection {
+                widgets: BarLayout.right
+                alignment: Qt.AlignRight
+            }
+        }
+    }
+
+    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: 4
+
+            RoundedCorner {
+                required property int modelData
+
+                corner: modelData
+                color: window.barColor
+            }
+        }
    }
-  }
 }
--- a/windows/Notification.qml
+++ b/windows/Notification.qml
@@ -8,48 +8,48 @@ import qs.services
 import "../modules/osd"

 PanelWindow {
-  id: root
+    id: root

-  readonly property int cardWidth: 420
+    readonly property int cardWidth: 420

-  color: "transparent"
-  exclusionMode: ExclusionMode.Ignore
-  visible: Notifications.popupCount > 0
-  implicitWidth: root.cardWidth
-  implicitHeight: stack.implicitHeight
+    color: "transparent"
+    exclusionMode: ExclusionMode.Ignore
+    visible: Notifications.popupCount > 0
+    implicitWidth: root.cardWidth
+    implicitHeight: stack.implicitHeight

-  anchors {
-    top: true
-    right: true
-  }
-  margins {
-    top: 50 + Appearance.margin
-    right: 10 + Appearance.margin
-  }
-
-  mask: Region {
-    item: stack
-  }
-
-  ColumnLayout {
-    id: stack
-
-    anchors.top: parent.top
-    anchors.right: parent.right
-    anchors.left: parent.left
-    spacing: Appearance.spacing
-
-    Repeater {
-      model: [...Notifications.popups.values].reverse()
-
-      NotificationCard {
-        id: card
-
-        required property var modelData
-
-        notif: modelData
-        Layout.fillWidth: true
-      }
+    anchors {
+        top: true
+        right: true
+    }
+    margins {
+        top: 50 + Appearance.margin
+        right: 10 + Appearance.margin
+    }
+
+    mask: Region {
+        item: stack
+    }
+
+    ColumnLayout {
+        id: stack
+
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.left: parent.left
+        spacing: Appearance.spacing
+
+        Repeater {
+            model: [...Notifications.popups.values].reverse()
+
+            NotificationCard {
+                id: card
+
+                required property var modelData
+
+                notif: modelData
+                Layout.fillWidth: true
+            }
+        }
    }
-  }
 }