move qs config to work on mango and do general improvements

modules/bar/ActiveWindow.qml

@@ -0,0 +1,18 @@
+pragma ComponentBehavior: Bound
+import Quickshell.Widgets
+import Quickshell.Wayland
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    implicitWidth: windowText.implicitWidth +16
+    StyledText {
+	id: windowText
+	anchors.centerIn: parent
+	text: ToplevelManager.activeToplevel?.title ?? "Desktop"
+    }
+}

modules/bar/ActiveWindow.qml~

@@ -0,0 +1,31 @@
+pragma ComponentBehavior: Bound
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.widgets
+import qs.settings
+import QtQuick.Effects
+
+BarComponent {
+    id: root
+    implicitHeight: moduleHeight
+    implicitWidth: titleLayout.width + 32
+    color: Colors.moduleBg
+    radius: Config.rounding
+    RowLayout {
+        id: titleLayout
+        anchors.centerIn: root
+        WrapperRectangle {
+            Layout.maximumWidth: 400
+            color: 'transparent'
+            clip: true
+            StyledText {
+                property bool onWs: Hyprland.activeToplevel?.workspace == Hyprland.focusedWorkspace
+                text: onWs ? Hyprland.activeToplevel?.title ?? "Desktop" : "Desktop"
+                elide: Text.ElideRight
+            }
+        }
+    }
+}

modules/bar/Bar.qml

@@ -0,0 +1,48 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.modules.wallpaper
+import qs.settings
+import qs.widgets
+import qs
+
+
+Variants {
+    model: Quickshell.screens
+    delegate: PanelWindow {
+	required property ShellScreen modelData
+	id: root
+	screen: modelData
+	anchors {
+	    top: true
+	    left: true
+	    right: true
+	}
+	color: 'transparent'
+	implicitHeight: Config.barHeight
+	Rectangle {
+	    anchors.fill: parent
+	    color: Colors.barBg
+	    RowLayout {
+		anchors.leftMargin: 10
+		anchors.left: parent.left
+		anchors.verticalCenter: parent.verticalCenter
+		Ws { barScreen: root.modelData }
+		ActiveWindow {}
+	    }
+	    RowLayout {
+		anchors.centerIn: parent
+		Date {}
+	    }
+	    RowLayout {
+		anchors.rightMargin: 10
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+		Mpris {}
+		Bat {}
+		Pw {}
+		WallPicker {screenHeight: root.screen.height}
+	    }
+	}
+    }
+}

modules/bar/Bar.qml~

@@ -0,0 +1,13 @@
+import Quickshell
+import QtQuick
+
+Variants {
+    model: Quickshell.screens
+    delegate: PanelWindow {
+	anchors {
+	    top: true
+	    left: true
+	    right: true
+	}
+    }
+}

modules/bar/Bat.qml

@@ -0,0 +1,44 @@
+import Quickshell.Services.UPower
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    visible: UPower.displayDevice.isLaptopBattery
+    property double percent: UPower.displayDevice.percentage * 100
+    property bool hasBattery: UPower.displayDevice.isLaptopBattery
+    property bool charging: UPower.displayDevice.state === UPowerDeviceState.Charging
+    implicitHeight: Config.moduleHeight
+    implicitWidth: batLayout.implicitWidth + 16
+
+    function batteryIcon(percent) {
+        if (root.charging)
+            return "battery_android_frame_bolt";
+        if (percent <= 15)
+            return "battery_android_alert";
+        if (percent <= 30)
+            return "battery_android_frame_2";
+        if (percent <= 50)
+            return "battery_android_frame_3";
+        if (percent <= 70)
+            return "battery_android_frame_4";
+        if (percent <= 85)
+            return "battery_android_frame_5";
+        if (percent <= 100)
+            return "battery_android_frame_full";
+    }
+    RowLayout {
+        id: batLayout
+        anchors.centerIn: root
+        MaterialIcon {
+            text: root.batteryIcon(root.percent)
+        }
+        StyledText {
+            text: Math.floor(root.percent) + "%"
+        }
+    }
+}

modules/bar/Bat.qml~

