Remove old sortedDesktopApplicatons

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;
             }
         }
     }

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,102 @@
+// CalendarComponent.qml (For one month)
+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 {
+                    text: modelData
+                    horizontalAlignment: Text.AlignHCenter
+                    width: 18
+                    font.family: Theme.fontFamilyMono
+                }
+            }
+
+            Repeater {
+                model: root.layoutData.days
+                StyledText {
+                    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 y: component? (component.implicitHeight + Theme.gaps) : 100
-
+    property int x: component ? component.implicitWidth : 0
+    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
@@ -33,7 +33,7 @@ BackgroundRectangle {
     // implicitHeight: Math.max(notifLayout.implicitHeight, 100)
 
     Component.onCompleted: {
-        notificationWrapper.implicitHeight = targetHeight
+        root.implicitHeight = targetHeight;
     }
     clip: true
 
@@ -45,8 +45,10 @@ BackgroundRectangle {
             }
             ScriptAction {
                 script: {
-                    if(clicked) notificationWrapper.dismissed()
-                    if(notificationWrapper.implicitHeight === 0) notificationWrapper.timedout()
+                    if (clicked)
+                        root.dismissed();
+                    if (root.implicitHeight === 0)
+                        root.timedout();
                 }
             }
         }
@@ -55,8 +57,8 @@ BackgroundRectangle {
     MouseArea {
         anchors.fill: parent
         onClicked: {
-            notificationWrapper.clicked = true
-            notificationWrapper.implicitHeight = 0
+            root.clicked = true;
+            root.implicitHeight = 0;
         }
     }
 
@@ -64,10 +66,10 @@ BackgroundRectangle {
         id: notifTimer
 
         interval: timerDuration
-        running: notificationWrapper.startTimer
+        running: root.startTimer
 
         onTriggered: {
-            notificationWrapper.implicitHeight = 0;
+            root.implicitHeight = 0;
         }
     }
 
@@ -83,11 +85,11 @@ BackgroundRectangle {
         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
-            source: notificationWrapper.image
+            visible: root.image ? true : false
+            source: root.image
         }
 
         ColumnLayout {
@@ -103,6 +105,9 @@ BackgroundRectangle {
                 id: summaryRectangle
 
                 Layout.fillWidth: true
+                MarginWrapperManager {
+                    margin: 10
+                }
 
                 implicitHeight: summaryText.implicitHeight + 10
 
@@ -113,7 +118,7 @@ BackgroundRectangle {
 
                     anchors.fill: parent
 
-                    text: notificationWrapper.notification? notificationWrapper.notification.summary : ""
+                    text: root.notification ? root.notification.summary : ""
                 }
             }
 
@@ -127,12 +132,15 @@ BackgroundRectangle {
 
                 visible: bodyText.text ? true : false
 
+                MarginWrapperManager {
+                    margin: 15
+                }
                 StyledText {
                     id: bodyText
 
                     anchors.fill: parent
 
-                    text: notificationWrapper.notification? notificationWrapper.notification.body : ""
+                    text: root.notification ? root.notification.body : ""
                 }
             }
         }

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

@@ -23,28 +23,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 +65,7 @@ Item {
             id: notifText
 
             anchors.fill: parent
-            text: root.notificationIcon + "   " 
-            // text: {
-            //     NotificationService.notificationsNumber > 0 ? "\udb80\udc9a   " + NotificationService.notificationsNumber : "\ueaa2";
-            // }
+            text: root.notificationIcon
         }
 
         MouseArea {
@@ -77,9 +74,9 @@ Item {
 
             onClicked: mouse => {
                 if (mouse.button === Qt.RightButton) {
-                    NotificationService.notificationsMuted = !NotificationService.notificationsMuted
+                    NotificationService.manualNotificationsMuted = !NotificationService.manualNotificationsMuted;
                     return;
-                } 
+                }
                 root.createWindow = !root.createWindow;
             }
         }
@@ -88,11 +85,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,15 +1,22 @@
 pragma Singleton
 
+import QtQuick
 import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Wayland
+import Quickshell.Io
+import qs.Common
 
 Singleton {
+    id: root
 
     readonly property string hyprlandSignature: Quickshell.env("HYPRLAND_INSTANCE_SIGNATURE")
 
     readonly property var focusedMon: Hyprland.focusedMonitor
 
+    property var hasFullscreen: false
+    property var isScreencasting: false
+
     property var sortedTopLevels: {
         if (!ToplevelManager.toplevels || !ToplevelManager.toplevels.values) {
             return [];
@@ -64,27 +71,59 @@ Singleton {
         return sortedTopLevels.map(topLevel => topLevel.workspace);
     }
 
-    property var sortedDesktopApplications: {
-        const sortedWayland = sortedTopLevels.map(topLevel => topLevel.wayland).filter(wayland => wayland !== null);
+    property ListModel sortedDesktopApplicationsModel: ListModel {}
 
-        const desktopEntries = sortedWayland.map(topLevel => {
-            return DesktopEntries.heuristicLookup(topLevel.appId);
-        });
-        const workspace = sortedTopLevels.map(topLevel => {
-            return topLevel.workspace.id;
-        });
-        const workspaceDesktopEntries = new Map();
+    onSortedTopLevelsChanged: updateSortedDesktopApplications()
 
-        for (let i = 0; i < workspace.length; i++) {
-            const key = workspace[i];
-            const value = desktopEntries[i];
+    function updateSortedDesktopApplications() {
+        sortedDesktopApplicationsModel.clear();
 
-            if (workspaceDesktopEntries.has(key)) {
-                workspaceDesktopEntries.get(key).push(value);
-            } else {
-                workspaceDesktopEntries.set(key, [value]);
+        for (const topLevel of sortedTopLevels) {
+            const entry = DesktopEntries.heuristicLookup(topLevel.wayland.appId);
+            sortedDesktopApplicationsModel.append({
+                topLevel: topLevel,
+                desktopEntry: entry
+            });
+        }
+    }
+
+    function workspaceApps(workspaceIndexAlign) {
+        const list = [];
+        const model = sortedDesktopApplicationsModel;
+        for (let i = 0; i < model.count; i++) {
+            const item = model.get(i);
+            if (item.topLevel.workspace.id === workspaceIndexAlign)
+                list.push(item.desktopEntry);
+        }
+        return list;
+    }
+
+    Socket {
+        path: `${Quickshell.env("XDG_RUNTIME_DIR")}/hypr/${Quickshell.env("HYPRLAND_INSTANCE_SIGNATURE")}/.socket2.sock`
+        connected: true
+
+        parser: SplitParser {
+            property var fullscreenRegex: new RegExp("fullscreen>>.")
+            property var screencastRegex: new RegExp("screencast>>.*")
+
+            onRead: msg => {
+                let match = fullscreenRegex.exec(msg);
+                if (match != null) {
+                    if (msg.split(">>")[1] === "1") {
+                        root.hasFullscreen = true;
+                    } else {
+                        root.hasFullscreen = false;
+                    }
+                }
+                match = screencastRegex.exec(msg);
+                if (match != null) {
+                    if (msg.split(">>")[1].split(',')[0] === "1") {
+                        root.isScreencasting = true;
+                    } else {
+                        root.isScreencasting = false;
+                    }
+                }
             }
         }
-        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 var maxShown: 3
 
-    property bool notificationsMuted: false
-    property ListModel globalList: ListModel {}
+    property bool receivingLock: false
+    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.body === "MediaOngoingActivity")
+            if (notif.transient || notif.body === "MediaOngoingActivity")
                 return;
+
             notif.tracked = true;
-            notificationRoot.addNotification(globalList, notif);
+            root.addNotification(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);
-        removeNotification(globalList, notif);
+        let pendingIdx = -1;
+
+        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
@@ -117,7 +155,9 @@ Singleton {
             implicitWidth: 400
             implicitHeight: screen.height
             color: "transparent"
-            mask: Region { item: listView }
+            mask: Region {
+                item: listView
+            }
 
             ListView {
                 id: listView
@@ -136,17 +176,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;
-    }
-
-    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;
-                }
-            }
-        }
+        root.showWindow = false;
     }
 
     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 {
-    id: notificationRoot
+PanelWindow {
+    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

Widgets/WindowSwitcher.qml

@@ -0,0 +1,122 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import qs.Services
+import qs.Common.Styled
+import qs.Common
+import Quickshell.Wayland
+
+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.keyboardFocus: WlrKeyboardFocus.OnDemand
+
+    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
+
+            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: activate()
+                }
+
+                ScreencopyView {
+                    anchors.fill: parent
+                    live: true
+                    captureSource: modelData.topLevel.wayland
+                }
+
+                IconImage {
+                    anchors.bottom: parent.bottom
+
+                    property int workspaceId: modelData.topLevel.workspace.id
+                    property var desktopEntry: modelData.desktopEntry
+
+                    width: 30
+                    height: 30
+                    source: (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
                             }
                         }
@@ -129,6 +129,7 @@ WrapperMouseArea {
                         }
                         ;
                         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 {
-    //     modelData: Quickshell.screens.values[0]
-    //     barComponentsLeft: ["NotificationsWidget.qml"]
-    //     barComponentsCenter: ["Workspaces.qml"]
-    //     barComponentsRight: ["AudioWidget.qml", "SysTrayWidget.qml", "ClockWidget.qml"]
-    // }
+    id: root
 
-    // Bar {
-    //     panelMonitor: "DP-2"
-    //     barComponentsLeft: []
-    //     barComponentsCenter: ["Workspaces.qml"]
-    //     barComponentsRight: ["AudioWidget.qml", "ClockWidget.qml"]
-    // }
+    property bool createWindow: false
 
     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
+        }
+    }
 }