feat: frosted backdrop behind the login card

2 files changed, 61 insertions, 4 deletions

diff --git a/theme/components/Backdrop.qml b/theme/components/Backdrop.qml
new file mode 100644
index 0000000..02c01ac
--- /dev/null
+++ b/theme/components/Backdrop.qml
@@ -0,0 +1,56 @@
+// SPDX-License-Identifier: GPL-2.0-only
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// A frosted panel. It snapshots the wallpaper image the card sits on, blurs it
+// and masks it to the card's rounded rect, then tints it for text contrast.
+// When there is no source, only the tint draws, so the card still reads.
+
+import QtQuick
+import QtQuick.Effects
+
+Item {
+    id: backdrop
+
+    property Item sourceItem: null
+    property int radius: 10
+    property color tint: "#24273a"
+    property real tintOpacity: 0.72
+    property bool blurEnabled: true
+
+    ShaderEffectSource {
+        id: snapshot
+        sourceItem: backdrop.sourceItem
+        live: true
+        sourceRect: {
+            if (backdrop.sourceItem === null)
+                return Qt.rect(0, 0, 0, 0)
+            var p = backdrop.mapToItem(backdrop.sourceItem, 0, 0)
+            return Qt.rect(p.x, p.y, backdrop.width, backdrop.height)
+        }
+    }
+
+    MultiEffect {
+        anchors.fill: parent
+        source: snapshot
+        visible: backdrop.sourceItem !== null && backdrop.blurEnabled
+        blurEnabled: true
+        blur: 0.8
+        maskEnabled: true
+        maskSource: mask
+    }
+
+    Rectangle {
+        id: mask
+        anchors.fill: parent
+        radius: backdrop.radius
+        layer.enabled: true
+        visible: false
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        radius: backdrop.radius
+        color: backdrop.tint
+        opacity: backdrop.tintOpacity
+    }
+}
diff --git a/theme/components/LoginCard.qml b/theme/components/LoginCard.qml
index e980dfd..5f336d0 100644
--- a/theme/components/LoginCard.qml
+++ b/theme/components/LoginCard.qml
@@ -25,12 +25,13 @@ Item {
     implicitWidth: 380
     implicitHeight: column.implicitHeight + 2 * 28
 
-    // Flat translucent surface. Task 4 layers the blur behind it.
-    Rectangle {
+    // Frosted surface: the wallpaper behind the card, blurred and tinted.
+    Backdrop {
         anchors.fill: parent
         radius: card.radius
-        color: config.stringValue("mantle")
-        opacity: 0.82
+        sourceItem: card.backdropSource
+        tint: config.stringValue("mantle")
+        blurEnabled: config.boolValue("blur")
     }
 
     Rectangle {