✨ ags(apps-window): new style for apps-window! it now looks more integrated to the shell design

ags/style/_apps-window.scss

@@ -5,7 +5,9 @@
 
 .apps-window-container {
   padding: 24px;
-  background: rgba(0, 0, 0, .2);
+  background: colors.$bg-translucent;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
 
   & > entry {
     background: rgba(colors.$bg-primary, .4);
@@ -27,7 +29,6 @@
     padding: 16px 24px;
 
     & > flowboxchild {
-
       & > button {
         padding: 8px;
         border-radius: 24px;
@@ -39,6 +40,7 @@
         & label {
           margin-top: 6px;
           text-shadow: 1px 1px 1px rgba(colors.$bg-primary, .2);
+          font-weight: 500;
         }
       }
 

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Frieren Underwater.jpg";
+$wallpaper: "/home/joaov/wallpapers/Frieren Night Film.jpeg";
 
 // Special
-$background: #0a1d30;
+$background: #16131b;
-$foreground: #c1c6cb;
+$foreground: #c4c4c6;
-$cursor: #c1c6cb;
+$cursor: #c4c4c6;
 
 // Colors
-$color0: #0a1d30;
+$color0: #16131b;
-$color1: #13A9D8;
+$color1: #5D6893;
-$color2: #4EAED3;
+$color2: #96768D;
-$color3: #2AC9EB;
+$color3: #5E98BA;
-$color4: #97A0AB;
+$color4: #6E9EC4;
-$color5: #D1B8B5;
+$color5: #A3969E;
-$color6: #9CB6CD;
+$color6: #BEB4BA;
-$color7: #93989d;
+$color7: #96909b;
-$color8: #606b76;
+$color8: #655d71;
-$color9: #6eadc0;
+$color9: #7080c2;
-$color10: #8abacd;
+$color10: #c87fb3;
-$color11: #84bdca;
+$color11: #85b1cb;
-$color12: #9cb2d4;
+$color12: #93b5d0;
-$color13: #e3c2bf;
+$color13: #d297ba;
-$color14: #afc8dd;
+$color14: #dfb4cf;
-$color15: #c1c6cb;
+$color15: #c4c4c6;

ags/window/AppsWindow.ts

@@ -2,6 +2,7 @@ import { GObject, Variable } from "astal";
 import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
 import { cleanExec, getAppIcon, getApps, getAstalApps } from "../scripts/apps";
 import AstalApps from "gi://AstalApps";
+import { BackgroundWindow } from "../widget/BackgroundWindow";
 
 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;
 
@@ -105,6 +106,8 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
         return button;
     }
 
+    const bgWindow = BackgroundWindow(null, () => window.close(), () => window.close());
+
     const window = new Widget.Window({
         namespace: "apps-window",
         layer: Astal.Layer.OVERLAY,
@@ -112,9 +115,9 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
         anchor: TOP | LEFT | RIGHT | BOTTOM,
         keymode: Astal.Keymode.EXCLUSIVE,
         monitor: mon,
+        marginTop: 64,
         onDestroy: () => {
-            searchString.set("");
+            bgWindow.close();
-            entry.text = "";
             searchSubscription?.();
             flowboxConnections.map(id => flowbox.disconnect(id));
         },
@@ -153,12 +156,16 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
                 orientation: Gtk.Orientation.VERTICAL,
                 children: [
                     entry,
-                    new Widget.Scrollable({
+                    new Widget.Box({
-                        vscroll: Gtk.PolicyType.AUTOMATIC,
+                        className: "apps-area",
-                        hscroll: Gtk.PolicyType.NEVER,
+                        child: new Widget.Scrollable({
-                        expand: true,
+                            vscroll: Gtk.PolicyType.AUTOMATIC,
-                        child: flowbox
+                            hscroll: Gtk.PolicyType.NEVER,
-                    } as Widget.ScrollableProps)
+                            overlayScrolling: true,
+                            expand: true,
+                            child: flowbox
+                        } as Widget.ScrollableProps)
+                    } as Widget.BoxProps)
                 ]
             } as Widget.BoxProps)
         } as Widget.EventBoxProps),