settings: make plugin browser and widget browser floating

quickshell/Modules/Settings/DankBarTab.qml

@@ -194,10 +194,10 @@ Item {
     // ! Hacky workaround because we want to re-register any vertical bars after changing a hBar
     // ! That allows them to re-make with the right exclusiveZone
     function notifyHorizontalBarChange() {
-        if (!selectedBarIsVertical) {
+        if (selectedBarIsVertical)
+            return;
         horizontalBarChangeDebounce.restart();
     }
-    }
 
     function createNewBar() {
         const barCount = SettingsData.barConfigs.length;
@@ -290,38 +290,44 @@ Item {
     }
 
     function getWidgetsForSection(sectionId) {
-        if (sectionId === "left")
+        switch (sectionId) {
+        case "left":
             return selectedBarConfig?.leftWidgets || [];
-        if (sectionId === "center")
+        case "center":
             return selectedBarConfig?.centerWidgets || [];
-        if (sectionId === "right")
+        case "right":
             return selectedBarConfig?.rightWidgets || [];
+        default:
             return [];
         }
+    }
 
     function setWidgetsForSection(sectionId, widgets) {
-        if (sectionId === "left")
+        switch (sectionId) {
+        case "left":
             SettingsData.updateBarConfig(selectedBarId, {
                 leftWidgets: widgets
             });
-        else if (sectionId === "center")
+            break;
+        case "center":
             SettingsData.updateBarConfig(selectedBarId, {
                 centerWidgets: widgets
             });
-        else if (sectionId === "right")
+            break;
+        case "right":
             SettingsData.updateBarConfig(selectedBarId, {
                 rightWidgets: widgets
             });
+            break;
+        }
     }
 
     function getWidgetsForPopup() {
         return baseWidgetDefinitions.filter(widget => {
-            if (widget.warning && widget.warning.includes("Plugin is disabled")) {
+            if (widget.warning && widget.warning.includes("Plugin is disabled"))
                 return false;
-            }
+            if (widget.enabled === false)
-            if (widget.enabled === false) {
                 return false;
-            }
             return true;
         });
     }
@@ -646,13 +652,17 @@ Item {
         for (var i = 0; i < widgets.length; i++) {
             var widget = widgets[i];
             var widgetId = typeof widget === "string" ? widget : widget.id;
-            if (widgetId === itemId) {
+            if (widgetId !== itemId)
+                continue;
+
             if (typeof widget === "string") {
                 widgets[i] = {
                     "id": widget,
                     "enabled": enabled
                 };
-                } else {
+                break;
+            }
+
             var newWidget = {
                 "id": widget.id,
                 "enabled": enabled
@@ -668,15 +678,13 @@ Item {
             else if (widget.id === "gpuTemp")
                 newWidget.pciId = "";
             if (widget.id === "controlCenterButton") {
-                        newWidget.showNetworkIcon = widget.showNetworkIcon !== undefined ? widget.showNetworkIcon : true;
+                newWidget.showNetworkIcon = widget.showNetworkIcon ?? true;
-                        newWidget.showBluetoothIcon = widget.showBluetoothIcon !== undefined ? widget.showBluetoothIcon : true;
+                newWidget.showBluetoothIcon = widget.showBluetoothIcon ?? true;
-                        newWidget.showAudioIcon = widget.showAudioIcon !== undefined ? widget.showAudioIcon : true;
+                newWidget.showAudioIcon = widget.showAudioIcon ?? true;
             }
             widgets[i] = newWidget;
-                }
             break;
         }
-        }
         setWidgetsForSection(sectionId, widgets);
     }
 
@@ -686,18 +694,28 @@ Item {
 
     function handleSpacerSizeChanged(sectionId, widgetIndex, newSize) {
         var widgets = getWidgetsForSection(sectionId).slice();
+        if (widgetIndex < 0 || widgetIndex >= widgets.length) {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
 
-        if (widgetIndex >= 0 && widgetIndex < widgets.length) {
         var widget = widgets[widgetIndex];
         var widgetId = typeof widget === "string" ? widget : widget.id;
-            if (widgetId === "spacer") {
+        if (widgetId !== "spacer") {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
+
         if (typeof widget === "string") {
             widgets[widgetIndex] = {
                 "id": widget,
                 "enabled": true,
                 "size": newSize
             };
-                } else {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
+
         var newWidget = {
             "id": widget.id,
             "enabled": widget.enabled,
@@ -708,50 +726,53 @@ Item {
         if (widget.pciId !== undefined)
             newWidget.pciId = widget.pciId;
         if (widget.id === "controlCenterButton") {
-                        newWidget.showNetworkIcon = widget.showNetworkIcon !== undefined ? widget.showNetworkIcon : true;
+            newWidget.showNetworkIcon = widget.showNetworkIcon ?? true;
-                        newWidget.showBluetoothIcon = widget.showBluetoothIcon !== undefined ? widget.showBluetoothIcon : true;
+            newWidget.showBluetoothIcon = widget.showBluetoothIcon ?? true;
-                        newWidget.showAudioIcon = widget.showAudioIcon !== undefined ? widget.showAudioIcon : true;
+            newWidget.showAudioIcon = widget.showAudioIcon ?? true;
         }
         widgets[widgetIndex] = newWidget;
-                }
-            }
-        }
-
         setWidgetsForSection(sectionId, widgets);
     }
 
     function handleGpuSelectionChanged(sectionId, widgetIndex, selectedGpuIndex) {
         var widgets = getWidgetsForSection(sectionId).slice();
+        if (widgetIndex < 0 || widgetIndex >= widgets.length) {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
 
-        if (widgetIndex >= 0 && widgetIndex < widgets.length) {
+        var pciId = DgopService.availableGpus && DgopService.availableGpus.length > selectedGpuIndex ? DgopService.availableGpus[selectedGpuIndex].pciId : "";
         var widget = widgets[widgetIndex];
         if (typeof widget === "string") {
             widgets[widgetIndex] = {
                 "id": widget,
                 "enabled": true,
                 "selectedGpuIndex": selectedGpuIndex,
-                    "pciId": DgopService.availableGpus && DgopService.availableGpus.length > selectedGpuIndex ? DgopService.availableGpus[selectedGpuIndex].pciId : ""
+                "pciId": pciId
             };
-            } else {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
+
         var newWidget = {
             "id": widget.id,
             "enabled": widget.enabled,
             "selectedGpuIndex": selectedGpuIndex,
-                    "pciId": DgopService.availableGpus && DgopService.availableGpus.length > selectedGpuIndex ? DgopService.availableGpus[selectedGpuIndex].pciId : ""
+            "pciId": pciId
         };
         if (widget.size !== undefined)
             newWidget.size = widget.size;
         widgets[widgetIndex] = newWidget;
-            }
-        }
-
         setWidgetsForSection(sectionId, widgets);
     }
 
     function handleDiskMountSelectionChanged(sectionId, widgetIndex, mountPath) {
         var widgets = getWidgetsForSection(sectionId).slice();
+        if (widgetIndex < 0 || widgetIndex >= widgets.length) {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
 
-        if (widgetIndex >= 0 && widgetIndex < widgets.length) {
         var widget = widgets[widgetIndex];
         if (typeof widget === "string") {
             widgets[widgetIndex] = {
@@ -759,7 +780,10 @@ Item {
                 "enabled": true,
                 "mountPath": mountPath
             };
-            } else {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
+
         var newWidget = {
             "id": widget.id,
             "enabled": widget.enabled,
@@ -772,13 +796,11 @@ Item {
         if (widget.pciId !== undefined)
             newWidget.pciId = widget.pciId;
         if (widget.id === "controlCenterButton") {
-                    newWidget.showNetworkIcon = widget.showNetworkIcon !== undefined ? widget.showNetworkIcon : true;
+            newWidget.showNetworkIcon = widget.showNetworkIcon ?? true;
-                    newWidget.showBluetoothIcon = widget.showBluetoothIcon !== undefined ? widget.showBluetoothIcon : true;
+            newWidget.showBluetoothIcon = widget.showBluetoothIcon ?? true;
-                    newWidget.showAudioIcon = widget.showAudioIcon !== undefined ? widget.showAudioIcon : true;
+            newWidget.showAudioIcon = widget.showAudioIcon ?? true;
         }
         widgets[widgetIndex] = newWidget;
-            }
-        }
 
         setWidgetsForSection(sectionId, widgets);
     }
@@ -786,46 +808,53 @@ Item {
     function handleControlCenterSettingChanged(sectionId, widgetIndex, settingName, value) {
         switch (settingName) {
         case "showNetworkIcon":
-            SettingsData.set("controlCenterShowNetworkIcon", value)
+            SettingsData.set("controlCenterShowNetworkIcon", value);
-            break
+            break;
         case "showBluetoothIcon":
-            SettingsData.set("controlCenterShowBluetoothIcon", value)
+            SettingsData.set("controlCenterShowBluetoothIcon", value);
-            break
+            break;
         case "showAudioIcon":
-            SettingsData.set("controlCenterShowAudioIcon", value)
+            SettingsData.set("controlCenterShowAudioIcon", value);
-            break
+            break;
         case "showVpnIcon":
-            SettingsData.set("controlCenterShowVpnIcon", value)
+            SettingsData.set("controlCenterShowVpnIcon", value);
-            break
+            break;
         case "showBrightnessIcon":
-            SettingsData.set("controlCenterShowBrightnessIcon", value)
+            SettingsData.set("controlCenterShowBrightnessIcon", value);
-            break
+            break;
         case "showMicIcon":
-            SettingsData.set("controlCenterShowMicIcon", value)
+            SettingsData.set("controlCenterShowMicIcon", value);
-            break
+            break;
         case "showBatteryIcon":
-            SettingsData.set("controlCenterShowBatteryIcon", value)
+            SettingsData.set("controlCenterShowBatteryIcon", value);
-            break
+            break;
         case "showPrinterIcon":
-            SettingsData.set("controlCenterShowPrinterIcon", value)
+            SettingsData.set("controlCenterShowPrinterIcon", value);
-            break
+            break;
         }
     }
 
     function handlePrivacySettingChanged(sectionId, widgetIndex, settingName, value) {
-        if (settingName === "showMicIcon") {
+        switch (settingName) {
+        case "showMicIcon":
             SettingsData.set("privacyShowMicIcon", value);
-        } else if (settingName === "showCameraIcon") {
+            break;
+        case "showCameraIcon":
             SettingsData.set("privacyShowCameraIcon", value);
-        } else if (settingName === "showScreenSharingIcon") {
+            break;
+        case "showScreenSharingIcon":
             SettingsData.set("privacyShowScreenShareIcon", value);
+            break;
         }
     }
 
     function handleMinimumWidthChanged(sectionId, widgetIndex, enabled) {
         var widgets = getWidgetsForSection(sectionId).slice();
+        if (widgetIndex < 0 || widgetIndex >= widgets.length) {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
 
-        if (widgetIndex >= 0 && widgetIndex < widgets.length) {
         var widget = widgets[widgetIndex];
         if (typeof widget === "string") {
             widgets[widgetIndex] = {
@@ -833,7 +862,10 @@ Item {
                 "enabled": true,
                 "minimumWidth": enabled
             };
-            } else {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
+
         var newWidget = {
             "id": widget.id,
             "enabled": widget.enabled,
@@ -850,21 +882,21 @@ Item {
         if (widget.showSwap !== undefined)
             newWidget.showSwap = widget.showSwap;
         if (widget.id === "controlCenterButton") {
-                    newWidget.showNetworkIcon = widget.showNetworkIcon !== undefined ? widget.showNetworkIcon : true;
+            newWidget.showNetworkIcon = widget.showNetworkIcon ?? true;
-                    newWidget.showBluetoothIcon = widget.showBluetoothIcon !== undefined ? widget.showBluetoothIcon : true;
+            newWidget.showBluetoothIcon = widget.showBluetoothIcon ?? true;
-                    newWidget.showAudioIcon = widget.showAudioIcon !== undefined ? widget.showAudioIcon : true;
+            newWidget.showAudioIcon = widget.showAudioIcon ?? true;
         }
         widgets[widgetIndex] = newWidget;
-            }
-        }
-
         setWidgetsForSection(sectionId, widgets);
     }
 
     function handleShowSwapChanged(sectionId, widgetIndex, enabled) {
         var widgets = getWidgetsForSection(sectionId).slice();
+        if (widgetIndex < 0 || widgetIndex >= widgets.length) {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
 
-        if (widgetIndex >= 0 && widgetIndex < widgets.length) {
         var widget = widgets[widgetIndex];
         if (typeof widget === "string") {
             widgets[widgetIndex] = {
@@ -872,7 +904,10 @@ Item {
                 "enabled": true,
                 "showSwap": enabled
             };
-            } else {
+            setWidgetsForSection(sectionId, widgets);
+            return;
+        }
+
         var newWidget = {
             "id": widget.id,
             "enabled": widget.enabled,
@@ -899,14 +934,11 @@ Item {
         if (widget.keyboardLayoutNameCompactMode !== undefined)
             newWidget.keyboardLayoutNameCompactMode = widget.keyboardLayoutNameCompactMode;
         if (widget.id === "controlCenterButton") {
-                    newWidget.showNetworkIcon = widget.showNetworkIcon !== undefined ? widget.showNetworkIcon : true;
+            newWidget.showNetworkIcon = widget.showNetworkIcon ?? true;
-                    newWidget.showBluetoothIcon = widget.showBluetoothIcon !== undefined ? widget.showBluetoothIcon : true;
+            newWidget.showBluetoothIcon = widget.showBluetoothIcon ?? true;
-                    newWidget.showAudioIcon = widget.showAudioIcon !== undefined ? widget.showAudioIcon : true;
+            newWidget.showAudioIcon = widget.showAudioIcon ?? true;
         }
         widgets[widgetIndex] = newWidget;
-            }
-        }
-
         setWidgetsForSection(sectionId, widgets);
     }
 
@@ -932,7 +964,6 @@ Item {
                     "id": widget.id,
                     "enabled": widget.enabled
                 };
-
                 if (widget.size !== undefined)
                     newWidget.size = widget.size;
                 if (widget.selectedGpuIndex !== undefined)
@@ -956,11 +987,10 @@ Item {
                 if (widget.keyboardLayoutNameCompactMode !== undefined)
                     newWidget.keyboardLayoutNameCompactMode = widget.keyboardLayoutNameCompactMode;
                 if (widget.id === "controlCenterButton") {
-                    newWidget.showNetworkIcon = widget.showNetworkIcon !== undefined ? widget.showNetworkIcon : true;
+                    newWidget.showNetworkIcon = widget.showNetworkIcon ?? true;
-                    newWidget.showBluetoothIcon = widget.showBluetoothIcon !== undefined ? widget.showBluetoothIcon : true;
+                    newWidget.showBluetoothIcon = widget.showBluetoothIcon ?? true;
-                    newWidget.showAudioIcon = widget.showAudioIcon !== undefined ? widget.showAudioIcon : true;
+                    newWidget.showAudioIcon = widget.showAudioIcon ?? true;
                 }
-
                 widgets[i] = newWidget;
                 widget = newWidget;
             }
@@ -993,59 +1023,45 @@ Item {
         var widgets = [];
         var widgetData = getWidgetsForSection(sectionId);
         widgetData.forEach(widget => {
-            var widgetId = typeof widget === "string" ? widget : widget.id;
+            var isString = typeof widget === "string";
-            var widgetEnabled = typeof widget === "string" ? true : widget.enabled;
+            var widgetId = isString ? widget : widget.id;
-            var widgetSize = typeof widget === "string" ? undefined : widget.size;
+            var widgetDef = baseWidgetDefinitions.find(w => w.id === widgetId);
-            var widgetSelectedGpuIndex = typeof widget === "string" ? undefined : widget.selectedGpuIndex;
+            if (!widgetDef)
-            var widgetPciId = typeof widget === "string" ? undefined : widget.pciId;
+                return;
-            var widgetMountPath = typeof widget === "string" ? undefined : widget.mountPath;
-            var widgetShowNetworkIcon = typeof widget === "string" ? undefined : widget.showNetworkIcon;
-            var widgetShowBluetoothIcon = typeof widget === "string" ? undefined : widget.showBluetoothIcon;
-            var widgetShowAudioIcon = typeof widget === "string" ? undefined : widget.showAudioIcon;
-            var widgetMinimumWidth = typeof widget === "string" ? undefined : widget.minimumWidth;
-            var widgetShowSwap = typeof widget === "string" ? undefined : widget.showSwap;
-            var widgetMediaSize = typeof widget === "string" ? undefined : widget.mediaSize;
-            var widgetClockCompactMode = typeof widget === "string" ? undefined : widget.clockCompactMode;
-            var widgetFocusedWindowCompactMode = typeof widget === "string" ? undefined : widget.focusedWindowCompactMode;
-            var widgetRunningAppsCompactMode = typeof widget === "string" ? undefined : widget.runningAppsCompactMode;
-            var widgetKeyboardLayoutNameCompactMode = typeof widget === "string" ? undefined : widget.keyboardLayoutNameCompactMode;
-            var widgetDef = baseWidgetDefinitions.find(w => {
-                return w.id === widgetId;
-            });
-            if (widgetDef) {
-                var item = Object.assign({}, widgetDef);
-                item.enabled = widgetEnabled;
-                if (widgetSize !== undefined)
-                    item.size = widgetSize;
-                if (widgetSelectedGpuIndex !== undefined)
-                    item.selectedGpuIndex = widgetSelectedGpuIndex;
-                if (widgetPciId !== undefined)
-                    item.pciId = widgetPciId;
-                if (widgetMountPath !== undefined)
-                    item.mountPath = widgetMountPath;
-                if (widgetShowNetworkIcon !== undefined)
-                    item.showNetworkIcon = widgetShowNetworkIcon;
-                if (widgetShowBluetoothIcon !== undefined)
-                    item.showBluetoothIcon = widgetShowBluetoothIcon;
-                if (widgetShowAudioIcon !== undefined)
-                    item.showAudioIcon = widgetShowAudioIcon;
-                if (widgetMinimumWidth !== undefined)
-                    item.minimumWidth = widgetMinimumWidth;
-                if (widgetShowSwap !== undefined)
-                    item.showSwap = widgetShowSwap;
-                if (widgetMediaSize !== undefined)
-                    item.mediaSize = widgetMediaSize;
-                if (widgetClockCompactMode !== undefined)
-                    item.clockCompactMode = widgetClockCompactMode;
-                if (widgetFocusedWindowCompactMode !== undefined)
-                    item.focusedWindowCompactMode = widgetFocusedWindowCompactMode;
-                if (widgetRunningAppsCompactMode !== undefined)
-                    item.runningAppsCompactMode = widgetRunningAppsCompactMode;
-                if (widgetKeyboardLayoutNameCompactMode !== undefined)
-                    item.keyboardLayoutNameCompactMode = widgetKeyboardLayoutNameCompactMode;
 
-                widgets.push(item);
+            var item = Object.assign({}, widgetDef);
+            item.enabled = isString ? true : widget.enabled;
+            if (!isString) {
+                if (widget.size !== undefined)
+                    item.size = widget.size;
+                if (widget.selectedGpuIndex !== undefined)
+                    item.selectedGpuIndex = widget.selectedGpuIndex;
+                if (widget.pciId !== undefined)
+                    item.pciId = widget.pciId;
+                if (widget.mountPath !== undefined)
+                    item.mountPath = widget.mountPath;
+                if (widget.showNetworkIcon !== undefined)
+                    item.showNetworkIcon = widget.showNetworkIcon;
+                if (widget.showBluetoothIcon !== undefined)
+                    item.showBluetoothIcon = widget.showBluetoothIcon;
+                if (widget.showAudioIcon !== undefined)
+                    item.showAudioIcon = widget.showAudioIcon;
+                if (widget.minimumWidth !== undefined)
+                    item.minimumWidth = widget.minimumWidth;
+                if (widget.showSwap !== undefined)
+                    item.showSwap = widget.showSwap;
+                if (widget.mediaSize !== undefined)
+                    item.mediaSize = widget.mediaSize;
+                if (widget.clockCompactMode !== undefined)
+                    item.clockCompactMode = widget.clockCompactMode;
+                if (widget.focusedWindowCompactMode !== undefined)
+                    item.focusedWindowCompactMode = widget.focusedWindowCompactMode;
+                if (widget.runningAppsCompactMode !== undefined)
+                    item.runningAppsCompactMode = widget.runningAppsCompactMode;
+                if (widget.keyboardLayoutNameCompactMode !== undefined)
+                    item.keyboardLayoutNameCompactMode = widget.keyboardLayoutNameCompactMode;
             }
+            widgets.push(item);
         });
         return widgets;
     }
@@ -1139,50 +1155,14 @@ Item {
                             implicitHeight: 1
                         }
 
-                        Rectangle {
+                        DankButton {
-                            id: addBarBtn
+                            text: I18n.tr("Add Bar")
-                            width: 100
+                            iconName: "add"
-                            height: 32
+                            buttonHeight: 32
-                            radius: Theme.cornerRadius
-                            color: addBarArea.containsMouse ? Theme.primaryPressed : Theme.primary
                             visible: SettingsData.barConfigs.length < 4
                             Layout.alignment: Qt.AlignVCenter
-
-                            Row {
-                                anchors.centerIn: parent
-                                spacing: Theme.spacingXS
-
-                                DankIcon {
-                                    name: "add"
-                                    size: 14
-                                    color: Theme.onPrimary
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-
-                                StyledText {
-                                    text: I18n.tr("Add Bar")
-                                    font.pixelSize: Theme.fontSizeSmall
-                                    font.weight: Font.Medium
-                                    color: Theme.onPrimary
-                                    anchors.verticalCenter: parent.verticalCenter
-                                }
-                            }
-
-                            MouseArea {
-                                id: addBarArea
-                                anchors.fill: parent
-                                hoverEnabled: true
-                                cursorShape: Qt.PointingHandCursor
                             onClicked: dankBarTab.createNewBar()
                         }
-
-                            Behavior on color {
-                                ColorAnimation {
-                                    duration: Theme.shortDuration
-                                    easing.type: Theme.standardEasing
-                                }
-                            }
-                        }
                     }
 
                     StyledText {
@@ -3284,7 +3264,6 @@ Item {
                     }
                 }
 
-                // Center/Middle Section
                 StyledRect {
                     width: parent.width
                     height: centerSection.implicitHeight + Theme.spacingL * 2
@@ -3343,7 +3322,6 @@ Item {
                     }
                 }
 
-                // Right/Bottom Section
                 StyledRect {
                     width: parent.width
                     height: rightSection.implicitHeight + Theme.spacingL * 2

quickshell/Modules/Settings/PersonalizationTab.qml

@@ -1,10 +1,7 @@
-import QtCore
 import QtQuick
-import QtQuick.Controls
 import QtQuick.Effects
 import Quickshell
 import qs.Common
-import qs.Modals
 import qs.Modals.FileBrowser
 import qs.Services
 import qs.Widgets
@@ -1542,7 +1539,7 @@ Item {
 
                         anchors.verticalCenter: parent.verticalCenter
                         checked: SessionData.isLightMode
-                        onToggleCompleted: checked => {
+                        onToggled: checked => {
                             Theme.screenTransition();
                             Theme.setLightMode(checked);
                         }

quickshell/Modules/Settings/PluginBrowser.qml

@@ -2,11 +2,10 @@ import QtQuick
 import QtQuick.Controls
 import Quickshell
 import qs.Common
-import qs.Modals.Common
 import qs.Services
 import qs.Widgets
 
-DankModal {
+FloatingWindow {
     id: root
 
     property var allPlugins: []
@@ -17,12 +16,6 @@ DankModal {
     property bool isLoading: false
     property var parentModal: null
 
-    modalWidth: 600
-    modalHeight: 650
-    allowStacking: true
-    backgroundOpacity: 0
-    closeOnEscapeKey: false
-
     function updateFilteredPlugins() {
         var filtered = [];
         var query = searchQuery ? searchQuery.toLowerCase() : "";
@@ -31,22 +24,21 @@ DankModal {
             var plugin = allPlugins[i];
             var isFirstParty = plugin.firstParty || false;
 
-            if (!SessionData.showThirdPartyPlugins && !isFirstParty) {
+            if (!SessionData.showThirdPartyPlugins && !isFirstParty)
+                continue;
+
+            if (query.length === 0) {
+                filtered.push(plugin);
                 continue;
             }
 
-            if (query.length > 0) {
             var name = plugin.name ? plugin.name.toLowerCase() : "";
             var description = plugin.description ? plugin.description.toLowerCase() : "";
             var author = plugin.author ? plugin.author.toLowerCase() : "";
 
-                if (name.indexOf(query) !== -1 || description.indexOf(query) !== -1 || author.indexOf(query) !== -1) {
+            if (name.indexOf(query) !== -1 || description.indexOf(query) !== -1 || author.indexOf(query) !== -1)
                 filtered.push(plugin);
         }
-            } else {
-                filtered.push(plugin);
-            }
-        }
 
         filteredPlugins = filtered;
         selectedIndex = -1;
@@ -65,74 +57,65 @@ DankModal {
             return;
         keyboardNavigationActive = true;
         selectedIndex = Math.max(selectedIndex - 1, -1);
-        if (selectedIndex === -1) {
+        if (selectedIndex === -1)
             keyboardNavigationActive = false;
     }
-    }
 
     function installPlugin(pluginName) {
         ToastService.showInfo("Installing plugin: " + pluginName);
         DMSService.install(pluginName, response => {
             if (response.error) {
                 ToastService.showError("Install failed: " + response.error);
-            } else {
+                return;
+            }
             ToastService.showInfo("Plugin installed: " + pluginName);
             PluginService.scanPlugins();
             refreshPlugins();
-            }
         });
     }
 
     function refreshPlugins() {
         isLoading = true;
         DMSService.listPlugins();
-        if (DMSService.apiVersion >= 8) {
+        if (DMSService.apiVersion >= 8)
             DMSService.listInstalled();
     }
-    }
 
     function show() {
-        if (parentModal) {
+        if (parentModal)
             parentModal.shouldHaveFocus = false;
-        }
+        visible = true;
-        open();
         Qt.callLater(() => {
-            if (contentLoader.item && contentLoader.item.searchField) {
+            browserSearchField.forceActiveFocus();
-                contentLoader.item.searchField.forceActiveFocus();
-            }
         });
     }
 
     function hide() {
-        close();
+        visible = false;
-        if (parentModal) {
+        if (!parentModal)
-            parentModal.shouldHaveFocus = Qt.binding(() => {
+            return;
-                return parentModal.shouldBeVisible;
+        parentModal.shouldHaveFocus = Qt.binding(() => parentModal.shouldBeVisible);
-            });
         Qt.callLater(() => {
-                if (parentModal.modalFocusScope) {
+            if (parentModal.modalFocusScope)
                 parentModal.modalFocusScope.forceActiveFocus();
-                }
         });
     }
-    }
 
-    onOpened: {
+    objectName: "pluginBrowser"
+    title: I18n.tr("Browse Plugins")
+    implicitWidth: 600
+    implicitHeight: 650
+    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+    visible: false
+
+    onVisibleChanged: {
+        if (visible) {
             refreshPlugins();
-    }
-
-    Connections {
-        target: contentLoader
-        function onLoaded() {
             Qt.callLater(() => {
-                if (contentLoader.item && contentLoader.item.searchField) {
+                browserSearchField.forceActiveFocus();
-                    contentLoader.item.searchField.forceActiveFocus();
-                }
             });
+            return;
         }
-    }
-
-    onDialogClosed: () => {
         allPlugins = [];
         searchQuery = "";
         filteredPlugins = [];
@@ -141,32 +124,26 @@ DankModal {
         isLoading = false;
     }
 
-    onBackgroundClicked: () => {
-        hide();
-    }
-
-    content: Component {
     FocusScope {
         id: browserKeyHandler
-            property alias searchField: browserSearchField
 
         anchors.fill: parent
         focus: true
 
-            Component.onCompleted: {
-                browserSearchField.forceActiveFocus();
-            }
-
         Keys.onPressed: event => {
-                if (event.key === Qt.Key_Escape) {
+            switch (event.key) {
-                    root.close();
+            case Qt.Key_Escape:
+                root.hide();
                 event.accepted = true;
-                } else if (event.key === Qt.Key_Down) {
+                return;
+            case Qt.Key_Down:
                 root.selectNext();
                 event.accepted = true;
-                } else if (event.key === Qt.Key_Up) {
+                return;
+            case Qt.Key_Up:
                 root.selectPrevious();
                 event.accepted = true;
+                return;
             }
         }
 
@@ -216,9 +193,9 @@ DankModal {
                             if (SessionData.showThirdPartyPlugins) {
                                 SessionData.setShowThirdPartyPlugins(false);
                                 root.updateFilteredPlugins();
-                                } else {
+                                return;
-                                    thirdPartyConfirmModal.open();
                             }
+                            thirdPartyConfirmModal.visible = true;
                         }
                     }
 
@@ -236,7 +213,7 @@ DankModal {
                         iconName: "close"
                         iconSize: Theme.iconSize - 2
                         iconColor: Theme.outline
-                            onClicked: root.close()
+                        onClicked: root.hide()
                     }
                 }
             }
@@ -495,13 +472,12 @@ DankModal {
                                         cursorShape: isInstalled ? Qt.ArrowCursor : Qt.PointingHandCursor
                                         enabled: !isInstalled
                                         onClicked: {
-                                                if (!isInstalled) {
+                                            if (!isInstalled)
                                                 root.installPlugin(modelData.name);
                                         }
                                     }
                                 }
                             }
-                                }
 
                             StyledText {
                                 text: modelData.description || ""
@@ -552,25 +528,24 @@ DankModal {
             }
         }
     }
-    }
 
-    DankModal {
+    FloatingWindow {
         id: thirdPartyConfirmModal
 
-        modalWidth: 500
+        objectName: "thirdPartyConfirm"
-        modalHeight: 300
+        title: I18n.tr("Third-Party Plugin Warning")
-        allowStacking: true
+        implicitWidth: 500
-        backgroundOpacity: 0.4
+        implicitHeight: 350
-        closeOnEscapeKey: true
+        color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+        visible: false
 
-        content: Component {
         FocusScope {
             anchors.fill: parent
             focus: true
 
             Keys.onPressed: event => {
                 if (event.key === Qt.Key_Escape) {
-                        thirdPartyConfirmModal.close();
+                    thirdPartyConfirmModal.visible = false;
                     event.accepted = true;
                 }
             }
@@ -598,6 +573,20 @@ DankModal {
                         color: Theme.surfaceText
                         anchors.verticalCenter: parent.verticalCenter
                     }
+
+                    Item {
+                        width: parent.width - parent.spacing * 2 - Theme.iconSize - parent.children[1].implicitWidth - closeConfirmBtn.width
+                        height: 1
+                    }
+
+                    DankActionButton {
+                        id: closeConfirmBtn
+                        iconName: "close"
+                        iconSize: Theme.iconSize - 2
+                        iconColor: Theme.outline
+                        anchors.verticalCenter: parent.verticalCenter
+                        onClicked: thirdPartyConfirmModal.visible = false
+                    }
                 }
 
                 StyledText {
@@ -643,7 +632,7 @@ DankModal {
                     DankButton {
                         text: I18n.tr("Cancel")
                         iconName: "close"
-                            onClicked: thirdPartyConfirmModal.close()
+                        onClicked: thirdPartyConfirmModal.visible = false
                     }
 
                     DankButton {
@@ -652,8 +641,7 @@ DankModal {
                         onClicked: {
                             SessionData.setShowThirdPartyPlugins(true);
                             root.updateFilteredPlugins();
-                                thirdPartyConfirmModal.close();
+                            thirdPartyConfirmModal.visible = false;
-                            }
                         }
                     }
                 }

quickshell/Modules/Settings/PluginsTab.qml

@@ -124,7 +124,7 @@ FocusScope {
                             iconName: "store"
                             enabled: DMSService.dmsAvailable
                             onClicked: {
-                                pluginBrowserModal.show();
+                                pluginBrowser.show();
                             }
                         }
 
@@ -286,9 +286,9 @@ FocusScope {
     Connections {
         target: DMSService
         function onPluginsListReceived(plugins) {
-            pluginBrowserModal.isLoading = false;
+            pluginBrowser.isLoading = false;
-            pluginBrowserModal.allPlugins = plugins;
+            pluginBrowser.allPlugins = plugins;
-            pluginBrowserModal.updateFilteredPlugins();
+            pluginBrowser.updateFilteredPlugins();
         }
         function onInstalledPluginsReceived(plugins) {
             var pluginMap = {};
@@ -314,13 +314,12 @@ FocusScope {
     }
 
     Component.onCompleted: {
-        pluginBrowserModal.parentModal = pluginsTab.parentModal;
+        pluginBrowser.parentModal = pluginsTab.parentModal;
-        if (DMSService.dmsAvailable && DMSService.apiVersion >= 8) {
+        if (DMSService.dmsAvailable && DMSService.apiVersion >= 8)
             DMSService.listInstalled();
     }
-    }
 
     PluginBrowser {
-        id: pluginBrowserModal
+        id: pluginBrowser
     }
 }

quickshell/Modules/Settings/WidgetSelectionPopup.qml

@@ -1,9 +1,9 @@
 import QtQuick
+import Quickshell
 import qs.Common
-import qs.Modals.Common
 import qs.Widgets
 
-DankModal {
+FloatingWindow {
     id: root
 
     property var allWidgets: []
@@ -12,7 +12,6 @@ DankModal {
     property var filteredWidgets: []
     property int selectedIndex: -1
     property bool keyboardNavigationActive: false
-    property Component widgetSelectionContent
     property var parentModal: null
 
     signal widgetSelected(string widgetId, string targetSection)
@@ -32,10 +31,9 @@ DankModal {
             var description = widget.description ? widget.description.toLowerCase() : "";
             var id = widget.id ? widget.id.toLowerCase() : "";
 
-            if (text.indexOf(query) !== -1 || description.indexOf(query) !== -1 || id.indexOf(query) !== -1) {
+            if (text.indexOf(query) !== -1 || description.indexOf(query) !== -1 || id.indexOf(query) !== -1)
                 filtered.push(widget);
         }
-        }
 
         filteredWidgets = filtered;
         selectedIndex = -1;
@@ -58,136 +56,134 @@ DankModal {
             return;
         keyboardNavigationActive = true;
         selectedIndex = Math.max(selectedIndex - 1, -1);
-        if (selectedIndex === -1) {
+        if (selectedIndex === -1)
             keyboardNavigationActive = false;
     }
-    }
 
     function selectWidget() {
-        if (selectedIndex >= 0 && selectedIndex < filteredWidgets.length) {
+        if (selectedIndex < 0 || selectedIndex >= filteredWidgets.length)
+            return;
         var widget = filteredWidgets[selectedIndex];
         root.widgetSelected(widget.id, root.targetSection);
-            root.close();
+        root.hide();
-        }
     }
 
     function show() {
-        if (parentModal) {
+        if (parentModal)
             parentModal.shouldHaveFocus = false;
-        }
+        visible = true;
-        open();
         Qt.callLater(() => {
-            if (contentLoader.item && contentLoader.item.searchField) {
+            searchField.forceActiveFocus();
-                contentLoader.item.searchField.forceActiveFocus();
-            }
         });
     }
 
     function hide() {
-        close();
+        visible = false;
-        if (parentModal) {
+        if (!parentModal)
-            parentModal.shouldHaveFocus = Qt.binding(() => {
+            return;
-                return parentModal.shouldBeVisible;
+        parentModal.shouldHaveFocus = Qt.binding(() => parentModal.shouldBeVisible);
-            });
         Qt.callLater(() => {
-                if (parentModal && parentModal.modalFocusScope) {
+            if (parentModal && parentModal.modalFocusScope)
                 parentModal.modalFocusScope.forceActiveFocus();
-                }
         });
     }
-    }
 
-    modalWidth: 500
+    objectName: "widgetSelectionPopup"
-    modalHeight: 550
+    title: I18n.tr("Add Widget")
-    allowStacking: true
+    implicitWidth: 500
-    backgroundOpacity: 0
+    implicitHeight: 550
-    closeOnEscapeKey: false
+    color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
-    onDialogClosed: () => {
+    visible: false
+
+    onVisibleChanged: {
+        if (visible) {
+            Qt.callLater(() => {
+                searchField.forceActiveFocus();
+            });
+            return;
+        }
         allWidgets = [];
         targetSection = "";
         searchQuery = "";
         filteredWidgets = [];
         selectedIndex = -1;
         keyboardNavigationActive = false;
-        if (parentModal) {
+        if (!parentModal)
-            parentModal.shouldHaveFocus = Qt.binding(() => {
+            return;
-                return parentModal.shouldBeVisible;
+        parentModal.shouldHaveFocus = Qt.binding(() => parentModal.shouldBeVisible);
-            });
         Qt.callLater(() => {
-                if (parentModal && parentModal.modalFocusScope) {
+            if (parentModal && parentModal.modalFocusScope)
                 parentModal.modalFocusScope.forceActiveFocus();
-                }
         });
     }
-    }
-    onBackgroundClicked: () => {
-        return hide();
-    }
-    content: widgetSelectionContent
 
-    widgetSelectionContent: Component {
     FocusScope {
         id: widgetKeyHandler
-            property alias searchField: searchField
 
         anchors.fill: parent
         focus: true
 
         Keys.onPressed: event => {
-                if (event.key === Qt.Key_Escape) {
+            switch (event.key) {
-                    root.close();
+            case Qt.Key_Escape:
+                root.hide();
                 event.accepted = true;
-                } else if (event.key === Qt.Key_Down) {
+                return;
+            case Qt.Key_Down:
                 root.selectNext();
                 event.accepted = true;
-                } else if (event.key === Qt.Key_Up) {
+                return;
+            case Qt.Key_Up:
                 root.selectPrevious();
                 event.accepted = true;
-                } else if (event.key === Qt.Key_N && event.modifiers & Qt.ControlModifier) {
+                return;
-                    root.selectNext();
+            case Qt.Key_Return:
-                    event.accepted = true;
+            case Qt.Key_Enter:
-                } else if (event.key === Qt.Key_P && event.modifiers & Qt.ControlModifier) {
-                    root.selectPrevious();
-                    event.accepted = true;
-                } else if (event.key === Qt.Key_J && event.modifiers & Qt.ControlModifier) {
-                    root.selectNext();
-                    event.accepted = true;
-                } else if (event.key === Qt.Key_K && event.modifiers & Qt.ControlModifier) {
-                    root.selectPrevious();
-                    event.accepted = true;
-                } else if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
                 if (root.keyboardNavigationActive) {
                     root.selectWidget();
                 } else if (root.filteredWidgets.length > 0) {
                     var firstWidget = root.filteredWidgets[0];
                     root.widgetSelected(firstWidget.id, root.targetSection);
-                        root.close();
+                    root.hide();
                 }
                 event.accepted = true;
+                return;
+            }
+            if (event.modifiers & Qt.ControlModifier) {
+                switch (event.key) {
+                case Qt.Key_N:
+                case Qt.Key_J:
+                    root.selectNext();
+                    event.accepted = true;
+                    return;
+                case Qt.Key_P:
+                case Qt.Key_K:
+                    root.selectPrevious();
+                    event.accepted = true;
+                    return;
                 }
             }
-
-            DankActionButton {
-                iconName: "close"
-                iconSize: Theme.iconSize - 2
-                iconColor: Theme.outline
-                anchors.top: parent.top
-                anchors.topMargin: Theme.spacingM
-                anchors.right: parent.right
-                anchors.rightMargin: Theme.spacingM
-                onClicked: root.close()
         }
 
         Column {
-                id: contentColumn
-
-                spacing: Theme.spacingM
             anchors.fill: parent
-                anchors.margins: Theme.spacingL
+            spacing: 0
-                anchors.topMargin: Theme.spacingL + 30 // Space for close button
+
+            Item {
+                id: titleBar
+                width: parent.width
+                height: 48
+
+                Rectangle {
+                    anchors.fill: parent
+                    color: Theme.surfaceContainer
+                    opacity: 0.5
+                }
 
                 Row {
-                    width: parent.width
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingL
+                    anchors.verticalCenter: parent.verticalCenter
                     spacing: Theme.spacingM
 
                     DankIcon {
@@ -198,16 +194,38 @@ DankModal {
                     }
 
                     StyledText {
-                        text: I18n.tr("Add Widget to ") + root.targetSection + " Section"
+                        text: I18n.tr("Add Widget to %1 Section").arg(root.targetSection)
-                        font.pixelSize: Theme.fontSizeLarge
+                        font.pixelSize: Theme.fontSizeXLarge
-                        font.weight: Font.Medium
                         color: Theme.surfaceText
+                        font.weight: Font.Medium
                         anchors.verticalCenter: parent.verticalCenter
                     }
                 }
 
+                DankActionButton {
+                    circular: false
+                    iconName: "close"
+                    iconSize: Theme.iconSize - 4
+                    iconColor: Theme.surfaceText
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    onClicked: root.hide()
+                }
+            }
+
+            Item {
+                width: parent.width
+                height: parent.height - titleBar.height
+
+                Column {
+                    id: contentColumn
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
                     StyledText {
-                    text: I18n.tr("Select a widget to add to the ") + root.targetSection.toLowerCase() + " section of the top bar. You can add multiple instances of the same widget if needed."
+                        text: I18n.tr("Select a widget to add. You can add multiple instances of the same widget if needed.")
                         font.pixelSize: Theme.fontSizeSmall
                         color: Theme.outline
                         width: parent.width
@@ -229,7 +247,7 @@ DankModal {
                         showClearButton: true
                         textColor: Theme.surfaceText
                         font.pixelSize: Theme.fontSizeMedium
-                    placeholderText: ""
+                        placeholderText: I18n.tr("Search widgets...")
                         text: root.searchQuery
                         focus: true
                         ignoreLeftRightKeys: true
@@ -240,11 +258,12 @@ DankModal {
                         }
                         Keys.onPressed: event => {
                             if (event.key === Qt.Key_Escape) {
-                            root.close();
+                                root.hide();
                                 event.accepted = true;
-                        } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
+                                return;
-                            event.accepted = false;
                             }
+                            if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0))
+                                event.accepted = false;
                         }
                     }
 
@@ -318,7 +337,7 @@ DankModal {
                                 cursorShape: Qt.PointingHandCursor
                                 onClicked: {
                                     root.widgetSelected(modelData.id, root.targetSection);
-                                root.close();
+                                    root.hide();
                                 }
                             }
 
@@ -334,3 +353,4 @@ DankModal {
             }
         }
     }
+}

quickshell/Modules/Settings/WidgetTweaksTab.qml

@@ -682,7 +682,7 @@ Item {
 
                         anchors.verticalCenter: parent.verticalCenter
                         checked: SettingsData.osdAlwaysShowValue
-                        onToggleCompleted: checked => {
+                        onToggled: checked => {
                             SettingsData.set("osdAlwaysShowValue", checked);
                         }
                     }