✨ ags(bar/apps): change style on apps-window state changed

ags/style/_bar.scss

@@ -251,14 +251,13 @@
         font-size: 14px;
       }
     }
-    &:hover {
-      & > box {
+    &:hover > box,
+    &.open > box {
         background: colors.$bg-primary;
+    }
 
-        & > icon {
-          -gtk-icon-transform: scale(1.14);
-        }
-      }
+    &:hover > box > icon {
+      -gtk-icon-transform: scale(1.14);
     }
   }
 }

ags/widget/bar/Apps.ts

@@ -1,11 +1,13 @@
 import { Gtk, Widget } from "astal/gtk3";
 import { tr } from "../../i18n/intl";
 import { Windows } from "../../windows";
+import { bind } from "astal";
 
 export function Apps(): Gtk.Widget {
     return new Widget.EventBox({
         onClickRelease: () => Windows.open("apps-window"),
-        className: "apps",
+        className: bind(Windows, "openWindows").as((openWindows) => 
+            Object.hasOwn(openWindows, "apps-window") ? "apps open" : "apps"),
         child: new Widget.Box({
             child: new Widget.Icon({
                 tooltipText: tr("bar.apps.tooltip"),