✨ ags(control-center/bluetooth): add more device management options

ags/style/_bar.scss

@@ -2,6 +2,7 @@
 @use "./mixins";
 @use "./colors";
 @use "./wal";
+@use "./functions";
 
 .bar-container {
   @include mixins.reset-props;
@@ -62,6 +63,10 @@
       background: colors.$bg-tertiary;
       margin: 3px 0;
 
+      &:not(.focus) {
+        @include mixins.hover-shadow2;
+      }
+
       &.focus {
         background: colors.$fg-primary;
         min-width: 31px;
@@ -93,6 +98,10 @@
     &.special-workspaces {
       & button {
         background: wal.$color4;
+
+        &:hover {
+          background: functions.toRGB(color.adjust(wal.$color4, $lightness: -6%));
+        }
       }
     }
   }

ags/style/_mixins.scss

@@ -19,3 +19,15 @@
     box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .1);
   }
 }
+
+@mixin hover-shadow2 {
+  &:hover {
+    box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .2);
+  }
+}
+
+@mixin hover-shadow3 {
+  &:hover {
+    box-shadow: inset 0 0 0 500px rgba(colors.$fg-primary, .3);
+  }
+}

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Gumi Street Bike.jpg";
+$wallpaper: "/home/joaov/wallpapers/Frieren At The Funeral.jpg";
 
 // Special
-$background: #0d101f;
-$foreground: #c2c3c7;
-$cursor: #c2c3c7;
+$background: #181515;
+$foreground: #c5c4c4;
+$cursor: #c5c4c4;
 
 // Colors
-$color0: #0d101f;
-$color1: #586C8C;
-$color2: #649D93;
-$color3: #60AFB7;
-$color4: #96ABA0;
-$color5: #A3CCA4;
-$color6: #CFD8B4;
-$color7: #90929b;
-$color8: #5c6071;
-$color9: #698abf;
-$color10: #79c5b9;
-$color11: #85c4ca;
-$color12: #9bd4b4;
-$color13: #b3deb3;
-$color14: #dde4c2;
-$color15: #c2c3c7;
+$color0: #181515;
+$color1: #CA778C;
+$color2: #AA8C81;
+$color3: #AA8CAA;
+$color4: #DCA8AF;
+$color5: #B4ADC5;
+$color6: #D2B5C5;
+$color7: #9b9090;
+$color8: #715c5c;
+$color9: #d49ba9;
+$color10: #cfa08f;
+$color11: #d195d1;
+$color12: #e3bdc3;
+$color13: #c0b4df;
+$color14: #e4bfd3;
+$color15: #c5c4c4;

ags/widget/control-center/pages/Bluetooth.ts

@@ -1,4 +1,4 @@
-import { bind } from "astal";
+import { bind, Variable } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import AstalBluetooth from "gi://AstalBluetooth";
 import { Page, PageButton } from "./Page";
