From 779ec440e209b01d3a44f9377af78653d197fdc8 Mon Sep 17 00:00:00 2001
From: Aylur <k.demeter@protonmail.com>
Date: Thu, 7 Nov 2024 02:40:47 +0000
Subject: example: applauncher

---
 examples/js/applauncher/widget/Applauncher.scss | 45 +++++++++++++++
 examples/js/applauncher/widget/Applauncher.tsx  | 73 +++++++++++++++++++++++++
 2 files changed, 118 insertions(+)
 create mode 100644 examples/js/applauncher/widget/Applauncher.scss
 create mode 100644 examples/js/applauncher/widget/Applauncher.tsx

(limited to 'examples/js/applauncher/widget')

diff --git a/examples/js/applauncher/widget/Applauncher.scss b/examples/js/applauncher/widget/Applauncher.scss
new file mode 100644
index 0000000..86c5e87
--- /dev/null
+++ b/examples/js/applauncher/widget/Applauncher.scss
@@ -0,0 +1,45 @@
+@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: .8rem;
+        box-shadow: 2px 3px 8px 0 gtkalpha(black, .4);
+
+        entry {
+            margin-bottom: .8rem;
+        }
+
+        button {
+            min-width: 0;
+            min-height: 0;
+            padding: .5rem;
+
+            icon {
+                font-size: 3em;
+                margin-right: .3rem;
+            }
+
+            label.name {
+                font-weight: bold;
+                font-size: 1.1em
+            }
+
+            label.description {
+                color: gtkalpha($fg-color, .8);
+            }
+        }
+    }
+}
diff --git a/examples/js/applauncher/widget/Applauncher.tsx b/examples/js/applauncher/widget/Applauncher.tsx
new file mode 100644
index 0000000..d92b5e3
--- /dev/null
+++ b/examples/js/applauncher/widget/Applauncher.tsx
@@ -0,0 +1,73 @@
+import Apps from "gi://AstalApps"
+import { App, Astal, Gdk, Gtk } from "astal/gtk3"
+import { Variable } from "astal"
+
+const MAX_ITEMS = 8
+
+function AppButton({ app }: { app: Apps.Application }) {
+    return <button className="AppButton" onClicked={() => app.launch()}>
+        <box>
+            <icon icon={app.iconName} />
+            <box valign={Gtk.Align.CENTER} vertical>
+                <label
+                    className="name"
+                    truncate
+                    xalign={0}
+                    label={app.name}
+                />
+                {app.description && <label
+                    className="description"
+                    wrap
+                    xalign={0}
+                    label={app.description}
+                />}
+            </box>
+        </box>
+    </button>
+}
+
+export default function Applauncher() {
+    const apps = new Apps.Apps()
+    const list = Variable(apps.get_list().slice(0, MAX_ITEMS))
+    const hide = () => App.get_window("launcher")!.hide()
+
+    function search(text: string) {
+        list.set(apps.fuzzy_query(text).slice(0, MAX_ITEMS))
+    }
+
+    return <window
+        name="launcher"
+        anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        keymode={Astal.Keymode.ON_DEMAND}
+        application={App}
+        onShow={() => list.set(apps.get_list().slice(0, MAX_ITEMS))}
+        onKeyPressEvent={function (self, event: Gdk.Event) {
+            if (event.get_keyval()[1] === Gdk.KEY_Escape)
+                self.hide()
+        }}>
+        <box>
+            <eventbox widthRequest={4000} expand onClick={hide} />
+            <box hexpand={false} vertical>
+                <eventbox heightRequest={100} onClick={hide} />
+                <box widthRequest={500} className="Applauncher" vertical>
+                    <entry
+                        placeholderText="Search"
+                        onChanged={({ text }) => search(text)}
+                    />
+                    <box spacing={6} vertical>
+                        {list(list => list.map(app => (
+                            <AppButton app={app} />
+                        )))}
+                    </box>
+                    <box visible={list(l => l.length === 0)}>
+                        <icon icon="system-search-symbolic" />
+                        No match found
+                    </box>
+                </box>
+                <eventbox expand onClick={hide} />
+            </box>
+            <eventbox widthRequest={4000} expand onClick={hide} />
+        </box>
+    </window>
+}
-- 
cgit v1.2.3


From 48b6b0742fb21a298985dc6c86605099e6d5abd1 Mon Sep 17 00:00:00 2001
From: Aylur <k.demeter@protonmail.com>
Date: Fri, 8 Nov 2024 20:54:11 +0000
Subject: example: fix applauncher text reset

---
 examples/js/applauncher/widget/Applauncher.scss | 14 ++++++++++++++
 examples/js/applauncher/widget/Applauncher.tsx  | 24 ++++++++++++++----------
 2 files changed, 28 insertions(+), 10 deletions(-)

(limited to 'examples/js/applauncher/widget')

