[Launcher] Setup

config/ags/launcher/ui/Launcher.tsx

@@ -0,0 +1,64 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk4"
+import { Variable } from "astal"
+
+function hide() {
+    App.get_window("launcher")!.hide()
+}
+
+export default function Launcher(monitor: Gdk.Monitor) {
+    const { CENTER } = Gtk.Align
+    const apps = new Apps.Apps()
+    const width = Variable(1000)
+
+    const text = Variable("")
+    const list = text(text => apps.fuzzy_query(text).slice(0, MAX_ITEMS))
+    const onEnter = () => {
+        apps.fuzzy_query(text.get())?.[0].launch()
+        hide()
+    }
+
+    return <window
+        name="launcher"
+        anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        keymode={Astal.Keymode.ON_DEMAND}
+        application={App}
+        onShow={(self) => {
+            text.set("")
+            width.set(self.get_current_monitor().workarea.width)
+        }}
+        onKeyPressEvent={function (self, event: Gdk.KeyEvent) {
+            if (event.get_keyval() === Gdk.KEY_Escape)
+                self.hide()
+        }}>
+        <box>
+            <eventbox widthRequest={width(w => w / 2)} expand onClick={hide} />
+            <box hexpand={false} vertical>
+                <eventbox heightRequest={100} onClick={hide} />
+                <box widthRequest={500} className="Applauncher" vertical>
+                    <entry
+                        placeholderText="Search"
+                        text={text()}
+                        onChanged={self => text.set(self.text)}
+                        onActivate={onEnter}
+                    />
+                    <box spacing={6} vertical>
+                        {list.as(list => list.map(app => (
+                            <AppButton app={app} />
+                        )))}
+                    </box>
+                    <box
+                        halign={CENTER}
+                        className="not-found"
+                        vertical
+                        visible={list.as(l => l.length === 0)}>
+                        <icon icon="system-search-symbolic" />
+                        <label label="No match found" />
+                    </box>
+                </box>
+                <eventbox expand onClick={hide} />
+            </box>
+            <eventbox widthRequest={width(w => w / 2)} expand onClick={hide} />
+        </box>
+    </window>
+}

config/ags/launcher/widget/Bar.tsx

@@ -1,36 +0,0 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk4"
-import { Variable } from "astal"
-
-const time = Variable("").poll(1000, "date")
-
-export default function Bar(gdkmonitor: Gdk.Monitor) {
-    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
-
-    return <window
-        visible
-        cssClasses={["Bar"]}
-        gdkmonitor={gdkmonitor}
-        exclusivity={Astal.Exclusivity.EXCLUSIVE}
-        anchor={TOP | LEFT | RIGHT}
-        application={App}>
-        <centerbox cssName="centerbox">
-            <button
-                onClicked="echo hello"
-                hexpand
-                halign={Gtk.Align.CENTER}
-            >
-                Welcome to AGS!
-            </button>
-            <box />
-            <menubutton
-                hexpand
-                halign={Gtk.Align.CENTER}
-            >
-                <label label={time()} />
-                <popover>
-                    <Gtk.Calendar />
-                </popover>
-            </menubutton>
-        </centerbox>
-    </window>
-}