@@ -0,0 +1,58 @@
+import Quickshell.Services.UPower
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    layer.enabled: true
+    layer.effect: MultiEffect {
+        id: dropShadow
+        source: root
+        shadowEnabled: true
+        shadowHorizontalOffset: 4
+        shadowVerticalOffset: 2
+        shadowOpacity: 0.5
+        shadowColor: "#020202"
+    }
+    clip: true
+    color: Colors.moduleBg
+    visible: UPower.displayDevice.isLaptopBattery
+    property double percent: UPower.displayDevice.percentage * 100
+    property bool hasBattery: UPower.displayDevice.isLaptopBattery
+    property bool charging: UPower.displayDevice.state === UPowerDeviceState.Charging
+    required property double moduleHeight
+    implicitHeight: moduleHeight
+    implicitWidth: batLayout.implicitWidth + 16
+    radius: Config.rounding
+
+    function batteryIcon(percent) {
+        if (root.charging)
+            return "battery_android_frame_bolt";
+        if (percent <= 15)
+            return "battery_android_alert";
+        if (percent <= 30)
+            return "battery_android_frame_2";
+        if (percent <= 50)
+            return "battery_android_frame_3";
+        if (percent <= 70)
+            return "battery_android_frame_4";
+        if (percent <= 85)
+            return "battery_android_frame_5";
+        if (percent <= 100)
+            return "battery_android_frame_full";
+    }
+    RowLayout {
+        id: batLayout
+        anchors.centerIn: root
+        MaterialIcon {
+            text: root.batteryIcon(root.percent)
+        }
+        StyledText {
+            text: Math.floor(root.percent) + "%"
+        }
+    }
+}

modules/bar/Date.qml

@@ -0,0 +1,19 @@
+import Quickshell
+import QtQuick
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    implicitWidth: clockText.width + 16
+    SystemClock {
+        id: clock
+        precision: SystemClock.Seconds
+    }
+    StyledText {
+	anchors.centerIn: parent
+        id: clockText
+        text: Qt.formatDateTime(clock.date, "d.M.yy - hh:mm:ss")
+    }
+}

modules/bar/Date.qml~

@@ -0,0 +1,26 @@
+pragma ComponentBehavior: Bound
+import Quickshell
+import QtQuick
+import QtQuick.Effects
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    clip: true
+    required property double moduleHeight
+    implicitHeight: moduleHeight
+    implicitWidth: clockText.implicitWidth + 32
+    color: Colors.moduleBg
+    radius: Config.rounding
+    SystemClock {
+        id: clock
+        precision: SystemClock.Seconds
+    }
+    StyledText {
+        id: clockText
+        anchors.centerIn: root
+        text: Qt.formatDateTime(clock.date, "d.M.yy - hh:mm:ss")
+    }
+}

modules/bar/Mpris.qml

@@ -0,0 +1,35 @@
+pragma ComponentBehavior: Bound
+import Quickshell.Services.Mpris
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    implicitHeight: Config.moduleHeight
+    implicitWidth: songLayout.implicitWidth + 16
+    property MprisPlayer spotify: {
+        for (const player of Mpris.players.values) {
+            if (player.identity === "Spotify")
+                return player;
+        }
+        return null;
+    }
+    visible: spotify !== null && spotify.playbackState === MprisPlaybackState.Playing
+    RowLayout {
+        id: songLayout
+        anchors.centerIn: root
+        MaterialIcon {
+            text: "music_note_2"
+        }
+        StyledText {
+            Layout.maximumWidth: 400
+            Layout.maximumHeight: Config.barHeight / 1.6
+            text: root.spotify?.trackTitle + " - " + root.spotify?.trackArtists
+            elide: Text.ElideRight
+        }
+    }
+}

modules/bar/Mpris.qml~

@@ -0,0 +1,49 @@
+pragma ComponentBehavior: Bound
+import Quickshell.Services.Mpris
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+import qs
+import qs.widgets
+import qs.settings
+
+Rectangle {
+    id: root
+    layer.enabled: true
+    layer.effect: MultiEffect {
+        id: dropShadow
+        source: root
+        shadowEnabled: true
+        shadowHorizontalOffset: 4
+        shadowVerticalOffset: 2
+        shadowOpacity: 0.5
+        shadowColor: "#020202"
+    }
+    required property double moduleHeight
+    implicitHeight: moduleHeight
+    implicitWidth: songLayout.implicitWidth + 32
+    property MprisPlayer spotify: {
+        for (const player of Mpris.players.values) {
+            if (player.identity === "Spotify")
+                return player;
+        }
+        return null;
+    }
+    visible: spotify !== null && spotify.playbackState === MprisPlaybackState.Playing
+    clip: true
+    color: Colors.moduleBg
+    radius: Config.rounding
+    RowLayout {
+        id: songLayout
+        anchors.centerIn: root
+        MaterialIcon {
+            text: "music_note_2"
+        }
+        StyledText {
+            Layout.maximumWidth: 400
+            Layout.maximumHeight: Config.barHeight / 1.6
+            text: root.spotify?.trackTitle + " - " + root.spotify?.trackArtists
+            elide: Text.ElideRight
+        }
+    }
+}

