refractor bar unread notif indicator, add count option in settings

.config/quickshell/ii/modules/bar/BarContent.qml

@@ -299,42 +299,13 @@ Item { // Bar content region
                         reveal: Notifications.silent || Notifications.unread > 0
                         Layout.fillHeight: true
                         Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
-                        implicitHeight: reveal ? notificationIcon.implicitHeight : 0
+                        implicitHeight: reveal ? notificationUnreadCount.implicitHeight : 0
-                        implicitWidth: reveal ? notificationIcon.implicitWidth : 0
+                        implicitWidth: reveal ? notificationUnreadCount.implicitWidth : 0
                         Behavior on Layout.rightMargin {
                             animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
                         }
-                        Rectangle {
+                        NotificationUnreadCount {
-                            id: notifPing
+                            id: notificationUnreadCount
-                            visible: !Notifications.silent && Notifications.unread > 0
-                            property bool showUnreadCount: Config.options.bar.indicators.notifications.showUnreadCount
-                            anchors {
-                                right: parent.right
-                                top: parent.top
-                                rightMargin: showUnreadCount ? 0 : 1
-                                topMargin: showUnreadCount ? 0 : 3
-                            }
-                            radius: Appearance.rounding.full
-                            color: Appearance.colors.colOnLayer0
-                            z: 1
-
-                            implicitHeight: showUnreadCount ? Math.max(notificationCounterText.implicitWidth, notificationCounterText.implicitHeight) : 8
-                            implicitWidth: implicitHeight
-
-                            StyledText {
-                                id: notificationCounterText
-                                visible: notifPing.showUnreadCount
-                                anchors.centerIn: parent
-                                font.pixelSize: Appearance.font.pixelSize.smallest
-                                color: Appearance.colors.colLayer0
-                                text: Notifications.unread
-                            }
-                        }
-                        MaterialSymbol {
-                            id: notificationIcon
-                            text: Notifications.silent ? "notifications_paused" : "notifications"
-                            iconSize: Appearance.font.pixelSize.larger
-                            color: rightSidebarButton.colText
                         }
                     }
                     MaterialSymbol {

.config/quickshell/ii/modules/bar/NotificationUnreadCount.qml

@@ -0,0 +1,39 @@
+import QtQuick
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+
+MaterialSymbol {
+    id: root
+    readonly property bool showUnreadCount: Config.options.bar.indicators.notifications.showUnreadCount
+    text: Notifications.silent ? "notifications_paused" : "notifications"
+    iconSize: Appearance.font.pixelSize.larger
+    color: rightSidebarButton.colText
+
+    Rectangle {
+        id: notifPing
+        visible: !Notifications.silent && Notifications.unread > 0
+        anchors {
+            right: parent.right
+            top: parent.top
+            rightMargin: root.showUnreadCount ? 0 : 1
+            topMargin: root.showUnreadCount ? 0 : 3
+        }
+        radius: Appearance.rounding.full
+        color: Appearance.colors.colOnLayer0
+        z: 1
+
+        implicitHeight: root.showUnreadCount ? Math.max(notificationCounterText.implicitWidth, notificationCounterText.implicitHeight) : 8
+        implicitWidth: implicitHeight
+
+        StyledText {
+            id: notificationCounterText
+            visible: root.showUnreadCount
+            anchors.centerIn: parent
+            font.pixelSize: Appearance.font.pixelSize.smallest
+            color: Appearance.colors.colLayer0
+            text: Notifications.unread
+        }
+    }
+}

.config/quickshell/ii/modules/settings/BarConfig.qml

@@ -7,6 +7,19 @@ import qs.modules.common.widgets
 
 ContentPage {
     forceWidth: true
+
+    ContentSection {
+        icon: "notifications"
+        title: Translation.tr("Notifications")
+        ConfigSwitch {
+            buttonIcon: "counter_2"
+            text: Translation.tr("Unread indicator: show count")
+            checked: Config.options.bar.indicators.notifications.showUnreadCount
+            onCheckedChanged: {
+                Config.options.bar.indicators.notifications.showUnreadCount = checked;
+            }
+        }
+    }
     
     ContentSection {
         icon: "spoke"
@@ -130,57 +143,24 @@ ContentPage {
     }
 
     ContentSection {
-        icon: "workspaces"
+        icon: "shelf_auto_hide"
-        title: Translation.tr("Workspaces")
+        title: Translation.tr("Tray")
 
         ConfigSwitch {
-            buttonIcon: "counter_1"
+            buttonIcon: "keep"
-            text: Translation.tr('Always show numbers')
+            text: Translation.tr('Make icons pinned by default')
-            checked: Config.options.bar.workspaces.alwaysShowNumbers
+            checked: Config.options.bar.tray.invertPinnedItems
             onCheckedChanged: {
-                Config.options.bar.workspaces.alwaysShowNumbers = checked;
+                Config.options.bar.tray.invertPinnedItems = checked;
             }
         }
-
+        
-        ConfigSwitch {
-            buttonIcon: "award_star"
-            text: Translation.tr('Show app icons')
-            checked: Config.options.bar.workspaces.showAppIcons
-            onCheckedChanged: {
-                Config.options.bar.workspaces.showAppIcons = checked;
-            }
-        }
-
         ConfigSwitch {
             buttonIcon: "colors"
-            text: Translation.tr('Tint app icons')
+            text: Translation.tr('Tint icons')
-            checked: Config.options.bar.workspaces.monochromeIcons
+            checked: Config.options.bar.tray.monochromeIcons
             onCheckedChanged: {
-                Config.options.bar.workspaces.monochromeIcons = checked;
+                Config.options.bar.tray.monochromeIcons = checked;
-            }
-        }
-
-        ConfigSpinBox {
-            icon: "view_column"
-            text: Translation.tr("Workspaces shown")
-            value: Config.options.bar.workspaces.shown
-            from: 1
-            to: 30
-            stepSize: 1
-            onValueChanged: {
-                Config.options.bar.workspaces.shown = value;
-            }
-        }
-
-        ConfigSpinBox {
-            icon: "touch_long"
-            text: Translation.tr("Number show delay when pressing Super (ms)")
-            value: Config.options.bar.workspaces.showNumberDelay
-            from: 0
-            to: 1000
-            stepSize: 50
-            onValueChanged: {
-                Config.options.bar.workspaces.showNumberDelay = value;
             }
         }
     }
@@ -248,29 +228,6 @@ ContentPage {
         }
     }
 
-    ContentSection {
-        icon: "shelf_auto_hide"
-        title: Translation.tr("Tray")
-
-        ConfigSwitch {
-            buttonIcon: "keep"
-            text: Translation.tr('Make icons pinned by default')
-            checked: Config.options.bar.tray.invertPinnedItems
-            onCheckedChanged: {
-                Config.options.bar.tray.invertPinnedItems = checked;
-            }
-        }
-        
-        ConfigSwitch {
-            buttonIcon: "colors"
-            text: Translation.tr('Tint icons')
-            checked: Config.options.bar.tray.monochromeIcons
-            onCheckedChanged: {
-                Config.options.bar.tray.monochromeIcons = checked;
-            }
-        }
-    }
-
     ContentSection {
         icon: "cloud"
         title: Translation.tr("Weather")
@@ -283,4 +240,60 @@ ContentPage {
             }
         }
     }
+
+    ContentSection {
+        icon: "workspaces"
+        title: Translation.tr("Workspaces")
+
+        ConfigSwitch {
+            buttonIcon: "counter_1"
+            text: Translation.tr('Always show numbers')
+            checked: Config.options.bar.workspaces.alwaysShowNumbers
+            onCheckedChanged: {
+                Config.options.bar.workspaces.alwaysShowNumbers = checked;
+            }
+        }
+
+        ConfigSwitch {
+            buttonIcon: "award_star"
+            text: Translation.tr('Show app icons')
+            checked: Config.options.bar.workspaces.showAppIcons
+            onCheckedChanged: {
+                Config.options.bar.workspaces.showAppIcons = checked;
+            }
+        }
+
+        ConfigSwitch {
+            buttonIcon: "colors"
+            text: Translation.tr('Tint app icons')
+            checked: Config.options.bar.workspaces.monochromeIcons
+            onCheckedChanged: {
+                Config.options.bar.workspaces.monochromeIcons = checked;
+            }
+        }
+
+        ConfigSpinBox {
+            icon: "view_column"
+            text: Translation.tr("Workspaces shown")
+            value: Config.options.bar.workspaces.shown
+            from: 1
+            to: 30
+            stepSize: 1
+            onValueChanged: {
+                Config.options.bar.workspaces.shown = value;
+            }
+        }
+
+        ConfigSpinBox {
+            icon: "touch_long"
+            text: Translation.tr("Number show delay when pressing Super (ms)")
+            value: Config.options.bar.workspaces.showNumberDelay
+            from: 0
+            to: 1000
+            stepSize: 50
+            onValueChanged: {
+                Config.options.bar.workspaces.showNumberDelay = value;
+            }
+        }
+    }
 }

.config/quickshell/ii/modules/verticalBar/VerticalBarContent.qml

@@ -273,6 +273,20 @@ Item { // Bar content region
                         Layout.bottomMargin: indicatorsColumnLayout.realSpacing
                         color: rightSidebarButton.colText
                     }
+                    Revealer {
+                        vertical: true
+                        reveal: Notifications.silent || Notifications.unread > 0
+                        Layout.fillWidth: true
+                        Layout.bottomMargin: reveal ? indicatorsColumnLayout.realSpacing : 0
+                        implicitHeight: reveal ? notificationUnreadCount.implicitHeight : 0
+                        implicitWidth: reveal ? notificationUnreadCount.implicitWidth : 0
+                        Behavior on Layout.bottomMargin {
+                            animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
+                        }
+                        Bar.NotificationUnreadCount {
+                            id: notificationUnreadCount
+                        }
+                    }
                     MaterialSymbol {
                         Layout.bottomMargin: indicatorsColumnLayout.realSpacing
                         text: Network.materialSymbol