@@ -97,6 +97,7 @@ export const BluetoothPage: (() => Page) = () => new Page({
                 Separator({
                     size: .2,
                     orientation: Gtk.Orientation.VERTICAL,
+                    cssColor: "gray",
                     alpha: .2
                 } as SeparatorProps),
                 new Widget.Button({
@@ -135,7 +136,11 @@ function DeviceWidget(dev: AstalBluetooth.Device): Gtk.Widget {
         endWidget: new Widget.Box({
             visible: bind(dev, "batteryPercentage").as((bat: number) => 
                 bat <= -1 ? false : true),
-            children: [
+            children: Variable.derive([
+                bind(dev, "connecting"),
+                bind(dev, "connected")
+            ], (connecting, connected) => {
+                if(connected) return [
                     new Widget.Label({
                         halign: Gtk.Align.END,
                         label: bind(dev, "batteryPercentage").as((bat: number) =>
@@ -145,8 +150,49 @@ function DeviceWidget(dev: AstalBluetooth.Device): Gtk.Widget {
                         icon: "battery-symbolic",
                         css: "font-size: 18px; margin-left: 6px;"
                     } as Widget.IconProps)
-            ]
-        } as Widget.BoxProps)
+                ];
+
+                if(connecting) {
+                    const spinner = new Gtk.Spinner({
+                        visible: true
+                    } as Gtk.Spinner.ConstructorProps);
+                    spinner.start();
+
+                    return spinner;
+                }
+
+                return [];
+            })()
+        } as Widget.BoxProps),
+        extraButtons: Variable.derive([
+            bind(dev, "connected"),
+            bind(dev, "paired"),
+            bind(dev, "trusted")
+        ], (connected, paired, trusted) => [
+            new Widget.Button({
+                className: "nf",
+                visible: paired && connected,
+                label: connected ? "󰅖" : "",
+                tooltipText: tr("disconnect"),
+                onClick: () => dev.disconnect_device()
+            } as Widget.ButtonProps),
+            new Widget.Button({
+                visible: !connected && paired,
+                className: "nf",
+                label: "󰢃",
+                tooltipText: tr("control_center.pages.bluetooth.unpair_device"),
+                onClick: () => AstalBluetooth.get_default().adapter?.remove_device(dev)
+            } as Widget.ButtonProps),
+            new Widget.Button({
+                className: "nf",
+                visible: paired,
+                label: trusted ? "󰫜" : "󰫚",
+                tooltipText: trusted ? 
+                    tr("control_center.pages.bluetooth.untrust_device")
+                : tr("control_center.pages.bluetooth.trust_device"),
+                onClick: () => trusted ? dev.set_trusted(false) : dev.set_trusted(true)
+            } as Widget.ButtonProps)
+        ])()
     });
 }
 

ags/widget/control-center/pages/Page.ts

@@ -95,13 +95,13 @@ export function PageButton(props: {
     className?: string | Binding<string>;
     icon?: string | Binding<string>;
     title: string | Binding<string>;
-    endWidget?: Gtk.Widget;
-    extraButtons?: Array<Widget.Button>;
+    endWidget?: Gtk.Widget | Binding<Gtk.Widget>;
+    extraButtons?: Array<Widget.Button> | Binding<Array<Gtk.Widget>>;
     onClick?: (self: Widget.Button) => void;
 }): Gtk.Widget {
     return new Widget.Box({
-        setup: (self) => {
-            self.add(new Widget.Button({
+        children: [
+            new Widget.Button({
                 onClick: props.onClick,
                 className: props.className,
                 hexpand: true,
@@ -109,8 +109,7 @@ export function PageButton(props: {
                     className: "page-button",
                     orientation: Gtk.Orientation.HORIZONTAL,
                     expand: true,
-                    setup: (box) => {
-                        box.set_children([
+                    children: [
                         new Widget.Icon({
                             className: "icon",
                             icon: props.icon,
@@ -123,18 +122,23 @@ export function PageButton(props: {
                             hexpand: true,
                             truncate: true,
                             label: props.title
-                            } as Widget.LabelProps)
-                        ]);
-
-                        props.endWidget && box.add(props.endWidget);
-                    }
+                        } as Widget.LabelProps),
+                        new Widget.Box({
+                            visible: (props.endWidget instanceof Binding) ? 
+                                props.endWidget.as(Boolean)
+                            : props.endWidget,
+                            child: props.endWidget
                         } as Widget.BoxProps)
-            } as Widget.ButtonProps));
-
-            props.extraButtons && self.add(new Widget.Box({
+                    ]
+                } as Widget.BoxProps)
+            } as Widget.ButtonProps),
+            new Widget.Box({
                 className: "button-row extra-buttons",
+                visible: (props.extraButtons instanceof Binding) ? 
+                    props.extraButtons.as(extra => extra.length > 0)
+                : (props.extraButtons ? props.extraButtons.length > 0 : false),
                 children: props.extraButtons
-            } as Widget.BoxProps));
-        }
+            } as Widget.BoxProps)
+        ]
     } as Widget.BoxProps);
 }