nova-shell/modules/Bar.qml

import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Wayland
import "." as M

PanelWindow {
    id: bar

    required property var screen

    color: "transparent"
    WlrLayershell.layer: WlrLayer.Bottom

    anchors {
        top: true
        left: true
        right: true
    }

    implicitHeight: M.Theme.barHeight
    exclusiveZone: implicitHeight

    Rectangle {
        anchors.fill: parent
        color: M.Theme.base00
        opacity: M.Theme.barOpacity
    }

    Canvas {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: parent.height

        onPaint: {
            const ctx = getContext("2d");
            const w = width;
            const r = M.Theme.screenRadius;
            const lw = 3;
            const hw = lw / 2;

            ctx.clearRect(0, 0, w, height);

            // Vertical fade from stroke color into bar background
            const h = height;
            const vGrad = ctx.createLinearGradient(0, 0, 0, h);
            const hGrad = ctx.createLinearGradient(0, 0, w, 0);
            hGrad.addColorStop(0, M.Theme.base0C.toString());
            hGrad.addColorStop(1, M.Theme.base09.toString());

            // Draw the fade: full opacity at top, transparent at bottom
            ctx.globalAlpha = 0.15;
            ctx.fillStyle = hGrad;
            ctx.beginPath();
            if (r > 0) {
                ctx.moveTo(0, r);
                ctx.arc(r, r, r, Math.PI, -Math.PI / 2);
                ctx.lineTo(w - r, 0);
                ctx.arc(w - r, r, r, -Math.PI / 2, 0);
                ctx.lineTo(w, h);
                ctx.lineTo(0, h);
            } else {
                ctx.rect(0, 0, w, h);
            }
            ctx.fill();

            // Fade out towards bottom
            ctx.globalAlpha = 1;
            const fadeGrad = ctx.createLinearGradient(0, lw, 0, h);
            fadeGrad.addColorStop(0, "transparent");
            fadeGrad.addColorStop(1, M.Theme.base00.toString());
            ctx.fillStyle = fadeGrad;
            ctx.fillRect(0, lw, w, h - lw);

            // Gradient stroke
            const grad = ctx.createLinearGradient(0, 0, w, 0);
            grad.addColorStop(0, M.Theme.base0C.toString());
            grad.addColorStop(1, M.Theme.base09.toString());
            ctx.strokeStyle = grad;
            ctx.lineWidth = lw;

            ctx.beginPath();
            if (r > lw) {
                ctx.moveTo(0, r);
                ctx.arc(r, r, r - hw, Math.PI, -Math.PI / 2);
                ctx.lineTo(w - r, hw);
                ctx.arc(w - r, r, r - hw, -Math.PI / 2, 0);
            } else {
                ctx.moveTo(0, hw);
                ctx.lineTo(w, hw);
            }
            ctx.stroke();
        }
    }

    Item {
        anchors.fill: parent
        anchors.topMargin: 3
        anchors.leftMargin: Math.max(M.Theme.barPadding, M.Theme.screenRadius)
        anchors.rightMargin: Math.max(M.Theme.barPadding, M.Theme.screenRadius)

        // ---- center (declared first so left/right can anchor to it) ----
        RowLayout {
            id: centerSection
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            spacing: M.Theme.barSpacing

            M.Privacy {}
            M.BarGroup {
                borderColor: M.Theme.base0D
                M.Clock {
                    visible: M.Modules.clock.enable
                }
                M.Notifications {
                    visible: M.Modules.notifications.enable
                }
            }
        }

        // ---- left ----
        RowLayout {
            anchors.left: parent.left
            anchors.right: centerSection.left
            anchors.verticalCenter: parent.verticalCenter
            spacing: M.Theme.barSpacing

            M.BarGroup {
                borderColor: M.Theme.base0D
                M.Workspaces {
                    bar: bar
                    visible: M.Modules.workspaces.enable
                }
            }
            M.BarGroup {
                borderColor: M.Theme.base0D
                M.Tray {
                    bar: bar
                    visible: M.Modules.tray.enable
                }
            }
            M.BarGroup {
                borderColor: M.Theme.base0D
                M.WindowTitle {
                    Layout.maximumWidth: 400
                    visible: M.Modules.windowTitle.enable
                }
            }
            Item {
                Layout.fillWidth: true
            }
        }

        // ---- right ----
        RowLayout {
            anchors.left: centerSection.right
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            spacing: M.Theme.barSpacing

            Item {
                Layout.fillWidth: true
            }

            // Media
            M.BarGroup {
                borderColor: M.Theme.base0E
                M.Mpris {
                    bar: bar
                }
                M.Volume {
                    visible: M.Modules.volume.enable
                }
            }

            // Connectivity
            M.BarGroup {
                borderColor: M.Theme.base0D
                M.Network {
                    bar: bar
                    visible: M.Modules.network.enable
                }
                M.Bluetooth {
                    bar: bar
                }
            }

            // Controls
            M.BarGroup {
                borderColor: M.Theme.base0A
                M.Backlight {}
                M.PowerProfile {
                    visible: M.Modules.powerProfile.enable
                }
                M.IdleInhibitor {
                    visible: M.Modules.idleInhibitor.enable
                }
            }

            // Stats
            M.BarGroup {
                borderColor: M.Theme.base08
                M.Cpu {
                    visible: M.Modules.cpu.enable
                }
                M.Memory {
                    visible: M.Modules.memory.enable
                }
                M.Temperature {
                    visible: M.Modules.temperature.enable
                }
                M.Weather {
                    visible: M.Modules.weather.enable
                }
                M.Disk {
                    visible: M.Modules.disk.enable
                }
            }

            // Power
            M.BarGroup {
                borderColor: M.Theme.base08
                M.Battery {}
                M.Power {
                    bar: bar
                    visible: M.Modules.power.enable
                }
            }
        }
    }
}