commit

app.ts

@@ -1,10 +1,10 @@
-import { App } from "astal/gtk4"
+import { App } from "astal/gtk4";
-import style from "./style.scss"
+import style from "./style.scss";
-import Bar from "./widget/Bar"
+import Bar from "./widget/Bar";
 
 App.start({
   css: style,
   main() {
-        App.get_monitors().map(Bar)
+    App.get_monitors().map(Bar);
   },
-})
+});

bun.lock

@@ -4,8 +4,12 @@
     "": {
       "name": "astal-shell",
       "dependencies": {
+        "@catppuccin/palette": "^1.7.1",
         "astal": "/usr/share/astal/gjs",
+      },
+      "devDependencies": {
         "onchange": "^7.1.0",
+        "sass": "^1.86.2",
       },
     },
   },
@@ -14,6 +18,36 @@
 
     "@blakeembrey/template": ["@blakeembrey/template@1.2.0", "", {}, "sha512-w/63nURdkRPpg3AXbNr7lPv6HgOuVDyefTumiXsbXxtIwcuk5EXayWR5OpSwDjsQPgaYsfUSedMduaNOjAYY8A=="],
 
+    "@catppuccin/palette": ["@catppuccin/palette@1.7.1", "", {}, "sha512-aRc1tbzrevOTV7nFTT9SRdF26w/MIwT4Jwt4fDMc9itRZUDXCuEDBLyz4TQMlqO9ZP8mf5Hu4Jr6D03NLFc6Gw=="],
+
+    "@parcel/watcher": ["@parcel/watcher@2.5.1", "", { "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", "micromatch": "^4.0.5", "node-addon-api": "^7.0.0" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.1", "@parcel/watcher-darwin-arm64": "2.5.1", "@parcel/watcher-darwin-x64": "2.5.1", "@parcel/watcher-freebsd-x64": "2.5.1", "@parcel/watcher-linux-arm-glibc": "2.5.1", "@parcel/watcher-linux-arm-musl": "2.5.1", "@parcel/watcher-linux-arm64-glibc": "2.5.1", "@parcel/watcher-linux-arm64-musl": "2.5.1", "@parcel/watcher-linux-x64-glibc": "2.5.1", "@parcel/watcher-linux-x64-musl": "2.5.1", "@parcel/watcher-win32-arm64": "2.5.1", "@parcel/watcher-win32-ia32": "2.5.1", "@parcel/watcher-win32-x64": "2.5.1" } }, "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg=="],
+
+    "@parcel/watcher-android-arm64": ["@parcel/watcher-android-arm64@2.5.1", "", { "os": "android", "cpu": "arm64" }, "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA=="],
+
+    "@parcel/watcher-darwin-arm64": ["@parcel/watcher-darwin-arm64@2.5.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw=="],
+
+    "@parcel/watcher-darwin-x64": ["@parcel/watcher-darwin-x64@2.5.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg=="],
+
+    "@parcel/watcher-freebsd-x64": ["@parcel/watcher-freebsd-x64@2.5.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ=="],
+
+    "@parcel/watcher-linux-arm-glibc": ["@parcel/watcher-linux-arm-glibc@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA=="],
+
+    "@parcel/watcher-linux-arm-musl": ["@parcel/watcher-linux-arm-musl@2.5.1", "", { "os": "linux", "cpu": "arm" }, "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q=="],
+
+    "@parcel/watcher-linux-arm64-glibc": ["@parcel/watcher-linux-arm64-glibc@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w=="],
+
+    "@parcel/watcher-linux-arm64-musl": ["@parcel/watcher-linux-arm64-musl@2.5.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg=="],
+
+    "@parcel/watcher-linux-x64-glibc": ["@parcel/watcher-linux-x64-glibc@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A=="],
+
+    "@parcel/watcher-linux-x64-musl": ["@parcel/watcher-linux-x64-musl@2.5.1", "", { "os": "linux", "cpu": "x64" }, "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg=="],
+
+    "@parcel/watcher-win32-arm64": ["@parcel/watcher-win32-arm64@2.5.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw=="],
+
+    "@parcel/watcher-win32-ia32": ["@parcel/watcher-win32-ia32@2.5.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ=="],
+
+    "@parcel/watcher-win32-x64": ["@parcel/watcher-win32-x64@2.5.1", "", { "os": "win32", "cpu": "x64" }, "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA=="],
+
     "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
 
     "arg": ["arg@4.1.3", "", {}, "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="],
@@ -28,6 +62,8 @@
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
+    "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="],
+
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
@@ -36,6 +72,8 @@
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
+    "immutable": ["immutable@5.1.1", "", {}, "sha512-3jatXi9ObIsPGr3N5hGw/vWWcTkq6hUYhpQz4k0wLC+owqWi/LiugIw9x0EdNZ2yGedKN/HzePiBvaJRXa0Ujg=="],
+
     "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
 
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
@@ -46,6 +84,10 @@
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
+    "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
+
+    "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="],
+
     "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
 
     "onchange": ["onchange@7.1.0", "", { "dependencies": { "@blakeembrey/deque": "^1.0.5", "@blakeembrey/template": "^1.0.0", "arg": "^4.1.3", "chokidar": "^3.3.1", "cross-spawn": "^7.0.1", "ignore": "^5.1.4", "tree-kill": "^1.2.2" }, "bin": { "onchange": "dist/bin.js" } }, "sha512-ZJcqsPiWUAUpvmnJri5TPBooqJOPmC0ttN65juhN15Q8xA+Nbg3BaxBHXQ45EistKKlKElb0edmbPWnKSBkvMg=="],
