Change default bar color to transparent, change wrapping issue where it can't worwrap correctly, so it just wraps

Reviewed-on: #2

AudioWidget.qml

@@ -6,7 +6,7 @@ import qs.Common.Styled
 import qs.Services
 
 BackgroundRectangle {
-    id: audioWidget
+    id: root
 
     property string monitor: ""
     property string icon: " "
@@ -20,26 +20,26 @@ BackgroundRectangle {
     states: [
         State {
             name: "Mute"
-            when: audioWidget.volume == 0 || audioWidget.sink.audio.muted
+            when: root.volume == 0 || root.sink.audio.muted
 
             PropertyChanges {
-                audioWidget.icon: " "
+                root.icon: " "
             }
         },
         State {
             name: "low volume"
-            when: audioWidget.volume <= 25
+            when: root.volume <= 25
 
             PropertyChanges {
-                audioWidget.icon: " "
+                root.icon: " "
             }
         },
         State {
             name: "high volume"
-            when: audioWidget.volume > 25
+            when: root.volume > 25
 
             PropertyChanges {
-                audioWidget.icon: " "
+                root.icon: " "
             }
         }
     ]
@@ -50,23 +50,23 @@ BackgroundRectangle {
 
     Connections {
         function onVolumeChanged() {
-            audioWidget.volume = Math.round(Pipewire.defaultAudioSink.audio.volume * 100);
+            root.volume = Math.round(Pipewire.defaultAudioSink.audio.volume * 100);
         }
 
-        target: audioWidget.audioPipewireActive ? Pipewire.defaultAudioSink.audio : null
+        target: root.audioPipewireActive ? Pipewire.defaultAudioSink.audio : null
     }
 
     StyledText {
         id: audioText
 
-        property string audioTextText: audioWidget.audioPipewireActive ? audioWidget.icon + "  " + Math.round(Pipewire.defaultAudioSink.audio.volume * 100).toString() + "%" : ""
+        property string audioTextText: root.audioPipewireActive ? root.icon + "  " + Math.round(Pipewire.defaultAudioSink.audio.volume * 100).toString() + "%" : ""
 
         anchors.centerIn: parent
         text: audioTextText
     }
 
     Process {
-        id: audioWidgetProcess
+        id: rootProcess
 
         running: false
         command: ["pavucontrol"]
@@ -77,7 +77,7 @@ BackgroundRectangle {
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         hoverEnabled: true
         onEntered: {
-            PopUpHover.start(audioWidget, "audio");
+            PopUpHover.start(root, "audio");
         }
         onExited: {
             // PopUpHover.exit()
@@ -87,7 +87,7 @@ BackgroundRectangle {
             if (mouse.button === Qt.RightButton) {
                 parent.sink.audio.muted = !parent.sink.audio.muted;
             } else if (mouse.button === Qt.LeftButton) {
-                audioWidgetProcess.startDetached();
+                rootProcess.startDetached();
             }
         }
         onWheel: wheel => {
@@ -95,12 +95,12 @@ BackgroundRectangle {
                 if (0)
                     return;
 
-                Pipewire.defaultAudioSink.audio.volume = (audioWidget.volume + 5) / 100;
+                Pipewire.defaultAudioSink.audio.volume = (root.volume + 5) / 100;
             } else if (wheel.angleDelta.y < 0) {
                 if (0)
                     return;
 
-                Pipewire.defaultAudioSink.audio.volume = (audioWidget.volume - 5) / 100;
+                Pipewire.defaultAudioSink.audio.volume = (root.volume - 5) / 100;
             }
         }
     }

Bar.qml

@@ -13,7 +13,7 @@ PanelWindow {
     screen: modelData
     implicitHeight: Theme.barSize
 
-    color: Qt.rgba(0.68, 0.75, 0.88, 0)
+    color: "transparent"
 
     anchors {
         top: true

BarArea.qml

@@ -5,7 +5,7 @@ import Quickshell.Widgets
 import qs.Common
 
 WrapperRectangle {
-    id: barArea
+    id: root
 
     property var monitor: "DP-1"
     property var components: [] // Add this new property
@@ -16,14 +16,14 @@ WrapperRectangle {
 
     RowLayout {
         Repeater {
-            model: barArea.components
+            model: root.components
 
             delegate: Loader {
                 required property var modelData
                 // The source of the loader is the component from the model
                 source: modelData
                 onLoaded: {
-                    item.monitor = barArea.monitor;
+                    item.monitor = root.monitor;
                 }
             }
         }

ClockWidget.qml

@@ -1,6 +1,5 @@
 import QtQuick
 import Quickshell.Widgets
-import Quickshell.Io
 import qs.Services
 import qs.Common
 import qs.Common.Styled
@@ -19,8 +18,6 @@ Item {
         implicitWidth: clockText.implicitWidth * 1.6
         implicitHeight: Theme.heightGaps
 
-        property string calendar: ""
-
         StyledText {
             id: clockText
 
@@ -28,22 +25,10 @@ Item {
             text: Time.time
         }
 
-        Process {
-            id: cal
-            running: true
-            command: ["cal", "-S3"]
-            stdout: StdioCollector {
-                onStreamFinished: {
-                    clock.calendar = this.text;
-                }
-            }
-        }
-
         MouseArea {
             anchors.fill: parent
             hoverEnabled: true
             onEntered: {
-                cal.running = true;
                 PopUpHover.start(clock, "time");
             }
             onExited: {

Common/CalendarComponent.qml

@@ -0,0 +1,106 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import qs.Common
+import qs.Common.Styled
+
+Item {
+    id: root
+
+    property int targetYear: new Date().getFullYear()
+    property int targetMonth: new Date().getMonth() // 0-11
+    property date currentDate: new Date()
+
+    function getLocalizedDayHeaders() {
+        const locale = Qt.locale();
+        const headers = [];
+
+        const firstDay = locale.firstDayOfWeek;
+
+        for (let i = 0; i < 7; i++) {
+            const dayIndex = (firstDay + i) % 7;
+
+            const dayDate = new Date(1970, 0, 4 + dayIndex);
+            headers.push(dayDate.toLocaleString(locale, "ddd").substring(0, 1));
+        }
+        return headers;
+    }
+    function getMonthLayout(year, month) {
+        let date = new Date(year, month, 1);
+        let firstDayOfWeek = date.getDay();
+
+        let daysInMonth = new Date(year, month + 1, 0).getDate();
+        let days = [];
+
+        for (let i = 0; i < firstDayOfWeek; i++) {
+            days.push("");
+        }
+
+        for (let i = 1; i <= daysInMonth; i++) {
+            days.push(i);
+        }
+
+        while (days.length % 7 !== 0) {
+            days.push("");
+        }
+
+        return {
+            monthName: date.toLocaleString(Qt.locale(), "MMMM yyyy"),
+            days: days
+        };
+    }
+
+    readonly property var layoutData: getMonthLayout(targetYear, targetMonth)
+
+    implicitWidth: childrenRect.width
+    implicitHeight: childrenRect.height
+
+    Column {
+        spacing: 5
+
+        // Month Title
+        StyledText {
+            text: root.layoutData.monthName
+            font.bold: true
+            horizontalAlignment: Text.AlignHCenter
+            width: parent.width
+            font.family: Theme.fontFamilyMono
+        }
+
+        Grid {
+            columns: 7
+            rowSpacing: 2
+            columnSpacing: 5
+
+            Repeater {
+                model: root.getLocalizedDayHeaders()
+                StyledText {
+                    required property var modelData
+
+                    text: modelData
+                    horizontalAlignment: Text.AlignHCenter
+                    width: 18
+                    font.family: Theme.fontFamilyMono
+                }
+            }
+
+            Repeater {
+                model: root.layoutData.days
+                StyledText {
+                    required property var modelData
+                    text: modelData
+                    horizontalAlignment: Text.AlignHCenter
+                    width: 18
+                    font.family: Theme.fontFamilyMono
+
+                    color: {
+                        let isCurrentMonth = root.targetYear === root.currentDate.getFullYear() && root.targetMonth === root.currentDate.getMonth();
+                        let isCurrentDay = isCurrentMonth && modelData === root.currentDate.getDate();
+
+                        return isCurrentDay ? Theme.color5Bright : Theme.textColor;
+                    }
+                }
+            }
+        }
+    }
+}

Common/HoverMediator.qml

@@ -4,11 +4,10 @@ import Quickshell
 import qs.Common
 
 Singleton {
-    id: mediatorRoot
+    id: root
 
     property var component: null
     property string type: ""
-    property int x: component? component.implicitWidth : 0
+    property int x: component ? component.implicitWidth : 0
-    property int y: component? (component.implicitHeight + Theme.gaps) : 100
+    property int y: component ? (component.implicitHeight + Theme.gaps) : 100
-
 }

Common/NotificationWrapper.qml

@@ -5,7 +5,7 @@ import Quickshell.Widgets
 import qs.Common.Styled
 
 BackgroundRectangle {
-    id: notificationWrapper
+    id: root
 
     signal dismissed
     signal timedout
@@ -15,7 +15,6 @@ BackgroundRectangle {
     property var notification: null
     property bool startTimer: false
     property int timerDuration: 2000
-    property bool firstTime: true
 
     property string image: {
         if (hasImage) {
@@ -26,68 +25,77 @@ BackgroundRectangle {
         }
         return Quickshell.iconPath(notification?.appIcon);
     }
-    property real targetHeight: notifLayout.implicitHeight + 20
+
+    property bool collapsed: true
 
     implicitWidth: 400
-    implicitHeight: 0
+    readonly property real contentHeight: Math.max(notifLayout.implicitHeight + 20, 100)
-    // implicitHeight: Math.max(notifLayout.implicitHeight, 100)
+
+    height: collapsed ? 0 : contentHeight
 
     Component.onCompleted: {
-        notificationWrapper.implicitHeight = targetHeight
+        root.collapsed = false;
     }
-    clip: true
 
-    Behavior on implicitHeight {
+    Behavior on height {
         SequentialAnimation {
             NumberAnimation {
-                duration: 150
+                duration: 200
                 easing.type: Easing.OutCubic
             }
             ScriptAction {
                 script: {
-                    if(clicked) notificationWrapper.dismissed()
+                    if (root.clicked)
-                    if(notificationWrapper.implicitHeight === 0) notificationWrapper.timedout()
+                        root.dismissed();
+                    if (root.height === 0)
+                        root.timedout();
                 }
             }
         }
     }
 
+    clip: true
+
     MouseArea {
         anchors.fill: parent
         onClicked: {
-            notificationWrapper.clicked = true
+            root.clicked = true;
-            notificationWrapper.implicitHeight = 0
+            root.collapsed = true;
+            root.dismissed();
         }
     }
 
     Timer {
         id: notifTimer
-
+        interval: root.timerDuration
-        interval: timerDuration
+        running: root.startTimer
-        running: notificationWrapper.startTimer
+        repeat: false
 
         onTriggered: {
-            notificationWrapper.implicitHeight = 0;
+            root.collapsed = true;
         }
     }
 
     RowLayout {
         id: notifLayout
 
-        implicitHeight: Math.max(iconImage.implicitHeight, gridRoot.implicitHeight)
+        Layout.preferredHeight: Math.max(iconImage.implicitHeight, gridRoot.implicitHeight)
 
         anchors {
-            fill: parent
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            margins: 10
         }
 
         IconImage {
             id: iconImage
 
-            Layout.alignment: Qt.AlignLeft| Qt.AlignVCenter 
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
             Layout.leftMargin: 10
             implicitSize: 80
-            visible: notificationWrapper.image? true: false
+            visible: root.image ? true : false
-            source: notificationWrapper.image
+            source: root.image ? root.image : ""
         }
 
         ColumnLayout {
@@ -103,6 +111,9 @@ BackgroundRectangle {
                 id: summaryRectangle
 
                 Layout.fillWidth: true
+                MarginWrapperManager {
+                    margin: 10
+                }
 
                 implicitHeight: summaryText.implicitHeight + 10
 
@@ -110,10 +121,9 @@ BackgroundRectangle {
 
                 StyledText {
                     id: summaryText
-
                     anchors.fill: parent
-
+                    wrapMode: Text.Wrap
-                    text: notificationWrapper.notification? notificationWrapper.notification.summary : ""
+                    text: root.notification ? root.notification.summary : ""
                 }
             }
 
@@ -127,12 +137,14 @@ BackgroundRectangle {
 
                 visible: bodyText.text ? true : false
 
+                MarginWrapperManager {
+                    margin: 15
+                }
                 StyledText {
                     id: bodyText
-
                     anchors.fill: parent
-
+                    wrapMode: Text.Wrap
-                    text: notificationWrapper.notification? notificationWrapper.notification.body : ""
+                    text: root.notification ? root.notification.body : ""
                 }
             }
         }

Common/Settings.qml

@@ -1,12 +1,9 @@
-
 pragma Singleton
 
 import Quickshell
 
 Singleton {
-    id:root
+    id: root
 
     readonly property string time: "oi"
-
-
 }

Common/Shortcuts.qml

@@ -0,0 +1,5 @@
+import Quickshell.Hyprland
+
+GlobalShortcut {
+    appid: "quickbar"
+}

Common/Styled/BackgroundRectangle.qml

@@ -2,9 +2,10 @@ import QtQuick
 import qs.Common
 
 Rectangle {
+    id: root
 
     color: Theme.backgroudColor
-    border.width: 1
+    border.width: 2
     border.color: Theme.color2
     radius: 20
 }

Common/Styled/ForegroundRectangle.qml

@@ -2,6 +2,7 @@ import QtQuick
 import qs.Common
 
 Rectangle {
+    id: root
 
     color: Theme.backgroudColorBright
     radius: 20

Common/Styled/StyledText.qml

@@ -2,12 +2,12 @@ import QtQuick
 import qs.Common
 
 Text {
-    id: clockText
+    id: root
 
     anchors.margins: 5
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter
-    wrapMode: Text.WordWrap
+    wrapMode: Text.Wrap
     textFormat: Text.MarkdownText
     font.bold: true
     font.pixelSize: Theme.pixelSize

Common/Theme.qml

@@ -5,7 +5,7 @@ import Quickshell
 import Quickshell.Io
 
 Singleton {
-    id: timeRoot
+    id: root
 
     readonly property int barSize: 35
     readonly property double heightGaps: barSize * 0.8
@@ -18,7 +18,7 @@ Singleton {
     // Colors
     FileView {
         id: walColors
-        path: Qt.resolvedUrl("/home/amaro/.cache/wal/colors")
+        path: Qt.resolvedUrl(Quickshell.env("XDG_CACHE_HOME") + "/wal/colors")
         blockLoading: true
         watchChanges: true
         onFileChanged: this.reload()
@@ -44,24 +44,4 @@ Singleton {
     readonly property color foregroundColorBright: walColorsText[15]
 
     readonly property color textColor: foregroundColorBright
-// background "#0e1721"
-// color2     "#463e44"
-// color3     "#7b4834"
-// color4     "#735148"
-// color5     "#896451"
-// color6     "#9d7057"
-// color7     "#595563"
-// foreground "#91959b"
-// "#5d6772"
-// "#5E535B"
-// "#A56046"
-// "#9A6C60"
-// "#B7866C"
-// "#D29674"
-// "#777285"
-// "#c2c5c7"
-
-
-
-
 }

NotificationsWidget.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import Quickshell
 import Quickshell.Widgets
@@ -23,28 +25,28 @@ Item {
             name: "MuteActive"
             when: NotificationService.notificationsMuted && NotificationService.notificationsNumber
             PropertyChanges {
-                root.notificationIcon : "\udb80\udc9b   " +  NotificationService.notificationsNumber
+                root.notificationIcon: "\udb80\udc9b   " + NotificationService.notificationsNumber
             }
         },
         State {
             name: "Active"
             when: !NotificationService.notificationsMuted && NotificationService.notificationsNumber
             PropertyChanges {
-                root.notificationIcon : "\udb80\udc9a   " +  NotificationService.notificationsNumber
+                root.notificationIcon: "\udb80\udc9a   " + NotificationService.notificationsNumber
             }
         },
         State {
             name: "MuteEmpty"
             when: NotificationService.notificationsMuted
             PropertyChanges {
-                root.notificationIcon : "\uec08"
+                root.notificationIcon: "\uec08"
             }
         },
         State {
             name: "Empty"
             when: !NotificationService.notificationsMuted && !NotificationService.notificationsNumber
             PropertyChanges {
-                root.notificationIcon : "\ueaa2"
+                root.notificationIcon: "\ueaa2"
             }
         }
     ]
@@ -65,10 +67,7 @@ Item {
             id: notifText
 
             anchors.fill: parent
-            text: root.notificationIcon + "   " 
+            text: root.notificationIcon
-            // text: {
-            //     NotificationService.notificationsNumber > 0 ? "\udb80\udc9a   " + NotificationService.notificationsNumber : "\ueaa2";
-            // }
         }
 
         MouseArea {
@@ -77,9 +76,9 @@ Item {
 
             onClicked: mouse => {
                 if (mouse.button === Qt.RightButton) {
-                    NotificationService.notificationsMuted = !NotificationService.notificationsMuted
+                    NotificationService.manualNotificationsMuted = !NotificationService.manualNotificationsMuted;
                     return;
-                } 
+                }
                 root.createWindow = !root.createWindow;
             }
         }
@@ -88,11 +87,10 @@ Item {
     LazyLoader {
         id: windowLoader
 
-        activeAsync: NotificationService.notificationsNumber ? createWindow : false
+        active: NotificationService.notificationsNumber ? root.createWindow : false
 
         component: NotificationWindow {
-        onClear: root.createWindow = false
+            onClear: root.createWindow = false
         }
-        
     }
 }

README.MD

@@ -0,0 +1,12 @@
+# Quickbar
+
+Not as quick to program, but it's a bar make with Quickshell. 
+
+## Needs:
+Wal\
+Hyprland, maybe with the [split-monitor-workspaces](https://github.com/Duckonaut/split-monitor-workspaces), haven't tried without
+
+## Thanks to 
+
+[DankMaterialShell](https://github.com/AvengeMedia/DankMaterialShell) for a bunch of code that I used as reference (and some lifted) \
+[Quickshell](https://quickshell.org/) for the toolbox

Services/HyprlandService.qml

@@ -1,90 +1,110 @@
 pragma Singleton
 
+import QtQuick
 import Quickshell
 import Quickshell.Hyprland
-import Quickshell.Wayland
+import Quickshell.Io
 
 Singleton {
+    id: root
 
     readonly property string hyprlandSignature: Quickshell.env("HYPRLAND_INSTANCE_SIGNATURE")
-
     readonly property var focusedMon: Hyprland.focusedMonitor
 
-    property var sortedTopLevels: {
+    property bool hasFullscreen: false
-        if (!ToplevelManager.toplevels || !ToplevelManager.toplevels.values) {
+    property bool isScreencasting: false
-            return [];
-        }
 
-        const topLevels = Array.from(Hyprland.toplevels.values);
+    property ListModel sortedDesktopApplicationsModel: ListModel {}
-        const sortedHyprland = topLevels.sort((a, b) => {
+
+    // Derived property of sorted toplevels
+    property var sortedTopLevels: {
+        const topLevels = Array.from(Hyprland.toplevels?.values ?? []);
+        const sorted = topLevels.sort((a, b) => {
             if (a.monitor && b.monitor) {
                 const monitorCompare = a.monitor.name.localeCompare(b.monitor.name);
-                if (monitorCompare !== 0) {
+                if (monitorCompare !== 0)
                     return monitorCompare;
-                }
             }
-
             if (a.workspace && b.workspace) {
                 const workspaceCompare = a.workspace.id - b.workspace.id;
-                if (workspaceCompare !== 0) {
+                if (workspaceCompare !== 0)
                     return workspaceCompare;
-                }
             }
-
+            if (a.lastIpcObject?.at && b.lastIpcObject?.at) {
-            if (a.lastIpcObject && b.lastIpcObject && a.lastIpcObject.at && b.lastIpcObject.at) {
+                const xCompare = a.lastIpcObject.at[0] - b.lastIpcObject.at[0];
-                const aX = a.lastIpcObject.at[0];
+                if (Math.abs(xCompare) > 10)
-                const bX = b.lastIpcObject.at[0];
-                const aY = a.lastIpcObject.at[1];
-                const bY = b.lastIpcObject.at[1];
-
-                const xCompare = aX - bX;
-                if (Math.abs(xCompare) > 10) {
                     return xCompare;
-                }
+                return a.lastIpcObject.at[1] - b.lastIpcObject.at[1];
-                return aY - bY;
             }
-
+            if (a.title && b.title)
-            if (a.lastIpcObject && !b.lastIpcObject) {
-                return -1;
-            }
-            if (!a.lastIpcObject && b.lastIpcObject) {
-                return 1;
-            }
-
-            if (a.title && b.title) {
                 return a.title.localeCompare(b.title);
-            }
-
             return 0;
         });
-        return sortedHyprland.filter(tl => tl.wayland !== null);
+        return sorted.filter(tl => tl.wayland !== null);
     }
 
     property var topLevelWorkspaces: {
-        return sortedTopLevels.map(topLevel => topLevel.workspace);
+        return sortedTopLevels.map(toplevel => toplevel.workspace);
     }
 
-    property var sortedDesktopApplications: {
+    onSortedTopLevelsChanged: refreshSortedDesktopApplications()
-        const sortedWayland = sortedTopLevels.map(topLevel => topLevel.wayland).filter(wayland => wayland !== null);
 
-        const desktopEntries = sortedWayland.map(topLevel => {
+    Timer {
-            return DesktopEntries.heuristicLookup(topLevel.appId);
+        id: retryTimer
-        });
+        interval: 300
-        const workspace = sortedTopLevels.map(topLevel => {
+        repeat: false
-            return topLevel.workspace.id;
+        onTriggered: root.refreshSortedDesktopApplications()
-        });
+    }
-        const workspaceDesktopEntries = new Map();
 
-        for (let i = 0; i < workspace.length; i++) {
+    function refreshSortedDesktopApplications() {
-            const key = workspace[i];
+        if (!Hyprland.toplevels)
-            const value = desktopEntries[i];
+            return;
 
-            if (workspaceDesktopEntries.has(key)) {
+        try {
-                workspaceDesktopEntries.get(key).push(value);
+            sortedDesktopApplicationsModel.clear();
-            } else {
+
-                workspaceDesktopEntries.set(key, [value]);
+            for (const topLevel of sortedTopLevels) {
+                const entry = DesktopEntries.heuristicLookup(topLevel.wayland.appId);
+                if (!entry) {
+                    retryTimer.restart();
+                    return;
+                }
+                sortedDesktopApplicationsModel.append({
+                    topLevel: topLevel,
+                    desktopEntry: entry
+                });
+            }
+        } catch (err) {
+            retryTimer.restart();
+        }
+    }
+
+    function workspaceApps(workspaceIndexAlign) {
+        const list = [];
+        for (let i = 0; i < sortedDesktopApplicationsModel.count; i++) {
+            const item = sortedDesktopApplicationsModel.get(i);
+            if (item.topLevel.workspace.id === workspaceIndexAlign)
+                list.push(item.desktopEntry);
+        }
+        return list;
+    }
+
+    // Hyprland socket listener
+    Socket {
+        path: `${Quickshell.env("XDG_RUNTIME_DIR")}/hypr/${root.hyprlandSignature}/.socket2.sock`
+        connected: true
+
+        parser: SplitParser {
+            property var fullscreenRegex: /fullscreen>>./
+            property var screencastRegex: /screencast>>.*/
+            onRead: msg => {
+                if (fullscreenRegex.test(msg)) {
+                    root.hasFullscreen = msg.split(">>")[1] === "1";
+                }
+                if (screencastRegex.test(msg)) {
+                    root.isScreencasting = msg.split(">>")[1].split(',')[0] === "1";
+                }
             }
         }
-        return workspaceDesktopEntries;
     }
 }

Services/NotificationService.qml

@@ -4,18 +4,20 @@ pragma ComponentBehavior: Bound
 import QtQuick
 import Quickshell
 import Quickshell.Services.Notifications
-import qs.Widgets
+import qs.Common
 import qs.Services
 
 Singleton {
-    id: notificationRoot
+    id: root
 
     readonly property var notificationServer: notificationServer
-    readonly property var trackedNotifications: notificationServer.trackedNotifications
     readonly property var notificationsNumber: notificationServer.trackedNotifications.values.length
+    readonly property int maxShown: 3
 
-    property bool notificationsMuted: false
+    property bool receivingLock: false
-    property ListModel globalList: ListModel {}
+    property bool manualNotificationsMuted: false
+    property bool notificationsMuted: HyprlandService.hasFullscreen || HyprlandService.isScreencasting || root.manualNotificationsMuted
+    property ListModel trackedNotifications: ListModel {}
 
     NotificationServer {
         id: notificationServer
@@ -25,30 +27,37 @@ Singleton {
     Connections {
         target: notificationServer
         function onNotification(notif) {
-            if(notif.transient) return;
+            if (notif.transient || notif.body === "MediaOngoingActivity")
-            if (notif.body === "MediaOngoingActivity")
                 return;
+
             notif.tracked = true;
-            notificationRoot.addNotification(globalList, notif);
+            root.addNotification(root.trackedNotifications, notif);
 
             if (notif.lastGeneration)
                 return;
 
             // Use the refactored helper
-            notificationRoot.addNotification(notificationList, notif);
+            if (notificationList.count < root.maxShown && !root.receivingLock) {
+                root.addNotification(notificationList, notif);
+            } else {
+                root.receivingLock = true;
+                root.addNotification(pendingList, notif);
+            }
         }
     }
 
     ListModel {
         id: notificationList
     }
+    ListModel {
+        id: pendingList
+    }
 
     /**
      * @param {ListModel} model
      * @param {var} targetNotif
      */
     function removeNotification(model, targetNotif) {
-
         if (!model || typeof model.remove !== "function") {
             console.warn("removeNotification(): invalid model");
             return;
@@ -87,24 +96,53 @@ Singleton {
         });
     }
 
-    // function notificationDismiss(notif) {
-    //     removeNotification(notificationList, notif);
-    //     removeNotification(globalList, notif);
-    //     notif.dismiss();
-    // }
-
     function notificationDismiss(notif) {
-        removeNotification(notificationList, notif);
+        let pendingIdx = -1;
-        removeNotification(globalList, notif);
+
+        for (let i = 0; i < pendingList.count; i++) {
+            if (pendingList.get(i).notif === notif) {
+                pendingIdx = i;
+                break;
+            }
+        }
+
+        if (pendingIdx >= 0) {
+            pendingList.remove(pendingIdx, 1);
+        } else {
+            removeNotification(notificationList, notif);
+        }
+
+        removeNotification(trackedNotifications, notif);
 
         if (notif && typeof notif.dismiss === "function")
-        notif.dismiss(); // dismiss first
+            notif.dismiss();
 
+        tryShowNext();
+    }
+
+    function timeoutNotification(notif) {
+        removeNotification(notificationList, notif);
+
+        tryShowNext();
+    }
+
+    function tryShowNext() {
+        let filled = false;
+
+        while (notificationList.count < root.maxShown && pendingList.count > 0) {
+            const nextNotif = pendingList.get(0).notif;
+            pendingList.remove(0, 1);
+            addNotification(notificationList, nextNotif);
+            filled = true;
+        }
+
+        // Only lock if there are still more pending than fit onscreen
+        root.receivingLock = pendingList.count > 0;
     }
 
     LazyLoader {
         id: popupLoader
-        active: notificationList.count && !notificationRoot.notificationsMuted
+        active: notificationList.count && !root.notificationsMuted
 
         component: PanelWindow {
             id: notificationWindow
@@ -112,12 +150,13 @@ Singleton {
                 Quickshell.screens.filter(screen => screen.name == HyprlandService.focusedMon.name)[0];
             }
             anchors.top: true
-            margins.top: screen.height / 100
             exclusiveZone: 0
             implicitWidth: 400
             implicitHeight: screen.height
             color: "transparent"
-            mask: Region { item: listView }
+            mask: Region {
+                item: listView
+            }
 
             ListView {
                 id: listView
@@ -136,17 +175,16 @@ Singleton {
                     notification: modelData
                     implicitWidth: listView.width
 
-                    
+                    startTimer: NotificationUrgency.toString(notification?.urgency) === "Critical" ? false : true
-                    startTimer: NotificationUrgency.toString(notification?.urgency) === "Critical"? false: true
                     timerDuration: 5000
 
                     onDismissed: {
                         if (notification && typeof notification.dismiss === "function")
-                        notificationRoot.notificationDismiss(notification);
+                            root.notificationDismiss(notification);
                     }
 
                     onTimedout: {
-                        notificationRoot.removeNotification(notificationList, notification)
+                        root.timeoutNotification(notification);
                     }
                 }
 

Services/PopUpHover.qml

@@ -10,6 +10,9 @@ import qs.Common.Styled
 import qs.Services
 
 Singleton {
+    id: root
+
+    property bool showWindow: false
 
     function start(component, type) {
         HoverMediator.component = component;
@@ -19,122 +22,7 @@ Singleton {
 
     function exit() {
         hoverTimer.stop();
-        hoverPopUp.visible = false;
+        root.showWindow = false;
-    }
-
-    PopupWindow {
-        id: hoverPopUp
-
-        anchor.item: HoverMediator.component
-        property bool initialized: false
-        anchor.rect.y: HoverMediator.y
-        anchor.rect.x: (HoverMediator.x - this.implicitWidth) / 2
-        implicitHeight: wsPopUp.implicitHeight
-        implicitWidth: wsPopUp.implicitWidth
-
-        color: "transparent"
-
-        Component {
-            id: stub
-            StyledText {
-                text: "stub"
-            }
-        }
-
-        Component {
-            id: systray
-            StyledText {
-                text: {
-                    if (!HoverMediator.component?.model)
-                        return "";
-                    if (HoverMediator.component.model.tooltipTitle)
-                        return HoverMediator.component.model.tooltipTitle;
-                    if (HoverMediator.component.model.title)
-                        return HoverMediator.component.model.title;
-                    else
-                        return "";
-                }
-            }
-        }
-
-        Component {
-            id: time
-            StyledText {
-                property string calendar: (HoverMediator.component.calendar) ? HoverMediator.component.calendar : ""
-
-                text: calendar
-                font.family: Theme.fontFamilyMono
-            }
-        }
-
-        Component {
-            id: audio
-            StyledText {
-                property string sinkDescription: (HoverMediator.component.sink) ? HoverMediator.component.sink.description : ""
-                text: sinkDescription
-            }
-        }
-
-        Component {
-            id: workspaceComponent
-
-            RowLayout {
-                id: wsPopUpRow
-
-                property int workspaceIndexAlign: HoverMediator.component.workspaceIndexAlign || 0
-
-                Repeater {
-
-                    property var modelo: HyprlandService.sortedDesktopApplications.get(parent.workspaceIndexAlign)
-
-                    model: modelo
-                    delegate: IconImage {
-
-                        required property var modelData
-
-                        width: 30
-                        height: 30
-                        source: (modelData && modelData.icon) ? Quickshell.iconPath(modelData.icon, 1) : ""
-                    }
-                }
-            }
-        }
-
-        BackgroundRectangle {
-            id: wsPopUp
-
-            MarginWrapperManager {
-                leftMargin: (Theme.gaps * 2)
-                rightMargin: (Theme.gaps * 2)
-                topMargin: Theme.gaps
-                bottomMargin: Theme.gaps
-            }
-            color: Theme.backgroudColor
-            radius: 25
-            opacity: 1
-            Behavior on opacity {
-                NumberAnimation {
-                    property: "opacity"
-                    duration: Theme.animationDuration
-                }
-            }
-
-            Loader {
-                id: hoverLoader
-                sourceComponent: {
-                    if (!HoverMediator.type)
-                        return stub;
-                    if (HoverMediator.type === "workspace")
-                        return workspaceComponent;
-                    if (HoverMediator.type === "audio")
-                        return audio;
-                    if (HoverMediator.type === "time")
-                        return time;
-                    if (HoverMediator.type === "systray")
-                        return systray;
-                }
-            }
-        }
     }
 
     Timer {
@@ -143,7 +31,157 @@ Singleton {
         interval: 300
         onTriggered: {
             // wsPopUp.opacity = 1
-            hoverPopUp.visible = true;
+            root.showWindow = true;
+        }
+    }
+
+    LazyLoader {
+        active: root.showWindow
+        component: PopupWindow {
+            id: hoverPopUp
+
+            anchor.item: HoverMediator.component
+            property bool initialized: false
+            anchor.rect.y: HoverMediator.y
+            anchor.rect.x: (HoverMediator.x - this.implicitWidth) / 2
+            implicitHeight: wsPopUp.implicitHeight
+            implicitWidth: wsPopUp.implicitWidth
+            visible: true
+
+            color: "transparent"
+
+            Component {
+                id: stub
+                StyledText {
+                    text: "stub"
+                }
+            }
+
+            Component {
+                id: systray
+                StyledText {
+                    text: {
+                        if (!HoverMediator.component?.model)
+                            return "";
+                        if (HoverMediator.component.model.tooltipTitle)
+                            return HoverMediator.component.model.tooltipTitle;
+                        if (HoverMediator.component.model.title)
+                            return HoverMediator.component.model.title;
+                        else
+                            return "";
+                    }
+                }
+            }
+
+            Component {
+                id: time
+
+                RowLayout {
+                    id: rowlayoutCalendar
+
+                    readonly property date now: new Date()
+                    readonly property int prevMonth: now.getMonth() - 1
+                    readonly property int currentMonth: now.getMonth()
+                    readonly property int nextMonth: now.getMonth() + 1
+
+                    implicitWidth: childrenRect.width
+                    implicitHeight: childrenRect.height
+                    spacing: 20
+
+                    CalendarComponent {
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        targetYear: parent.prevMonth < 0 ? parent.now.getFullYear() - 1 : parent.now.getFullYear()
+                        targetMonth: parent.prevMonth < 0 ? 11 : parent.prevMonth
+                        currentDate: parent.now
+                    }
+
+                    CalendarComponent {
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        targetYear: parent.now.getFullYear()
+                        targetMonth: parent.currentMonth
+                        currentDate: parent.now
+                    }
+
+                    CalendarComponent {
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        targetYear: parent.nextMonth > 11 ? parent.now.getFullYear() + 1 : parent.now.getFullYear()
+                        targetMonth: parent.nextMonth > 11 ? 0 : parent.nextMonth
+                        currentDate: parent.now
+                    }
+                }
+            }
+
+            Component {
+                id: audio
+                StyledText {
+                    property string sinkDescription: (HoverMediator.component.sink) ? HoverMediator.component.sink.description : ""
+                    text: sinkDescription
+                }
+            }
+
+            Component {
+                id: workspaceComponent
+
+                RowLayout {
+                    id: wsPopUpRow
+
+                    property int workspaceIndexAlign: HoverMediator.component.workspaceIndexAlign || 0
+
+                    Repeater {
+
+                        model: HyprlandService.workspaceApps(parent.workspaceIndexAlign)
+                        delegate: IconImage {
+
+                            required property var modelData
+
+                            width: 30
+                            height: 30
+                            source: (modelData && modelData.icon) ? Quickshell.iconPath(modelData.icon, 1) : ""
+                        }
+                    }
+                }
+            }
+
+            BackgroundRectangle {
+                id: wsPopUp
+
+                MarginWrapperManager {
+                    leftMargin: (Theme.gaps * 2)
+                    rightMargin: (Theme.gaps * 2)
+                    topMargin: Theme.gaps
+                    bottomMargin: Theme.gaps
+                }
+
+                color: Theme.backgroudColor
+                radius: 25
+                opacity: 1
+
+                Behavior on opacity {
+                    NumberAnimation {
+                        property: "opacity"
+                        duration: Theme.animationDuration
+                    }
+                }
+
+                Loader {
+                    id: hoverLoader
+                    sourceComponent: {
+                        if (!HoverMediator.type)
+                            return stub;
+                        if (HoverMediator.type === "workspace")
+                            return workspaceComponent;
+                        if (HoverMediator.type === "audio")
+                            return audio;
+                        if (HoverMediator.type === "time")
+                            return time;
+                        if (HoverMediator.type === "systray")
+                            return systray;
+                    }
+                }
+            }
         }
     }
 }

Services/Time.qml

@@ -3,7 +3,7 @@ pragma Singleton
 import Quickshell
 
 Singleton {
-    id: timeRoot
+    id: root
 
     readonly property string time: {
         Qt.formatDateTime(clock.date, "hh:mm");

SysTrayWidget.qml

@@ -10,7 +10,7 @@ import qs.Common.Styled
 import qs.Services
 
 BackgroundRectangle {
-    id: systrayRoot
+    id: root
 
     MarginWrapperManager {
         rightMargin: Theme.gaps

Widgets/NotificationWindow.qml

@@ -8,12 +8,18 @@ import qs.Services
 import qs.Widgets
 import qs.Common.Styled
 import qs.Common
-import QtQuick.Window
+import Quickshell.Wayland
 
-PopupWindow {
+PanelWindow {
-    id: notificationRoot
+    id: root
+
+    anchors {
+        left: true
+        bottom: true
+        right: true
+        top: true
+    }
 
-    anchor.item: root
     implicitWidth: screen.width
     // implicitWidth: 400
     implicitHeight: screen.height
@@ -21,20 +27,26 @@ PopupWindow {
     visible: true
     signal clear
 
-    mask: Region { item: listView }
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
 
+    contentItem {
+        focus: true
+        Keys.onPressed: event => {
+            if (event.key == Qt.Key_Escape)
+                root.clear();
+        }
+    }
     MouseArea {
         anchors.fill: parent
-        onClicked: notificationRoot.clear()
+        onClicked: root.clear()
     }
 
     Rectangle {
         id: notifWindow
 
-        anchors{
+        anchors {
             top: parent.top
             left: parent.left
-            topMargin: 40
         }
         border.width: 1
         color: Theme.color2
@@ -57,12 +69,12 @@ PopupWindow {
                     anchors.fill: parent
                     onClicked: {
                         while (NotificationService.notificationsNumber != 0) {
-                            NotificationService.trackedNotifications.values[0].dismiss();
+                            NotificationService.notificationDismiss(NotificationService.trackedNotifications.get(0).notif);
                         }
                     }
                 }
                 StyledText {
-                    anchors.centerIn: parent
+                    anchors.fill: parent
                     text: "NOTIFICAÇÕES"
                 }
             }
@@ -71,7 +83,7 @@ PopupWindow {
                 id: listView
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                model: NotificationService.globalList
+                model: NotificationService.trackedNotifications
                 clip: true
                 spacing: 5
                 leftMargin: 10
@@ -81,6 +93,7 @@ PopupWindow {
                     required property var modelData
                     notification: modelData
                     implicitWidth: listView.width - 20
+                    collapsed: false
                     onDismissed: {
                         NotificationService.notificationDismiss(notification);
                     }

Widgets/WindowSwitcher.qml

@@ -0,0 +1,147 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import qs.Services
+import Quickshell.Wayland
+import QtQuick.Effects
+
+PanelWindow {
+    id: root
+
+    anchors {
+        left: true
+        bottom: true
+        right: true
+        top: true
+    }
+
+    implicitWidth: screen.width
+    // implicitWidth: 400
+    implicitHeight: screen.height
+    color: "transparent"
+    visible: true
+    signal clear
+
+    WlrLayershell.layer: WlrLayer.Overlay
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
+
+    exclusionMode: ExclusionMode.Ignore
+
+    ScreencopyView {
+        id: raveel
+
+        anchors.fill: parent
+        captureSource: screen
+    }
+
+    MultiEffect {
+        source: raveel
+        anchors.fill: raveel
+        blurEnabled: true
+        blurMax: 32
+        blur: 1.0
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: root.clear()
+    }
+
+    Rectangle {
+        id: notifWindow
+
+        anchors.centerIn: parent
+        implicitHeight: 300
+        implicitWidth: listview.contentWidth
+
+        color: "transparent"
+
+        ListView {
+            id: listview
+
+            anchors.fill: parent
+
+            clip: true
+            spacing: 5
+            orientation: ListView.Horizontal
+
+            focus: true
+            highlight: Rectangle {
+                color: "black"
+                radius: 5
+            }
+            highlightFollowsCurrentItem: true
+            keyNavigationEnabled: false
+            highlightMoveDuration: 100
+
+            Keys.onPressed: event => {
+                switch (event.key) {
+                case Qt.Key_L: // move down
+                case Qt.Key_D:
+                    if (currentIndex < count - 1)
+                        currentIndex++;
+                    event.accepted = true;
+                    break;
+                case Qt.Key_H: // move up
+                case Qt.Key_A:
+                    if (currentIndex > 0)
+                        currentIndex--;
+                    event.accepted = true;
+                    break;
+                case Qt.Key_Return:
+                    currentItem.activate();
+                    event.accepted = true;
+                    break;
+                case Qt.Key_Escape:
+                    root.clear();
+                    break;
+                }
+            }
+
+            model: HyprlandService.sortedDesktopApplicationsModel
+
+            delegate: Rectangle {
+                required property var modelData
+
+                implicitHeight: 300
+                implicitWidth: 300
+
+                color: "transparent"
+
+                function activate() {
+                    modelData.topLevel.wayland.activate();
+                    root.clear();
+                }
+
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: parent.activate()
+                }
+
+                ScreencopyView {
+                    anchors.fill: parent
+                    live: true
+                    captureSource: parent.modelData.topLevel.wayland
+                }
+
+                IconImage {
+
+                    anchors {
+                        bottom: parent.bottom
+                        horizontalCenter: parent.horizontalCenter
+                    }
+
+                    property int workspaceId: parent.modelData.topLevel.workspace.id
+                    property var desktopEntry: parent.modelData.desktopEntry ? parent.modelData.desktopEntry : null
+
+                    width: 30
+                    height: 30
+                    source: (parent.modelData && desktopEntry.icon) ? Quickshell.iconPath(desktopEntry.icon, 1) : "aaa"
+                }
+            }
+        }
+    }
+}

Workspaces.qml

@@ -11,7 +11,7 @@ import qs.Common.Styled
 import qs.Services
 
 WrapperMouseArea {
-    id: workspacesWidget
+    id: root
 
     property var monitor: "black"
 
@@ -31,7 +31,7 @@ WrapperMouseArea {
 
     RowLayout {
 
-        property var monitor: workspacesWidget.monitor
+        property var monitor: root.monitor
 
         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
 
@@ -65,7 +65,7 @@ WrapperMouseArea {
                         when: workspacesRectangle.workspaceActive
                         PropertyChanges {
                             workspacesRectangle {
-                                color: Theme.color6
+                                color: Theme.color5
                                 implicitWidth: Theme.barSize * 1.5
                             }
                         }
@@ -127,8 +127,8 @@ WrapperMouseArea {
                         if (workspacesRectangle.workspace.id === Hyprland.focusedWorkspace.id) {
                             return;
                         }
-                        ;
                         Hyprland.dispatch("workspace " + workspacesRectangle.workspace.id);
+                        PopUpHover.exit();
                     }
                 }
             }

shell.qml

@@ -1,20 +1,13 @@
 //@ pragma UseQApplication
 import Quickshell
+import qs.Widgets
+import qs.Common
+import qs.Services
 
 ShellRoot {
-    // Bar {
+    id: root
-    //     modelData: Quickshell.screens.values[0]
-    //     barComponentsLeft: ["NotificationsWidget.qml"]
-    //     barComponentsCenter: ["Workspaces.qml"]
-    //     barComponentsRight: ["AudioWidget.qml", "SysTrayWidget.qml", "ClockWidget.qml"]
-    // }
 
-    // Bar {
+    property bool createWindow: false
-    //     panelMonitor: "DP-2"
-    //     barComponentsLeft: []
-    //     barComponentsCenter: ["Workspaces.qml"]
-    //     barComponentsRight: ["AudioWidget.qml", "ClockWidget.qml"]
-    // }
 
     Variants {
         model: Quickshell.screens
@@ -25,4 +18,21 @@ ShellRoot {
             barComponentsRight: ["AudioWidget.qml", "SysTrayWidget.qml", "ClockWidget.qml"]
         }
     }
+
+    Shortcuts {
+        name: "showAltTab"
+        onPressed: {
+            root.createWindow = !root.createWindow;
+        }
+    }
+
+    LazyLoader {
+        id: windowLoader
+
+        active: root.createWindow
+
+        component: WindowSwitcher {
+            onClear: root.createWindow = false
+        }
+    }
 }