Added Power menu and show only the workspaces allocated to monitor

modules/bar/bar.js

@@ -7,19 +7,18 @@ import { Volume } from "./volume/index.js";
 import { Network } from "./network/index.js";
 import { Bluetooth } from "./bluetooth/index.js";
 import { BatteryLabel } from "./battery/index.js";
-import { Clock } from "./clock/index.js";
-import { SysTray } from "./systray/index.js";
+import { Clock } from "./clock/index.js"; import { SysTray } from "./systray/index.js";
 import { Power } from "./power/index.js";
 
 import { BarItemBox } from "../shared/barItemBox.js";
 
 // layout of the bar
-const Left = () => {
+const Left = (monitor, wsMap) => {
   return Widget.Box({
     class_name: "box-left",
     hpack: "start",
     spacing: 5,
-    children: [Menu(), BarItemBox(Workspaces()), BarItemBox(ClientTitle())],
+    children: [Menu(), BarItemBox(Workspaces(monitor, wsMap, 10)), BarItemBox(ClientTitle())],
   });
 };
 
@@ -27,7 +26,10 @@ const Center = () => {
   return Widget.Box({
     class_name: "box-center",
     spacing: 5,
-    children: [BarItemBox(Media()), BarItemBox(Notification())],
+    children: [
+      BarItemBox(Media()),
+      // BarItemBox(Notification())
+    ],
   });
 };
 
@@ -48,7 +50,40 @@ const Right = () => {
   });
 };
 
