feat: full-window liquid glass and fluidmorphism support for Lniri

README.md

@@ -15,7 +15,8 @@
 [Secure Vault](#-secure-file--folder-vault) •
 [Features](#-core-features) •
 [Shortcuts](#-keyboard-shortcuts) •
-[Theming](#-theming--customization)
+[Theming](#-theming--customization) •
+[Compositor & Glass](#-compositor-integration-hyprland-niri--lniri)
 
 ---
 
@@ -191,6 +192,46 @@ Switch themes inside the app via **Settings (`Ctrl+,`)** or set `theme = "my-the
 
 ---
 
+## 🪟 Compositor Integration (Hyprland, Niri & Lniri)
+
+Bubble features native support for Wayland compositor background effects including blur, contrast, and **Lniri's fluidmorphism / liquid-glass shaders** across the entire file manager window (sidebar, navigation toolbar, tabs, and file views).
+
+### Lniri (Liquid Glass & Fluidmorphism)
+
+To enable liquid glass in Lniri, add this window rule to `~/.config/niri/config.kdl`:
+
+```kdl
+window-rule {
+    match app-id="Bubble"
+    draw-border-with-background false
+    background-effect {
+        blur true
+        xray true
+        liquid-glass {
+            liquidity 0.2
+            refraction-strength 5.0
+            power-factor 3.5
+            refraction-power 1
+            glow-weight 0.1
+            edge-lighting 0.2
+            saturation 1.1
+            vibrancy 0.6
+            adaptive-dim 0.1
+            adaptive-boost 0.0
+            physical-refraction 0.1
+            lens-distortion 0.1
+            fringing 0.6
+        }
+    }
+}
+```
+
+> [!TIP]
+> - Both `match app-id="Bubble"` and `match app-id="io.github.soyeb_jim285.Bubble"` match automatically. If your environment requires a specific custom Wayland `app-id`, specify `BUBBLE_APP_ID=<your-id> bubble`.
+> - Transparency level and container transparency can be toggled and finely adjusted inside Bubble in **Settings (`Ctrl+,`)** under **Appearance**.
+
+---
+
 ## Architecture
 
 Bubble is architected into three distinct layers:

src/main.cpp

@@ -271,7 +271,8 @@ int main(int argc, char *argv[])
     QGuiApplication app(argc, argv);
     app.setApplicationName("Bubble");
     app.setOrganizationName("bubble");
-    app.setDesktopFileName("io.github.soyeb_jim285.Bubble");
+    const QString customAppId = qEnvironmentVariable("BUBBLE_APP_ID");
+    app.setDesktopFileName(!customAppId.isEmpty() ? customAppId : QStringLiteral("io.github.soyeb_jim285.Bubble"));
 
     // Startup timing: opt-in via BUBBLE_TIMING=1 so normal runs stay quiet.
     // Prints milliseconds from QGuiApplication construction at each phase.

src/qml/Main.qml

@@ -174,7 +174,7 @@ ApplicationWindow {
 
         // Bridge Bubble theme into Quill theme singleton
         Q.Theme.background = Qt.binding(() => Theme.base)
-        Q.Theme.backgroundAlt = Qt.binding(() => Theme.mantle)
+        Q.Theme.backgroundAlt = Qt.binding(() => Theme.overlayBackground)
         Q.Theme.backgroundDeep = Qt.binding(() => Theme.crust)
         Q.Theme.surface0 = Qt.binding(() => Theme.surface)
         // surface1/surface2 back Quill components that need an opaque fill
@@ -1558,7 +1558,7 @@ ApplicationWindow {
                 anchors.fill: parent
                 title: "Rename"
                 padding: 20
-                color: Theme.mantle
+                color: Theme.overlayBackground
                 border.color: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.1)
 
                 Q.TextField {
@@ -1726,7 +1726,7 @@ ApplicationWindow {
                 anchors.fill: parent
                 title: "New Folder"
                 padding: 20
-                color: Theme.mantle
+                color: Theme.overlayBackground
                 border.color: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.1)
 
                 Q.TextField {
@@ -1891,7 +1891,7 @@ ApplicationWindow {
                 id: fileCard
                 anchors.fill: parent
                 title: "New File"
-                color: Theme.mantle
+                color: Theme.overlayBackground
                 border.color: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.1)
                 padding: 20
 
@@ -2244,7 +2244,7 @@ ApplicationWindow {
 
             Rectangle {
                 anchors.fill: parent
-                color: Theme.mantle
+                color: Theme.overlayBackground
                 radius: Theme.radiusMedium
                 border.color: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.1)
                 border.width: 1
@@ -3897,7 +3897,7 @@ ApplicationWindow {
                     y: 0
                     width: 2
                     height: toolbar.height
-                    color: Theme.mantle
+                    color: Theme.chromeBackground
                     z: 2
                 }
 
@@ -3974,19 +3974,19 @@ ApplicationWindow {
                 }
             }
 
-            // File view (semi-transparent — Hyprland compositor blurs behind this)
+            // File view (semi-transparent — Hyprland / Niri / Lniri compositor blurs and glass effects behind this)
             Rectangle {
                 id: contentArea
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                color: Theme.containerColor(Theme.base, 0.65)
+                color: Theme.contentBackground
 
                 // Curved mantle fills for inverse rounded corners
                 Shape {
                     z: 1; width: Theme.radiusMedium; height: Theme.radiusMedium
                     anchors.top: parent.top; anchors.left: parent.left
                     ShapePath {
-                        fillColor: Theme.mantle; strokeColor: "transparent"
+                        fillColor: Theme.chromeBackground; strokeColor: "transparent"
                         startX: 0; startY: 0
                         PathLine { x: Theme.radiusMedium; y: 0 }
                         PathArc {
@@ -4001,7 +4001,7 @@ ApplicationWindow {
                     z: 1; width: Theme.radiusMedium; height: Theme.radiusMedium
                     anchors.top: parent.top; anchors.right: parent.right
                     ShapePath {
-                        fillColor: Theme.mantle; strokeColor: "transparent"
+                        fillColor: Theme.chromeBackground; strokeColor: "transparent"
                         startX: Theme.radiusMedium; startY: 0
                         PathLine { x: 0; y: 0 }
                         PathArc {

src/qml/components/ContextMenu.qml

@@ -480,7 +480,7 @@ Item {
         Rectangle {
             anchors.fill: parent
             radius: Theme.radiusLarge
-            color: Theme.crust
+            color: Theme.popupBackground
             border.color: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.08)
             border.width: 1
         }
@@ -540,7 +540,7 @@ Item {
             visible: root._submenuOpensRight
 
             ShapePath {
-                fillColor: Theme.crust
+                fillColor: Theme.popupBackground
                 strokeColor: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.08)
                 strokeWidth: 1
                 joinStyle: ShapePath.MiterJoin
@@ -587,7 +587,7 @@ Item {
             visible: !root._submenuOpensRight
 
             ShapePath {
-                fillColor: Theme.crust
+                fillColor: Theme.popupBackground
                 strokeColor: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.08)
                 strokeWidth: 1
                 joinStyle: ShapePath.MiterJoin

src/qml/components/FilterPanel.qml

@@ -37,7 +37,7 @@ Rectangle {
         typeFilterChanged(types.join(","))
     }
 
-    color: Theme.mantle
+    color: Theme.chromeBackground
     implicitHeight: content.implicitHeight + 16
 
     ColumnLayout {

src/qml/components/OperationsBar.qml

@@ -71,7 +71,7 @@ Rectangle {
 
     visible: _showBar
     implicitHeight: _showBar ? contentCol.implicitHeight + 2 * Theme.spacing : 0
-    color: Theme.crust
+    color: Theme.popupBackground
 
     ListModel {
         id: transfersModel

src/qml/components/QuickPreview.qml

@@ -505,7 +505,7 @@ Item {
         scale: 0.88
         transformOrigin: Item.Center
         radius: Theme.radiusLarge
-        color: Qt.rgba(Theme.mantle.r, Theme.mantle.g, Theme.mantle.b, 0.98)
+        color: Theme.overlayBackground
         border.width: 1
         border.color: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.12)
 

src/qml/components/Sidebar.qml

@@ -26,7 +26,7 @@ Rectangle {
     signal collapseClicked()
     signal featureHintRequested(string message)
 
-    color: Theme.mantle
+    color: Theme.chromeBackground
     clip: false
 
     Component { id: iconHome; IconHome { size: 18; color: Theme.subtext } }
@@ -48,7 +48,7 @@ Rectangle {
         z: 1; width: Theme.radiusMedium; height: Theme.radiusMedium
         anchors.top: parent.top; anchors.left: parent.right
         ShapePath {
-            fillColor: Theme.mantle; strokeColor: "transparent"
+            fillColor: Theme.chromeBackground; strokeColor: "transparent"
             startX: 0; startY: 0
             PathLine { x: Theme.radiusMedium; y: 0 }
             PathArc {
@@ -65,7 +65,7 @@ Rectangle {
         z: 1; width: Theme.radiusMedium; height: Theme.radiusMedium
         anchors.bottom: parent.bottom; anchors.left: parent.right
         ShapePath {
-            fillColor: Theme.mantle; strokeColor: "transparent"
+            fillColor: Theme.chromeBackground; strokeColor: "transparent"
             startX: 0; startY: Theme.radiusMedium
             PathLine { x: Theme.radiusMedium; y: Theme.radiusMedium }
             PathArc {

src/qml/components/StatusBar.qml

@@ -53,15 +53,15 @@ Rectangle {
     }
 
     height: 28
-    color: Theme.mantle
+    color: Theme.chromeBackground
     clip: false
 
     // Inverse rounded corner — top left
     Shape {
         z: 1; width: Theme.radiusMedium; height: Theme.radiusMedium
         anchors.bottom: parent.top; anchors.left: parent.left
         ShapePath {
-            fillColor: Theme.mantle; strokeColor: "transparent"
+            fillColor: Theme.chromeBackground; strokeColor: "transparent"
             startX: 0; startY: Theme.radiusMedium
             PathLine { x: Theme.radiusMedium; y: Theme.radiusMedium }
             PathArc {
@@ -78,7 +78,7 @@ Rectangle {
         z: 1; width: Theme.radiusMedium; height: Theme.radiusMedium
         anchors.bottom: parent.top; anchors.right: parent.right
         ShapePath {
-            fillColor: Theme.mantle; strokeColor: "transparent"
+            fillColor: Theme.chromeBackground; strokeColor: "transparent"
             startX: Theme.radiusMedium; startY: Theme.radiusMedium
             PathLine { x: 0; y: Theme.radiusMedium }
             PathArc {

src/qml/components/Toast.qml

@@ -46,7 +46,7 @@ Item {
                     implicitWidth: Math.max(240, toastRow.implicitWidth + 32)
                     implicitHeight: toastRow.implicitHeight + 20
                     radius: Theme.radiusMedium
-                    color: Theme.mantle
+                    color: Theme.overlayBackground
 
                     border.width: 2
                     border.color: toastItem.toastType === "error"   ? Theme.error

src/qml/components/Toolbar.qml

@@ -94,7 +94,7 @@ Rectangle {
     }
 
     implicitHeight: toolbarColumn.implicitHeight
-    color: Theme.mantle
+    color: Theme.chromeBackground
 
     DragHandler {
         enabled: root.showWindowControls && root.window
@@ -481,7 +481,7 @@ Rectangle {
 
             Rectangle {
                 anchors.fill: parent
-                color: Theme.mantle
+                color: "transparent"
                 // Top separator
                 Rectangle {
                     anchors.top: parent.top
@@ -808,7 +808,7 @@ Rectangle {
                     visible: tabStrip.contentX > 0.5
                     gradient: Gradient {
                         orientation: Gradient.Horizontal
-                        GradientStop { position: 0; color: Theme.mantle }
+                        GradientStop { position: 0; color: Theme.chromeBackground }
                         GradientStop { position: 1; color: "transparent" }
                     }
                 }
@@ -819,7 +819,7 @@ Rectangle {
                     gradient: Gradient {
                         orientation: Gradient.Horizontal
                         GradientStop { position: 0; color: "transparent" }
-                        GradientStop { position: 1; color: Theme.mantle }
+                        GradientStop { position: 1; color: Theme.chromeBackground }
                     }
                 }
             }

src/qml/theme/Theme.qml

@@ -133,4 +133,9 @@ QtObject {
         var alpha = 1 - strength * (1 - defaultAlpha)
         return Qt.rgba(color.r, color.g, color.b, alpha)
     }
+
+    readonly property color chromeBackground: containerColor(mantle, 0.75)
+    readonly property color contentBackground: containerColor(base, 0.65)
+    readonly property color overlayBackground: containerColor(mantle, 0.88)
+    readonly property color popupBackground: containerColor(crust, 0.88)
 }

src/qml/views/FileDetailedView.qml

@@ -551,7 +551,7 @@ FocusScope {
             Rectangle {
                 anchors.fill: parent
                 radius: Theme.radiusLarge
-                color: Theme.crust
+                color: Theme.popupBackground
                 border.color: Qt.rgba(Theme.text.r, Theme.text.g, Theme.text.b, 0.08)
                 border.width: 1
             }
@@ -637,7 +637,7 @@ FocusScope {
             z: 13
             width: root.width
             height: root.rowHeight
-            color: Theme.mantle
+            color: Theme.chromeBackground
             radius: Theme.radiusMedium
 
             // Cover the bottom corners so only the top is rounded