add: lua gtk3 examples (#156)

6 files changed, 237 insertions, 0 deletions

diff --git a/examples/gtk3/lua/applauncher/README.md b/examples/gtk3/lua/applauncher/README.md
new file mode 100644
index 0000000..682adf1
--- /dev/null
+++ b/examples/gtk3/lua/applauncher/README.md
@@ -0,0 +1,5 @@
+# Applauncher
+
+![launcher](https://github.com/user-attachments/assets/2695e3bb-dff4-478a-b392-279fe638bfd3)
+
+Using [Apps](https://aylur.github.io/astal/guide/libraries/apps).
diff --git a/examples/gtk3/lua/applauncher/init.lua b/examples/gtk3/lua/applauncher/init.lua
new file mode 100644
index 0000000..0cd6db5
--- /dev/null
+++ b/examples/gtk3/lua/applauncher/init.lua
@@ -0,0 +1,16 @@
+local astal = require("astal")
+local App = require("astal.gtk3.app")
+
+local AppLauncher = require("widget.Applauncher")
+local src = require("lib").src
+
+local scss = src("style.scss")
+local css = "/tmp/style.css"
+
+astal.exec("sass " .. scss .. " " .. css)
+
+App:start({
+	instance_name = "launcher",
+	css = css,
+	main = AppLauncher,
+})
diff --git a/examples/gtk3/lua/applauncher/lib.lua b/examples/gtk3/lua/applauncher/lib.lua
new file mode 100644
index 0000000..8a50bdd
--- /dev/null
+++ b/examples/gtk3/lua/applauncher/lib.lua
@@ -0,0 +1,38 @@
+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 array T[]
+---@param func fun(T, i: integer): R
+---@return R[]
+function M.map(array, func)
+	local new_arr = {}
+	for i, v in ipairs(array) do
+		new_arr[i] = func(v, i)
+	end
+	return new_arr
+end
+
+---@generic T
+---@param array T[]
+---@param start integer
+---@param stop? integer
+---@return T[]
+function M.slice(array, start, stop)
+	local new_arr = {}
+
+	stop = stop or #array
+
+	for i = start, stop do
+		table.insert(new_arr, array[i])
+	end
+
+	return new_arr
+end
+
+return M
diff --git a/examples/gtk3/lua/applauncher/style.scss b/examples/gtk3/lua/applauncher/style.scss
new file mode 100644
index 0000000..ba13eed
--- /dev/null
+++ b/examples/gtk3/lua/applauncher/style.scss
@@ -0,0 +1 @@
+@use "./widget/Applauncher.scss"
diff --git a/examples/gtk3/lua/applauncher/widget/Applauncher.lua b/examples/gtk3/lua/applauncher/widget/Applauncher.lua
new file mode 100644
index 0000000..78f7fa5
--- /dev/null
+++ b/examples/gtk3/lua/applauncher/widget/Applauncher.lua
@@ -0,0 +1,118 @@
+local astal = require("astal")
+
+local Apps = astal.require("AstalApps")
+local App = require("astal.gtk3.app")
+local Astal = require("astal.gtk3").Astal
+local Gdk = require("astal.gtk3").Gdk
+local Variable = astal.Variable
+local Widget = require("astal.gtk3.widget")
+
+local slice = require("lib").slice
+local map = require("lib").map
+
+local MAX_ITEMS = 8
+
+local function hide()
+	local launcher = App:get_window("launcher")
+	if launcher then launcher:hide() end
+end
+
+local function AppButton(app)
+	return Widget.Button({
+		class_name = "AppButton",
+		on_clicked = function()
+			hide()
+			app:launch()
+		end,
+		Widget.Box({
+			Widget.Icon({ icon = app.icon_name }),
+			Widget.Box({
+				valign = "CENTER",
+				vertical = true,
+				Widget.Label({
+					class_name = "name",
+					wrap = true,
+					xalign = 0,
+					label = app.name,
+				}),
+				app.description and Widget.Label({
+					class_name = "description",
+					wrap = true,
+					xalign = 0,
+					label = app.description,
+				}),
+			}),
+		}),
+	})
+end
+
+return function()
+	local apps = Apps.Apps()
+
+	local text = Variable("")
+	local list = text(
+		function(t) return slice(apps:fuzzy_query(t), 1, MAX_ITEMS) end
+	)
+
+	local on_enter = function()
+		local found = apps:fuzzy_query(text:get())[1]
+		if found then
+			found:launch()
+			hide()
+		end
+	end
+
+	return Widget.Window({
+		name = "launcher",
+		anchor = Astal.WindowAnchor.TOP + Astal.WindowAnchor.BOTTOM,
+		exclusivity = "IGNORE",
+		keymode = "ON_DEMAND",
+		application = App,
+		on_show = function() text:set("") end,
+		on_key_press_event = function(self, event)
+			if event.keyval == Gdk.KEY_Escape then self:hide() end
+		end,
+		Widget.Box({
+			Widget.EventBox({
+				expand = true,
+				on_click = hide,
+				width_request = 4000,
+			}),
+			Widget.Box({
+				hexpand = false,
+				vertical = true,
+				Widget.EventBox({ on_click = hide, height_request = 100 }),
+				Widget.Box({
+					vertical = true,
+					width_request = 500,
+					class_name = "Applauncher",
+					Widget.Entry({
+						placeholder_text = "Search",
+						text = text(),
+						on_changed = function(self) text:set(self.text) end,
+						on_activate = on_enter,
+					}),
+					Widget.Box({
+						spacing = 6,
+						vertical = true,
+						list:as(function(l) return map(l, AppButton) end),
+					}),
+					Widget.Box({
+						halign = "CENTER",
+						class_name = "not-found",
+						vertical = true,
+						visible = list:as(function(l) return #l == 0 end),
+						Widget.Icon({ icon = "system-search-symbolic" }),
+						Widget.Label({ label = "No match found" }),
+					}),
+				}),
+				Widget.EventBox({ expand = true, on_click = hide }),
+			}),
+			Widget.EventBox({
+				width_request = 4000,
+				expand = true,
+				on_click = hide,
+			}),
+		}),
+	})
+end
diff --git a/examples/gtk3/lua/applauncher/widget/Applauncher.scss b/examples/gtk3/lua/applauncher/widget/Applauncher.scss
new file mode 100644
index 0000000..38b5be1
--- /dev/null
+++ b/examples/gtk3/lua/applauncher/widget/Applauncher.scss
@@ -0,0 +1,59 @@
+@use 'sass:string';
+
+@function gtkalpha($c, $a) {
+    @return string.unquote('alpha(#{$c},#{$a})');
+}
+
+// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
+$fg-color: #{'@theme_fg_color'};
+$bg-color: #{'@theme_bg_color'};
+
+window#launcher {
+    all: unset;
+
+    box.Applauncher {
+        background-color: $bg-color;
+        border-radius: 11px;
+        margin: 1rem;
+        padding: 0.8rem;
+        box-shadow: 2px 3px 8px 0 gtkalpha(black, 0.4);
+
+        entry {
+            margin-bottom: 0.8rem;
+        }
+
+        button {
+            min-width: 0;
+            min-height: 0;
+            padding: 0.5rem;
+
+            icon {
+                font-size: 3em;
+                margin-right: 0.3rem;
+            }
+
+            label.name {
+                font-weight: bold;
+                font-size: 1.1em;
+            }
+
+            label.description {
+                color: gtkalpha($fg-color, 0.8);
+            }
+        }
+
+        box.not-found {
+            padding: 1rem;
+
+            icon {
+                font-size: 6em;
+                color: gtkalpha($fg-color, 0.7);
+            }
+
+            label {
+                color: gtkalpha($fg-color, 0.9);
+                font-size: 1.2em;
+            }
+        }
+    }
+}