feature: hide notifications count when 0 (#338)

* fix: hide notifications count when 0

* feat: add settings to control earlier behavious

* fix: lints and formatting

* Update widget/settings/pages/config/bar/index.ts

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

* fix: notifications css

* Update modules/bar/notifications/index.ts

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

modules/bar/notifications/index.ts

@@ -7,7 +7,7 @@ import Button from 'types/widgets/button.js';
 import { Attribute, Child } from 'lib/types/widget.js';
 import { runAsyncCommand, throttledScrollHandler } from 'customModules/utils.js';
 
-const { show_total, rightClick, middleClick, scrollUp, scrollDown } = options.bar.notifications;
+const { show_total, rightClick, middleClick, scrollUp, scrollDown, hideCountWhenZero } = options.bar.notifications;
 const { ignore } = options.notifications;
 
 const notifs = await Service.import('notifications');
@@ -32,8 +32,14 @@ export const Notifications = (): BarBoxChild => {
                 hpack: 'start',
                 class_name: 'bar-notifications',
                 children: Utils.merge(
-                    [notifs.bind('notifications'), notifs.bind('dnd'), show_total.bind('value'), ignore.bind('value')],
+                    [
-                    (notif, dnd, showTotal, ignoredNotifs) => {
+                        notifs.bind('notifications'),
+                        notifs.bind('dnd'),
+                        show_total.bind('value'),
+                        ignore.bind('value'),
+                        hideCountWhenZero.bind('value'),
+                    ],
+                    (notif, dnd, showTotal, ignoredNotifs, hideCountForZero) => {
                         const filteredNotifications = filterNotifications(notif, ignoredNotifs);
 
                         const notifIcon = Widget.Label({
@@ -49,6 +55,9 @@ export const Notifications = (): BarBoxChild => {
                         });
 
                         if (showTotal) {
+                            if (hideCountForZero && filteredNotifications.length === 0) {
+                                return [notifIcon];
+                            }
                             return [notifIcon, notifLabel];
                         }
                         return [notifIcon];

options.ts

@@ -942,6 +942,7 @@ const options = mkOptions(OPTIONS, {
         },
         notifications: {
             show_total: opt(false),
+            hideCountWhenZero: opt(false),
             rightClick: opt(''),
             middleClick: opt(''),
             scrollUp: opt(''),

scss/style/bar/notifications.scss

@@ -28,6 +28,10 @@
             $bar-buttons-radius
         );
         color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
+
+        &:last-child {
+            border-radius: $bar-buttons-radius;
+        }
     }
 
     .bar-button-label.notifications {

widget/settings/pages/config/bar/index.ts

@@ -743,6 +743,12 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
                     title: 'Show Total # of notifications',
                     type: 'boolean',
                 }),
+                Option({
+                    opt: options.bar.notifications.hideCountWhenZero,
+                    title: 'Auto Hide Label',
+                    subtitle: 'Hide Total # of notifications when zero',
+                    type: 'boolean',
+                }),
                 Option({
                     opt: options.theme.bar.buttons.notifications.spacing,
                     title: 'Inner Spacing',