@@ -56,14 +98,22 @@
 
     "readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
 
+    "sass": ["sass@1.86.2", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.0.2", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-Rpfn0zAIDqvnSb2DihJTDFjbhqLHu91Wqac9rxontWk7R+2txcPjuujMqu1eeoezh5kAblVCS5EdFdyr0Jmu+w=="],
+
     "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
     "tree-kill": ["tree-kill@1.2.2", "", { "bin": { "tree-kill": "cli.js" } }, "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="],
 
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "sass/chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
+
+    "sass/chokidar/readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
   }
 }

package.json

@@ -2,12 +2,14 @@
   "name": "astal-shell",
   "scripts": {
     "dev": "ags run --gtk4 -d .",
-    "dev:watch": "onchange -k -i '**/*.{scss,ts,tsx}' --exclude-path .gitignore -- ags run --gtk4 -d ."
+    "dev:watch": "onchange -k -i '**/*.{scss,css,ts,tsx}' --exclude-path .gitignore -- ags run --gtk4 -d ."
   },
   "dependencies": {
+    "@catppuccin/palette": "^1.7.1",
     "astal": "/usr/share/astal/gjs"
   },
   "devDependencies": {
-    "onchange": "^7.1.0"
+    "onchange": "^7.1.0",
+    "sass": "^1.86.2"
   }
 }

style.scss

@@ -1,20 +1,76 @@
-// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
+$crust: #181926;
-$fg-color: #{"@theme_fg_color"};
+$mantle: #1e2030;
-$bg-color: #{"@theme_bg_color"};
+$base: #24273a;
+
+$surface0: #363a4f;
+$surface1: #494d64;
+$surface2: #5b6078;
+
+$rosewater: #f4dbd6;
+
+button {
+  all: initial;
+}
 
 window.Bar {
+  font-family: JetBrainsMono Nerd Font;
   background: transparent;
-    color: $fg-color;
   font-weight: bold;
 
   > centerbox {
-        background: $bg-color;
+    background: $base;
-        border-radius: 10px;
+
-        margin: 8px;
+    > box {
+      margin: 6px;
+      & > * {
+        margin: 0 4px;
+      }
+    }
   }
 
-    button {
+  .Arch {
+    -gtk-icon-size: 24px;
+    padding: 4px 8px 4px 8px;
     border-radius: 8px;
-        margin: 2px;
+    background: $surface0;
+
+    &:hover {
+      background: $rosewater;
+      color: $base;
+    }
+  }
+
+  .Pywal {
+    font-size: 18px;
+    text-align: center;
+    padding: 4px 18px 4px 12px;
+    border-radius: 8px;
+    background: $surface0;
+
+    &:hover {
+      background: $rosewater;
+      color: $base;
+    }
+  }
+
+  .Tray > * {
+    margin: 0 4px;
+  }
+
+  .Button {
+    padding: 4px 12px;
+    border-radius: 8px;
+    background: $surface0;
+
+    &:hover {
+      background: $rosewater;
+      color: $base;
+    }
+  }
+
+  .Label {
+    padding: 4px 12px;
+    border-radius: 8px;
+    background: $surface0;
   }
 }

tsconfig.json

@@ -9,6 +9,6 @@
     // "checkJs": true,
     // "allowJs": true,
     "jsx": "react-jsx",
-        "jsxImportSource": "astal/gtk4",
+    "jsxImportSource": "astal/gtk4"
   }
 }

widget/Bar.tsx

@@ -1,36 +1,39 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk4"
+import { App, Astal, Gdk, Gtk } from "astal/gtk4";
-import { Variable } from "astal"
+import Calendar from "./Calendar";
-
+import Hyprland from "./Hyprland";
-const time = Variable("").poll(1000, "date")
+import Internet from "./Internet";
+import Mpris from "./Mpris";
+import OS from "./OS";
+import Pywal from "./Pywal";
+import Tray from "./Tray";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
-    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
 