modules/bar/Pw.qml

@@ -0,0 +1,65 @@
+pragma ComponentBehavior: Bound
+import Quickshell.Services.Pipewire
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    color: clickHandler.containsMouse ? Colors.activeModuleBg : Colors.moduleBg
+    property PwNode defaultAudio: Pipewire.ready ? Pipewire.defaultAudioSink : null
+    property bool mute: Pipewire.ready ? defaultAudio?.audio.muted : null
+    implicitHeight: Config.moduleHeight
+    implicitWidth: pwLayout.implicitWidth + 16
+    function getVolumeIcon() {
+        let volume = Pipewire.ready ? root.defaultAudio.audio.volume : null;
+        if (root.mute) {
+            return "\ue04f";
+        }
+        if (volume <= 0.33) {
+            return "\ue04e";
+        }
+        if (volume <= 0.66) {
+            return "\ue04d";
+        }
+        if (volume >= 0.66) {
+            return "\ue050";
+        }
+    }
+
+    PwObjectTracker {
+        objects: [Pipewire.ready ? Pipewire.defaultAudioSink : null]
+    }
+
+    Process {
+        id: pavuLauncher
+        command: ["pavucontrol"]
+        running: false
+    }
+
+    RowLayout {
+        id: pwLayout
+        anchors.centerIn: root
+        spacing: 4
+        MaterialIcon {
+            text: root.getVolumeIcon()
+            opacity: root.defaultAudio?.audio.muted ? 0.6 : 1.0
+        }
+        StyledText {
+            text: Math.round(root.defaultAudio?.audio.volume * 100) + "%"
+            opacity: root.defaultAudio?.audio.muted ? 0.6 : 1.0
+        }
+    }
+    MouseArea {
+        id: clickHandler
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: root
+        onClicked: pavuLauncher.running = true
+    }
+}

modules/bar/Pw.qml~

@@ -0,0 +1,77 @@
+pragma ComponentBehavior: Bound
+import Quickshell.Services.Pipewire
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Effects
+import qs
+import qs.widgets
+import qs.settings
+
+BarComponent {
+    id: root
+    layer.enabled: true
+    layer.effect: MultiEffect {
+        id: dropShadow
+        source: root
+        shadowEnabled: true
+        shadowHorizontalOffset: 4
+        shadowVerticalOffset: 2
+        shadowOpacity: 0.5
+        shadowColor: "#020202"
+    }
+    color: clickHandler.containsMouse ? Colors.activeModuleBg : Colors.moduleBg
+    property PwNode defaultAudio: Pipewire.ready ? Pipewire.defaultAudioSink : null
+    property bool mute: Pipewire.ready ? defaultAudio?.audio.muted : null
+    radius: Config.rounding
+    required property double moduleHeight
+    implicitHeight: moduleHeight
+    implicitWidth: pwLayout.implicitWidth + 16
+    function getVolumeIcon() {
+        let volume = Pipewire.ready ? root.defaultAudio.audio.volume : null;
+        if (root.mute) {
+            return "\ue04f";
+        }
+        if (volume <= 0.33) {
+            return "\ue04e";
+        }
+        if (volume <= 0.66) {
+            return "\ue04d";
+        }
+        if (volume >= 0.66) {
+            return "\ue050";
+        }
+    }
+
+    PwObjectTracker {
+        objects: [Pipewire.ready ? Pipewire.defaultAudioSink : null]
+    }
+
+    Process {
+        id: pavuLauncher
+        command: ["pavucontrol"]
+        running: false
+    }
+
+    RowLayout {
+        id: pwLayout
+        anchors.centerIn: root
+        spacing: 4
+        MaterialIcon {
+            text: root.getVolumeIcon()
+            opacity: root.defaultAudio?.audio.muted ? 0.6 : 1.0
+        }
+        StyledText {
+            text: Math.round(root.defaultAudio?.audio.volume * 100) + "%"
+            opacity: root.defaultAudio?.audio.muted ? 0.6 : 1.0
+        }
+    }
+    MouseArea {
+        id: clickHandler
+        hoverEnabled: true
+        acceptedButtons: Qt.LeftButton
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: root
+        onClicked: pavuLauncher.running = true
+    }
+}

