init: working version

modules/Commands.qml

@@ -0,0 +1,145 @@
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+
+Scope {
+    id: root
+
+    // Workspace Handling
+
+    function allWorkspaces(): list<int> {
+        let ids = [];
+        States.screens.forEach((uiState, _, _) => {
+            for (let i = 0; i < uiState.workspaces.count; i++) {
+                ids.push(uiState.workspaces.get(i).workspace.id);
+            }
+        })
+        return ids;
+    }
+
+    function nextWorkspace(): int {
+        let id = 1;
+        const ws = allWorkspaces();
+        while (ws.includes(id)) id++;
+        return id;
+    }
+
+    // Workspace Commands
+
+    function newWorkspace(): void {
+        Hypr.dispatch(`focusworkspaceoncurrentmonitor ${nextWorkspace()}`);
+    }
+
+    CustomShortcut {
+        name: "newWorkspace"
+        description: "Go to a new workspace"
+        onPressed: root.newWorkspace();
+    }
+    Timer {
+        id: newWorkspaceTimer
+        running: false
+        interval: Hypr.arbitraryRaceConditionDelay
+        onTriggered: {
+            const uiState = States.getForActive();
+            const workspace = Hypr.focusedWorkspace;
+            // Add workspace if not already added during delay
+            let found = false;
+            for (let i = 0; i < uiState.workspaces.count; i++) {
+                if (uiState.workspaces.get(i).workspace.id === workspace.id)
+                    found = true;
+            }
+            if (!found)
+                uiState.workspaces.append({"workspace": workspace});
+        }
+    }
+
+    function goToWorkspace(index: int): void {
+        const uiState = States.getForActive();
+        if (index > uiState.workspaces.count) return;
+        let id;
+        if (index === uiState.workspaces.count) {
+            id = root.nextWorkspace();
+        } else {
+            id = uiState.workspaces.get(index).workspace.id;
+        }
+        Hypr.dispatch(`workspace ${id}`);
+    }
+
+    Instantiator {
+        model: [...Array(10).keys()]
+        delegate: CustomShortcut {
+            required property int modelData
+            name: `workspace${modelData + 1}`
+            description: `Go to workspace ${modelData + 1}`
+            onPressed: root.goToWorkspace(modelData)
+        }
+    }
+
+    function moveToWorkspace(index: int): void {
+        const uiState = States.getForActive();
+        if (index > uiState.workspaces.count) return;
+        let id;
+        if (index === uiState.workspaces.count) {
+            id = nextWorkspace();
+        } else {
+            id = uiState.workspaces.get(index).workspace.id;
+        }
+        Hypr.dispatch(`movetoworkspace ${id}`);
+    }
+
+    Instantiator {
+        model: [...Array(10).keys()]
+        delegate: CustomShortcut {
+            required property int modelData
+            name: `movetoworkspace${modelData + 1}`
+            description: `Move the focused window to workspace ${modelData + 1}`
+            onPressed: root.moveToWorkspace(modelData)
+        }
+    }
+
+    // Panels
+
+    CustomShortcut {
+        name: "dashboard"
+        description: "Toggle dashboard"
+        onPressed: {
+            const uiState = States.getForActive();
+            uiState.dashboard = !uiState.dashboard;
+        }
+    }
+
+    CustomShortcut {
+        name: "launcher"
+        description: "Toggle launcher"
+        onPressed: {
+            const uiState = States.getForActive();
+            uiState.laucher = !uiState.launcher;
+        }
+    }
+
+    CustomShortcut {
+        name: "session"
+        description: "Toggle session menu"
+        onPressed: {
+            const uiState = States.getForActive();
+            uiState.session = !uiState.session;
+        }
+    }
+
+    CustomShortcut {
+        name: "escape"
+        description: "Close every panel"
+        onPressed: {
+            States.screens.forEach((uiState, _, _) => {
+                uiState.dashboard = false;
+                uiState.launcher = false;
+                uiState.osd = false;
+                uiState.session = false;
+                uiState.blockScreen = false;
+            });
+        }
+    }
+}

modules/bar/Bar.qml

@@ -0,0 +1,137 @@
+
+import QtQuick
+import Quickshell
+import qs.config
+import qs.custom
+import qs.services
+import "modules"
+import "popouts" as BarPopouts
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property ShellScreen screen
+    required property BarPopouts.Wrapper popouts
+
+    anchors.left: parent.left
+    anchors.top: parent.top
+    anchors.right: parent.right
+    implicitHeight: Config.bar.height
+
+    // Modules
+
+    NixOS {
+        id: nixos
+        objectName: "nixos"
+
+        anchors.left: parent.left
+    }
+
+    Workspaces {
+        id: workspaces
+
+        anchors.left: nixos.right
+
+        workspaces: root.uiState.workspaces
+    }
+
+    Window {
+        id: window
+        objectName: "window"
+
+        // Expand window title from center as much as possible
+        // without intersecting other modules
+        anchors.centerIn: parent
+        implicitWidth: 2 * Math.min(
+            (parent.width / 2) - workspaces.x - workspaces.width,
+            tray.x - (parent.width / 2)) - 40
+    }
+
+    Tray {
+        id: tray
+        objectName: "tray"
+
+        anchors.right: clock.left
+        anchors.rightMargin: 8
+    }
+
+    Clock {
+        id: clock
+        objectName: "clock"
+
+        anchors.right: statusIcons.left
+        anchors.rightMargin: 12
+    }
+
+    StatusIcons {
+        id: statusIcons
+        objectName: "statusIcons"
+
+        anchors.right: power.left
+        anchors.rightMargin: 6
+    }
+
+    Power {
+        id: power
+        uiState: root.uiState
+
+        anchors.right: parent.right
+        anchors.rightMargin: 6
+    }
+
+    // Popout Interactions
+
+    function checkPopout(x: real): void {
+        const ch = childAt(x, height / 2);
+        if (!ch) {
+            popouts.hasCurrent = false;
+            return;
+        }
+
+        const name = ch.objectName;
+        const left = ch.x;
+        const chWidth = ch.implicitWidth;
+
+        if (name === "nixos") {
+            popouts.currentName = "nixos";
+            popouts.currentCenter = 0;
+            popouts.hasCurrent = true;
+        } else if (name === "statusIcons") {
+            const layout = ch.children[0];
+            const icon = layout.childAt(mapToItem(layout, x, 0).x, layout.height / 2);
+            if (icon && icon.objectName) {
+                popouts.currentName = icon.objectName;
+                popouts.currentCenter = Qt.binding(() =>
+                    icon.mapToItem(root, 0, icon.implicitWidth / 2).x);
+                popouts.hasCurrent = true;
+            } else if (icon && !icon.objectName) {
+                popouts.hasCurrent = false;
+            }
+        } else if (name === "tray") {
+            const index = Math.floor(((x - left) / chWidth) * tray.repeater.count);
+            const trayItem = tray.repeater.itemAt(index);
+            if (trayItem) {
+                popouts.currentName = `traymenu${index}`;
+                popouts.currentCenter = Qt.binding(() =>
+                    trayItem.mapToItem(root, 0, trayItem.implicitWidth / 2).x);
+                popouts.hasCurrent = true;
+            }
+        } else if (name === "clock") {
+            popouts.currentName = "calendar";
+            popouts.currentCenter = ch.mapToItem(root, chWidth / 2, 0).x;
+            popouts.hasCurrent = true;
+        } else if (name === "window" && Hypr.activeToplevel) {
+            const inner = ch.childAt(mapToItem(ch, x, 0).x, height / 2)
+            if (inner) {
+                popouts.currentName = "activewindow";
+                popouts.currentCenter = ch.mapToItem(root, chWidth / 2, 0).x;
+                popouts.hasCurrent = true;
+            } else {
+                popouts.hasCurrent = false;
+            }
+        } else {
+            popouts.hasCurrent = false;
+        }
+    }
+}

modules/bar/Container.qml

@@ -0,0 +1,15 @@
+
+import QtQuick
+import Quickshell
+import qs.config
+import qs.custom
+
+CustomRect {
+    color: Config.colors.container
+
+    implicitWidth: Math.max(childrenRect.width, height)
+    implicitHeight: Config.bar.containerHeight
+    anchors.verticalCenter: parent.verticalCenter
+
+    radius: 1000
+}

modules/bar/modules/Clock.qml

@@ -0,0 +1,35 @@
+
+import QtQuick
+import qs.services
+import qs.config
+import qs.custom
+
+Row {
+    id: root
+
+    anchors.verticalCenter: parent.verticalCenter
+
+    property color color: Config.colors.turqoise
+    spacing: 4
+
+    MaterialIcon {
+        id: icon
+
+        text: "calendar_month"
+        font.pointSize: Config.font.size.normal + 1
+        color: root.color
+
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    CustomText {
+        id: text
+
+        anchors.verticalCenter: parent.verticalCenter
+
+        text: Time.format("hh:mm")
+        font.pointSize: Config.font.size.smaller
+        font.family: Config.font.family.mono
+        color: root.color
+    }
+}

modules/bar/modules/NixOS.qml

@@ -0,0 +1,15 @@
+
+import qs.config
+import qs.custom
+import QtQuick
+
+CustomText {
+    anchors.verticalCenter: parent.verticalCenter
+
+    text: ""
+    width: implicitWidth + 32
+    horizontalAlignment: Text.AlignHCenter
+    font.family: Config.font.family.mono
+    font.pointSize: Config.font.size.normal
+    color: Config.colors.nixos
+}

modules/bar/modules/Power.qml

@@ -0,0 +1,29 @@
+
+import Quickshell
+import qs.config
+import qs.custom
+import qs.services
+
+StateLayer {
+    required property PersistentProperties uiState
+
+    anchors.verticalCenter: parent.verticalCenter
+
+    implicitWidth: icon.implicitHeight + 10
+    implicitHeight: implicitWidth
+
+    function onClicked(): void {
+        uiState.session = !uiState.session;
+    }
+
+    MaterialIcon {
+        id: icon
+        anchors.centerIn: parent
+        anchors.horizontalCenterOffset: 0.5
+
+        text: "power_settings_new"
+        color: Config.colors.error
+        font.bold: true
+        font.pointSize: Config.font.size.smaller
+    }
+}

modules/bar/modules/StatusIcons.qml

@@ -0,0 +1,166 @@
+import Quickshell
+import Quickshell.Services.UPower
+import QtQuick
+import QtQuick.Layouts
+import qs.services
+import qs.config
+import qs.custom
+import qs.util
+import qs.modules.bar
+
+Container {
+    id: root
+    implicitWidth: layout.width + 20
+
+    RowLayout {
+        id: layout
+
+        anchors.centerIn: parent
+        spacing: 10
+
+        MaterialIcon {
+            id: network
+            objectName: "network"
+
+            Layout.alignment: Qt.AlignVCenter
+
+            text: Network.active ? Icons.getNetworkIcon(Network.active.strength ?? 0) : "wifi_off"
+            color: text !== "wifi_off" ? Config.colors.secondary : Config.colors.tertiary
+            animate: (from, to) => from === "wifi_off" || to === "wifi_off"
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: Network.toggleWifi()
+            }
+        }
+
+        /* MaterialIcon { */
+        /*     id: bluetooth */
+        /*     objectName: "bluetooth" */
+
+        /*     anchors.verticalCenter: parent.verticalCenter */
+
+        /*     animate: true */
+        /*     text: Bluetooth.powered ? "bluetooth" : "bluetooth_disabled" */
+        /* } */
+
+        /* Row { */
+        /*     id: devices */
+        /*     objectName: "devices" */
+
+        /*     anchors.verticalCenter: parent.verticalCenter */
+
+        /*     Repeater { */
+        /*         id: repeater */
+
+        /*         model: ScriptModel { */
+        /*             values: Bluetooth.devices.filter(d => d.connected) */
+        /*         } */
+
+        /*         MaterialIcon { */
+        /*             required property Bluetooth.Device modelData */
+
+        /*             animate: true */
+        /*             text: Icons.getBluetoothIcon(modelData.icon) */
+        /*             fill: 1 */
+        /*         } */
+        /*     } */
+        /* } */
+
+        MaterialIcon {
+            id: idleinhibit
+            objectName: "idleinhibit"
+
+            Layout.alignment: Qt.AlignVCenter
+
+            text: Idle.inhibit ? "visibility" : "visibility_off"
+            color: text === "visibility" ? Config.colors.secondary : Config.colors.tertiary
+            fill: Idle.inhibit ? 1 : 0
+            animate: true
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: Idle.inhibit = !Idle.inhibit
+            }
+        }
+
+        MaterialIcon {
+            id: battery
+            objectName: "battery"
+
+            Layout.alignment: Qt.AlignVCenter
+            Layout.leftMargin: hasBattery ? -2 : 0
+            Layout.topMargin: hasBattery ? 0.5 : 2
+
+            readonly property bool hasBattery: UPower.displayDevice.isLaptopBattery
+            readonly property real percentage: UPower.displayDevice.percentage
+            readonly property bool charging: !UPower.onBattery && batteryText.text !== "100"
+            readonly property bool warning: UPower.onBattery && percentage < 0.15
+
+            text: {
+                if (!hasBattery) {
+                    if (PowerProfiles.profile === PowerProfile.PowerSaver)
+                        return "energy_savings_leaf";
+                    if (PowerProfiles.profile === PowerProfile.Performance)
+                        return "rocket_launch";
+                    return "balance";
+                }
+                return `battery_android_full`;
+            }
+            fill: 1
+            font.pointSize: hasBattery ? 18 : Config.font.size.normal
+            grade: 50
+            font.weight: 100
+            color: !hasBattery ? Config.colors.secondary :
+                warning ? Config.colors.errorBg :
+                batteryText.text === "100" ? Config.colors.battery :
+                Color.mute(Config.colors.battery, 0.6, 1.5)
+
+            CustomRect {
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.topMargin: 9
+                anchors.bottomMargin: 9
+                anchors.leftMargin: 3
+                width: (battery.width - 7) * battery.percentage
+                radius: 2
+
+                visible: battery.hasBattery
+                color: battery.warning ? Config.colors.batteryWarning : Config.colors.battery
+            }
+
+            Row {
+                anchors.centerIn: parent
+                anchors.horizontalCenterOffset: battery.charging ? width / 20 : -width / 15
+
+                visible: battery.hasBattery
+                spacing: -1
+
+                CustomText {
+                    id: batteryText
+
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.verticalCenterOffset: 0.5
+                    text: Math.round(battery.percentage * 100)
+                    color: battery.warning ? Config.colors.batteryWarning : Config.colors.bg
+                    font.family: Config.font.family.mono
+                    font.pointSize: 6
+                    font.weight: 800
+                }
+
+                MaterialIcon {
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    visible: battery.charging
+                    text: "bolt"
+                    fill: 1
+                    color: Config.colors.bg
+                    font.pointSize: 7
+                    font.weight: 300
+                }
+
+            }
+        }
+    }
+}

modules/bar/modules/Tray.qml

