nova-shell/shell/modules/Bar.qml

import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Wayland
import "." as M
import "../services" as S

PanelWindow {
    id: bar

    required property var screen

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

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

    implicitHeight: S.Theme.barHeight
    exclusiveZone: implicitHeight

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

    Canvas {
        anchors.fill: parent

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

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

            // Glow wash behind the border
            const glowGrad = ctx.createLinearGradient(0, 0, w, 0);
            glowGrad.addColorStop(0, S.Theme.base0C.toString());
            glowGrad.addColorStop(1, S.Theme.base09.toString());
            ctx.globalAlpha = 0.25;
            ctx.fillStyle = glowGrad;
            ctx.fillRect(0, 0, w, h);

            // Erase glow towards bottom
            ctx.globalAlpha = 1;
            ctx.globalCompositeOperation = "destination-out";
            const glowFade = ctx.createLinearGradient(0, 0, 0, h);
            glowFade.addColorStop(0, "transparent");
            glowFade.addColorStop(1, "black");
            ctx.fillStyle = glowFade;
            ctx.fillRect(0, 0, w, h);
            ctx.globalCompositeOperation = "source-over";

            // Horizontal gradient for the border
            const grad = ctx.createLinearGradient(0, 0, w, 0);
            grad.addColorStop(0, S.Theme.base0C.toString());
            grad.addColorStop(1, S.Theme.base09.toString());
            ctx.strokeStyle = grad;
            ctx.lineWidth = lw;

            // Stroke: top + left side + right side (open bottom)
            // Left side down, curve, across top, curve, right side down
            ctx.beginPath();
            if (r > lw) {
                ctx.moveTo(hw, h);
                ctx.lineTo(hw, 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);
                ctx.lineTo(w - hw, h);
            } else {
                ctx.moveTo(hw, h);
                ctx.lineTo(hw, hw);
                ctx.lineTo(w - hw, hw);
                ctx.lineTo(w - hw, h);
            }
            ctx.stroke();

            // Fade out the bottom of the side borders
            ctx.globalCompositeOperation = "destination-out";
            const fadeGrad = ctx.createLinearGradient(0, h * 0.5, 0, h);
            fadeGrad.addColorStop(0, "transparent");
            fadeGrad.addColorStop(1, "black");
            ctx.fillStyle = fadeGrad;
            ctx.fillRect(0, h * 0.5, w, h * 0.5);
            ctx.globalCompositeOperation = "source-over";
        }
    }

    Item {
        anchors.fill: parent
        anchors.topMargin: S.Theme.groupSpacing
        anchors.leftMargin: S.Theme.groupSpacing
        anchors.rightMargin: S.Theme.groupSpacing

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

            M.BarGroup {
                M.PrivacyModule {}
                M.ClockModule {
                    visible: S.Modules.clock.enable
                }
                M.NotificationsModule {
                    visible: S.Modules.notifications.enable
                }
            }
        }

        // ---- left ----
        RowLayout {
            anchors.left: parent.left
            anchors.right: centerSection.left
            anchors.verticalCenter: parent.verticalCenter
            spacing: S.Theme.groupSpacing

            M.BarGroup {
                id: workspacesGroup
                leftEdge: true
                M.WorkspacesModule {
                    bar: bar
                    visible: S.Modules.workspaces.enable
                }
            }
            M.BarGroup {
                leftEdge: !workspacesGroup.visible
                M.TrayModule {
                    bar: bar
                }
            }
            M.BarGroup {
                id: _windowTitleGroup
                Layout.minimumWidth: 0
                clip: true
                visible: S.Modules.windowTitle.enable && S.NiriIpc.focusedTitle !== ""
                M.WindowTitleModule {
                    id: _windowTitle
                    readonly property real _maxWidth: Math.max(0, centerSection.x - _windowTitleGroup.x - 2 * S.Theme.groupPadding - S.Theme.groupSpacing)
                    width: Math.min(naturalWidth, _maxWidth)
                }
            }
            Item {
                Layout.fillWidth: true
            }
        }

        // ---- right ----
        RowLayout {
            anchors.left: centerSection.right
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            spacing: S.Theme.groupSpacing

            Item {
                Layout.fillWidth: true
            }

            // Media
            M.BarGroup {
                M.MprisModule {
                    bar: bar
                }
                M.VolumeModule {
                    visible: S.Modules.volume.enable
                }
            }

            // Connectivity
            M.BarGroup {
                M.NetworkModule {
                    visible: S.Modules.network.enable
                }
                M.BluetoothModule {}
            }

            // Controls
            M.BarGroup {
                M.BacklightModule {}
                M.PowerProfileModule {
                    visible: S.Modules.powerProfile.enable
                }
                M.IdleInhibitorModule {
                    visible: S.Modules.idleInhibitor.enable
                }
            }

            // Stats
            M.BarGroup {
                M.CpuModule {
                    visible: S.Modules.cpu.enable
                }
                M.MemoryModule {
                    visible: S.Modules.memory.enable
                }
                M.GpuModule {}
                M.TemperatureModule {
                    visible: S.Modules.temperature.enable
                }
                M.WeatherModule {
                    visible: S.Modules.weather.enable
                }
                M.DiskModule {
                    visible: S.Modules.disk.enable
                }
            }

            // Power
            M.BarGroup {
                rightEdge: true
                M.BatteryModule {}
                M.PowerModule {
                    visible: S.Modules.power.enable
                }
            }
        }
    }
}