-    return <window
+  return (
+    <window
       visible
       cssClasses={["Bar"]}
       gdkmonitor={gdkmonitor}
       exclusivity={Astal.Exclusivity.EXCLUSIVE}
       anchor={TOP | LEFT | RIGHT}
-        application={App}>
+      application={App}
+    >
       <centerbox cssName="centerbox">
-            <button
+        <box halign={Gtk.Align.START}>
-                onClicked="echo hello"
+          <OS />
-                hexpand
+          <Tray />
-                halign={Gtk.Align.CENTER}
+          <Hyprland.Client />
-            >
+        </box>
-                Welcome to AGS!
+        <box halign={Gtk.Align.CENTER}>
-            </button>
+          <Mpris />
-            <box />
+        </box>
-            <menubutton
+        <box halign={Gtk.Align.END}>
-                hexpand
+          <Pywal />
-                halign={Gtk.Align.CENTER}
+          <Internet />
-            >
+          <Calendar />
-                <label label={time()} />
+        </box>
-                <popover>
-                    <Gtk.Calendar />
-                </popover>
-            </menubutton>
       </centerbox>
     </window>
+  );
 }

widget/Calendar.tsx

@@ -0,0 +1,23 @@
+import { Variable } from "astal";
+import { Gdk, Gtk } from "astal/gtk4";
+
+const time = Variable("").poll(1000, 'date +"%r"');
+const date = Variable("").poll(1000, 'date +"%a %b%e, %G"');
+
+function Calendar() {
+  return (
+    <menubutton hexpand halign={Gtk.Align.END}>
+      <label
+        cssClasses={["Button"]}
+        cursor={Gdk.Cursor.new_from_name("pointer", null)}
+        label={time().as((t) => `  ${t}`)}
+        tooltip_text={date().as((d) => `󰸗  ${d}`)}
+      />
+      <popover>
+        <Gtk.Calendar />
+      </popover>
+    </menubutton>
+  );
+}
+
+export default Calendar;

widget/Internet.tsx

@@ -23,6 +23,7 @@ function Internet() {
   return (
     <box>
       <label
+        cssClasses={["Label"]}
         label={bind(network, "wifi").as(
           (w) => `${icon(w.strength)}  ${w.strength}%`,
         )}

widget/Mpris.tsx

@@ -0,0 +1,48 @@
+import { bind, Variable } from "astal";
+import AstalMpris from "gi://AstalMpris";
+
+function IntegerToMinuteSeconds(value: number) {
+  const minutes = Math.floor(value / 60);
+  const seconds = Math.floor(value - minutes * 60);
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}
+
+function FormatLabel(player: AstalMpris.Player) {
+  return `${player.title} - ${player.artist} [${IntegerToMinuteSeconds(player.position)}/${IntegerToMinuteSeconds(player.length)}]`;
+}
+
+const Mpris = function () {
+  const mpris = AstalMpris.get_default();
+
+  mpris.connect("player-added", () => {
+    players.set(mpris.players);
+  });
+  mpris.connect("player-closed", () => {
+    players.set(mpris.players);
+  });
+
+  const players = Variable<Array<AstalMpris.Player>>(mpris.players);
+
+  const label = Variable.derive([players], (players) => {
+    const player = players[0];
+    if (!player.title || !player.artist || !player.position || !player.length) {
+      return "";
+    }
+    return FormatLabel(player);
+  });
+
+  label.subscribe((value) => print(value));
+
+  return (
+    <box>
+      <label
+        label={bind(label)}
+        onScroll={(self, dx, dy) => {
+          dy > 0 ? print("BLING!") : print("BANG!");
+        }}
+      />
+    </box>
+  );
+};
+
+export default Mpris;

widget/OS.tsx

@@ -0,0 +1,17 @@
+import { GLib } from "astal";
+import { Gtk } from "astal/gtk4";
+
+const OS = function () {
+  return (
+    <button
+      onClicked="echo hello"
+      hexpand
+      halign={Gtk.Align.START}
+      cssClasses={["Arch"]}
+    >
+      <image iconName={GLib.get_os_info("LOGO") || "missing-symbolic"} />
+    </button>
+  );
+};
+
+export default OS;

widget/Pywal.tsx

@@ -3,14 +3,12 @@ import { Gdk } from "astal/gtk4";
 
 function Pywal() {
   return (
-    <box>
     <button
       cssClasses={["Pywal"]}
       cursor={Gdk.Cursor.new_from_name("pointer", null)}
       label={""}
       onClicked={() => exec("bash -c ~/dotfiles/.scripts/pywal-swww.sh")}
     />
-    </box>
   );
 }
 

widget/Tray.tsx

@@ -0,0 +1,32 @@
+import { bind } from "astal";
+import { Gtk } from "astal/gtk4";
+import AstalTray from "gi://AstalTray";
+
+const Tray = function () {
+  const tray = AstalTray.get_default();
+
+  const trayItems = bind(tray, "items");
+
+  function OpenTrayItem(button: Gtk.MenuButton, item: AstalTray.TrayItem) {
+    item.about_to_show();
+  }
+
+  return (
+    <box cssClasses={["Tray", "Label"]}>
+      {bind(trayItems).as((items) =>
+        items.map((item) => {
+          return (
+            <menubutton>
+              <image
+                tooltip_text={item.title || item.tooltip.title}
+                file={item.iconName || "NONE"}
+              />
+            </menubutton>
+          );
+        }),
+      )}
+    </box>
+  );
+};
+
+export default Tray;