@@ -0,0 +1,92 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.SystemTray
+import qs.config
+import qs.custom
+
+Item {
+    id: root
+
+    clip: true
+
+    anchors.verticalCenter: parent.verticalCenter
+    implicitWidth: layout.implicitWidth
+    implicitHeight: layout.implicitHeight
+    // To avoid warnings about being visible with no size
+    visible: width > 0 && height > 0
+
+    readonly property Item repeater: repeater
+
+    Row {
+        id: layout
+
+        add: Transition {
+            Anim {
+                property: "scale"
+                from: 0
+                to: 1
+                easing.bezierCurve: Config.anim.curves.standardDecel
+            }
+        }
+
+        move: Transition {
+            Anim {
+                property: "scale"
+                to: 1
+                easing.bezierCurve: Config.anim.curves.standardDecel
+            }
+            Anim {
+                properties: "x,y"
+                easing.bezierCurve: Config.anim.curves.standard
+            }
+        }
+
+        Repeater {
+            id: repeater
+
+            model: SystemTray.items
+
+            MouseArea {
+                id: trayItem
+
+                required property SystemTrayItem modelData
+
+                implicitWidth: icon.implicitWidth + 10
+                implicitHeight: icon.implicitHeight
+
+                onClicked: modelData.activate()
+
+                IconImage {
+                    id: icon
+                    anchors.centerIn: parent
+
+                    source: {
+                        let icon = trayItem.modelData.icon;
+                        if (icon.includes("?path=")) {
+                            const [name, path] = icon.split("?path=");
+                            icon = `file://${path}/${name.slice(name.lastIndexOf("/") + 1)}`;
+                        }
+                        return icon;
+                    }
+                    asynchronous: true
+                    implicitSize: Config.font.size.larger
+                }
+            }
+        }
+    }
+
+    Behavior on implicitWidth {
+        Anim {
+            easing.bezierCurve: Config.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        Anim {
+            easing.bezierCurve: Config.anim.curves.emphasized
+        }
+    }
+}

modules/bar/modules/Window.qml

@@ -0,0 +1,96 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+
+Item {
+    id: root
+
+    property color color: Config.colors.primary
+
+    implicitHeight: child.implicitHeight
+
+    Item {
+        id: child
+
+        anchors.centerIn: parent
+        implicitWidth: icon.implicitWidth + current.implicitWidth + current.anchors.leftMargin
+        implicitHeight: Math.max(icon.implicitHeight, current.implicitHeight)
+
+        clip: true
+
+        property Item current: text1
+
+        MaterialIcon {
+            id: icon
+
+            animate: true
+            text: {
+                const cls = Hypr.activeToplevel?.lastIpcObject.class;
+                if (!cls) return "desktop_windows";
+                Icons.getAppCategoryIcon(cls, "ad")
+            }
+
+            color: root.color
+            font.pointSize: Config.font.size.larger
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Title {
+            id: text1
+        }
+
+        Title {
+            id: text2
+        }
+
+        TextMetrics {
+            id: metrics
+
+            text: Hypr.activeToplevel?.title ?? qsTr("Desktop")
+            font.pointSize: Config.font.size.smaller
+            font.family: Config.font.family.mono
+            elide: Qt.ElideRight
+            elideWidth: root.width - icon.width
+
+            onTextChanged: {
+                const next = child.current === text1 ? text2 : text1;
+                next.text = elidedText;
+                child.current = next;
+            }
+            onElideWidthChanged: child.current.text = elidedText
+        }
+
+        Behavior on implicitWidth {
+            Anim {
+                easing.bezierCurve: Config.anim.curves.emphasized
+            }
+        }
+
+        Behavior on implicitHeight {
+            Anim {
+                easing.bezierCurve: Config.anim.curves.emphasized
+            }
+        }
+    }
+
+    component Title: CustomText {
+        id: text
+
+        anchors.verticalCenter: icon.verticalCenter
+        anchors.left: icon.right
+        anchors.leftMargin: 8
+
+        font.pointSize: metrics.font.pointSize
+        font.family: metrics.font.family
+        color: root.color
+        opacity: child.current === this ? 1 : 0
+
+        Behavior on opacity {
+            Anim {}
+        }
+    }
+}

modules/bar/modules/Workspaces.qml

@@ -0,0 +1,234 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.config
+import qs.custom
+import qs.util
+import qs.modules.bar
+import QtQuick
+import QtQuick.Effects
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Hyprland
+
+Container {
+    id: root
+
+    required property ListModel workspaces
+
+    readonly property HyprlandMonitor monitor: Hypr.monitorFor(QsWindow.window.screen)
+
+    // Workspace Layout
+
+    implicitWidth: Math.max(list.width + Config.bar.workspaceMargin * 2, height)
+
+    Behavior on implicitWidth {
+        Anim {
+            easing.bezierCurve: Config.anim.curves.emphasized
+        }
+    }
+
+    readonly property real workspaceSize: Config.bar.containerHeight - Config.bar.workspaceMargin * 2
+
+    Item {
+        id: listWrapper
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: Config.bar.workspaceMargin
+
+        width: list.width
+        height: list.height
+        layer.enabled: true
+        layer.smooth: true
+
+        ListView {
+            id: list
+            anchors.centerIn: parent
+            width: contentWidth
+            height: root.workspaceSize
+            acceptedButtons: Qt.NoButton
+            boundsBehavior: Flickable.StopAtBounds
+
+            spacing: Config.bar.workspaceMargin
+            orientation: ListView.Horizontal
+
+            model: root.workspaces
+
+            delegate: Item {
+                id: buttonWrapper
+
+                required property int index
+                required property HyprlandWorkspace workspace
+
+                width: button.width
+                height: button.height
+
+                readonly property Item button: button
+
+                StateLayer {
+                    id: button
+
+                    anchors.horizontalCenter: buttonWrapper.horizontalCenter
+                    anchors.verticalCenter: buttonWrapper.verticalCenter
+                    width: height
+                    height: root.workspaceSize
+
+                    drag.target: this
+                    drag.axis: Drag.XAxis
+                    drag.threshold: 2
+                    drag.minimumX: list.x
+                    drag.maximumX: list.x + list.width - root.workspaceSize
+
+                    states: State {
+                        name: "dragging"
+                        when: button.drag.active
+
+                        ParentChange {
+                            target: button
+                            parent: listWrapper
+                        }
+                        AnchorChanges {
+                            target: button
+                            anchors.horizontalCenter: undefined
+                        }
+                    }
+
+                    transitions: Transition {
+                        from: "dragging"
+                        to: ""
+                        ParentAnimation {
+                            AnchorAnimation {
+                                duration: Config.anim.durations.small
+                                easing.type: Easing.BezierSpline
+                                easing.bezierCurve: Config.anim.curves.standardDecel
+                            }
+                        }
+                    }
+
+                    function onClicked(): void {
+                        if (root.monitor.activeWorkspace !== workspace)
+                            Hypr.dispatch(`workspace ${workspace.id}`);
+                    }
+
+                    onXChanged: {
+                        if (!drag.active) return;
+                        const wsx = x / (width + list.spacing);
+                        root.workspaces.move(index, Math.round(wsx), 1);
+                    }
+
+                    MaterialIcon {
+                        anchors.centerIn: parent
+                        text: Icons.getWorkspaceIcon(buttonWrapper.workspace)
+                        color: Config.colors.primary
+                        font.pointSize: Config.font.size.larger
+                        animate: true
+                        animateDuration: Config.anim.durations.small
+                    }
+                }
+            }
+
+            add: Transition {
+                Anim {
+                    property: "opacity"
+                    from: 0
+                    to: 1
+                }
+            }
+
+            remove: Transition {
+                Anim {
+                    property: "opacity"
+                    from: 1
+                    to: 0
+                }
+            }
+
+            move: Transition {
+                Anim {
+                    property: "x"
+                }
+                Anim {
+                    properties: "opacity"
+                    to: 1
+                }
+            }
+
+
+            displaced: Transition {
+                Anim {
+                    property: "x"
+                }
+                Anim {
+                    properties: "opacity"
+                    to: 1
+                }
+            }
+        }
+
+    }
+
+    // Active Indicator
+
+    CustomRect {
+        id: activeInd
+
+        readonly property Item active: {
+            list.count;
+            const activeWorkspace = root.monitor.activeWorkspace;
+            for (let i = 0; i < (root.workspaces?.count ?? 0); i++) {
+                if (root.workspaces.get(i).workspace === activeWorkspace)
+                    return list.itemAtIndex(i);
+            }
+            return null;
+        }
+
+        x: active ? (active.button.drag.active ? active.button.x : active.x) + Config.bar.workspaceMargin : 0
+        y: Config.bar.workspaceMargin
+        width: active?.width ?? workspaceSize
+        height: active?.height ?? workspaceSize
+
+        radius: 1000
+        color: Config.colors.workspaces
+
+        clip: true
+
+        property bool transition: false
+        onActiveChanged: transition = true
+
+        Behavior on x {
+            enabled: activeInd.transition
+            SequentialAnimation {
+                Anim {
+                    easing.bezierCurve: Config.anim.curves.emphasized
+                }
+                PropertyAction {
+                    target: activeInd
+                    property: "transition"
+                    value: false
+                }
+            }
+        }
+
+        CustomRect {
+            id: base
+
+            visible: false
+            anchors.fill: parent
+            color: Config.colors.primaryDark
+        }
+
+        MultiEffect {
+            source: base
+            maskSource: listWrapper
+            maskEnabled: true
+            maskSpreadAtMin: 1
+            maskThresholdMin: 0.5
+
+            x: -parent.x + Config.bar.workspaceMargin
+            implicitWidth: listWrapper.width
+            implicitHeight: listWrapper.height
+
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+}

modules/bar/popouts/ActiveWindow.qml

@@ -0,0 +1,425 @@
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import Quickshell.Wayland
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property Item wrapper
+    required property HyprlandToplevel window
+
+    property HyprlandToplevel toplevel: Hypr.activeToplevel
+    property var screen: QsWindow.window.screen
+    property bool pinned: false
+
+    implicitWidth: childrenRect.width
+    implicitHeight: childrenRect.height
+
+    Component.onCompleted: {
+        if (window) {
+            state = "detail";
+            pinned = true;
+            toplevel = window;
+        }
+        wrapper.window = null;
+    }
+
+    // States
+
+    states: [
+        State {
+            name: "detail"
+            StateChangeScript {
+                script: root.wrapper.persistent = true
+            }
+            ParentChange {
+                target: header
+                parent: infobox
+            }
+            PropertyChanges {
+                infobox { visible: true }
+                preview { visible: true }
+                pin { visible: true }
+                visit { visible: true }
+                del { visible: true }
+                expand { rotation: -90 }
+                title { maximumLineCount: 1 }
+            }
+        }
+    ]
+
+    transitions: Transition {
+        Anim {
+            targets: [infobox, preview]
+            property: "scale"
+            from: 0; to: 1
+        }
+        Anim {
+            target: buttons
+            property: "opacity"
+            from: 0; to: 1
+            duration: Config.anim.durations.large * 2
+        }
+        Anim {
+            targets: header
+            property: "scale"
+            to: 1
+        }
+    }
+
+    // Reveal on window title change
+    // (or close if window is invalid)
+    Anim on opacity {
+        id: reveal
+        from: 0
+        to: 1
+    }
+
+    onToplevelChanged: {
+        root.opacity = 0;
+        if (!toplevel) {
+            root.wrapper.hasCurrent = false;
+        } else if (!root.pinned) {
+            reveal.restart();
+        } else {
+            root.opacity = 1;
+        }
+    }
+
+    RowLayout {
+        id: layout
+
+        spacing: 15
+
+        RowLayout {
+            id: header
+
+            spacing: 12
+
+            Binding {
+                when: infobox.visible
+                header {
+                    anchors.left: infobox.left
+                    anchors.right: infobox.right
+                    anchors.top: infobox.top
+                    anchors.margins: 12
+                }
+            }
+
+            IconImage {
+                id: icon
+
+                Layout.alignment: Qt.AlignVCenter
+                implicitSize: 36
+                source: Icons.getAppIcon(toplevel?.lastIpcObject.class ?? "", "")
+            }
+
+            ColumnLayout {
+                id: names
+
+                spacing: 0
+                Layout.fillWidth: true
+                Layout.maximumWidth: 400
+
+                CustomText {
+                    id: title
+
+                    Layout.fillWidth: true
+                    text: toplevel?.title ?? ""
+                    color: Config.colors.secondary
+                    elide: Text.ElideRight
+                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+                    Behavior on text {
+                        Anim {
+                            target: names
+                            property: "opacity"
+                            from: 0
+                            to: 1
+                        }
+                    }
+                }
+
+                CustomText {
+                    Layout.fillWidth: true
+                    text: toplevel?.lastIpcObject.class ?? ""
+                    font.pointSize: Config.font.size.small
+                    color: Config.colors.tertiary
+                    elide: Text.ElideRight
+
+                    Behavior on text {
+                        Anim {
+                            target: names
+                            property: "opacity"
+                            from: 0
+                            to: 1
+                        }
+                    }
+                }
+            }
+        }
+
+        CustomRect {
+            id: infobox
+            visible: false
+            transformOrigin: Item.TopRight
+
+            implicitWidth: 300
+            implicitHeight: 240
+
+            color: Config.colors.container
+            radius: 17
+
+            ColumnLayout {
+                id: infolayout
+                anchors.top: parent.top
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.topMargin: 48
+                anchors.margins: 12
+
+                spacing: 3
+
+
+                CustomRect {
+                    color: Config.colors.inactive
+
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 1
+                    Layout.topMargin: 8
+                    Layout.bottomMargin: 6
+                    Layout.leftMargin: 5
+                    Layout.rightMargin: 5
+                }
+
+                Detail {
+                    icon: "workspaces"
+                    text: {
+                        for (let i = 0; i < root.uiState.workspaces.count; i++) {
+                            if (root.uiState.workspaces.get(i).workspace === root.toplevel?.workspace)
+                                return qsTr("Workspace: %1").arg(i + 1)
+                        }
+                        return qsTr("Workspace unknown")
+                    }
+                }
+
+                Detail {
+                    icon: "desktop_windows"
+                    text: {
+                        const mon = root.toplevel?.monitor;
+                        mon ? qsTr("Monitor: %1 (%2)").arg(mon.name).arg(mon.id) : qsTr("Monitor: unknown")
+                    }
+                }
+                Detail {
+                    icon: "location_on"
+                    text: qsTr("Address: %1").arg(`0x${root.toplevel?.address}` ?? "unknown")
+                }
+
+                Detail {
+                    icon: "location_searching"
+                    text: qsTr("Position: %1, %2").arg(root.toplevel?.lastIpcObject.at[0] ?? -1).arg(root.toplevel?.lastIpcObject.at[1] ?? -1)
+                }
+
+                Detail {
+                    icon: "resize"
+                    text: qsTr("Size: %1 ⨯ %2").arg(root.toplevel?.lastIpcObject.size[0] ?? -1).arg(root.toplevel?.lastIpcObject.size[1] ?? -1)
+                    color: Config.colors.tertiary
+                }
+
+                Detail {
+                    icon: "account_tree"
+                    text: qsTr("Process id: %1").arg(Number(root.toplevel?.lastIpcObject.pid ?? -1).toLocaleString(undefined, "f"))
+                    color: Config.colors.primary
+                }
+
+                Detail {
+                    icon: "gradient"
+                    text: qsTr("Xwayland: %1").arg(root.toplevel?.lastIpcObject.xwayland ? "yes" : "no")
+                }
+
+                Detail {
+                    icon: "picture_in_picture_center"
+                    text: qsTr("Floating: %1").arg(root.toplevel?.lastIpcObject.floating ? "yes" : "no")
+                    color: Config.colors.secondary
+                }
+            }
+        }
+
+        ClippingWrapperRectangle {
+            id: preview
+            visible: false
+
+            Layout.alignment: Qt.AlignVCenter
+
+            transformOrigin: Item.TopLeft
+            color: "transparent"
+            radius: 12
+
+            ScreencopyView {
+                captureSource: root.toplevel?.wayland ?? null
+                live: true
+
+                constraintSize.width: 375
+                constraintSize.height: 240
+            }
+        }
+
+        Item {
+            id: buttons
+
+            Layout.fillHeight: true
+            width: buttonTopLayout.width
+
+            property real buttonSize: 37
+
+            ColumnLayout {
+                id: buttonTopLayout
+                spacing: 2
+                anchors.top: parent.top
+
+                StateLayer {
+                    id: expand
+
+                    implicitWidth: buttons.buttonSize
+                    implicitHeight: buttons.buttonSize
+
+                    function onClicked(): void {
+                        if (root.state === "")
+                            root.state = "detail";
+                        else
+                            root.wrapper.hasCurrent = false;
+                    }
+
+                    MaterialIcon {
+                        anchors.centerIn: parent
+                        anchors.horizontalCenterOffset: font.pointSize * 0.05
+
+                        text: "chevron_right"
+                        font.pointSize: Config.font.size.large
+                    }
+                }
+
+                StateLayer {
+                    id: pin
+                    visible: false
+
+                    implicitWidth: buttons.buttonSize
+                    implicitHeight: buttons.buttonSize
+
+                    function onClicked(): void {
+                        if (root.pinned) {
+                            root.pinned = false;
+                            root.toplevel = Qt.binding(() => Hypr.activeToplevel);
+                        } else {
+                            root.pinned = true;
+                            root.toplevel = root.toplevel;
+                        }
+                    }
+
+                    MaterialIcon {
+                        anchors.centerIn: parent
+
+                        text: "keep"
+                        fill: root.pinned
+                        font.pointSize: Config.font.size.large - 3
+                    }
+                }
+            }
+
+            ColumnLayout {
+                id: buttonBottomLayout
+                anchors.bottom: parent.bottom
+                spacing: 2
+
+                StateLayer {
+                    id: visit
+                    visible: false
+
+                    implicitWidth: buttons.buttonSize
+                    implicitHeight: buttons.buttonSize
+
+                    disabled: Hypr.activeToplevel === root.toplevel
+                    function onClicked(): void {
+                        if (root.toplevel)
+                            Hypr.dispatch(`focuswindow address:0x${root.toplevel.address}`);
+                    }
+
+                    MaterialIcon {
+                        anchors.centerIn: parent
+
+                        text: "flip_to_front"
+                        color: parent.disabled ? Config.colors.inactive : Config.colors.primary
+                        font.pointSize: Config.font.size.large - 3
+
+                        Behavior on color {
+                            CAnim {}
+                        }
+                    }
+                }
+
+                StateLayer {
+                    id: del
+                    visible: false
+
+                    Layout.bottomMargin: 8
+                    color: Config.colors.error
+
+                    implicitWidth: buttons.buttonSize
+                    implicitHeight: buttons.buttonSize
+
+                    function onClicked(): void {
+                        if (root.toplevel)
+                            Hypr.dispatch(`killwindow address:0x${root.toplevel.address}`);
+                        root.wrapper.hasCurrent = false;
+                    }
+
+                    MaterialIcon {
+                        anchors.centerIn: parent
+
+                        text: "delete"
+                        color: Config.colors.error
+                        font.pointSize: Config.font.size.large - 3
+                    }
+                }
+            }
+        }
+    }
+
+    component Detail: RowLayout {
+        id: detail
+
+        required property string icon
+        required property string text
+        property alias color: icon.color
+
+        Layout.fillWidth: true
+
+        spacing: 7
+
+        MaterialIcon {
+            id: icon
+
+            Layout.alignment: Qt.AlignVCenter
+            font.pointSize: Config.font.size.smaller
+            text: detail.icon
+        }
+
+        CustomText {
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignVCenter
+
+            text: detail.text
+            elide: Text.ElideRight
+            font.family: Config.font.family.mono
+            font.pointSize: Config.font.size.smaller
+        }
+    }
+}

modules/bar/popouts/Background.qml

@@ -0,0 +1,80 @@
+import qs.config
+import qs.custom
+import qs.services
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+    id: root
+
+    required property Item wrapper
+    readonly property bool invertLeftRounding: wrapper.x <= 2
+    readonly property bool invertRightRounding: wrapper.x + wrapper.width >= wrapper.parent.width - 2
+    readonly property real rounding: Config.border.rounding
+    readonly property bool flatten: wrapper.height < rounding * 2
+    readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+    property real ilr: invertLeftRounding ? -1 : 1
+    property real irr: invertRightRounding ? -1 : 1
+
+    property real sideRounding: wrapper.y > 0 ? -1 : 1
+
+    ShapePath {
+        startX: -root.rounding * root.sideRounding + (invertRightRounding ? 1 : 0)
+        startY: -1
+        strokeWidth: -1
+        fillColor: Config.colors.bg
+
+        PathArc {
+            relativeX: root.rounding * root.sideRounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: root.sideRounding < 0 ? PathArc.Counterclockwise : PathArc.Clockwise
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: root.wrapper.height - root.roundingY - root.roundingY * root.ilr
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY * root.ilr
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: root.ilr < 0 ? PathArc.Clockwise : PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: root.wrapper.width - root.rounding * 2
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: -root.roundingY * root.irr
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: root.irr < 0 ? PathArc.Clockwise : PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: -(root.wrapper.height - root.roundingY - root.roundingY * root.irr)
+        }
+        PathArc {
+            relativeX: root.rounding * root.sideRounding
+            relativeY: -root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: root.sideRounding < 0 ? PathArc.Counterclockwise : PathArc.Clockwise
+        }
+    }
+
+    Behavior on ilr {
+        Anim {}
+    }
+
+    Behavior on irr {
+        Anim {}
+    }
+
+    Behavior on sideRounding {
+        Anim {}
+    }
+}

modules/bar/popouts/Battery.qml

@@ -0,0 +1,351 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import Quickshell.Services.UPower
+import QtQuick
+import QtQuick.Shapes
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    spacing: 4
+
+    readonly property color color: UPower.onBattery && UPower.displayDevice.percentage < 0.15 ?
+        Config.colors.batteryWarning :
+        Config.colors.battery
+
+    Loader {
+        Layout.alignment: Qt.AlignHCenter
+
+        active: UPower.displayDevice.isLaptopBattery
+        asynchronous: true
+
+        height: active ? (item?.implicitHeight ?? 0) : 0
+
+        sourceComponent: Item {
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            implicitWidth: meter.width
+            implicitHeight: meter.height + estimate.height + 8
+
+            Shape {
+                id: meter
+
+                preferredRendererType: Shape.CurveRenderer
+                visible: false
+
+                readonly property real size: 96
+                readonly property real padding: 8
+                readonly property real thickness: 8
+                readonly property real angle: 280
+
+                ShapePath {
+                    id: path
+
+                    fillColor: "transparent"
+                    strokeColor: Qt.alpha(root.color, 0.1)
+                    strokeWidth: meter.thickness
+                    capStyle: ShapePath.RoundCap
+
+                    PathAngleArc {
+                        centerX: detail.x + detail.width / 2
+                        centerY: detail.y + detail.height / 2
+                        radiusX: (meter.size + meter.thickness) / 2 + meter.padding
+                        radiusY: radiusX
+                        startAngle: -90 - meter.angle / 2
+                        sweepAngle: meter.angle
+                    }
+
+                    Behavior on strokeColor {
+                        CAnim {}
+                    }
+                }
+
+                ShapePath {
+                    fillColor: "transparent"
+                    strokeColor: root.color
+                    strokeWidth: meter.thickness
+                    capStyle: ShapePath.RoundCap
+
+                    PathAngleArc {
+                        centerX: detail.x + detail.width / 2
+                        centerY: detail.y + detail.height / 2
+                        radiusX: (meter.size + meter.thickness) / 2 + meter.padding
+                        radiusY: radiusX
+                        startAngle: -90 - meter.angle / 2
+                        sweepAngle: meter.angle * UPower.displayDevice.percentage
+                    }
+
+                    Behavior on strokeColor {
+                        CAnim {}
+                    }
+                }
+            }
+
+            Column {
+                id: detail
+
+                anchors.top: parent.top
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.topMargin: (meter.size + meter.thickness - height) / 2 + meter.padding
+                spacing: -6
+
+                // HACK: Prevent load order issues
+                Component.onCompleted: meter.visible = true;
+
+                CustomText {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    text: Math.round(UPower.displayDevice.percentage * 100) + "%"
+                    font.pointSize: Config.font.size.largest
+                }
+
+                CustomText {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.bottomMargin: 10
+                    text: UPowerDeviceState.toString(UPower.displayDevice.state)
+                    animate: true
+                    font.pointSize: Config.font.size.smaller
+
+                    height: implicitHeight * 1.4
+                }
+            }
+
+            Column {
+                id: estimate
+
+                anchors.top: meter.bottom
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.topMargin: 3
+                spacing: -3
+
+                CustomText {
+                    id: estimateTime
+
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    text: UPower.onBattery ? Time.formatSeconds(UPower.displayDevice.timeToEmpty) || "--"
+                        : Time.formatSeconds(UPower.displayDevice.timeToFull) || "--"
+                    animate: (from, to) => from === "--" || to === "--"
+                    font.family: Config.font.family.mono
+                    font.pointSize: Config.font.size.normal
+                }
+
+                CustomText {
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    text: UPower.onBattery ? "remaining" : "to full"
+                    animate: true
+                    font.family: Config.font.family.mono
+                    font.pointSize: Config.font.size.small
+                }
+            }
+        }
+    }
+
+    Loader {
+        Layout.alignment: Qt.AlignHCenter
+
+        active: PowerProfiles.degradationReason !== PerformanceDegradationReason.None
+        asynchronous: true
+
+        height: active ? (item?.implicitHeight ?? 0) : 0
+
+        sourceComponent: CustomRect {
+            implicitWidth: child.implicitWidth + 20
+            implicitHeight: child.implicitHeight + 20
+
+            color: Config.colors.errorBg
+            border.color: Config.colors.error
+            radius: 12
+
+            Column {
+                id: child
+
+                anchors.centerIn: parent
+
+                Row {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    spacing: 7
+
+                    MaterialIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.verticalCenterOffset: -font.pointSize / 10
+
+                        text: "warning"
+                        color: Config.colors.error
+                    }
+
+                    CustomText {
+                        anchors.verticalCenter: parent.verticalCenter
+                        text: qsTr("Performance Degraded")
+                        color: Config.colors.error
+                        font.family: Config.font.family.mono
+                        font.weight: 500
+                    }
+
+                    MaterialIcon {
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.verticalCenterOffset: -font.pointSize / 10
+
+                        text: "warning"
+                        color: Config.colors.error
+                    }
+                }
+
+                CustomText {
+                    anchors.horizontalCenter: parent.horizontalCenter
+
+                    text: qsTr("Reason: %1").arg(PerformanceDegradationReason.toString(PowerProfiles.degradationReason))
+                    color: Config.colors.secondary
+                }
+            }
+        }
+    }
+
+    CustomRect {
+        id: profiles
+
+        Layout.topMargin: 4
+
+        property string current: {
+            const p = PowerProfiles.profile;
+            if (p === PowerProfile.PowerSaver)
+                return saver.icon;
+            if (p === PowerProfile.Performance)
+                return perf.icon;
+            return balance.icon;
+        }
+
+        Layout.alignment: Qt.AlignHCenter
+        Layout.leftMargin: 10
+        Layout.rightMargin: 10
+
+        implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + 60
+        implicitHeight: Math.max(saver.implicitHeight, balance.implicitHeight, perf.implicitHeight) + 8
+
+        color: Config.colors.container
+        radius: 1000
+
+        CustomRect {
+            id: indicator
+
+            color: root.color
+            radius: 1000
+            state: profiles.current
+
+            states: [
+                State {
+                    name: saver.icon
+
+                    Fill {
+                        item: saver
+                    }
+                },
+                State {
+                    name: balance.icon
+
+                    Fill {
+                        item: balance
+                    }
+                },
+                State {
+                    name: perf.icon
+
+                    Fill {
+                        item: perf
+                    }
+                }
+            ]
+
+            transitions: Transition {
+                AnchorAnimation {
+                    duration: Config.anim.durations.normal
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Config.anim.curves.emphasized
+                }
+            }
+        }
+
+        Profile {
+            id: saver
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+
+            profile: PowerProfile.PowerSaver
+            icon: "energy_savings_leaf"
+        }
+
+        Profile {
+            id: balance
+
+            anchors.centerIn: parent
+
+            profile: PowerProfile.Balanced
+            icon: "balance"
+        }
+
+        Profile {
+            id: perf
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 4
+
+            profile: PowerProfile.Performance
+            icon: "rocket_launch"
+        }
+    }
+
+    CustomText {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.topMargin: -2
+        text: "Performance: " + PowerProfile.toString(PowerProfiles.profile)
+        animate: true
+        color: Config.colors.secondary
+        font.pointSize: Config.font.size.small
+        font.weight: 500
+    }
+
+
+    component Fill: AnchorChanges {
+        required property Item item
+
+        target: indicator
+        anchors.left: item.left
+        anchors.right: item.right
+        anchors.top: item.top
+        anchors.bottom: item.bottom
+    }
+
+    component Profile: StateLayer {
+        required property string icon
+        required property int profile
+
+        implicitWidth: icon.implicitHeight + 5
+        implicitHeight: icon.implicitHeight + 5
+
+        function onClicked(): void {
+            PowerProfiles.profile = profile;
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.centerIn: parent
+
+            text: parent.icon
+            font.pointSize: Config.font.size.larger
+            color: profiles.current === text ? Config.colors.primaryDark : Config.colors.primary
+            fill: profiles.current === text ? 1 : 0
+
+            Behavior on fill {
+                Anim {}
+            }
+        }
+    }
+}

modules/bar/popouts/Calendar.qml

@@ -0,0 +1,289 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    spacing: 4
+
+    property date currentDate: new Date()
+    property int currentYear: currentDate.getFullYear()
+    property int currentMonth: currentDate.getMonth()
+
+    RowLayout {
+        Layout.alignment: Qt.AlignHCenter
+
+        MaterialIcon {
+            Layout.bottomMargin: 1
+            text: "calendar_month"
+            color: Config.colors.primary
+            font.pointSize: Config.font.size.large
+        }
+
+        CustomText {
+            text: Time.format("hh:mm:ss")
+            color: Config.colors.primary
+            font.weight: 600
+            font.pointSize: Config.font.size.large
+            font.family: Config.font.family.mono
+        }
+
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.leftMargin: 10
+            Layout.rightMargin: 4
+            spacing: 0
+
+            CustomText {
+                text: Time.format("dddd, MMMM d")
+                font.weight: 600
+                font.pointSize: Config.font.size.normal
+            }
+
+            CustomText {
+                text: Time.format("yyyy-MM-dd")
+                color: Config.colors.tertiary
+                font.pointSize: Config.font.size.smaller
+            }
+        }
+
+    }
+
+    // Calendar grid
+    GridLayout {
+        id: calendarGrid
+
+        Layout.fillWidth: true
+        Layout.margins: 10
+        rowSpacing: 7
+        columnSpacing: 2
+
+        // Month navigation
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.bottomMargin: 7
+            Layout.columnSpan: 2
+
+            CustomRect {
+                implicitWidth: implicitHeight
+                implicitHeight: prevIcon.implicitHeight + 8
+
+                radius: 1000
+                color: Config.colors.container
+
+                StateLayer {
+                    anchors.fill: parent
+
+                    function onClicked(): void {
+                        if (root.currentMonth !== 0) {
+                            root.currentMonth = root.currentMonth - 1;
+                        } else {
+                            root.currentMonth = 11;
+                            root.currentYear = root.currentYear - 1;
+                        }
+                    }
+                }
+
+                MaterialIcon {
+                    id: prevIcon
+
+                    anchors.centerIn: parent
+                    text: "chevron_left"
+                    color: Config.colors.secondary
+                }
+            }
+
+            CustomText {
+                Layout.fillWidth: true
+
+                readonly property list<string> monthNames:
+                Array.from({ length: 12 }, (_, i) => Qt.locale().monthName(i, Qt.locale().LongFormat))
+
+                text: monthNames[root.currentMonth] + " " + root.currentYear
+                horizontalAlignment: Text.AlignHCenter
+                font.weight: 600
+                font.pointSize: Config.font.size.normal
+            }
+
+            CustomRect {
+                implicitWidth: implicitHeight
+                implicitHeight: nextIcon.implicitHeight + 8
+                radius: 1000
+                color: Config.colors.container
+
+                StateLayer {
+                    anchors.fill: parent
+
+                    function onClicked(): void {
+                        if (root.currentMonth !== 11) {
+                            root.currentMonth = root.currentMonth + 1;
+                        } else {
+                            root.currentMonth = 0;
+                            root.currentYear = root.currentYear + 1;
+                        }
+                    }
+                }
+
+                MaterialIcon {
+                    id: nextIcon
+                    anchors.centerIn: parent
+                    text: "chevron_right"
+                    color: Config.colors.primary
+                }
+            }
+        }
+
+        // Day headers
+        DayOfWeekRow {
+            Layout.row: 1
+            Layout.column: 1
+            Layout.fillWidth: true
+            Layout.preferredHeight: Config.font.size.largest
+
+            delegate: CustomText {
+                required property var model
+
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                text: model.shortName
+                color: Config.colors.tertiary
+
+                font.pointSize: Config.font.size.small
+                font.weight: 500
+            }
+        }
+
+        CustomText {
+            Layout.row: 1
+            Layout.leftMargin: -2
+            text: "Week"
+            color: Config.colors.tertiary
+            font.pointSize: Config.font.size.small
+            font.weight: 500
+            font.italic: true
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        // ISO week markers
+        WeekNumberColumn {
+            Layout.row: 2
+            Layout.fillHeight: true
+            Layout.rightMargin: 15
+            height: 240
+
+            month: root.currentMonth
+            year: root.currentYear
+
+            delegate: CustomText {
+                required property var model
+
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                text: model.weekNumber
+                color: Config.colors.tertiary
+
+                font.pointSize: Config.font.size.small
+                font.weight: 600
+                font.italic: true
+            }
+        }
+
+        // Calendar days grid
+        MonthGrid {
+            Layout.row: 2
+            Layout.column: 1
+            Layout.columnSpan: 2
+            Layout.fillWidth: true
+            Layout.preferredHeight: implicitHeight
+            Layout.margins: 6
+
+            month: root.currentMonth
+            year: root.currentYear
+            spacing: 20
+
+            delegate: Item {
+                id: dayItem
+                required property var model
+
+                implicitWidth: implicitHeight
+                implicitHeight: dayText.implicitHeight + 10
+
+                CustomRect {
+                    anchors.centerIn: parent
+                    implicitWidth: parent.implicitHeight
+                    implicitHeight: parent.implicitHeight
+                    radius: 1000
+                    color: dayItem.model.today ? Config.colors.calendar : "transparent"
+
+                    StateLayer {
+                        anchors.fill: parent
+                        visible: dayItem.model.month === root.currentMonth
+                        function onClicked(): void {}
+                    }
+
+                    CustomText {
+                        id: dayText
+                        anchors.centerIn: parent
+                        anchors.verticalCenterOffset: 0.5
+                        horizontalAlignment: Text.AlignHCenter
+                        text: Qt.formatDate(dayItem.model.date, "d")
+                        color: dayItem.model.today ? Config.colors.primaryDark :
+                            dayItem.model.month === root.currentMonth ? Config.colors.primary : Config.colors.inactive
+
+                        font.pointSize: Config.font.size.small
+                        font.weight: dayItem.model.today ? 600 : 400
+                    }
+                }
+            }
+        }
+    }
+
+    // Today button
+    CustomRect {
+        Layout.fillWidth: true
+        implicitHeight: todayBtn.implicitHeight + 10
+        radius: 25
+        color: Config.colors.calendar
+
+        StateLayer {
+            anchors.fill: parent
+            color: Config.colors.secondary
+
+            function onClicked(): void {
+                const today = new Date();
+                root.currentYear = today.getFullYear();
+                root.currentMonth = today.getMonth();
+            }
+        }
+
+        Row {
+            id: todayBtn
+            anchors.centerIn: parent
+            spacing: 7
+
+            MaterialIcon {
+                anchors.verticalCenter: parent.verticalCenter
+
+                text: "today"
+                color: Config.colors.primaryDark
+                font.pointSize: Config.font.size.normal
+            }
+
+            CustomText {
+                anchors.verticalCenter: parent.verticalCenter
+
+                text: qsTr("Today")
+                color: Config.colors.primaryDark
+            }
+        }
+    }
+}

modules/bar/popouts/Content.qml

