Update

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

hosts/common/configs/user/gui/astal/config/widget/components/Tray.tsx

@@ -1,25 +1,20 @@
-import { App, Gdk } from 'astal/gtk3'
+import { App } from 'astal/gtk3'
 import { bind } from 'astal'
 import Tray from 'gi://AstalTray'
 
 const tray = Tray.get_default()
 
-const TrayButton = ({ item }: { item: Tray.TrayItem }) => {
-  const menu = item.create_menu();
-
-  return <button
+const TrayButton = ({ item }: { item: Tray.TrayItem }) => (
+  <menubutton
     className='item'
     tooltipMarkup={bind(item, 'tooltipMarkup')}
-    onClickRelease={self => {
-      menu?.popup_at_widget(self, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, null)
-    }}
-    onDestroy={() => menu?.destroy()}
+    usePopover={false}
+    menuModel={bind(item, 'menuModel')}
+    actionGroup={bind(item, 'actionGroup').as(ag => ['dbusmenu', ag])}
   >
-    <icon
-      className='icon'
-      gIcon={bind(item, 'gicon')} />
-  </button>;
-}
+    <icon gicon={bind(item, 'gicon')} />
+  </menubutton>
+)
 
 export default () => <box className='systray'>
   {