handle new ConfigReloaded event

Modules/Toast.qml

@@ -3,6 +3,7 @@ import QtQuick.Effects
 import Quickshell
 import Quickshell.Wayland
 import Quickshell.Widgets
+import Quickshell.Io
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -29,7 +30,16 @@ PanelWindow {
   Rectangle {
     id: toast
 
-    width: Math.min(400, Screen.width - Theme.spacingL * 2)
+    property bool expanded: false
+
+    Connections {
+      target: ToastService
+      function onResetToastState() {
+        toast.expanded = false
+      }
+    }
+
+    width: ToastService.hasDetails ? 380 : messageText.implicitWidth + Theme.iconSize + Theme.spacingM * 3 + Theme.spacingL * 2
     height: toastContent.height + Theme.spacingL * 2
     anchors.horizontalCenter: parent.horizontalCenter
     y: Theme.barHeight + Theme.spacingL
@@ -48,45 +58,162 @@ PanelWindow {
     radius: Theme.cornerRadius
     layer.enabled: true
     opacity: ToastService.toastVisible ? 0.9 : 0
-    scale: ToastService.toastVisible ? 1 : 0.9
 
-    Row {
+    Column {
       id: toastContent
 
-      anchors.centerIn: parent
-      spacing: Theme.spacingM
+      anchors.top: parent.top
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.topMargin: Theme.spacingL
+      anchors.leftMargin: Theme.spacingL
+      anchors.rightMargin: Theme.spacingL
+      spacing: Theme.spacingS
 
-      DankIcon {
-        name: {
-          switch (ToastService.currentLevel) {
-          case ToastService.levelError:
-            return "error"
-          case ToastService.levelWarn:
-            return "warning"
-          case ToastService.levelInfo:
-            return "info"
-          default:
-            return "info"
+      Item {
+        width: parent.width
+        height: Theme.iconSize + 8
+
+        DankIcon {
+          id: statusIcon
+          name: {
+            switch (ToastService.currentLevel) {
+            case ToastService.levelError:
+              return "error"
+            case ToastService.levelWarn:
+              return "warning"
+            case ToastService.levelInfo:
+              return "info"
+            default:
+              return "info"
+            }
+          }
+          size: Theme.iconSize
+          color: Theme.background
+          anchors.left: parent.left
+          anchors.verticalCenter: parent.verticalCenter
+        }
+
+        StyledText {
+          id: messageText
+          text: ToastService.currentMessage
+          font.pixelSize: Theme.fontSizeMedium
+          color: Theme.background
+          font.weight: Font.Medium
+          anchors.left: statusIcon.right
+          anchors.leftMargin: Theme.spacingM
+          anchors.verticalCenter: parent.verticalCenter
+          wrapMode: Text.NoWrap
+        }
+
+        DankActionButton {
+          iconName: toast.expanded ? "expand_less" : "expand_more"
+          iconSize: Theme.iconSize
+          iconColor: Theme.background
+          buttonSize: Theme.iconSize + 8
+          anchors.right: closeButton.left
+          anchors.rightMargin: 2
+          anchors.verticalCenter: parent.verticalCenter
+          visible: ToastService.hasDetails
+
+          onClicked: {
+            toast.expanded = !toast.expanded
+            if (toast.expanded) {
+              ToastService.stopTimer()
+            } else {
+              ToastService.restartTimer()
+            }
+          }
+        }
+
+        DankActionButton {
+          id: closeButton
+          iconName: "close"
+          iconSize: Theme.iconSize
+          iconColor: Theme.background
+          buttonSize: Theme.iconSize + 8
+          anchors.right: parent.right
+          anchors.verticalCenter: parent.verticalCenter
+          visible: ToastService.hasDetails
+
+          onClicked: {
+            ToastService.hideToast()
           }
         }
-        size: Theme.iconSize
-        color: Theme.background
-        anchors.verticalCenter: parent.verticalCenter
       }
 
-      StyledText {
-        text: ToastService.currentMessage
-        font.pixelSize: Theme.fontSizeMedium
-        color: Theme.background
-        font.weight: Font.Medium
-        anchors.verticalCenter: parent.verticalCenter
-        width: 300
-        wrapMode: Text.WordWrap
+      Rectangle {
+        width: parent.width
+        height: detailsText.height + Theme.spacingS * 2
+        color: Qt.rgba(0, 0, 0, 0.2)
+        radius: Theme.cornerRadius / 2
+        visible: toast.expanded && ToastService.hasDetails
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        StyledText {
+          id: detailsText
+          text: ToastService.currentDetails
+          font.pixelSize: Theme.fontSizeSmall
+          color: Theme.background
+          font.family: "JetBrains Mono"
+          anchors.left: parent.left
+          anchors.right: copyButton.left
+          anchors.verticalCenter: parent.verticalCenter
+          anchors.margins: Theme.spacingS
+          anchors.rightMargin: Theme.spacingS
+          wrapMode: Text.Wrap
+        }
+
+        DankActionButton {
+          id: copyButton
+          iconName: "content_copy"
+          iconSize: Theme.iconSizeSmall
+          iconColor: Theme.background
+          buttonSize: Theme.iconSizeSmall + 8
+          anchors.right: parent.right
+          anchors.verticalCenter: parent.verticalCenter
+          anchors.rightMargin: Theme.spacingS
+
+          property bool showTooltip: false
+
+          onClicked: {
+            Quickshell.execDetached(["wl-copy", ToastService.currentDetails])
+            showTooltip = true
+            tooltipTimer.start()
+          }
+
+          Timer {
+            id: tooltipTimer
+            interval: 1500
+            onTriggered: copyButton.showTooltip = false
+          }
+
+          Rectangle {
+            visible: copyButton.showTooltip
+            width: tooltipLabel.implicitWidth + 16
+            height: tooltipLabel.implicitHeight + 8
+            color: Theme.surfaceContainer
+            radius: Theme.cornerRadius
+            border.width: 1
+            border.color: Theme.outlineMedium
+            y: -height - 4
+            x: -width / 2 + copyButton.width / 2
+
+            StyledText {
+              id: tooltipLabel
+              anchors.centerIn: parent
+              text: "Copied!"
+              font.pixelSize: Theme.fontSizeSmall
+              color: Theme.surfaceText
+            }
+          }
+        }
       }
     }
 
     MouseArea {
       anchors.fill: parent
+      visible: !ToastService.hasDetails
       onClicked: ToastService.hideToast()
     }
 
@@ -110,12 +237,6 @@ PanelWindow {
       }
     }
 
-    Behavior on scale {
-      NumberAnimation {
-        duration: Theme.mediumDuration
-        easing.type: Theme.emphasizedEasing
-      }
-    }
 
     Behavior on color {
       ColorAnimation {
@@ -123,6 +244,18 @@ PanelWindow {
         easing.type: Theme.standardEasing
       }
     }
+
+    Behavior on height {
+      enabled: ToastService.toastVisible
+      NumberAnimation {
+        duration: Anims.durShort
+        easing.type: Easing.Linear
+      }
+    }
+
+    Behavior on width {
+      enabled: false
+    }
   }
 
   mask: Region {