modules/bar/Ws.qml

@@ -0,0 +1,30 @@
+import Quickshell
+import Quickshell.WindowManager
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.widgets
+
+BarComponent {
+    id: root
+    required property ShellScreen barScreen
+    implicitWidth: wsLayout.implicitWidth + wsLayout.spacing * 2
+    RowLayout {
+	id: wsLayout
+	spacing: 15
+	anchors.centerIn: parent
+	Repeater {
+	    model: WindowManager.screenProjection(root.barScreen).windowsets
+	    delegate: Rectangle {
+		required property var modelData
+		visible: modelData.shouldDisplay
+		StyledText {
+		    id: wsText
+		    anchors.centerIn: parent
+		    text: parent.modelData.name
+		    color: parent.modelData.active ? Colors.base0D: Colors.base03
+		}
+	    }
+	}
+    }
+}

modules/bar/Ws.qml~

@@ -0,0 +1,27 @@
+import Quickshell
+import Quickshell.WindowManager
+import QtQuick
+import QtQuick.Layouts
+import qs
+import qs.widgets
+
+BarComponent {
+    id: root
+    required property ShellScreen barScreen
+    RowLayout {
+	spacing: 15
+	anchors.fill: parent
+	Repeater {
+	    model: WindowManager.screenProjection(root.barScreen).windowsets
+	    delegate: Rectangle {
+		required property var modelData
+		visible: modelData.shouldDisplay
+		StyledText {
+		    id: wsText
+		    text: parent.modelData.name
+		    color: parent.modelData.active ? Colors.base0D: Colors.base03
+		}
+	    }
+	}
+    }
+}

modules/wallpaper/WallPicker.qml

@@ -0,0 +1,110 @@
+pragma ComponentBehavior: Bound
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import QtQuick
+import Qt.labs.folderlistmodel 2.11
+import QtQuick.Effects
+
+import qs
+import qs.settings
+import qs.widgets
+
+BarComponent {
+    implicitHeight: Config.moduleHeight
+    implicitWidth: Config.moduleHeight
+    required property int screenHeight
+    id: main
+        MaterialIcon {
+        anchors.centerIn: main
+        text: "\ue1bc"
+        font.bold: true
+    }
+    MouseArea {
+        id: clickHandler
+        anchors.fill: main
+        acceptedButtons: Qt.LeftButton
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            wallPicker.visible = !wallPicker.visible;
+        }
+    }
+    WlrLayershell {
+        id: wallPicker
+        visible: false
+        exclusionMode: ExclusionMode.Ignore
+        keyboardFocus: WlrKeyboardFocus.OnDemand
+        implicitHeight: main.screenHeight / 8
+        color: 'transparent'
+        anchors {
+            bottom: true
+            left: true
+            right: true
+        }
+        margins {
+            bottom: 20
+            left: 20
+            right: 20
+        }
+        onVisibleChanged: {
+            if (wallPicker.visible)
+                container.forceActiveFocus();
+        }
+        Rectangle {
+            id: container
+            focus: true
+            Keys.onEscapePressed: {
+                wallPicker.visible = false;
+            }
+            anchors.fill: parent
+            color: Colors.base00
+            radius: Config.rounding
+            GridView {
+                id: wallpaperLayout
+                clip: true
+                snapMode: GridView.SnapOneRow
+                flow: GridView.FlowTopToBottom
+                cellHeight: container.height
+                cellWidth: container.width / 8
+                anchors.fill: parent
+                anchors.centerIn: parent
+                anchors.margins: 10
+                model: wallpaperList
+                delegate: ClippingRectangle {
+                    id: wallTile
+                    clip: true
+                    required property var modelData
+                    radius: Config.rounding / 1.5
+                    color: 'transparent'
+                    implicitWidth: wallpaperLayout.cellWidth - 20
+                    implicitHeight: wallpaperLayout.cellHeight - 20
+                    Image {
+                        id: wallpaper
+                        anchors.fill: parent
+                        source: wallTile.modelData.filePath
+                        sourceSize.width: 16 * 30
+                        sourceSize.height: 9 * 30
+                        asynchronous: true
+                        cache: true
+                    }
+                    MouseArea {
+                        id: wpClickHandler
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        acceptedButtons: Qt.LeftButton
+                        hoverEnabled: true
+                        onClicked: {
+                            Config.wallpaper = wallTile.modelData.filePath;
+                        }
+                    }
+                }
+            }
+            FolderListModel {
+                id: wallpaperList
+                folder: Config.wallDir
+                nameFilters: ["*.png"]
+            }
+        }
+    }
+}

