dcontent: add bt pane

modules/bar/popouts/Bluetooth.qml

@@ -67,7 +67,7 @@ ColumnLayout {
             id: device
 
             required property BluetoothDevice modelData
-            readonly property bool loading: device.modelData.state === BluetoothDeviceState.Connecting || device.modelData.state === BluetoothDeviceState.Disconnecting
+            readonly property bool loading: modelData.state === BluetoothDeviceState.Connecting || modelData.state === BluetoothDeviceState.Disconnecting
 
             Layout.fillWidth: true
             Layout.rightMargin: Appearance.padding.small

modules/detachedcontent/Panes.qml

@@ -1,12 +1,12 @@
 pragma ComponentBehavior: Bound
 
+import "bluetooth"
 import qs.widgets
 import qs.services
 import qs.config
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
-import QtQuick.Effects
 
 ClippingRectangle {
     id: root
@@ -24,23 +24,21 @@ ClippingRectangle {
         y: -root.session.activeIndex * root.height
 
         Pane {
-            StyledText {
+            index: 0
-                anchors.centerIn: parent
+            sourceComponent: Item {
-                text: qsTr("Work in progress")
+                StyledText {
-                color: Colours.palette.m3outline
+                    anchors.centerIn: parent
-                font.pointSize: Appearance.font.size.extraLarge
+                    text: qsTr("Work in progress")
-                font.weight: 500
+                    color: Colours.palette.m3outline
+                    font.pointSize: Appearance.font.size.extraLarge
+                    font.weight: 500
+                }
             }
         }
 
         Pane {
-            StyledText {
+            index: 1
-                anchors.centerIn: parent
+            sourceComponent: BtPane {}
-                text: qsTr("Work in progress")
-                color: Colours.palette.m3outline
-                font.pointSize: Appearance.font.size.extraLarge
-                font.weight: 500
-            }
         }
 
         Behavior on y {
@@ -52,71 +50,31 @@ ClippingRectangle {
         }
     }
 
-    StyledRect {
+    InnerBorder {
-        anchors.fill: parent
+        leftThickness: 0
-        color: Colours.palette.m3surfaceContainer
-
-        layer.enabled: true
-        layer.effect: MultiEffect {
-            maskSource: mask
-            maskEnabled: true
-            maskInverted: true
-            maskThresholdMin: 0.5
-            maskSpreadAtMin: 1
-        }
     }
 
-    Item {
+    component Pane: Item {
-        id: mask
-
-        anchors.fill: parent
-        layer.enabled: true
-        visible: false
-
-        Rectangle {
-            anchors.fill: parent
-            anchors.margins: Appearance.padding.normal
-            anchors.leftMargin: 0
-            radius: Appearance.rounding.small
-        }
-    }
-
-    component Pane: Loader {
         id: pane
 
-        default property Item child
+        required property int index
+        property alias sourceComponent: loader.sourceComponent
 
-        asynchronous: true
+        implicitWidth: root.width
-        active: {
+        implicitHeight: root.height
-            const ly = -layout.y;
-            const ty = layout.children.indexOf(this) * root.height;
-            return ly + root.height > ty && ly < ty + root.height;
-        }
 
-        sourceComponent: Item {
+        Loader {
-            implicitWidth: root.width
+            id: loader
-            implicitHeight: root.height
 
-            Item {
+            anchors.fill: parent
-                anchors.fill: parent
+            asynchronous: true
-                anchors.margins: Appearance.padding.normal
+            active: {
-                anchors.leftMargin: 0
+                if (root.session.activeIndex === pane.index)
+                    return true;
 
-                children: [pane.child]
+                const ly = -layout.y;
-            }
+                const ty = pane.index * root.height;
-
+                return ly + root.height > ty && ly < ty + root.height;
-            StyledRect {
-                anchors.fill: parent
-                color: Colours.palette.m3surfaceContainer
-
-                layer.enabled: true
-                layer.effect: MultiEffect {
-                    maskSource: mask
-                    maskEnabled: true
-                    maskInverted: true
-                    maskThresholdMin: 0.5
-                    maskSpreadAtMin: 1
-                }
             }
         }
     }

modules/detachedcontent/bluetooth/BtPane.qml

@@ -0,0 +1,42 @@
+pragma ComponentBehavior: Bound
+
+import qs.widgets
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    anchors.fill: parent
+
+    spacing: 0
+
+    Item {
+        Layout.preferredWidth: Math.floor(parent.width / 3)
+        Layout.fillHeight: true
+
+        DeviceList {
+            anchors.margins: Appearance.padding.large + Appearance.padding.normal
+            anchors.leftMargin: Appearance.padding.large
+            anchors.rightMargin: Appearance.padding.large + Appearance.padding.normal / 2
+        }
+
+        InnerBorder {
+            leftThickness: 0
+            rightThickness: Appearance.padding.normal / 2
+        }
+    }
+
+    Item {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        Details {
+            anchors.margins: Appearance.padding.normal
+            anchors.leftMargin: Appearance.padding.normal / 2
+        }
+
+        InnerBorder {
+            leftThickness: Appearance.padding.normal / 2
+        }
+    }
+}

modules/detachedcontent/bluetooth/Details.qml

@@ -0,0 +1,8 @@
+import qs.widgets
+import qs.services
+import qs.config
+import Quickshell
+import Quickshell.Bluetooth
+import QtQuick.Layouts
+
+ColumnLayout {}

modules/detachedcontent/bluetooth/DeviceList.qml

@@ -0,0 +1,200 @@
+import qs.widgets
+import qs.services
+import qs.config
+import qs.utils
+import Quickshell
+import Quickshell.Bluetooth
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+ColumnLayout {
+    id: root
+
+    anchors.fill: parent
+    spacing: Appearance.spacing.small
+
+    StyledText {
+        text: qsTr("Settings")
+        font.pointSize: Appearance.font.size.large
+        font.weight: 500
+    }
+
+    StyledText {
+        text: qsTr("General bluetooth settings")
+        color: Colours.palette.m3outline
+    }
+
+    StyledRect {
+        Layout.fillWidth: true
+        implicitHeight: settingsText.implicitHeight + Appearance.padding.normal * 2
+
+        radius: Appearance.rounding.normal
+        color: Colours.palette.m3surfaceContainer
+
+        StateLayer {}
+
+        StyledText {
+            id: settingsText
+
+            anchors.centerIn: parent
+            text: qsTr("Bluetooth settings")
+        }
+    }
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.large
+        text: qsTr("Devices")
+        font.pointSize: Appearance.font.size.large
+        font.weight: 500
+    }
+
+    StyledText {
+        text: qsTr("All available bluetooth devices")
+        color: Colours.palette.m3outline
+    }
+
+    StyledListView {
+        model: ScriptModel {
+            values: [...Bluetooth.devices.values].sort((a, b) => (b.connected - a.connected) || (b.paired - a.paired))
+        }
+
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        clip: true
+
+        ScrollBar.vertical: StyledScrollBar {}
+
+        delegate: StyledRect {
+            id: device
+
+            required property BluetoothDevice modelData
+            readonly property bool loading: modelData.state === BluetoothDeviceState.Connecting || modelData.state === BluetoothDeviceState.Disconnecting
+            readonly property bool connected: modelData.state === BluetoothDeviceState.Connected
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            implicitHeight: deviceInner.implicitHeight + Appearance.padding.normal * 2
+
+            StateLayer {
+                id: stateLayer
+
+                function onClicked(): void {
+                }
+            }
+
+            RowLayout {
+                id: deviceInner
+
+                anchors.fill: parent
+                anchors.margins: Appearance.padding.normal
+                anchors.leftMargin: Appearance.padding.large
+                anchors.rightMargin: Appearance.padding.large
+
+                spacing: Appearance.spacing.normal
+
+                StyledRect {
+                    implicitWidth: implicitHeight
+                    implicitHeight: icon.implicitHeight + Appearance.padding.normal * 2
+
+                    radius: Appearance.rounding.full
+                    color: device.connected ? Colours.palette.m3primaryContainer : device.modelData.bonded ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainerHigh
+
+                    StyledRect {
+                        anchors.fill: parent
+                        radius: parent.radius
+                        color: Qt.alpha(device.connected ? Colours.palette.m3onPrimaryContainer : device.modelData.bonded ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface, stateLayer.pressed ? 0.1 : stateLayer.containsMouse ? 0.08 : 0)
+                    }
+
+                    MaterialIcon {
+                        id: icon
+
+                        anchors.centerIn: parent
+                        text: Icons.getBluetoothIcon(device.modelData.icon)
+                        color: device.connected ? Colours.palette.m3onPrimaryContainer : device.modelData.bonded ? Colours.palette.m3onSecondaryContainer : Colours.palette.m3onSurface
+                        font.pointSize: Appearance.font.size.large
+                        fill: device.connected ? 1 : 0
+
+                        Behavior on fill {
+                            Anim {}
+                        }
+                    }
+                }
+
+                ColumnLayout {
+                    Layout.fillWidth: true
+
+                    spacing: 0
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: device.modelData.name
+                        elide: Text.ElideRight
+                    }
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: device.modelData.address + (device.connected ? qsTr(" (Connected)") : device.modelData.bonded ? qsTr(" (Paired)") : "")
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                        elide: Text.ElideRight
+                    }
+                }
+
+                StyledRect {
+                    id: connectBtn
+
+                    implicitWidth: implicitHeight
+                    implicitHeight: connectIcon.implicitHeight + Appearance.padding.small * 2
+
+                    radius: Appearance.rounding.full
+                    color: device.connected ? Colours.palette.m3primaryContainer : "transparent"
+
+                    StyledBusyIndicator {
+                        anchors.centerIn: parent
+
+                        implicitWidth: implicitHeight
+                        implicitHeight: connectIcon.implicitHeight
+
+                        running: opacity > 0
+                        opacity: device.loading ? 1 : 0
+
+                        Behavior on opacity {
+                            Anim {}
+                        }
+                    }
+
+                    StateLayer {
+                        color: device.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
+                        disabled: device.loading
+
+                        function onClicked(): void {
+                            device.modelData.connected = !device.modelData.connected;
+                        }
+                    }
+
+                    MaterialIcon {
+                        id: connectIcon
+
+                        anchors.centerIn: parent
+                        animate: true
+                        text: device.modelData.connected ? "link_off" : "link"
+                        color: device.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
+
+                        opacity: device.loading ? 0 : 1
+
+                        Behavior on opacity {
+                            Anim {}
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    component Anim: NumberAnimation {
+        duration: Appearance.anim.durations.normal
+        easing.type: Easing.BezierSpline
+        easing.bezierCurve: Appearance.anim.curves.standard
+    }
+}

widgets/InnerBorder.qml

@@ -0,0 +1,43 @@
+pragma ComponentBehavior: Bound
+
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Effects
+
+StyledRect {
+    property alias innerRadius: maskInner.radius
+    property alias thickness: maskInner.anchors.margins
+    property alias leftThickness: maskInner.anchors.leftMargin
+    property alias topThickness: maskInner.anchors.topMargin
+    property alias rightThickness: maskInner.anchors.rightMargin
+    property alias bottomThickness: maskInner.anchors.bottomMargin
+
+    anchors.fill: parent
+    color: Colours.palette.m3surfaceContainer
+
+    layer.enabled: true
+    layer.effect: MultiEffect {
+        maskSource: mask
+        maskEnabled: true
+        maskInverted: true
+        maskThresholdMin: 0.5
+        maskSpreadAtMin: 1
+    }
+
+    Item {
+        id: mask
+
+        anchors.fill: parent
+        layer.enabled: true
+        visible: false
+
+        Rectangle {
+            id: maskInner
+
+            anchors.fill: parent
+            anchors.margins: Appearance.padding.normal
+            radius: Appearance.rounding.small
+        }
+    }
+}