fixed Crypto.qml glitch and a bug in Volume.qml typing

bar/modules/Volume.qml

@@ -150,12 +150,19 @@ ModuleChip {
         cardHeight: popupCol.implicitHeight + 34
         hasKeyboardFocus: true
 
-        ColumnLayout {
+        Item {
             id: popupCol
             anchors { left: parent.left; right: parent.right; top: parent.top }
             anchors.margins:   16
             anchors.topMargin: 18
-            spacing: 14
+            implicitWidth: popupContent.implicitWidth
+            implicitHeight: popupContent.implicitHeight
+            focus: true
+
+            ColumnLayout {
+                id: popupContent
+                anchors.fill: parent
+                spacing: 14
 
                     VolumeSection {
                         id: outputSection
@@ -248,6 +255,13 @@ ModuleChip {
                     }
                     Item { height: 2 }
                 }
+
+            MouseArea {
+                anchors.fill: parent
+                z: -1
+                onClicked: popupCol.forceActiveFocus()
+            }
+        }
     }
 
     component VolumeSection: ColumnLayout {
@@ -310,13 +324,18 @@ ModuleChip {
                     if (!vs.muted) {
                         let val = parseInt(text.replace("%", "").trim(), 10)
                         if (!isNaN(val)) vs.sliderMoved(Math.max(0, Math.min(vs.maxVolume, val)))
-                        text = vs.volume + "%"
+                        text = Qt.binding(function() { return vs.muted ? "muted" : vs.volume + "%" })
                     }
+                    popupCol.forceActiveFocus()
                 }
                 onActiveFocusChanged: {
                     if (activeFocus && !vs.muted) {
                         text = vs.volume.toString()
                         selectAll()
+                    } else if (!activeFocus && !vs.muted) {
+                        let val = parseInt(text.replace("%", "").trim(), 10)
+                        if (!isNaN(val)) vs.sliderMoved(Math.max(0, Math.min(vs.maxVolume, val)))
+                        text = Qt.binding(function() { return vs.muted ? "muted" : vs.volume + "%" })
                     }
                 }
             }
@@ -525,7 +544,8 @@ ModuleChip {
             onAccepted: {
                 let val = parseInt(text.replace("%", "").trim(), 10)
                 if (!isNaN(val)) lr.valueSet(Math.max(lr.minValue, Math.min(lr.maxValue, val)))
-                text = lr.value + "%"
+                text = Qt.binding(function() { return lr.value + "%" })
+                popupCol.forceActiveFocus()
             }
             onActiveFocusChanged: {
                 if (activeFocus) {
@@ -534,7 +554,7 @@ ModuleChip {
                 } else {
                     let val = parseInt(text.replace("%", "").trim(), 10)
                     if (!isNaN(val)) lr.valueSet(Math.max(lr.minValue, Math.min(lr.maxValue, val)))
-                    text = lr.value + "%"
+                    text = Qt.binding(function() { return lr.value + "%" })
                 }
             }
         }

components/PopupPanel.qml

@@ -23,8 +23,6 @@ PanelWindow {
 
     function _doOpen() { hideTimer.stop(); visible = true; popupOpen = true }
     function open()   {
-        if (popupCenterX < 0 && chipRoot)
-            popupCenterX = chipRoot.mapToItem(null, 0, 0).x + chipRoot.width / 2
         _doOpen()
     }
     function close()  { popupOpen = false; hideTimer.restart() }

config/themes/boat.qml

@@ -0,0 +1,309 @@
+pragma Singleton
+import QtQuick
+import Quickshell
+
+QtObject {
+    id: theme
+
+    // ── Wallpaper ──────────────────────────────────────────────────────────────
+    readonly property string wallpaper: Quickshell.env("HOME") + "/.config/quickshell/wallpapers/wallhaven-zpoxyj.png"
+
+    // ── Base Backgrounds ───────────────────────────────────────────────────────
+    readonly property color bg:      "#cc0e0a0d" // Deepest water and night sky shadow
+    readonly property color bgPanel: "transparent"
+    readonly property color bgPopup: "#cc0e0a0d" // Near-black silhouette tones
+    readonly property color bgFrame: bg
+
+    // ── Separators ────────────────────────────────────────────────────────────
+    readonly property color separator: "#33614d4a" // Muted dusky terracotta line
+
+    // ── Text ──────────────────────────────────────────────────────────────────
+    readonly property color textMain:  "#fffaf4f0" // Warm sunset cream highlight
+    readonly property color textDim:   "#998f7e7c" // Hazy dusk mauve gray
+    readonly property color todayText: "#ffffffff"
+
+    // ── Accent & Borders ──────────────────────────────────────────────────────
+    readonly property color accent:       "#ffe0533c" // Vibrant horizon crimson-orange
+    readonly property color border:       "transparent"
+    readonly property color frameBorder:  "transparent" 
+    readonly property color borderPopup:  "transparent" 
+    readonly property color borderToday:  accent
+
+    // ── Logo Module ────────────────────────────────────────────────────────
+    readonly property color logoBg:           bgPanel
+    readonly property color logoBgHover:      "#22ffffff"
+    readonly property color logoBorder:       border
+    readonly property color logoBorderActive: accent
+    readonly property color logoIcon:         textMain
+    readonly property color logoIconActive:   accent
+
+    // ── Stats Module (Variation: Crimson Horizon Pulse) ───────────────────────
+    readonly property color statsBg:          bgPanel
+    readonly property color statsBorder:      border
+    readonly property color statsCpuColor:    "#ffe0533c" // Horizon crimson-orange
+    readonly property color statsMemColor:    "#ff4e618d" // Twilight sky deep blue
+    readonly property color statsDiskColor:   "#fffca352" // Warm cabin lamp glow
+    readonly property color statsTrackColor:  "#15ffffff"
+
+    // ── Volume Module (Variation: Lone Boat Dusk) ─────────────────────────────
+    readonly property color volBg:           bgPanel
+    readonly property color volBgHover:      "#22614d4a"
+    readonly property color volBorder:       border
+    readonly property color volBorderHover:  "#ff4e618d"
+    readonly property color volPopupBg:      bgPopup
+    readonly property color volPopupBorder:  borderPopup
+    readonly property color volIcon:         "#ff4e618d" 
+    readonly property color volIconMuted:    "#ff485066"
+    readonly property color volTrack:        "#22ffffff"
+    readonly property color volHandle:       accent
+    readonly property color volHandleBorder: "#33ffffff"
+    readonly property color volMuteBg:       "#33f38ba8"
+    readonly property color volPickerHover:  "#15e0533c"
+
+    // ── Clock Module ───────────────────────────────────────────────────────────
+    readonly property color clockBg:          bgPanel
+    readonly property color clockBgHover:     "#11ffffff"
+    readonly property color clockBorder:      border
+    readonly property color clockBorderHover: accent
+    readonly property color clockTime:        textMain
+    readonly property color clockSeconds:     "#fffca352" // Cabin-glow orange/yellow
+    readonly property color clockIcon:        accent
+
+    // ── Battery Module ────────────────────────────────────────────────────────
+    readonly property color batteryFull:      accent
+    readonly property color batteryCharging:  accent
+    readonly property color batteryCritical:  statusErr
+    readonly property color batteryLow:       statusWarn
+    readonly property color batteryIcon:      clockIcon
+    readonly property color batBg:            bgPanel
+    readonly property color batBgHover:       "#11ffffff"
+    readonly property color batBorder:        border
+    readonly property color batBorderHover:   accent
+    readonly property color batText:          textMain
+    readonly property color batPopupBg:       bgPopup
+    readonly property color batPopupBorder:   borderPopup
+    readonly property color batPopupSeparator: separator
+    readonly property color batPopupHeader:   "#ffe0533c"
+    readonly property color batPopupText:     textMain
+    readonly property color batPopupDim:      textDim
+    readonly property color batProgressTrack: separator
+    readonly property color batProfileActiveText: bg
+
+    // ── Network Module ────────────────────────────────────────────────────────
+    readonly property color netBg:              bgPanel
+    readonly property color netBgHover:         "#11ffffff"
+    readonly property color netBorder:          border
+    readonly property color netBorderHover:     accent
+    readonly property color netText:            textMain
+    readonly property color netPopupBg:         bgPopup
+    readonly property color netPopupBorder:     borderPopup
+    readonly property color netPopupSeparator:  separator
+    readonly property color netPopupHeader:     "#ffe0533c"
+    readonly property color netPopupText:       textMain
+    readonly property color netPopupDim:        textDim
+    readonly property color netFieldBg:         "#22ffffff"
+    readonly property color netCancelBgHover:   "#22ffffff"
+    readonly property color netConnectText:     "#ff0e0a0d"
+    readonly property color netApActiveBg:      Qt.alpha(accent, 0.15)
+    readonly property color netApHoverBg:       calArrowBgHover
+    readonly property color netDisconnectBg:    Qt.alpha(statusErr, 0.18)
+    readonly property color netDisconnectBorder: Qt.alpha(statusErr, 0.45)
+    readonly property color netWiredOkBg:       Qt.alpha(statusOk, 0.12)
+    readonly property color netWiredErrBg:      Qt.alpha(statusErr, 0.12)
+    readonly property color netWiredOkBorder:   Qt.alpha(statusOk, 0.4)
+    readonly property color netWiredErrBorder:   Qt.alpha(statusErr, 0.4)
+
+    // ── Calendar Popup ─────────────────────────────────────────────────────────
+    readonly property color calCardBg:        bgPopup
+    readonly property color calCardBorder:    borderPopup
+    readonly property color calSeparator:     separator
+    readonly property color clockPopupHeader: "#ffe0533c"
+    readonly property color clockPopupText:   textMain
+    readonly property color clockPopupDim:    textDim
+    readonly property color clockPopupDate:   textMain
+    readonly property color clockPopupUtc:    textDim
+    readonly property color calArrowIcon:      textDim             
+    readonly property color calArrowIconHover: "#ffe0533c"         
+    readonly property color calArrowBg:        "transparent"       
+    readonly property color calArrowBgHover:   "#22e0533c"         // Soft sunset tint
+    readonly property color calArrowBgPress:   "#ffe0533c"         
+
+    // ── Workspace Module ───────────────────────────────────────────────────────
+    readonly property color wsPanelBg:      bgPanel
+    readonly property color wsPanelBorder:  "transparent"
+    readonly property color wsActiveBg:     accent
+    readonly property color wsInactiveBg:   "#15ffffff"
+    readonly property color wsHoverBg:      "#33614d4a"
+    readonly property color wsActiveText:   "#ff0e0a0d" 
+    readonly property color wsInactiveText: textMain
+    readonly property color wsHoverText:    "#ffffffff"
+
+    // ── Tray Module ────────────────────────────────────────────────────────────
+    readonly property color trayBg:          bgPanel
+    readonly property color trayBgHover:     "#11ffffff"
+    readonly property color trayBorder:      border
+    readonly property color trayBorderHover: "#22ffffff"
+    readonly property color trayIcon:        textMain
+
+    // ── Tray Context Menu ──────────────────────────────────────────────────────
+    readonly property color trayMenuBg:        bgPopup
+    readonly property color trayMenuBorder:    borderPopup
+    readonly property color trayMenuText:      textMain
+    readonly property color trayMenuDim:       textDim
+    readonly property color trayMenuHover:     "#22e0533c"   
+    readonly property color trayMenuCheck:     accent
+    readonly property color trayMenuSeparator: separator
+
+    // ── Launcher (Variation: Dark Water Mist) ──────────────────────────────────
+    readonly property color launcherBg:               bgPopup
+    readonly property color launcherBorder:           borderPopup
+    readonly property color launcherInput:            "#440a080a"
+    readonly property color launcherInputBorderFocus: accent
+    readonly property color launcherPill:             "#44614d4a"
+    readonly property color launcherText:             textMain
+    readonly property color launcherDim:              textDim
+    readonly property color launcherAccent:           accent
+    readonly property color launcherHover:            "#22e0533c"
+    readonly property color launcherSelected:         "#44e0533c"
+    readonly property color launcherModeActiveText:   "#ffffffff"
+    readonly property color launcherModeActiveBg:     accent
+
+    // ── Status Colors ──────────────────────────────────────────────────────────
+    readonly property color statusOk:   "#ffb8c499" // Soft warm sage green
+    readonly property color statusWarn: "#fffca352" // Cabin-glow orange
+    readonly property color statusErr:  "#fff38ba8" 
+    readonly property color statusInfo: "#ff4e618d" // Dusk twilight blue
+
+    // ── Notifications Module ───────────────────────────────────────────────────
+    readonly property color notifBg:           bgPanel
+    readonly property color notifBgHover:      "#11ffffff"
+    readonly property color notifBorder:       border
+    readonly property color notifBorderActive: accent
+    readonly property color notifIcon:         textMain
+    readonly property color notifIconActive:   accent
+    readonly property color notifBadgeBg:      statusErr
+    readonly property color notifBadgeText:    "#ffffffff"
+    readonly property color notifSeparator:    separator
+    readonly property color notifDnd:          separator
+
+    // ── Toast cards (Variation: Silhouette Glow) ─────────────────────────────────
+    readonly property color notifToastBg:      bgPopup
+    readonly property color notifToastBgHover: "#22ffffff"
+    readonly property color notifToastBorder:  borderPopup
+    readonly property color notifToastText:    textMain
+    readonly property color notifToastDim:     textDim
+    readonly property color notifToastAppName: "#ff4e618d"
+
+    // ── Urgency colours ────────────────────────────────────────────────────────
+    readonly property color notifUrgencyCritical: statusErr
+    readonly property color notifUrgencyNormal:   statusInfo
+    readonly property color notifUrgencyLow:      textDim
+
+    // ── Progress bar ───────────────────────────────────────────────────────────
+    readonly property color notifProgressBg:   "#22ffffff"
+    readonly property color notifProgressFill: accent
+
+    // ── History popup ──────────────────────────────────────────────────────────
+    readonly property color notifHistoryBg:     bgPopup
+    readonly property color notifHistoryBorder: borderPopup
+    readonly property color notifHistoryHover:  "#11e0533c"
+    readonly property color notifHistoryEmpty:  textDim
+
+    // ── BgDate Module ──────────────────────────────────────────────────────────
+    readonly property color bgDateText:        "#ffffffff"       
+    readonly property color bgDateShadow:      "#88000000"       
+    readonly property color bgDateSecondsText: bgDateText       
+
+    // ── Crypto Module ──────────────────────────────────────────────────────────
+    readonly property color cryptoBg:          bgPanel
+    readonly property color cryptoBgHover:     "#15ffffff"     
+    readonly property color cryptoBorder:      border
+    readonly property color cryptoBorderHover: accent                
+
+    readonly property color cryptoIcon:        accent                 
+    readonly property color cryptoLabel:       textDim               
+    readonly property color cryptoValue:       textMain              
+
+    readonly property color cryptoUp:          "#ffb8c499"           
+    readonly property color cryptoDown:        "#fff38ba8"           
+
+    // Popup card
+    readonly property color cryptoPopupBg:     bgPopup
+    readonly property color cryptoPopupBorder: borderPopup
+    readonly property color cryptoPopupHeader: "#ffe0533c"           
+    readonly property color cryptoPopupText:   textMain
+    readonly property color cryptoPopupDim:    textDim
+
+    // Tinted surfaces
+    readonly property color cryptoUpBg:          Qt.rgba(cryptoUp.r, cryptoUp.g, cryptoUp.b, 0.13)
+    readonly property color cryptoDownBg:        Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.13)
+    readonly property color cryptoChipRemoveBg:  Qt.rgba(cryptoDown.r, cryptoDown.g, cryptoDown.b, 0.27)
+    readonly property color cryptoApplyIdleBg:   Qt.rgba(accent.r, accent.g, accent.b, 0.20)
+
+    readonly property color cryptoFieldBg:       "#15ffffff"
+    readonly property color cryptoFieldBgFocus:  "#22ffffff"
+    readonly property color cryptoRangeTrack:    "#1affffff"
+    readonly property color cryptoTextOnAccent:  "#ff0e0a0d"
+    readonly property color cryptoPlaceholder:   Qt.rgba(textDim.r, textDim.g, textDim.b, 0.33)
+
+    // ── Polkit Dialog ──────────────────────────────────────────────────────────
+    readonly property color polkitOverlayBg:          "#bb000000"    
+    readonly property color polkitCardBg:             bgPopup    
+    readonly property color polkitCardBorder:         border    
+
+    // Lock icon
+    readonly property color polkitIconBg:             "#1ee0533c"    
+    readonly property color polkitIconBorder:         "#44e0533c"    
+    readonly property color polkitIconColor:          accent      
+
+    // Text hierarchy
+    readonly property color polkitTitle:              textMain       
+    readonly property color polkitMessage:            "#cce5ded9"    
+
+    // Action-ID pill
+    readonly property color polkitPillBg:             "#1a614d4a"    
+    readonly property color polkitPillText:           "#668f7e7c"    
+
+    // Divider
+    readonly property color polkitDivider:            "#33614d4a"    
+
+    // Supplementary message states
+    readonly property color polkitSuppErrBg:          "#1af38ba8"    
+    readonly property color polkitSuppErrBorder:      "#44f38ba8"    
+    readonly property color polkitSuppErrText:        statusErr      
+
+    readonly property color polkitSuppOkBg:           "#1ab8c499"    
+    readonly property color polkitSuppOkBorder:       "#44b8c499"    
+    readonly property color polkitSuppOkText:         statusOk       
+
+    // Fields
+    readonly property color polkitFieldBg:            "#440a080a"    
+    readonly property color polkitFieldBorder:        "#22ffffff"    
+    readonly property color polkitFieldBorderFocus:   accent      
+
+    // Identity selector
+    readonly property color polkitUserLabel:          "#998f7e7c"    
+    readonly property color polkitUserValue:          accent         
+
+    // Input prompt
+    readonly property color polkitInputPrompt:        "#888f7e7c"    
+
+    // TextInput
+    readonly property color polkitInputText:          textMain       
+    readonly property color polkitInputSelection:     "#55e0533c"    
+    readonly property color polkitInputSelectedText:  bg             
+
+    // Eye toggle
+    readonly property color polkitEyeIcon:            "#668f7e7c"    
+    readonly property color polkitEyeIconHover:       accent         
+
+    // Buttons
+    readonly property color polkitAuthBg:             "#dde0533c"    
+    readonly property color polkitAuthBgHover:        accent         
+    readonly property color polkitAuthText:           bg             
+
+    readonly property color polkitCancelBg:           "#0dffffff"    
+    readonly property color polkitCancelBgHover:      "#22ffffff"    
+    readonly property color polkitCancelBorder:       "#22ffffff"    
+    readonly property color polkitCancelText:         "#cce5ded9"    
+}

config/themes/qmldir

@@ -12,4 +12,6 @@ singleton Metropolitan 1.0 metropolitan.qml
 singleton Goldencity 1.0 goldencity.qml
 singleton Hummingbird 1.0 hummingbird.qml
 singleton Tropicalnight 1.0 tropicalnight.qml
+singleton Boat 1.0 boat.qml
+