sidebar: add bluetooth devices

.config/ags/modules/sideright/centermodules/bluetooth.js

@@ -0,0 +1,93 @@
+// This file is for the notification list on the sidebar
+// For the popup notifications, see onscreendisplay.js
+// The actual widget for each single notification is in ags/modules/.commonwidgets/notification.js
+import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import Bluetooth from 'resource:///com/github/Aylur/ags/service/bluetooth.js';
+import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
+const { Box, Button, Icon, Label, Scrollable, Slider, Stack } = Widget;
+const { execAsync, exec } = Utils;
+import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
+import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
+
+const USE_SYMBOLIC_ICONS = false;
+
+const BluetoothDevice = (device) => {
+    console.log(device);
+    return Box({
+        className: 'sidebar-bluetooth-device spacing-h-10',
+        children: [
+            Icon({
+                className: 'sidebar-bluetooth-appicon',
+                vpack: 'center',
+                tooltipText: device.name,
+                setup: (self) => self.hook(device, (self) => {
+                    self.icon = `${device.iconName}${USE_SYMBOLIC_ICONS ? '-symbolic' : ''}`;
+                }),
+            }),
+            Box({
+                hexpand: true,
+                vpack: 'center',
+                vertical: true,
+                children: [
+                    Label({
+                        xalign: 0,
+                        maxWidthChars: 10,
+                        truncate: 'end',
+                        label: device.name,
+                        className: 'txt-small',
+                        setup: (self) => self.hook(device, (self) => {
+                            self.label = device.name;
+                        }),
+                    }),
+                    Label({
+                        xalign: 0,
+                        maxWidthChars: 10,
+                        truncate: 'end',
+                        label: device.connected ? 'Connected' : (device.paired ? 'Paired' : ''),
+                        className: 'txt-subtext',
+                        setup: (self) => self.hook(device, (self) => {
+                            self.label = device.connected ? 'Connected' : (device.paired ? 'Paired' : '');
+                        }),
+                    }),
+                ]
+            }),
+            Button({
+                vpack: 'center',
+                className: 'sidebar-bluetooth-device-remove',
+                child: MaterialIcon('delete', 'norm'),
+                setup: setupCursorHover,
+                onClicked: () => execAsync(['bluetoothctl', 'remove', device.address]).catch(print),
+            })
+        ]
+    })
+}
+
+export default (props) => {
+    const deviceList = Scrollable({
+        vexpand: true,
+        child: Box({
+            attribute: {
+                'updateDevices': (self) => {
+                    const devices = Bluetooth.devices;
+                    self.children = devices.map(d => BluetoothDevice(d));
+                },
+            },
+            vertical: true,
+            className: 'spacing-v-5',
+            setup: (self) => self
+                .hook(Bluetooth, self.attribute.updateDevices, 'device-added')
+                .hook(Bluetooth, self.attribute.updateDevices, 'device-removed')
+            ,
+        })
+    })
+    return Box({
+        ...props,
+        className: 'spacing-v-5',
+        vertical: true,
+        children: [
+            deviceList,
+            // mainContent,
+            // status,
+        ]
+    });
+}

.config/ags/modules/sideright/sideright.js

@@ -17,6 +17,8 @@ import {
 } from "./quicktoggles.js";
 import ModuleNotificationList from "./centermodules/notificationlist.js";
 import ModuleVolumeMixer from "./centermodules/volumemixer.js";
+// import ModuleNetworks from "./centermodules/networks.js";
+import ModuleBluetooth from "./centermodules/bluetooth.js";
 import { ModuleCalendar } from "./calendar.js";
 import { getDistroIcon } from '../.miscutils/system.js';
 import { MaterialIcon } from '../.commonwidgets/materialicon.js';
@@ -34,6 +36,16 @@ const centerWidgets = [
         materialIcon: 'volume_up',
         contentWidget: ModuleVolumeMixer(),
     },
+    // {
+    //     name: 'Networks',
+    //     materialIcon: 'lan',
+    //     contentWidget: ModuleNetworks(),
+    // },
+    {
+        name: 'Bluetooth',
+        materialIcon: 'bluetooth',
+        contentWidget: ModuleBluetooth(),
+    },
 ];
 
 const timeRow = Box({

.config/ags/scss/_colors.scss

@@ -57,6 +57,8 @@ $layer1Hover: mix($layer1, $onLayer1, 85%);
 $layer1Active: mix($layer1, $onLayer1, 70%);
 $layer2Hover: mix($layer2, $onLayer2, 90%);
 $layer2Active: mix($layer2, $onLayer2, 80%);
+$layer3Hover: mix($layer3, $onLayer3, 90%);
+$layer3Active: mix($layer3, $onLayer3, 80%);
 // Elements
 $windowtitleOnLayer0Inactive: $onLayer0Inactive;
 $windowtitleOnLayer0: $onLayer0;

.config/ags/scss/_sidebars.scss

@@ -847,9 +847,6 @@ $waifu_image_overlay_transparency: 0.7;
 }
 
 .sidebar-volmixer-stream {
-    // @include normal-rounding;
-    // background-color: $layer2;
-    // color: $onLayer2;
     border-bottom: 0.068rem solid $outlineVariant;
     padding: 0.682rem;
     color: $onSurface;
@@ -885,3 +882,29 @@ $waifu_image_overlay_transparency: 0.7;
     color: $onSurface;
     margin: 0rem 0.682rem;
 }
+
+.sidebar-bluetooth-device {
+    padding: 0.682rem;
+    @include normal-rounding;
+    background-color: $layer2;
+    color: $onLayer2;
+}
+
+.sidebar-bluetooth-appicon {
+    font-size: 3.273rem;
+}
+
+.sidebar-bluetooth-device-remove {
+    @include full-rounding;
+    min-width: 2.045rem;
+    min-height: 2.045rem;
+    // background-color: $layer3;
+    padding: 0.341rem;
+}
+
+.sidebar-bluetooth-device-remove:hover,
+.sidebar-bluetooth-device-remove:focus {
+    @include full-rounding;
+    background-color: $layer2Hover;
+    padding: 0.341rem;
+}