Settings: re-organization

Modules/Bar/Widgets/MediaMini.qml

@@ -173,8 +173,8 @@ Item {
           spacing: 0
 
           Item {
-            Layout.preferredWidth: 21
-            Layout.preferredHeight: 21
+            Layout.preferredWidth: Math.round(21 * Style.uiScaleRatio)
+            Layout.preferredHeight: Math.round(21 * Style.uiScaleRatio)
 
             NImageCircled {
               id: trackArt

Modules/ControlCenter/Cards/ProfileCard.qml

@@ -25,8 +25,8 @@ NBox {
     spacing: Style.marginM
 
     NImageCircled {
-      width: Math.round(Style.baseWidgetSize * 1.25 * Style.uiScaleRatio)
-      height: width
+      Layout.preferredWidth: Math.round(Style.baseWidgetSize * 1.25 * Style.uiScaleRatio)
+      Layout.preferredHeight: Math.round(Style.baseWidgetSize * 1.25 * Style.uiScaleRatio)
       imagePath: Settings.preprocessPath(Settings.data.general.avatarImage)
       fallbackIcon: "person"
       borderColor: Color.mPrimary

Modules/ControlCenter/Cards/TopCard.qml

@@ -1,156 +0,0 @@
-import QtQuick
-import QtQuick.Effects
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Io
-import Quickshell.Widgets
-import qs.Modules.Settings
-import qs.Modules.ControlCenter
-import qs.Modules.ControlCenter.Extras
-import qs.Commons
-import qs.Services
-import qs.Widgets
-
-// Header card with avatar, user and quick actions
-NBox {
-  id: root
-
-  property string uptimeText: "--"
-  property real spacing: Style.marginS
-
-  ColumnLayout {
-    anchors.fill: parent
-    anchors.margins: Style.marginM
-
-    // Profile, Uptime, Settings, SessionMenu, Close
-    RowLayout {
-      id: content
-
-      spacing: root.spacing
-      Layout.alignment: Qt.AlignVCenter
-
-      NImageCircled {
-        width: Style.baseWidgetSize * 1.25
-        height: width
-        imagePath: Settings.preprocessPath(Settings.data.general.avatarImage)
-        fallbackIcon: "person"
-        borderColor: Color.mPrimary
-        borderWidth: Math.max(1, Style.borderM)
-        Layout.alignment: Qt.AlignVCenter
-        Layout.topMargin: Style.marginXS
-      }
-
-      ColumnLayout {
-        Layout.fillWidth: true
-        spacing: Style.marginXXS
-        NText {
-          text: Quickshell.env("USER") || "user"
-          font.weight: Style.fontWeightBold
-          font.capitalization: Font.Capitalize
-        }
-        NText {
-          text: I18n.tr("system.uptime", {
-                          "uptime": uptimeText
-                        })
-          pointSize: Style.fontSizeXS
-          color: Color.mOnSurfaceVariant
-        }
-      }
-
-      Item {
-        Layout.fillWidth: true
-      }
-
-      RowLayout {
-        spacing: root.spacing
-        Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-
-        NIconButton {
-          baseSize: Style.baseWidgetSize * 0.9
-          icon: "settings"
-          tooltipText: I18n.tr("tooltips.open-settings")
-          onClicked: {
-            settingsPanel.requestedTab = SettingsPanel.Tab.General
-            settingsPanel.open()
-          }
-        }
-
-        NIconButton {
-          baseSize: Style.baseWidgetSize * 0.9
-          icon: "power"
-          tooltipText: I18n.tr("tooltips.session-menu")
-          onClicked: {
-            sessionMenuPanel.open()
-            controlCenterPanel.close()
-          }
-        }
-
-        NIconButton {
-          baseSize: Style.baseWidgetSize * 0.9
-          icon: "close"
-          tooltipText: I18n.tr("tooltips.close")
-          onClicked: {
-            controlCenterPanel.close()
-          }
-        }
-      }
-    }
-
-    NDivider {
-      Layout.fillWidth: true
-      Layout.topMargin: Style.marginS
-      Layout.bottomMargin: Style.marginS
-    }
-
-    GridLayout {
-      id: grid
-      Layout.fillWidth: true
-      columns: (Settings.data.controlCenter.quickSettingsStyle === "compact") ? 4 : 3
-      columnSpacing: Style.marginS
-      rowSpacing: Style.marginS
-
-      Repeater {
-        model: Settings.data.controlCenter.widgets.quickSettings
-        delegate: ControlCenterWidgetLoader {
-          Layout.fillWidth: true
-          widgetId: (modelData.id !== undefined ? modelData.id : "")
-          widgetProps: {
-            "screen": root.modelData || null,
-            "widgetId": modelData.id,
-            "section": "quickSettings",
-            "sectionWidgetIndex": index,
-            "sectionWidgetsCount": Settings.data.controlCenter.widgets.quickSettings.length
-          }
-          Layout.alignment: Qt.AlignVCenter
-        }
-      }
-    }
-  }
-
-  // ----------------------------------
-  // Uptime
-  Timer {
-    interval: 60000
-    repeat: true
-    running: true
-    onTriggered: uptimeProcess.running = true
-  }
-
-  Process {
-    id: uptimeProcess
-    command: ["cat", "/proc/uptime"]
-    running: true
-
-    stdout: StdioCollector {
-      onStreamFinished: {
-        var uptimeSeconds = parseFloat(this.text.trim().split(' ')[0])
-        uptimeText = Time.formatVagueHumanReadableDuration(uptimeSeconds)
-        uptimeProcess.running = false
-      }
-    }
-  }
-
-  function updateSystemInfo() {
-    uptimeProcess.running = true
-  }
-}

Modules/LockScreen/LockScreen.qml

@@ -296,8 +296,8 @@ Loader {
 
                   NImageCircled {
                     anchors.centerIn: parent
-                    width: 66
-                    height: 66
+                    Layout.preferredWidth: 66
+                    Layout.preferredHeight: 66
                     imagePath: Settings.preprocessPath(Settings.data.general.avatarImage)
                     fallbackIcon: "person"
 

Modules/Notification/Notification.qml

@@ -313,8 +313,8 @@ Variants {
                   // For real-time notification always show the original image
                   // as the cached version is most likely still processing.
                   NImageCircled {
-                    Layout.preferredWidth: 40
-                    Layout.preferredHeight: 40
+                    Layout.preferredWidth: Math.round(40 * Style.uiScaleRatio)
+                    Layout.preferredHeight: Math.round(40 * Style.uiScaleRatio)
                     Layout.alignment: Qt.AlignTop
                     Layout.topMargin: 30
                     imagePath: model.originalImage || ""

Modules/Notification/NotificationHistoryPanel.qml

@@ -185,8 +185,8 @@ NPanel {
 
             ColumnLayout {
               NImageCircled {
-                Layout.preferredWidth: 40
-                Layout.preferredHeight: 40
+                Layout.preferredWidth: Math.round(40 * Style.uiScaleRatio)
+                Layout.preferredHeight: Math.round(40 * Style.uiScaleRatio)
                 Layout.alignment: Qt.AlignTop
                 Layout.topMargin: 20
                 imagePath: model.cachedImage || model.originalImage || ""

Modules/OSD/OSD.qml

@@ -146,8 +146,8 @@ Variants {
           return 0
         var base = Style.marginM
         if (Settings.data.bar.position === "top") {
-          var floatExtraV = Settings.data.bar.floating ? Settings.data.bar.marginVertical * Style.marginXL  : 0
-          return Style.barHeight+ base + floatExtraV
+          var floatExtraV = Settings.data.bar.floating ? Settings.data.bar.marginVertical * Style.marginXL : 0
+          return Style.barHeight + base + floatExtraV
         }
         return base
       }
@@ -335,7 +335,7 @@ Variants {
 
             ColumnLayout {
               // Ensure inner padding respects the rounded corners; avoid clipping the icon/text
-              property int vMargin:{
+              property int vMargin: {
                 const styleMargin = Style.marginL
                 const cornerGuard = Math.round(osdItem.radius)
                 return Math.max(styleMargin, cornerGuard)
@@ -574,4 +574,4 @@ Variants {
       }
     }
   }
-}
+}

Modules/Settings/Bar/WidgetSettings/ControlCenterSettings.qml

@@ -49,11 +49,11 @@ ColumnLayout {
     }
 
     NImageCircled {
+      Layout.preferredWidth: Style.fontSizeXL * 2
+      Layout.preferredHeight: Style.fontSizeXL * 2
       Layout.alignment: Qt.AlignVCenter
       imagePath: valueCustomIconPath
       visible: valueCustomIconPath !== ""
-      width: Style.fontSizeXL * 2
-      height: Style.fontSizeXL * 2
     }
 
     NIcon {

Modules/Settings/SettingsPanel.qml

@@ -18,7 +18,6 @@ NPanel {
 
   panelAnchorHorizontalCenter: true
   panelAnchorVerticalCenter: true
-
   panelKeyboardFocus: true
 
   draggable: !PanelService.hasOpenedPopup
@@ -40,6 +39,7 @@ NPanel {
     Network,
     Notifications,
     ScreenRecorder,
+    UserInterface,
     Wallpaper
   }
 
@@ -116,7 +116,10 @@ NPanel {
     id: controlCenterTab
     ControlCenterTab {}
   }
-
+  Component {
+    id: userInterfaceTab
+    UserInterfaceTab {}
+  }
   // Order *DOES* matter
   function updateTabsModel() {
     let newTabs = [{
@@ -124,18 +127,22 @@ NPanel {
                      "label": "settings.general.title",
                      "icon": "settings-general",
                      "source": generalTab
+                   }, {
+                     "id": SettingsPanel.Tab.UserInterface,
+                     "label": "settings.user-interface.title",
+                     "icon": "settings-user-interface",
+                     "source": userInterfaceTab
                    }, {
                      "id": SettingsPanel.Tab.Bar,
                      "label": "settings.bar.title",
                      "icon": "settings-bar",
                      "source": barTab
-                   }, //{
-                   // "id": SettingsPanel.Tab.ControlCenter,
-                   // "label": "settings.control-center.title",
-                   // "icon": "settings-bar",
-                   // "source": controlCenterTab
-                   //},
-                   {
+                   }, {
+                     "id": SettingsPanel.Tab.ControlCenter,
+                     "label": "settings.control-center.title",
+                     "icon": "settings-control-center",
+                     "source": controlCenterTab
+                   }, {
                      "id": SettingsPanel.Tab.Dock,
                      "label": "settings.dock.title",
                      "icon": "settings-dock",

Modules/Settings/Tabs/AboutTab.qml

@@ -133,8 +133,8 @@ ColumnLayout {
 
         Item {
           Layout.alignment: Qt.AlignVCenter
-          Layout.preferredWidth: Style.baseWidgetSize * 2
-          Layout.preferredHeight: Style.baseWidgetSize * 2
+          Layout.preferredWidth: Style.baseWidgetSize * 2 * Style.uiScaleRatio
+          Layout.preferredHeight: Style.baseWidgetSize * 2 * Style.uiScaleRatio
 
           NImageCircled {
             imagePath: modelData.avatar_url || ""

Modules/Settings/Tabs/ControlCenterTab.qml

@@ -27,34 +27,45 @@ ColumnLayout {
     }
   }
 
-  // Quick Settings Style Section
   ColumnLayout {
     spacing: Style.marginL
     Layout.fillWidth: true
 
     NHeader {
-      label: I18n.tr("settings.control-center.quickSettingsStyle.section.label")
-      description: I18n.tr("settings.control-center.quickSettingsStyle.section.description")
+      label: I18n.tr("settings.control-center.section.label")
+      description: I18n.tr("settings.control-center.section.description")
     }
 
     NComboBox {
-      id: quickSettingsStyle
-      label: I18n.tr("settings.control-center.quickSettingsStyle.style.label")
-      description: I18n.tr("settings.control-center.quickSettingsStyle.style.description")
+      id: controlCenterPosition
+      label: I18n.tr("settings.control-center.position.label")
+      description: I18n.tr("settings.control-center.position.description")
       Layout.fillWidth: true
       model: [{
-          "key": "compact",
-          "name": I18n.tr("options.control-center.quickSettingsStyle.compact")
+          "key": "close_to_bar_button",
+          "name": I18n.tr("options.control-center.position.close_to_bar_button")
         }, {
-          "key": "classic",
-          "name": I18n.tr("options.control-center.quickSettingsStyle.classic")
+          "key": "top_left",
+          "name": I18n.tr("options.control-center.position.top_left")
         }, {
-          "key": "modern",
-          "name": I18n.tr("options.control-center.quickSettingsStyle.modern")
+          "key": "top_right",
+          "name": I18n.tr("options.control-center.position.top_right")
+        }, {
+          "key": "bottom_left",
+          "name": I18n.tr("options.control-center.position.bottom_left")
+        }, {
+          "key": "bottom_right",
+          "name": I18n.tr("options.control-center.position.bottom_right")
+        }, {
+          "key": "bottom_center",
+          "name": I18n.tr("options.control-center.position.bottom_center")
+        }, {
+          "key": "top_center",
+          "name": I18n.tr("options.control-center.position.top_center")
         }]
-      currentKey: Settings.data.controlCenter.quickSettingsStyle || "compact"
+      currentKey: Settings.data.controlCenter.position
       onSelected: function (key) {
-        Settings.data.controlCenter.quickSettingsStyle = key
+        Settings.data.controlCenter.position = key
       }
     }
   }
@@ -65,47 +76,85 @@ ColumnLayout {
     Layout.bottomMargin: Style.marginXL
   }
 
-  // Widgets Management Section
-  ColumnLayout {
-    spacing: Style.marginXXS
-    Layout.fillWidth: true
+  // // Quick Settings Style Section
+  // ColumnLayout {
+  //   spacing: Style.marginL
+  //   Layout.fillWidth: true
 
-    NHeader {
-      label: I18n.tr("settings.control-center.widgets.section.label")
-      description: I18n.tr("settings.control-center.widgets.section.description")
-    }
+  //   NHeader {
+  //     label: I18n.tr("settings.control-center.quickSettingsStyle.section.label")
+  //     description: I18n.tr("settings.control-center.quickSettingsStyle.section.description")
+  //   }
 
-    // Bar Sections
-    ColumnLayout {
-      Layout.fillWidth: true
-      Layout.fillHeight: true
-      Layout.topMargin: Style.marginM
-      spacing: Style.marginM
+  //   NComboBox {
+  //     id: quickSettingsStyle
+  //     label: I18n.tr("settings.control-center.quickSettingsStyle.style.label")
+  //     description: I18n.tr("settings.control-center.quickSettingsStyle.style.description")
+  //     Layout.fillWidth: true
+  //     model: [{
+  //         "key": "compact",
+  //         "name": I18n.tr("options.control-center.quickSettingsStyle.compact")
+  //       }, {
+  //         "key": "classic",
+  //         "name": I18n.tr("options.control-center.quickSettingsStyle.classic")
+  //       }, {
+  //         "key": "modern",
+  //         "name": I18n.tr("options.control-center.quickSettingsStyle.modern")
+  //       }]
+  //     currentKey: Settings.data.controlCenter.quickSettingsStyle || "compact"
+  //     onSelected: function (key) {
+  //       Settings.data.controlCenter.quickSettingsStyle = key
+  //     }
+  //   }
+  // }
 
-      // Quick Settings
-      SectionEditor {
-        sectionName: I18n.tr("settings.control-center.quickSettings.sectionName")
-        sectionId: "quickSettings"
-        settingsDialogComponent: ""
-        widgetRegistry: ControlCenterWidgetRegistry
-        widgetModel: Settings.data.controlCenter.widgets["quickSettings"]
-        availableWidgets: availableWidgets
-        enableMoveBetweenSections: false
-        onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)
-        onRemoveWidget: (section, index) => _removeWidgetFromSection(section, index)
-        onReorderWidget: (section, fromIndex, toIndex) => _reorderWidgetInSection(section, fromIndex, toIndex)
-        onUpdateWidgetSettings: (section, index, settings) => _updateWidgetSettingsInSection(section, index, settings)
-        onDragPotentialStarted: root.handleDragStart()
-        onDragPotentialEnded: root.handleDragEnd()
-      }
-    }
-  }
+  // NDivider {
+  //   Layout.fillWidth: true
+  //   Layout.topMargin: Style.marginXL
+  //   Layout.bottomMargin: Style.marginXL
+  // }
 
-  NDivider {
-    Layout.fillWidth: true
-    Layout.topMargin: Style.marginXL
-    Layout.bottomMargin: Style.marginXL
-  }
+  // // Widgets Management Section
+  // ColumnLayout {
+  //   spacing: Style.marginXXS
+  //   Layout.fillWidth: true
+
+  //   NHeader {
+  //     label: I18n.tr("settings.control-center.widgets.section.label")
+  //     description: I18n.tr("settings.control-center.widgets.section.description")
+  //   }
+
+  //   // Bar Sections
+  //   ColumnLayout {
+  //     Layout.fillWidth: true
+  //     Layout.fillHeight: true
+  //     Layout.topMargin: Style.marginM
+  //     spacing: Style.marginM
+
+  //     // Quick Settings
+  //     SectionEditor {
+  //       sectionName: I18n.tr("settings.control-center.quickSettings.sectionName")
+  //       sectionId: "quickSettings"
+  //       settingsDialogComponent: ""
+  //       widgetRegistry: ControlCenterWidgetRegistry
+  //       widgetModel: Settings.data.controlCenter.widgets["quickSettings"]
+  //       availableWidgets: availableWidgets
+  //       enableMoveBetweenSections: false
+  //       onAddWidget: (widgetId, section) => _addWidgetToSection(widgetId, section)
+  //       onRemoveWidget: (section, index) => _removeWidgetFromSection(section, index)
+  //       onReorderWidget: (section, fromIndex, toIndex) => _reorderWidgetInSection(section, fromIndex, toIndex)
+  //       onUpdateWidgetSettings: (section, index, settings) => _updateWidgetSettingsInSection(section, index, settings)
+  //       onDragPotentialStarted: root.handleDragStart()
+  //       onDragPotentialEnded: root.handleDragEnd()
+  //     }
+  //   }
+  // }
+
+  // NDivider {
+  //   Layout.fillWidth: true
+  //   Layout.topMargin: Style.marginXL
+  //   Layout.bottomMargin: Style.marginXL
+  // }
 
   // ---------------------------------
   // Signal functions

Modules/Settings/Tabs/GeneralTab.qml

@@ -21,8 +21,8 @@ ColumnLayout {
 
     // Avatar preview
     NImageCircled {
-      width: 108 * Style.uiScaleRatio
-      height: 108 * Style.uiScaleRatio
+      Layout.preferredWidth: 88 * Style.uiScaleRatio
+      Layout.preferredHeight: width
       imagePath: Settings.preprocessPath(Settings.data.general.avatarImage)
       fallbackIcon: "person"
       borderColor: Color.mPrimary
@@ -65,299 +65,6 @@ ColumnLayout {
     Layout.bottomMargin: Style.marginXL
   }
 
-  // User Interface
-  ColumnLayout {
-    spacing: Style.marginL
-    Layout.fillWidth: true
-
-    NHeader {
-      label: I18n.tr("settings.general.ui.section.label")
-      description: I18n.tr("settings.general.ui.section.description")
-    }
-
-    NToggle {
-      label: I18n.tr("settings.general.ui.dim-desktop.label")
-      description: I18n.tr("settings.general.ui.dim-desktop.description")
-      checked: Settings.data.general.dimDesktop
-      onToggled: checked => Settings.data.general.dimDesktop = checked
-    }
-
-    ColumnLayout {
-      spacing: Style.marginXXS
-      Layout.fillWidth: true
-
-      NLabel {
-        label: I18n.tr("settings.general.ui.scaling.label")
-        description: I18n.tr("settings.general.ui.scaling.description")
-      }
-
-      RowLayout {
-        spacing: Style.marginL
-        Layout.fillWidth: true
-
-        NValueSlider {
-          Layout.fillWidth: true
-          from: 0.8
-          to: 1.2
-          stepSize: 0.1
-          value: Settings.data.general.scaleRatio
-          onMoved: value => Settings.data.general.scaleRatio = value
-          text: Math.floor(Settings.data.general.scaleRatio * 100) + "%"
-        }
-
-        // Reset button container
-        Item {
-          Layout.preferredWidth: 30 * Style.uiScaleRatio
-          Layout.preferredHeight: 30 * Style.uiScaleRatio
-
-          NIconButton {
-            icon: "refresh"
-            baseSize: Style.baseWidgetSize * 0.8
-            tooltipText: I18n.tr("settings.general.ui.scaling.reset-scaling")
-            onClicked: Settings.data.general.scaleRatio = 1.0
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-          }
-        }
-      }
-    }
-
-    NToggle {
-      label: I18n.tr("settings.general.ui.tooltips.label")
-      description: I18n.tr("settings.general.ui.tooltips.description")
-      checked: Settings.data.ui.tooltipsEnabled
-      onToggled: checked => Settings.data.ui.tooltipsEnabled = checked
-    }
-
-    NToggle {
-      label: I18n.tr("settings.general.ui.compact-lockscreen.label")
-      description: I18n.tr("settings.general.ui.compact-lockscreen.description")
-      checked: Settings.data.general.compactLockScreen
-      onToggled: checked => Settings.data.general.compactLockScreen = checked
-    }
-
-    ColumnLayout {
-      spacing: Style.marginXXS
-      Layout.fillWidth: true
-
-      NLabel {
-        label: I18n.tr("settings.general.ui.border-radius.label")
-        description: I18n.tr("settings.general.ui.border-radius.description")
-      }
-
-      RowLayout {
-        spacing: Style.marginL
-        Layout.fillWidth: true
-
-        NValueSlider {
-          Layout.fillWidth: true
-          from: 0
-          to: 1
-          stepSize: 0.01
-          value: Settings.data.general.radiusRatio
-          onMoved: value => Settings.data.general.radiusRatio = value
-          text: Math.floor(Settings.data.general.radiusRatio * 100) + "%"
-        }
-
-        // Reset button container
-        Item {
-          Layout.preferredWidth: 30 * Style.uiScaleRatio
-          Layout.preferredHeight: 30 * Style.uiScaleRatio
-
-          NIconButton {
-            icon: "refresh"
-            baseSize: Style.baseWidgetSize * 0.8
-            tooltipText: I18n.tr("settings.general.ui.border-radius.reset")
-            onClicked: Settings.data.general.radiusRatio = 1.0
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-          }
-        }
-      }
-    }
-
-    // Animation Speed
-    ColumnLayout {
-      spacing: Style.marginL
-      Layout.fillWidth: true
-
-      NToggle {
-        label: I18n.tr("settings.general.ui.animation-disable.label")
-        description: I18n.tr("settings.general.ui.animation-disable.description")
-        checked: Settings.data.general.animationDisabled
-        onToggled: checked => Settings.data.general.animationDisabled = checked
-      }
-
-      ColumnLayout {
-        spacing: Style.marginXXS
-        Layout.fillWidth: true
-        visible: !Settings.data.general.animationDisabled
-
-        NLabel {
-          label: I18n.tr("settings.general.ui.animation-speed.label")
-          description: I18n.tr("settings.general.ui.animation-speed.description")
-        }
-
-        RowLayout {
-          spacing: Style.marginL
-          Layout.fillWidth: true
-
-          NValueSlider {
-            Layout.fillWidth: true
-            from: 0.1
-            to: 2.0
-            stepSize: 0.01
-            value: Settings.data.general.animationSpeed
-            onMoved: value => Settings.data.general.animationSpeed = value
-            text: Math.round(Settings.data.general.animationSpeed * 100) + "%"
-          }
-
-          // Reset button container
-          Item {
-            Layout.preferredWidth: 30 * Style.uiScaleRatio
-            Layout.preferredHeight: 30 * Style.uiScaleRatio
-
-            NIconButton {
-              icon: "refresh"
-              baseSize: Style.baseWidgetSize * 0.8
-              tooltipText: I18n.tr("settings.general.ui.animation-speed.reset")
-              onClicked: Settings.data.general.animationSpeed = 1.0
-              anchors.right: parent.right
-              anchors.verticalCenter: parent.verticalCenter
-            }
-          }
-        }
-      }
-    }
-  }
-
-  NDivider {
-    Layout.fillWidth: true
-    Layout.topMargin: Style.marginXL
-    Layout.bottomMargin: Style.marginXL
-  }
-
-  // Dock
-  ColumnLayout {
-    spacing: Style.marginL
-    Layout.fillWidth: true
-
-    NHeader {
-      label: I18n.tr("settings.general.screen-corners.section.label")
-      description: I18n.tr("settings.general.screen-corners.section.description")
-    }
-
-    NToggle {
-      label: I18n.tr("settings.general.screen-corners.show-corners.label")
-      description: I18n.tr("settings.general.screen-corners.show-corners.description")
-      checked: Settings.data.general.showScreenCorners
-      onToggled: checked => Settings.data.general.showScreenCorners = checked
-    }
-
-    NToggle {
-      label: I18n.tr("settings.general.screen-corners.solid-black.label")
-      description: I18n.tr("settings.general.screen-corners.solid-black.description")
-      checked: Settings.data.general.forceBlackScreenCorners
-      onToggled: checked => Settings.data.general.forceBlackScreenCorners = checked
-    }
-
-    ColumnLayout {
-      spacing: Style.marginXXS
-      Layout.fillWidth: true
-
-      NLabel {
-        label: I18n.tr("settings.general.screen-corners.radius.label")
-        description: I18n.tr("settings.general.screen-corners.radius.description")
-      }
-
-      RowLayout {
-        spacing: Style.marginL
-        Layout.fillWidth: true
-
-        NValueSlider {
-          Layout.fillWidth: true
-          from: 0
-          to: 2
-          stepSize: 0.01
-          value: Settings.data.general.screenRadiusRatio
-          onMoved: value => Settings.data.general.screenRadiusRatio = value
-          text: Math.floor(Settings.data.general.screenRadiusRatio * 100) + "%"
-        }
-
-        // Reset button container
-        Item {
-          Layout.preferredWidth: 30 * Style.uiScaleRatio
-          Layout.preferredHeight: 30 * Style.uiScaleRatio
-
-          NIconButton {
-            icon: "refresh"
-            baseSize: Style.baseWidgetSize * 0.8
-            tooltipText: I18n.tr("settings.general.screen-corners.radius.reset")
-            onClicked: Settings.data.general.screenRadiusRatio = 1.0
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-          }
-        }
-      }
-    }
-  }
-
-  NDivider {
-    Layout.fillWidth: true
-    Layout.topMargin: Style.marginXL
-    Layout.bottomMargin: Style.marginXL
-  }
-
-  // Control Center
-  ColumnLayout {
-    spacing: Style.marginL
-    Layout.fillWidth: true
-
-    NHeader {
-      label: I18n.tr("settings.general.control-center.section.label")
-      description: I18n.tr("settings.general.control-center.section.description")
-    }
-
-    NComboBox {
-      id: controlCenterPosition
-      label: I18n.tr("settings.general.control-center.position.label")
-      description: I18n.tr("settings.general.control-center.position.description")
-      Layout.fillWidth: true
-      model: [{
-          "key": "close_to_bar_button",
-          "name": I18n.tr("options.control-center.position.close_to_bar_button")
-        }, {
-          "key": "top_left",
-          "name": I18n.tr("options.control-center.position.top_left")
-        }, {
-          "key": "top_right",
-          "name": I18n.tr("options.control-center.position.top_right")
-        }, {
-          "key": "bottom_left",
-          "name": I18n.tr("options.control-center.position.bottom_left")
-        }, {
-          "key": "bottom_right",
-          "name": I18n.tr("options.control-center.position.bottom_right")
-        }, {
-          "key": "bottom_center",
-          "name": I18n.tr("options.control-center.position.bottom_center")
-        }, {
-          "key": "top_center",
-          "name": I18n.tr("options.control-center.position.top_center")
-        }]
-      currentKey: Settings.data.controlCenter.position
-      onSelected: function (key) {
-        Settings.data.controlCenter.position = key
-      }
-    }
-  }
-
-  NDivider {
-    Layout.fillWidth: true
-    Layout.topMargin: Style.marginXL
-    Layout.bottomMargin: Style.marginXL
-  }
-
   // Fonts
   ColumnLayout {
     spacing: Style.marginL
@@ -476,4 +183,10 @@ ColumnLayout {
       }
     }
   }
+
+  NDivider {
+    Layout.fillWidth: true
+    Layout.topMargin: Style.marginXL
+    Layout.bottomMargin: Style.marginXL
+  }
 }

Modules/Settings/Tabs/UserInterfaceTab.qml

@@ -0,0 +1,260 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+ColumnLayout {
+  id: root
+
+  // User Interface
+  ColumnLayout {
+    spacing: Style.marginL
+    Layout.fillWidth: true
+
+    NHeader {
+      label: I18n.tr("settings.user-interface.section.label")
+      description: I18n.tr("settings.user-interface.section.description")
+    }
+
+    NToggle {
+      label: I18n.tr("settings.user-interface.dim-desktop.label")
+      description: I18n.tr("settings.user-interface.dim-desktop.description")
+      checked: Settings.data.general.dimDesktop
+      onToggled: checked => Settings.data.general.dimDesktop = checked
+    }
+
+    NToggle {
+      label: I18n.tr("settings.user-interface.tooltips.label")
+      description: I18n.tr("settings.user-interface.tooltips.description")
+      checked: Settings.data.ui.tooltipsEnabled
+      onToggled: checked => Settings.data.ui.tooltipsEnabled = checked
+    }
+
+    NToggle {
+      label: I18n.tr("settings.user-interface.compact-lockscreen.label")
+      description: I18n.tr("settings.user-interface.compact-lockscreen.description")
+      checked: Settings.data.general.compactLockScreen
+      onToggled: checked => Settings.data.general.compactLockScreen = checked
+    }
+
+    NDivider {
+      Layout.fillWidth: true
+      Layout.topMargin: Style.marginL
+      Layout.bottomMargin: Style.marginL
+    }
+
+    ColumnLayout {
+      spacing: Style.marginXXS
+      Layout.fillWidth: true
+
+      NLabel {
+        label: I18n.tr("settings.user-interface.scaling.label")
+        description: I18n.tr("settings.user-interface.scaling.description")
+      }
+
+      RowLayout {
+        spacing: Style.marginL
+        Layout.fillWidth: true
+
+        NValueSlider {
+          Layout.fillWidth: true
+          from: 0.8
+          to: 1.2
+          stepSize: 0.05
+          value: Settings.data.general.scaleRatio
+          onMoved: value => Settings.data.general.scaleRatio = value
+          text: Math.floor(Settings.data.general.scaleRatio * 100) + "%"
+        }
+
+        // Reset button container
+        Item {
+          Layout.preferredWidth: 30 * Style.uiScaleRatio
+          Layout.preferredHeight: 30 * Style.uiScaleRatio
+
+          NIconButton {
+            icon: "refresh"
+            baseSize: Style.baseWidgetSize * 0.8
+            tooltipText: I18n.tr("settings.user-interface.scaling.reset-scaling")
+            onClicked: Settings.data.general.scaleRatio = 1.0
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+          }
+        }
+      }
+    }
+
+    ColumnLayout {
+      spacing: Style.marginXXS
+      Layout.fillWidth: true
+
+      NLabel {
+        label: I18n.tr("settings.user-interface.border-radius.label")
+        description: I18n.tr("settings.user-interface.border-radius.description")
+      }
+
+      RowLayout {
+        spacing: Style.marginL
+        Layout.fillWidth: true
+
+        NValueSlider {
+          Layout.fillWidth: true
+          from: 0
+          to: 1
+          stepSize: 0.01
+          value: Settings.data.general.radiusRatio
+          onMoved: value => Settings.data.general.radiusRatio = value
+          text: Math.floor(Settings.data.general.radiusRatio * 100) + "%"
+        }
+
+        // Reset button container
+        Item {
+          Layout.preferredWidth: 30 * Style.uiScaleRatio
+          Layout.preferredHeight: 30 * Style.uiScaleRatio
+
+          NIconButton {
+            icon: "refresh"
+            baseSize: Style.baseWidgetSize * 0.8
+            tooltipText: I18n.tr("settings.user-interface.border-radius.reset")
+            onClicked: Settings.data.general.radiusRatio = 1.0
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+          }
+        }
+      }
+    }
+
+    // Animation Speed
+    ColumnLayout {
+      spacing: Style.marginL
+      Layout.fillWidth: true
+
+      ColumnLayout {
+        spacing: Style.marginXXS
+        Layout.fillWidth: true
+        visible: !Settings.data.general.animationDisabled
+
+        NLabel {
+          label: I18n.tr("settings.user-interface.animation-speed.label")
+          description: I18n.tr("settings.user-interface.animation-speed.description")
+        }
+
+        RowLayout {
+          spacing: Style.marginL
+          Layout.fillWidth: true
+
+          NValueSlider {
+            Layout.fillWidth: true
+            from: 0.1
+            to: 2.0
+            stepSize: 0.01
+            value: Settings.data.general.animationSpeed
+            onMoved: value => Settings.data.general.animationSpeed = value
+            text: Math.round(Settings.data.general.animationSpeed * 100) + "%"
+          }
+
+          // Reset button container
+          Item {
+            Layout.preferredWidth: 30 * Style.uiScaleRatio
+            Layout.preferredHeight: 30 * Style.uiScaleRatio
+
+            NIconButton {
+              icon: "refresh"
+              baseSize: Style.baseWidgetSize * 0.8
+              tooltipText: I18n.tr("settings.user-interface.animation-speed.reset")
+              onClicked: Settings.data.general.animationSpeed = 1.0
+              anchors.right: parent.right
+              anchors.verticalCenter: parent.verticalCenter
+            }
+          }
+        }
+      }
+
+      NToggle {
+        label: I18n.tr("settings.user-interface.animation-disable.label")
+        description: I18n.tr("settings.user-interface.animation-disable.description")
+        checked: Settings.data.general.animationDisabled
+        onToggled: checked => Settings.data.general.animationDisabled = checked
+      }
+    }
+  }
+
+  NDivider {
+    Layout.fillWidth: true
+    Layout.topMargin: Style.marginXL
+    Layout.bottomMargin: Style.marginXL
+  }
+
+  // Dock
+  ColumnLayout {
+    spacing: Style.marginL
+    Layout.fillWidth: true
+
+    NHeader {
+      label: I18n.tr("settings.general.screen-corners.section.label")
+      description: I18n.tr("settings.general.screen-corners.section.description")
+    }
+
+    NToggle {
+      label: I18n.tr("settings.general.screen-corners.show-corners.label")
+      description: I18n.tr("settings.general.screen-corners.show-corners.description")
+      checked: Settings.data.general.showScreenCorners
+      onToggled: checked => Settings.data.general.showScreenCorners = checked
+    }
+
+    NToggle {
+      label: I18n.tr("settings.general.screen-corners.solid-black.label")
+      description: I18n.tr("settings.general.screen-corners.solid-black.description")
+      checked: Settings.data.general.forceBlackScreenCorners
+      onToggled: checked => Settings.data.general.forceBlackScreenCorners = checked
+    }
+
+    ColumnLayout {
+      spacing: Style.marginXXS
+      Layout.fillWidth: true
+
+      NLabel {
+        label: I18n.tr("settings.general.screen-corners.radius.label")
+        description: I18n.tr("settings.general.screen-corners.radius.description")
+      }
+
+      RowLayout {
+        spacing: Style.marginL
+        Layout.fillWidth: true
+
+        NValueSlider {
+          Layout.fillWidth: true
+          from: 0
+          to: 2
+          stepSize: 0.01
+          value: Settings.data.general.screenRadiusRatio
+          onMoved: value => Settings.data.general.screenRadiusRatio = value
+          text: Math.floor(Settings.data.general.screenRadiusRatio * 100) + "%"
+        }
+
+        // Reset button container
+        Item {
+          Layout.preferredWidth: 30 * Style.uiScaleRatio
+          Layout.preferredHeight: 30 * Style.uiScaleRatio
+
+          NIconButton {
+            icon: "refresh"
+            baseSize: Style.baseWidgetSize * 0.8
+            tooltipText: I18n.tr("settings.general.screen-corners.radius.reset")
+            onClicked: Settings.data.general.screenRadiusRatio = 1.0
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+          }
+        }
+      }
+    }
+  }
+
+  NDivider {
+    Layout.fillWidth: true
+    Layout.topMargin: Style.marginXL
+    Layout.bottomMargin: Style.marginXL
+  }
+}