From e79fa091cfbdbd9dfe2ed19a0a5f92604047b0a9 Mon Sep 17 00:00:00 2001
From: Mora Unie Youer <mora_unie_youer@riseup.net>
Date: Sun, 2 Mar 2025 17:56:12 +0300
Subject: feat: basic tray and improved workspaces buttons

---
 app.ts             |  10 +++--
 style.scss         |  28 +++++++++---
 widget/Bar.tsx     |  98 ------------------------------------------
 widget/bar/Bar.tsx | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 151 insertions(+), 107 deletions(-)
 delete mode 100644 widget/Bar.tsx
 create mode 100644 widget/bar/Bar.tsx

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.tsx
deleted file mode 100644
index 02aa3ba..0000000
--- a/widget/Bar.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk4"
-import { exec, GLib, Variable } from "astal"
-
-type NiriWorkspace = {
-  id: number,
-  idx: number,
-  name: string | null,
-  output: string,
-  is_active: boolean,
-  is_focused: boolean,
-  active_window_id: number | null,
-};
-
-function getWorkspaces(): NiriWorkspace[] {
-  // NOTE: this works only in non-systemd environment on NixOS
-  // TODO: try to use Niri socket if it is documented
-  return JSON.parse(exec("niri msg -j workspaces"));
-}
-
-function getWorkspacesByOutput(output: string): NiriWorkspace[] {
-  return getWorkspaces().filter(workspace => workspace.output == output).sort((a, b) => a.idx - b.idx);
-}
-
-function focusWorkspace(idx: number) {
-  // NOTE: this works only in non-systemd environment on NixOS
-  // TODO: try to use Niri socket if it is documented
-  exec(`niri msg action focus-workspace ${idx}`);
-}
-
-type WorkspaceButtonArguments = {
-  idx: number,
-  isActive: boolean,
-  isFocused: boolean,
-};
-
-function WorkspaceButton(args: WorkspaceButtonArguments) {
-  const classes: string[] = [];
-  args.isActive && classes.push("active");
-  args.isFocused && classes.push("focused");
-  return <button cssClasses={classes} onClicked={() => focusWorkspace(args.idx)} />
-}
-
-type WorkspacesArguments = {
-  connector: string,
-};
-
-function Workspaces(args: WorkspacesArguments) {
-  // NOTE: it is pretty inefficient and not so much responsive
-  // TODO: it would be better to use Niri socket in the future
-  const workspaces: Variable<NiriWorkspace[]> = Variable(getWorkspacesByOutput(args.connector))
-    .poll(1000, () => getWorkspacesByOutput(args.connector));
-
-  // BUG: on workspace change there's no CSS transition
-  // I guess it is due to rerender here
-  return <box cssClasses={["Workspaces"]}>
-    {workspaces(v => v.map(workspace => <WorkspaceButton idx={workspace.idx} isActive={workspace.is_active} isFocused={workspace.is_focused} />))}
-  </box>
-}
-
-
-type TimeArguments = {
-  format: string,
-};
-
-function Time(args: TimeArguments) {
-  const time = Variable<GLib.DateTime>(GLib.DateTime.new_now_local()).poll(1000, () => GLib.DateTime.new_now_local())
-
-  return <box>
-    {time(v => v.format(args.format))}
-  </box>
-}
-
-
-export default function Bar(gdkmonitor: Gdk.Monitor) {
-  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
-
-  return <window
-    visible
-    name={"Bar"}
-    cssClasses={["Bar"]}
-    gdkmonitor={gdkmonitor}
-    exclusivity={Astal.Exclusivity.EXCLUSIVE}
-    anchor={TOP | LEFT | RIGHT}
-    application={App}>
-    <centerbox cssClasses={["bar-container"]}>
-      <box halign={Gtk.Align.START}>
-        <Workspaces connector={gdkmonitor.get_connector()!} />
-      </box>
-
-      <box halign={Gtk.Align.CENTER}>
-      </box>
-
-      <box halign={Gtk.Align.END}>
-        <Time format="%I:%M:%S %p %Z" />
-      </box>
-    </centerbox>
-  </window>
-}
diff --git a/widget/bar/Bar.tsx b/widget/bar/Bar.tsx
new file mode 100644
index 0000000..b057cdb
--- /dev/null
+++ b/widget/bar/Bar.tsx
@@ -0,0 +1,122 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4"
+import { bind, exec, GLib, Variable } from "astal"
+import AstalTray from "gi://AstalTray?version=0.1";
+
+type NiriWorkspace = {
+  id: number,
+  idx: number,
+  name: string | null,
+  output: string,
+  is_active: boolean,
+  is_focused: boolean,
+  active_window_id: number | null,
+};
+
+function getWorkspaces(): NiriWorkspace[] {
+  // NOTE: this works only in non-systemd environment on NixOS
+  // TODO: try to use Niri socket if it is documented
+  return JSON.parse(exec("niri msg -j workspaces"));
+}
+
+function getWorkspacesByOutput(output: string): NiriWorkspace[] {
+  return getWorkspaces().filter(workspace => workspace.output == output).sort((a, b) => a.idx - b.idx);
+}
+
+function focusWorkspace(idx: number) {
+  // NOTE: this works only in non-systemd environment on NixOS
+  // TODO: try to use Niri socket if it is documented
+  exec(`niri msg action focus-workspace ${idx}`);
+}
+
+type WorkspaceButtonArguments = {
+  idx: number,
+  isActive: boolean,
+  isFocused: boolean,
+};
+
+function WorkspaceButton(args: WorkspaceButtonArguments) {
+  const classes: string[] = [];
+  args.isActive && classes.push("active");
+  args.isFocused && classes.push("focused");
+  return <button cssClasses={classes} onClicked={() => focusWorkspace(args.idx)} />
+}
+
+type WorkspacesArguments = {
+  connector: string,
+};
+
+function Workspaces(args: WorkspacesArguments) {
+  // NOTE: it is pretty inefficient and not so much responsive
+  // TODO: it would be better to use Niri socket in the future
+  const workspaces: Variable<NiriWorkspace[]> = Variable(getWorkspacesByOutput(args.connector))
+    .poll(1000, () => getWorkspacesByOutput(args.connector));
+
+  // BUG: on workspace change there's no CSS transition
+  // I guess it is due to rerender here
+  return <box cssClasses={["Workspaces"]}>
+    {workspaces(v => v.map(workspace => <WorkspaceButton idx={workspace.idx} isActive={workspace.is_active} isFocused={workspace.is_focused} />))}
+  </box>
+}
+
+
+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,
+};
+
+function Time(args: TimeArguments) {
+  const time = Variable<GLib.DateTime>(GLib.DateTime.new_now_local()).poll(1000, () => GLib.DateTime.new_now_local())
+
+  return <box>
+    {time(v => v.format(args.format))}
+  </box>
+}
+
+
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
+
+  return <window
+    visible
+    name={"Bar"}
+    cssClasses={["Bar"]}
+    gdkmonitor={gdkmonitor}
+    exclusivity={Astal.Exclusivity.EXCLUSIVE}
+    anchor={TOP | LEFT | RIGHT}
+    application={App}>
+    <centerbox cssClasses={["bar-container"]}>
+      <box halign={Gtk.Align.START}>
+        <Workspaces connector={gdkmonitor.get_connector()!} />
+      </box>
+
+      <box halign={Gtk.Align.CENTER}>
+      </box>
+
+      <box halign={Gtk.Align.END}>
+        <Tray />
+        <Time format="%I:%M:%S %p %Z" />
+      </box>
+    </centerbox>
+  </window>
+}
-- 
cgit v1.2.3-70-g09d2