NPanel refactor - 1st pass: SidePanel and settings an new logic

Commons/Settings.qml

@@ -30,9 +30,6 @@ Singleton {
   // Flag to prevent unnecessary wallpaper calls during reloads
   property bool isInitialLoad: true
 
-  // Needed to only have one NPanel loaded at a time. <--- VERY BROKEN
-  //property var openPanel: null
-
   // Function to validate monitor configurations
   function validateMonitorConfigurations() {
     var availableScreenNames = []
@@ -128,7 +125,7 @@ Singleton {
 
       general: JsonObject {
         property string avatarImage: defaultAvatar
-        property bool dimDesktop: true
+        property bool dimDesktop: false
         property bool showScreenCorners: false
         property real radiusRatio: 1.0
       }

Modules/Bar/SidePanelToggle.qml

@@ -15,22 +15,25 @@ NIconButton {
 
   anchors.verticalCenter: parent.verticalCenter
   onClicked: {
-    // Map this button's center to the screen and open the side panel below it
+    sidePanel.toggle(screen)
-    const localCenterX = width / 2
+    // sidePanel.isLoaded = !sidePanel.isLoaded
-    const localCenterY = height / 2
+    // Logger.log("SidePanelToggle", sidePanel.isLoaded)
-    const globalPoint = mapToItem(null, localCenterX, localCenterY)
+    // // Map this button's center to the screen and open the side panel below it
-    if (sidePanel.isLoaded) {
+    // const localCenterX = width / 2
-      // Call hide() instead of directly setting isLoaded to false
+    // const localCenterY = height / 2
-      if (sidePanel.item && sidePanel.item.hide) {
+    // const globalPoint = mapToItem(null, localCenterX, localCenterY)
-        sidePanel.item.hide()
+    // if (sidePanel.isLoaded) {
-      } else {
+    //   // Call hide() instead of directly setting isLoaded to false
-        sidePanel.isLoaded = false
+    //   if (sidePanel.item && sidePanel.item.hide) {
-      }
+    //     sidePanel.item.hide()
-    } else if (sidePanel.openAt) {
+    //   } else {
-      sidePanel.openAt(globalPoint.x, screen)
+    //     sidePanel.isLoaded = false
-    } else {
+    //   }
-      // Fallback: toggle if API unavailable
+    // } else if (sidePanel.openAt) {
-      sidePanel.isLoaded = true
+    //   sidePanel.openAt(globalPoint.x, screen)
-    }
+    // } else {
+    //   // Fallback: toggle if API unavailable
+    //   sidePanel.isLoaded = true
+    // }
   }
 }

Modules/Bar/Tray.qml

@@ -129,7 +129,6 @@ Rectangle {
   // Wrapped in NPanel so we can detect click outside of the menu to close the TrayMenu
   NPanel {
     id: trayPanel
-    showOverlay: false // no colors overlay even if activated in settings
 
     // Override hide function to animate first
     function hide() {

Modules/Bar/Volume.qml

@@ -65,7 +65,7 @@ Item {
     }
     onClicked: {
       settingsPanel.requestedTab = SettingsPanel.Tab.AudioService
-      settingsPanel.isLoaded = true
+      settingsPanel.open(screen)
     }
   }
 }

Modules/SettingsPanel/SettingsPanel.qml

@@ -8,9 +8,13 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-NLoader {
+NPanel {
   id: root
 
+  rWidth: Math.max(screen?.width * 0.5, 1280) * scaling
+  rHeight: Math.max(screen?.height * 0.5, 720) * scaling
+  rAnchorCentered: true
+
   // Tabs enumeration, order is NOT relevant
   enum Tab {
     About,
@@ -28,43 +32,8 @@ NLoader {
   }
 
   property int requestedTab: SettingsPanel.Tab.General
-
-  content: Component {
-    NPanel {
-      id: panel
-
   property int currentTabIndex: 0
 
-      // Override hide function to animate first
-      function hide() {
-        // Start hide animation
-        bgRect.scaleValue = 0.8
-        bgRect.opacityValue = 0.0
-        // Hide after animation completes
-        hideTimer.start()
-      }
-
-      // Connect to NPanel's dismissed signal to handle external close events
-      Connections {
-        target: panel
-        function onDismissed() {
-          hide()
-        }
-      }
-
-      // Timer to hide panel after animation
-      Timer {
-        id: hideTimer
-        interval: Style.animationSlow
-        repeat: false
-        onTriggered: {
-          panel.visible = false
-          panel.dismissed()
-        }
-      }
-
-      WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
-
   Component {
     id: generalTab
     Tabs.GeneralTab {}
@@ -177,72 +146,29 @@ NLoader {
       "source": aboutTab
     }]
 
-      Component.onCompleted: {
+  // When the panel opens, choose the appropriate tab
-        var initialIndex = 0
+  onOpened: {
+    var initialIndex = SettingsPanel.Tab.General
     if (root.requestedTab !== null) {
-          for (var i = 0; i < panel.tabsModel.length; i++) {
+      for (var i = 0; i < root.tabsModel.length; i++) {
-            if (panel.tabsModel[i].id === root.requestedTab) {
+        if (root.tabsModel[i].id === root.requestedTab) {
           initialIndex = i
           break
         }
       }
     }
     // Now that the UI is settled, set the current tab index.
-        panel.currentTabIndex = initialIndex
+    root.currentTabIndex = initialIndex
-        show()
   }
 
-      onVisibleChanged: {
+  panelContent: Rectangle {
-        if (!visible && (bgRect.opacityValue > 0)) {
-          hide()
-        }
-      }
-
-      Rectangle {
-        id: bgRect
-        color: Color.mSurface
-        radius: Style.radiusL * scaling
-        border.color: Color.mOutline
-        border.width: Math.max(1, Style.borderS * scaling)
-        layer.enabled: true
-        width: Math.max(screen.width * 0.5, 1280) * scaling
-        height: Math.max(screen.height * 0.5, 720) * scaling
-        anchors.centerIn: parent
-
-        // Animation properties
-        property real scaleValue: 0.8
-        property real opacityValue: 0.0
-
-        scale: scaleValue
-        opacity: opacityValue
-
-        // Animate in when component is completed
-        Component.onCompleted: {
-          scaleValue = 1.0
-          opacityValue = 1.0
-        }
-
-        MouseArea {
     anchors.fill: parent
-        }
+    anchors.margins: Style.marginL * scaling
-
+    color: Color.transparent
-        Behavior on scale {
-          NumberAnimation {
-            duration: Style.animationSlow
-            easing.type: Easing.OutExpo
-          }
-        }
-        Behavior on opacity {
-          NumberAnimation {
-            duration: Style.animationNormal
-            easing.type: Easing.OutQuad
-          }
-        }
 
     RowLayout {
       anchors.fill: parent
-          anchors.margins: Style.marginL * scaling
+      spacing: Style.marginM * scaling
-          spacing: Style.marginL * scaling
 
       Rectangle {
         id: sidebar
@@ -260,7 +186,7 @@ NLoader {
 
           Repeater {
             id: sections
-                model: panel.tabsModel
+            model: root.tabsModel
             delegate: Rectangle {
               id: tabItem
               width: parent.width
@@ -328,7 +254,7 @@ NLoader {
 
             // Tab label on the main right side
             NText {
-                  text: panel.tabsModel[currentTabIndex].label
+              text: root.tabsModel[currentTabIndex].label
               font.pointSize: Style.fontSizeL * scaling
               font.weight: Style.fontWeightBold
               color: Color.mPrimary
@@ -338,7 +264,7 @@ NLoader {
               icon: "close"
               tooltipText: "Close"
               Layout.alignment: Qt.AlignVCenter
-                  onClicked: panel.hide()
+              onClicked: root.close()
             }
           }
 
@@ -352,16 +278,16 @@ NLoader {
             clip: true
 
             Repeater {
-                  model: panel.tabsModel
+              model: root.tabsModel
 
               onItemAdded: function (index, item) {
-                    item.sourceComponent = panel.tabsModel[index].source
+                item.sourceComponent = root.tabsModel[index].source
               }
 
               delegate: Loader {
                 // All loaders will occupy the same space, stacked on top of each other.
                 anchors.fill: parent
-                    visible: index === panel.currentTabIndex
+                visible: index === root.currentTabIndex
                 // The loader is only active (and uses memory) when its page is visible.
                 active: visible
               }
@@ -371,6 +297,4 @@ NLoader {
       }
     }
   }
-    }
-  }
 }

Modules/SidePanel/Cards/PowerProfilesCard.qml

@@ -16,12 +16,13 @@ NBox {
   // PowerProfiles service
   property var powerProfiles: PowerProfiles
   readonly property bool hasPP: powerProfiles.hasPerformanceProfile
+  property real spacing: 0
 
   RowLayout {
     id: powerRow
     anchors.fill: parent
     anchors.margins: Style.marginS * scaling
-    spacing: sidePanel.cardSpacing
+    spacing: spacing
     Item {
       Layout.fillWidth: true
     }

Modules/SidePanel/Cards/ProfileCard.qml

@@ -61,7 +61,7 @@ NBox {
         tooltipText: "Open Settings"
         onClicked: {
           settingsPanel.requestedTab = SettingsPanel.Tab.General
-          settingsPanel.isLoaded = !settingsPanel.isLoaded
+          settingsPanel.open(screen)
         }
       }
 
@@ -78,8 +78,9 @@ NBox {
 
   PowerMenu {
     id: powerMenu
-    anchors.top: powerButton.bottom
+    // TBC
-    anchors.right: powerButton.right
+    // anchors.top: powerButton.bottom
+    // anchors.right: powerButton.right
   }
 
   // ----------------------------------

Modules/SidePanel/Cards/UtilitiesCard.qml

@@ -9,6 +9,9 @@ import qs.Widgets
 
 // Utilities: record & wallpaper
 NBox {
+
+  property real spacing: 0
+
   Layout.fillWidth: true
   Layout.preferredWidth: 1
   implicitHeight: utilRow.implicitHeight + Style.marginM * 2 * scaling
@@ -16,7 +19,7 @@ NBox {
     id: utilRow
     anchors.fill: parent
     anchors.margins: Style.marginS * scaling
-    spacing: sidePanel.cardSpacing
+    spacing: spacing
     Item {
       Layout.fillWidth: true
     }
@@ -37,7 +40,7 @@ NBox {
       tooltipText: "Open Wallpaper Selector"
       onClicked: {
         settingsPanel.requestedTab = SettingsPanel.Tab.WallpaperSelector
-        settingsPanel.isLoaded = true
+        settingsPanel.open(screen)
       }
     }
 

Modules/SidePanel/SidePanel.qml

@@ -7,150 +7,25 @@ import qs.Commons
 import qs.Services
 import qs.Widgets
 
-NLoader {
+NPanel {
-  id: root
+  id: panel
 
-  // X coordinate on screen (in pixels) where the panel should align its center.
+  rWidth: 460 * scaling
-  // Set via openAt(x) from the bar button.
+  rHeight: 700 * scaling
-  property real anchorX: 0
+  rAnchorRight: true
-  // Target screen to open on
-  property var targetScreen: null
 
-  function openAt(x, screen) {
+  // rectX: Math.max(Style.marginS * scaling, Math.min(parent.width - width - Style.marginS * scaling,
-    anchorX = x
+  //                                                   Math.round(anchorX - width / 2)))
-    targetScreen = screen
+  // rectY: Settings.data.bar.position === "top" ? Style.marginS * scaling : undefined
-    isLoaded = true
+  panelContent: Item {
-    // If the panel is already instantiated, update immediately
-    if (item) {
-      if (item.anchorX !== undefined)
-        item.anchorX = anchorX
-      if (item.screen !== undefined)
-        item.screen = targetScreen
-    }
-  }
-
-  content: Component {
-    NPanel {
-      id: sidePanel
-
-      // Single source of truth for spacing between cards (both axes)
-      property real cardSpacing: Style.marginL * scaling
-      // X coordinate from the bar to align this panel under
-      property real anchorX: root.anchorX
-      // Ensure this panel attaches to the intended screen
-      screen: root.targetScreen
-
-      // Override hide function to animate first
-      function hide() {
-        // Start hide animation
-        panelBackground.scaleValue = 0.8
-        panelBackground.opacityValue = 0.0
-
-        // Hide after animation completes
-        hideTimer.start()
-      }
-
-      // Connect to NPanel's dismissed signal to handle external close events
-      Connections {
-        target: sidePanel
-        function onDismissed() {
-          // Start hide animation
-          panelBackground.scaleValue = 0.8
-          panelBackground.opacityValue = 0.0
-
-          // Hide after animation completes
-          hideTimer.start()
-        }
-      }
-
-      // Also handle visibility changes from external sources
-      onVisibleChanged: {
-        if (!visible && panelBackground.opacityValue > 0) {
-          // Start hide animation
-          panelBackground.scaleValue = 0.8
-          panelBackground.opacityValue = 0.0
-
-          // Hide after animation completes
-          hideTimer.start()
-        }
-      }
-
-      // Ensure panel shows itself once created
-      Component.onCompleted: show()
-
-      // Inline helpers moved to dedicated widgets: NCard and NCircleStat
-      Rectangle {
-        id: panelBackground
-        color: Color.mSurface
-        radius: Style.radiusL * scaling
-        border.color: Color.mOutline
-        border.width: Math.max(1, Style.borderS * scaling)
-        layer.enabled: true
-        width: 460 * scaling
-        property real innerMargin: sidePanel.cardSpacing
-        // Height scales to content plus vertical padding
-        height: content.implicitHeight + innerMargin * 2
-        // Place the panel relative to the bar based on its position
-        y: Settings.data.bar.position === "top" ? Style.marginS * scaling : undefined
-        anchors {
-          bottom: Settings.data.bar.position === "bottom" ? parent.bottom : undefined
-          bottomMargin: Settings.data.bar.position === "bottom" ? Style.barHeight * scaling + Style.marginS * scaling : undefined
-        }
-        // Center horizontally under the anchorX, clamped to the screen bounds
-        x: Math.max(Style.marginS * scaling, Math.min(parent.width - width - Style.marginS * scaling,
-                                                      Math.round(anchorX - width / 2)))
-
-        // Animation properties
-        property real scaleValue: 0.8
-        property real opacityValue: 0.0
-
-        scale: scaleValue
-        opacity: opacityValue
-
-        // Animate in when component is completed
-        Component.onCompleted: {
-          scaleValue = 1.0
-          opacityValue = 1.0
-        }
-
-        // Timer to hide panel after animation
-        Timer {
-          id: hideTimer
-          interval: Style.animationSlow
-          repeat: false
-          onTriggered: {
-            sidePanel.visible = false
-            sidePanel.dismissed()
-          }
-        }
-
-        // Prevent closing when clicking in the panel bg
-        MouseArea {
-          anchors.fill: parent
-        }
-
-        // Animation behaviors
-        Behavior on scale {
-          NumberAnimation {
-            duration: Style.animationSlow
-            easing.type: Easing.OutExpo
-          }
-        }
-
-        Behavior on opacity {
-          NumberAnimation {
-            duration: Style.animationNormal
-            easing.type: Easing.OutQuad
-          }
-        }
-
-        // Content wrapper to ensure childrenRect drives implicit height
-        Item {
     id: content
+
+    property real cardSpacing: Style.marginL * scaling
+
     anchors.left: parent.left
     anchors.right: parent.right
     anchors.top: parent.top
-          anchors.margins: panelBackground.innerMargin
+    anchors.margins: content.cardSpacing
     implicitHeight: layout.implicitHeight
 
     // Layout content (not vertically anchored so implicitHeight is valid)
@@ -160,16 +35,14 @@ NLoader {
       anchors.left: parent.left
       anchors.right: parent.right
       anchors.top: parent.top
-            spacing: sidePanel.cardSpacing
+      spacing: content.cardSpacing
 
       // Cards (consistent inter-card spacing via ColumnLayout spacing)
-            ProfileCard {
+      ProfileCard {// Layout.topMargin: 0
-              Layout.topMargin: 0
+        // Layout.bottomMargin: 0
-              Layout.bottomMargin: 0
       }
-            WeatherCard {
+      WeatherCard {// Layout.topMargin: 0
-              Layout.topMargin: 0
+        // Layout.bottomMargin: 0
-              Layout.bottomMargin: 0
       }
 
       // Middle section: media + stats column
@@ -177,7 +50,7 @@ NLoader {
         Layout.fillWidth: true
         Layout.topMargin: 0
         Layout.bottomMargin: 0
-              spacing: sidePanel.cardSpacing
+        spacing: content.cardSpacing
 
         // Media card
         MediaCard {
@@ -197,15 +70,16 @@ NLoader {
         Layout.fillWidth: true
         Layout.topMargin: 0
         Layout.bottomMargin: 0
-              spacing: sidePanel.cardSpacing
+        spacing: content.cardSpacing
 
         // Power Profiles switcher
-              PowerProfilesCard {}
+        PowerProfilesCard {
+          spacing: content.cardSpacing
+        }
 
         // Utilities buttons
-              UtilitiesCard {}
+        UtilitiesCard {
-            }
+          spacing: content.cardSpacing
-          }
         }
       }
     }

Services/CavaService.qml

@@ -37,7 +37,7 @@ Singleton {
   Process {
     id: process
     stdinEnabled: true
-    running: (Settings.data.audio.visualizerType !== "none") && PanelService.sidePanel.isLoaded
+    running: (Settings.data.audio.visualizerType !== "none") && PanelService.sidePanel.active
     command: ["cava", "-p", "/dev/stdin"]
     onExited: {
       stdinEnabled = true

Services/PanelService.qml

@@ -5,8 +5,16 @@ import Quickshell
 Singleton {
   id: root
 
+  // A ref. to the sidePanel, so it's accessible from other services
+  property var sidePanel: null
+
   // Currently opened panel
   property var openedPanel: null
 
-  property var sidePanel: null
+  function registerOpen(panel) {
+    if (openedPanel && openedPanel != panel) {
+      openedPanel.close()
+    }
+    openedPanel = panel
+  }
 }

Services/ScalingService.qml

@@ -9,8 +9,16 @@ Singleton {
   // -------------------------------------------
   // Manual scaling via Settings
   function scale(aScreen) {
+    try {
+      if (aScreen !== undefined && aScreen.name !== undefined) {
         return scaleByName(aScreen.name)
       }
+    } catch (e) {
+
+      //Logger.warn(e)
+    }
+    return 1.0
+  }
 
   function scaleByName(aScreenName) {
     try {

Widgets/NLoader.qml

@@ -3,7 +3,7 @@ import QtQuick
 // Example usage:
 // NLoader {
 //   content: Component {
-//     NPanel {
+//     YourComponent {
 Loader {
   id: loader
 
@@ -17,9 +17,6 @@ Loader {
   asynchronous: true
   sourceComponent: content
 
-  // onLoaded: {
-  //   Logger.log("NLoader", "OnLoaded:", item.toString());
-  // }
   onActiveChanged: {
     if (active && item && item.show) {
       item.show()

Widgets/NPanel.qml

@@ -4,111 +4,180 @@ import Quickshell.Wayland
 import qs.Commons
 import qs.Services
 
-PanelWindow {
+Loader {
   id: root
 
+  active: false
+  asynchronous: true
+
   readonly property real scaling: ScalingService.scale(screen)
+  property ShellScreen screen
 
-  property bool showOverlay: Settings.data.general.dimDesktop
+  property Component panelContent: null
-  property int topMargin: Settings.data.bar.position === "top" ? Style.barHeight * scaling : 0
+  property int rWidth: 1500
-  property int bottomMargin: Settings.data.bar.position === "bottom" ? Style.barHeight * scaling : 0
+  property int rHeight: 400
-  // Show dimming if this panel is opened OR if we're in a transition (to prevent flickering)
+  property bool rAnchorCentered: false
-  property color overlayColor: (showOverlay && (PanelService.openedPanel === root
+  property bool rAnchorLeft: false
-                                                || isTransitioning)) ? Color.applyOpacity(Color.mShadow,
+  property bool rAnchorRight: false
-                                                                                          "AA") : Color.transparent
-  property bool isTransitioning: false
-  signal dismissed
 
-  function hide() {
+  // Animation properties
-    // Clear the panel service when hiding
+  readonly property real originalScale: 0.7
-    if (PanelService.openedPanel === root) {
+  readonly property real originalOpacity: 0.0
-      PanelService.openedPanel = null
+  property real scaleValue: originalScale
-    }
+  property real opacityValue: originalOpacity
-    isTransitioning = false
-    visible = false
-    root.dismissed()
-  }
 
-  function show() {
+  property alias isClosing: hideTimer.running
-    // Ensure only one panel is visible at a time using PanelService as ephemeral storage
-    try {
-      if (PanelService.openedPanel && PanelService.openedPanel !== root && PanelService.openedPanel.hide) {
-        // Mark both panels as transitioning to prevent dimming flicker
-        isTransitioning = true
-        PanelService.openedPanel.isTransitioning = true
-        PanelService.openedPanel.hide()
-        // Small delay to ensure smooth transition
-        showTimer.start()
-        return
-      }
-      // No previous panel, show immediately
-      PanelService.openedPanel = root
-      visible = true
-    } catch (e) {
 
-      // ignore
+  signal opened
+  signal closed
+
+
+
+  // -----------------------------------------
+  function toggle(aScreen) {
+    if (!active || isClosing) {
+      open(aScreen)
+    } else {
+      close()
     }
   }
 
-  implicitWidth: screen.width
+  // -----------------------------------------
-  implicitHeight: screen.height
+  function open(aScreen) {
-  color: visible ? overlayColor : Color.transparent
+    if (aScreen !== null) {
-  visible: false
+      screen = aScreen
+    }
+
+    // Special case if currently closing/animating
+    if (isClosing) {
+      hideTimer.stop() // in case we were closing
+      scaleValue = 1.0
+      opacityValue = 1.0
+    }
+
+    PanelService.registerOpen(root)
+
+    active = true
+    root.opened()
+  }
+
+  // -----------------------------------------
+  function close() {
+    scaleValue = originalScale
+    opacityValue = originalOpacity
+    hideTimer.start()
+  }
+
+  // -----------------------------------------
+  function closeCompleted() {
+    root.closed()
+    active = false
+  }
+
+  // -----------------------------------------
+  // Timer to disable the loader after the close animation is completed
+  Timer {
+    id: hideTimer
+    interval: Style.animationSlow
+    repeat: false
+    onTriggered: {
+      closeCompleted()
+    }
+  }
+
+  // -----------------------------------------
+  sourceComponent: Component {
+    PanelWindow {
+      id: panelWindow
+
+      visible: true
+
+      // Dim desktop if required
+      color: (root.active && !root.isClosing && Settings.data.general.dimDesktop) ? Color.applyOpacity(
+                                                                                      Color.mShadow,
+                                                                                      "BB") : Color.transparent
+      
+
       WlrLayershell.exclusionMode: ExclusionMode.Ignore
+      WlrLayershell.namespace: "noctalia-panel"
+
+      Behavior on color {
+        ColorAnimation {
+          duration: Style.animationNormal
+        }
+      }
 
       anchors.top: true
       anchors.left: true
       anchors.right: true
       anchors.bottom: true
-  margins.top: topMargin
+      margins.top: Settings.data.bar.position === "top" ? Style.barHeight * scaling : 0
-  margins.bottom: bottomMargin
+      margins.bottom: Settings.data.bar.position === "bottom" ? Style.barHeight * scaling : 0
 
+      // Clicking outside of the rectangle to close
       MouseArea {
         anchors.fill: parent
-    onClicked: root.hide()
+        onClicked: root.close()
       }
 
-  Behavior on color {
+      Rectangle {
-    ColorAnimation {
+        id: panelBackground
+        color: Color.mSurface
+        radius: Style.radiusL * scaling
+        border.color: Color.mOutline
+        border.width: Math.max(1, Style.borderS * scaling)
+        layer.enabled: true
+        width: rWidth
+        height: rHeight
+
+        anchors {
+          centerIn: rAnchorCentered ? parent : null
+          left: !rAnchorCentered && rAnchorLeft ? parent.left : parent.center
+          right: !rAnchorCentered && rAnchorRight ? parent.right : parent.center
+          top: !rAnchorCentered && (Settings.data.bar.position === "top") ? parent.top : undefined
+          bottom: !rAnchorCentered && (Settings.data.bar.position === "bottom") ? parent.bottom : undefined
+
+          // margins
+          topMargin: !rAnchorCentered && (Settings.data.bar.position === "top") ? Style.marginS * scaling : undefined
+          bottomMargin: !rAnchorCentered
+                        && (Settings.data.bar.position === "bottom") ? Style.marginS * scaling : undefined
+          rightMargin: !rAnchorCentered && rAnchorRight ? Style.marginS * scaling : undefined
+        }
+
+        scale: root.scaleValue
+        opacity: root.opacityValue
+
+        // Animate in when component is completed
+        Component.onCompleted: {
+          root.scaleValue = 1.0
+          root.opacityValue = 1.0
+        }
+
+        // Prevent closing when clicking in the panel bg
+        MouseArea {
+          anchors.fill: parent
+        }
+
+        // Animation behaviors
+        Behavior on scale {
+          NumberAnimation {
             duration: Style.animationSlow
-      easing.type: Easing.InOutCubic
+            easing.type: Easing.OutExpo
           }
         }
 
-  Timer {
+        Behavior on opacity {
-    id: showTimer
+          NumberAnimation {
-    interval: 50 // Small delay to ensure smooth transition
+            duration: Style.animationNormal
-    repeat: false
+            easing.type: Easing.OutQuad
-    onTriggered: {
-      PanelService.openedPanel = root
-      isTransitioning = false
-      visible = true
           }
         }
 
-  Component.onDestruction: {
+        Loader {
-    try {
+          anchors.fill: parent
-      if (visible && Settings.openPanel === root)
+          sourceComponent: root.panelContent
-        Settings.openPanel = null
-    } catch (e) {
-
         }
       }
-
-  onVisibleChanged: {
-    try {
-      if (!visible) {
-        // Clear panel service when panel becomes invisible
-        if (PanelService.openedPanel === root) {
-          PanelService.openedPanel = null
-        }
-        if (Settings.openPanel === root) {
-          Settings.openPanel = null
-        }
-        isTransitioning = false
-      }
-    } catch (e) {
-
     }
   }
 }