feat(ProfileShowcase): Add blur delegate state while dragging

- Added `FastBlur` component to `ShowcaseDelegate` and added property to change to blur state.
- Updated `ProfileShowcasePanel` to activate blur delegate state when dragging.

Closes #13594

ui/app/AppLayouts/Profile/controls/ShowcaseDelegate.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.0
+import QtQml 2.15
 
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
@@ -17,6 +19,7 @@ StatusDraggableListItem {
 
     property var showcaseObj
     property int showcaseVisibility: Constants.ShowcaseVisibility.NoOne
+    property bool blurState: false
 
     signal showcaseVisibilityRequested(int value)
 
@@ -26,6 +29,9 @@ StatusDraggableListItem {
         icon.color: Theme.palette.primaryColor1
     }
 
+    layer.enabled: root.blurState
+    layer.effect: fastBlur
+
     height: ProfileUtils.defaultDelegateHeight
     topInset: 0
     bottomInset: 0
@@ -106,4 +112,13 @@ StatusDraggableListItem {
             }
         }
     ]
+
+    Component {
+        id: fastBlur
+
+        FastBlur {
+            radius: 32
+            transparentBorder: true
+        }
+    }
 }

ui/app/AppLayouts/Profile/panels/ProfileShowcasePanel.qml

@@ -128,7 +128,7 @@ DoubleFlickableWithFolding {
                 property int visualIndexData: index
 
                 width: parent.width
-                sourceComponent: !dropAreaRow.visible ? root.showcaseDraggableDelegateComponent : emptyDelegate // TODO: Blur delegate issue ##13594
+                sourceComponent: root.showcaseDraggableDelegateComponent
             }
 
             // Delegate shadow background when dragging:
@@ -138,6 +138,14 @@ DoubleFlickableWithFolding {
                 visible: showcaseDraggableDelegateLoader.item && showcaseDraggableDelegateLoader.item.dragActive
                 onVisibleChanged: d.isAnyShowcaseDragActive = visible
             }
+
+            Binding {
+                when: dropAreaRow.visible
+                target: showcaseDraggableDelegateLoader.item
+                property: "blurState"
+                value: true
+                restoreMode: Binding.RestoreBindingOrValue
+            }
         }
 
         // Overlaid showcase listview content drop area:
@@ -213,7 +221,7 @@ DoubleFlickableWithFolding {
                 property int visualIndexData: hiddenDelegateRoot.visualIndex
 
                 width: parent.width
-                sourceComponent: !hiddenDropAreaButton.visible ? root.hiddenDraggableDelegateComponent : emptyDelegate // TODO: Blur delegate issue ##13594
+                sourceComponent: root.hiddenDraggableDelegateComponent
             }
 
             // Delegate shadow background when dragging:
@@ -222,7 +230,15 @@ DoubleFlickableWithFolding {
 
                 visible: hiddenDraggableDelegateLoader.item && hiddenDraggableDelegateLoader.item.dragActive
                 onVisibleChanged: d.isAnyHiddenDragActive = visible
-            }        
+            }
+
+            Binding {
+                when: hiddenDropAreaButton.visible
+                target: hiddenDraggableDelegateLoader.item
+                property: "blurState"
+                value: true
+                restoreMode: Binding.RestoreBindingOrValue
+            }
         }
 
         // Overlaid hidden listview content drop area:
@@ -384,16 +400,4 @@ DoubleFlickableWithFolding {
         color: Theme.palette.baseColor5
         radius: Style.current.radius
     }
-
-    // TODO: Blur delegate issue ##13594
-    Component {
-        id: emptyDelegate
-        Item {
-
-            property bool dragActive: false
-
-            width: parent.width
-            height: ProfileUtils.defaultDelegateHeight
-        }
-    }
 }