diff --git a/examples/js/applauncher/widget/Applauncher.scss b/examples/js/applauncher/widget/Applauncher.scss
index 86c5e87..ae2453d 100644
--- a/examples/js/applauncher/widget/Applauncher.scss
+++ b/examples/js/applauncher/widget/Applauncher.scss
@@ -41,5 +41,19 @@ window#launcher {
                 color: gtkalpha($fg-color, .8);
             }
         }
+
+        box.not-found {
+            padding: 1rem;
+
+            icon {
+                font-size: 6em;
+                color: gtkalpha($fg-color, .7);
+            }
+
+            label {
+                color: gtkalpha($fg-color, .9);
+                font-size: 1.2em;
+            }
+        }
     }
 }
diff --git a/examples/js/applauncher/widget/Applauncher.tsx b/examples/js/applauncher/widget/Applauncher.tsx
index d92b5e3..f52780b 100644
--- a/examples/js/applauncher/widget/Applauncher.tsx
+++ b/examples/js/applauncher/widget/Applauncher.tsx
@@ -27,13 +27,12 @@ function AppButton({ app }: { app: Apps.Application }) {
 }
 
 export default function Applauncher() {
+    const { CENTER } = Gtk.Align
     const apps = new Apps.Apps()
-    const list = Variable(apps.get_list().slice(0, MAX_ITEMS))
-    const hide = () => App.get_window("launcher")!.hide()
 
-    function search(text: string) {
-        list.set(apps.fuzzy_query(text).slice(0, MAX_ITEMS))
-    }
+    const text = Variable("")
+    const list = text(text => apps.fuzzy_query(text).slice(0, MAX_ITEMS))
+    const hide = () => App.get_window("launcher")!.hide()
 
     return <window
         name="launcher"
@@ -41,7 +40,7 @@ export default function Applauncher() {
         exclusivity={Astal.Exclusivity.IGNORE}
         keymode={Astal.Keymode.ON_DEMAND}
         application={App}
-        onShow={() => list.set(apps.get_list().slice(0, MAX_ITEMS))}
+        onShow={() => text.set("")}
         onKeyPressEvent={function (self, event: Gdk.Event) {
             if (event.get_keyval()[1] === Gdk.KEY_Escape)
                 self.hide()
@@ -53,16 +52,21 @@ export default function Applauncher() {
                 <box widthRequest={500} className="Applauncher" vertical>
                     <entry
                         placeholderText="Search"
-                        onChanged={({ text }) => search(text)}
+                        text={text()}
+                        onChanged={self => text.set(self.text)}
                     />
                     <box spacing={6} vertical>
-                        {list(list => list.map(app => (
+                        {list.as(list => list.map(app => (
                             <AppButton app={app} />
                         )))}
                     </box>
-                    <box visible={list(l => l.length === 0)}>
+                    <box
+                        halign={CENTER}
+                        className="not-found"
+                        vertical
+                        visible={list.as(l => l.length === 0)}>
                         <icon icon="system-search-symbolic" />
-                        No match found
+                        <label label="No match found" />
                     </box>
                 </box>
                 <eventbox expand onClick={hide} />
-- 
cgit v1.2.3


From 302fcae7ae0b58767518e6003d0a80966d7ca4bb Mon Sep 17 00:00:00 2001
From: Aylur <k.demeter@protonmail.com>
Date: Fri, 8 Nov 2024 21:23:07 +0000
Subject: example(applauncher): hide on app launch

---
 examples/js/applauncher/widget/Applauncher.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'examples/js/applauncher/widget')

diff --git a/examples/js/applauncher/widget/Applauncher.tsx b/examples/js/applauncher/widget/Applauncher.tsx
index f52780b..c7bac68 100644
--- a/examples/js/applauncher/widget/Applauncher.tsx
+++ b/examples/js/applauncher/widget/Applauncher.tsx
@@ -4,8 +4,14 @@ import { Variable } from "astal"
 
 const MAX_ITEMS = 8
 
+function hide() {
+    App.get_window("launcher")!.hide()
+}
+
 function AppButton({ app }: { app: Apps.Application }) {
-    return <button className="AppButton" onClicked={() => app.launch()}>
+    return <button
+        className="AppButton"
+        onClicked={() => { hide(); app.launch() }}>
         <box>
             <icon icon={app.iconName} />
             <box valign={Gtk.Align.CENTER} vertical>
@@ -32,7 +38,10 @@ export default function Applauncher() {
 
     const text = Variable("")
     const list = text(text => apps.fuzzy_query(text).slice(0, MAX_ITEMS))
-    const hide = () => App.get_window("launcher")!.hide()
+    const onEnter = () => {
+        apps.fuzzy_query(text.get())?.[0].launch()
+        hide()
+    }
 
     return <window
         name="launcher"
@@ -54,6 +63,7 @@ export default function Applauncher() {
                         placeholderText="Search"
                         text={text()}
                         onChanged={self => text.set(self.text)}
+                        onActivate={onEnter}
                     />
                     <box spacing={6} vertical>
                         {list.as(list => list.map(app => (
-- 
cgit v1.2.3