Implement transparency background slider

Common/Prefs.qml

@@ -9,6 +9,7 @@ Singleton {
     property int themeIndex: 0
     property bool themeIsDynamic: false
     property bool isLightMode: false
+    property real topBarTransparency: 0.75
     property var recentlyUsedApps: []
     
     readonly property string configDir: Qt.resolvedUrl("file://" + Quickshell.env("HOME") + "/.config/DankMaterialDark")
@@ -59,8 +60,10 @@ Singleton {
                     themeIndex = settings.themeIndex !== undefined ? settings.themeIndex : 0
                     themeIsDynamic = settings.themeIsDynamic !== undefined ? settings.themeIsDynamic : false
                     isLightMode = settings.isLightMode !== undefined ? settings.isLightMode : false
+                    topBarTransparency = settings.topBarTransparency !== undefined ? 
+                        (settings.topBarTransparency > 1 ? settings.topBarTransparency / 100.0 : settings.topBarTransparency) : 0.75
                     recentlyUsedApps = settings.recentlyUsedApps || []
-                    console.log("Loaded settings - themeIndex:", themeIndex, "isDynamic:", themeIsDynamic, "lightMode:", isLightMode, "recentApps:", recentlyUsedApps.length)
+                    console.log("Loaded settings - themeIndex:", themeIndex, "isDynamic:", themeIsDynamic, "lightMode:", isLightMode, "transparency:", topBarTransparency, "recentApps:", recentlyUsedApps.length)
                 } else {
                     console.log("Settings file is empty")
                 }
@@ -84,6 +87,7 @@ Singleton {
             themeIndex: themeIndex,
             themeIsDynamic: themeIsDynamic,
             isLightMode: isLightMode,
+            topBarTransparency: topBarTransparency,
             recentlyUsedApps: recentlyUsedApps
         }
         
@@ -91,7 +95,7 @@ Singleton {
         
         writeProcess.command = ["sh", "-c", "echo '" + content + "' > '" + Quickshell.env("HOME") + "/.config/DankMaterialDark/settings.json'"]
         writeProcess.running = true
-        console.log("Saving settings - themeIndex:", themeIndex, "isDynamic:", themeIsDynamic, "lightMode:", isLightMode, "recentApps:", recentlyUsedApps.length)
+        console.log("Saving settings - themeIndex:", themeIndex, "isDynamic:", themeIsDynamic, "lightMode:", isLightMode, "transparency:", topBarTransparency, "recentApps:", recentlyUsedApps.length)
     }
     
     function applyStoredTheme() {
@@ -121,6 +125,12 @@ Singleton {
         saveSettings()
     }
     
+    function setTopBarTransparency(transparency) {
+        console.log("Prefs setTopBarTransparency called - topBarTransparency:", transparency)
+        topBarTransparency = transparency
+        saveSettings()
+    }
+    
     function addRecentApp(app) {
         var existingIndex = -1
         for (var i = 0; i < recentlyUsedApps.length; i++) {

Widgets/ControlCenter/DisplayTab.qml

@@ -13,6 +13,19 @@ ScrollView {
     
     // These should be bound from parent
     property bool nightModeEnabled: false
+    property real topBarTransparency: Prefs.topBarTransparency // Default transparency value
+    
+    Component.onCompleted: {
+        // Sync with stored transparency value on startup
+        topBarTransparency = Prefs.topBarTransparency
+    }
+    
+    Connections {
+        target: Prefs
+        function onTopBarTransparencyChanged() {
+            displayTab.topBarTransparency = Prefs.topBarTransparency
+        }
+    }
     
     Column {
         width: parent.width
@@ -165,6 +178,47 @@ ScrollView {
                 }
             }
             
+            // Top Bar Transparency Control
+            Column {
+                width: parent.width
+                spacing: Theme.spacingM
+                anchors.margins: Theme.spacingM
+                
+                Text {
+                    text: "Top Bar Transparency"
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceText
+                    font.weight: Font.Medium
+                }
+                
+                CustomSlider {
+                    width: parent.width - (Theme.spacingM * 2)
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    value: Math.round(displayTab.topBarTransparency * 100)
+                    minimum: 0
+                    maximum: 100
+                    leftIcon: "opacity"
+                    rightIcon: "circle"
+                    unit: "%"
+                    showValue: true
+                    
+                    onSliderValueChanged: (newValue) => {
+                        let transparencyValue = newValue / 100.0
+                        displayTab.topBarTransparency = transparencyValue
+                        Prefs.setTopBarTransparency(transparencyValue)
+                    }
+                }
+                
+                Text {
+                    text: "Adjust the transparency of the top bar background"
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: Theme.surfaceVariantText
+                    wrapMode: Text.WordWrap
+                    width: parent.width - (Theme.spacingM * 2)
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
             // Theme Picker
             Column {
                 width: parent.width

Widgets/TopBar/TopBar.qml

@@ -19,6 +19,16 @@ PanelWindow {
     screen: modelData
     property string screenName: modelData.name
     
+    // Transparency property for the top bar background
+    property real backgroundTransparency: Prefs.topBarTransparency
+    
+    Connections {
+        target: Prefs
+        function onTopBarTransparencyChanged() {
+            topBar.backgroundTransparency = Prefs.topBarTransparency
+        }
+    }
+    
     // Properties exposed to shell
     property bool hasActiveMedia: false
     property var activePlayer: null
@@ -94,7 +104,7 @@ PanelWindow {
         Rectangle {
             anchors.fill: parent
             radius: Theme.cornerRadiusXLarge
-            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 0.75)
+            color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, topBar.backgroundTransparency)
             
             layer.enabled: true
             layer.effect: DropShadow {