SettingsWindow: add snap to bar toggle

Assets/Translations/de.json

@@ -1511,6 +1511,10 @@
         "description": "Die Paneele rasten an der Stange und den Bildschirmrändern ein und sorgen so für ein nahtloses Erscheinungsbild mit stilvollen, umgekehrten Ecken.",
         "label": "Paneele an Kanten ausrichten"
       },
+      "settings-panel-attached-to-bar": {
+        "description": "Richten Sie das Einstellungsfenster an der Leiste aus, um ein einheitliches Erscheinungsbild zu erhalten.",
+        "label": "Einstellungsfenster an Leiste ausrichten"
+      },
       "panels-overlay": {
         "description": "Stellt sicher, dass Panels und die Leiste sichtbar bleiben, auch über Vollbildanwendungen.",
         "label": "Panels & Leiste oben behalten"

Assets/Translations/en.json

@@ -1511,6 +1511,10 @@
         "description": "Panels lock to the bar and screen edges, creating a seamless look with stylish inverted corners.",
         "label": "Snap panels to edges"
       },
+      "settings-panel-attached-to-bar": {
+        "description": "Keep the Settings window aligned with the bar for a unified look.",
+        "label": "Snap Settings window to bar"
+      },
       "panels-overlay": {
         "description": "Ensures panels and the bar remain visible, even over fullscreen applications.",
         "label": "Keep panels & bar on top"

Assets/Translations/es.json

@@ -1511,6 +1511,10 @@
         "description": "Los paneles se fijan a la barra y a los bordes de la pantalla, creando una apariencia impecable con elegantes esquinas invertidas.",
         "label": "Ajustar paneles a los bordes"
       },
+      "settings-panel-attached-to-bar": {
+        "description": "Mantén la ventana de Configuración alineada con la barra para un aspecto unificado.",
+        "label": "Ajustar Configuración a la barra"
+      },
       "panels-overlay": {
         "description": "Garantiza que los paneles y la barra permanezcan visibles, incluso sobre aplicaciones en pantalla completa.",
         "label": "Mantener paneles y barra en la parte superior"

Assets/Translations/fr.json

@@ -1511,6 +1511,10 @@
         "description": "Les panneaux se verrouillent sur la barre et les bords de l'écran, créant un aspect homogène avec d'élégants coins inversés.",
         "label": "Aligner les panneaux aux bords"
       },
+      "settings-panel-attached-to-bar": {
+        "description": "Alignez la fenêtre des paramètres sur la barre pour un rendu cohérent.",
+        "label": "Aligner la fenêtre des paramètres sur la barre"
+      },
       "panels-overlay": {
         "description": "Garantit que les panneaux et la barre restent visibles, même au-dessus des applications en plein écran.",
         "label": "Garder les panneaux et la barre en haut."

Assets/Translations/pt.json

@@ -1511,6 +1511,10 @@
         "description": "Os painéis travam na barra e nas bordas da tela, criando uma aparência perfeita com cantos invertidos elegantes.",
         "label": "Ajustar Painéis às Bordas"
       },
+      "settings-panel-attached-to-bar": {
+        "description": "Mantenha a janela de Configurações alinhada com a barra para um visual uniforme.",
+        "label": "Ajustar Configurações à barra"
+      },
       "panels-overlay": {
         "description": "Garante que os painéis e a barra permaneçam visíveis, mesmo sobre aplicativos em tela cheia.",
         "label": "Manter Painéis e Barra no Topo"

Assets/Translations/tr.json

@@ -1511,6 +1511,10 @@
         "description": "Paneller çubuğa ve ekran kenarlarına kilitlenerek şık ters köşelerle kusursuz bir görünüm oluşturur.",
         "label": "Kenarları Yakala"
       },
+      "settings-panel-attached-to-bar": {
+        "description": "Ayarlar penceresini çubukla hizalayarak tutarlı bir görünüm sağlayın.",
+        "label": "Ayarlar penceresini çubuğa hizala"
+      },
       "panels-overlay": {
         "description": "Panellerin ve çubuğun, tam ekran uygulamalarda bile görünür kalmasını sağlar.",
         "label": "Panelleri ve Çubuğu Üstte Tut"

Assets/Translations/uk-UA.json

@@ -1511,6 +1511,10 @@
         "description": "Панелі фіксуються до штанги та країв екрана, створюючи бездоганний вигляд зі стильними перевернутими кутами.",
         "label": "Прив'язувати панелі до країв"
       },
+      "settings-panel-attached-to-bar": {
+        "description": "Вирівнюйте вікно налаштувань відносно панелі, щоб зберегти цілісний вигляд.",
+        "label": "Прив'язувати вікно налаштувань до панелі"
+      },
       "panels-overlay": {
         "description": "Забезпечує видимість панелей і панелі завдань, навіть поверх повноекранних програм.",
         "label": "Тримати панелі та панель зверху"

Assets/Translations/zh-CN.json

@@ -1511,6 +1511,10 @@
         "description": "面板锁定到边栏和屏幕边缘，形成无缝外观，并具有时尚的倒角。",
         "label": "将面板对齐到边缘"
       },