@@ -0,0 +1,157 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import Quickshell
+import Quickshell.Hyprland
+import Quickshell.Services.SystemTray
+import Quickshell.Services.UPower
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property Item wrapper
+    required property HyprlandToplevel window
+
+    anchors.centerIn: parent
+
+    implicitWidth: (content.children.find(c => c.shouldBeActive)?.implicitWidth ?? 0) + 30
+    implicitHeight: (content.children.find(c => c.shouldBeActive)?.implicitHeight ?? 0) + 20
+    readonly property color color: content.children.find(c => c.active)?.color ?? "transparent"
+    clip: true
+
+    Item {
+        id: content
+
+        anchors.fill: parent
+        anchors.margins: 15
+
+        Popout {
+            name: "nixos"
+            source: "NixOS.qml"
+            color: Config.colors.nixos
+        }
+
+        Popout {
+            name: "activewindow"
+
+            sourceComponent: ActiveWindow {
+                uiState: root.uiState
+                wrapper: root.wrapper
+                window: root.window
+            }
+            color: Config.colors.activeWindow
+        }
+
+        Popout {
+            name: "calendar"
+            source: "Calendar.qml"
+            color: Config.colors.calendar
+        }
+
+        Popout {
+            name: "network"
+            source: "Network.qml"
+            color: Config.colors.network
+        }
+
+        Popout {
+            name: "idleinhibit"
+            source: "IdleInhibit.qml"
+            color: Config.colors.idle
+        }
+
+        Popout {
+            name: "battery"
+            source: "Battery.qml"
+            color: UPower.displayDevice.isLaptopBattery &&
+                UPower.onBattery && UPower.displayDevice.percentage < 0.15 ?
+                Config.colors.batteryWarning :
+                Config.colors.battery
+        }
+
+        Repeater {
+            model: SystemTray.items
+
+            Popout {
+                id: trayMenu
+
+                required property SystemTrayItem modelData
+                required property int index
+
+                anchors.verticalCenterOffset: -5
+
+                name: `traymenu${index}`
+                sourceComponent: trayMenuComp
+                color: Qt.tint(Config.colors.brown, Qt.alpha(Config.colors.yellow, Math.min(index / 8, 1)))
+
+                Connections {
+                    target: root.wrapper
+
+                    function onHasCurrentChanged(): void {
+                        if (root.wrapper.hasCurrent && trayMenu.shouldBeActive) {
+                            trayMenu.sourceComponent = null;
+                            trayMenu.sourceComponent = trayMenuComp;
+                        }
+                    }
+                }
+
+                Component {
+                    id: trayMenuComp
+
+                    TrayMenu {
+                        popouts: root.wrapper
+                        trayItem: trayMenu.modelData.menu
+                    }
+                }
+            }
+        }
+    }
+
+    component Popout: Loader {
+        id: popout
+
+        required property string name
+        property bool shouldBeActive: root.wrapper.currentName === name
+        property color color
+
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenterOffset: -3
+        anchors.right: parent.right
+
+        opacity: 0
+        scale: 0.8
+        active: false
+        asynchronous: true
+
+        states: State {
+            name: "active"
+            when: popout.shouldBeActive
+
+            PropertyChanges {
+                popout.active: true
+                popout.opacity: 1
+                popout.scale: 1
+            }
+        }
+
+        transitions: [
+            Transition {
+                from: ""
+                to: "active"
+
+                SequentialAnimation {
+                    PropertyAction {
+                        target: popout
+                        property: "active"
+                    }
+                    Anim {
+                        properties: "opacity,scale"
+                    }
+                }
+            }
+        ]
+    }
+}

modules/bar/popouts/IdleInhibit.qml

@@ -0,0 +1,48 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    spacing: 15
+
+    Toggle {
+        label.text: qsTr("Idle Inhibitor")
+        label.font.weight: 500
+        checked: Idle.inhibit
+        toggle.onToggled: Idle.inhibit = !Idle.inhibit
+    }
+
+    Toggle {
+        label.text: qsTr("Inhibit While Playing Audio")
+        checked: Idle.inhibitPipewire
+        toggle.onToggled: Idle.toggleInhibitPipewire()
+    }
+
+    component Toggle: RowLayout {
+        property alias checked: toggle.checked
+        property alias label: label
+        property alias toggle: toggle
+
+        Layout.fillWidth: true
+        Layout.rightMargin: 5
+        spacing: 15
+
+        CustomText {
+            id: label
+            Layout.fillWidth: true
+        }
+
+        CustomSwitch {
+            id: toggle
+            accent: Color.mute(Config.colors.idle, 1.1)
+        }
+    }
+}

modules/bar/popouts/Network.qml

@@ -0,0 +1,259 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    property string connectingToSsid: ""
+
+    spacing: 5
+    width: 320
+
+    Toggle {
+        label.text: qsTr("Wifi %1".arg(Network.wifiEnabled ? "Enabled" : "Disabled"))
+        label.font.weight: 500
+        checked: Network.wifiEnabled
+        toggle.onToggled: Network.enableWifi(checked)
+    }
+
+    CustomText {
+        Layout.topMargin: 7
+        text: qsTr("%1 networks available").arg(Network.networks.length)
+        color: Config.colors.primary
+        font.pointSize: Config.font.size.small
+    }
+
+    CustomListView {
+        id: list
+        Layout.fillWidth: true
+        Layout.preferredHeight: Math.min(contentHeight, 240)
+        spacing: 5
+        clip: true
+
+        CustomScrollBar.vertical: CustomScrollBar {
+            flickable: list
+        }
+
+        model: ScriptModel {
+            values: [...Network.networks].sort((a, b) => {
+                if (a.active !== b.active)
+                    return b.active - a.active;
+                return b.strength - a.strength;
+            })
+        }
+
+        delegate: RowLayout {
+            id: networkItem
+
+            required property Network.AccessPoint modelData
+            readonly property bool isConnecting: root.connectingToSsid === modelData.ssid
+            readonly property bool loading: networkItem.isConnecting
+
+            readonly property color iconColor: networkItem.modelData.active ? Config.colors.primary : Config.colors.inactive
+
+            width: list.width - 8
+            spacing: 5
+
+            MaterialIcon {
+                text: Icons.getNetworkIcon(networkItem.modelData.strength)
+                color: iconColor
+
+                MouseArea {
+                    width: networkItem.width
+                    height: networkItem.height
+
+                    onClicked: {
+                        if (Network.wifiEnabled && !networkItem.loading) {
+                            if (networkItem.modelData.active) {
+                                Network.disconnectFromNetwork();
+                            } else {
+                                root.connectingToSsid = networkItem.modelData.ssid;
+                                Network.connectToNetwork(networkItem.modelData.ssid, "");
+                            }
+                        }
+                    }
+                }
+            }
+
+            MaterialIcon {
+                opacity: networkItem.modelData.isSecure ? 1 : 0
+                text: "lock"
+                font.pointSize: Config.font.size.smaller
+                color: iconColor
+            }
+
+            CustomText {
+                Layout.fillWidth: true
+                Layout.rightMargin: 10
+                text: networkItem.modelData.ssid
+                elide: Text.ElideRight
+                font.weight: networkItem.modelData.active ? 500 : 400
+                color: networkItem.modelData.active ? Config.colors.secondary : Config.colors.tertiary
+            }
+
+            CustomBusyIndicator {
+                implicitWidth: implicitHeight
+                implicitHeight: Config.font.size.normal
+
+                running: opacity > 0
+                opacity: networkItem.loading ? 1 : 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+        }
+
+        add: Transition {
+            Anim {
+                property: "opacity"
+                from: 0
+                to: 1
+            }
+            Anim {
+                property: "scale"
+                from: 0.7
+                to: 1
+            }
+        }
+
+        remove: Transition {
+            Anim {
+                property: "opacity"
+                from: 1
+                to: 0
+            }
+            Anim {
+                property: "scale"
+                from: 1
+                to: 0.7
+            }
+        }
+
+        addDisplaced: Transition {
+            Anim {
+                property: "y"
+                duration: Config.anim.durations.small
+            }
+            Anim {
+                properties: "opacity,scale"
+                to: 1
+            }
+        }
+
+        displaced: Transition {
+            Anim {
+                property: "y"
+            }
+            Anim {
+                properties: "opacity,scale"
+                to: 1
+            }
+        }
+    }
+
+    // Rescan button
+    CustomRect {
+        Layout.topMargin: 8
+        Layout.fillWidth: true
+        implicitHeight: rescanBtn.implicitHeight + 10
+
+        radius: 17
+        color: !Network.wifiEnabled ? Config.colors.inactive : Qt.alpha(Config.colors.network, Network.scanning ? 0.8 : 1)
+
+        Behavior on color {
+            CAnim { duration: Config.anim.durations.small }
+        }
+
+        StateLayer {
+            id: layer
+            anchors.fill: parent
+
+            color: Config.colors.primaryDark
+            disabled: Network.scanning || !Network.wifiEnabled
+
+            function onClicked(): void {
+                Network.rescanWifi();
+            }
+        }
+
+        Row {
+            id: rescanBtn
+            anchors.centerIn: parent
+            spacing: 7
+
+            property color color: layer.disabled ? Config.colors.bg : Config.colors.primaryDark
+
+            Behavior on color {
+                CAnim { duration: Config.anim.durations.small }
+            }
+
+            MaterialIcon {
+                id: scanIcon
+                anchors.verticalCenter: parent.verticalCenter
+
+                animate: true
+                text: Network.scanning ? "refresh" : "wifi_find"
+                color: parent.color
+
+                RotationAnimation on rotation {
+                    running: Network.scanning
+                    loops: Animation.Infinite
+                    from: 0
+                    to: 360
+                    duration: 1000
+                }
+            }
+
+            CustomText {
+                anchors.verticalCenter: parent.verticalCenter
+
+                text: Network.scanning ? qsTr("Scanning...") : qsTr("Rescan networks")
+                color: parent.color
+            }
+        }
+    }
+
+    // Reset connecting state when network changes
+    Connections {
+        target: Network
+
+        function onActiveChanged(): void {
+            if (Network.active && root.connectingToSsid === Network.active.ssid) {
+                root.connectingToSsid = "";
+            }
+        }
+
+        function onScanningChanged(): void {
+            if (!Network.scanning)
+                scanIcon.rotation = 0;
+        }
+    }
+
+    component Toggle: RowLayout {
+        property alias checked: toggle.checked
+        property alias label: label
+        property alias toggle: toggle
+
+        Layout.fillWidth: true
+        Layout.rightMargin: 5
+        spacing: 15
+
+        CustomText {
+            id: label
+            Layout.fillWidth: true
+        }
+
+        CustomSwitch {
+            id: toggle
+            accent: Color.mute(Config.colors.network)
+        }
+    }
+}

modules/bar/popouts/NixOS.qml

@@ -0,0 +1,161 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    spacing: 7
+    width: 340
+
+    function nixosVersionShort(version: string): string {
+        const parts = version.split('.');
+        return `${parts[0]}.${parts[1]}`;
+    }
+
+    Row {
+        spacing: 12
+
+        Image {
+            anchors.verticalCenter: parent.verticalCenter
+
+            readonly property real size: 72
+
+            source: "root:/assets/nixos-logo.svg"
+            width: size
+            height: size
+            sourceSize.width: size
+            sourceSize.height: size
+        }
+
+        CustomText {
+            anchors.verticalCenter: parent.verticalCenter
+            text: "NixOS"
+            color: Config.colors.secondary
+            font.pointSize: Config.font.size.largest * 1.3
+        }
+
+        Column {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -2
+
+            CustomText {
+                text: "v" + root.nixosVersionShort(NixOS.currentGen?.nixosVersion)
+                font.pointSize: Config.font.size.larger
+            }
+
+            CustomText {
+                text: "Nix " + NixOS.nixVersion
+            }
+        }
+    }
+
+    CustomRect {
+        Layout.topMargin: 5
+        Layout.fillWidth: true
+        height: 180
+
+        radius: 17
+        color: Config.colors.container
+
+        CustomText {
+            id: genText
+
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 7
+
+            text: "Generations"
+            color: Config.colors.secondary
+            font.pointSize: Config.font.size.normal
+            font.weight: 500
+        }
+
+        CustomListView {
+            id: list
+
+            anchors.top: genText.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.margins: 6
+            anchors.topMargin: 8
+
+            spacing: 6
+            clip: true
+
+            model: ScriptModel {
+                values: [...NixOS.generations]
+                objectProp: "id"
+            }
+
+            CustomScrollBar.vertical: CustomScrollBar {
+                flickable: list
+            }
+
+
+            delegate: CustomRect {
+                required property NixOS.Generation modelData
+
+                width: list.width
+                height: 42
+
+                radius: 12
+                color: modelData.current ?
+                    Qt.tint(Config.colors.container, Qt.alpha(Config.colors.nixos, 0.2)) :
+                    Config.colors.containerAlt
+
+                Item {
+                    anchors.fill: parent
+                    anchors.margins: 7
+                    anchors.topMargin: 2
+                    anchors.bottomMargin: 1
+
+                    CustomText {
+                        anchors.top: parent.top
+                        anchors.left: parent.left
+                        anchors.topMargin: 2
+
+                        text: `Generation ${modelData.id}`
+                        color: modelData.current ? Config.colors.nixos : Config.colors.secondary
+                    }
+
+                    CustomText {
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.rightMargin: 6
+
+                        text: modelData.revision !== "Unknown" ? modelData.revision : ""
+                        elide: Text.ElideRight
+                        font.family: Config.font.family.mono
+                        color: modelData.current ? Config.colors.secondary : Config.colors.primary
+                    }
+
+                    CustomText {
+                        anchors.top: parent.top
+                        anchors.right: parent.right
+
+                        text: `NixOS ${root.nixosVersionShort(modelData.nixosVersion)}  🞄  Linux ${modelData.kernelVersion}`
+                        color: modelData.current ? Config.colors.secondary : Config.colors.primary
+                    }
+
+                    CustomText {
+                        anchors.bottom: parent.bottom
+                        anchors.right: parent.right
+
+                        text: Qt.formatDateTime(modelData.date, "yyyy-MM-dd ddd hh:mm")
+                        font.family: Config.font.family.mono
+                        color: modelData.current ? Config.colors.secondary : Config.colors.primary
+                    }
+                }
+            }
+        }
+    }
+}

modules/bar/popouts/TrayMenu.qml

