Added workspaces, window titles, volume, bluetooth, systray and date/time modules to the panel

modules/bar/bar.js

@@ -0,0 +1,61 @@
+import { Workspaces } from "./workspaces/index.js";
+import { ClientTitle } from "./window_title/index.js";
+import { Media } from "./media/index.js";
+import { Notification } from "./notification/index.js";
+import { Volume } from "./volume/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 { BarItemBox } from "../shared/barItemBox.js";
+
+// layout of the bar
+const Left = () => {
+  return Widget.Box({
+    class_name: "box-left",
+    hpack: "start",
+    spacing: 5,
+    children: [BarItemBox(Workspaces()), BarItemBox(ClientTitle())],
+  });
+};
+
+const Center = () => {
+  return Widget.Box({
+    class_name: "box-center",
+    spacing: 5,
+    children: [BarItemBox(Media()), BarItemBox(Notification())],
+  });
+};
+
+const Right = () => {
+  return Widget.Box({
+    class_name: "box-right",
+    hpack: "end",
+    spacing: 5,
+    children: [
+      BarItemBox(Volume()),
+      BarItemBox(Bluetooth()),
+      BarItemBox(BatteryLabel()),
+      BarItemBox(SysTray()),
+      BarItemBox(Clock()),
+    ],
+  });
+};
+
+const Bar = (monitor = 0) => {
+  return Widget.Window({
+    name: `bar-${monitor}`,
+    class_name: "bar",
+    monitor,
+    anchor: ["top", "left", "right"],
+    exclusivity: "exclusive",
+    child: Widget.CenterBox({
+      start_widget: Left(),
+      center_widget: Center(),
+      end_widget: Right(),
+    }),
+  });
+};
+
+export { Bar };

modules/bar/battery/index.js

@@ -0,0 +1,32 @@
+const battery = await Service.import("battery");
+
+const BatteryLabel = () => {
+  const isVis = Variable(battery.available);
+
+  const value = battery.bind("percent").as((p) => (p > 0 ? p / 100 : 0));
+  const icon = battery
+    .bind("percent")
+    .as((p) => `battery-level-${Math.floor(p / 10) * 10}-symbolic`);
+
+  battery.connect("changed", ({ available }) => {
+    isVis.value = available;
+  });
+
+  return {
+    component: Widget.Box({
+      class_name: "battery",
+      visible: battery.bind("available"),
+      children: [
+        Widget.Icon({ icon }),
+        Widget.LevelBar({
+          widthRequest: 20,
+          vpack: "center",
+          value,
+        }),
+      ],
+    }),
+    isVis,
+  };
+};
+
+export { BatteryLabel };

modules/bar/bluetooth/index.js

@@ -0,0 +1,24 @@
+const bluetooth = await Service.import('bluetooth')
+
+const Bluetooth = () => {
+  const btIcon = Widget.Label({
+    label: bluetooth.bind("enabled").as((v) => v ? "󰂯 " : "󰂲 "),
+    class_name: "bar-bt_icon",
+  });
+
+  const btText = Widget.Label({
+    label: bluetooth.bind("enabled").as((v) => v ? "On" : "Off"),
+    class_name: "bar-bt_label",
+  });
+
+  return {
+    component: Widget.Box({
+      class_name: "volume",
+      children: [btIcon, btText],
+    }),
+    isVisible: true,
+  };
+
+}
+
+export { Bluetooth }

modules/bar/clock/index.js

@@ -0,0 +1,15 @@
+const date = Variable("", {
+  poll: [1000, 'date "+󰃭 %a %b%e  %I:%M:%S %p"'],
+});
+
+const Clock = () => {
+  return {
+    component: Widget.Label({
+      class_name: "clock",
+      label: date.bind(),
+    }),
+    isVisible: true,
+  };
+};
+
+export { Clock };

modules/bar/media/index.js

@@ -0,0 +1,25 @@
+const mpris = await Service.import("mpris");
+
+const Media = () => {
+  const label = Utils.watch("", mpris, "player-changed", () => {
+    if (mpris.players[0]) {
+      const { track_artists, track_title } = mpris.players[0];
+      return `${track_artists.join(", ")} - ${track_title}`;
+    } else {
+      return "Nothing is playing";
+    }
+  });
+
+  return {
+    component: Widget.Button({
+      class_name: "media",
+      on_primary_click: () => mpris.getPlayer("")?.playPause(),
+      on_scroll_up: () => mpris.getPlayer("")?.next(),
+      on_scroll_down: () => mpris.getPlayer("")?.previous(),
+      child: Widget.Label({ label }),
+    }),
+    isVisible: false,
+  };
+};
+
+export { Media };

