Create Styled things and finish notifications module

Widgets/NotificationWindow.qml

@@ -1,41 +1,91 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
+import QtQuick.Layouts
 import Quickshell
+import Quickshell.Widgets
 import qs.Services
 import qs.Widgets
+import qs.Common.Styled
+import qs.Common
 import QtQuick.Window
 
 PopupWindow {
     id: notificationRoot
 
     anchor.item: root
-    anchor.rect.y: parentWindow?.height
-    implicitWidth: 400
-    implicitHeight: Math.min(listView.contentHeight, 900)
-    color: "white"
+    implicitWidth: screen.width
+    // implicitWidth: 400
+    implicitHeight: screen.height
+    color: "transparent"
     visible: true
+    signal clear
 
-    ListView {
-        id: listView
+    mask: Region { item: listView }
+
+    MouseArea {
         anchors.fill: parent
-        model: NotificationService.trackedNotifications.values
-        orientation: ListView.Vertical
-        verticalLayoutDirection: ListView.BottomToTop
-        clip: true
-        spacing: 5
+        onClicked: notificationRoot.clear()
+    }
 
-        delegate: NotificationWrapper {
-            required property var modelData
-            notification: modelData
-            width: ListView.width
-            onDismissed: {
-                if (notification && typeof notification.dismiss === "function") {
-                    notification.dismiss();
+    Rectangle {
+        id: notifWindow
+
+        anchors{
+            top: parent.top
+            left: parent.left
+            topMargin: 40
+        }
+        border.width: 1
+        color: Theme.color2
+        implicitWidth: 400
+        implicitHeight: Math.min(listView.contentHeight, 1090) + 50
+
+        ColumnLayout {
+            id: windowLayout
+
+            anchors.fill: parent
+            spacing: 0
+
+            BackgroundRectangle {
+                implicitWidth: parent.width
+                implicitHeight: 25
+                radius: 0
+                border.width: 0
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        while (NotificationService.notificationsNumber != 0) {
+                            NotificationService.trackedNotifications.values[0].dismiss();
+                        }
+                    }
+                }
+                StyledText {
+                    anchors.centerIn: parent
+                    text: "NOTIFICAÇÕES"
+                }
+            }
+
+            ListView {
+                id: listView
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                model: NotificationService.globalList
+                clip: true
+                spacing: 5
+                leftMargin: 10
+                rightMargin: 10
+
+                delegate: NotificationWrapper {
+                    required property var modelData
+                    notification: modelData
+                    implicitWidth: listView.width - 20
+                    onDismissed: {
+                        NotificationService.notificationDismiss(notification);
+                    }
                 }
             }
         }
-        Component.onCompleted: positionViewAtEnd()
-        onModelChanged: positionViewAtEnd()
     }
 }