example: add lua simple-bar

7 files changed, 358 insertions, 15 deletions

diff --git a/examples/js/simple-bar/README.md b/examples/js/simple-bar/README.md
index 3a4316e..8f733da 100644
--- a/examples/js/simple-bar/README.md
+++ b/examples/js/simple-bar/README.md
@@ -1,6 +1,6 @@
 # Simple Bar Example
 
-![sime-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b)
+![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b)
 
 A simple bar for Hyprland using
 
diff --git a/examples/js/simple-bar/widget/Bar.tsx b/examples/js/simple-bar/widget/Bar.tsx
index d669fd5..492ab1d 100644
--- a/examples/js/simple-bar/widget/Bar.tsx
+++ b/examples/js/simple-bar/widget/Bar.tsx
@@ -22,7 +22,7 @@ function SysTray() {
                 onClickRelease={self => {
                     menu?.popup_at_widget(self, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, null)
                 }}>
-                <icon g_icon={bind(item, "gicon")}/>
+                <icon gIcon={bind(item, "gicon")} />
             </button>
         }))}
     </box>
@@ -64,21 +64,27 @@ function BatteryLevel() {
 }
 
 function Media() {
-    const player = Mpris.Player.new("spotify")
+    const mpris = Mpris.get_default()
 
     return <box className="Media">
-        <box
-            className="Cover"
-            valign={Gtk.Align.CENTER}
-            css={bind(player, "coverArt").as(cover =>
-                `background-image: url('${cover}');`
-            )}
-        />
-        <label
-            label={bind(player, "title").as(() =>
-                `${player.title} - ${player.artist}`
-            )}
-        />
+        {bind(mpris, "players").as(ps => ps[0] ? (
+            <box>
+                <box
+                    className="Cover"
+                    valign={Gtk.Align.CENTER}
+                    css={bind(ps[0], "coverArt").as(cover =>
+                        `background-image: url('${cover}');`
+                    )}
+                />
+                <label
+                    label={bind(ps[0], "title").as(() =>
+                        `${ps[0].title} - ${ps[0].artist}`
+                    )}
+                />
+            </box>
+        ) : (
+            "Nothing Playing"
+        ))}
     </box>
 }
 