modules/bar/notification/index.js

@@ -0,0 +1,24 @@
+const notifications = await Service.import("notifications");
+
+// we don't need dunst or any other notification daemon
+// because the Notifications module is a notification daemon itself
+const Notification = () => {
+  const popups = notifications.bind("popups");
+  return {
+    component: Widget.Box({
+      class_name: "notification",
+      visible: popups.as((p) => p.length > 0),
+      children: [
+        Widget.Icon({
+          icon: "preferences-system-notifications-symbolic",
+        }),
+        Widget.Label({
+          label: popups.as((p) => p[0]?.summary || ""),
+        }),
+      ],
+    }),
+    isVisible: false,
+  };
+};
+
+export { Notification };

modules/bar/systray/index.js

@@ -0,0 +1,36 @@
+const systemtray = await Service.import("systemtray");
+
+const SysTray = () => {
+  const isVis = Variable(false);
+
+  const items = systemtray.bind("items").as((items) => {
+    isVis.value = items.length > 0;
+    return items.map((item) => {
+      if (item.menu !== undefined) {
+        item.menu["class_name"] = "systray-menu";
+      }
+
+      return Widget.Button({
+        cursor: "pointer",
+        child: Widget.Icon({
+          icon: item.bind("icon"),
+          size: 18,
+        }),
+        on_primary_click: (_, event) => item.activate(event),
+        on_secondary_click: (_, event) => item.openMenu(event),
+        tooltip_markup: item.bind("tooltip_markup"),
+      });
+    });
+  });
+
+  return {
+    component: Widget.Box({
+      class_name: "systray",
+      children: items,
+    }),
+    isVisible: true,
+    isVis,
+  };
+};
+
+export { SysTray };

modules/bar/volume/index.js

@@ -0,0 +1,41 @@
+const audio = await Service.import("audio");
+
+const Volume = () => {
+  const icons = {
+    101: "󰕾",
+    66: "󰕾",
+    34: "󰖀",
+    1: "󰕿",
+    0: "󰝟",
+  };
+
+  const getIcon = () => {
+    const icon = audio.speaker.is_muted
+      ? 0
+      : [101, 66, 34, 1, 0].find(
+          (threshold) => threshold <= audio.speaker.volume * 100,
+        );
+
+    return icons[icon];
+  };
+
+  const volIcn = Widget.Label({
+    label: audio.speaker.bind("volume").as(() => getIcon()),
+    class_name: "bar-volume_icon",
+  });
+
+  const volPct = Widget.Label({
+    label: audio.speaker.bind("volume").as((v) => ` ${Math.floor(v * 100)}%`),
+    class_name: "bar-volume_percentage",
+  });
+
+  return {
+    component: Widget.Box({
+      class_name: "volume",
+      children: [volIcn, volPct],
+    }),
+    isVisible: true,
+  };
+};
+
+export { Volume };

modules/bar/window_title/index.js

@@ -0,0 +1,39 @@
+const hyprland = await Service.import("hyprland");
+
+const filterTitle = (titleString) => {
+  const windowTitleMap = [
+    ["(.*) - NVIM", "  NeoVim"],
+    ["(.*) - nvim", "  NeoVim"],
+    ["(.*) - VIM", "  NeoVim"],
+    ["(.*)vim (.*)", "  NeoVim"],
+    ["(.*) — Mozilla Firefox", "󰈹  Firefox"],
+    ["(.*) - Microsoft(.*)Edge", "󰇩  Edge"],
+    ["(.*) - Discord", "  Discord"],
+    ["(.*) — Dolphin", "  Dolphin"],
+    ["Plex", "󰚺  Plex"],
+    ["(.*) Steam", "  Steam"],
+    ["  ", "󰇄  Desktop"],
+    ["(.*) Spotify Free", "󰓇  Spotify"],
+    ["(.*)Spotify Premium", "󰓇  Spotify"],
+    ["  ~", " Terminal"],
+    ["(.*) - Obsidian(.*)", "󱓧  Obsidian"],
+  ];
+
+  const foundMatch = windowTitleMap.find((wt) =>
+    RegExp(wt[0]).test(titleString),
+  );
+
+  return foundMatch ? foundMatch[1] : titleString;
+};
+
+const ClientTitle = () => {
+  return {
+    component: Widget.Label({
+      class_name: "window_title",
+      label: hyprland.active.client.bind("title").as((v) => filterTitle(v)),
+    }),
+    isVisible: true,
+  };
+};
+
+export { ClientTitle };

