3 files changed, 54 insertions, 10 deletions

diff --git a/app.ts b/app.ts
index b6bf451..4e6b532 100644
--- a/app.ts
+++ b/app.ts
@@ -1,14 +1,16 @@
 import { App } from "astal/gtk4"
+
 import style from "./style.scss"
-import Bar from "./widget/Bar"
+
+import Bar from "./widget/bar/Bar"
 
 const windows = [
   Bar,
-]
+];
 
 App.start({
   css: style,
   main() {
-    windows.forEach(window => App.get_monitors().map(window))
+    windows.forEach(window => App.get_monitors().map(window));
   },
-})
+});
diff --git a/style.scss b/style.scss
index 08bcbbf..8cd0453 100644
--- a/style.scss
+++ b/style.scss
@@ -9,7 +9,7 @@ window.Bar {
   color: #fff;
 
   >box {
-    padding: 4px 0;
+    padding: 0;
   }
 }
 
@@ -22,14 +22,11 @@ box.Workspaces {
     border-radius: 5px;
 
     border: none;
-    margin: 2px 4px;
+    margin: 5px 2px;
     padding: 0;
     background: #ccc;
 
     transition: min-width 2s ease-in-out;
-    // transition-property: min-width;
-    // transition-duration: 2s;
-    // transition-timing-function: ease-out;
 
     &.active {
       min-width: 25px;
@@ -40,3 +37,24 @@ box.Workspaces {
     }
   }
 }
+
+box.Tray {
+  margin-right: 5px;
+
+  button {
+    margin: 0;
+    padding: 1px;
+    border: none;
+    border-radius: 0;
+    min-width: 10px;
+    min-height: 10px;
+
+    background: #000;
+  }
+}
+
+
+window.Notifications {
+  background-color: #000;
+  color: #fff;
+}
diff --git a/widget/Bar.tsx b/widget/bar/Bar.tsx
index 02aa3ba..b057cdb 100644
--- a/widget/Bar.tsx
+++ b/widget/bar/Bar.tsx
@@ -1,5 +1,6 @@
 import { App, Astal, Gtk, Gdk } from "astal/gtk4"
-import { exec, GLib, Variable } from "astal"
+import { bind, exec, GLib, Variable } from "astal"
+import AstalTray from "gi://AstalTray?version=0.1";
 
 type NiriWorkspace = {
   id: number,
@@ -58,6 +59,28 @@ function Workspaces(args: WorkspacesArguments) {
 }
 
 
+function Tray() {
+  // BUG: personally I have one fantom icon being along other tray icons
+  // For now I don't have any ideas why this is happening
+  // TODO: rewrite this using more elements, as this is really restricted design
+  const tray = AstalTray.get_default();
+
+  return <box cssClasses={["Tray"]}>
+    {bind(tray, "items").as(items =>
+      items.map(item =>
+        <menubutton
+          setup={self => self.insert_action_group("dbusmenu", item.actionGroup)}
+          tooltipText={bind(item, "tooltipMarkup")}
+        >
+          <image gicon={bind(item, "gicon")} />
+          {Gtk.PopoverMenu.new_from_model(item.menuModel)}
+        </menubutton>
+      )
+    )}
+  </box>
+}
+
+
 type TimeArguments = {
   format: string,
 };
@@ -91,6 +114,7 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
       </box>
 
       <box halign={Gtk.Align.END}>
+        <Tray />
         <Time format="%I:%M:%S %p %Z" />
       </box>
     </centerbox>