@@ -0,0 +1,231 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import QtQuick
+import QtQuick.Controls
+
+StackView {
+    id: root
+
+    required property Item popouts
+    required property QsMenuHandle trayItem
+
+    implicitWidth: currentItem.implicitWidth
+    implicitHeight: currentItem.implicitHeight 
+
+    initialItem: SubMenu {
+        handle: root.trayItem
+    }
+
+    pushEnter: NoAnim {}
+    pushExit: NoAnim {}
+    popEnter: NoAnim {}
+    popExit: NoAnim {}
+
+    component NoAnim: Transition {
+        NumberAnimation {
+            duration: 0
+        }
+    }
+
+    component SubMenu: Column {
+        id: menu
+
+        required property QsMenuHandle handle
+        property bool isSubMenu
+        property bool shown
+
+        spacing: 7
+
+        opacity: shown ? 1 : 0
+        scale: shown ? 1 : 0.8
+
+        Component.onCompleted: shown = true
+        StackView.onActivating: shown = true
+        StackView.onDeactivating: shown = false
+        StackView.onRemoved: destroy()
+
+        Behavior on opacity {
+            Anim {}
+        }
+
+        Behavior on scale {
+            Anim {}
+        }
+
+        QsMenuOpener {
+            id: menuOpener
+
+            menu: menu.handle
+        }
+
+        Repeater {
+            model: menuOpener.children
+
+            CustomRect {
+                id: item
+
+                required property QsMenuEntry modelData
+
+                implicitWidth: 200
+                implicitHeight: modelData.isSeparator ? 1 : children.implicitHeight
+
+                radius: 100
+                color: modelData.isSeparator ? Config.colors.inactive : "transparent"
+
+                Loader {
+                    id: children
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    active: !item.modelData.isSeparator
+                    asynchronous: true
+
+                    sourceComponent: Item {
+                        implicitHeight: label.implicitHeight
+
+                        StateLayer {
+                            anchors.fill: parent
+                            anchors.margins: -2
+                            anchors.leftMargin: -7
+                            anchors.rightMargin: -7
+
+                            radius: item.radius
+                            disabled: !item.modelData.enabled
+
+                            function onClicked(): void {
+                                const entry = item.modelData;
+                                if (entry.hasChildren)
+                                    root.push(subMenuComp.createObject(null, {
+                                        handle: entry,
+                                        isSubMenu: true
+                                    }));
+                                else {
+                                    item.modelData.triggered();
+                                    root.popouts.hasCurrent = false;
+                                }
+                            }
+                        }
+
+                        Loader {
+                            id: icon
+
+                            anchors.left: parent.left
+
+                            active: item.modelData.icon !== ""
+                            asynchronous: true
+
+                            sourceComponent: IconImage {
+                                implicitSize: label.implicitHeight
+
+                                source: item.modelData.icon
+                            }
+                        }
+
+                        CustomText {
+                            id: label
+
+                            anchors.left: icon.right
+                            anchors.leftMargin: icon.active ? 10 : 0
+
+                            text: labelMetrics.elidedText
+                            color: item.modelData.enabled ? Config.colors.primary : Config.colors.tertiary
+                        }
+
+                        TextMetrics {
+                            id: labelMetrics
+
+                            text: item.modelData.text
+                            font.pointSize: label.font.pointSize
+                            font.family: label.font.family
+
+                            elide: Text.ElideRight
+                            elideWidth: 200 - (icon.active ? icon.implicitWidth + label.anchors.leftMargin : 0) - (expand.active ? expand.implicitWidth + 12 : 0)
+                        }
+
+                        Loader {
+                            id: expand
+
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: parent.right
+
+                            active: item.modelData.hasChildren
+                            asynchronous: true
+
+                            sourceComponent: MaterialIcon {
+                                text: "chevron_right"
+                                color: item.modelData.enabled ? Config.colors.primary : Config.colors.tertiary
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        Loader {
+            active: menu.isSubMenu
+            asynchronous: true
+
+            sourceComponent: Item {
+                implicitWidth: back.implicitWidth
+                implicitHeight: back.implicitHeight + Appearance.spacing.small / 2
+
+                Item {
+                    anchors.bottom: parent.bottom
+                    implicitWidth: back.implicitWidth
+                    implicitHeight: back.implicitHeight
+
+                    CustomRect {
+                        anchors.fill: parent
+                        anchors.margins: -7
+                        anchors.leftMargin: -7
+                        anchors.rightMargin: -14
+
+                        radius: 1000
+                        color: Config.colors.container
+
+                        StateLayer {
+                            anchors.fill: parent
+                            radius: parent.radius
+                            color: Config.colors.primary
+
+                            function onClicked(): void {
+                                root.pop();
+                            }
+                        }
+                    }
+
+                    Row {
+                        id: back
+
+                        anchors.verticalCenter: parent.verticalCenter
+
+                        MaterialIcon {
+                            anchors.verticalCenter: parent.verticalCenter
+                            text: "chevron_left"
+                            color: Config.colors.primary
+                        }
+
+                        CustomText {
+                            anchors.verticalCenter: parent.verticalCenter
+                            text: qsTr("Back")
+                            color: Config.colors.primary
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: subMenuComp
+
+        SubMenu {}
+    }
+}

modules/bar/popouts/Wrapper.qml

@@ -0,0 +1,156 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import QtQuick
+import QtQuick.Effects
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property ShellScreen screen
+
+    readonly property real nonAnimWidth: content.implicitWidth
+    readonly property real nonAnimHeight: y > 0 || hasCurrent ? content.implicitHeight : 0
+
+    property string currentName
+    property real currentCenter
+    property bool hasCurrent
+
+    property real currentCenterBounded: Math.min(Math.max(currentCenter, nonAnimWidth / 2),
+                                                 parent.width - nonAnimWidth / 2)
+    x: currentCenterBounded - implicitWidth / 2
+
+    property HyprlandToplevel window
+
+    property bool persistent
+
+    visible: width > 0 && height > 0
+
+    implicitWidth: nonAnimWidth
+    implicitHeight: nonAnimHeight
+
+    Background {
+        id: background
+        visible: false
+        wrapper: root
+    }
+
+    MultiEffect {
+        anchors.fill: background
+        source: background
+        shadowEnabled: true
+        blurMultiplier: 0.3
+        blurMax: 30
+        shadowColor: content.active ? content.item.color : "transparent"
+
+        Behavior on shadowColor {
+            CAnim {}
+        }
+    }
+
+    Item {
+        anchors.fill: parent
+        clip: true
+
+        Comp {
+            id: content
+
+            shouldBeActive: root.hasCurrent
+            asynchronous: true
+            anchors.top: parent.top
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            sourceComponent: Content {
+                id: content
+
+                wrapper: root
+                uiState: root.uiState
+                window: root.window
+            }
+        }
+    }
+
+    Behavior on currentCenterBounded {
+        enabled: root.implicitHeight > 0
+
+        Anim {
+            easing.bezierCurve: Config.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitWidth {
+        enabled: root.implicitHeight > 0
+
+        Anim {
+            easing.bezierCurve: Config.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        Anim {
+            easing.bezierCurve: Config.anim.curves.emphasized
+        }
+    }
+
+    component Comp: Loader {
+        id: comp
+
+        property bool shouldBeActive
+
+        asynchronous: true
+        active: false
+        opacity: 0
+
+        states: State {
+            name: "active"
+            when: comp.shouldBeActive
+
+            PropertyChanges {
+                comp.opacity: 1
+                comp.active: true
+            }
+        }
+
+        transitions: [
+            Transition {
+                from: ""
+                to: "active"
+
+                SequentialAnimation {
+                    PropertyAction {
+                        property: "active"
+                    }
+                    Anim {
+                        property: "opacity"
+                        easing.bezierCurve: Config.anim.curves.standard
+                    }
+                }
+            },
+            Transition {
+                from: "active"
+                to: ""
+
+                SequentialAnimation {
+                    Anim {
+                        property: "opacity"
+                        easing.bezierCurve: Config.anim.curves.standard
+                    }
+                    PropertyAction {
+                        property: "active"
+                    }
+                    PropertyAction {
+                        target: root
+                        property: "persistent"
+                        value: false
+                    }
+                }
+            }
+        ]
+    }
+}

modules/dashboard/Background.qml

@@ -0,0 +1,59 @@
+import qs.config
+import qs.services
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+    id: root
+
+    required property Item wrapper
+    readonly property real rounding: Config.border.rounding
+    readonly property bool flatten: wrapper.width < rounding * 2
+    readonly property real roundingX: flatten ? wrapper.width / 2 : rounding
+
+    ShapePath {
+        startX: -0.5
+        startY: -root.rounding
+        strokeWidth: -1
+        fillColor: Config.colors.bg
+
+        PathArc {
+            relativeX: root.roundingX
+            relativeY: root.rounding
+            radiusX: Math.min(root.rounding, root.wrapper.width)
+            radiusY: root.rounding
+            direction: PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: root.wrapper.width - root.roundingX * 2
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.roundingX
+            relativeY: root.rounding
+            radiusX: Math.min(root.rounding, root.wrapper.width)
+            radiusY: root.rounding
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: root.wrapper.height - root.rounding * 2
+        }
+        PathArc {
+            relativeX: -root.roundingX
+            relativeY: root.rounding
+            radiusX: Math.min(root.rounding, root.wrapper.width)
+            radiusY: root.rounding
+        }
+        PathLine {
+            relativeX: -(root.wrapper.width - root.roundingX * 2)
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: -root.roundingX
+            relativeY: root.rounding
+            radiusX: Math.min(root.rounding, root.wrapper.width)
+            radiusY: root.rounding
+            direction: PathArc.Counterclockwise
+        }
+    }
+}

modules/dashboard/Content.qml

@@ -0,0 +1,124 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.bar.popouts as BarPopouts
+import qs.config
+import qs.custom
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property BarPopouts.Wrapper popouts
+
+    readonly property color color: tabs.color
+    readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
+    implicitWidth: tabs.implicitWidth + tabs.anchors.leftMargin + view.implicitWidth + viewWrapper.anchors.margins * 2
+    implicitHeight: nonAnimHeight
+
+    Tabs {
+        id: tabs
+
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.leftMargin: 10
+        anchors.margins: 15
+        nonAnimHeight: root.nonAnimHeight - anchors.margins * 2
+        uiState: root.uiState
+    }
+
+    CustomClippingRect {
+        id: viewWrapper
+
+        anchors.left: tabs.right
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: 15
+
+        radius: 17
+        color: "transparent"
+
+        Item {
+            id: view
+
+            readonly property int currentIndex: root.uiState.dashboardTab
+            readonly property Item currentItem: column.children[currentIndex]
+
+            anchors.fill: parent
+
+            implicitWidth: currentItem.implicitWidth
+            implicitHeight: currentItem.implicitHeight
+
+            ColumnLayout {
+                id: column
+
+                y: -view.currentItem.y
+                spacing: 8
+
+                Pane {
+                    sourceComponent: Dash {
+                        uiState: root.uiState
+                    }
+                }
+
+                Pane {
+                    sourceComponent: Mixer {
+                        uiState: root.uiState
+                        index: 1
+                    }
+                }
+
+                Pane {
+                    sourceComponent: Media {
+                        uiState: root.uiState
+                    }
+                }
+
+                Pane {
+                    source: "Performance.qml"
+                }
+
+                Pane {
+                    sourceComponent: Workspaces {
+                        uiState: root.uiState
+                        popouts: root.popouts
+                    }
+                }
+
+                Behavior on y {
+                    Anim {}
+                }
+            }
+        }
+    }
+
+    Behavior on implicitWidth {
+        Anim {
+            duration: Config.anim.durations.large
+            easing.bezierCurve: Config.anim.curves.emphasized
+        }
+    }
+
+    Behavior on implicitHeight {
+        Anim {
+            duration: Config.anim.durations.large
+            easing.bezierCurve: Config.anim.curves.emphasized
+        }
+    }
+
+    component Pane: Loader {
+        Layout.alignment: Qt.AlignLeft
+
+        property real bufferY: 5
+        Component.onCompleted: active = Qt.binding(() => {
+            const vy = Math.floor(-column.y);
+            const vey = Math.floor(vy + view.height);
+            return (vy >= y - bufferY && vy <= y + implicitHeight) || (vey >= y + bufferY && vey <= y + implicitHeight);
+        })
+    }
+}

modules/dashboard/Dash.qml

@@ -0,0 +1,65 @@
+import qs.config
+import qs.custom
+import qs.services
+import Quickshell
+import QtQuick.Layouts
+import "dash"
+
+GridLayout {
+    id: root
+
+    required property PersistentProperties uiState
+
+    rowSpacing: 10
+    columnSpacing: 10
+
+    Rect {
+        Layout.fillWidth: true
+        Layout.preferredWidth: Config.dashboard.timeWidth
+        Layout.preferredHeight: Config.dashboard.timeHeight
+
+        DateTime {}
+    }
+
+    Rect {
+        Layout.row: 1
+        Layout.fillWidth: true
+        Layout.preferredHeight: 70
+
+        User {}
+    }
+
+    Rect {
+        Layout.row: 2
+        Layout.fillWidth: true
+        Layout.preferredHeight: 110
+
+        Weather {}
+    }
+
+    Rect {
+        Layout.row: 0
+        Layout.column: 1
+        Layout.rowSpan: 3
+        Layout.preferredWidth: 200
+        Layout.preferredHeight: 300
+        Layout.fillWidth: true
+
+        Media {}
+    }
+
+    Rect {
+        Layout.row: 3
+        Layout.columnSpan: 2
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        Layout.preferredHeight: 300
+
+        Notifs {}
+    }
+
+    component Rect: CustomRect {
+        radius: 12
+        color: Config.colors.containerDash
+    }
+}

modules/dashboard/Media.qml

@@ -0,0 +1,532 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.Mpris
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Shapes
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+
+    property real playerProgress: {
+        const active = Players.active;
+        return active?.length ? active.position / active.length : 0;
+    }
+
+    function lengthStr(length: int): string {
+        if (length < 0)
+            return "-1:-1";
+
+        const hours = Math.floor(length / 3600);
+        const mins = Math.floor((length % 3600) / 60);
+        const secs = Math.floor(length % 60).toString().padStart(2, "0");
+
+        if (hours > 0)
+            return `${hours}:${mins.toString().padStart(2, "0")}:${secs}`;
+        return `${mins}:${secs}`;
+    }
+
+    implicitWidth: slider.width + 32
+    implicitHeight: childrenRect.height
+
+    Timer {
+        running: Players.active?.isPlaying ?? false
+        interval: Config.dashboard.mediaUpdateInterval
+        triggeredOnStart: true
+        repeat: true
+        onTriggered: Players.active?.positionChanged()
+    }
+
+    Item {
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: Config.dashboard.mediaCoverArtHeight
+
+        CustomClippingRect {
+            id: cover
+
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.leftMargin: 12
+            anchors.rightMargin: 12
+            anchors.verticalCenter: parent.top
+            anchors.verticalCenterOffset: Config.dashboard.mediaCoverArtHeight / 2
+
+            implicitWidth: image.paintedWidth > 0 ? image.paintedWidth : Config.dashboard.mediaCoverArtHeight
+            implicitHeight: image.paintedHeight > 0 ? image.paintedHeight : Config.dashboard.mediaCoverArtHeight
+
+            color: Config.colors.containerDash
+            radius: 12
+
+            MaterialIcon {
+                anchors.centerIn: parent
+
+                grade: 200
+                text: "art_track"
+                color: Config.colors.tertiary
+                font.pointSize: (parent.width * 0.4) || 1
+            }
+
+            Image {
+                id: image
+
+                anchors.centerIn: parent
+                width: Config.dashboard.mediaCoverArtWidth
+                height: Config.dashboard.mediaCoverArtHeight
+
+                source: Players.active?.trackArtUrl ?? ""
+                asynchronous: true
+                fillMode: Image.PreserveAspectFit
+                sourceSize.width: width
+                sourceSize.height: height
+            }
+        }
+    }
+
+    ColumnLayout {
+        id: details
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: 12 + Config.dashboard.mediaCoverArtHeight
+
+        spacing: 8
+
+        CustomText {
+            id: title
+
+            Layout.fillWidth: true
+            Layout.maximumWidth: parent.implicitWidth
+
+            animate: true
+            horizontalAlignment: Text.AlignHCenter
+            text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
+            color: Config.colors.secondary
+            font.pointSize: Config.font.size.normal
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+
+        CustomText {
+            id: artist
+
+            Layout.fillWidth: true
+
+            visible: Players.active
+            animate: true
+            horizontalAlignment: Text.AlignHCenter
+            text: Players.active?.trackArtist || qsTr("Unknown artist")
+            opacity: Players.active ? 1 : 0
+            color: Config.colors.primary
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+
+        CustomText {
+            id: album
+
+            Layout.fillWidth: true
+            Layout.topMargin: -5
+
+            visible: text !== ""
+            animate: true
+            horizontalAlignment: Text.AlignHCenter
+            text: Players.active?.trackAlbum ?? ""
+            color: Config.colors.tertiary
+            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+        }
+
+        RowLayout {
+            id: controls
+
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: 12
+            Layout.bottomMargin: 10
+
+            spacing: 7
+
+            PlayerControl {
+                icon.text: "skip_previous"
+                canUse: Players.active?.canGoPrevious ?? false
+
+                function onClicked(): void {
+                    Players.active?.previous();
+                }
+            }
+
+            CustomRect {
+                id: playBtn
+
+                implicitWidth: Math.max(playIcon.implicitWidth, playIcon.implicitHeight)
+                implicitHeight: implicitWidth
+
+                radius: Players.active?.isPlaying ? 12 : implicitHeight / 2
+                color: {
+                    if (!Players.active?.canTogglePlaying)
+                        return "transparent";
+                    return Players.active?.isPlaying ? Config.colors.media : Config.colors.container;
+                }
+
+                StateLayer {
+                    anchors.fill: parent
+                    disabled: !Players.active?.canTogglePlaying
+                    color: Players.active?.isPlaying ? Config.colors.primaryDark : Config.colors.primary
+                    radius: parent.radius
+
+                    function onClicked(): void {
+                        Players.active?.togglePlaying();
+                    }
+                }
+
+                MaterialIcon {
+                    id: playIcon
+
+                    anchors.centerIn: parent
+                    anchors.horizontalCenterOffset: -font.pointSize * 0.02
+                    anchors.verticalCenterOffset: font.pointSize * 0.02
+
+                    animate: true
+                    fill: 1
+                    text: Players.active?.isPlaying ? "pause" : "play_arrow"
+                    color: {
+                        if (!Players.active?.canTogglePlaying)
+                            return Config.colors.inactive;
+                        return Players.active?.isPlaying ? Config.colors.primaryDark : Config.colors.media;
+                    }
+                    font.pointSize: Config.font.size.largest
+                }
+
+                Behavior on radius {
+                    Anim {}
+                }
+            }
+
+            PlayerControl {
+                icon.text: "skip_next"
+                canUse: Players.active?.canGoNext ?? false
+
+                function onClicked(): void {
+                    Players.active?.next();
+                }
+            }
+        }
+
+        CustomSlider {
+            id: slider
+
+            enabled: !!Players.active
+            progressColor: Config.colors.media
+            implicitWidth: controls.implicitWidth * 1.5
+            implicitHeight: 20
+
+            onMoved: {
+                const active = Players.active;
+                if (active?.canSeek && active?.positionSupported)
+                    active.position = value * active.length;
+            }
+
+            Binding {
+                target: slider
+                property: "value"
+                value: root.playerProgress
+                when: !slider.pressed
+            }
+
+            CustomMouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.NoButton
+
+                function onWheel(event: WheelEvent) {
+                    const active = Players.active;
+                    if (!active?.canSeek || !active?.positionSupported)
+                        return;
+
+                    event.accepted = true;
+                    const delta = event.angleDelta.y > 0 ? 10 : -10;    // Time 10 seconds
+                    Qt.callLater(() => {
+                        active.position = Math.max(0, Math.min(active.length, active.position + delta));
+                    });
+                }
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.topMargin: -6
+            implicitHeight: Math.max(position.implicitHeight, length.implicitHeight)
+            opacity: Players.active ? 1 : 0
+            visible: opacity > 0
+
+            CustomText {
+                id: position
+
+                anchors.left: parent.left
+
+                text: root.lengthStr(Players.active?.position ?? 0)
+                color: Config.colors.primary
+                font.pointSize: Config.font.size.small
+            }
+
+            CustomText {
+                id: length
+
+                anchors.right: parent.right
+
+                text: root.lengthStr(Players.active?.length ?? 0)
+                color: Config.colors.primary
+                font.pointSize: Config.font.size.small
+            }
+
+            Behavior on opacity {
+                Anim { duration: Config.anim.durations.small }
+            }
+        }
+
+        RowLayout {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.topMargin: 12
+            spacing: 7
+
+            PlayerControl {
+                icon.text: "flip_to_front"
+                canUse: Players.active?.canRaise ?? false
+                fontSize: Config.font.size.larger
+                size: playerSelector.height
+                fill: 0
+                color: Config.colors.container
+                activeColor: Config.colors.secondary
+
+                function onClicked(): void {
+                    Players.active?.raise();
+                    root.uiState.dashboard = false;
+                }
+            }
+
+            CustomRect {
+                id: playerSelector
+
+                property bool expanded
+
+                Layout.alignment: Qt.AlignVCenter
+
+                implicitWidth: slider.implicitWidth * 0.6
+                implicitHeight: currentPlayer.implicitHeight + 14
+                radius: 17
+                color: Config.colors.container
+                z: 1
+
+                StateLayer {
+                    anchors.fill: parent
+                    disabled: Players.list.length <= 1
+
+                    function onClicked(): void {
+                        playerSelector.expanded = !playerSelector.expanded;
+                    }
+                }
+
+                RowLayout {
+                    id: currentPlayer
+
+                    anchors.centerIn: parent
+                    spacing: 7
+
+                    PlayerIcon {
+                        player: Players.active
+                    }
+
+                    CustomText {
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: playerSelector.implicitWidth - implicitHeight - parent.spacing - 20
+                        text: Players.active ? Players.getName(Players.active) : qsTr("No players")
+                        color: Players.active ? Config.colors.primary : Config.colors.tertiary
+                        elide: Text.ElideRight
+                    }
+                }
+
+                Elevation {
+                    anchors.fill: playerSelectorBg
+                    radius: playerSelectorBg.radius
+                    opacity: playerSelector.expanded ? 1 : 0
+                    level: 2
+
+                    Behavior on opacity {
+                        Anim {
+                            duration: Config.anim.durations.expressiveDefaultSpatial
+                        }
+                    }
+                }
+
+                CustomClippingRect {
+                    id: playerSelectorBg
+
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.bottom: parent.bottom
+                    implicitWidth: playerSelector.expanded ? playerList.implicitWidth : playerSelector.implicitWidth
+                    implicitHeight: playerSelector.expanded ? playerList.implicitHeight : playerSelector.implicitHeight
+
+                    color: Config.colors.containerAlt
+                    radius: 17
+                    opacity: playerSelector.expanded ? 1 : 0
+
+                    ColumnLayout {
+                        id: playerList
+
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.bottom: parent.bottom
+
+                        spacing: 0
+
+                        Repeater {
+                            model: [...Players.list].sort((a, b) => (a === Players.active) - (b === Players.active))
+
+                            Item {
+                                id: player
+
+                                required property MprisPlayer modelData
+
+                                Layout.fillWidth: true
+                                Layout.minimumWidth: playerSelector.implicitWidth
+                                implicitWidth: playerInner.implicitWidth + 20
+                                implicitHeight: playerInner.implicitHeight + 14
+
+                                StateLayer {
+                                    disabled: !playerSelector.expanded
+
+                                    function onClicked(): void {
+                                        playerSelector.expanded = false;
+                                        Players.manualActive = player.modelData;
+                                    }
+                                }
+
+                                RowLayout {
+                                    id: playerInner
+
+                                    anchors.centerIn: parent
+                                    spacing: 7
+
+                                    PlayerIcon {
+                                        player: player.modelData
+                                    }
+
+                                    CustomText {
+                                        text: Players.getName(player.modelData)
+                                        color: Config.colors.primary
+                                    }
+                                }
+                            }
+                        }
+                    }
+
+                    Behavior on opacity {
+                        Anim {
+                            duration: Config.anim.durations.expressiveDefaultSpatial
+                        }
+                    }
+
+                    Behavior on implicitWidth {
+                        Anim {
+                            duration: Config.anim.durations.expressiveDefaultSpatial
+                            easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+                        }
+                    }
+
+                    Behavior on implicitHeight {
+                        Anim {
+                            duration: Config.anim.durations.expressiveDefaultSpatial
+                            easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+                        }
+                    }
+                }
+            }
+
+            PlayerControl {
+                icon.text: "close"
+                icon.anchors.horizontalCenterOffset: 0
+                canUse: Players.active?.canQuit ?? false
+                size: playerSelector.height
+                fontSize: Config.font.size.larger
+                fill: 1
+                color: Config.colors.container
+                activeColor: Config.colors.error
+
+                function onClicked(): void {
+                    Players.active?.quit();
+                }
+            }
+        }
+    }
+
+    component PlayerIcon: Loader {
+        id: loader
+
+        required property MprisPlayer player
+        readonly property string icon: player ? Icons.getAppIcon(Players.getIdentity(player)) : ""
+
+        Layout.fillHeight: true
+        sourceComponent: !player || icon === "image://icon/" ? fallbackIcon : playerImage
+
+        Component {
+            id: playerImage
+
+            IconImage {
+                implicitWidth: height
+                source: loader.icon
+            }
+        }
+
+        Component {
+            id: fallbackIcon
+
+            MaterialIcon {
+                text: loader.player ? "animated_images" : "music_off"
+            }
+        }
+    }
+
+    component PlayerControl: CustomRect {
+        id: control
+
+        required property bool canUse
+        property alias icon: icon
+        property int fontSize: Config.font.size.largest
+        property int size: Math.max(icon.implicitWidth, icon.implicitHeight)
+        property real fill: 1
+        property color activeColor: Config.colors.media
+
+        function onClicked() {}
+
+        implicitWidth: size
+        implicitHeight: implicitWidth
+        radius: 1000
+
+        StateLayer {
+            anchors.fill: parent
+            disabled: !control.canUse
+
+            function onClicked(): void {
+                control.onClicked();
+            }
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: -font.pointSize * 0.02
+            anchors.verticalCenterOffset: font.pointSize * 0.02
+
+            animate: true
+            fill: control.fill
+            text: control.icon
+            color: control.canUse ? control.activeColor : Config.colors.inactive
+            font.pointSize: control.fontSize
+        }
+    }
+}

modules/dashboard/Mixer.qml

@@ -0,0 +1,208 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.Pipewire
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property int index
+    readonly property list<PwNode> nodes: Pipewire.nodes.values.filter(node => node.isSink && node.isStream)
+
+    width: Config.dashboard.mixerWidth
+    height: Config.dashboard.mixerHeight
+
+    PwObjectTracker {
+        objects: root.nodes
+    }
+
+    Binding {
+        target: root.uiState
+        when: root.uiState.dashboardTab === root.index
+        property: "osdVolumeReact"
+        value: false
+    }
+
+    ColumnLayout {
+        id: layout
+
+        anchors.fill: parent
+        spacing: 7
+
+        CustomText {
+            Layout.topMargin: 6
+            text: qsTr("Master Volume")
+            color: Config.colors.secondary
+        }
+
+        CustomMouseArea {
+            Layout.fillWidth: true
+            implicitHeight: Config.osd.sliderWidth
+
+            function onWheel(event: WheelEvent) {
+                if (event.angleDelta.y > 0)
+                    Audio.increaseVolume();
+                else if (event.angleDelta.y < 0)
+                    Audio.decreaseVolume();
+            }
+
+            acceptedButtons: Qt.RightButton
+            onClicked: Audio.sink.audio.muted = !Audio.muted
+
+            CustomFilledSlider {
+                anchors.fill: parent
+
+                orientation: Qt.Horizontal
+                color: Audio.muted ? Config.colors.error : Config.colors.volume
+                icon: Icons.getVolumeIcon(value, Audio.muted)
+                value: Audio.volume
+                onMoved: Audio.setVolume(value)
+
+                Behavior on color {
+                    CAnim {
+                        duration: Config.anim.durations.small
+                    }
+                }
+            }
+        }
+
+        CustomRect {
+            Layout.fillWidth: true
+            Layout.topMargin: 5
+            Layout.bottomMargin: 5
+            height: 1
+            color: Config.colors.inactive
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            CustomListView {
+                id: list
+
+                anchors.fill: parent
+                spacing: 12
+
+                model: ScriptModel {
+                    values: [...root.nodes]
+                    objectProp: "id"
+                }
+
+                CustomScrollBar.vertical: CustomScrollBar {
+                    flickable: list
+                }
+
+                delegate: RowLayout {
+                    id: entry
+
+                    required property PwNode modelData
+                    spacing: 6
+
+                    width: root.width
+
+                    IconImage {
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+                        visible: source != ""
+                        implicitSize: slider.height * 1.4
+                        source: {
+                            const icon = entry.modelData.properties["application.icon-name"];
+                            if (icon)
+                                return Icons.getAppIcon(icon, "image-missing");
+                            Icons.getAppIcon(entry.modelData.name, "image-missing")
+                        }
+                    }
+
+                    ColumnLayout {
+                        Layout.fillWidth: true
+                        spacing: 6
+
+                        CustomText {
+                            Layout.fillWidth: true
+                            elide: Text.ElideRight
+                            text: {
+                                // application.name -> description -> name
+                                const app = entry.modelData.properties["application.name"]
+                                      ?? (entry.modelData.description != "" ? entry.modelData.description : entry.modelData.name);
+                                const media = entry.modelData.properties["media.name"];
+                                return media != undefined ? `${app}  🞄  ${media}` : app;
+                            }
+                            color: Config.colors.secondary
+                        }
+
+                        CustomMouseArea {
+                            id: slider
+                            Layout.fillWidth: true
+                            implicitHeight: Config.osd.sliderWidth
+
+                            acceptedButtons: Qt.RightButton
+                            onClicked: entry.modelData.audio.muted = !entry.modelData.audio.muted
+
+                            CustomFilledSlider {
+
+                                anchors.fill: parent
+
+                                orientation: Qt.Horizontal
+                                color: entry.modelData.audio.muted ? Config.colors.error : Config.colors.volume
+                                icon: Icons.getVolumeIcon(value, entry.modelData.audio.muted)
+                                value: entry.modelData.audio.volume
+                                onMoved:  {
+                                    if (entry.modelData.ready)
+                                        entry.modelData.audio.volume = Math.max(0, Math.min(1, value));
+                                }
+
+
+                                Behavior on color {
+                                    CAnim {
+                                        duration: Config.anim.durations.small
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            CustomText {
+                anchors.centerIn: parent
+
+                opacity: list.count === 0 ? 1 : 0
+                visible: opacity > 0
+
+                text: qsTr("No audio sources")
+                color: Config.colors.tertiary
+                font.pointSize: Config.font.size.normal
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+        }
+
+        /* RowLayout { */
+        /*     id: deviceSelectorRowLayout */
+        /*     Layout.fillWidth: true */
+        /*     uniformCellSizes: true */
+
+        /*     AudioDeviceSelectorButton { */
+        /*         Layout.fillWidth: true */
+        /*         input: false */
+        /*         onClicked: root.showDeviceSelectorDialog(input) */
+        /*     } */
+        /*     AudioDeviceSelectorButton { */
+        /*         Layout.fillWidth: true */
+        /*         input: true */
+        /*         onClicked: root.showDeviceSelectorDialog(input) */
+        /*     } */
+        /* } */
+    }
+}

modules/dashboard/Performance.qml

@@ -0,0 +1,234 @@
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    id: root
+
+    function displayTemp(temp: real): string {
+        return `${Math.ceil(Config.services.useFahrenheit ? temp * 1.8 + 32 : temp)}°${Config.services.useFahrenheit ? "F" : "C"}`;
+    }
+
+    readonly property int padding: 20
+    spacing: 28
+
+    Component.onCompleted: SystemUsage.refCount++;
+    Component.onDestruction: SystemUsage.refCount--;
+
+    Resource {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.topMargin: root.padding
+        Layout.leftMargin: root.padding
+        Layout.rightMargin: root.padding
+
+        value1: SystemUsage.gpuPerc
+        label1: `${Math.round(SystemUsage.gpuPerc * 100)}%`
+        sublabel1: qsTr("GPU Usage")
+
+        value2: Math.min(1, SystemUsage.gpuTemp / 90)
+        label2: root.displayTemp(SystemUsage.gpuTemp)
+        sublabel2: qsTr("Temp")
+        warning2: value2 > 0.75
+    }
+
+    Resource {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.leftMargin: root.padding
+        Layout.rightMargin: root.padding
+
+        primary: true
+
+        value1: SystemUsage.cpuPerc
+        label1: `${Math.round(SystemUsage.cpuPerc * 100)}%`
+        sublabel1: qsTr("CPU Usage")
+
+        value2: Math.min(1, SystemUsage.cpuTemp / 90)
+        label2: root.displayTemp(SystemUsage.cpuTemp)
+        sublabel2: qsTr("Temp")
+        warning2: value2 > 0.75
+    }
+
+    Resource {
+        Layout.alignment: Qt.AlignHCenter
+        Layout.leftMargin: root.padding
+        Layout.rightMargin: root.padding
+        Layout.bottomMargin: root.padding
+
+        value1: SystemUsage.memPerc
+        label1: {
+            const fmt = SystemUsage.formatKib(SystemUsage.memUsed);
+            return `${+fmt.value.toFixed(1)}${fmt.unit}`;
+        }
+        sublabel1: qsTr("Memory")
+
+        value2: SystemUsage.storagePerc
+        label2: {
+            const fmt = SystemUsage.formatKib(SystemUsage.storageUsed);
+            return `${Math.floor(fmt.value)}${fmt.unit}`;
+        }
+        sublabel2: qsTr("Storage")
+    }
+
+    component Resource: Item {
+        id: res
+
+        required property real value1
+        required property string label1
+        required property string sublabel1
+        property bool warning1: value1 > 0.9
+        required property real value2
+        required property string label2
+        required property string sublabel2
+        property bool warning2: value2 > 0.9
+
+        property bool primary
+        readonly property real primaryMult: primary ? 1.2 : 1
+
+        readonly property real thickness: 10 * primaryMult
+
+        property color fg1: warning1 ? Config.colors.error : Color.mute(Config.colors.performance)
+        property color fg2: warning2 ? Config.colors.error : Color.mute(Config.colors.performance, 1.5, 1.6)
+        property color bg1: Qt.alpha(warning1 ? Config.colors.error : Config.colors.performance, 0.1)
+        property color bg2: Qt.alpha(warning2 ? Config.colors.error : Config.colors.performance, 0.05)
+
+        implicitWidth: implicitHeight
+        implicitHeight: 175 * primaryMult
+
+        onValue1Changed: canvas.requestPaint()
+        onValue2Changed: canvas.requestPaint()
+        onFg1Changed: canvas.requestPaint()
+        onFg2Changed: canvas.requestPaint()
+        onBg1Changed: canvas.requestPaint()
+        onBg2Changed: canvas.requestPaint()
+
+        Column {
+            anchors.centerIn: parent
+
+            readonly property color color: res.warning1 ? Config.colors.error :
+                res.value1 === 0 ? Config.colors.inactive : Config.colors.primary
+
+            CustomText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: res.label1
+                color: parent.color
+                font.pointSize: Config.font.size.largest * res.primaryMult
+            }
+
+            CustomText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: res.sublabel1
+                color: parent.color
+                font.pointSize: Config.font.size.smaller * res.primaryMult
+            }
+        }
+
+        Column {
+            anchors.horizontalCenter: parent.right
+            anchors.top: parent.verticalCenter
+            anchors.horizontalCenterOffset: -res.thickness / 2
+            anchors.topMargin: res.thickness / 2 + 7
+
+            readonly property color color: res.warning2 ? Config.colors.error :
+                res.value2 === 0 ? Config.colors.inactive : Config.colors.primary
+
+            CustomText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: res.label2
+                color: parent.color
+                font.pointSize: Config.font.size.smaller * res.primaryMult
+            }
+
+            CustomText {
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: res.sublabel2
+                color: parent.color
+                font.pointSize: Config.font.size.small * res.primaryMult
+            }
+        }
+
+        Canvas {
+            id: canvas
+
+            readonly property real centerX: width / 2
+            readonly property real centerY: height / 2
+
+            readonly property real arc1Start: degToRad(45)
+            readonly property real arc1End: degToRad(270)
+            readonly property real arc2Start: degToRad(360)
+            readonly property real arc2End: degToRad(280)
+
+            function degToRad(deg: int): real {
+                return deg * Math.PI / 180;
+            }
+
+            anchors.fill: parent
+
+            onPaint: {
+                const ctx = getContext("2d");
+                ctx.reset();
+
+                ctx.lineWidth = res.thickness;
+                ctx.lineCap = "round";
+
+                const radius = (Math.min(width, height) - ctx.lineWidth) / 2;
+                const cx = centerX;
+                const cy = centerY;
+                const a1s = arc1Start;
+                const a1e = arc1End;
+                const a2s = arc2Start;
+                const a2e = arc2End;
+
+                ctx.beginPath();
+                ctx.arc(cx, cy, radius, a1s, a1e, false);
+                ctx.strokeStyle = res.bg1;
+                ctx.stroke();
+
+                ctx.beginPath();
+                ctx.arc(cx, cy, radius, a1s, (a1e - a1s) * res.value1 + a1s, false);
+                ctx.strokeStyle = res.fg1;
+                ctx.stroke();
+
+                ctx.beginPath();
+                ctx.arc(cx, cy, radius, a2s, a2e, true);
+                ctx.strokeStyle = res.bg2;
+                ctx.stroke();
+
+                ctx.beginPath();
+                ctx.arc(cx, cy, radius, a2s, (a2e - a2s) * res.value2 + a2s, true);
+                ctx.strokeStyle = res.fg2;
+                ctx.stroke();
+            }
+        }
+
+        Behavior on value1 {
+            Anim {}
+        }
+
+        Behavior on value2 {
+            Anim {}
+        }
+
+        Behavior on fg1 {
+            CAnim {}
+        }
+
+        Behavior on fg2 {
+            CAnim {}
+        }
+
+        Behavior on bg1 {
+            CAnim {}
+        }
+
+        Behavior on bg2 {
+            CAnim {}
+        }
+    }
+}

modules/dashboard/Tabs.qml

@@ -0,0 +1,269 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property real nonAnimHeight
+    required property PersistentProperties uiState
+    readonly property int count: repeater.model.count
+    readonly property color color: indicator.currentItem.color
+
+    implicitWidth: childrenRect.width
+
+    ColumnLayout {
+        id: bar
+
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        spacing: 16
+
+        width: 100
+
+        Repeater {
+            id: repeater
+
+            model: ListModel {}
+
+            Component.onCompleted: {
+                model.append({
+                    text: qsTr("Dashboard"),
+                    iconName: "dashboard",
+                    color: Config.colors.dashboard
+                });
+                model.append({
+                    text: qsTr("Mixer"),
+                    iconName: "tune",
+                    color: Config.colors.mixer
+                });
+                model.append({
+                    text: qsTr("Media"),
+                    iconName: "queue_music",
+                    color: Config.colors.media
+                });
+                model.append({
+                    text: qsTr("Performance"),
+                    iconName: "speed",
+                    color: Config.colors.performance
+                });
+                model.append({
+                    text: qsTr("Workspaces"),
+                    iconName: "workspaces",
+                    color: Config.colors.workspaces
+                });
+            }
+
+            delegate: Tab {}
+        }
+    }
+
+    Item {
+        id: indicator
+
+        anchors.left: bar.right
+        anchors.leftMargin: 8
+
+        property int currentIndex: root.uiState.dashboardTab
+        property Item currentItem: {
+            repeater.count;
+            repeater.itemAt(currentIndex)
+        }
+
+        implicitWidth: 2
+        implicitHeight: currentItem.implicitHeight
+
+        y: currentItem ? currentItem.y + bar.y + (currentItem.height - implicitHeight) / 2 : 0
+
+        clip: true
+
+        CustomRect {
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            implicitWidth: parent.implicitWidth * 2
+
+            color: indicator.currentItem?.color ?? "transparent"
+            radius: 1000
+        }
+
+        Behavior on currentIndex {
+            SequentialAnimation {
+                Anim {
+                    target: indicator
+                    property: "implicitHeight"
+                    to: 0
+                    duration: Config.anim.durations.small / 2
+                }
+                PropertyAction {}
+                Anim {
+                    target: indicator
+                    property: "implicitHeight"
+                    from: 0
+                    to: bar.children[root.uiState.dashboardTab].height
+                    duration: Config.anim.durations.small / 2
+                }
+            }
+        }
+    }
+
+    CustomRect {
+        id: separator
+
+        anchors.left: indicator.right
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+
+        implicitWidth: 1
+        color: Config.colors.inactive
+    }
+
+    component Tab: CustomMouseArea {
+        id: tab
+
+        required property int index
+        required property string text
+        required property string iconName
+        required property color color
+        readonly property bool isCurrentItem: root.uiState.dashboardTab === index
+
+        implicitHeight: icon.height + label.height + 8
+        Layout.alignment: Qt.AlignHCenter
+        Layout.fillWidth: true
+
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+
+        onPressed: event => {
+            root.uiState.dashboardTab = tab.index;
+
+            const stateY = stateWrapper.y;
+            rippleAnim.x = event.x;
+            rippleAnim.y = event.y - stateY;
+
+            const dist = (ox, oy) => ox * ox + oy * oy;
+            rippleAnim.radius = Math.sqrt(Math.max(dist(event.x, event.y + stateY),
+                                                   dist(event.x, stateWrapper.height - event.y),
+                                                   dist(width - event.x, event.y + stateY),
+                                                   dist(width - event.x, stateWrapper.height - event.y)));
+
+            rippleAnim.restart();
+        }
+
+        function onWheel(event: WheelEvent): void {
+            if (event.angleDelta.y < 0)
+                root.uiState.dashboardTab = Math.min(root.uiState.dashboardTab + 1, root.count - 1);
+            else if (event.angleDelta.y > 0)
+                root.uiState.dashboardTab = Math.max(root.uiState.dashboardTab - 1, 0);
+        }
+
+        SequentialAnimation {
+            id: rippleAnim
+
+            property real x
+            property real y
+            property real radius
+
+            PropertyAction {
+                target: ripple
+                property: "x"
+                value: rippleAnim.x
+            }
+            PropertyAction {
+                target: ripple
+                property: "y"
+                value: rippleAnim.y
+            }
+            PropertyAction {
+                target: ripple
+                property: "opacity"
+                value: 0.08
+            }
+            Anim {
+                target: ripple
+                properties: "implicitWidth,implicitHeight"
+                from: 0
+                to: rippleAnim.radius * 2
+                easing.bezierCurve: Config.anim.curves.standardDecel
+            }
+            Anim {
+                target: ripple
+                property: "opacity"
+                to: 0
+            }
+        }
+
+        ClippingRectangle {
+            id: stateWrapper
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            implicitHeight: parent.height
+
+            color: "transparent"
+            radius: 12
+
+            CustomRect {
+                id: stateLayer
+
+                anchors.fill: parent
+
+                color: tab.isCurrentItem ? tab.color : Config.colors.primary
+                opacity: tab.pressed ? 0.1 : tab.containsMouse ? 0.08 : 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            CustomRect {
+                id: ripple
+
+                radius: 1000
+                color: tab.isCurrentItem ? tab.color : Config.colors.primary
+                opacity: 0
+
+                transform: Translate {
+                    x: -ripple.width / 2
+                    y: -ripple.height / 2
+                }
+            }
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: label.top
+
+            text: tab.iconName
+            color: tab.isCurrentItem ? tab.color : Config.colors.primary
+            fill: tab.isCurrentItem ? 1 : 0
+            font.pointSize: Config.font.size.large
+
+            Behavior on fill {
+                Anim {
+                    duration: Config.anim.durations.small
+                }
+            }
+        }
+
+        CustomText {
+            id: label
+
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 5
+
+            text: tab.text
+            color: tab.isCurrentItem ? tab.color : Config.colors.primary
+        }
+    }
+}

modules/dashboard/Workspaces.qml

@@ -0,0 +1,496 @@
+import qs.modules.bar.popouts as BarPopouts
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property BarPopouts.Wrapper popouts
+
+    width: Config.dashboard.workspaceWidth + 32
+    height: 750
+
+    property HyprlandWorkspace dragSourceWorkspace: null
+    property HyprlandWorkspace dragTargetWorkspace: null
+
+    // Controls scrolling at edge of panel while dragging
+    property real dragScrollVelocity: 0
+
+    CustomListView {
+        id: list
+        anchors.fill: parent
+        anchors.margins: 12
+        anchors.rightMargin: 0
+        spacing: 12
+
+        clip: true
+
+        CustomScrollBar.vertical: CustomScrollBar {
+            flickable: list
+        }
+
+        model: Hypr.monitors
+
+        delegate: Item {
+            id: monitor
+
+            required property int index
+            required property HyprlandMonitor modelData
+            readonly property ListModel workspaces: States.screens.get(modelData).workspaces
+
+            width: list.width - 20
+            height: childrenRect.height
+
+            Item {
+                id: monitorHeader
+                anchors.left: parent.left
+                anchors.right: parent.right
+                height: monIcon.height
+
+                MaterialIcon {
+                    id: monIcon
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
+                    text: "desktop_windows"
+                    color: Config.colors.tertiary
+                }
+
+                CustomText {
+                    id: monText
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: monIcon.right
+                    anchors.leftMargin: 4
+                    text: monitor.modelData.name
+                    color: Config.colors.tertiary
+                    font.family: Config.font.family.mono
+                    font.pointSize: Config.font.size.smaller
+                }
+
+                CustomRect {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: monText.right
+                    anchors.right: parent.right
+                    anchors.leftMargin: 8
+                    anchors.rightMargin: 18
+                    height: 1
+                    color: Config.colors.inactive
+                }
+            }
+
+            ListView {
+                id: workspaceList
+
+                anchors.top: monitorHeader.bottom
+                anchors.topMargin: 8
+                width: list.width - 20
+                spacing: 22
+
+                height: contentHeight
+                acceptedButtons: Qt.NoButton
+                boundsBehavior: Flickable.StopAtBounds
+
+                model: monitor.workspaces
+
+                delegate: Column {
+                    id: entry
+
+                    required property int index
+                    required property HyprlandWorkspace workspace
+
+                    width: list.width - 20
+
+                    spacing: 5
+
+                    property bool hoveredWhileDragging: false
+                    z: root.dragSourceWorkspace === workspace ? 10 : 0
+
+                    Item {
+                        id: header
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        implicitHeight: labelState.height
+
+                        property color nonAnimColor: entry.hoveredWhileDragging ? Config.colors.workspaceMove :
+                            entry.workspace?.active ? Config.colors.workspaces : Config.colors.primary
+                        property color color: nonAnimColor
+
+                        Behavior on color {
+                            CAnim {}
+                        }
+
+                        StateLayer {
+                            id: labelState
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.left: parent.left
+                            implicitWidth: label.width + 20
+                            implicitHeight: label.height + 8
+                            color: Config.colors.secondary
+
+                            function onClicked(): void {
+                                Hypr.dispatch(`workspace ${entry.workspace.id}`)
+                            }
+
+                            Row {
+                                id: label
+
+                                anchors.centerIn: parent
+                                spacing: 7
+
+                                MaterialIcon {
+                                    text: Icons.getWorkspaceIcon(entry.workspace)
+                                    color: header.color
+                                    font.pointSize: Config.font.size.larger
+                                    animate: true
+                                    animateDuration: Config.anim.durations.small
+                                }
+
+                                CustomText {
+                                    anchors.top: parent.top
+                                    anchors.topMargin: 1
+                                    text: qsTr("Workspace %1").arg(index + 1)
+                                    font.family: Config.font.family.mono
+                                    font.pointSize: Config.font.size.normal
+                                    color: header.color
+                                }
+                            }
+                        }
+
+                        StateLayer {
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: downArrow.left
+                            anchors.rightMargin: 2
+
+                            implicitWidth: implicitHeight
+                            implicitHeight: upIcon.height + 6
+
+                            disabled: entry.index === 0 && monitor.index === 0
+                            function onClicked(): void {
+                                if (entry.index !== 0) {
+                                    monitor.workspaces.move(entry.index, entry.index - 1, 1)
+                                } else {
+                                    const workspace = entry.workspace;
+                                    monitor.workspaces.remove(entry.index, 1);
+                                    const otherWorkspaces = list.itemAtIndex(monitor.index - 1).workspaces;
+                                    otherWorkspaces.insert(0, {"workspace": workspace});
+                                }
+                            }
+
+                            MaterialIcon {
+                                id: upIcon
+
+                                anchors.centerIn: parent
+
+                                text: "keyboard_arrow_up"
+                                color: parent.disabled ? Config.colors.inactive : header.nonAnimColor
+                                font.pointSize: Config.font.size.larger
+
+                                Behavior on color {
+                                    CAnim {}
+                                }
+                            }
+                        }
+
+                        StateLayer {
+                            id: downArrow
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: parent.right
+
+                            implicitWidth: implicitHeight
+                            implicitHeight: downIcon.height + 6
+
+                            disabled: entry.index === monitor.workspaces.count - 1 && monitor.index === list.count - 1
+                            function onClicked(): void {
+                                if (entry.index !== monitor.workspaces.count - 1) {
+                                    root.uiState.workspaces.move(entry.index, entry.index + 1, 1)
+                                } else {
+                                    const workspace = entry.workspace;
+                                    monitor.workspaces.remove(entry.index, 1);
+                                    const otherWorkspaces = list.itemAtIndex(monitor.index + 1).workspaces;
+                                    otherWorkspaces.append({"workspace": workspace});
+                                }
+                            }
+
+                            MaterialIcon {
+                                id: downIcon
+                                anchors.centerIn: parent
+
+                                text: "keyboard_arrow_down"
+                                color: parent.disabled ? Config.colors.inactive : header.nonAnimColor
+                                font.pointSize: Config.font.size.larger
+
+                                Behavior on color {
+                                    CAnim {}
+                                }
+                            }
+                        }
+                    }
+
+                    CustomRect {
+                        id: preview
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+
+                        readonly property HyprlandMonitor mon: entry.workspace.monitor
+
+                        // Exclude UI border and apply monitor scale
+                        readonly property real monX: Config.border.thickness
+                        readonly property real monY: Config.bar.height
+                        readonly property real monWidth: (mon.width / mon.scale) - 2 * Config.border.thickness
+                        readonly property real monHeight: (mon.height / mon.scale) - Config.bar.height - Config.border.thickness
+
+                        readonly property real aspectRatio: monHeight / monWidth
+                        readonly property real sizeRatio: Config.dashboard.workspaceWidth / monWidth
+
+                        width: Config.dashboard.workspaceWidth
+                        height: aspectRatio * width
+
+                        radius: 7
+                        color: entry.hoveredWhileDragging ? Config.colors.workspaceMove :
+                            entry.workspace?.active ? Color.mute(Config.colors.workspaces, 1.5, 1.1) : Config.colors.container
+
+                        Behavior on color {
+                            CAnim {}
+                        }
+
+                        DropArea {
+                            anchors.fill: parent
+                            onEntered: {
+                                root.dragTargetWorkspace = entry.workspace;
+                                entry.hoveredWhileDragging = true;
+                            }
+                            onExited: {
+                                if (root.draggingTargetWorkspace === entry.workspace)
+                                    root.draggingTargetWorkspace = null;
+                                entry.hoveredWhileDragging = false;
+                            }
+                        }
+
+                        Repeater {
+                            anchors.fill: parent
+
+                            model: entry.workspace?.toplevels
+
+                            delegate: Item {
+                                id: window
+
+                                required property HyprlandToplevel modelData
+
+                                property var ipc: modelData.lastIpcObject
+
+                                opacity: ipc && ipc.at && !ipc.hidden ? 1 : 0
+
+                                property real nonAnimX: ipc?.at ? (ipc.at[0] - preview.monX) * preview.sizeRatio : 0
+                                property real nonAnimY: ipc?.at ? (ipc.at[1] - preview.monY) * preview.sizeRatio : 0
+                                property real nonAnimWidth: ipc?.size ? ipc.size[0] * preview.sizeRatio : 0
+                                property real nonAnimHeight: ipc?.size ? ipc.size[1] * preview.sizeRatio : 0
+
+                                x: nonAnimX
+                                y: nonAnimY
+                                width: nonAnimWidth
+                                height: nonAnimHeight
+
+                                z: nonAnimX !== x || nonAnimY !== y ? 10 : 0
+
+                                Behavior on x {
+                                    enabled: window.x !== 0
+                                    Anim {}
+                                }
+                                Behavior on y {
+                                    enabled: window.y !== 0
+                                    Anim {}
+                                }
+                                Behavior on width {
+                                    enabled: window.width !== 0
+                                    Anim {}
+                                }
+                                Behavior on height {
+                                    enabled: window.height !== 0
+                                    Anim {}
+                                }
+                                Behavior on opacity { Anim {} }
+
+                                ScreencopyView {
+                                    id: view
+                                    visible: false
+                                    anchors.left: parent.left
+                                    anchors.top: parent.top
+                                    layer.enabled: true
+
+                                    // NOTE: Simulates cropping fill (which ScreencopyView does not natively support)
+                                    readonly property real aspectRatio: sourceSize.height / sourceSize.width
+                                    width: Math.max(window.nonAnimWidth, window.nonAnimHeight / aspectRatio)
+                                    height: Math.max(window.nonAnimHeight, window.nonAnimWidth * aspectRatio)
+
+                                    captureSource: window.modelData.wayland
+                                    live: true
+
+                                    CustomRect {
+                                        anchors.fill: parent
+                                        color: mouse.drag.active ?
+                                            Qt.tint(Qt.alpha(Config.colors.overlay, 0.7), Qt.alpha(Config.colors.workspaceMove, 0.2)) :
+                                            mouse.pressed ?
+                                            Qt.tint(Qt.alpha(Config.colors.overlay, 0.7), Qt.alpha(Config.colors.workspaces, 0.2)) :
+                                            mouse.containsMouse ?
+                                            Qt.tint(Qt.alpha(Config.colors.overlay, 0.5), Qt.alpha(Config.colors.workspaces, 0.1)) :
+                                            Qt.alpha(Config.colors.overlay, 0.5)
+
+                                        Behavior on color {
+                                            CAnim { duration: Config.anim.durations.small }
+                                        }
+                                    }
+                                }
+
+                                Item {
+                                    id: mask
+                                    visible: false
+                                    anchors.fill: view
+                                    layer.enabled: true
+                                    Rectangle {
+                                        width: window.width
+                                        height: window.height
+                                        radius: 8
+                                    }
+                                }
+
+                                MultiEffect {
+                                    anchors.fill: view
+                                    source: view
+                                    maskEnabled: true
+                                    maskSource: mask
+                                }
+
+                                IconImage {
+                                    id: icon
+
+                                    anchors.centerIn: parent
+                                    implicitSize: Math.min(48, window.width * 0.5, window.height * 0.5)
+                                    source: Icons.getAppIcon(window.ipc?.class ?? "", "")
+                                }
+
+                                // Interactions
+
+                                Drag.active: mouse.drag.active
+                                Drag.source: window
+                                Drag.hotSpot.x: nonAnimWidth / 2
+                                Drag.hotSpot.y: nonAnimHeight / 2
+
+                                MouseArea {
+                                    id: mouse
+
+                                    anchors.fill: parent
+
+                                    hoverEnabled: true
+                                    acceptedButtons: Qt.AllButtons
+
+                                    drag.target: parent
+                                    onPressed: event => {
+                                        root.dragSourceWorkspace = entry.workspace;
+                                        window.Drag.hotSpot.x = event.x;
+                                        window.Drag.hotSpot.y = event.y;
+                                    }
+                                    onReleased: event => {
+                                        const targetWorkspace = root.dragTargetWorkspace;
+                                        root.dragSourceWorkspace = null;
+                                        root.dragScrollVelocity = 0;
+                                        if (targetWorkspace !== null && targetWorkspace !== entry.workspace) {
+                                            Hyprland.dispatch(`movetoworkspacesilent ${targetWorkspace.id}, address:0x${window.modelData.address}`)
+                                        } else {
+                                            window.x = Qt.binding(() => window.nonAnimX);
+                                            window.y = Qt.binding(() => window.nonAnimY);
+                                        }
+                                    }
+
+                                    onClicked: event => {
+                                        if (event.button === Qt.LeftButton) {
+                                            root.uiState.dashboard = false;
+                                            Hypr.dispatch(`focuswindow address:0x${window.modelData.address}`);
+                                        } else if (event.button === Qt.MiddleButton) {
+                                            Hypr.dispatch(`closewindow address:0x${window.modelData.address}`);
+                                        } else if (event.button === Qt.RightButton) {
+                                            root.uiState.dashboard = false;
+                                            popouts.currentName = "activewindow";
+                                            popouts.currentCenter = QsWindow.window.width / 2;
+                                            popouts.window = window.modelData;
+                                            popouts.hasCurrent = true;
+                                        }
+                                    }
+
+                                    onPositionChanged: event => {
+                                        if (!drag.active) return;
+                                        const y = root.mapFromItem(this, 0, event.y).y;
+                                        if (y < 100) {
+                                            root.dragScrollVelocity = (y - 100) / 25;
+                                        } else if (y > root.height - 100) {
+                                            root.dragScrollVelocity = (y - root.height + 100) / 25;
+                                        } else {
+                                            root.dragScrollVelocity = 0;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+
+                add: Transition {
+                    Anim {
+                        property: "opacity"
+                        from: 0
+                        to: 1
+                    }
+                }
+
+                remove: Transition {
+                    Anim {
+                        property: "opacity"
+                        from: 1
+                        to: 0
+                    }
+                }
+
+                move: Transition {
+                    Anim {
+                        property: "y"
+                    }
+                    Anim {
+                        properties: "opacity"
+                        to: 1
+                    }
+                }
+
+                displaced: Transition {
+                    Anim {
+                        property: "y"
+                    }
+                    Anim {
+                        properties: "opacity"
+                        to: 1
+                    }
+                }
+            }
+        }
+    }
+
+    Timer {
+        running: root.dragScrollVelocity !== 0
+        repeat: true
+        interval: 10
+
+        onTriggered: {
+            list.contentY += root.dragScrollVelocity;
+            list.returnToBounds();
+        }
+    }
+}

modules/dashboard/Wrapper.qml

@@ -0,0 +1,78 @@
+pragma ComponentBehavior: Bound
+
+import qs.modules.bar.popouts as BarPopouts
+import qs.config
+import qs.custom
+import qs.util
+import Quickshell
+import Quickshell.Hyprland
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property BarPopouts.Wrapper popouts
+
+    visible: width > 0
+    implicitWidth: 0
+    implicitHeight: content.implicitHeight
+
+    states: State {
+        name: "visible"
+        when: root.uiState.dashboard
+
+        PropertyChanges {
+            root.implicitWidth: content.implicitWidth
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "visible"
+
+            Anim {
+                target: root
+                property: "implicitWidth"
+                duration: Config.anim.durations.expressiveDefaultSpatial
+                easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+            }
+        },
+        Transition {
+            from: "visible"
+            to: ""
+
+            Anim {
+                target: root
+                property: "implicitWidth"
+                easing.bezierCurve: Config.anim.curves.emphasized
+            }
+        }
+    ]
+
+    Background {
+        id: background
+        visible: false
+        wrapper: root
+    }
+
+    GlowEffect {
+        source: background
+        glowColor: content.active ? content.item.color : "transparent"
+    }
+
+    Loader {
+        id: content
+
+        Component.onCompleted: active = Qt.binding(() => root.uiState.dashboard || root.visible)
+
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        sourceComponent: Content {
+            uiState: root.uiState
+            popouts: root.popouts
+        }
+    }
+}

modules/dashboard/dash/DateTime.qml

@@ -0,0 +1,29 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.config
+import qs.custom
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+    anchors.centerIn: parent
+    anchors.verticalCenterOffset: -2
+    spacing: -6
+
+    CustomText {
+        Layout.alignment: Qt.AlignHCenter
+        text: Time.format("hh:mm:ss")
+        color: Config.colors.secondary
+        font.family: Config.font.family.mono
+        font.pointSize: Config.font.size.largest
+        font.weight: 600
+    }
+
+    CustomText {
+        Layout.alignment: Qt.AlignHCenter
+        text: Time.format("dddd, yyyy-MM-dd")
+        color: Config.colors.tertiary
+        font.pointSize: Config.font.size.normal
+    }
+}

modules/dashboard/dash/Media.qml

@@ -0,0 +1,243 @@
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import QtQuick
+import QtQuick.Shapes
+
+Item {
+    id: root
+
+    anchors.fill: parent
+
+    property real playerProgress: {
+        const active = Players.active;
+        return active?.length ? active.position / active.length : 0;
+    }
+
+    Behavior on playerProgress {
+        Anim {
+            duration: Config.anim.durations.large
+        }
+    }
+
+    Timer {
+        running: Players.active?.isPlaying ?? false
+        interval: 400
+        triggeredOnStart: true
+        repeat: true
+        onTriggered: Players.active?.positionChanged()
+    }
+
+    Shape {
+        id: progress
+
+        preferredRendererType: Shape.CurveRenderer
+
+        readonly property int thickness: 8
+        readonly property int angle: 300
+
+        ShapePath {
+            id: path
+
+            fillColor: "transparent"
+            strokeColor: Qt.alpha(Config.colors.media, 0.2)
+            strokeWidth: progress.thickness
+            capStyle: ShapePath.RoundCap
+
+            PathAngleArc {
+                centerX: cover.x + cover.width / 2
+                centerY: cover.y + cover.height / 2
+                radiusX: (cover.width + progress.thickness) / 2 + 7
+                radiusY: (cover.height + progress.thickness) / 2 + 7
+                startAngle: -90 - progress.angle / 2
+                sweepAngle: progress.angle
+            }
+
+            Behavior on strokeColor {
+                CAnim {}
+            }
+        }
+
+        ShapePath {
+            fillColor: "transparent"
+            strokeColor: Config.colors.media
+            strokeWidth: progress.thickness
+            capStyle: ShapePath.RoundCap
+
+            PathAngleArc {
+                centerX: cover.x + cover.width / 2
+                centerY: cover.y + cover.height / 2
+                radiusX: (cover.width + progress.thickness) / 2 + 7
+                radiusY: (cover.height + progress.thickness) / 2 + 7
+                startAngle: -90 - progress.angle / 2
+                // NOTE: Cap progress angle to account for bad MPRIS players
+                sweepAngle: progress.angle * Math.min(root.playerProgress, 1)
+            }
+
+            Behavior on strokeColor {
+                CAnim {}
+            }
+        }
+    }
+
+    CustomClippingRect {
+        id: cover
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 18 + progress.thickness
+
+        implicitHeight: width
+        color: Config.colors.inactive
+        radius: Infinity
+
+        MaterialIcon {
+            anchors.centerIn: parent
+
+            grade: 200
+            text: "art_track"
+            color: Config.colors.tertiary
+            font.pointSize: (parent.width * 0.4) || 1
+        }
+
+        Image {
+            id: image
+
+            anchors.fill: parent
+
+            source: Players.active?.trackArtUrl ?? ""
+            asynchronous: true
+            fillMode: Image.PreserveAspectCrop
+            sourceSize.width: width
+            sourceSize.height: height
+        }
+    }
+
+    CustomText {
+        id: title
+
+        anchors.top: cover.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.topMargin: album.text === "" ? 24 : 18
+        anchors.leftMargin: 15
+        anchors.rightMargin: 15
+
+        animate: true
+        horizontalAlignment: Text.AlignHCenter
+        text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
+        color: Config.colors.secondary
+        font.pointSize: Config.font.size.normal
+
+        elide: Text.ElideRight
+    }
+
+    CustomText {
+        id: artist
+
+        anchors.top: title.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: 15
+        anchors.rightMargin: 15
+
+        animate: true
+        horizontalAlignment: Text.AlignHCenter
+        text: (Players.active?.trackArtist ?? qsTr("No media")) || qsTr("Unknown artist")
+        opacity: Players.active ? 1 : 0
+        color: Config.colors.primary
+
+        elide: Text.ElideRight
+    }
+
+    CustomText {
+        id: album
+
+        anchors.top: artist.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.leftMargin: 15
+        anchors.rightMargin: 15
+
+        animate: true
+        horizontalAlignment: Text.AlignHCenter
+        text: Players.active?.trackAlbum ?? ""
+        opacity: Players.active ? 1 : 0
+        color: Config.colors.tertiary
+        font.pointSize: Config.font.size.small
+        elide: Text.ElideRight
+    }
+
+    Row {
+        id: controls
+
+        anchors.top: album.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: album.text === "" ? -4 : 2
+
+        spacing: 7
+
+        Control {
+            icon: "skip_previous"
+            canUse: Players.active?.canGoPrevious ?? false
+
+            function onClicked(): void {
+                Players.active?.previous();
+            }
+        }
+
+        Control {
+            icon: Players.active?.isPlaying ? "pause" : "play_arrow"
+            canUse: Players.active?.canTogglePlaying ?? false
+
+            function onClicked(): void {
+                Players.active?.togglePlaying();
+            }
+        }
+
+        Control {
+            icon: "skip_next"
+            canUse: Players.active?.canGoNext ?? false
+
+            function onClicked(): void {
+                Players.active?.next();
+            }
+        }
+    }
+
+    component Control: CustomRect {
+        id: control
+
+        required property string icon
+        required property bool canUse
+        function onClicked(): void {
+        }
+
+        implicitWidth: Math.max(icon.implicitHeight, icon.implicitHeight) + 12
+        implicitHeight: implicitWidth
+
+        StateLayer {
+            anchors.fill: parent
+            disabled: !control.canUse
+            radius: 1000
+
+            function onClicked(): void {
+                control.onClicked();
+            }
+        }
+
+        MaterialIcon {
+            id: icon
+
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: font.pointSize * 0.05
+
+            animate: true
+            text: control.icon
+            color: control.canUse ? Config.colors.media : Config.colors.inactive
+            font.pointSize: Config.font.size.large
+        }
+    }
+}

modules/dashboard/dash/Notifs.qml

@@ -0,0 +1,264 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import Quickshell.Services.Notifications
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.notifications as N
+
+ColumnLayout {
+    id: root
+
+    anchors.fill: parent
+
+    spacing: 7
+
+    readonly property int notifCount:
+        (Notifs.list && Notifs.list.length !== undefined) ? Notifs.list.length :
+            ((Notifs.list && Notifs.list.count !== undefined) ? Notifs.list.count : 0)
+
+    function notifAt(i) {
+        if (!Notifs.list)
+            return undefined;
+        if (typeof Notifs.list.get === 'function')
+            return Notifs.list.get(i);
+        return Notifs.list[i];
+    }
+
+    function scrollToTop(): void {
+        if (notifScroll && notifScroll.contentItem && notifScroll.contentItem.contentY !== undefined) {
+            notifScroll.contentItem.contentY = 0;
+        }
+    }
+
+    RowLayout {
+        Layout.alignment: Qt.AlignTop
+        Layout.margins: 10
+        Layout.fillWidth: true
+        spacing: 7
+
+        MaterialIcon {
+            Layout.alignment: Qt.AlignVCenter
+            id: icon
+            text: {
+                if (Notifs.dnd)
+                    return "notifications_off";
+                if (notifCount > 0)
+                    return "notifications_active";
+                return "notifications";
+            }
+            fill: {
+                if (Notifs.dnd)
+                    return 0;
+                if (notifCount > 0)
+                    return 1;
+                return 0;
+            }
+            color: Notifs.dnd ? Config.colors.error : Config.colors.notification
+            font.pointSize: Config.font.size.larger
+            animate: true
+
+            Behavior on color {
+                SequentialAnimation {
+                    PauseAnimation {
+                        duration: icon.animateDuration / 2
+                    }
+                    PropertyAction {}
+                }
+            }
+        }
+
+        CustomText {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+            text: notifCount > 0 ? qsTr("%1 notifications").arg(notifCount) : qsTr("No notifications")
+            font.weight: 600
+            font.pointSize: Config.font.size.normal
+            animate: true
+        }
+
+        CustomText {
+            Layout.alignment: Qt.AlignVCenter
+            text: qsTr("Do Not Disturb")
+        }
+
+        CustomSwitch {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.leftMargin: 5
+            Layout.rightMargin: 5
+            bg: Config.colors.containerAlt
+            accent: Color.mute(Config.colors.notification)
+            checked: Notifs.dnd
+            onToggled: Notifs.toggleDnd()
+        }
+    }
+
+    Item {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        Layout.leftMargin: 10
+        Layout.rightMargin: 10
+        Layout.bottomMargin: 10
+
+        CustomListView {
+            id: notifScroll
+            anchors.fill: parent
+            anchors.margins: 10
+            anchors.rightMargin: 5
+            spacing: 12
+            clip: true
+
+            CustomScrollBar.vertical: CustomScrollBar {
+                flickable: notifScroll
+            }
+
+            model: ScriptModel {
+                values: [...Notifs.list].reverse()
+            }
+
+            delegate: Item {
+                id: wrapper
+                required property int index
+                required property var modelData
+                readonly property alias nonAnimHeight: notif.nonAnimHeight
+
+                width: 405
+                height: notif.implicitHeight
+
+                ListView.onRemove: removeAnim.start()
+
+                SequentialAnimation {
+                    id: removeAnim
+
+                    PropertyAction {
+                        target: wrapper
+                        property: "ListView.delayRemove"
+                        value: true
+                    }
+                    PropertyAction {
+                        target: wrapper
+                        property: "enabled"
+                        value: false
+                    }
+                    PropertyAction {
+                        target: wrapper
+                        property: "implicitHeight"
+                        value: 0
+                    }
+                    PropertyAction {
+                        target: wrapper
+                        property: "z"
+                        value: 1
+                    }
+                    Anim {
+                        target: notif
+                        property: "x"
+                        to: (notif.x >= 0 ? Config.notifs.width : -Config.notifs.width) * 2
+                        easing.bezierCurve: Config.anim.curves.emphasized
+                    }
+                    PropertyAction {
+                        target: wrapper
+                        property: "ListView.delayRemove"
+                        value: false
+                    }
+                }
+
+                N.Notification {
+                    id: notif
+                    width: parent.width
+                    notif: wrapper.modelData
+                    color: wrapper.modelData.urgency === NotificationUrgency.Critical ? Config.colors.errorBg : Config.colors.containerAlt
+                    inPopup: false
+                }
+            }
+
+            add: Transition {
+                Anim {
+                    property: "x"
+                    from: Config.notifs.width
+                    to: 0
+                    easing.bezierCurve: Config.anim.curves.emphasizedDecel
+                }
+            }
+
+            move: Transition {
+                NotifAnim {
+                    property: "y"
+                }
+            }
+
+            displaced: Transition {
+                NotifAnim {
+                    property: "y"
+                }
+            }
+        }
+    }
+
+    Item {
+        Layout.alignment: Qt.AlignBottom
+        Layout.fillWidth: true
+        height: 0
+
+        CustomRect {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: bottomMargin
+
+            property real bottomMargin: notifCount > 0 ? 12 : -4
+            opacity: notifCount > 0 ? 1 : 0
+            visible: opacity > 0
+            implicitWidth: clearBtn.implicitWidth + 32
+            implicitHeight: clearBtn.implicitHeight + 20
+
+            radius: 25
+            color: Config.colors.inactive
+
+            Behavior on opacity {
+                Anim {}
+            }
+
+            Behavior on bottomMargin {
+                Anim {}
+            }
+
+            StateLayer {
+                anchors.fill: parent
+
+                function onClicked(): void {
+                    for (let i = root.notifCount - 1; i >= 0; i--) {
+                        const n = root.notifAt(i);
+                        n?.notification?.dismiss();
+                    }
+                }
+            }
+
+            RowLayout {
+                id: clearBtn
+
+                anchors.centerIn: parent
+                spacing: 7
+
+                MaterialIcon {
+                    id: clearIcon
+                    text: "clear_all"
+                    color: Config.colors.secondary
+                }
+
+                CustomText {
+                    text: qsTr("Clear all")
+                    color: Config.colors.secondary
+                }
+            }
+        }
+    }
+
+    component NotifAnim: Anim {
+        duration: Config.anim.durations.expressiveDefaultSpatial
+        easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+    }
+}

modules/dashboard/dash/User.qml

@@ -0,0 +1,73 @@
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+
+Column {
+    id: root
+
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.left: parent.left
+    anchors.leftMargin: 24
+
+    Item {
+        id: userLine
+
+        implicitWidth: childrenRect.width
+        implicitHeight: childrenRect.height
+
+        MaterialIcon {
+            id: userIcon
+
+            anchors.left: parent.left
+
+            text: "account_circle"
+            fill: 1
+            color: Config.colors.primary
+            font.pointSize: Config.font.size.larger
+        }
+
+        CustomText {
+            id: userText
+
+            anchors.verticalCenter: userIcon.verticalCenter
+            anchors.left: userIcon.right
+            anchors.leftMargin: 7
+
+            text: qsTr("User: %1").arg(User.user)
+            color: Config.colors.secondary
+        }
+    }
+
+    Item {
+        id: uptimeLine
+
+        implicitWidth: childrenRect.width
+        implicitHeight: childrenRect.height
+
+        MaterialIcon {
+            id: uptimeIcon
+
+            anchors.left: parent.left
+
+            text: "timer"
+            fill: 1
+            color: Config.colors.primary
+            font.pointSize: Config.font.size.larger
+        }
+
+        CustomText {
+            id: uptimeText
+
+            anchors.verticalCenter: uptimeIcon.verticalCenter
+            anchors.left: uptimeIcon.right
+            anchors.verticalCenterOffset: 1
+            anchors.leftMargin: 7
+
+            text: qsTr("Uptime: %1").arg(User.uptime)
+            color: Config.colors.secondary
+        }
+    }
+}

modules/dashboard/dash/Weather.qml

@@ -0,0 +1,129 @@
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    anchors.fill: parent
+    anchors.margins: 16
+    anchors.topMargin: 6
+
+    Component.onCompleted: Weather.reload()
+
+    CustomText {
+        id: city
+
+        anchors.top: parent.top
+        anchors.left: parent.left
+
+        text: Weather.city
+        color: Config.colors.tertiary
+    }
+
+
+    MaterialIcon {
+        id: icon
+
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenterOffset: font.pointSize * 0.25
+
+        animate: true
+        animateProp: "opacity"
+        text: Weather.icon
+        color: Weather.iconColor
+        font.pointSize: Config.font.size.largest * 1.8
+
+        Behavior on color {
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: icon.animateDuration / 2
+                }
+                PropertyAction {}
+            }
+        }
+    }
+
+    Column {
+        id: info
+
+        anchors.left: icon.right
+        anchors.verticalCenter: icon.verticalCenter
+        anchors.verticalCenterOffset: -3
+        anchors.leftMargin: 14
+        spacing: 1
+
+        opacity: Weather.available ? 1 : 0
+
+        Behavior on opacity {
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: temp.animateDuration / 2
+                }
+                PropertyAction {}
+            }
+        }
+
+        CustomText {
+            id: temp
+            animate: true
+            text: Weather.temp
+            color: Config.colors.primary
+            font.pointSize: Config.font.size.large
+            font.weight: 500
+
+            // Reduce padding at bottom of text
+            height: implicitHeight * 0.9
+
+            CustomText {
+                anchors.left: parent.right
+                anchors.bottom: parent.bottom
+                anchors.leftMargin: 12
+                anchors.bottomMargin: 1
+
+                animate: true
+                text: Weather.feelsLike
+                color: Config.colors.tertiary
+                font.pointSize: Config.font.size.larger
+            }
+        }
+
+        CustomText {
+            animate: true
+            text: Weather.description
+            color: Config.colors.secondary
+
+            elide: Text.ElideRight
+            width: Math.min(implicitWidth, root.parent.width - icon.implicitWidth - info.anchors.leftMargin - 30)
+        }
+
+        Item {
+            implicitWidth: childrenRect.width
+            implicitHeight: childrenRect.height
+
+            MaterialIcon {
+                id: humidityIcon
+
+                animate: true
+                text: Weather.humidityIcon
+                color: Config.colors.primary
+                font.pointSize: Config.font.size.normal
+
+            }
+
+            CustomText {
+                anchors.left: humidityIcon.right
+                anchors.verticalCenter: humidityIcon.verticalCenter
+                anchors.leftMargin: 2
+
+                animate: true
+                text: `${Math.round(Weather.humidity * 100)}% Humidity`
+                color: Config.colors.primary
+            }
+        }
+    }
+}

modules/launcher/Background.qml

@@ -0,0 +1,59 @@
+import qs.config
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+    id: root
+
+    required property Item wrapper
+    readonly property real rounding: Config.border.rounding
+    readonly property bool flatten: wrapper.height < rounding * 2
+    readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+
+    ShapePath {
+        startX: (root.parent.width - root.wrapper.width) / 2 - rounding
+        startY: root.parent.height + 0.5
+        strokeWidth: -1
+        fillColor: Config.colors.bg
+
+        PathArc {
+            relativeX: root.rounding
+            relativeY: -root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: -(root.wrapper.height - root.roundingY * 2)
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: -root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+        }
+        PathLine {
+            relativeX: root.wrapper.width - root.rounding * 2
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: root.wrapper.height - root.roundingY * 2
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: PathArc.Counterclockwise
+        }
+    }
+
+}

modules/launcher/Content.qml

@@ -0,0 +1,167 @@
+pragma ComponentBehavior: Bound
+
+import "services"
+import qs.services
+import qs.config
+import qs.custom
+import Quickshell
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property var wrapper
+    required property var panels
+
+    readonly property color color: list.color
+    readonly property int padding: 15
+    readonly property int rounding: 25
+
+    implicitWidth: listWrapper.width + padding * 2
+    implicitHeight: searchWrapper.height + listWrapper.height + padding * 2
+
+    anchors.top: parent.top
+    anchors.horizontalCenter: parent.horizontalCenter
+
+    Item {
+        id: listWrapper
+
+        implicitWidth: list.width
+        implicitHeight: list.height + root.padding
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: searchWrapper.top
+        anchors.bottomMargin: root.padding
+
+        ContentList {
+            id: list
+
+            uiState: root.uiState
+            wrapper: root.wrapper
+            panels: root.panels
+            search: search
+            padding: root.padding
+            rounding: root.rounding
+        }
+    }
+
+    CustomRect {
+        id: searchWrapper
+
+        color: Config.colors.container
+        radius: 1000
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: root.padding
+
+        implicitHeight: Math.max(searchIcon.implicitHeight, search.implicitHeight, clearIcon.implicitHeight)
+
+        MaterialIcon {
+            id: searchIcon
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: root.padding
+
+            text: "search"
+            color: Config.colors.tertiary
+        }
+
+        CustomTextField {
+            id: search
+
+            anchors.left: searchIcon.right
+            anchors.right: clearBtn.left
+            anchors.leftMargin: 7
+            anchors.rightMargin: 7
+
+            topPadding: 12
+            bottomPadding: 12
+
+            placeholderText: qsTr("Type \"%1\" for commands").arg(Config.launcher.actionPrefix)
+
+            onAccepted: {
+                const currentItem = list.list?.currentItem;
+                if (currentItem) {
+                    if (text.startsWith(Config.launcher.actionPrefix)) {
+                        currentItem.modelData.onClicked(root.uiState);
+                    } else {
+                        Apps.launch(currentItem.modelData);
+                        root.uiState.launcher = false;
+                    }
+                }
+            }
+
+            Keys.onUpPressed: list.list?.decrementCurrentIndex()
+            Keys.onDownPressed: list.list?.incrementCurrentIndex()
+
+            Keys.onPressed: event => {
+                if (event.modifiers & Qt.ControlModifier) {
+                    if (event.key === Qt.Key_J) {
+                        list.list?.incrementCurrentIndex();
+                        event.accepted = true;
+                    } else if (event.key === Qt.Key_K) {
+                        list.list?.decrementCurrentIndex();
+                        event.accepted = true;
+                    }
+                } else if (event.key === Qt.Key_Tab) {
+                    list.list?.incrementCurrentIndex();
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))) {
+                    list.list?.decrementCurrentIndex();
+                    event.accepted = true;
+                }
+            }
+
+            Connections {
+                target: root.uiState
+
+                function onLauncherChanged(): void {
+                    if (root.uiState.launcher)
+                        search.focus = true;
+                    else {
+                        search.text = "";
+                        list.list.currentIndex = 0;
+                    }
+                }
+            }
+        }
+
+        StateLayer {
+            id: clearBtn
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: root.padding
+
+            implicitWidth: 24
+            implicitHeight: 24
+
+            disabled: search.text === ""
+            onClicked: search.text = ""
+            opacity: disabled ? 0 : 1
+
+            MaterialIcon {
+                id: clearIcon
+
+                anchors.centerIn: parent
+
+                width: search.text ? implicitWidth : implicitWidth / 2
+
+                text: "close"
+                color: Config.colors.tertiary
+
+                Behavior on width {
+                    Anim { duration: Config.anim.durations.small }
+                }
+            }
+
+            Behavior on opacity {
+                Anim { duration: Config.anim.durations.small }
+            }
+        }
+    }
+}

modules/launcher/ContentList.qml

@@ -0,0 +1,293 @@
+pragma ComponentBehavior: Bound
+
+import "items"
+import "services"
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property var wrapper
+    required property var panels
+    required property TextField search
+    required property int padding
+    required property int rounding
+
+    readonly property Item list: list
+    readonly property color color: list.color
+
+    anchors.bottom: parent.bottom
+    anchors.left: parent.left
+    anchors.right: parent.right
+    implicitWidth: Config.launcher.itemWidth
+    implicitHeight: list.implicitHeight > 0 ? list.implicitHeight : empty.implicitHeight
+
+    clip: true
+
+    CustomListView {
+        id: list
+
+        model: ScriptModel {
+            id: model
+
+            onValuesChanged: list.currentIndex = 0
+        }
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        spacing: 7
+        orientation: Qt.Vertical
+        implicitHeight: (Config.launcher.itemHeight + spacing) * Math.min(Config.launcher.maxItemCount, count) - spacing
+
+        highlightMoveDuration: Config.anim.durations.normal
+        highlightResizeDuration: 0
+        keyNavigationWraps: true
+
+        property color color
+        highlight: CustomRect {
+            radius: 1000
+            color: list.color
+            opacity: 0.1
+        }
+
+        state: {
+            const text = root.search.text;
+            const prefix = Config.launcher.actionPrefix;
+            if (text.startsWith(prefix)) {
+                return "actions";
+            }
+
+            return "apps";
+        }
+
+        states: [
+            State {
+                name: "apps"
+
+                PropertyChanges {
+                    model.values: Apps.search(root.search.text)
+                    list.delegate: appItem
+                    list.color: Config.colors.launcherApps
+                }
+            },
+            State {
+                name: "actions"
+
+                PropertyChanges {
+                    model.values: Actions.query(root.search.text)
+                    list.delegate: actionItem
+                    list.color: Config.colors.launcherActions
+                }
+            }
+        ]
+
+        // Disable animations before transition starts
+        onStateChanged: {
+            // NOTE: uiState check is necessary because this handler runs on startup
+            if (root.uiState.launcher) {
+                list.add.enabled = false;
+                list.remove.enabled = false;
+            }
+        }
+
+        transitions: Transition {
+            SequentialAnimation {
+                ParallelAnimation {
+                    Anim {
+                        target: list
+                        property: "opacity"
+                        from: 1
+                        to: 0
+                        duration: Config.anim.durations.small
+                        easing.bezierCurve: Config.anim.curves.standardAccel
+                    }
+                    Anim {
+                        target: list
+                        property: "scale"
+                        from: 1
+                        to: 0.9
+                        duration: Config.anim.durations.small
+                        easing.bezierCurve: Config.anim.curves.standardAccel
+                    }
+                }
+                PropertyAction {
+                    targets: [model, list]
+                    properties: "values,delegate,color"
+                }
+                ParallelAnimation {
+                    Anim {
+                        target: list
+                        property: "opacity"
+                        from: 0
+                        to: 1
+                        duration: Config.anim.durations.small
+                        easing.bezierCurve: Config.anim.curves.standardDecel
+                    }
+                    Anim {
+                        target: list
+                        property: "scale"
+                        from: 0.9
+                        to: 1
+                        duration: Config.anim.durations.small
+                        easing.bezierCurve: Config.anim.curves.standardDecel
+                    }
+                }
+                PropertyAction {
+                    targets: [list.add, list.remove]
+                    property: "enabled"
+                    value: true
+                }
+            }
+        }
+
+        CustomScrollBar.vertical: CustomScrollBar {
+            flickable: list
+        }
+
+        add: Transition {
+            Anim {
+                property: "opacity"
+                from: 0
+                to: 1
+            }
+            Anim {
+                property: "scale"
+                from: 0.8
+                to: 1
+            }
+        }
+
+        remove: Transition {
+            Anim {
+                property: "opacity"
+                from: 1
+                to: 0
+            }
+            Anim {
+                property: "scale"
+                from: 1
+                to: 0.8
+            }
+        }
+
+        move: Transition {
+            Anim {
+                property: "y"
+            }
+            Anim {
+                properties: "opacity,scale"
+                to: 1
+            }
+        }
+
+        addDisplaced: Transition {
+            Anim {
+                property: "y"
+                duration: Config.anim.durations.small
+            }
+            Anim {
+                properties: "opacity,scale"
+                to: 1
+            }
+        }
+
+        displaced: Transition {
+            Anim {
+                property: "y"
+            }
+            Anim {
+                properties: "opacity,scale"
+                to: 1
+            }
+        }
+
+        Component {
+            id: appItem
+
+            AppItem {
+                uiState: root.uiState
+            }
+        }
+
+        Component {
+            id: actionItem
+
+            ActionItem {
+                uiState: root.uiState
+                list: list
+            }
+        }
+    }
+
+    Row {
+        id: empty
+
+        opacity: root.list?.count === 0 ? 1 : 0
+        scale: root.list?.count === 0 ? 1 : 0.5
+
+        spacing: 12
+        padding: 15
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+
+        MaterialIcon {
+            text: "manage_search"
+            color: Config.colors.tertiary
+            font.pointSize: Config.font.size.largest
+
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Column {
+            anchors.verticalCenter: parent.verticalCenter
+
+            CustomText {
+                text: qsTr("No results")
+                color: Config.colors.tertiary
+                font.pointSize: Config.font.size.larger
+                font.weight: 500
+            }
+
+            CustomText {
+                text: qsTr("Try searching for something else")
+                color: Config.colors.tertiary
+                font.pointSize: Config.font.size.normal
+            }
+        }
+
+        Behavior on opacity {
+            Anim {}
+        }
+
+        Behavior on scale {
+            Anim {}
+        }
+    }
+
+    Behavior on implicitWidth {
+        enabled: root.uiState.launcher
+
+        Anim {
+            duration: Config.anim.durations.large
+            easing.bezierCurve: Config.anim.curves.emphasizedDecel
+        }
+    }
+
+    Behavior on implicitHeight {
+        enabled: root.uiState.launcher
+
+        Anim {
+            duration: Config.anim.durations.large
+            easing.bezierCurve: Config.anim.curves.emphasizedDecel
+        }
+    }
+}

modules/launcher/Wrapper.qml

@@ -0,0 +1,75 @@
+import qs.config
+import qs.custom
+import Quickshell
+import Quickshell.Hyprland
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property Item panels
+
+    visible: height > 0
+    implicitHeight: 0
+    implicitWidth: content.implicitWidth
+
+    states: State {
+        name: "visible"
+        when: root.uiState.launcher
+
+        PropertyChanges {
+            root.implicitHeight: content.implicitHeight
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "visible"
+
+            Anim {
+                target: root
+                property: "implicitHeight"
+                duration: Config.anim.durations.expressiveDefaultSpatial
+                easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+            }
+        },
+        Transition {
+            from: "visible"
+            to: ""
+
+            Anim {
+                target: root
+                property: "implicitHeight"
+                duration: Config.anim.durations.normal
+                easing.bezierCurve: Config.anim.curves.emphasized
+            }
+        }
+    ]
+
+    HyprlandFocusGrab {
+        active: root.uiState.launcher
+        windows: [QsWindow.window]
+        onCleared: root.uiState.launcher = false
+    }
+
+    Background {
+        id: background
+        visible: false
+        wrapper: root
+    }
+
+    GlowEffect {
+        source: background
+        glowColor: content.color
+    }
+
+    Content {
+        id: content
+
+        uiState: root.uiState
+        wrapper: root
+        panels: root.panels
+    }
+}

modules/launcher/items/ActionItem.qml

@@ -0,0 +1,80 @@
+import "../services"
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import QtQuick
+import Quickshell
+
+Item {
+    id: root
+
+    required property Actions.Action modelData
+    required property PersistentProperties uiState
+    required property var list
+
+    implicitHeight: Config.launcher.itemHeight
+
+    anchors.left: parent?.left
+    anchors.right: parent?.right
+
+    StateLayer {
+        radius: 1000
+        anchors.fill: parent
+
+        function onClicked(): void {
+            root.uiState.launcher = false;
+            root.modelData?.onClicked(root.uiState);
+        }
+    }
+
+    Item {
+        anchors.fill: parent
+        anchors.leftMargin: 12
+        anchors.rightMargin: 12
+        anchors.margins: 7
+
+        MaterialIcon {
+            id: icon
+
+            text: root.modelData?.icon ?? ""
+            font.pointSize: Config.font.size.largest
+
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Item {
+            anchors.left: icon.right
+            anchors.leftMargin: 12
+            anchors.verticalCenter: icon.verticalCenter
+
+            implicitWidth: parent.width - icon.width
+            implicitHeight: name.implicitHeight + desc.implicitHeight
+
+            CustomText {
+                id: name
+
+                text: root.modelData?.name ?? ""
+                font.pointSize: Config.font.size.normal
+                color: root.ListView.isCurrentItem ? Color.mute(Config.colors.launcherActions, 1.1) : Config.colors.primary
+
+                Behavior on color {
+                    CAnim {}
+                }
+            }
+
+            CustomText {
+                id: desc
+
+                text: root.modelData?.desc ?? ""
+                font.pointSize: Config.font.size.small
+                color: Config.colors.tertiary
+
+                elide: Text.ElideRight
+                width: root.width - icon.width - 34
+
+                anchors.top: name.bottom
+            }
+        }
+    }
+}

modules/launcher/items/AppItem.qml

@@ -0,0 +1,80 @@
+import "../services"
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+
+Item {
+    id: root
+
+    required property DesktopEntry modelData
+    required property PersistentProperties uiState
+
+    implicitHeight: Config.launcher.itemHeight
+
+    anchors.left: parent?.left
+    anchors.right: parent?.right
+
+    StateLayer {
+        radius: 1000
+        anchors.fill: parent
+
+        function onClicked(): void {
+            Apps.launch(root.modelData);
+            root.uiState.launcher = false;
+        }
+    }
+
+    Item {
+        anchors.fill: parent
+        anchors.leftMargin: 12
+        anchors.rightMargin: 12
+        anchors.margins: 7
+
+        IconImage {
+            id: icon
+
+            source: Quickshell.iconPath(root.modelData?.icon, "image-missing")
+            implicitSize: parent.height * 0.9
+
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Item {
+            anchors.left: icon.right
+            anchors.leftMargin: 12
+            anchors.verticalCenter: icon.verticalCenter
+
+            implicitWidth: parent.width - icon.width
+            implicitHeight: name.implicitHeight + comment.implicitHeight
+
+            CustomText {
+                id: name
+
+                text: root.modelData?.name ?? ""
+                font.pointSize: Config.font.size.normal
+                color: root.ListView.isCurrentItem ? Color.mute(Config.colors.launcherApps) : Config.colors.primary
+
+                Behavior on color {
+                    CAnim {}
+                }
+            }
+
+            CustomText {
+                id: comment
+
+                text: (root.modelData?.comment || root.modelData?.genericName || root.modelData?.name) ?? ""
+                font.pointSize: Config.font.size.small
+                color: Config.colors.tertiary
+
+                elide: Text.ElideRight
+                width: root.width - icon.width - 34
+
+                anchors.top: name.bottom
+            }
+        }
+    }
+}

modules/launcher/services/Actions.qml

@@ -0,0 +1,86 @@
+pragma Singleton
+
+import ".."
+import qs.config
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+
+Searcher {
+    id: root
+
+    readonly property list<Action> actions: [
+        Action {
+            name: qsTr("Shutdown")
+            desc: qsTr("Shutdown the system")
+            icon: "power_settings_new"
+
+            function onClicked(uiState: PersistentProperties): void {
+                Quickshell.execDetached(Config.session.shutdown);
+            }
+        },
+        Action {
+            name: qsTr("Reboot")
+            desc: qsTr("Reboot the system")
+            icon: "cached"
+
+            function onClicked(uiState: PersistentProperties): void {
+                Quickshell.execDetached(Config.session.reboot);
+            }
+        },
+        Action {
+            name: qsTr("Logout")
+            desc: qsTr("Log out of the session and go back to the startup screen")
+            icon: "logout"
+
+            function onClicked(uiState: PersistentProperties): void {
+                Quickshell.execDetached(Config.session.logout);
+            }
+        },
+        Action {
+            name: qsTr("Lock")
+            desc: qsTr("Activate the lock screen (hyprlock)")
+            icon: "lock"
+
+            function onClicked(uiState: PersistentProperties): void {
+                Quickshell.execDetached(Config.session.lock);
+            }
+        },
+        Action {
+            name: qsTr("Suspend")
+            desc: qsTr("Suspend the system")
+            icon: "bedtime"
+
+            function onClicked(uiState: PersistentProperties): void {
+                Quickshell.execDetached(Config.session.suspend);
+            }
+        },
+        Action {
+            name: qsTr("Hibernate")
+            desc: qsTr("Suspend, then hibernate the system")
+            icon: "downloading"
+
+            function onClicked(uiState: PersistentProperties): void {
+                Quickshell.execDetached(Config.session.hibernate);
+            }
+        }
+    ]
+
+    function transformSearch(search: string): string {
+        return search.slice(Config.launcher.actionPrefix.length);
+    }
+
+    list: actions.filter(a => !a.disabled)
+    useFuzzy: true
+
+    component Action: QtObject {
+        required property string name
+        required property string desc
+        required property string icon
+        property bool disabled
+
+        function onClicked(uiState: PersistentProperties): void {
+        }
+    }
+}

modules/launcher/services/Apps.qml

@@ -0,0 +1,86 @@
+pragma Singleton
+
+import qs.config
+import qs.util
+import Quickshell
+import QtQuick
+
+Searcher {
+    id: root
+
+    function launch(entry: DesktopEntry): void {
+        if (entry.runInTerminal)
+            Quickshell.execDetached({
+                command: [...Config.terminalCommand, ...entry.command],
+                workingDirectory: entry.workingDirectory
+            });
+        else
+            Quickshell.execDetached({
+                command: entry.command,
+                workingDirectory: entry.workingDirectory
+            });
+    }
+
+    function search(search: string): list<var> {
+        const prefix = Config.launcher.specialPrefix;
+
+        if (search.startsWith(`${prefix}i `)) {
+            keys = ["id", "name"];
+            weights = [0.9, 0.1];
+        } else if (search.startsWith(`${prefix}c `)) {
+            keys = ["categories", "name"];
+            weights = [0.9, 0.1];
+        } else if (search.startsWith(`${prefix}d `)) {
+            keys = ["desc", "name"];
+            weights = [0.9, 0.1];
+        } else if (search.startsWith(`${prefix}e `)) {
+            keys = ["execString", "name"];
+            weights = [0.9, 0.1];
+        } else if (search.startsWith(`${prefix}w `)) {
+            keys = ["wmClass", "name"];
+            weights = [0.9, 0.1];
+        } else if (search.startsWith(`${prefix}g `)) {
+            keys = ["genericName", "name"];
+            weights = [0.9, 0.1];
+        } else if (search.startsWith(`${prefix}k `)) {
+            keys = ["keywords", "name"];
+            weights = [0.9, 0.1];
+        } else {
+            keys = ["name"];
+            weights = [1];
+
+            if (!search.startsWith(`${prefix}t `))
+                return query(search).map(e => e.modelData);
+        }
+
+        const results = query(search.slice(prefix.length + 2)).map(e => e.modelData);
+        if (search.startsWith(`${prefix}t `))
+            return results.filter(a => a.runInTerminal);
+        return results;
+    }
+
+    function selector(item: var): string {
+        return keys.map(k => item[k]).join(" ");
+    }
+
+    list: variants.instances
+    useFuzzy: true
+
+    Variants {
+        id: variants
+
+        model: [...DesktopEntries.applications.values].sort((a, b) => a.name.localeCompare(b.name))
+
+        QtObject {
+            required property DesktopEntry modelData
+            readonly property string id: modelData.id
+            readonly property string name: modelData.name
+            readonly property string desc: modelData.comment
+            readonly property string execString: modelData.execString
+            readonly property string wmClass: modelData.startupClass
+            readonly property string genericName: modelData.genericName
+            readonly property string categories: modelData.categories.join(" ")
+            readonly property string keywords: modelData.keywords.join(" ")
+        }
+    }
+}

modules/notifications/Background.qml

@@ -0,0 +1,61 @@
+import qs.config
+import qs.custom
+import qs.services
+import Quickshell
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+    id: root
+
+    required property Item wrapper
+    readonly property real rounding: Config.border.rounding
+    readonly property bool flatten: wrapper.height < rounding * 2
+    readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+    property real fullHeightRounding: wrapper.height >= QsWindow.window?.height - Config.border.thickness * 2 ? -rounding : rounding
+
+    ShapePath {
+        startX: root.wrapper.width + 0.5
+        startY: root.wrapper.height + 0.5
+        strokeWidth: -1
+        fillColor: Config.colors.bg
+
+        PathLine {
+            relativeX: -(root.wrapper.width + root.rounding)
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: -root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: -root.wrapper.height + root.roundingY * 2
+        }
+        PathArc {
+            relativeX: root.fullHeightRounding
+            relativeY: -root.roundingY
+            radiusX: Math.abs(root.fullHeightRounding)
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: root.fullHeightRounding < 0 ? PathArc.Counterclockwise : PathArc.Clockwise
+        }
+        PathLine {
+            relativeX: root.wrapper.height > 0 ? root.wrapper.width - root.rounding - root.fullHeightRounding : root.wrapper.width
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: -root.rounding
+            radiusX: root.rounding
+            radiusY: root.rounding
+            direction: PathArc.Counterclockwise
+        }
+    }
+
+    Behavior on fullHeightRounding {
+        Anim {}
+    }
+}

modules/notifications/Content.qml

@@ -0,0 +1,195 @@
+import qs.config
+import qs.custom
+import qs.services
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property Item panels
+    readonly property int padding: 15
+
+    readonly property var monitor: Hypr.monitorFor(QsWindow.window.screen)
+    readonly property var notifs: Notifs.list.filter(n => n.popup === monitor)
+
+    anchors.top: parent.top
+    anchors.bottom: parent.bottom
+    anchors.right: parent.right
+
+    implicitWidth: implicitHeight > 0 ? Config.notifs.width + padding * 2 : 0
+    implicitHeight: {
+        const count = list.count;
+        if (count === 0)
+            return 0;
+
+        let height = (count - 1) * 10 + padding * 2;
+        for (let i = 0; i < count; i++)
+            height += list.itemAtIndex(i)?.nonAnimHeight ?? 0;
+
+        if (uiState.osd) {
+            const h = panels.osd.y - Config.border.rounding * 2;
+            if (height > h)
+                height = h;
+        }
+
+        return Math.min((QsWindow.window?.screen?.height ?? 0) - Config.bar.height - Config.border.thickness - padding, height);
+    }
+
+    ClippingWrapperRectangle {
+        anchors.fill: parent
+        anchors.margins: root.padding
+
+        color: "transparent"
+        radius: 17
+
+        CustomListView {
+            id: list
+
+            model: ScriptModel {
+                values: root.notifs
+            }
+
+            anchors.fill: parent
+
+            orientation: Qt.Vertical
+            spacing: 0
+            cacheBuffer: QsWindow.window?.screen.height ?? 0
+
+            delegate: Item {
+                id: wrapper
+
+                required property Notifs.Notif modelData
+                required property int index
+                readonly property alias nonAnimHeight: notif.nonAnimHeight
+                property int idx
+
+                onIndexChanged: {
+                    if (index !== -1)
+                        idx = index;
+                }
+
+                implicitWidth: notif.implicitWidth
+                implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : 10)
+
+                ListView.onRemove: removeAnim.start()
+
+                SequentialAnimation {
+                    id: removeAnim
+
+                    PropertyAction {
+                        target: wrapper
+                        property: "ListView.delayRemove"
+                        value: true
+                    }
+                    PropertyAction {
+                        target: wrapper
+                        property: "enabled"
+                        value: false
+                    }
+                    PropertyAction {
+                        target: wrapper
+                        property: "implicitHeight"
+                        value: 0
+                    }
+                    PropertyAction {
+                        target: wrapper
+                        property: "z"
+                        value: 1
+                    }
+                    Anim {
+                        target: notif
+                        property: "x"
+                        to: (notif.x >= 0 ? Config.notifs.width : -Config.notifs.width) * 2
+                        easing.bezierCurve: Config.anim.curves.emphasized
+                    }
+                    PropertyAction {
+                        target: wrapper
+                        property: "ListView.delayRemove"
+                        value: false
+                    }
+                }
+
+                ClippingRectangle {
+                    anchors.top: parent.top
+                    anchors.topMargin: wrapper.idx === 0 ? 0 : 10
+
+                    color: "transparent"
+                    radius: notif.radius
+                    implicitWidth: notif.implicitWidth
+                    implicitHeight: notif.implicitHeight
+
+                    Notification {
+                        id: notif
+                        notif: wrapper.modelData
+                    }
+                }
+            }
+
+            move: Transition {
+                NotifAnim {
+                    property: "y"
+                }
+            }
+
+            displaced: Transition {
+                NotifAnim {
+                    property: "y"
+                }
+            }
+
+            ExtraIndicator {
+                anchors.top: parent.top
+                extra: {
+                    const count = list.count;
+                    if (count === 0)
+                        return 0;
+
+                    const scrollY = list.contentY;
+
+                    let height = 0;
+                    for (let i = 0; i < count; i++) {
+                        height += (list.itemAtIndex(i)?.nonAnimHeight ?? 0) + 10;
+
+                        if (height - 10 >= scrollY)
+                            return i;
+                    }
+
+                    return count;
+                }
+            }
+
+            ExtraIndicator {
+                anchors.bottom: parent.bottom
+                extra: {
+                    const count = list.count;
+                    if (count === 0)
+                        return 0;
+
+                    const scrollY = list.contentHeight - (list.contentY + list.height);
+
+                    let height = 0;
+                    for (let i = count - 1; i >= 0; i--) {
+                        height += (list.itemAtIndex(i)?.nonAnimHeight ?? 0) + 10;
+
+                        if (height - 10 >= scrollY)
+                            return count - i - 1;
+                    }
+
+                    return 0;
+                }
+            }
+        }
+    }
+
+    Behavior on implicitHeight {
+        NotifAnim {}
+    }
+
+    component NotifAnim: Anim {
+        duration: Config.anim.durations.expressiveDefaultSpatial
+        easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+    }
+}

modules/notifications/Notification.qml

@@ -0,0 +1,599 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.Notifications
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Shapes
+
+CustomRect {
+    id: root
+
+    required property Notifs.Notif notif
+    readonly property bool hasImage: notif.image.length > 0
+    readonly property bool hasAppIcon: notif.appIcon.length > 0
+    readonly property int nonAnimHeight: inner.nonAnimHeight + inner.anchors.margins * 2
+
+    property bool inPopup: true
+    property bool expanded: false
+
+    color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.errorBg : Config.colors.container
+    radius: 12
+    implicitWidth: Config.notifs.width
+    implicitHeight: inner.implicitHeight + inner.anchors.margins * 2
+
+    onExpandedChanged: {
+        if (root.inPopup && expanded)
+            root.notif.timer.stop();
+    }
+
+    x: inPopup ? Config.notifs.width : 0
+    Component.onCompleted: x = 0
+
+    Behavior on x {
+        Anim {
+            easing.bezierCurve: Config.anim.curves.emphasizedDecel
+        }
+    }
+
+    RetainableLock {
+        object: root.notif.notification
+        locked: true
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: root.expanded && body.hoveredLink ? Qt.PointingHandCursor : pressed ? Qt.ClosedHandCursor : undefined
+        acceptedButtons: Qt.AllButtons
+        preventStealing: true
+
+        onEntered: {
+            if (root.inPopup)
+                root.notif.timer.stop();
+        }
+        onExited: {
+            if (root.inPopup && !pressed && !root.expanded)
+                root.notif.timer.start();
+        }
+
+        drag.target: parent
+        drag.axis: Drag.XAxis
+
+        onPressed: event => {
+            if (event.button === Qt.MiddleButton)
+                root.notif.notification.dismiss();
+        }
+        onReleased: event => {
+            if (root.inPopup && !containsMouse && !root.expanded)
+                root.notif.timer.start();
+
+            if (Math.abs(root.x) < Config.notifs.width * Config.notifs.clearThreshold)
+                root.x = 0;
+            else if (root.inPopup)
+                root.notif.popup = null;
+            else
+                root.notif.notification.dismiss();
+        }
+        onClicked: event => {
+            if (event.button === Qt.LeftButton) {
+                const actions = root.notif.actions;
+                if (actions?.length === 1)
+                    actions[0].invoke();
+                else
+                    root.expanded = !root.expanded;
+            } else if (event.button === Qt.RightButton) {
+                root.expanded = !root.expanded;
+            }
+        }
+
+        Item {
+            id: inner
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.margins: 8
+
+            readonly property real nonAnimHeight: root.expanded ? summary.height + appName.height + body.height + actions.height + 16
+                : Config.notifs.imageSize
+            implicitHeight: nonAnimHeight
+
+            Behavior on implicitHeight {
+                Anim {
+                    duration: Config.anim.durations.expressiveDefaultSpatial
+                    easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+                }
+            }
+
+            Loader {
+                id: image
+
+                active: root.hasImage
+                asynchronous: true
+
+                anchors.left: parent.left
+                anchors.top: parent.top
+                width: Config.notifs.imageSize
+                height: Config.notifs.imageSize
+                visible: root.hasImage || root.hasAppIcon
+
+                sourceComponent: ClippingRectangle {
+                    radius: 1000
+                    implicitWidth: Config.notifs.imageSize
+                    implicitHeight: Config.notifs.imageSize
+
+                    Image {
+                        anchors.fill: parent
+                        source: Qt.resolvedUrl(root.notif.image)
+                        fillMode: Image.PreserveAspectCrop
+                        cache: false
+                        asynchronous: true
+                    }
+                }
+            }
+
+            Loader {
+                id: appIcon
+
+                active: root.hasAppIcon || !root.hasImage
+                asynchronous: true
+
+                anchors.horizontalCenter: root.hasImage ? undefined : image.horizontalCenter
+                anchors.verticalCenter: root.hasImage ? undefined : image.verticalCenter
+                anchors.right: root.hasImage ? image.right : undefined
+                anchors.bottom: root.hasImage ? image.bottom : undefined
+
+                sourceComponent: CustomRect {
+                    radius: 1000
+                    color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.error
+                        : root.notif.urgency === NotificationUrgency.Low ? Config.colors.inactive
+                        : Config.colors.notification
+                    implicitWidth: root.hasImage ? Config.notifs.badgeSize : Config.notifs.imageSize
+                    implicitHeight: root.hasImage ? Config.notifs.badgeSize : Config.notifs.imageSize
+
+                    Loader {
+                        id: icon
+
+                        active: root.hasAppIcon
+                        asynchronous: true
+
+                        anchors.centerIn: parent
+
+                        width: Math.round(parent.width * 0.6)
+                        height: Math.round(parent.width * 0.6)
+
+                        sourceComponent: IconImage {
+                            anchors.fill: parent
+                            source: Quickshell.iconPath(root.notif.appIcon)
+                            asynchronous: true
+                        }
+                    }
+
+                    Loader {
+                        active: !root.hasAppIcon
+                        asynchronous: true
+                        anchors.centerIn: parent
+
+                        sourceComponent: MaterialIcon {
+                            text: Icons.getNotifIcon(root.notif.summary, root.notif.urgency)
+
+                            color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.primary
+                                : Config.colors.primaryDark
+                            font.pointSize: Config.font.size.larger
+                        }
+                    }
+                }
+            }
+
+            CustomText {
+                id: appName
+
+                anchors.top: parent.top
+                anchors.left: image.right
+                anchors.leftMargin: 10
+
+                animate: true
+                text: appNameMetrics.elidedText
+                maximumLineCount: 1
+                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primary : Config.colors.tertiary
+                font.pointSize: Config.font.size.small
+
+                opacity: root.expanded ? 1 : 0
+                visible: opacity > 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            TextMetrics {
+                id: appNameMetrics
+
+                text: root.notif.appName
+                font.family: appName.font.family
+                font.pointSize: appName.font.pointSize
+                elide: Text.ElideRight
+                elideWidth: closeBtn.x - timeDetail.width - time.width - timeSep.width - summaryPreview.x - 21
+            }
+
+            CustomText {
+                id: summaryPreview
+
+                anchors.top: parent.top
+                anchors.left: image.right
+                anchors.leftMargin: 10
+                anchors.topMargin: 2
+
+                animate: true
+                text: summaryPreviewMetrics.elidedText
+                color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.primary : Config.colors.secondary
+
+                opacity: root.expanded ? 0 : 1
+                visible: opacity > 0
+
+                states: State {
+                    name: "expanded"
+                    when: root.expanded
+
+                    AnchorChanges {
+                        target: summaryPreview
+                        anchors.top: appName.bottom
+                    }
+                }
+
+                transitions: Transition {
+                    AnchorAnimation {
+                        duration: Config.anim.durations.normal
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Config.anim.curves.standard
+                    }
+                }
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            TextMetrics {
+                id: summaryPreviewMetrics
+
+                text: root.notif.summary
+                font.family: summaryPreview.font.family
+                font.pointSize: summaryPreview.font.pointSize
+                elide: Text.ElideRight
+                elideWidth: closeBtn.x - time.width - timeSep.width - summaryPreview.x - 21
+            }
+
+            CustomText {
+                id: summary
+
+                anchors.top: parent.top
+                anchors.left: image.right
+                anchors.right: parent.right
+                anchors.leftMargin: 10
+                anchors.topMargin: 5
+                anchors.rightMargin: 10
+
+                animate: true
+                text: root.notif.summary
+                color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.primary : Config.colors.secondary
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+
+                states: State {
+                    name: "expanded"
+                    when: root.expanded
+
+                    AnchorChanges {
+                        target: summary
+                        anchors.top: appName.bottom
+                    }
+                }
+
+                transitions: Transition {
+                    AnchorAnimation {
+                        duration: Config.anim.durations.normal
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Config.anim.curves.standard
+                    }
+                }
+
+                opacity: root.expanded ? 1 : 0
+                visible: opacity > 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            CustomText {
+                id: timeSep
+
+                anchors.top: parent.top
+                anchors.left: summaryPreview.right
+                anchors.leftMargin: 7
+                anchors.topMargin: root.expanded ? 0 : 3
+
+                text: "•"
+                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primary : Config.colors.tertiary
+                font.pointSize: Config.font.size.small
+
+                states: State {
+                    name: "expanded"
+                    when: root.expanded
+
+                    AnchorChanges {
+                        target: timeSep
+                        anchors.left: appName.right
+                    }
+                }
+
+                transitions: Transition {
+                    AnchorAnimation {
+                        duration: Config.anim.durations.normal
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Config.anim.curves.standard
+                    }
+                }
+            }
+
+            CustomText {
+                id: time
+
+                anchors.top: parent.top
+                anchors.left: timeSep.right
+                anchors.leftMargin: 7
+                anchors.topMargin: root.expanded ? 0 : 2
+
+                animate: true
+                horizontalAlignment: Text.AlignLeft
+                text: root.notif.timeSince
+                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primary : Config.colors.tertiary
+                font.pointSize: Config.font.size.small
+            }
+
+            CustomText {
+                id: timeDetail
+
+                anchors.verticalCenter: time.verticalCenter
+                anchors.left: time.right
+                anchors.leftMargin: 5
+
+                horizontalAlignment: Text.AlignLeft
+                text: `(${root.notif.timeStr})`
+                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primary : Config.colors.tertiary
+                font.pointSize: Config.font.size.small
+
+                opacity: root.expanded ? 1 : 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            StateLayer {
+                id: closeBtn
+
+                anchors.right: expandBtn.left
+                anchors.top: parent.top
+
+                implicitWidth: 20
+                implicitHeight: 20
+
+                function onClicked() {
+                    root.notif.notification.dismiss();
+                }
+
+                MaterialIcon {
+                    id: closeIcon
+
+                    anchors.centerIn: parent
+
+                    animate: true
+                    text: "close"
+                    font.pointSize: Config.font.size.normal
+                }
+            }
+
+            StateLayer {
+                id: expandBtn
+
+                anchors.right: parent.right
+                anchors.top: parent.top
+
+                implicitWidth: 20
+                implicitHeight: 20
+
+                color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.secondary : Config.colors.primary
+                radius: 1000
+
+                function onClicked() {
+                    root.expanded = !root.expanded
+                }
+
+                MaterialIcon {
+                    id: expandIcon
+
+                    anchors.centerIn: parent
+                    anchors.verticalCenterOffset: text === "expand_more" ? 1 : 0
+
+                    animate: true
+                    text: root.expanded ? "expand_less" : "expand_more"
+                    font.pointSize: Config.font.size.normal
+                }
+            }
+
+            CustomText {
+                id: bodyPreview
+
+                anchors.left: summaryPreview.left
+                anchors.right: parent.right
+                anchors.top: summaryPreview.bottom
+                anchors.topMargin: 3
+                anchors.rightMargin: 7
+
+                animate: true
+                textFormat: Text.MarkdownText
+                text: bodyPreviewMetrics.elidedText
+                color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.tertiary : Config.colors.primary
+                font.pointSize: Config.font.size.small
+
+                opacity: root.expanded ? 0 : 1
+                visible: opacity > 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            TextMetrics {
+                id: bodyPreviewMetrics
+
+                text: root.notif.bodyOneLine
+                font.family: bodyPreview.font.family
+                font.pointSize: bodyPreview.font.pointSize
+                elide: Text.ElideRight
+                elideWidth: bodyPreview.width
+            }
+
+            CustomText {
+                id: body
+
+                anchors.left: summary.left
+                anchors.right: parent.right
+                anchors.top: summary.bottom
+                anchors.rightMargin: 7
+                anchors.topMargin: 3
+
+                animate: true
+                textFormat: Text.MarkdownText
+                text: root.notif.body
+                color: root.notif.urgency === NotificationUrgency.Low ? Config.colors.tertiary : Config.colors.primary
+                font.pointSize: Config.font.size.small
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                height: text ? implicitHeight : 0
+
+                onLinkActivated: link => {
+                    if (!root.expanded)
+                        return;
+
+                    Quickshell.execDetached(["xdg-open", link]);
+                    root.notif.notification.dismiss(); // TODO: change back to popup when notif dock impled
+                }
+
+                opacity: root.expanded ? 1 : 0
+                visible: opacity > 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            RowLayout {
+                id: actions
+
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: body.bottom
+                anchors.topMargin: 10
+
+                spacing: 10
+
+                opacity: root.expanded ? 1 : 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+
+                Action {
+                    modelData: QtObject {
+                        readonly property string text: qsTr("Close")
+                        function invoke(): void {
+                            root.notif.notification.dismiss();
+                        }
+                    }
+                }
+
+                Repeater {
+                    model: root.notif.actions
+
+                    delegate: Component {
+                        Action {}
+                    }
+                }
+            }
+        }
+    }
+
+    CustomRect {
+        id: progressBar
+
+        visible: root.inPopup
+        anchors.bottom: parent.bottom
+        height: 2
+        color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.error : Config.colors.inactive
+        opacity: root.notif.timer.running ? 1 : 0
+
+        NumberAnimation on implicitWidth {
+            from: root.width
+            to: 0
+            duration: Config.notifs.defaultExpireTimeout
+            running: root.notif.timer.running
+        }
+
+        Behavior on opacity {
+            Anim { duration: Config.anim.durations.small }
+        }
+    }
+
+    component Action: CustomRect {
+        id: action
+
+        required property var modelData
+
+        radius: 1000
+        color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.error : Config.colors.inactive
+
+        implicitWidth: actionText.width + 20
+        implicitHeight: actionText.height + 10
+        Layout.preferredWidth: implicitWidth
+        Layout.preferredHeight: implicitHeight
+
+        StateLayer {
+            anchors.fill: parent
+            radius: 1000
+            color: root.notif.urgency === NotificationUrgency.Critical ? "#ffffff" : Config.colors.primary
+
+            function onClicked(): void {
+                action.modelData.invoke();
+            }
+        }
+
+        CustomText {
+            id: actionText
+
+            anchors.centerIn: parent
+            text: actionTextMetrics.elidedText
+            color: root.notif.urgency === NotificationUrgency.Critical ? Config.colors.primaryDark
+                : root.notif.urgency === NotificationUrgency.Low ? Config.colors.primary : Config.colors.secondary
+            font.pointSize: Config.font.size.small
+        }
+
+        TextMetrics {
+            id: actionTextMetrics
+
+            text: action.modelData.text
+            font.family: actionText.font.family
+            font.pointSize: actionText.font.pointSize
+            elide: Text.ElideRight
+            elideWidth: {
+                const numActions = root.notif.actions.length + 1;
+                return (inner.width - actions.spacing * (numActions - 1)) / numActions - 20;
+            }
+        }
+    }
+}

modules/notifications/Wrapper.qml

@@ -0,0 +1,34 @@
+import qs.config
+import qs.custom
+import Quickshell
+import Quickshell.Services.Notifications
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property Item panels
+
+    implicitHeight: content.implicitHeight
+    implicitWidth: content.implicitWidth
+
+    Background {
+        id: background
+        visible: false
+        wrapper: root
+    }
+
+    GlowEffect {
+        source: background
+        glowColor: content.notifs.find(n => n.urgency === NotificationUrgency.Critical) ?
+            Config.colors.error : Config.colors.notification
+    }
+
+    Content {
+        id: content
+
+        uiState: root.uiState
+        panels: root.panels
+    }
+}

modules/osd/Background.qml

@@ -0,0 +1,59 @@
+import qs.config
+import qs.services
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+    id: root
+
+    required property Item wrapper
+    readonly property real rounding: Config.border.rounding
+    readonly property bool flatten: wrapper.width < rounding * 2
+    readonly property real roundingX: flatten ? wrapper.width / 2 : rounding
+
+    ShapePath {
+        startX: root.wrapper.width + 0.5
+        startY: -root.rounding
+        strokeWidth: -1
+        fillColor: Config.colors.bg
+
+        PathArc {
+            relativeX: -root.roundingX
+            relativeY: root.rounding
+            radiusX: Math.min(root.rounding, root.wrapper.width)
+            radiusY: root.rounding
+        }
+        PathLine {
+            relativeX: -(root.wrapper.width - root.roundingX * 2)
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: -root.roundingX
+            relativeY: root.rounding
+            radiusX: Math.min(root.rounding, root.wrapper.width)
+            radiusY: root.rounding
+            direction: PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: root.wrapper.height - root.rounding * 2
+        }
+        PathArc {
+            relativeX: root.roundingX
+            relativeY: root.rounding
+            radiusX: Math.min(root.rounding, root.wrapper.width)
+            radiusY: root.rounding
+            direction: PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: root.wrapper.width - root.roundingX * 2
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.roundingX
+            relativeY: root.rounding
+            radiusX: Math.min(root.rounding, root.wrapper.width)
+            radiusY: root.rounding
+        }
+    }
+}

modules/osd/Content.qml

@@ -0,0 +1,161 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property var uiState
+    required property Brightness.Monitor monitor
+
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.left: parent.left
+
+    implicitWidth: layout.implicitWidth + 30
+    implicitHeight: layout.implicitHeight + sunset.height + 40
+
+    RowLayout {
+        id: layout
+
+        anchors.top: parent.top
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 15
+        spacing: 10
+
+        // Speaker volume
+        CustomMouseArea {
+            implicitWidth: Config.osd.sliderWidth
+            implicitHeight: Config.osd.sliderLength
+
+            function onWheel(event: WheelEvent) {
+                if (event.angleDelta.y > 0)
+                    Audio.increaseVolume();
+                else if (event.angleDelta.y < 0)
+                    Audio.decreaseVolume();
+            }
+
+            acceptedButtons: Qt.RightButton
+            onClicked: Audio.sink.audio.muted = !Audio.muted
+
+            CustomFilledSlider {
+                anchors.fill: parent
+
+                color: Audio.muted ? Config.colors.error : Config.colors.volume
+                icon: Icons.getVolumeIcon(value, Audio.muted)
+                value: Audio.volume
+                onMoved: Audio.setVolume(value)
+
+                Behavior on color {
+                    CAnim {
+                        duration: Config.anim.durations.small
+                    }
+                }
+            }
+        }
+
+        // Microphone
+        CustomMouseArea {
+            implicitWidth: Config.osd.sliderWidth
+            implicitHeight: Config.osd.sliderLength
+
+            function onWheel(event: WheelEvent) {
+                if (event.angleDelta.y > 0)
+                    Audio.incrementSourceVolume();
+                else if (event.angleDelta.y < 0)
+                    Audio.decrementSourceVolume();
+            }
+
+            acceptedButtons: Qt.RightButton
+            onClicked: Audio.source.audio.muted = !Audio.sourceMuted
+
+            CustomFilledSlider {
+                anchors.fill: parent
+
+                color: Audio.sourceMuted ? Config.colors.error : Config.colors.mic
+                icon: Icons.getMicVolumeIcon(value, Audio.sourceMuted)
+                value: Audio.sourceVolume
+                onMoved: Audio.setSourceVolume(value)
+
+                Behavior on color {
+                    CAnim {
+                        duration: Config.anim.durations.small
+                    }
+                }
+            }
+        }
+
+        // Brightness
+        CustomMouseArea {
+            implicitWidth: Config.osd.sliderWidth
+            implicitHeight: Config.osd.sliderLength
+
+            function onWheel(event: WheelEvent) {
+                const monitor = root.monitor;
+                if (!monitor)
+                    return;
+                if (event.angleDelta.y > 0)
+                    monitor.setBrightness(monitor.brightness + 0.1);
+                else if (event.angleDelta.y < 0)
+                    monitor.setBrightness(monitor.brightness - 0.1);
+            }
+
+            CustomFilledSlider {
+                anchors.fill: parent
+
+                color: Config.colors.brightness
+                icon: Icons.getBrightnessIcon(value)
+                value: root.monitor?.brightness ?? 0
+                onMoved: root.monitor?.setBrightness(value)
+            }
+        }
+    }
+
+    CustomRect {
+        id: sunset
+
+        anchors.top: layout.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.topMargin: 10
+
+        width: layout.width
+        height: 40
+
+        color: Hyprsunset.active ? Config.colors.brightness : Config.colors.container
+        radius: 7
+
+        Behavior on color {
+            CAnim { duration: Config.anim.durations.small }
+        }
+
+        StateLayer {
+            anchors.fill: parent
+            radius: parent.radius
+            color: Config.colors.secondary
+
+            function onClicked() {
+                if (Hyprsunset.active)
+                    Hyprsunset.disable();
+                else
+                    Hyprsunset.enable();
+            }
+        }
+
+        MaterialIcon {
+            anchors.centerIn: parent
+
+            text: "dark_mode"
+            font.pointSize: Config.font.size.large
+            color: Hyprsunset.active ? Config.colors.primaryDark : Config.colors.secondary
+            fill: Hyprsunset.active ? 1 : 0
+
+            Behavior on color {
+                CAnim { duration: Config.anim.durations.small }
+            }
+        }
+    }
+}

modules/osd/Interactions.qml

@@ -0,0 +1,54 @@
+import qs.services
+import qs.config
+import Quickshell
+import QtQuick
+
+Scope {
+    id: root
+
+    required property PersistentProperties uiState
+    required property ShellScreen screen
+    required property bool hovered
+    required property bool suppressed
+    readonly property Brightness.Monitor monitor: Brightness.getMonitorForScreen(screen)
+
+    function show(): void {
+        if (!root.suppressed) {
+            root.uiState.osd = true;
+            timer.restart();
+        }
+    }
+
+    Connections {
+        target: Audio
+
+        function onMutedChanged(): void {
+            if (root.uiState.osdVolumeReact)
+                root.show();
+        }
+
+        function onVolumeChanged(): void {
+            if (root.uiState.osdVolumeReact)
+                root.show();
+        }
+    }
+
+    Connections {
+        target: root.monitor
+
+        function onBrightnessChanged(): void {
+            if (root.uiState.osdBrightnessReact)
+                root.show();
+        }
+    }
+
+    Timer {
+        id: timer
+
+        interval: Config.osd.hideDelay
+        onTriggered: {
+            if (!root.hovered)
+                root.uiState.osd = false;
+        }
+    }
+}

modules/osd/Wrapper.qml

@@ -0,0 +1,66 @@
+import qs.config
+import qs.custom
+import qs.services
+import Quickshell
+import QtQuick
+
+Item {
+    id: root
+
+    required property var uiState
+    required property ShellScreen screen
+
+    visible: width > 0
+    implicitWidth: 0
+    implicitHeight: content.implicitHeight
+
+    states: State {
+        name: "visible"
+        when: root.uiState.osd
+
+        PropertyChanges {
+            root.implicitWidth: content.implicitWidth
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "visible"
+
+            Anim {
+                target: root
+                property: "implicitWidth"
+                easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+            }
+        },
+        Transition {
+            from: "visible"
+            to: ""
+
+            Anim {
+                target: root
+                property: "implicitWidth"
+                easing.bezierCurve: Config.anim.curves.emphasized
+            }
+        }
+    ]
+
+    Background {
+        id: background
+        visible: false
+        wrapper: root
+    }
+
+    GlowEffect {
+        source: background
+        glowColor: Config.colors.osd
+    }
+
+    Content {
+        id: content
+
+        uiState: root.uiState
+        monitor: Brightness.getMonitorForScreen(root.screen)
+    }
+}

modules/session/Background.qml

@@ -0,0 +1,51 @@
+import qs.config
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+    id: root
+
+    required property Item wrapper
+    readonly property real rounding: Config.border.rounding
+    readonly property bool flatten: wrapper.height < rounding * 2
+    readonly property real roundingY: flatten ? wrapper.height / 2 : rounding
+
+    ShapePath {
+        startX: -root.rounding + 0.5
+        startY: -0.5
+        strokeWidth: -1
+        fillColor: Config.colors.bg
+
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: root.wrapper.height - root.roundingY * 2
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.roundingY
+            radiusX: root.rounding
+            radiusY: Math.min(root.rounding, root.wrapper.height)
+            direction: PathArc.Counterclockwise
+        }
+        PathLine {
+            relativeX: root.wrapper.width - root.rounding * 2
+            relativeY: 0
+        }
+        PathArc {
+            relativeX: root.rounding
+            relativeY: root.rounding
+            radiusX: root.rounding
+            radiusY: root.rounding
+        }
+        PathLine {
+            relativeX: 0
+            relativeY: -root.wrapper.height - root.rounding
+        }
+    }
+}

modules/session/Content.qml

@@ -0,0 +1,131 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import qs.services
+import qs.util
+import Quickshell
+import QtQuick
+
+Row {
+    id: root
+    required property PersistentProperties uiState
+
+    padding: 12
+    spacing: 12
+
+    SessionButton {
+        id: sleep
+
+        icon: "bedtime"
+        iconColor: Config.colors.violet
+        command: Config.session.sleep
+
+        KeyNavigation.right: lock
+
+        Component.onCompleted: forceActiveFocus()
+    }
+
+    SessionButton {
+        id: lock
+
+        icon: "lock"
+        iconColor: Config.colors.brown
+        command: Config.session.lock
+
+        KeyNavigation.left: sleep
+        KeyNavigation.right: logout
+    }
+
+    SessionButton {
+        id: logout
+
+        icon: "logout"
+        iconColor: Config.colors.cyan
+        command: Config.session.logout
+
+        KeyNavigation.left: lock
+        KeyNavigation.right: reboot
+    }
+
+    SessionButton {
+        id: reboot
+
+        icon: "cached"
+        iconColor: Config.colors.yellow
+        command: Config.session.reboot
+
+        KeyNavigation.left: logout
+        KeyNavigation.right: shutdown
+    }
+
+    SessionButton {
+        id: shutdown
+
+        icon: "power_settings_new"
+        iconColor: Config.colors.red
+        command: Config.session.shutdown
+
+        KeyNavigation.left: reboot
+    }
+
+    component SessionButton: CustomRect {
+        id: button
+
+        required property string icon
+        required property color iconColor
+        required property list<string> command
+
+        implicitWidth: Config.session.buttonSize
+        implicitHeight: Config.session.buttonSize
+
+        radius: 22
+        color: button.activeFocus ? Config.colors.containerAlt : Config.colors.container
+
+        Behavior on color {
+            CAnim {}
+        }
+
+        Keys.onEnterPressed: layer.onClicked()
+        Keys.onReturnPressed: layer.onClicked()
+        Keys.onPressed: event => {
+            if (event.modifiers & Qt.ControlModifier) {
+                if (event.key === Qt.Key_L && KeyNavigation.right) {
+                    KeyNavigation.right.focus = true;
+                    event.accepted = true;
+                } else if (event.key === Qt.Key_H && KeyNavigation.left) {
+                    KeyNavigation.left.focus = true;
+                    event.accepted = true;
+                }
+            } else if (event.key === Qt.Key_Tab && KeyNavigation.right) {
+                KeyNavigation.right.focus = true;
+                event.accepted = true;
+            } else if (event.key === Qt.Key_Backtab || (event.key === Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))) {
+                if (KeyNavigation.left) {
+                    KeyNavigation.left.focus = true;
+                    event.accepted = true;
+                }
+            }
+        }
+
+        StateLayer {
+            id: layer
+            anchors.fill: parent
+            radius: parent.radius
+
+            function onClicked(): void {
+                root.uiState.session = false;
+                Quickshell.execDetached(button.command);
+            }
+        }
+
+        MaterialIcon {
+            anchors.centerIn: parent
+
+            text: button.icon
+            color: button.iconColor
+            font.pointSize: Config.font.size.largest
+            font.weight: 500
+        }
+    }
+}

modules/session/Wrapper.qml

@@ -0,0 +1,80 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import Quickshell
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property var panels
+    readonly property real nonAnimHeight: content.implicitHeight
+
+    visible: height > 0
+    implicitWidth: content.implicitWidth
+    implicitHeight: 0
+
+    states: State {
+        name: "visible"
+        when: root.uiState.session
+
+        PropertyChanges {
+            root.implicitHeight: root.nonAnimHeight
+        }
+    }
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "visible"
+
+            Anim {
+                target: root
+                property: "implicitHeight"
+                easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+            }
+        },
+        Transition {
+            from: "visible"
+            to: ""
+
+            Anim {
+                target: root
+                property: "implicitHeight"
+                easing.bezierCurve: Config.anim.curves.expressiveDefaultSpatial
+            }
+        }
+    ]
+
+    Binding {
+        target: root.uiState
+        property: "blockScreen"
+        value: true
+        when: root.uiState.session
+    }
+
+    Background {
+        id: background
+        visible: false
+        wrapper: root
+    }
+
+    GlowEffect {
+        source: background
+        glowColor: Config.colors.power
+    }
+
+    Loader {
+        id: content
+
+        anchors.bottom: parent.bottom
+
+        Component.onCompleted: active = Qt.binding(() => root.uiState.session || root.visible)
+
+        sourceComponent: Content {
+            uiState: root.uiState
+        }
+    }
+}

modules/ui/Border.qml

@@ -0,0 +1,45 @@
+
+import QtQuick
+import QtQuick.Effects
+import Quickshell
+import qs.config
+import qs.custom
+
+Item {
+    id: root
+
+    anchors.fill: parent
+
+    CustomRect {
+        id: rect
+
+        anchors.fill: parent
+        color: Config.colors.bg
+        visible: false
+    }
+
+    Item {
+        id: mask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.margins: Config.border.thickness
+            anchors.topMargin: Config.bar.height
+            radius: Config.border.rounding
+        }
+    }
+
+    MultiEffect {
+        anchors.fill: parent
+        maskEnabled: true
+        maskInverted: true
+        maskSource: mask
+        source: rect
+        maskThresholdMin: 0.5
+        maskSpreadAtMin: 1
+    }
+}

modules/ui/Exclusion.qml

@@ -0,0 +1,36 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.custom
+import Quickshell
+import QtQuick
+
+Scope {
+    id: root
+
+    required property ShellScreen screen
+
+    ExclusionZone {
+        anchors.left: true
+    }
+
+    ExclusionZone {
+        anchors.top: true
+        exclusiveZone: Config.bar.height
+    }
+
+    ExclusionZone {
+        anchors.right: true
+    }
+
+    ExclusionZone {
+        anchors.bottom: true
+    }
+
+    component ExclusionZone: CustomWindow {
+        screen: root.screen
+        name: "border-exclusion"
+        exclusiveZone: Config.border.thickness
+        mask: Region {}
+    }
+}

modules/ui/Interactions.qml

@@ -0,0 +1,163 @@
+import qs.config
+import qs.custom
+import qs.services
+import qs.modules.bar.popouts as BarPopouts
+import qs.modules.osd as Osd
+import Quickshell
+import QtQuick
+
+CustomMouseArea {
+    id: root
+
+    required property ShellScreen screen
+    required property PersistentProperties uiState
+    required property Panels panels
+    required property Item bar
+
+    readonly property BarPopouts.Wrapper popouts: panels.popouts
+
+    property bool osdHovered
+    property bool osdShortcutActive
+    property bool dashboardShortcutActive
+
+    anchors.fill: parent
+    hoverEnabled: true
+
+    function withinPanelWidth(panel: Item, x: real): bool {
+        const panelX = panel.x;
+        return x >= panelX - Config.border.rounding && x <= panelX + panel.width + Config.border.rounding;
+    }
+
+    function withinPanelHeight(panel: Item, y: real): bool {
+        const panelY = panel.y;
+        return y >= panelY + Config.bar.height - Config.border.rounding
+            && y <= panelY + panel.height + Config.bar.height + Config.border.rounding;
+    }
+
+    function inBottomPanel(panel: Item, x: real, y: real): bool {
+        return y > root.height - Config.border.thickness - panel.height - Config.border.rounding && withinPanelWidth(panel, x);
+    }
+
+    function inLeftPanel(panel: Item, x: real, y: real): bool {
+        return x < Config.border.thickness + panel.x + panel.width && withinPanelHeight(panel, y);
+    }
+
+    function inRightPanel(panel: Item, x: real, y: real): bool {
+        return x > Config.border.thickness + panel.x && withinPanelHeight(panel, y);
+    }
+
+    // Handling Mouse Input
+
+    property point dragStart
+    onPressed: event => dragStart = Qt.point(event.x, event.y)
+
+    onPositionChanged: event => {
+        const x = event.x;
+        const y = event.y;
+
+        // Show bar popouts on hover
+        if (y < Config.bar.height && !popoutsSuppressed && !popouts.persistent) {
+            bar.checkPopout(x);
+        }
+
+        // Show osd on hover
+        const showOsd = inRightPanel(panels.osd, x, y);
+
+        // Always update visibility based on hover if not in shortcut mode
+        if (!osdShortcutActive) {
+            uiState.osd = showOsd && !osdSuppressed;
+            osdHovered = showOsd && !osdSuppressed;
+        } else if (showOsd) {
+            // If hovering over OSD area while in shortcut mode, transition to hover control
+            osdShortcutActive = false;
+            osdHovered = true;
+        }
+
+        // Show dashboard on hover
+        const showDashboard = !dashboardSuppressed && inLeftPanel(panels.dashboard, x, y);
+
+        // Always update visibility based on hover if not in shortcut mode
+        if (!dashboardShortcutActive) {
+            uiState.dashboard = showDashboard;
+        } else if (showDashboard) {
+            // If hovering over dashboard area while in shortcut mode, transition to hover control
+            dashboardShortcutActive = false;
+        }
+
+        // Show launcher on drag
+        if (pressed && inBottomPanel(panels.launcher, dragStart.x, dragStart.y) && withinPanelWidth(panels.launcher, x, y)) {
+            const dragY = y - dragStart.y;
+            if (dragY < -Config.launcher.dragThreshold && !launcherSuppressed)
+                uiState.launcher = true;
+            else if (dragY > Config.launcher.dragThreshold)
+                uiState.launcher = false;
+        }
+    }
+
+    Connections {
+        target: root.uiState
+
+        function onOsdChanged() {
+            if (root.uiState.osd) {
+                // OSD became visible, immediately check if this should be shortcut mode
+                const inOsdArea = root.inRightPanel(root.panels.osd, root.mouseX, root.mouseY);
+                if (!inOsdArea) {
+                    root.osdShortcutActive = true;
+                }
+            } else {
+                // OSD hidden, clear shortcut flag
+                root.osdShortcutActive = false;
+            }
+        }
+    }
+
+    Osd.Interactions {
+        uiState: root.uiState
+        screen: root.screen
+        hovered: root.osdHovered
+        suppressed: root.osdSuppressed
+    }
+
+    onContainsMouseChanged: {
+        if (!containsMouse) {
+            if (!popouts.persistent)
+                popouts.hasCurrent = false;
+
+            if(!osdShortcutActive) {
+                uiState.osd = false;
+                osdHovered = false;
+            }
+
+            if (!dashboardShortcutActive)
+                uiState.dashboard = false;
+        }
+    }
+
+    // Suppressing Panels
+
+    property bool popoutsSuppressed: uiState.dashboard || uiState.session
+    property bool dashboardSuppressed: uiState.launcher
+    property bool launcherSuppressed: uiState.dashboard
+    property bool osdSuppressed: popouts.hasCurrent
+
+    onPopoutsSuppressedChanged: {
+        if (popoutsSuppressed && popouts.hasCurrent) {
+            popouts.hasCurrent = false;
+        }
+    }
+    onDashboardSuppressed: {
+        if (dashboardSuppressed && uiState.dashboard) {
+            uiState.dashboard = false;
+        }
+    }
+    onLauncherSuppressedChanged: {
+        if (launcherSuppressed && uiState.launcher) {
+            uiState.launcher = false;
+        }
+    }
+    onOsdSuppressedChanged: {
+        if (osdSuppressed && uiState.osd) {
+            uiState.osd = false;
+        }
+    }
+}

modules/ui/Panels.qml

@@ -0,0 +1,86 @@
+import qs.config
+import qs.services
+import qs.modules.bar.popouts as BarPopouts
+import qs.modules.osd as Osd
+import qs.modules.notifications as Notifications
+import qs.modules.dashboard as Dashboard
+import qs.modules.launcher as Launcher
+import qs.modules.session as Session
+import Quickshell
+import QtQuick
+
+Item {
+    id: root
+
+    required property PersistentProperties uiState
+    required property ShellScreen screen
+    required property Item bar
+
+    readonly property alias popouts: popouts
+    readonly property alias osd: osd
+    readonly property alias notifications: notifications
+    readonly property alias dashboard: dashboard
+    readonly property alias launcher: launcher
+    readonly property alias session: session
+
+    anchors.fill: parent
+    anchors.margins: Config.border.thickness
+    anchors.topMargin: Config.bar.height
+
+    BarPopouts.Wrapper {
+        id: popouts
+
+        uiState: root.uiState
+        screen: root.screen
+    }
+
+    Osd.Wrapper {
+        id: osd
+
+        uiState: root.uiState
+        screen: root.screen
+
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+    }
+
+    Notifications.Wrapper {
+        id: notifications
+
+        uiState: root.uiState
+        panels: root
+
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+    }
+
+    Dashboard.Wrapper {
+        id: dashboard
+
+        uiState: root.uiState
+        popouts: popouts
+
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Launcher.Wrapper {
+        id: launcher
+
+        uiState: root.uiState
+        panels: root
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+    }
+
+    Session.Wrapper {
+        id: session
+
+        uiState: root.uiState
+        panels: root
+
+        anchors.top: parent.top
+        anchors.right: parent.right
+    }
+}

modules/ui/UI.qml

@@ -0,0 +1,122 @@
+import qs.config
+import qs.custom
+import qs.modules.bar
+import QtQuick
+import Quickshell
+import Quickshell.Wayland
+
+Variants {
+    model: Quickshell.screens
+
+    Scope {
+        id: scope
+        required property ShellScreen modelData
+
+        Exclusion {
+            screen: scope.modelData
+        }
+
+        CustomWindow {
+            id: window
+            name: "ui"
+            screen: scope.modelData
+
+            anchors.top: true
+            anchors.left: true
+            anchors.bottom: true
+            anchors.right: true
+
+            // UI State
+
+            UIState {
+                id: uiState
+                screen: scope.modelData
+            }
+
+            // Exclusion
+
+            exclusionMode: ExclusionMode.Ignore
+            mask: uiState.uiState.blockScreen ? exclusionBlock : exclusion
+            WlrLayershell.keyboardFocus: uiState.uiState.blockScreen ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
+
+            Region {
+                id: exclusionBlock
+                intersection: Intersection.Xor
+            }
+
+            Region {
+                id: exclusion
+                x: Config.border.thickness
+                y: Config.bar.height
+                width: window.width - 2 * Config.border.thickness
+                height: window.height - Config.bar.height - Config.border.thickness
+                intersection: Intersection.Xor
+
+                regions: regions.instances
+            }
+
+            Variants {
+                id: regions
+
+                model: panels.children
+
+                Region {
+                    required property Item modelData
+
+                    x: modelData.x + Config.border.thickness
+                    y: modelData.y + Config.bar.height
+                    width: modelData.width
+                    height: modelData.height
+                    intersection: Intersection.Subtract
+                }
+            }
+
+            // Visual Content
+
+            CustomRect {
+                anchors.fill: parent
+                color: Config.colors.overlay
+                opacity: uiState.uiState.blockScreen ? 0.5 : 0
+                visible: opacity > 0
+
+                Behavior on opacity {
+                    Anim {}
+                }
+            }
+
+            GlowEffect {
+                source: border
+                blurMax: 25
+                blurMultiplier: 0
+                glowColor: Config.colors.highlight
+            }
+
+            Interactions {
+                uiState: uiState.uiState
+                bar: bar
+                panels: panels
+                screen: scope.modelData
+
+                Panels {
+                    id: panels
+
+                    uiState: uiState.uiState
+                    screen: scope.modelData
+                    bar: bar
+                }
+            }
+
+            Border {
+                id: border
+            }
+
+            Bar {
+                id: bar
+
+                uiState: uiState.uiState
+                screen: scope.modelData
+                popouts: panels.popouts
+            }
+        }
+    }
+}

modules/ui/UIState.qml

@@ -0,0 +1,96 @@
+
+import qs.services
+import qs.util
+import QtQuick
+import Quickshell
+import Quickshell.Hyprland
+
+Scope {
+    id: root
+
+    required property ShellScreen screen
+    property alias uiState: uiState
+
+    PersistentProperties {
+        id: uiState
+        reloadableId: `uiState-${QsWindow.window.screen.name}`
+
+        // Open panels
+        property bool dashboard
+        property bool launcher
+        property bool osd
+        property bool session
+
+        property bool blockScreen
+
+        // Other state
+        property ListModel workspaces
+        property int dashboardTab: 0
+        property bool osdVolumeReact: true
+        property bool osdBrightnessReact: true
+
+        Component.onCompleted: {
+            workspaces = listModelComp.createObject(this);
+            States.load(root.screen, this);
+        }
+    }
+
+    // Workspace Handling
+
+    Component {
+        id: listModelComp
+        ListModel {}
+    }
+
+    // Initialize workspace list
+    Timer {
+        running: true
+        interval: Hypr.arbitraryRaceConditionDelay
+        onTriggered: {
+            // NOTE: Reinitialize workspace list on reload because persistence doesn't work
+            uiState.workspaces = listModelComp.createObject(uiState);
+            Hypr.workspaces.values.forEach(w => {
+                if (w.monitor === Hypr.monitorFor(root.screen))
+                    uiState.workspaces.append({"workspace": w});
+            })
+        }
+    }
+
+    // Remove deleted workspaces
+    Connections {
+        target: Hypr.workspaces
+        function onObjectRemovedPost(workspace, index) {
+            root.removeWorkspace(workspace);
+        }
+    }
+
+    // Update workspaces moved between monitors
+    // (also handles initialized workspaces)
+    Instantiator {
+        model: Hypr.workspaces
+        delegate: Connections {
+            required property HyprlandWorkspace modelData
+            target: modelData
+            function onMonitorChanged() {
+                if (modelData.monitor === Hypr.monitorFor(root.screen)) {
+                    uiState.workspaces.append({"workspace": modelData});
+                } else {
+                    root.removeWorkspace(modelData);
+                }
+            }
+        }
+    }
+
+    function removeWorkspace(workspace: HyprlandWorkspace): void {
+        let i = 0;
+        while (i < uiState.workspaces.count) {
+            const w = uiState.workspaces.get(i).workspace;
+            if (w === workspace) {
+                uiState.workspaces.remove(i);
+            } else {
+                i++;
+            }
+        }
+    }
+
+}