✨ ags(bar/status): add notification floating dot

ags/style/_bar.scss

@@ -212,25 +212,6 @@
     & > box {
       padding: 0 8px;
 
-      & > * > * {
-        margin: 0 2px;
-      }
-
-      & trough {
-        min-width: 65px;
-        min-height: 10px;
-        margin-right: 4px;
-      }
-
-      & slider {
-        min-width: 10px;
-        min-height: 10px;
-      }
-
-      & highlight {
-        min-height: 10px;
-      }
-
       & .nf {
         margin: {
           right: 3px;
@@ -241,10 +222,12 @@
       }
 
       & .status-icons {
-        padding: 0 4px;
+        padding-left: 4px;
 
-        & > * {
+        & .notification-count {
-          margin: 0 4px;
+          font-size: 5px;
+          margin-left: -3px;
+          margin-top: 1px;
         }
       }
     }

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Bocchi The Rock!.png";
+$wallpaper: "/home/joaov/wallpapers/Nijika Train.jpeg";
 
 // Special
-$background: #0a0a0c;
+$background: #11151b;
-$foreground: #c1c1c2;
+$foreground: #c3c4c6;
-$cursor: #c1c1c2;
+$cursor: #c3c4c6;
 
 // Colors
-$color0: #0a0a0c;
+$color0: #11151b;
-$color1: #935d6d;
+$color1: #967557;
-$color2: #967e84;
+$color2: #4f5869;
-$color3: #ac8486;
+$color3: #665d63;
-$color4: #bcae7a;
+$color4: #576872;
-$color5: #a49c9c;
+$color5: #787375;
-$color6: #bcb79c;
+$color6: #998c7f;
-$color7: #8a8a96;
+$color7: #90949a;
-$color8: #565669;
+$color8: #5c6371;
-$color9: #C57C92;
+$color9: #C99D75;
-$color10: #C9A9B0;
+$color10: #6A768C;
-$color11: #E6B1B3;
+$color11: #897C84;
-$color12: #FBE8A3;
+$color12: #748B99;
-$color13: #DBD1D0;
+$color13: #A19A9D;
-$color14: #FBF5D1;
+$color14: #CDBBAA;
-$color15: #c1c1c2;
+$color15: #c3c4c6;

ags/widget/bar/Status.ts

@@ -113,24 +113,14 @@ function StatusIcons(): Gtk.Widget {
 
     return new Widget.Box({
         className: "status-icons",
+        spacing: 3,
         children: [
-            new Widget.Label({
-                className: "bluetooth nf state",
-                visible: bind(AstalBluetooth.get_default(), "adapter").as(Boolean),
-                label: bluetoothIcon(),
-                onDestroy: () => bluetoothIcon.drop()
-            } as Widget.LabelProps),
-            new Widget.Label({
-                className: "network nf state",
-                label: networkIcon(),
-                onDestroy: () => networkIcon.drop()
-            } as Widget.LabelProps),
             new Widget.Revealer({
                 revealChild: bind(Recording.getDefault(), "recording"),
                 transitionDuration: 500,
                 transitionType: Gtk.RevealerTransitionType.SLIDE_LEFT,
-                setup: (revealer) => revealer.add(
+                onDestroy: () => recordingTimer.drop(),
-                    new Widget.EventBox({
+                child: new Widget.EventBox({
                     onClick: () => Recording.getDefault().recording &&
                         Recording.getDefault().stopRecording(),
                     tooltipText: tr("control_center.tiles.recording.enabled_desc"),
@@ -147,13 +137,35 @@ function StatusIcons(): Gtk.Widget {
                         ]
                     } as Widget.BoxProps)
                 } as Widget.EventBoxProps)
-                )
             } as Widget.RevealerProps),
+            new Widget.Label({
+                className: "bluetooth nf state",
+                visible: bind(AstalBluetooth.get_default(), "adapter").as(Boolean),
+                label: bluetoothIcon(),
+                onDestroy: () => bluetoothIcon.drop()
+            } as Widget.LabelProps),
+            new Widget.Label({
+                className: "network nf state",
+                label: networkIcon(),
+                onDestroy: () => networkIcon.drop()
+            } as Widget.LabelProps),
+            new Widget.Box({
+                children: [
                     new Widget.Label({
                         className: "bell nf state",
                         label: bind(Notifications.getDefault().getNotifd(), "dontDisturb").as((dnd: boolean) => 
                             dnd ? "󰂠" : "󰂚")
                     } as Widget.LabelProps),
+                    new Widget.Label({
+                        className: "notification-count nf",
+                        xalign: 0,
+                        yalign: 0.25,
+                        visible: bind(Notifications.getDefault(), "history").as(history => 
+                            history.length > 0),
+                        label: '󰧞'
+                    } as Widget.LabelProps)
+                ]
+            } as Widget.BoxProps)
         ]
     } as Widget.BoxProps);
 }