✨ 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;
 
-        & > * {
-          margin: 0 4px;
+        & .notification-count {
+          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;
-$foreground: #c1c1c2;
-$cursor: #c1c1c2;
+$background: #11151b;
+$foreground: #c3c4c6;
+$cursor: #c3c4c6;
 
 // Colors
-$color0: #0a0a0c;
-$color1: #935d6d;
-$color2: #967e84;
-$color3: #ac8486;
-$color4: #bcae7a;
-$color5: #a49c9c;
-$color6: #bcb79c;
-$color7: #8a8a96;
-$color8: #565669;
-$color9: #C57C92;
-$color10: #C9A9B0;
-$color11: #E6B1B3;
-$color12: #FBE8A3;
-$color13: #DBD1D0;
-$color14: #FBF5D1;
-$color15: #c1c1c2;
+$color0: #11151b;
+$color1: #967557;
+$color2: #4f5869;
+$color3: #665d63;
+$color4: #576872;
+$color5: #787375;
+$color6: #998c7f;
+$color7: #90949a;
+$color8: #5c6371;
+$color9: #C99D75;
+$color10: #6A768C;
+$color11: #897C84;
+$color12: #748B99;
+$color13: #A19A9D;
+$color14: #CDBBAA;
+$color15: #c3c4c6;

ags/widget/bar/Status.ts

@@ -113,7 +113,31 @@ function StatusIcons(): Gtk.Widget {
 
     return new Widget.Box({
         className: "status-icons",
+        spacing: 3,
         children: [
+            new Widget.Revealer({
+                revealChild: bind(Recording.getDefault(), "recording"),
+                transitionDuration: 500,
+                transitionType: Gtk.RevealerTransitionType.SLIDE_LEFT,
+                onDestroy: () => recordingTimer.drop(),
+                child: new Widget.EventBox({
+                    onClick: () => Recording.getDefault().recording &&
+                        Recording.getDefault().stopRecording(),
+                    tooltipText: tr("control_center.tiles.recording.enabled_desc"),
+                    child: new Widget.Box({
+                        children: [
+                            new Widget.Label({
+                                className: "recording nf state",
+                                label: '󰻃'
+                            } as Widget.LabelProps),
+                            new Widget.Label({
+                                className: "rec-time",
+                                label: recordingTimer()
+                            } as Widget.LabelProps)
+                        ]
+                    } as Widget.BoxProps)
+                } as Widget.EventBoxProps)
+            } as Widget.RevealerProps),
             new Widget.Label({
                 className: "bluetooth nf state",
                 visible: bind(AstalBluetooth.get_default(), "adapter").as(Boolean),
@@ -125,35 +149,23 @@ function StatusIcons(): Gtk.Widget {
                 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(
-                    new Widget.EventBox({
-                        onClick: () => Recording.getDefault().recording &&
-                            Recording.getDefault().stopRecording(),
-                        tooltipText: tr("control_center.tiles.recording.enabled_desc"),
-                        child: new Widget.Box({
-                            children: [
-                                new Widget.Label({
-                                    className: "recording nf state",
-                                    label: '󰻃'
-                                } as Widget.LabelProps),
-                                new Widget.Label({
-                                    className: "rec-time",
-                                    label: recordingTimer()
-                                } as Widget.LabelProps)
-                            ]
-                        } as Widget.BoxProps)
-                    } as Widget.EventBoxProps)
-                )
-            } as Widget.RevealerProps),
-            new Widget.Label({
-                className: "bell nf state",
-                label: bind(Notifications.getDefault().getNotifd(), "dontDisturb").as((dnd: boolean) => 
-                    dnd ? "󰂠" : "󰂚")
-            } 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);
 }