refacor

widget/modules/SysTray/SysTray.scss

@@ -0,0 +1,16 @@
+.SysTray {
+    all: unset;
+    border-radius: 25px;
+    background-color: transparent;
+
+    button {
+        all: unset;
+        padding: 5px 7px;
+        border-radius: 25px;
+        border: 1pt solid black;
+        transition: 300ms;
+        &:hover {
+            background-color: gray;
+        }
+    }
+}

widget/modules/SysTray/SysTray.tsx

@@ -0,0 +1,18 @@
+import { bind } from "astal"
+import Tray from "gi://AstalTray"
+
+export default function SysTray() {
+    const tray = Tray.get_default()
+
+    return <box className="SysTray">
+        {bind(tray, "items").as(items => items.map(item => (
+            <menubutton
+                tooltipMarkup={bind(item, "tooltipMarkup")}
+                usePopover={false}
+                actionGroup={bind(item, "actionGroup").as(ag => ["dbusmenu", ag])}
+                menuModel={bind(item, "menuModel")}>
+                <icon gicon={bind(item, "gicon")} />
+            </menubutton>
+        )))}
+    </box>
+}