arrow key selection for astal launcher

2 files changed, 34 insertions, 10 deletions

diff --git a/pkgs/astal/src/style/widget/launcher.scss b/pkgs/astal/src/style/widget/launcher.scss
index b39d292..3b05aca 100644
--- a/pkgs/astal/src/style/widget/launcher.scss
+++ b/pkgs/astal/src/style/widget/launcher.scss
@@ -1,10 +1,10 @@
 
 .launcher {
-    > box {
-        padding: 5em;
-        background: gtkalpha($bg, 0.7);
-        border-radius: $outer-radius;
-    }
+	> box {
+		padding: 5em;
+		background: gtkalpha($bg, 0.7);
+		border-radius: $outer-radius $outer-radius 0 0;
+	}
 
 	.search {
 		margin-bottom: 5em;
@@ -16,14 +16,15 @@
 	}
 
 	.app {
-    	background: transparent;
+		background: transparent;
 		padding: $outer-gap;
 		margin: $outer-gap;
 		border-radius: $outer-radius;
 		min-width: 15em;
 		min-height: 15em;
 
-		&:hover {
+		&:hover,
+		&.selected {
 			background: gtkalpha($hover-bg, .5);
 		}
 
diff --git a/pkgs/astal/src/widget/launcher.lua b/pkgs/astal/src/widget/launcher.lua
index ac69d65..7071432 100644
--- a/pkgs/astal/src/widget/launcher.lua
+++ b/pkgs/astal/src/widget/launcher.lua
@@ -14,14 +14,18 @@ local FlowBox = astalify(Gtk.FlowBox)
 local FlowBoxChild = astalify(Gtk.FlowBoxChild)
 
 local apps = Apps.Apps()
+
 local text = Variable("")
 local visible = Variable(false)
+local selection = Variable(1)
+
 local list = text(function(text)
 	return lib.slice(apps:exact_query(text), 0, MAX_ENTRIES)
 end)
 
 function on_show()
 	text:set("")
+	selection:set(1)
 end
 
 function hide()
@@ -29,23 +33,41 @@ function hide()
 end
 
 function on_key_press(self, event)
+	local pos = selection:get()
+
 	if event.keyval == Gdk.KEY_Escape then
 		hide()
+	elseif event.keyval == Gdk.KEY_Left or
+		event.keyval == Gdk.KEY_Down then
+		if pos > 1 then
+			selection:set(pos - 1)
+		end
+	elseif event.keyval == Gdk.KEY_Right or
+		event.keyval == Gdk.KEY_Up then
+		if pos < lib.count(list:get()) then
+			selection:set(pos + 1)
+		end
 	end
 end
 
 function on_enter()
-	local found = apps:exact_query(text:get())[1]
+	local found = apps:exact_query(text:get())[selection:get()]
 	if found then
 		found:launch()
 		hide()
 	end
 end
 
-function Application(app)
+function Application(app, idx)
 	return FlowBoxChild({
 		Widget.Button({
-			class_name = "app",
+			class_name = selection():as(function(c)
+				if c == idx then
+					return "app selected"
+				else
+					return "app"
+				end
+			end),
 			on_clicked = function()
 				app:launch()
 				hide()
@@ -88,6 +110,7 @@ function Launcher()
 			text = text(),
 			on_changed = function(self)
 				text:set(self.text)
+				selection:set(1)
 			end,
 			on_activate = on_enter,
 		}),