+      "settings-panel-attached-to-bar": {
+        "description": "使设置窗口与边栏保持对齐，实现统一的外观。",
+        "label": "将设置窗口贴合边栏"
+      },
       "panels-overlay": {
         "description": "确保面板和栏保持可见，即使在全屏应用程序上也是如此。",
         "label": "将面板和栏保持在顶部"

Assets/settings-default.json

@@ -1,5 +1,5 @@
 {
-  "settingsVersion": 19,
+  "settingsVersion": 20,
   "setupCompleted": false,
   "bar": {
     "position": "top",
@@ -81,7 +81,8 @@
     "fontDefaultScale": 1,
     "fontFixedScale": 1,
     "tooltipsEnabled": true,
-    "panelsAttachedToBar": true
+    "panelsAttachedToBar": true,
+    "settingsPanelAttachToBar": false
   },
   "location": {
     "name": "Tokyo",

Commons/Settings.qml

@@ -14,7 +14,7 @@ Singleton {
   readonly property alias data: adapter
   property bool isLoaded: false
   property bool directoriesCreated: false
-  property int settingsVersion: 19
+  property int settingsVersion: 20
   property bool isDebug: Quickshell.env("NOCTALIA_DEBUG") === "1"
 
   // Define our app directories
@@ -214,6 +214,7 @@ Singleton {
       property real fontFixedScale: 1.0
       property bool tooltipsEnabled: true
       property bool panelsAttachedToBar: true
+      property bool settingsPanelAttachToBar: false
     }
 
     // location

Modules/MainScreen/SmartPanel.qml

@@ -24,6 +24,7 @@ Item {
   property color panelBackgroundColor: Color.mSurface
   property color panelBorderColor: Color.mOutline
   property var buttonItem: null
+  property bool forceAttachToBar: false
 
   // Anchoring properties
   property bool panelAnchorHorizontalCenter: false
@@ -546,9 +547,9 @@ Item {
     anchors.fill: parent
 
     // Screen-dependent attachment properties
-    readonly property bool couldAttach: Settings.data.ui.panelsAttachedToBar
+    readonly property bool couldAttach: Settings.data.ui.panelsAttachedToBar || root.forceAttachToBar
     readonly property bool couldAttachToBar: {
-      if (!Settings.data.ui.panelsAttachedToBar || Settings.data.bar.backgroundOpacity < 1.0) {
+      if (!(Settings.data.ui.panelsAttachedToBar || root.forceAttachToBar) || Settings.data.bar.backgroundOpacity < 1.0) {
         return false
       }
 

Modules/Panels/Settings/SettingsPanel.qml

@@ -14,9 +14,23 @@ SmartPanel {
 
   preferredWidth: 820 * Style.uiScaleRatio
   preferredHeight: 900 * Style.uiScaleRatio
+  readonly property bool attachToBar: Settings.data.ui.settingsPanelAttachToBar
+  readonly property string barPosition: Settings.data.bar.position
 
-  panelAnchorHorizontalCenter: true
-  panelAnchorVerticalCenter: true
+  forceAttachToBar: attachToBar
+
+  panelAnchorHorizontalCenter: attachToBar ? (barPosition === "top" || barPosition === "bottom") : true
+  panelAnchorVerticalCenter: attachToBar ? (barPosition === "left" || barPosition === "right") : true
+  panelAnchorTop: attachToBar && barPosition === "top"
+  panelAnchorBottom: attachToBar && barPosition === "bottom"
+  panelAnchorLeft: attachToBar && barPosition === "left"
+  panelAnchorRight: attachToBar && barPosition === "right"
+
+  onAttachToBarChanged: {
+    if (isPanelOpen) {
+      Qt.callLater(root.setPosition)
+    }
+  }
 
   // Tabs enumeration, order is NOT relevant
   enum Tab {

Modules/Panels/Settings/Tabs/UserInterfaceTab.qml

@@ -40,6 +40,14 @@ ColumnLayout {
       onToggled: checked => Settings.data.ui.panelsAttachedToBar = checked
     }
 
+    NToggle {
+      label: I18n.tr("settings.user-interface.settings-panel-attached-to-bar.label")
+      description: I18n.tr("settings.user-interface.settings-panel-attached-to-bar.description")
+      checked: Settings.data.ui.settingsPanelAttachToBar
+      enabled: Settings.data.ui.panelsAttachedToBar
+      onToggled: checked => Settings.data.ui.settingsPanelAttachToBar = checked
+    }
+
     NToggle {
       label: I18n.tr("settings.user-interface.shadows.label")
       description: I18n.tr("settings.user-interface.shadows.description")

README.md

@@ -44,6 +44,8 @@ https://github.com/user-attachments/assets/72c6d6dc-48b0-48a0-bd8b-c7e70990edc4
 
 ---
 
+## ⚠️ BREAKING CHANGE ⚠️
+
 With the release of `v3.0.0` we introduced a small breaking change. This is solely for niri users, we reworked how we handle the wallpaper / overview. Please read [the docs](https://docs.noctalia.dev/getting-started/compositor-settings/#niri-wallpaper-and-overview-setup) to adapt your niri config.
 
 ---