modules/wallpaper/WallPicker.qml~

@@ -0,0 +1,130 @@
+pragma ComponentBehavior: Bound
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import QtQuick
+import Qt.labs.folderlistmodel 2.11
+import QtQuick.Effects
+
+import qs
+import qs.settings
+import qs.widgets
+
+Rectangle {
+    id: main
+
+    layer.enabled: true
+    layer.effect: MultiEffect {
+        id: dropShadow
+        source: main
+        shadowEnabled: true
+        shadowHorizontalOffset: 4
+        shadowVerticalOffset: 2
+        shadowOpacity: 0.5
+        shadowColor: "#020202"
+    }
+    required property real moduleHeight
+    required property int screenHeight
+    color: Colors.moduleBg
+    radius: Config.rounding
+    implicitWidth: moduleHeight
+    implicitHeight: moduleHeight
+    MaterialIcon {
+        anchors.centerIn: main
+        text: "\ue1bc"
+        font.bold: true
+    }
+    MouseArea {
+        id: clickHandler
+        anchors.fill: main
+        acceptedButtons: Qt.LeftButton
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            wallPicker.visible = !wallPicker.visible;
+        }
+    }
+    WlrLayershell {
+        id: wallPicker
+        visible: false
+        exclusionMode: ExclusionMode.Ignore
+        keyboardFocus: WlrKeyboardFocus.OnDemand
+        implicitHeight: main.screenHeight / 8
+        color: 'transparent'
+        anchors {
+            bottom: true
+            left: true
+            right: true
+        }
+        margins {
+            bottom: 20
+            left: 20
+            right: 20
+        }
+        HyprlandFocusGrab {
+            id: grabber
+            active: wallPicker.visible
+            windows: [wallPicker]
+            onCleared: wallPicker.visible = false
+        }
+        onVisibleChanged: {
+            if (wallPicker.visible)
+                container.forceActiveFocus();
+        }
+        Rectangle {
+            id: container
+            focus: true
+            Keys.onEscapePressed: {
+                wallPicker.visible = false;
+            }
+            anchors.fill: parent
+            color: Colors.base00
+            radius: Config.rounding
+            GridView {
+                id: wallpaperLayout
+                clip: true
+                snapMode: GridView.SnapOneRow
+                flow: GridView.FlowTopToBottom
+                cellHeight: container.height
+                cellWidth: container.width / 8
+                anchors.fill: parent
+                anchors.centerIn: parent
+                anchors.margins: 10
+                model: wallpaperList
+                delegate: ClippingRectangle {
+                    id: wallTile
+                    clip: true
+                    required property var modelData
+                    radius: Config.rounding / 1.5
+                    color: 'transparent'
+                    implicitWidth: wallpaperLayout.cellWidth - 20
+                    implicitHeight: wallpaperLayout.cellHeight - 20
+                    Image {
+                        id: wallpaper
+                        anchors.fill: parent
+                        source: wallTile.modelData.filePath
+                        sourceSize.width: 16 * 30
+                        sourceSize.height: 9 * 30
+                        asynchronous: true
+                        cache: true
+                    }
+                    MouseArea {
+                        id: wpClickHandler
+                        anchors.fill: parent
+                        cursorShape: Qt.PointingHandCursor
+                        acceptedButtons: Qt.LeftButton
+                        hoverEnabled: true
+                        onClicked: {
+                            Config.wallpaper = wallTile.modelData.filePath;
+                        }
+                    }
+                }
+            }
+            FolderListModel {
+                id: wallpaperList
+                folder: Config.wallDir
+                nameFilters: ["*.png"]
+            }
+        }
+    }
+}

modules/wallpaper/Wallpaper.qml

@@ -0,0 +1,27 @@
+import Quickshell.Wayland
+import Quickshell
+import QtQuick
+import qs.settings
+
+Variants {
+    model: Quickshell.screens
+    delegate: WlrLayershell {
+        id: root
+        layer: WlrLayer.Background
+        required property ShellScreen modelData
+        screen: modelData
+        exclusionMode: ExclusionMode.Ignore
+
+        anchors {
+            top: true
+            bottom: true
+            left: true
+            right: true
+        }
+        Image {
+            cache: false
+            anchors.fill: parent
+            source: Config.wallpaper
+        }
+    }
+}