diff --git a/examples/lua/simple-bar/README.md b/examples/lua/simple-bar/README.md
new file mode 100644
index 0000000..1cebdac
--- /dev/null
+++ b/examples/lua/simple-bar/README.md
@@ -0,0 +1,12 @@
+# Simple Bar Example
+
+![simple-bar](https://github.com/user-attachments/assets/a306c864-56b7-44c4-8820-81f424f32b9b)
+
+A simple bar for Hyprland using
+
+- [Audio library](https://aylur.github.io/astal/libraries/audio).
+- [Battery library](https://aylur.github.io/astal/libraries/battery).
+- [Hyprland library](https://aylur.github.io/astal/libraries/hyprland).
+- [Mpris library](https://aylur.github.io/astal/libraries/mpris).
+- [Network library](https://aylur.github.io/astal/libraries/network).
+- [dart-sass](https://sass-lang.com/dart-sass/) as the css precompiler
diff --git a/examples/lua/simple-bar/app.lua b/examples/lua/simple-bar/app.lua
new file mode 100644
index 0000000..8c3359b
--- /dev/null
+++ b/examples/lua/simple-bar/app.lua
@@ -0,0 +1,20 @@
+#!/usr/bin/lua
+local astal = require("astal")
+local App = astal.App
+
+local Bar = require("widget.Bar")
+local src = require("lib").src
+
+local scss = src("style.scss")
+local css = "/tmp/style.css"
+
+astal.exec("sass " .. scss .. " " .. css)
+
+App:start({
+	css = css,
+	main = function()
+		for _, mon in pairs(App.monitors) do
+			Bar(mon)
+		end
+	end,
+})
diff --git a/examples/lua/simple-bar/lib.lua b/examples/lua/simple-bar/lib.lua
new file mode 100644
index 0000000..d94db5c
--- /dev/null
+++ b/examples/lua/simple-bar/lib.lua
@@ -0,0 +1,25 @@
+local Variable = require("astal").Variable
+
+local M = {}
+
+function M.src(path)
+	local str = debug.getinfo(2, "S").source:sub(2)
+	local src = str:match("(.*/)") or str:match("(.*\\)") or "./"
+	return src .. path
+end
+
+---@generic T, R
+---@param arr T[]
+---@param func fun(T, integer): R
+---@return R[]
+function M.map(arr, func)
+	local new_arr = {}
+	for i, v in ipairs(arr) do
+		new_arr[i] = func(v, i)
+	end
+	return new_arr
+end
+
+M.date = Variable(""):poll(1000, "date")
+
+return M
diff --git a/examples/lua/simple-bar/style.scss b/examples/lua/simple-bar/style.scss
new file mode 100644
index 0000000..f98286e
--- /dev/null
+++ b/examples/lua/simple-bar/style.scss
@@ -0,0 +1,88 @@
+$bg: #212223;
+$fg: #f1f1f1;
+$accent: #378DF7;
+$radius: 7px;
+
+window.Bar {
+    border: none;
+    box-shadow: none;
+    background-color: $bg;
+    color: $fg;
+    font-size: 1.1em;
+    font-weight: bold;
+
+    button {
+        all: unset;
+        background-color: transparent;
+
+        &:hover label {
+            background-color: transparentize($fg, 0.84);
+            border-color: transparentize($accent, 0.8);
+        }
+
+        &:active label {
+            background-color: transparentize($fg, 0.8)
+        }
+    }
+
+    label {
+        transition: 200ms;
+        padding: 0 8px;
+        margin: 2px;
+        border-radius: $radius;
+        border: 1pt solid transparent;
+    }
+
+    .Workspaces .focused label {
+        color: $accent;
+        border-color: $accent;
+    }
+
+    .FocusedClient {
+        color: $accent;
+    }
+
+    .Media .Cover {
+        min-height: 1.2em;
+        min-width: 1.2em;
+        border-radius: $radius;
+        background-position: center;
+        background-size: contain;
+    }
+
+    .Battery label {
+        padding-left: 0;
+        margin-left: 0;
+    }
+
+    .AudioSlider {
+        * {
+            all: unset;
+        }
+
+        icon {
+            margin-right: .6em;
+        }
+
+        margin: 0 1em;
+
+        trough {
+            background-color: transparentize($fg, 0.8);
+            border-radius: $radius;
+        }
+
+        highlight {
+            background-color: $accent;
+            min-height: .8em;
+            border-radius: $radius;
+        }
+
+        slider {
+            background-color: $fg;
+            border-radius: $radius;
+            min-height: 1em;
+            min-width: 1em;
+            margin: -.2em;
+        }
+    }
+}
diff --git a/examples/lua/simple-bar/widget/Bar.lua b/examples/lua/simple-bar/widget/Bar.lua
new file mode 100644
index 0000000..bf70cd5
--- /dev/null
+++ b/examples/lua/simple-bar/widget/Bar.lua
@@ -0,0 +1,192 @@
+local astal = require("astal")
+local App = astal.App
+local Widget = astal.Widget
+local Variable = astal.Variable
+local Gdk = astal.Gdk
+local GLib = astal.GLib
+local bind = astal.bind
+local Mpris = astal.require("AstalMpris")
+local Battery = astal.require("AstalBattery")
+local Wp = astal.require("AstalWp")
+local Network = astal.require("AstalNetwork")
+local Tray = astal.require("AstalTray")
+local Hyprland = astal.require("AstalHyprland")
+local map = require("lib").map
+
+local function SysTray()
+	local tray = Tray.get_default()
+
+	return Widget.Box({
+		bind(tray, "items"):as(function(items)
+			return map(items, function(item)
+				if item.icon_theme_path ~= nil then
+					App:add_icons(item.icon_theme_path)
+				end
+
+				local menu = item:create_menu()
+
+				return Widget.Button({
+					tooltip_markup = bind(item, "tooltip_markup"),
+					on_destroy = function()
+						if menu ~= nil then
+							menu:destroy()
+						end
+					end,
+					on_click_release = function(self)
+						if menu ~= nil then
+							menu:popup_at_widget(self, Gdk.Gravity.SOUTH, Gdk.Gravity.NORTH, nil)
+						end
+					end,
+					Widget.Icon({
+						g_icon = bind(item, "gicon"),
+					}),
+				})
+			end)
+		end),
+	})
+end
+
+local function FocusedClient()
+	local hypr = Hyprland.get_default()
+	local focused = bind(hypr, "focused-client")
+
+	return Widget.Box({
+		class_name = "Focused",
+		visible = focused,
+		focused:as(function(client)
+			return client and Widget.Label({
+				label = bind(client, "title"):as(tostring),
+			})
+		end),
+	})
+end
+
+local function Wifi()
+	local wifi = Network.get_default().wifi
+
+	return Widget.Icon({
+		tooltip_text = bind(wifi, "ssid"):as(tostring),
+		class_name = "Wifi",
+		icon = bind(wifi, "icon-name"),
+	})
+end
+
+local function AudioSlider()
+	local speaker = Wp.get_default_wp().audio.default_speaker
+
+	return Widget.Box({
+		class_name = "AudioSlider",
+		css = "min-width: 140px;",
+		Widget.Icon({
+			icon = bind(speaker, "volume-icon"),
+		}),
+		Widget.Slider({
+			hexpand = true,
+			on_dragged = function(self)
+				speaker.volume = self.value
+			end,
+			value = bind(speaker, "volume"),
+		}),
+	})
+end
+
+local function BatteryLevel()
+	local bat = Battery.get_default()
+
+	return Widget.Box({
+		class_name = "Battery",
+		visible = bind(bat, "is-present"),
+		Widget.Icon({
+			icon = bind(bat, "icon-name"),
+		}),
+		Widget.Label({
+			label = bind(bat, "percentage"):as(function(p)
+				return tostring(math.floor(p * 100)) .. " %"
+			end),
+		}),
+	})
+end
+
+local function Media()
+	local player = Mpris.Player.new("spotify")
+
+	return Widget.Box({
+		class_name = "Media",
+		visible = bind(player, "available"),
+		Widget.Box({
+			class_name = "Cover",
+			valign = "CENTER",
+			css = bind(player, "cover-art"):as(function(cover)
+				return "background-image: url('" .. (cover or "") .. "');"
+			end),
+		}),
+		Widget.Label({
+			label = bind(player, "metadata"):as(function()
+				return (player.title or "") .. " - " .. (player.artist or "")
+			end),
+		}),
+	})
+end
+
+local function Workspaces()
+	local hypr = Hyprland.get_default()
+
+	return Widget.Box({
+		class_name = "Workspaces",
+		bind(hypr, "workspaces"):as(function(wss)
+			return map(wss, function(ws)
+				return Widget.Button({
+					class_name = bind(hypr, "focused-workspace"):as(function(fw)
+						return fw == ws and "focused" or ""
+					end),
+					on_clicked = function()
+						ws:focus()
+					end,
+					label = bind(ws, "id"):as(tostring),
+				})
+			end)
+		end),
+	})
+end
+
+local function Time(format)
+	local time = Variable(""):poll(1000, function()
+		return GLib.DateTime.new_now_local():format(format)
+	end)
+
+	return Widget.Label({
+		class_name = "Time",
+		on_destroy = function()
+			time:drop()
+		end,
+		label = time(),
+	})
+end
+
+return function(gdkmonitor)
+	return Widget.Window({
+		class_name = "Bar",
+		gdkmonitor = gdkmonitor,
+		anchor = astal.Astal.WindowAnchor.TOP + astal.Astal.WindowAnchor.LEFT + astal.Astal.WindowAnchor.RIGHT,
+		exclusivity = "EXCLUSIVE",
+
+		Widget.CenterBox({
+			Widget.Box({
+				halign = "START",
+				Workspaces(),
+				FocusedClient(),
+			}),
+			Widget.Box({
+				Media(),
+			}),
+			Widget.Box({
+				halign = "END",
+				Wifi(),
+				AudioSlider(),
+				BatteryLevel(),
+				SysTray(),
+				Time("%H:%M - %A %e."),
+			}),
+		}),
+	})
+end