✨ feat(bar/animations): add scale animation on apps button, fade animation on ws numbers

ags/style/_bar.scss

@@ -73,9 +73,17 @@
         }
       }
 
+      &.show {
+        // Smooth showing
+        & label.id {
+          opacity: 1;
+        }
+      }
+
       & label.id {
         font-weight: 600;
         margin-right: 4px;
+        opacity: 0;
       }
 
       & icon {
@@ -235,15 +243,34 @@
     & > box {
       border-radius: 12px;
       transition: 100ms linear;
-      padding: 0 8px;
+      min-width: 28px;
+      padding: 0 4px;
 
-      & > label {
+      & > icon {
+        transition: 120ms linear;
         font-size: 14px;
       }
     }
     &:hover {
       & > box {
         background: colors.$bg-primary;
+
+        & > icon {
+          font-size: 15px;
+          -gtk-icon-transform: scale(1.12);
+        }
+      }
+    }
+    &:active {
+      & > box {
+        @include mixins.hover-shadow;
+
+        background: colors.$bg-primary;
+
+        & > icon {
+          font-size: 15px;
+          -gtk-icon-transform: scale(1);
+        } 
       }
     }
   }

ags/style/_control-center.scss

@@ -72,12 +72,21 @@ box.history {
   border-radius: 24px;
   padding: 20px 14px;
 
+  & .notifications {
+    & .notification {
+      background: colors.$bg-primary;
+    }
+  }
+
   & > .button-row {
     margin-top: 12px;
     & button {
+      padding: 6px;
+
       & label.nf {
         font-size: 16px;
       }
+
       & label:not(.nf) {
         font-size: 12px;
         font-weight: 600;

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Balcony Girl.png";
+$wallpaper: "/home/joaov/wallpapers/Gumi Bridge.jpg";
 
 // Special
-$background: #191c24;
+$background: #253d36;
-$foreground: #c5c6c8;
+$foreground: #c8cecc;
-$cursor: #c5c6c8;
+$cursor: #c8cecc;
 
 // Colors
-$color0: #191c24;
+$color0: #253d36;
-$color1: #6F7587;
+$color1: #2FA4CE;
-$color2: #798C8F;
+$color2: #56B5D4;
-$color3: #9E9A99;
+$color3: #5FC1CA;
-$color4: #C9B196;
+$color4: #63CBDF;
-$color5: #D1BAAA;
+$color5: #B1BBA4;
-$color6: #DBC7A5;
+$color6: #9BD7E1;
-$color7: #94969e;
+$color7: #9ca6a3;
-$color8: #616777;
+$color8: #6c847e;
-$color9: #7486c3;
+$color9: #77b0c5;
-$color10: #7dbac7;
+$color10: #8ebfcf;
-$color11: #d2a495;
+$color11: #8ec9cf;
-$color12: #dac4ab;
+$color12: #9ccbd4;
-$color13: #e1cab9;
+$color13: #c5daab;
-$color14: #e2d4bc;
+$color14: #badce1;
-$color15: #c5c6c8;
+$color15: #c8cecc;

ags/widget/bar/Apps.ts

@@ -7,11 +7,12 @@ export function Apps(): Gtk.Widget {
         onClickRelease: () => Windows.getWindow("apps-window")?.show(),
         className: "apps",
         child: new Widget.Box({
-            child: new Widget.Label({
+            child: new Widget.Icon({
-                className: "nf",
                 tooltipText: tr("bar.apps.tooltip"),
-                label: ""
+                icon: "applications-other-symbolic",
-            } as Widget.LabelProps)
+                halign: Gtk.Align.CENTER,
+                hexpand: true
+            } as Widget.IconProps)
         } as Widget.BoxProps)
     } as Widget.EventBoxProps);
 }

ags/widget/bar/Workspaces.ts

@@ -19,8 +19,12 @@ export function Workspaces(): Gtk.Widget {
 
                 return sortedWorkspaces.map((workspace: AstalHyprland.Workspace) => 
                     new Widget.Button({
-                        className: bind(hyprland, "focusedWorkspace").as(
+                        className: Variable.derive([
-                            (focusedWs: AstalHyprland.Workspace) => workspace.id === focusedWs.id ? "focus" : ""),
+                            bind(hyprland, "focusedWorkspace"),
+                            showWorkspaceNumbers()
+                        ], (focusedWs, showWsNumbers) =>
+                            `${focusedWs.id === workspace.id ? "focus" : ""} ${showWsNumbers ? "show" : ""}`
+                        )(),
                         visible: true,
                         tooltipText: bind(workspace, "lastClient").as((lastClient) => `Workspace ${workspace.id}${ lastClient ? ` - ${
                             !lastClient.title.toLowerCase().includes(lastClient.class) ?

ags/widget/control-center/NotifHistory.ts

@@ -29,7 +29,7 @@ export const NotifHistory: Gtk.Widget = new Widget.Box({
                 valign: Gtk.Align.START,
                 children: bind(Notifications.getDefault(), "history").as((history: Array<HistoryNotification>) =>
                     history.map((notification: HistoryNotification) => NotificationWidget(notification, 
-                        () => Notifications.getDefault().removeHistory(notification.id))
+                        () => Notifications.getDefault().removeHistory(notification.id), true)
                 ))
             } as Widget.BoxProps)
         } as Widget.ScrollableProps),