modules/bar/workspaces/index.js

@@ -0,0 +1,44 @@
+const hyprland = await Service.import("hyprland");
+
+function range(length, start = 1) {
+  return Array.from({ length }, (_, i) => i + start);
+}
+
+const Workspaces = (ws) => {
+  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,
+              );
+            }),
+        }),
+      ),
+      setup: (box) => {
+        if (ws === 0) {
+          box.hook(hyprland.active.workspace, () =>
+            box.children.map((btn) => {
+              btn.visible = hyprland.workspaces.some(
+                (ws) => ws.id === btn.attribute,
+              );
+            }),
+          );
+        }
+      },
+    }),
+    isVisible: true,
+  };
+};
+export { Workspaces };

modules/icons/index.js

@@ -0,0 +1,174 @@
+export default {
+  settings: "emblem-system-symbolic",
+  tick: "object-select-symbolic",
+  audio: {
+    mic: {
+      muted: "microphone-sensitivity-muted-symbolic",
+      unmuted: "audio-input-microphone-symbolic",
+      low: "microphone-sensitivity-low-symbolic",
+      medium: "microphone-sensitivity-medium-symbolic",
+      high: "microphone-sensitivity-high-symbolic",
+    },
+    volume: {
+      muted: "audio-volume-muted-symbolic",
+      low: "audio-volume-low-symbolic",
+      medium: "audio-volume-medium-symbolic",
+      high: "audio-volume-high-symbolic",
+      overamplified: "audio-volume-overamplified-symbolic",
+    },
+    type: {
+      headset: "audio-headphones-symbolic",
+      speaker: "audio-speakers-symbolic",
+      card: "audio-card-symbolic",
+    },
+    mixer: "view-list-symbolic",
+  },
+  apps: {
+    apps: "view-app-grid-symbolic",
+    search: "folder-saved-search-symbolic",
+  },
+  launcher: {
+    search: "system-search-symbolic",
+    utility: "applications-utilities-symbolic",
+    system: "emblem-system-symbolic",
+    education: "applications-science-symbolic",
+    development: "applications-engineering-symbolic",
+    network: "network-wired-symbolic",
+    office: "x-office-document-symbolic",
+    game: "applications-games-symbolic",
+    multimedia: "applications-multimedia-symbolic",
+    hyprland: "hyprland-symbolic",
+    firefox: "firefox-symbolic"
+  },
+  quicksettings: {
+    notifications: "user-available-symbolic",
+    wifi: "network-wireless-symbolic",
+    bluetooth: "bluetooth-active-symbolic",
+    audio: "audio-volume-high-symbolic",
+    mpris: "audio-x-generic-symbolic",
+    chatgpt: "chatgpt-symbolic"
+  },
+  bluetooth: {
+    enabled: "bluetooth-active-symbolic",
+    disabled: "bluetooth-disabled-symbolic",
+  },
+  brightness: {
+    indicator: "display-brightness-symbolic",
+    keyboard: "keyboard-brightness-symbolic",
+    screen: ["󰛩", "󱩎", "󱩏", "󱩐", "󱩑", "󱩒", "󱩓", "󱩔", "󱩕", "󱩖", "󰛨"],
+  },
+  powermenu: {
+    sleep: "weather-clear-night-symbolic",
+    reboot: "system-reboot-symbolic",
+    logout: "system-log-out-symbolic",
+    shutdown: "system-shutdown-symbolic",
+    lock: "system-lock-screen-symbolic",
+    close: "window-close-symbolic"
+  },
+  recorder: {
+    recording: "media-record-symbolic",
+  },
+  notifications: {
+    noisy: "user-available-symbolic",
+    silent: "notifications-disabled-symbolic",
+    critical: "messagebox_critical-symbolic",
+    chat: "user-available-symbolic",
+    close: "window-close-symbolic"
+  },
+  header: {
+    refresh: "view-refresh-symbolic",
+    settings: "emblem-system-symbolic",
+    power: "system-shutdown-symbolic",
+  },
+  trash: {
+    full: "user-trash-full-symbolic",
+    empty: "user-trash-symbolic",
+  },
+  mpris: {
+    fallback: "audio-x-generic-symbolic",
+    shuffle: {
+      enabled: "media-playlist-shuffle-symbolic",
+      disabled: "media-playlist-no-shuffle-symbolic",
+    },
+    loop: {
+      none: "media-playlist-no-repeat-symbolic",
+      track: "media-playlist-repeat-song-symbolic",
+      playlist: "media-playlist-repeat-symbolic",
+    },
+    playing: "media-playback-pause-symbolic",
+    paused: "media-playback-start-symbolic",
+    stopped: "media-playback-stop-symbolic",
+    prev: "media-skip-backward-symbolic",
+    next: "media-skip-forward-symbolic",
+  },
+  ai: "chatgpt-symbolic",
+  ui: {
+    send: "mail-send-symbolic",
+    arrow: {
+      right: "pan-end-symbolic",
+      left: "pan-start-symbolic",
+      down: "pan-down-symbolic",
+      up: "pan-up-symbolic",
+    },
+  },
+  weather: {
+    day: {
+      "113": "\uf00d", //"Sunny",
+      "116": "\uf002", //"PartlyCloudy",
+      "119": "\uf041", //"Cloudy",
+      "122": "\uf013", //"VeryCloudy",
+      "143": "\uf003", //"Fog",
+      "176": "\uf01a", //"LightShowers",
+      "179": "\uf017", //"LightSleetShowers",
+      "182": "\uf0b5", //"LightSleet",
+      "185": "\uf0b5", //"LightSleet",
+      "200": "\uf01d", //"ThunderyShowers",
+      "227": "\uf01b", //"LightSnow",
+      "230": "\uf01b", //"HeavySnow",
+      "248": "\uf014", //"Fog",
+      "260": "\uf014", //"Fog",
+      "263": "\uf01a", //"LightShowers",
+      "266": "\uf01a", //"LightRain",
+      "281": "\uf0b5", //"LightSleet",
+      "284": "\uf0b5", //"LightSleet",
+      "293": "\uf01a", //"LightRain",
+      "296": "\uf01a", //"LightRain",
+      "299": "\uf019", //"HeavyShowers",
+      "302": "\uf019", //"HeavyRain",
+      "305": "\uf019", //"HeavyShowers",
+      "308": "\uf019", //"HeavyRain",
+      "311": "\uf0b5", //"LightSleet",
+      "314": "\uf0b5", //"LightSleet",
+      "317": "\uf0b5", //"LightSleet",
+      "320": "\uf01b", //"LightSnow",
+      "323": "\uf017", //"LightSnowShowers",
+      "326": "\uf017", //"LightSnowShowers",
+      "329": "\uf01b", //"HeavySnow",
+      "332": "\uf01b", //"HeavySnow",
+      "335": "\uf01b", //"HeavySnowShowers",
+      "338": "\uf01b", //"HeavySnow",
+      "350": "\uf0b5", //"LightSleet",
+      "353": "\uf01a", //"LightShowers",
+      "356": "\uf019", //"HeavyShowers",
+      "359": "\uf019", //"HeavyRain",
+      "362": "\uf017", //"LightSleetShowers",
+      "365": "\uf017", //"LightSleetShowers",
+      "368": "\uf017", //"LightSnowShowers",
+      "371": "\uf017", //"HeavySnowShowers",
+      "374": "\uf0b5", //"LightSleetShowers",
+      "377": "\uf0b5", //"LightSleet",
+      "386": "\uf01e", //"ThunderyShowers",
+      "389": "\uf01e", //"ThunderyHeavyRain",
+      "392": "\uf01e", //"ThunderySnowShowers",
+      "395": "\uf01b", //"HeavySnowShowers",
+    },
+    night: {
+      "113": "\uf02e", // Night
+      "116": "\uf086", // Partly cloudy, night
+      "119": "\uf086", // Partly cloudy, night
+    }
+  }
+};
+
+
+

modules/menu/menu.js

@@ -0,0 +1,36 @@
+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/shared/barItemBox.js

@@ -0,0 +1,15 @@
+export const BarItemBox = (child) => {
+  const computeVisible = () => {
+    if (Object.hasOwnProperty.call(child, "isVis")) {
+      return child.isVis.bind("value");
+    }
+
+    return child.isVisible;
+  }
+
+  return Widget.Box({
+    class_name: "bar_item_box_visible",
+    child: child.component,
+    visible: computeVisible()
+  });
+};

modules/volume/volume.js

@@ -0,0 +1,261 @@
+// 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;