Finish dashboard

modules/menus/dashboard/controls/index.js

@@ -1,3 +1,8 @@
+const network = await Service.import("network");
+const bluetooth = await Service.import("bluetooth");
+const notifications = await Service.import("notifications");
+const audio = await Service.import("audio");
+
 const Controls = () => {
   return Widget.Box({
     class_name: "dashboard-card controls-container",
@@ -7,37 +12,76 @@ const Controls = () => {
     children: [
       Widget.Button({
         expand: true,
-        class_name: "dashboard-button wifi",
+        setup: (self) => {
+          self.hook(network, () => {
+            return (self.class_name = `dashboard-button wifi ${!network.wifi.enabled ? "disabled" : ""}`);
+          });
+        },
+        on_primary_click: () => network.toggleWifi(),
         child: Widget.Label({
-          label: "󰤨",
+          setup: (self) => {
+            self.hook(network, () => {
+              return (self.label = network.wifi.enabled ? "󰤨" : "󰤭");
+            });
+          },
         }),
       }),
       Widget.Button({
         expand: true,
-        class_name: "dashboard-button bluetooth",
+        class_name: bluetooth
+          .bind("enabled")
+          .as(
+            (btOn) => `dashboard-button bluetooth ${!btOn ? "disabled" : ""}`,
+          ),
+        on_primary_click: () => bluetooth.toggle(),
         child: Widget.Label({
-          label: "󰂯",
+          label: bluetooth.bind("enabled").as((btOn) => (btOn ? "󰂯" : "󰂲")),
         }),
       }),
       Widget.Button({
         expand: true,
-        class_name: "dashboard-button notifications",
+        class_name: notifications
+          .bind("dnd")
+          .as(
+            (dnd) => `dashboard-button notifications ${dnd ? "disabled" : ""}`,
+          ),
+        on_primary_click: () => (notifications.dnd = !notifications.dnd),
         child: Widget.Label({
-          label: "󰂚",
+          label: notifications.bind("dnd").as((dnd) => (dnd ? "󰂛" : "󰂚")),
         }),
       }),
       Widget.Button({
         expand: true,
-        class_name: "dashboard-button playback",
+        on_primary_click: () =>
+          (audio.speaker.is_muted = !audio.speaker.is_muted),
+        setup: (self) => {
+          self.hook(audio, () => {
+            return (self.class_name = `dashboard-button playback ${audio.speaker.is_muted ? "disabled" : ""}`);
+          });
+        },
         child: Widget.Label({
-          label: "󰕾",
+          setup: (self) => {
+            self.hook(audio, () => {
+              return (self.label = audio.speaker.is_muted ? "󰖁" : "󰕾");
+            });
+          },
         }),
       }),
       Widget.Button({
         expand: true,
-        class_name: "dashboard-button input",
+        on_primary_click: () =>
+          (audio.microphone.is_muted = !audio.microphone.is_muted),
+        setup: (self) => {
+          self.hook(audio, () => {
+            return (self.class_name = `dashboard-button input ${audio.microphone.is_muted ? "disabled" : ""}`);
+          });
+        },
         child: Widget.Label({
-          label: "󰍬",
+          setup: (self) => {
+            self.hook(audio, () => {
+              return (self.label = audio.microphone.is_muted ? "󰍭" : "󰍬");
+            });
+          },
         }),
       }),
     ],

modules/menus/dashboard/shortcuts/index.js

@@ -25,6 +25,46 @@ const Shortcuts = () => {
       })
       .catch((err) => err);
   };
+
+  const recordingDropdown = Widget.Menu({
+    class_name: "dropdown recording",
+    hpack: "fill",
+    hexpand: true,
+    setup: (self) => {
+      self.hook(hyprland, () => {
+        const displays = hyprland.monitors.map((mon) => {
+          return Widget.MenuItem({
+            label: `Display ${mon.name}`,
+            on_activate: () => {
+              App.closeWindow("dashboardmenu");
+              Utils.execAsync(
+                `${App.configDir}/services/screen_record.sh start ${mon.name}`,
+              ).catch((err) => console.error(err));
+            },
+          });
+        });
+
+        const apps = hyprland.clients.map((clt) => {
+          return Widget.MenuItem({
+            label: `${clt.class.charAt(0).toUpperCase() + clt.class.slice(1)} (Workspace ${clt.workspace.name})`,
+            on_activate: () => {
+              App.closeWindow("dashboardmenu");
+              Utils.execAsync(
+                `${App.configDir}/services/screen_record.sh start ${clt.focusHistoryID}`,
+              ).catch((err) => console.error(err));
+            },
+          });
+        });
+
+        return (self.children = [
+          ...displays,
+          // Disabled since window recording isn't available on wayland
+          // ...apps
+        ]);
+      });
+    },
+  });
+
   return Widget.Box({
     class_name: "shortcuts-container",
     hpack: "fill",
@@ -130,16 +170,16 @@ const Shortcuts = () => {
                   .as((v) => `dashboard-button record ${v ? "active" : ""}`),
                 setup: (self) => {
                   self.hook(isRecording, () => {
-                    self.on_primary_click = () => {
+                    self.toggleClassName("hover", true);
-                      App.closeWindow("dashboardmenu");
+                    self.on_primary_click = (_, event) => {
                       if (isRecording.value === true) {
+                        App.closeWindow("dashboardmenu");
                         return Utils.execAsync(
                           `${App.configDir}/services/screen_record.sh stop`,
                         ).catch((err) => console.error(err));
+                      } else {
+                        recordingDropdown.popup_at_pointer(event);
                       }
-                      return Utils.execAsync(
-                        `${App.configDir}/services/screen_record.sh start ${hyprland.active.monitor.name}`,
-                      ).catch((err) => console.error(err));
                     };
                   });
                 },

modules/menus/notifications/index.js

@@ -127,6 +127,7 @@ export default () => {
                                   Utils.execAsync(
                                     `${action.id.replace("scriptAction:-", "")}`,
                                   ).catch((err) => console.error(err));
+                                  notifs.CloseNotification(notif.id);
                                 } else {
                                   notif.invoke(action.id);
                                 }

modules/notifications/index.js

@@ -61,6 +61,7 @@ export default () => {
                           Utils.execAsync(
                             `${action.id.replace("scriptAction:-", "")}`,
                           ).catch((err) => console.error(err));
+                          notifs.CloseNotification(notif.id);
                         } else {
                           notif.invoke(action.id);
                         }

scss/bar/systray.scss

@@ -5,7 +5,7 @@
 }
 
 .systray-menu {
-  background: $mantle;
+  background: $crust;
 }
 .systray-menu label {
   font-weight: bold;

scss/menus/dashboard.scss

@@ -99,10 +99,10 @@
                 }
 
                 &.record.active {
-                    background: $red;
+                    background: $green;
 
                     &:hover {
-                        background: $green;
+                        background: $red;
                     }
                 }
 
@@ -116,7 +116,6 @@
     .controls-container {
         &.dashboard-card {
             margin-top: 0em;
-            // padding: 1em;
         }
 
         button {
@@ -254,3 +253,12 @@
         }
     }
 }
+
+.dropdown.recording {
+    color: red;
+    background-color: $crust;
+
+    menuitem {
+
+    }
+}

style.css

@@ -362,7 +362,7 @@ spinner:checked {
 }
 
 .systray-menu {
-  background: #181825;
+  background: #11111b;
 }
 
 .systray-menu label {
@@ -1395,10 +1395,10 @@ window#powermenu .powermenu.box {
   font-size: 1.5em;
 }
 .dashboard-content-items .shortcuts-container .container button.record.active {
-  background: #f38ba8;
+  background: #a6e3a1;
 }
 .dashboard-content-items .shortcuts-container .container button.record.active:hover {
-  background: #a6e3a1;
+  background: #f38ba8;
 }
 .dashboard-content-items .shortcuts-container .container button:hover {
   background: #f5c2e7;
@@ -1517,6 +1517,10 @@ window#powermenu .powermenu.box {
   color: #f5c2e7;
 }
 
+.dropdown.recording {
+  color: red;
+  background-color: #11111b;
+}
 .notification-card-container {
   margin-top: 3.5rem;
 }