fix(settings): show what frame mode controls (#3654)

* fix(settings): show what frame mode controls With frame mode on, many settings did nothing or were hidden while still applying, and nothing said so. The frame takes its color and opacity from the first non-island bar, but that bar's Surface card is hidden while the frame styles it, so neither had a visible control. Add Background and Override/Opacity rows to the Appearance Frame card, bound to the same frame bar the renderer reads. Settings the frame provides in connected mode get a "Managed by Frame in Connected Mode" note (Interface style border, corner style, background blur and dock opacity, shadow targets, launcher border); settings with no effect get "Disabled by Frame Mode" (maximize detection, bar shadow, the bar's overlay layer in separate mode). Bar size, the bar's overlay layer in connected mode, dock Over fullscreen and the controls of overlay-layer docks and launchers are shown again, since they still apply. Notification Over fullscreen shows as forced on when the frame covers every display, and launcher rows the Spotlight style ignores are disabled. Also relabel the frame Width row as Thickness, raise the inset padding maximum to its automatic range, and drop a FrameWindow handler for the removed frameOpacity signal. No new strings. * settings: show what frame mode controls, fix review findings --------- Co-authored-by: purian23 <[email protected]>
2026-10-14 15:24:00 -04:00 · 2026-10-10 00:37:54 -04:00
parent 0444835016
commit 6d331b8fde
12 changed files with 241 additions and 85 deletions
@@ -423,19 +423,9 @@ Singleton {
        _reconcileConnectedFrameBarStyles();
    }

-    function _frameBarConfig() {
-        return barConfigs.find(bc => bc.enabled !== false && !isIslandBarConfig(bc));
-    }
-
-    readonly property real frameSurfaceOpacity: {
-        barConfigs;
-        return barTransparency(_frameBarConfig());
-    }
-
-    readonly property color frameSurfaceBase: {
-        barConfigs;
-        return barSurfaceColor(_frameBarConfig());
-    }
+    readonly property var frameBarConfig: barConfigs.find(bc => bc.enabled !== false && !isIslandBarConfig(bc)) ?? null
+    readonly property real frameSurfaceOpacity: barTransparency(frameBarConfig)
+    readonly property color frameSurfaceBase: barSurfaceColor(frameBarConfig)

    property string systemTrayIconTintMode: Spec.SPEC.systemTrayIconTintMode.def
    property int systemTrayIconTintSaturation: Spec.SPEC.systemTrayIconTintSaturation.def