-const Bar = (monitor = 0) => {
+const LeftAlt = (monitor, wsMap) => {
+  return Widget.Box({
+    class_name: "box-left",
+    hpack: "start",
+    spacing: 5,
+    children: [Menu(), BarItemBox(Workspaces(monitor, wsMap)), BarItemBox(ClientTitle())],
+  });
+};
+
+const CenterAlt = () => {
+  return Widget.Box({
+    class_name: "box-center",
+    spacing: 5,
+    children: [
+      BarItemBox(Media()),
+      // BarItemBox(Notification())
+    ],
+  });
+};
+
+const RightAlt = () => {
+  return Widget.Box({
+    class_name: "box-right",
+    hpack: "end",
+    spacing: 5,
+    children: [
+      BarItemBox(Volume()),
+      BarItemBox(Clock()),
+      BarItemBox(Power()),
+    ],
+  });
+};
+
+const Bar = (monitor = 0, wsMap) => {
   return Widget.Window({
     name: `bar-${monitor}`,
     class_name: "bar",
@@ -56,11 +91,26 @@ const Bar = (monitor = 0) => {
     anchor: ["top", "left", "right"],
     exclusivity: "exclusive",
     child: Widget.CenterBox({
-      start_widget: Left(),
+      start_widget: Left(monitor, wsMap),
       center_widget: Center(),
       end_widget: Right(),
     }),
   });
 };
 
-export { Bar };
+const BarAlt = (monitor = 0, wsMap) => {
+  return Widget.Window({
+    name: `bar-${monitor}`,
+    class_name: "bar",
+    monitor,
+    anchor: ["top", "left", "right"],
+    exclusivity: "exclusive",
+    child: Widget.CenterBox({
+      start_widget: LeftAlt(monitor, wsMap),
+      center_widget: CenterAlt(),
+      end_widget: RightAlt(),
+    }),
+  });
+};
+
+export { Bar, BarAlt };

modules/bar/media/index.js

@@ -2,6 +2,7 @@ const mpris = await Service.import("mpris");
 
 const Media = () => {
   const activePlayer = Variable(mpris.players[0]);
+
   mpris.connect("changed", (value) => {
     const statusOrder = {
       Playing: 1,
@@ -22,12 +23,31 @@ const Media = () => {
     }
   });
 
-  const label = Utils.watch("", mpris, "player-changed", () => {
+  const getIconForPlayer = (playerName) => {
+    const windowTitleMap = [
+      ["Mozilla Firefox", "󰈹"],
+      ["Microsoft Edge", "󰇩"],
+      ["(.*)Discord(.*)", ""],
+      ["Plex", "󰚺  Plex"],
+      ["(.*) Spotify Free", "󰓇"],
+      ["(.*)Spotify Premium", "󰓇"],
+      ["Spotify", "󰓇"],
+      ["(.*)", "󰝚"],
+    ];
+
+    const foundMatch = windowTitleMap.find((wt) =>
+      RegExp(wt[0]).test(playerName),
+    );
+
+    return foundMatch ? foundMatch[1] : "󰝚";
+  };
+
+  const label = Utils.watch("󰎇 Nothing is playing 󰎇", mpris, "player-changed", () => {
     if (activePlayer.value) {
-      const { track_artists, track_title } = activePlayer.value;
-      return `󰝚  ${track_title} - ${track_artists.join(", ")} 󰝚`;
+      const { track_title, identity } = activePlayer.value;
+      return `${getIconForPlayer(identity)}  ${track_title}`;
     } else {
-      return "Nothing is playing";
+      return "󰎇 Nothing is playing 󰎇";
     }
   });
 
@@ -39,7 +59,12 @@ const Media = () => {
         on_primary_click: () => mpris.getPlayer("")?.playPause(),
         on_scroll_up: () => mpris.getPlayer("")?.next(),
         on_scroll_down: () => mpris.getPlayer("")?.previous(),
-        child: Widget.Label({ label }),
+        child: Widget.Label({
+          label,
+          truncate: 'end',
+          wrap: true,
+          maxWidthChars: 30,
+        }),
       }),
     }),
     isVisible: false,

modules/bar/power/index.js

@@ -2,6 +2,8 @@ export const Power = () => {
   return {
     component: Widget.Box({
       child: Widget.Button({
+        class_name: "powermenu",
+        on_clicked: () => App.toggleWindow("powermenu"),
         child: Widget.Label({
           class_name: "bar-power_label",
           label: "⏻",

modules/bar/window_title/index.js

@@ -18,7 +18,8 @@ const filterTitle = (titleString) => {
     ["Spotify", "󰓇  Spotify"],
     ["  ~", " Terminal"],
     ["(.*) - Obsidian(.*)", "󱓧  Obsidian"],
-    ["(.*)", `󰣆  ${titleString.charAt(0).toUpperCase() + titleString.slice(1)}`],
+    ["(.+)", `󰣆  ${titleString.charAt(0).toUpperCase() + titleString.slice(1)}`],
+    ["(.*)", `󰣆  Desktop`],
   ];
 
   const foundMatch = windowTitleMap.find((wt) =>

modules/bar/workspaces/index.js

@@ -4,28 +4,52 @@ function range(length, start = 1) {
   return Array.from({ length }, (_, i) => i + start);
 }
 
-const Workspaces = (ws) => {
+const Workspaces = (monitor = -1, wsMap = {}, ws = 8) => {
+  const getWorkspacesForMonitor = (curWs) => {
+    if (
+      Object.keys(wsMap)
+        .map((mn) => Number(mn))
+        .includes(monitor)
+    ) {
+      return wsMap[monitor].includes(curWs);
+    }
+    return true;
+  };
   return {
     component: Widget.Box({
       class_name: "workspaces",
-      children: range(ws || 8).map((i) =>
-        Widget.Label({
-          attribute: i,
-          vpack: "center",
-          label: `${i}`,
-          setup: (self) =>
-            self.hook(hyprland, () => {
-              self.toggleClassName(
-                "active",
-                hyprland.active.workspace.id === i,
-              );
-              self.toggleClassName(
-                "occupied",
-                (hyprland.getWorkspace(i)?.windows || 0) > 0,
-              );
-            }),
+      children: range(ws || 8)
+        .filter((i) => getWorkspacesForMonitor(i))
+        .map((i) => {
+          return Widget.Label({
+            attribute: i,
+            vpack: "center",
+            label: `${i}`,
+            setup: (self) =>
+              self.hook(hyprland, () => {
+                // console.log(`currentMonitor: ${monitor}`);
+                console.log(i);
+                console.log(JSON.stringify(hyprland.getWorkspace(i), null, 2));
+                if (hyprland.getWorkspace(i)) {
+                  // console.log(`currentMonitor: ${monitor}`);
+                }
+                self.toggleClassName(
+                  "active",
+                  hyprland.active.workspace.id === i,
+                );
+                self.toggleClassName(
+                  "occupied",
+                  (hyprland.getWorkspace(i)?.windows || 0) > 0,
+                );
+
+                const isCurrentMonitor =
+                  monitor !== -1 &&
+                  hyprland.getWorkspace(i)?.monitorID !== monitor;
+
+                self.toggleClassName("hidden", isCurrentMonitor);
+              }),
+          });
         }),
-      ),
       setup: (box) => {
         if (ws === 0) {
           box.hook(hyprland.active.workspace, () =>

modules/menu/menu.js

@@ -1,36 +0,0 @@
-import Widget from "resource:///com/github/Aylur/ags/widget.js";
-
-/**
- * @param {Object} param
- * @param {string} param.title
- * @param {string} param.icon
- * @param {import('gi://Gtk').Gtk.Widget} param.content
- * @param {import('gi://Gtk').Gtk.Widget} [param.headerChild]
- * @return {import('types/widgets/box').default}
- */
-export default ({title, icon, content, headerChild = Widget.Box()}) => Widget.Box({
-  children: [
-    Widget.Box({
-      class_name: "qs-menu",
-      vertical: true,
-      children: [
-        Widget.Box({
-          class_name: "qs-title",
-          spacing: 5,
-          children: [
-            Widget.Icon(icon),
-            Widget.Label(title),
-            Widget.Box({hexpand: true}),
-            headerChild
-          ],
-        }),
-        Widget.Separator(),
-        Widget.Box({
-          class_name: "qs-content",
-          children: [content],
-        }),
-      ],
-    })
-  ],
-});
-

modules/menus/PopupWindow.js

@@ -0,0 +1,137 @@
+export const Padding = (name) => Widget.EventBox({
+    hexpand: true,
+    vexpand: true,
+    can_focus: false,
+    child: Widget.Box(),
+    setup: w => w.on("button-press-event", () => App.toggleWindow(name)),
+})
+
+const PopupRevealer = (
+    name,
+    child,
+    transition = "slide_down",
+) => Widget.Box(
+    { css: "padding: 1px;" },
+    Widget.Revealer({
+        transition,
+        child: Widget.Box({
+            class_name: "window-content",
+            child,
+        }),
+        transitionDuration: 200,
+        setup: self => self.hook(App, (_, wname, visible) => {
+            if (wname === name)
+                self.reveal_child = visible
+        }),
+    }),
+)
+
+const Layout = (name, child, transition) => ({
+    "center": () => Widget.CenterBox({},
+        Padding(name),
+        Widget.CenterBox(
+            { vertical: true },
+            Padding(name),
+            PopupRevealer(name, child, transition),
+            Padding(name),
+        ),
+        Padding(name),
+    ),
+    "top": () => Widget.CenterBox({},
+        Padding(name),
+        Widget.Box(
+            { vertical: true },
+            PopupRevealer(name, child, transition),
+            Padding(name),
+        ),
+        Padding(name),
+    ),
+    "top-right": () => Widget.Box({},
+        Padding(name),
+        Widget.Box(
+            {
+                hexpand: false,
+                vertical: true,
+            },
+            PopupRevealer(name, child, transition),
+            Padding(name),
+        ),
+    ),
+    "top-center": () => Widget.Box({},
+        Padding(name),
+        Widget.Box(
+            {
+                hexpand: false,
+                vertical: true,
+            },
+            PopupRevealer(name, child, transition),
+            Padding(name),
+        ),
+        Padding(name),
+    ),
+    "top-left": () => Widget.Box({},
+        Widget.Box(
+            {
+                hexpand: false,
+                vertical: true,
+            },
+            PopupRevealer(name, child, transition),
+            Padding(name),
+        ),
+        Padding(name),
+    ),
+    "bottom-left": () => Widget.Box({},
+        Widget.Box(
+            {
+                hexpand: false,
+                vertical: true,
+            },
+            Padding(name),
+            PopupRevealer(name, child, transition),
+        ),
+        Padding(name),
+    ),
+    "bottom-center": () => Widget.Box({},
+        Padding(name),
+        Widget.Box(
+            {
+                hexpand: false,
+                vertical: true,
+            },
+            Padding(name),
+            PopupRevealer(name, child, transition),
+        ),
+        Padding(name),
+    ),
+    "bottom-right": () => Widget.Box({},
+        Padding(name),
+        Widget.Box(
+            {
+                hexpand: false,
+                vertical: true,
+            },
+            Padding(name),
+            PopupRevealer(name, child, transition),
+        ),
+    ),
+})
+
+export default ({
+    name,
+    child,
+    layout = "center",
+    transition,
+    exclusivity = "ignore",
+    ...props
+}) => Widget.Window({
+    name,
+    class_names: [name, "popup-window"],
+    setup: w => w.keybind("Escape", () => App.closeWindow(name)),
+    visible: true,
+    keymode: "on-demand",
+    exclusivity,
+    layer: "top",
+    anchor: ["top", "bottom", "right", "left"],
+    child: Layout(name, child, transition)[layout](),
+    ...props,
+})

modules/menus/main.js

@@ -0,0 +1,4 @@
+import PowerMenu from "./power/index.js";
+import Verification from "./power/verification.js";
+
+export default [PowerMenu(), Verification()];

modules/menus/power/helpers/actions.js

@@ -0,0 +1,54 @@
+const powerOptions = {
+  sleep: "systemctl suspend",
+  reboot: "systemctl reboot",
+  logout: "pkill Hyprland",
+  shutdown: "shutdown now",
+};
+
+class PowerMenu extends Service {
+  static {
+    Service.register(
+      this,
+      {},
+      {
+        title: ["string"],
+        cmd: ["string"],
+      },
+    );
+  }
+
+  #title = "";
+  #cmd = "";
+
+  get title() {
+    return this.#title;
+  }
+
+  action(action) {
+    [this.#cmd, this.#title] = {
+      sleep: [powerOptions.sleep, "Sleep"],
+      reboot: [powerOptions.reboot, "Reboot"],
+      logout: [powerOptions.logout, "Log Out"],
+      shutdown: [powerOptions.shutdown, "Shutdown"],
+    }[action];
+
+    this.notify("cmd");
+    this.notify("title");
+    this.emit("changed");
+    App.closeWindow("powermenu");
+    App.openWindow("verification");
+  }
+
+  shutdown = () => {
+    this.action("shutdown");
+  };
+
+  exec = () => {
+    App.closeWindow("verification");
+    Utils.exec(this.#cmd);
+  };
+}
+
+const powermenu = new PowerMenu();
+Object.assign(globalThis, { powermenu });
+export default powermenu;

modules/menus/power/index.js

@@ -0,0 +1,37 @@
+import PopupWindow from "../PopupWindow.js";
+import powermenu from "./helpers/actions.js";
+import icons from "../../icons/index.js";
+
+const SysButton = (action, label) =>
+  Widget.Button({
+    class_name: `widget-button powermenu-button-${action}`,
+    on_clicked: () => powermenu.action(action),
+    child: Widget.Box({
+      vertical: true,
+      class_name: "system-button widget-button",
+      children: [
+        Widget.Icon({
+          class_name: `system-button_icon ${action}`,
+          icon: icons.powermenu[action],
+        }),
+        Widget.Label({
+          class_name: `system-button_label ${action}`,
+          label,
+        }),
+      ],
+    }),
+  });
+export default () =>
+  PopupWindow({
+    name: "powermenu",
+    transition: "crossfade",
+    child: Widget.Box({
+      class_name: "powermenu horizontal",
+      children: [
+        SysButton("shutdown", "SHUTDOWN"),
+        SysButton("logout", "LOG OUT"),
+        SysButton("reboot", "REBOOT"),
+        SysButton("sleep", "SLEEP"),
+      ],
+    }),
+  });

modules/menus/power/verification.js

@@ -0,0 +1,48 @@
+import PopupWindow from "../PopupWindow.js";
+import powermenu from "./helpers/actions.js";
+
+export default () =>
+  PopupWindow({
+    name: "verification",
+    transition: "crossfade",
+    child: Widget.Box({
+      class_name: "verification",
+      vertical: true,
+      children: [
+        Widget.Box({
+          class_name: "text-box",
+          vertical: true,
+          children: [
+            Widget.Label({
+              class_name: "title",
+              label: powermenu.bind("title"),
+            }),
+            Widget.Label({
+              class_name: "desc",
+              label: "Are you sure?",
+            }),
+          ],
+        }),
+        Widget.Box({
+          class_name: "buttons horizontal",
+          vexpand: true,
+          vpack: "end",
+          homogeneous: true,
+          children: [
+            Widget.Button({
+              child: Widget.Label("No"),
+              on_clicked: () => App.toggleWindow("verification"),
+              setup: (self) =>
+                self.hook(App, (_, name, visible) => {
+                  if (name === "verification" && visible) self.grab_focus();
+                }),
+            }),
+            Widget.Button({
+              child: Widget.Label("Yes"),
+              on_clicked: powermenu.exec,
+            }),
+          ],
+        }),
+      ],
+    }),
+  });

modules/volume/volume.js

@@ -1,261 +0,0 @@
-// const audio = await Service.import("audio");
-//
-// /** @param {'speaker' | 'microphone'} type */
-// const VolumeSlider = (type = "speaker") =>
-//   Widget.Slider({
-//     hexpand: true,
-//     drawValue: false,
-//     onChange: ({ value }) => (audio[type].volume = value),
-//     value: audio[type].bind("volume"),
-//   });
-//
-// const speakerSlider = VolumeSlider("speaker");
-// const micSlider = VolumeSlider("microphone");
-//
-// const VolumeCtl = () => {
-//   const volCtlLabel = Widget.Label({
-//     class_name: "volCtlLabel",
-//     label: "Volume",
-//   });
-//
-//   const volSliderBox = Widget.Box(
-//     { class_name: "volumeSliderBox" },
-//     speakerSlider,
-//   );
-//
-//   return Widget.Box(
-//     {
-//       class_name: "volumeCtlContainer",
-//       vertical: true,
-//       css: 'min-width: 100px'
-//     },
-//     volCtlLabel,
-//     volSliderBox,
-//   );
-// };
-//
-// export const Volume = () => {
-//   return Widget.Box({
-//     child: VolumeCtl(),
-//   });
-// };
-import icons from "../icons/index.js";
-import Widget from "resource:///com/github/Aylur/ags/widget.js";
-import {execAsync} from "resource:///com/github/Aylur/ags/utils.js";
-import Audio from "resource:///com/github/Aylur/ags/service/audio.js";
-import Hyprland from "resource:///com/github/Aylur/ags/service/hyprland.js";
-import Menu from "../menu/menu.js";
-
-/** @param {string} type */
-const sorm = (type) => type === "sink" ? "speaker" : "microphone";
-/** @param {string} type */
-const sorms = (type) => type === "sink" ? "speakers" : "microphones";
-/** @param {string | null} item
- *  @param {string} type */
-const iconSubstitute = (item, type) => {
-  const microphoneSubstitutes = {
-    "audio-headset-analog-usb": "audio-headset-symbolic",
-    "audio-headset-bluetooth": "audio-headphones-symbolic",
-    "audio-card-analog-usb": "audio-input-microphone-symbolic",
-    "audio-card-analog-pci": "audio-input-microphone-symbolic",
-    "audio-card-analog": "audio-input-microphone-symbolic",
-    "camera-web-analog-usb": "camera-web-symbolic"
-  };
-  const substitues = {
-    "audio-headset-bluetooth": "audio-headphones-symbolic",
-    "audio-card-analog-usb": "audio-speakers-symbolic",
-    "audio-card-analog-pci": "audio-speakers-symbolic",
-    "audio-card-analog": "audio-speakers-symbolic",
-    "audio-headset-analog-usb": "audio-headset-symbolic"
-  };
-
-  if (type === "sink") {
-    return substitues[item] || item;
-  }
-  return microphoneSubstitutes[item] || item;
-};
-
-/** @param {import('types/service/audio').Stream} stream */
-const streamIconSubstiture = stream => {
-  const subs = {
-    "spotify": "spotify",
-    "Firefox": "firefox",
-  };
-  return subs[stream.name] || stream.icon_name;
-};
-
-/** @param {string} type */
-const TypeIndicator = (type = "sink") => Widget.Button({
-  on_clicked: () => execAsync(`pactl set-${type}-mute @DEFAULT_${type.toUpperCase()}@ toggle`),
-  child: Widget.Icon()
-    .hook(Audio, icon => {
-      if (Audio[sorm(type)])
-        // @ts-ignore
-        icon.icon = iconSubstitute(Audio[sorm(type)].icon_name, type);
-    }, sorm(type) + "-changed")
-});
-
-/** @param {string} type */
-const PercentLabel = (type = "sink") => Widget.Label({
-  class_name: "audio-volume-label",
-})
-  .hook(Audio, label => {
-    if (Audio[sorm(type)])
-      // @ts-ignore
-      label.label = `${Math.floor(Audio[sorm(type)].volume * 100)}%`;
-  }, sorm(type) + "-changed");
-
-/** @param {string} type */
-const VolumeSlider = (type = "sink") => Widget.Slider({
-  hexpand: true,
-  draw_value: false,
-  // @ts-ignore
-  on_change: ({value}) => Audio[sorm(type)].volume = value,
-})
-  .hook(Audio, slider => {
-    if (!Audio[sorm(type)])
-      return;
-
-    // @ts-ignore
-    slider.sensitive = !Audio[sorm(type)].is_muted;
-    // @ts-ignore
-    slider.value = Audio[sorm(type)].volume;
-  }, sorm(type) + "-changed");
-
-/** @param {string} type */
-export const Volume = (type = "sink") => Widget.Box({
-  class_name: "audio-volume-box",
-  children: [
-    TypeIndicator(type),
-    VolumeSlider(type),
-    PercentLabel(type)
-  ],
-});
-
-/** @param {import('types/service/audio').Stream} stream */
-const MixerItem = stream => Widget.EventBox({
-  on_primary_click: () => stream.is_muted = !stream.is_muted,
-  on_scroll_up: () => stream.volume += 0.03,
-  on_scroll_down: () => stream.volume -= 0.03,
-  child: Widget.Box({
-    hexpand: true,
-    class_name: "mixer-item",
-    children: [
-      Widget.Icon({
-        icon: stream.bind("icon_name").transform(() => streamIconSubstiture(stream)),
-        tooltip_text: stream.bind("name").transform(name => name || "")
-      }),
-      Widget.Box({
-        vertical: true,
-        vpack: "center",
-        children: [
-          Widget.Box({
-            children: [
-              Widget.Label({
-                xalign: 0,
-                hexpand: true,
-                class_name: "mixer-item-title",
-                truncate: "end",
-                label: stream.bind("description").transform(desc => desc || ""),
-              }),
-              Widget.Label({
-                xalign: 0,
-                class_name: "mixer-item-volume",
-                label: stream.bind("volume").transform(volume => `${Math.floor(volume * 100)}%`)
-              }),
-            ]
-          }),
-          Widget.Slider({
-            hexpand: true,
-            class_name: "mixer-item-slider",
-            draw_value: false,
-            value: stream.bind("volume"),
-            on_change: ({value}) => {
-              stream.volume = value;
-            },
-          }),
-        ],
-      }),
-    ],
-  })
-});
-
-/**
- * @param {string} type
- * @returns {function(import('types/service/audio').Stream): import('types/widgets/button').default}
- */
-const SinkItem = (type) => stream => Widget.Button({
-  on_clicked: () => Audio[sorm(type)] = stream,
-  child: Widget.Box({
-    spacing: 5,
-    children: [
-      Widget.Icon({
-        icon: iconSubstitute(stream.icon_name, type),
-        tooltip_text: stream.icon_name,
-      }),
-      Widget.Label(stream.description?.split(" ").slice(0, 4).join(" ")),
-      Widget.Icon({
-        icon: icons.tick,
-        hexpand: true,
-        hpack: "end",
-      }).hook(Audio, icon => {
-        icon.visible = Audio[sorm(type)] === stream;
-      }),
-    ],
-  }),
-});
-
-/** @param {number} tab */
-const SettingsButton = (tab = 0) => Widget.Button({
-  on_clicked: () => Hyprland.sendMessage("dispatch exec pavucontrol -t " + tab),
-  child: Widget.Icon(icons.settings),
-});
-
-export const AppMixer = () => Menu({
-  title: "App Mixer",
-  icon: icons.audio.mixer,
-  content: Widget.Box({
-    class_name: "app-mixer",
-    vertical: true,
-    children: [
-      Widget.Box({vertical: true})
-        .hook(Audio, box => {
-          box.children = Audio.apps.map(MixerItem);
-        }, "notify::apps")
-    ],
-  }),
-  headerChild: SettingsButton(1),
-});
-
-export const SinkSelector = (type = "sink") => Menu({
-  title: type + " Selector",
-  icon: type === "sink" ? icons.audio.type.headset : icons.audio.mic.unmuted,
-  content: Widget.Box({
-    class_name: "sink-selector",
-    vertical: true,
-    children: [
-      Widget.Box({vertical: true})
-        .hook(Audio, box => {
-          box.children = Array.from(Audio[sorms(type)].values()).map(SinkItem(type));
-        }, "stream-added")
-        .hook(Audio, box => {
-          box.children = Array.from(Audio[sorms(type)].values()).map(SinkItem(type));
-        }, "stream-removed")
-    ],
-  }),
-  headerChild: SettingsButton(type === "sink" ? 3 : 4),
-});
-
-const AudioContent = () => Widget.Box({
-  vertical: true,
-  class_name: "qs-page",
-  children: [
-    Volume("sink"),
-    Volume("source"),
-    SinkSelector("sink"),
-    SinkSelector("source"),
-    AppMixer(),
-  ]
-});
-
-export default AudioContent;