💄 chore(pages): add .selected css class for highlighting page-buttons, improvements

ags/style/_control-center.scss

@@ -89,10 +89,6 @@
       & label.sub-header {
         margin-top: 6px;
       }
-      
-      & button.default {
-        background: colors.$bg-tertiary;
-      }
     }
   }
 
@@ -128,6 +124,10 @@
         padding: 6px;
         border-radius: 12px;
 
+        &.selected {
+          background: colors.$bg-tertiary;
+        }
+
         &:hover {
           background: rgba(colors.$fg-primary, .1);
         }
@@ -260,12 +260,6 @@
 
 .tile-pages #page {
   margin-top: 10px;
-
-  &.bluetooth {
-    button.connected {
-      background: colors.$bg-tertiary;
-    }
-  }
 }
 
 box.notif-history {

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Frieren Underwater.jpg";
+$wallpaper: "/home/joaov/wallpapers/Frieren Rain.jpg";
 
 // Special
-$background: #0a1d30;
+$background: #25301c;
-$foreground: #c1c6cb;
+$foreground: #c8cbc6;
-$cursor: #c1c6cb;
+$cursor: #c8cbc6;
 
 // Colors
-$color0: #0a1d30;
+$color0: #25301c;
-$color1: #0e7ea2;
+$color1: #6c8251;
-$color2: #3a829e;
+$color2: #7c9357;
-$color3: #1f96b0;
+$color3: #78846e;
-$color4: #717880;
+$color4: #948a88;
-$color5: #9c8a87;
+$color5: #899869;
-$color6: #758899;
+$color6: #98a27b;
-$color7: #93989d;
+$color7: #9ba197;
-$color8: #606b76;
+$color8: #707c66;
-$color9: #13A9D8;
+$color9: #91AE6D;
-$color10: #4EAED3;
+$color10: #A6C574;
-$color11: #2AC9EB;
+$color11: #A0B093;
-$color12: #97A0AB;
+$color12: #C6B9B6;
-$color13: #D1B8B5;
+$color13: #B7CB8D;
-$color14: #9CB6CD;
+$color14: #CBD9A4;
-$color15: #c1c6cb;
+$color15: #c8cbc6;

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

@@ -34,7 +34,7 @@ export const BluetoothPage = new Page({
             AstalBluetooth.get_default().adapter.start_discovery();
         }
     }],
-    actionClosed: () => AstalBluetooth.get_default().adapter.discovering && 
+    actionClosed: () => AstalBluetooth.get_default().adapter?.discovering && 
         AstalBluetooth.get_default().adapter.stop_discovery(),
     bottomButtons: [{
         title: tr("control_center.pages.more_settings"),
@@ -46,19 +46,27 @@ export const BluetoothPage = new Page({
     content: () => [
         <Gtk.Box class={"adapters"} visible={createBinding(AstalBluetooth.get_default(), "adapters")
               .as(adptrs => adptrs.length > 1)
-        } spacing={2}>
+        } spacing={2} orientation={Gtk.Orientation.VERTICAL}>
 
-            <Gtk.Label class={"sub-header"} label={tr("control_center.pages.bluetooth.adapters")} />
+            <Gtk.Label class={"sub-header"} label={tr("control_center.pages.bluetooth.adapters")} 
+              xalign={0} />
             <With value={createBinding(AstalBluetooth.get_default(), "adapters").as(adpts => 
                 adpts.length > 1)}>
 
                 {(hasMoreAdapters: boolean) => hasMoreAdapters &&
                     <Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={2}>
                         <For each={createBinding(AstalBluetooth.get_default(), "adapters")}> 
-                            {(adapter: AstalBluetooth.Adapter) => 
+                            {(adapter: AstalBluetooth.Adapter) => {
-                                <PageButton title={adapter.alias ?? "Adapter"} 
+                                const isSelected = createBinding(AstalBluetooth.get_default(), "adapter").as(a =>
-                                  icon={"bluetooth-active-symbolic"} />
+                                    a.address === adapter.address);
+
+                                return <PageButton class={isSelected.as(is => is ? "selected" : "")} 
+                                  title={adapter.alias ?? "Adapter"} icon={"bluetooth-active-symbolic"} 
+                                  endWidget={
+                                      <Gtk.Image iconName={"object-select-symbolic"} visible={isSelected} />
                                   }
+                                />;
+                            }}
                         </For>
                     </Gtk.Box>
                 }
@@ -95,7 +103,7 @@ export const BluetoothPage = new Page({
 
 function DeviceWidget({ device }: { device: AstalBluetooth.Device }): Gtk.Widget {
     return <PageButton class={createBinding(device, "connected").as(conn => 
-      conn ? "connected" : "")} title={
+      conn ? "selected" : "")} title={
           createBinding(device, "alias").as(alias => alias ?? "Unknown Device")} 
         icon={createBinding(device, "icon").as(ico => ico ?? "bluetooth-active-symbolic")}
         description={

ags/widget/control-center/pages/Microphone.tsx

@@ -17,7 +17,7 @@ export const PageMicrophone = new Page({
         <Gtk.Box orientation={Gtk.Orientation.VERTICAL} spacing={4}>
             <For each={createBinding(Wireplumber.getWireplumber().get_audio()!, "microphones")}>
                 {(source: AstalWp.Endpoint) => <PageButton class={
-                      createBinding(source, "isDefault").as(isDefault => isDefault ? "default" : "")
+                      createBinding(source, "isDefault").as(isDefault => isDefault ? "selected" : "")
                   } icon={createBinding(source, "icon").as(ico => lookupIcon(ico) ? 
                       ico : "audio-input-microphone-symbolic")} title={
                     createBinding(source, "description").as(desc => desc ?? "Microphone")

ags/widget/control-center/pages/Sound.tsx

@@ -21,7 +21,7 @@ export const PageSound = new Page({
             <For each={createBinding(Wireplumber.getWireplumber().audio!, "speakers")}>
                 {(sink: AstalWp.Endpoint) => 
                     <PageButton class={createBinding(sink, "isDefault").as(isDefault =>
-                          isDefault ? "default" : "")} 
+                          isDefault ? "selected" : "")} 
                       icon={createBinding(sink, "icon").as(ico =>
                           lookupIcon(ico) ? ico : "audio-card-symbolic")}
                       title={createBinding(sink, "description").as(desc =>