From db99f77c26070add13de3eaa44e1394c474bb37b Mon Sep 17 00:00:00 2001
From: tux <t@tux.rs>
Date: Mon, 16 Jun 2025 23:16:07 +0530
Subject: [PATCH] feat: add minimal styles

---
 widgets/app-launcher/index.tsx  | 53 ++++++++++++++-------------------
 widgets/app-launcher/style.scss | 20 +++++++++++--
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/widgets/app-launcher/index.tsx b/widgets/app-launcher/index.tsx
index cba7df1..fc084e9 100644
--- a/widgets/app-launcher/index.tsx
+++ b/widgets/app-launcher/index.tsx
@@ -14,7 +14,7 @@ const hide = () => {
 const AppButton = ({ app }: { app: AstalApps.Application }) => {
   return (
     <button
-      cssClasses={["app-button"]}
+      cssClasses={["button"]}
       onClicked={() => {
         hide();
         app.launch();
@@ -33,7 +33,7 @@ const AppList = () => {
 
   return (
     <Gtk.ScrolledWindow vexpand heightRequest={500} widthRequest={300}>
-      <box vertical spacing={6} cssClasses={["app-list"]}>
+      <box vertical spacing={6} cssClasses={["list"]}>
         {appList.as((list) => list.map((app) => <AppButton app={app} />))}
       </box>
     </Gtk.ScrolledWindow>
@@ -46,36 +46,26 @@ const AppSearch = () => {
     hide();
   };
   return (
-    <overlay cssClasses={["entry-overlay"]} heightRequest={100}>
-      <Gtk.ScrolledWindow heightRequest={100}>
-        <Picture
-          file={Gio.file_new_for_path("/home/tux/Wallpapers/5m5kLI9.png")}
-          contentFit={Gtk.ContentFit.COVER}
-          overflow={Gtk.Overflow.HIDDEN}
-        />
-      </Gtk.ScrolledWindow>
-      <entry
-        type="overlay"
-        vexpand
-        text={text.get()}
-        primaryIconName={"system-search-symbolic"}
-        placeholderText="Search..."
-        onChanged={(self) => text.set(self.text)}
-        onActivate={onEnter}
-        setup={(self) => {
-          hook(self, App, "window-toggled", (_, win) => {
-            const winName = win.name;
-            const visible = win.visible;
+    <entry
+      cssClasses={["search"]}
+      vexpand
+      text={text.get()}
+      placeholderText="Search..."
+      onChanged={(self) => text.set(self.text)}
+      onActivate={onEnter}
+      setup={(self) => {
+        hook(self, App, "window-toggled", (_, win) => {
+          const winName = win.name;
+          const visible = win.visible;
 
-            if (winName == WINDOW_NAME && visible) {
-              text.set("");
-              self.set_text("");
-              self.grab_focus();
-            }
-          });
-        }}
-      />
-    </overlay>
+          if (winName == WINDOW_NAME && visible) {
+            text.set("");
+            self.set_text("");
+            self.grab_focus();
+          }
+        });
+      }}
+    />
   );
 };
 
@@ -96,6 +86,7 @@ export const AppLauncher = (gdkmonitor: Gdk.Monitor) => {
     >
       <box vertical spacing={6}>
         <AppSearch />
+        <Gtk.Separator orientation={Gtk.Orientation.HORIZONTAL} />
         <AppList />
       </box>
     </window>
diff --git a/widgets/app-launcher/style.scss b/widgets/app-launcher/style.scss
index 16e6499..4f2a606 100644
--- a/widgets/app-launcher/style.scss
+++ b/widgets/app-launcher/style.scss
@@ -3,12 +3,28 @@ window.app-launcher {
   border-radius: $rounded;
   padding: 10px;
 
-  .app-list {
+  .search {
+    min-width: 300px;
+    padding: 10px;
+    color: rgba($fg-color, 0.5);
+  }
+
+  separator {
+    border: 1px solid rgba($inactive-color, 0.5);
+  }
+
+  .list {
     background: $bg-color;
   }
 
-  .app-button {
+  .button {
     border-radius: $rounded;
+    padding: 10px;
+
+    &:hover,
+    &:focus {
+      background: $inactive-color;
+    }
   }
 
   .name {