3 files changed, 53 insertions, 48 deletions
diff --git a/examples/vala/simple-bar/meson.build b/examples/vala/simple-bar/meson.build
index 10f5dd2..5a0ef4c 100644
--- a/examples/vala/simple-bar/meson.build
+++ b/examples/vala/simple-bar/meson.build
@@ -21,22 +21,15 @@ pkgconfig_deps = [
 # needed for GLib.Math
 deps = pkgconfig_deps + meson.get_compiler('c').find_library('m')
 
-custom_target(
-  'style.css',
-  command: [
-    find_program('sass'),
-    meson.project_source_root() / 'style.scss',
-    '@OUTPUT@',
-  ],
-  output: 'style.css',
-  install: true,
-  install_dir: libdir,
-)
-
 main = configure_file(
   input: 'app.in.vala',
   output: 'app.vala',
-  configuration: {'STYLE': libdir / 'style.css'},
+  configuration: {
+    'STYLE': run_command(
+      find_program('sass'),
+      meson.project_source_root() / 'style.scss',
+    ).stdout(),
+  },
 )
 
 sources = files(
diff --git a/examples/vala/simple-bar/style.scss b/examples/vala/simple-bar/style.scss
index 1dcf729..f5f771a 100644
--- a/examples/vala/simple-bar/style.scss
+++ b/examples/vala/simple-bar/style.scss
@@ -13,31 +13,45 @@ window.Bar {
     font-size: 1.1em;
     font-weight: bold;
 
-    button {
-        all: unset;
-        background-color: transparent;
+    label {
+        margin: 0 8px;
+    }
+
+    .Workspaces  {
+        button {
+            all: unset;
+            background-color: transparent;
 
-        &:hover label {
-            background-color: color.adjust($fg, $alpha: -0.84);
-            border-color: color.adjust($accent, $alpha: -0.8);
+            &:hover label {
+                background-color: color.adjust($fg, $alpha: -0.84);
+                border-color: color.adjust($accent, $alpha: -0.8);
+            }
+
+            &:active label {
+                background-color: color.adjust($fg, $alpha: -0.8)
+            }
         }
 
-        &:active label {
-            background-color: color.adjust($fg, $alpha: -0.8)
+        label {
+            transition: 200ms;
+            padding: 0 8px;
+            margin: 2px;
+            border-radius: $radius;
+            border: 1pt solid transparent;
         }
-    }
 
-    label {
-        transition: 200ms;
-        padding: 0 8px;
-        margin: 2px;
-        border-radius: $radius;
-        border: 1pt solid transparent;
+        .focused label {
+            color: $accent;
+            border-color: $accent;
+        }
     }
 
-    .Workspaces .focused label {
-        color: $accent;
-        border-color: $accent;
+    .SysTray {
+        margin-right: 8px;
+
+        button {
+            padding: 0 4px;
+        }
     }
 
     .FocusedClient {
diff --git a/examples/vala/simple-bar/widget/Bar.vala b/examples/vala/simple-bar/widget/Bar.vala
index ba4062c..8913c95 100644
--- a/examples/vala/simple-bar/widget/Bar.vala
+++ b/examples/vala/simple-bar/widget/Bar.vala
@@ -10,8 +10,12 @@ class Workspaces : Gtk.Box {
         foreach (var child in get_children())
             child.destroy();
 
-        foreach (var ws in hypr.workspaces)
-            add(button(ws));
+        foreach (var ws in hypr.workspaces) {
+            // filter out special workspaces
+            if (!(ws.id >= -99 && ws.id <= -2)) {
+                add(button(ws));
+            }
+        }
     }
 
     Gtk.Button button(AstalHyprland.Workspace ws) {
@@ -103,6 +107,7 @@ class SysTray : Gtk.Box {
     AstalTray.Tray tray = AstalTray.get_default();
 
     public SysTray() {
+        Astal.widget_set_class_names(this, { "SysTray" });
         tray.item_added.connect(add_item);
         tray.item_removed.connect(remove_item);
     }
@@ -112,26 +117,19 @@ class SysTray : Gtk.Box {
             return;
 
         var item = tray.get_item(id);
-
-        var menu = item.create_menu();
-        var btn = new Astal.Button();
-        var icon = new Astal.Icon();
-
-        btn.clicked.connect(() => {
-            if (menu != null)
-                menu.popup_at_widget(this, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, null);
-        });
-
-        btn.destroy.connect(() => {
-            if (menu != null)
-                menu.destroy();
-        });
+        var btn = new Gtk.MenuButton() { use_popover = false, visible = true };
+        var icon = new Astal.Icon() { visible = true };
 
         item.bind_property("tooltip-markup", btn, "tooltip-markup", BindingFlags.SYNC_CREATE);
         item.bind_property("gicon", icon, "g-icon", BindingFlags.SYNC_CREATE);
+        item.bind_property("menu-model", btn, "menu-model", BindingFlags.SYNC_CREATE);
+        btn.insert_action_group("dbusmenu", item.action_group);
+        item.notify["action-group"].connect(() => {
+            btn.insert_action_group("dbusmenu", item.action_group);
+        });
+
         btn.add(icon);
         add(btn);
-        btn.show_all();
         items.set(id, btn);
     }