Toast: refactored service vs UI.

Modules/Toast/SimpleToast.qml

@@ -0,0 +1,179 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+
+Rectangle {
+  id: root
+
+  property string message: ""
+  property string description: ""
+  property string type: "notice"
+  property int duration: 3000
+  readonly property real initialScale: 0.7
+
+  signal hidden
+
+  width: Math.min(500 * scaling, parent.width * 0.8)
+  height: Math.max(60 * scaling, contentLayout.implicitHeight + Style.marginL * 2 * scaling)
+  radius: Style.radiusL * scaling
+  visible: false
+  opacity: 0
+  scale: initialScale
+
+  // Clean surface background like NToast
+  color: Color.mSurface
+
+  // Colored border based on type
+  border.color: {
+    switch (type) {
+    case "warning":
+      return Color.mPrimary
+    case "error":
+      return Color.mError
+    default:
+      return Color.mOutline
+    }
+  }
+  border.width: Math.max(2, Style.borderM * scaling)
+
+  Behavior on opacity {
+    NumberAnimation {
+      duration: Style.animationNormal
+      easing.type: Easing.OutCubic
+    }
+  }
+
+  Behavior on scale {
+    NumberAnimation {
+      duration: Style.animationNormal
+      easing.type: Easing.OutCubic
+    }
+  }
+
+  Timer {
+    id: hideTimer
+    interval: root.duration
+    onTriggered: root.hide()
+  }
+
+  Timer {
+    id: hideAnimation
+    interval: Style.animationFast
+    onTriggered: {
+      root.visible = false
+      root.hidden()
+    }
+  }
+
+  RowLayout {
+    id: contentLayout
+    anchors.fill: parent
+    anchors.margins: Style.marginL * scaling
+    spacing: Style.marginL * scaling
+
+    // Icon
+    NIcon {
+      id: icon
+      icon: {
+        switch (type) {
+        case "warning":
+          return "toast-warning"
+        case "error":
+          return "toast-error"
+        default:
+          return "toast-notice"
+        }
+      }
+      color: {
+        switch (type) {
+        case "warning":
+          return Color.mPrimary
+        case "error":
+          return Color.mError
+        default:
+          return Color.mOnSurface
+        }
+      }
+      font.pointSize: Style.fontSizeXXL * 1.5 * scaling
+      Layout.alignment: Qt.AlignVCenter
+    }
+
+    // Label and description
+    ColumnLayout {
+      spacing: Style.marginXXS * scaling
+      Layout.fillWidth: true
+      Layout.alignment: Qt.AlignVCenter
+
+      NText {
+        Layout.fillWidth: true
+        text: root.message
+        color: Color.mOnSurface
+        font.pointSize: Style.fontSizeL * scaling
+        font.weight: Style.fontWeightBold
+        wrapMode: Text.WordWrap
+        visible: text.length > 0
+      }
+
+      NText {
+        Layout.fillWidth: true
+        text: root.description
+        color: Color.mOnSurface
+        font.pointSize: Style.fontSizeM * scaling
+        wrapMode: Text.WordWrap
+        visible: text.length > 0
+      }
+    }
+
+    // Close button
+    NIconButton {
+      id: closeButton
+      icon: "close"
+
+      colorBg: Color.mSurfaceVariant
+      colorFg: Color.mOnSurface
+      colorBorder: Color.transparent
+      colorBorderHover: Color.mOutline
+
+      sizeRatio: 0.8
+      Layout.alignment: Qt.AlignTop
+
+      onClicked: root.hide()
+    }
+  }
+
+  MouseArea {
+    anchors.fill: parent
+    acceptedButtons: Qt.LeftButton
+    onClicked: root.hide()
+    cursorShape: Qt.PointingHandCursor
+  }
+
+  function show(msg, desc, msgType, msgDuration) {
+    message = msg
+    description = desc || ""
+    type = msgType || "notice"
+    duration = msgDuration || 3000
+
+    visible = true
+    opacity = 1
+    scale = 1.0
+
+    hideTimer.restart()
+  }
+
+  function hide() {
+    hideTimer.stop()
+    opacity = 0
+    scale = initialScale
+    hideAnimation.start()
+  }
+
+  function hideImmediately() {
+    opacity = 0
+    scale = initialScale
+    root.visible = false
+    root.hidden()
+  }
+}

Modules/Toast/ToastOverlay.qml