@@ -1036,9 +1036,6 @@ PanelWindow {
        function onFrameBarSizeChanged() {
            win._scheduleBlurRebuild();
        }
-        function onFrameOpacityChanged() {
-            win._scheduleBlurRebuild();
-        }
        function onFrameRoundingChanged() {
            win._scheduleBlurRebuild();
        }
@@ -48,7 +48,10 @@ Column {

    property alias resetStore: modeRow.resetStore
    property alias resetKeys: modeRow.resetKeys
+    property alias modified: modeRow.modified
+    property alias resetByKeys: modeRow.resetByKeys

+    signal resetRequested
    signal modeSelected(string mode)
    signal customColorSelected(color selectedColor)

@@ -88,6 +91,7 @@ Column {
    SettingsDropdownRow {
        id: modeRow
        groupItem: root
+        onResetRequested: root.resetRequested()
        text: root.text
        description: root.description
        tab: root.tab
@@ -22,6 +22,14 @@ Item {
    readonly property bool selectedIslandFree: bar.selectedBarIsIsland && SettingsData.islandFreePlacement(bar.selectedBarConfig)
    readonly property bool selectedIslandNotch: bar.selectedBarIsIsland && !root.selectedIslandFree && bar.islandSetting("islandNotch")
    readonly property int frameInsetPaddingDisplay: Math.round(SettingsData.frameBarContentGap)
+    readonly property var frameBar: SettingsData.frameBarConfig
+    readonly property bool frameBarOverridden: frameBar?.followInterfaceStyle === false
+
+    function updateFrameBar(updates) {
+        if (!frameBar)
+            return;
+        SettingsData.updateBarConfig(frameBar.id, updates);
+    }

    BarSelectionState {
        id: bar
@@ -52,7 +60,7 @@ Item {
            SettingsSliderRow {
                settingKey: "frameThickness"
                tags: ["frame", "border", "thickness", "size", "width"]
-                text: I18n.tr("Width")
+                text: I18n.tr("Thickness")
                unit: "px"
                minimum: 2
                maximum: 100
@@ -77,10 +85,11 @@ Item {
                settingKey: "frameBarInsetPadding"
                tags: ["frame", "bar", "edge", "inset", "padding", "corner", "end"]
                text: I18n.tr("Bar inset padding")
+                description: I18n.tr("Gap between the bar ends and the outermost widgets", "bar inset padding slider description")
                minimumLabel: I18n.tr("Edge to edge", "slider minimum label, bar touches the screen edges")
                unit: "px"
                minimum: 0
-                maximum: 48
+                maximum: 100
                step: 1
                value: root.frameInsetPaddingDisplay
                onSliderDragFinished: v => SettingsData.set("frameBarInsetPadding", v)
@@ -97,35 +106,62 @@ Item {
                visible: BlurService.available
            }

-            SettingsRow {
+            SettingsControlledBy {
                visible: BlurService.available && !SettingsData.blurEnabled
-                body: Item {
-                    width: parent.width
-                    height: blurToggleNote.height + Theme.spacingM * 2
+                target: "surfaces"
+                parentModal: root.parentModal
+                section: "blurEnabled"
+                settingLabel: I18n.tr("Background blur")
+            }

-                    Row {
-                        id: blurToggleNote
-                        x: Theme.spacingM
-                        width: parent.width - Theme.spacingM * 2
-                        anchors.verticalCenter: parent.verticalCenter
-                        spacing: Theme.spacingS
+            SurfaceColorRow {
+                settingKey: "frameSurfaceColor"
+                tags: ["frame", "background", "color", "surface"]
+                visible: !!root.frameBar
+                text: I18n.tr("Background")
+                defaultColor: Theme.hostSurface
+                currentMode: root.frameBar?.surfaceColor ?? "default"
+                customColor: root.frameBar?.surfaceCustomColor ?? SettingsData.barConfigDefault("surfaceCustomColor")
+                pickerTitle: I18n.tr("Background")
+                modified: (root.frameBar?.surfaceColor ?? "default") !== "default"
+                resetByKeys: false
+                onResetRequested: root.updateFrameBar({
+                    surfaceColor: "default",
+                    surfaceCustomColor: SettingsData.barConfigDefault("surfaceCustomColor")
+                })
+                onModeSelected: mode => root.updateFrameBar({
+                        surfaceColor: mode
+                    })
+                onCustomColorSelected: selectedColor => root.updateFrameBar({
+                        surfaceCustomColor: selectedColor.toString()
+                    })
+            }

-                        DIcon {
-                            name: "blur_on"
-                            size: Theme.fontSizeMedium
-                            color: Theme.primary
-                            anchors.verticalCenter: parent.verticalCenter
-                        }
-
-                        StyledText {
-                            text: I18n.tr("Frame Blur follows Background Blur in Theme & Colors")
-                            font.pixelSize: Theme.fontSizeSmall
-                            color: Theme.surfaceVariantText
-                            wrapMode: Text.WordWrap
-                            width: parent.width - Theme.fontSizeMedium - Theme.spacingS
-                        }
-                    }
-                }
+            SettingsToggleSliderRow {
+                settingKey: "frameSurfaceOpacity"
+                tags: ["frame", "opacity", "transparency", "override", "interface", "style"]
+                visible: !!root.frameBar
+                text: I18n.tr("Opacity")
+                description: I18n.tr("Override")
+                checked: root.frameBarOverridden
+                value: Math.round((root.frameBar?.transparency ?? 1) * 100)
+                minimum: 0
+                maximum: 100
+                modified: root.frameBarOverridden
+                valueModified: (root.frameBar?.transparency ?? 1) !== 1
+                onResetRequested: root.updateFrameBar({
+                    followInterfaceStyle: true,
+                    transparency: 1
+                })
+                onValueResetRequested: root.updateFrameBar({
+                    transparency: 1
+                })
+                onToggled: checked => root.updateFrameBar({
+                        followInterfaceStyle: !checked
+                    })
+                onSliderDragFinished: finalValue => root.updateFrameBar({
+                        transparency: finalValue / 100
+                    })
            }
        }

@@ -244,6 +280,14 @@ Item {
                section: "barShadow"
                settingLabel: I18n.tr("Shadow", "bar shadow settings card")
            }
+
+            SettingsControlledBy {
+                visible: bar.selectedBarFrameSanitized && !bar.selectedBarFrameStyled && !bar.islandOwnsSelectedBarTop
+                parentModal: root.parentModal
+                section: "frameBorder"
+                settingLabel: [I18n.tr("Corner style"), I18n.tr("Border", "noun, settings toggle card title for an outline around a surface"), I18n.tr("Shadow", "bar shadow settings card")].join(" · ")
+                reason: I18n.tr("Disabled by Frame Mode")
+            }
        }

        SettingsToggleCard {
@@ -322,7 +366,6 @@ Item {
            SettingsSliderRow {
                settingKey: "barSize"
                tags: ["size", "thickness", "height", "inner"]
-                visible: !bar.selectedBarFrameStyled
                text: I18n.tr("Size")
                resetStore: bar
                resetKeys: ["innerPadding"]
@@ -604,7 +604,7 @@ Item {
            SettingsToggleRow {
                settingKey: "barUseOverlayLayer"
                tags: ["bar", "fullscreen", "overlay", "layer"]
-                visible: !bar.islandOwnsSelectedBarTop
+                visible: !bar.islandOwnsSelectedBarTop && !(bar.selectedBarFrameStyled && !SettingsData.connectedFrameModeActive)
                text: I18n.tr("Use overlay layer")
                checked: bar.selectedBarConfig?.useOverlayLayer ?? false
                onToggled: toggled => {
@@ -618,16 +618,24 @@ Item {
            SettingsToggleRow {
                settingKey: "islandUseOverlayLayer"
                tags: ["island", "fullscreen", "overlay", "layer"]
-                visible: bar.selectedBarIsIsland
+                visible: bar.selectedBarIsIsland && !bar.selectedBarFrameStyled
                text: I18n.tr("Use overlay layer")
                checked: bar.islandSetting("islandUseOverlayLayer")
                onToggled: checked => bar.apply("islandUseOverlayLayer", checked)
            }

+            SettingsControlledBy {
+                visible: bar.selectedBarFrameStyled && (bar.selectedBarIsIsland || (!bar.islandOwnsSelectedBarTop && !SettingsData.connectedFrameModeActive))
+                parentModal: dankBarTab.parentModal
+                section: "frameBorder"
+                settingLabel: I18n.tr("Use overlay layer")
+                reason: I18n.tr("Disabled by Frame Mode")
+            }
+
            SettingsToggleRow {
                settingKey: "barMaximizeDetection"
                tags: ["maximize", "gaps", "border", "fullscreen"]
-                visible: CompositorService.supportsBarAutoHideReveal
+                visible: CompositorService.supportsBarAutoHideReveal && !bar.selectedBarFrameStyled
                text: I18n.tr("Maximize detection")
                description: I18n.tr("Drops bar gaps and rounding while a window is maximized", "bar maximize detection toggle description")
                checked: bar.selectedBarConfig?.maximizeDetection ?? true
@@ -636,6 +644,14 @@ Item {
                    })
            }

+            SettingsControlledBy {
+                visible: CompositorService.supportsBarAutoHideReveal && bar.selectedBarFrameStyled
+                parentModal: dankBarTab.parentModal
+                section: "frameBorder"
+                settingLabel: I18n.tr("Maximize detection")
+                reason: I18n.tr("Disabled by Frame Mode")
+            }
+
            SettingsSliderRow {
                settingKey: "barExclusiveZone"
                tags: ["exclusive", "zone", "reserved", "offset"]
@@ -657,7 +673,7 @@ Item {
                text: I18n.tr("Auto popup gaps")
                description: I18n.tr("Gap between the bar and its popouts follows edge spacing", "bar auto popup gaps toggle description")
                tags: ["popup", "gaps", "auto"]
-                visible: !bar.popupGapsZeroed
+                visible: !dankBarTab.popupGapsZeroed
                checked: bar.selectedBarConfig?.popupGapsAuto ?? true
                onToggled: checked => SettingsData.updateBarConfig(bar.selectedBarId, {
                        popupGapsAuto: checked
@@ -665,7 +681,7 @@ Item {
            }

            SettingsSliderRow {
-                visible: !bar.popupGapsZeroed && !(bar.selectedBarConfig?.popupGapsAuto ?? true)
+                visible: !dankBarTab.popupGapsZeroed && !(bar.selectedBarConfig?.popupGapsAuto ?? true)
                text: I18n.tr("Gap size")
                tags: ["popup", "gaps", "size"]
                resetStore: bar
@@ -1,4 +1,5 @@
 import QtQuick
+import Quickshell
 import qs.Common
 import qs.Services
 import qs.Modules.Settings.Widgets
@@ -34,7 +35,7 @@ Item {
                tags: ["dock", "fullscreen", "overlay", "show", "visibility"]
                text: I18n.tr("Over fullscreen")
                description: I18n.tr("Keeps the dock showing over fullscreen windows", "dock over fullscreen toggle description")
-                enabled: dock.config?.useOverlayLayer ?? false
+                enabled: (dock.config?.useOverlayLayer ?? false) || Quickshell.screens.some(screen => CompositorService.framePeerSurfacesUseOverlayForScreen(screen) && SettingsData.dockConfigsForScreen(screen).some(config => config.id === dock.config?.id))
                checked: dock.config?.showOnFullscreen ?? false
                onToggled: checked => dock.setOption("showOnFullscreen", checked)
            }
@@ -14,6 +14,9 @@ Item {
    readonly property bool keybindsAvailable: KeybindsService.available
    readonly property string defaultLauncherKeybindSearch: "spotlight toggle"
    readonly property string spotlightBarKeybindSearch: "spotlight-bar"
+    readonly property bool spotlightIgnoresRows: SettingsData.launcherStyle === "spotlight" && !SettingsData.connectedFrameModeActive
+    // The niri overview launcher still uses size and footer when it is set to the full style.
+    readonly property bool spotlightIgnoresSize: spotlightIgnoresRows && !(CompositorService.isNiri && SettingsData.niriOverviewOverlayEnabled && SettingsData.niriOverviewLauncherStyle !== "spotlight")
    readonly property var builtInPluginIds: ["dms_settings", "dms_notepad", "dms_sysmon", "dms_colorpicker", "dms_settings_search", "dms_clipboard_search", "dms_power", "dms_vpn", "dms_qr_generator"]

    function openKeybindsSearch(query) {
@@ -141,6 +144,7 @@ Item {
            SettingsButtonGroupRow {
                readonly property var sizes: ["micro", "compact", "medium", "large"]

+                enabled: !root.spotlightIgnoresSize
                settingKey: "dankLauncherV2Size"
                tags: ["launcher", "size", "micro", "compact", "medium", "large"]
                text: I18n.tr("Size")
@@ -172,7 +176,7 @@ Item {
                tags: ["launcher", "footer", "hints", "shortcuts", "modes", "filters"]
                text: I18n.tr("Show footer")
                checked: SettingsData.dankLauncherV2ShowFooter
-                enabled: SettingsData.dankLauncherV2Size !== "micro"
+                enabled: SettingsData.dankLauncherV2Size !== "micro" && !root.spotlightIgnoresSize
                onToggled: checked => SettingsData.set("dankLauncherV2ShowFooter", checked)
            }

@@ -202,8 +206,18 @@ Item {
            }
        }

+        SettingsControlledBy {
+            visible: SettingsData.connectedFrameModeActive && !SettingsData.launcherUseOverlayLayer
+            parentModal: root.parentModal
+            section: "frameBorder"
+            settingLabel: I18n.tr("Border")
+            reason: I18n.tr("Managed by Frame in Connected Mode")
+        }
+
        SettingsToggleCard {
            width: parent.width
+            visible: !SettingsData.connectedFrameModeActive || SettingsData.launcherUseOverlayLayer
+            enabled: !root.spotlightIgnoresRows
            iconName: "border_style"
            title: I18n.tr("Border")
            settingKey: "dankLauncherV2BorderEnabled"
@@ -841,6 +855,7 @@ Item {
            }

            SettingsToggleRow {
+                enabled: !root.spotlightIgnoresRows
                settingKey: "dankLauncherV2UnloadOnClose"
                tags: ["launcher", "unload", "close", "memory", "vram"]
                text: I18n.tr("Unload on close")
@@ -1,4 +1,5 @@
 import QtQuick
+import Quickshell
 import qs.Common
 import qs.Services
 import qs.DCommon.Widgets
@@ -9,6 +10,8 @@ Column {

    property var parentModal: null

+    readonly property bool frameForcesOverlay: Quickshell.screens.length > 0 && Quickshell.screens.every(screen => CompositorService.frameWindowVisibleForScreen(screen))
+
    width: parent?.width ?? 0
    spacing: Theme.spacingL

@@ -161,7 +164,8 @@ Column {
            settingKey: "notificationOverlayEnabled"
            tags: ["notification", "overlay", "fullscreen", "priority"]
            text: I18n.tr("Over fullscreen")
-            checked: SettingsData.notificationOverlayEnabled
+            enabled: !root.frameForcesOverlay
+            checked: root.frameForcesOverlay || SettingsData.notificationOverlayEnabled
            onToggled: checked => SettingsData.set("notificationOverlayEnabled", checked)
        }

@@ -225,6 +225,7 @@ Item {

            readonly property var bars: SettingsData.barConfigs.filter(config => !SettingsData.isIslandBarConfig(config))
            readonly property bool shadowActive: (bar.selectedBarConfig?.shadowIntensity ?? 0) > 0
+            readonly property bool editable: shadowActive && !bar.selectedBarFrameSanitized
            readonly property bool isCustomColor: (bar.selectedBarConfig?.shadowColorMode ?? "default") === "custom"
            readonly property string directionSource: bar.selectedBarConfig?.shadowDirectionMode ?? "inherit"

@@ -236,9 +237,18 @@ Item {
                onValueChanged: value => bar.select(shadowCard.bars.find(config => (config.name || config.id) === value)?.id ?? bar.selectedBarId)
            }

+            SettingsControlledBy {
+                visible: bar.selectedBarFrameSanitized
+                parentModal: root.parentModal
+                section: "frameBorder"
+                settingLabel: I18n.tr("Bar")
+                reason: I18n.tr("Disabled by Frame Mode")
+            }
+
            SettingsToggleRow {
                tags: ["shadow", "override", "custom"]
                text: I18n.tr("Override")
+                enabled: !bar.selectedBarFrameSanitized
                checked: shadowCard.shadowActive
                onToggled: checked => {
                    if (checked) {
@@ -255,7 +265,7 @@ Item {
            }

            SettingsSliderRow {
-                enabled: shadowCard.shadowActive
+                enabled: shadowCard.editable
                tags: ["shadow", "blur", "radius"]
                text: I18n.tr("Intensity", "shadow intensity slider")
                minimum: 0
@@ -268,7 +278,7 @@ Item {
            }

            SettingsSliderRow {
-                enabled: shadowCard.shadowActive
+                enabled: shadowCard.editable
                text: I18n.tr("Opacity")
                resetStore: bar
                resetKeys: ["shadowOpacity"]
@@ -281,7 +291,7 @@ Item {
            }

            SettingsDropdownRow {
-                enabled: shadowCard.shadowActive
+                enabled: shadowCard.editable
                text: I18n.tr("Direction source", "bar shadow direction source")
                settingKey: "barShadowDirectionSource"
                resetStore: bar
@@ -314,7 +324,7 @@ Item {
            }

            SettingsDropdownRow {
-                enabled: shadowCard.shadowActive
+                enabled: shadowCard.editable
                visible: shadowCard.directionSource === "manual"
                text: I18n.tr("Direction", "bar manual shadow direction")
                settingKey: "barShadowDirectionManual"
@@ -353,7 +363,7 @@ Item {
            }

            ColorDropdownRow {
-                enabled: shadowCard.shadowActive
+                enabled: shadowCard.editable
                tags: ["shadow", "color", "custom"]
                settingKey: "barShadowColor"
                resetStore: bar
@@ -35,6 +35,7 @@ Column {
    readonly property var opacityTargets: {
        SettingsData.barConfigs;
        SettingsData.dockConfigs;
+        const frameBarId = SettingsData.frameEnabled ? SettingsData.frameBarConfig?.id : undefined;
        const bars = SettingsData.barConfigs.filter(config => !SettingsData.isDotBarConfig(config)).map(config => ({
                    key: "bar:" + config.id,
                    kind: "bar",
@@ -42,7 +43,8 @@ Column {
                    name: config.name || config.id,
                    enabled: config.enabled !== false,
                    override: config.followInterfaceStyle === false,
-                    transparency: config.transparency ?? 1
+                    transparency: config.transparency ?? 1,
+                    frame: config.id === frameBarId
                }));
        const docks = SettingsData.dockConfigs.map(config => ({
                    key: "dock:" + config.id,
@@ -51,7 +53,8 @@ Column {
                    name: config.name,
                    enabled: config.enabled !== false,
                    override: config.followInterfaceStyle === false,
-                    transparency: config.transparency ?? 1
+                    transparency: config.transparency ?? 1,
+                    overlay: config.useOverlayLayer ?? false
                }));
        return bars.concat(docks);
    }
@@ -185,6 +188,14 @@ Column {
            }
        }

+        SettingsControlledBy {
+            visible: SettingsData.connectedFrameModeActive && root.borderEnabled
+            parentModal: root.parentModal
+            section: "frameBorder"
+            settingLabel: I18n.tr("Border")
+            reason: I18n.tr("Managed by Frame in Connected Mode")
+        }
+
        SettingsToggleSliderRow {
            tab: "theme"
            tags: ["blur", "background", "transparency", "glass", "frosted", "strength", "radius", "size", "passes", "reach"]
@@ -334,6 +345,14 @@ Column {
            settingKey: modelData.settingKey
            visible: targets.length > 0

+            SettingsControlledBy {
+                visible: targetCard.modelData.kind === "dock" && SettingsData.connectedFrameModeActive && targetCard.activeTargets.some(target => !target.overlay)
+                parentModal: root.parentModal
+                section: "frameSurfaceOpacity"
+                settingLabel: I18n.tr("Opacity")
+                reason: I18n.tr("Managed by Frame in Connected Mode")
+            }
+
            Repeater {
                model: targetCard.activeKeys ? targetCard.activeKeys.split("\n") : []
                delegate: opacityTargetRow
@@ -448,7 +467,7 @@ Column {
            tags: ["surface", "opacity", "transparency", "bar", "dock", "override"]
            settingKey: "surfaceOpacity_" + modelData.replace(":", "_")
            text: target?.name ?? ""
-            description: I18n.tr("Override")
+            description: target?.frame ? I18n.tr("Frame") + " · " + I18n.tr("Override") : I18n.tr("Override")
            checked: target?.override ?? false
            value: Math.round((target?.transparency ?? 1) * 100)
            minimum: 0
@@ -90,7 +90,7 @@ Item {
        return I18n.tr("Top", "screen edge position");
    }

-    readonly property bool connectedFrameModeActive: SettingsData.connectedFrameModeActive
+    readonly property bool connectedFrameModeActive: SettingsData.connectedFrameModeActive && !(config?.useOverlayLayer ?? false)
    readonly property bool connectedPersistentDock: connectedFrameModeActive && (config?.enabled ?? false) && !(config?.autoHide ?? false) && !(config?.smartAutoHide ?? false)
    // An auto-hiding dock never reserves screen space, so its exclusive zone has nothing to offset.
    readonly property bool reservesSpace: !!config && !config.autoHide && !config.smartAutoHide && (!connectedFrameModeActive || connectedPersistentDock)
@@ -4814,6 +4814,26 @@
    ],
    "parentLabel": "Bar"
  },
+  {
+    "section": "frameSurfaceColor",
+    "label": "Background",
+    "tabIndex": 6,
+    "category": "Appearance",
+    "keywords": [
+      "appearance",
+      "background",
+      "bar",
+      "color",
+      "frame",
+      "panel",
+      "statusbar",
+      "surface",
+      "taskbar",
+      "topbar"
+    ],
+    "parentLabel": "Bar",
+    "conditionKey": "frameEnabled"
+  },
  {
    "section": "islandSatelliteBackground",
    "label": "Background",
@@ -4888,18 +4908,25 @@
    "keywords": [
      "appearance",
      "bar",
+      "between",
+      "components",
      "corner",
      "edge",
      "end",
+      "ends",
      "frame",
      "inset",
+      "modules",
+      "outermost",
      "padding",
      "panel",
      "statusbar",
      "taskbar",
-      "topbar"
+      "topbar",
+      "widgets"
    ],
    "parentLabel": "Bar",
+    "description": "Gap between the bar ends and the outermost widgets",
    "conditionKey": "frameEnabled"
  },
  {
@@ -5192,18 +5219,25 @@
    "keywords": [
      "appearance",
      "bar",
+      "between",
      "border",
+      "components",
      "corner",
+      "ends",
      "frame",
+      "modules",
+      "outermost",
      "panel",
      "radius",
      "rounding",
      "statusbar",
      "taskbar",
-      "topbar"
+      "topbar",
+      "widgets"
    ],
    "parentLabel": "Bar",
    "icon": "border_outer",
+    "description": "Gap between the bar ends and the outermost widgets",
    "conditionKey": "frameEnabled"
  },
  {
@@ -5440,6 +5474,29 @@
    ],
    "parentLabel": "Bar"
  },
+  {
+    "section": "frameSurfaceOpacity",
+    "label": "Opacity",
+    "tabIndex": 6,
+    "category": "Appearance",
+    "keywords": [
+      "appearance",
+      "bar",
+      "frame",
+      "interface",
+      "opacity",
+      "override",
+      "panel",
+      "statusbar",
+      "style",
+      "taskbar",
+      "topbar",
+      "transparency"
+    ],
+    "parentLabel": "Bar",
+    "description": "Override",
+    "conditionKey": "frameEnabled"
+  },
  {
    "section": "islandSatelliteTransparency",
    "label": "Override",
@@ -5760,6 +5817,27 @@
    ],
    "parentLabel": "Bar"
  },
+  {
+    "section": "frameThickness",
+    "label": "Thickness",
+    "tabIndex": 6,
+    "category": "Appearance",
+    "keywords": [
+      "appearance",
+      "bar",
+      "border",
+      "frame",
+      "panel",
+      "size",
+      "statusbar",
+      "taskbar",
+      "thickness",
+      "topbar",
+      "width"
+    ],
+    "parentLabel": "Bar",
+    "conditionKey": "frameEnabled"
+  },
  {
    "section": "islandHomeVolumeDisplay",
    "label": "Volume style",
@@ -5883,27 +5961,6 @@
    "icon": "widgets",
    "description": "Opacity"
  },
-  {
-    "section": "frameThickness",
-    "label": "Width",
-    "tabIndex": 6,
-    "category": "Appearance",
-    "keywords": [
-      "appearance",
-      "bar",
-      "border",
-      "frame",
-      "panel",
-      "size",
-      "statusbar",
-      "taskbar",
-      "thickness",
-      "topbar",
-      "width"
-    ],
-    "parentLabel": "Bar",
-    "conditionKey": "frameEnabled"
-  },
  {
    "section": "networkStatus",
    "label": "Status",