Notifications: proper display on selected screen

Modules/Bar/Bar.qml

@@ -19,6 +19,7 @@ Variants {
     implicitHeight: Style.barHeight * scaling
     color: "transparent"
 
+    // If no bar display activated in settings, then show them all
     visible: modelData ? (Settings.data.bar.monitors.includes(modelData.name)
                           || (Settings.data.bar.monitors.length === 0)) : false
 

Modules/Dock/Dock.qml

@@ -40,7 +40,7 @@ NLoader {
         PanelWindow {
           id: dockWindow
 
-          // Dock works differently from bar, it is show only if toggled in Settings/Display
+          // Dock is only shown if explicitely toggled
           visible: modelData ? Settings.data.dock.monitors.includes(modelData.name) : false
 
           screen: modelData

Modules/Notification/Notification.qml

@@ -8,34 +8,41 @@ import qs.Services
 import qs.Widgets
 
 // Simple notification popup - displays multiple notifications
+Variants {
+  model: Quickshell.screens
+
   PanelWindow {
     id: root
 
+    required property ShellScreen modelData
     readonly property real scaling: Scaling.scale(screen)
 
+    // Access the notification model from the service
+    property ListModel notificationModel: NotificationService.notificationModel
+
+    // Track notifications being removed for animation
+    property var removingNotifications: ({})
+
+    screen: modelData
     color: "transparent"
-  visible: notificationService.notificationModel.count > 0
+
+    // If no notification display activated in settings, then show them all
+    visible: modelData ? (Settings.data.notifications.monitors.includes(modelData.name)
+                          || (Settings.data.notifications.monitors.length === 0))
+                         && (NotificationService.notificationModel.count > 0) : false
+
     anchors.top: true
     anchors.right: true
     margins.top: (Style.barHeight + Style.marginMedium) * scaling
     margins.right: Style.marginMedium * scaling
     implicitWidth: 360 * scaling
-  implicitHeight: Math.min(notificationStack.implicitHeight, (notificationService.maxVisible * 120) * scaling)
+    implicitHeight: Math.min(notificationStack.implicitHeight, (NotificationService.maxVisible * 120) * scaling)
     WlrLayershell.layer: WlrLayer.Overlay
     WlrLayershell.exclusionMode: ExclusionMode.Ignore
 
-  // Use the notification service singleton
-  property var notificationService: NotificationService
-
-  // Access the notification model from the service
-  property ListModel notificationModel: notificationService.notificationModel
-
-  // Track notifications being removed for animation
-  property var removingNotifications: ({})
-
     // Connect to animation signal from service
     Component.onCompleted: {
-    notificationService.animateAndRemove.connect(function (notification, index) {
+      NotificationService.animateAndRemove.connect(function (notification, index) {
         // Find the delegate and trigger its animation
         if (notificationStack.children && notificationStack.children[index]) {
           let delegate = notificationStack.children[index]
@@ -95,7 +102,7 @@ PanelWindow {
             interval: Style.animationSlow
             repeat: false
             onTriggered: {
-            notificationService.forceRemoveNotification(model.rawNotification)
+              NotificationService.forceRemoveNotification(model.rawNotification)
             }
           }
 
@@ -147,7 +154,7 @@ PanelWindow {
                 Layout.fillWidth: true
               }
               NText {
-              text: notificationService.formatTimestamp(model.timestamp)
+                text: NotificationService.formatTimestamp(model.timestamp)
                 color: Colors.mOnSurface
                 font.pointSize: Style.fontSizeSmall * scaling
               }
@@ -190,3 +197,4 @@ PanelWindow {
       }
     }
   }
+}

Modules/Settings/Tabs/DisplayTab.qml

@@ -47,6 +47,95 @@ Item {
           color: Colors.mOnSurface
         }
 
+        NText {
+          text: "By default, all bars are displayed. Select one or more below to narrow your view."
+          font.pointSize: Style.fontSize * scaling
+          color: Colors.mOnSurfaceVariant
+        }
+
+        Repeater {
+          model: Quickshell.screens || []
+          delegate: Rectangle {
+            Layout.fillWidth: true
+            radius: Style.radiusMedium * scaling
+            color: Colors.mSurface
+            border.color: Colors.mOutline
+            border.width: Math.max(1, Style.borderThin * scaling)
+            implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
+
+            ColumnLayout {
+              id: contentCol
+              anchors.fill: parent
+              anchors.margins: Style.marginLarge * scaling
+              spacing: Style.marginTiniest * scaling
+
+              NText {
+                text: (modelData.name || "Unknown")
+                font.pointSize: Style.fontSizeLarge * scaling
+                font.weight: Style.fontWeightBold
+                color: Colors.mSecondary
+              }
+
+              NText {
+                text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})`
+                font.pointSize: Style.fontSizeSmall * scaling
+                color: Colors.mOnSurface
+              }
+
+              ColumnLayout {
+                spacing: Style.marginLarge * scaling
+
+                NToggle {
+                  label: "Bar"
+                  description: "Enable the top bar on this monitor"
+                  value: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
+                  onToggled: function (newValue) {
+                    if (newValue) {
+                      Settings.data.bar.monitors = addMonitor(Settings.data.bar.monitors, modelData.name)
+                    } else {
+                      Settings.data.bar.monitors = removeMonitor(Settings.data.bar.monitors, modelData.name)
+                    }
+                  }
+                }
+
+                NToggle {
+                  label: "Dock"
+                  description: "Enable the dock on this monitor"
+                  value: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
+                  onToggled: function (newValue) {
+                    if (newValue) {
+                      Settings.data.dock.monitors = addMonitor(Settings.data.dock.monitors, modelData.name)
+                    } else {
+                      Settings.data.dock.monitors = removeMonitor(Settings.data.dock.monitors, modelData.name)
+                    }
+                  }
+                }
+
+                NToggle {
+                  label: "Notifications"
+                  description: "Enable notifications on this monitor"
+                  value: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
+                  onToggled: function (newValue) {
+                    if (newValue) {
+                      Settings.data.notifications.monitors = addMonitor(Settings.data.notifications.monitors,
+                                                                        modelData.name)
+                    } else {
+                      Settings.data.notifications.monitors = removeMonitor(Settings.data.notifications.monitors,
+                                                                           modelData.name)
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        NDivider {
+          Layout.fillWidth: true
+          Layout.topMargin: Style.marginLarge * 2 * scaling
+          Layout.bottomMargin: Style.marginLarge * scaling
+        }
+
         // Brightness Section
         ColumnLayout {
           spacing: Style.marginSmall * scaling
@@ -92,89 +181,6 @@ Item {
           }
         }
 
-        NDivider {
-          Layout.fillWidth: true
-          Layout.topMargin: Style.marginLarge * 2 * scaling
-          Layout.bottomMargin: Style.marginLarge * scaling
-        }
-
-        Repeater {
-          model: Quickshell.screens || []
-          delegate: Rectangle {
-            Layout.fillWidth: true
-            radius: Style.radiusMedium * scaling
-            color: Colors.mSurface
-            border.color: Colors.mOutline
-            border.width: Math.max(1, Style.borderThin * scaling)
-            implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
-
-            ColumnLayout {
-              id: contentCol
-              anchors.fill: parent
-              anchors.margins: Style.marginLarge * scaling
-              spacing: Style.marginTiniest * scaling
-
-              NText {
-                text: (modelData.name || "Unknown")
-                font.pointSize: Style.fontSizeLarge * scaling
-                font.weight: Style.fontWeightBold
-                color: Colors.mSecondary
-              }
-
-              NText {
-                text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})`
-                font.pointSize: Style.fontSizeSmall * scaling
-                color: Colors.mOnSurface
-              }
-
-              ColumnLayout {
-                spacing: Style.marginLarge * scaling
-
-                NToggle {
-                  label: "Bar"
-                  description: "Display the top bar on this monitor"
-                  value: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1
-                  onToggled: function (newValue) {
-                    if (newValue) {
-                      Settings.data.bar.monitors = addMonitor(Settings.data.bar.monitors, modelData.name)
-                    } else {
-                      Settings.data.bar.monitors = removeMonitor(Settings.data.bar.monitors, modelData.name)
-                    }
-                  }
-                }
-
-                NToggle {
-                  label: "Dock"
-                  description: "Display the dock on this monitor"
-                  value: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1
-                  onToggled: function (newValue) {
-                    if (newValue) {
-                      Settings.data.dock.monitors = addMonitor(Settings.data.dock.monitors, modelData.name)
-                    } else {
-                      Settings.data.dock.monitors = removeMonitor(Settings.data.dock.monitors, modelData.name)
-                    }
-                  }
-                }
-
-                NToggle {
-                  label: "Notifications"
-                  description: "Display notifications on this monitor"
-                  value: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1
-                  onToggled: function (newValue) {
-                    if (newValue) {
-                      Settings.data.notifications.monitors = addMonitor(Settings.data.notifications.monitors,
-                                                                        modelData.name)
-                    } else {
-                      Settings.data.notifications.monitors = removeMonitor(Settings.data.notifications.monitors,
-                                                                           modelData.name)
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-
         Item {
           Layout.fillHeight: true
         }

Modules/SidePanel/Cards/MediaCard.qml

@@ -339,15 +339,5 @@ NBox {
         Layout.alignment: Qt.AlignHCenter
       }
     }
-
-    // CircularSpectrum {
-    //   visible: Settings.data.audio.visualizerType == "radial"
-    //   values: Cava.values
-    //   innerRadius: 30 * scaling // Position just outside 60x60 album art
-    //   outerRadius: 48 * scaling // Extend bars outward from album art
-    //   fillColor: Colors.mPrimary
-    //   strokeColor: Colors.mPrimary
-    //   strokeWidth: 0 * scaling
-    // }
   }
 }