@@ -9,105 +9,13 @@ import qs.Widgets
 Variants {
   model: Quickshell.screens
 
-  delegate: Loader {
+  delegate: ToastScreen {
     required property ShellScreen modelData
-    property real scaling: ScalingService.getScreenScale(modelData)
 
-    Connections {
-      target: ScalingService
-      function onScaleChanged(screenName, scale) {
-        if (screenName === modelData.name) {
-          scaling = scale
-        }
-      }
-    }
+    screen: modelData
+    scaling: ScalingService.getScreenScale(modelData)
 
-    // Only show on screens that have notifications enabled
-    active: Settings.isLoaded && modelData ? (Settings.data.notifications.monitors.includes(modelData.name) || (Settings.data.notifications.monitors.length === 0)) : false
-
-    sourceComponent: PanelWindow {
-      id: root
-
-      screen: modelData
-
-      // Position at top of screen, always allow horizontal centering
-      anchors {
-        top: true
-        left: true
-        right: true
-      }
-
-      // Set a width instead of anchoring left/right so we can click on the side of the toast
-      implicitWidth: 500 * scaling
-
-      // Small height when hidden, appropriate height when visible
-      implicitHeight: Math.round(toast.visible ? toast.height + Style.marginM * scaling : 1)
-
-      // Set margins based on bar position
-      margins.top: {
-        switch (Settings.data.bar.position) {
-        case "top":
-          return (Style.barHeight + Style.marginS) * scaling + (Settings.data.bar.floating ? Settings.data.bar.marginVertical * Style.marginXL * scaling : 0)
-        default:
-          return 0
-        }
-      }
-
-      margins.bottom: {
-        switch (Settings.data.bar.position) {
-        case "bottom":
-          return (Style.barHeight + Style.marginS) * scaling + (Settings.data.bar.floating ? Settings.data.bar.marginVertical * Style.marginXL * scaling : 0)
-        default:
-          return 0
-        }
-      }
-
-      margins.right: {
-        switch (Settings.data.bar.position) {
-        case "left":
-        case "top":
-        case "bottom":
-          return Style.marginM * scaling
-        default:
-          return 0
-        }
-      }
-
-      margins.left: {
-        switch (Settings.data.bar.position) {
-        case "right":
-          return Style.marginM * scaling
-        default:
-          return 0
-        }
-      }
-
-      // Transparent background
-      color: Color.transparent
-
-      // Overlay layer to appear above other panels
-      WlrLayershell.layer: WlrLayer.Overlay
-      WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
-      exclusionMode: PanelWindow.ExclusionMode.Ignore
-
-      NToast {
-        id: toast
-        screen: modelData
-
-        // Simple positioning - margins already account for bar
-        targetY: Style.marginS * scaling
-
-        // Hidden position - always start from above the screen
-        hiddenY: -toast.height - 20
-
-        Component.onCompleted: {
-          // Register this toast with the service
-          ToastService.allToasts.push(toast)
-
-          // Connect dismissal signal
-          toast.dismissed.connect(ToastService.onToastDismissed)
-        }
-      }
-    }
+    // Only activate on enabled screens
+    active: Settings.isLoaded && modelData && (Settings.data.notifications.monitors.includes(modelData.name) || Settings.data.notifications.monitors.length === 0)
   }
 }

Modules/Toast/ToastScreen.qml

@@ -0,0 +1,145 @@
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Wayland
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+Loader {
+  id: root
+
+  required property ShellScreen screen
+  required property real scaling
+  required property bool active
+
+  // Local queue for this screen only
+  property var messageQueue: []
+  property bool isShowingToast: false
+  
+  // If true, immediately show new toasts
+  property bool replaceOnNew: true  
+
+  Connections {
+    target: ScalingService
+    function onScaleChanged(screenName, scale) {
+      if (screenName === root.screen.name) {
+        root.scaling = scale
+      }
+    }
+  }
+
+  Connections {
+    target: ToastService
+    enabled: root.active
+
+    function onNotify(message, description, type, duration) {
+      root.enqueueToast({
+                          "message": message,
+                          "description": description,
+                          "type": type,
+                          "duration": duration,
+                          "timestamp": Date.now()
+                        })
+    }
+  }
+
+  function enqueueToast(toastData) {
+    if (replaceOnNew && isShowingToast) {
+      // Cancel current toast and clear queue for latest toast
+      messageQueue = []  // Clear existing queue
+      messageQueue.push(toastData)
+      
+      // Hide current toast immediately
+      if (item) {
+        hideTimer.stop()
+        item.hideToast()  // Need to add this method to PanelWindow
+      }
+      
+      // Process new toast after a brief delay
+      isShowingToast = false
+      quickSwitchTimer.restart()
+    } else {
+      // Original behavior - queue the toast
+      messageQueue.push(toastData)
+      processQueue()
+    }
+  }
+  
+  Timer {
+    id: quickSwitchTimer
+    interval: 50  // Brief delay for smooth transition
+    onTriggered: root.processQueue()
+  }
+
+  function processQueue() {
+    if (!active || !item || messageQueue.length === 0 || isShowingToast) {
+      return
+    }
+
+    var data = messageQueue.shift()
+    isShowingToast = true
+
+    // Show the toast
+    item.showToast(data.message, data.description, data.type, data.duration)
+  }
+
+  function onToastHidden() {
+    isShowingToast = false
+    // Small delay before next toast
+    hideTimer.restart()
+  }
+
+  Timer {
+    id: hideTimer
+    interval: 200
+    onTriggered: root.processQueue()
+  }
+
+  sourceComponent: PanelWindow {
+    id: panel
+
+    screen: root.screen
+
+    anchors {
+      top: true
+      left: true
+      right: true
+    }
+
+    implicitWidth: 500 * root.scaling
+    implicitHeight: Math.round(toastItem.visible ? toastItem.height + Style.marginM * root.scaling : 1)
+
+    // Set margins based on bar position
+    margins.top: {
+      switch (Settings.data.bar.position) {
+      case "top":
+        return (Style.barHeight + Style.marginS) * scaling + (Settings.data.bar.floating ? Settings.data.bar.marginVertical * Style.marginXL * scaling : 0)
+      default:
+        return Style.marginL * scaling
+      }
+    }
+
+    color: Color.transparent
+
+    WlrLayershell.layer: WlrLayer.Overlay
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+    exclusionMode: PanelWindow.ExclusionMode.Ignore
+
+    function showToast(message, description, type, duration) {
+      toastItem.show(message, description, type, duration)
+    }
+    
+    // Add method to immediately hide toast
+    function hideToast() {
+      toastItem.hideImmediately() 
+    }
+
+    SimpleToast {
+      id: toastItem
+
+      anchors.horizontalCenter: parent.horizontalCenter
+      onHidden: root.onToastHidden()
+    }
+  }
+}