Bar Widget Settings: One file per Widget settings, refactor - wip

Modules/SettingsPanel/Bar/BarWidgetSettingsDialog.qml

@@ -0,0 +1,126 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Effects
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+import "./WidgetSettings" as WidgetSettings
+
+// Widget Settings Dialog Component
+Popup {
+  id: settingsPopup
+
+  property int widgetIndex: -1
+  property var widgetData: null
+  property string widgetId: ""
+
+  // Center popup in parent
+  x: (parent.width - width) * 0.5
+  y: (parent.height - height) * 0.5
+
+  width: 420 * scaling
+  height: content.implicitHeight + padding * 2
+  padding: Style.marginXL * scaling
+  modal: true
+
+  background: Rectangle {
+    id: bgRect
+    color: Color.mSurface
+    radius: Style.radiusL * scaling
+    border.color: Color.mPrimary
+    border.width: Style.borderM * scaling
+  }
+
+  ColumnLayout {
+    id: content
+    width: parent.width
+    spacing: Style.marginM * scaling
+
+    // Title
+    RowLayout {
+      Layout.fillWidth: true
+
+      NText {
+        text: `${settingsPopup.widgetId} Settings`
+        font.pointSize: Style.fontSizeL * scaling
+        font.weight: Style.fontWeightBold
+        color: Color.mPrimary
+        Layout.fillWidth: true
+      }
+
+      NIconButton {
+        icon: "close"
+        onClicked: settingsPopup.close()
+      }
+    }
+
+    // Separator
+    Rectangle {
+      Layout.fillWidth: true
+      Layout.preferredHeight: 1
+      color: Color.mOutline
+    }
+
+    // Settings based on widget type
+    Loader {
+      id: settingsLoader
+      Layout.fillWidth: true
+
+      source: {
+        const widgetSettingsMap = {
+          "ActiveWindow": "WidgetSettings/ActiveWindowSettings.qml",
+          "Battery": "WidgetSettings/BatterySettings.qml",
+          "Brightness": "WidgetSettings/BrightnessSettings.qml",
+          "Clock": "WidgetSettings/ClockSettings.qml",
+          "CustomButton": "WidgetSettings/CustomButtonSettings.qml",
+          "MediaMini": "WidgetSettings/MediaMiniSettings.qml",
+          "Microphone": "WidgetSettings/MicrophoneSettings.qml",
+          "NotificationHistory": "WidgetSettings/NotificationHistorySettings.qml",
+          "Workspace": "WidgetSettings/WorkspaceSettings.qml",
+          "SidePanelToggle": "WidgetSettings/SidePanelToggleSettings.qml",
+          "Spacer": "WidgetSettings/SpacerSettings.qml",
+          "SystemMonitor": "WidgetSettings/SystemMonitorSettings.qml",
+          "Volume": "WidgetSettings/VolumeSettings.qml"
+        }
+        return widgetSettingsMap[settingsPopup.widgetId] || ""
+      }
+
+      onLoaded: {
+        if (item) {
+          // Pass data to the loaded component
+          item.widgetData = settingsPopup.widgetData
+          item.widgetMetadata = BarWidgetRegistry.widgetMetadata[settingsPopup.widgetId]
+        }
+      }
+    }
+
+    // Action buttons
+    RowLayout {
+      Layout.fillWidth: true
+      Layout.topMargin: Style.marginM * scaling
+
+      Item {
+        Layout.fillWidth: true
+      }
+
+      NButton {
+        text: "Cancel"
+        outlined: true
+        onClicked: settingsPopup.close()
+      }
+
+      NButton {
+        text: "Apply"
+        icon: "check"
+        onClicked: {
+          if (settingsLoader.item && settingsLoader.item.saveSettings) {
+            var newSettings = settingsLoader.item.saveSettings()
+            root.updateWidgetSettings(sectionId, settingsPopup.widgetIndex, newSettings)
+            settingsPopup.close()
+          }
+        }
+      }
+    }
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/ActiveWindowSettings.qml

@@ -0,0 +1,32 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueShowIcon: widgetData.showIcon !== undefined ? widgetData.showIcon : widgetMetadata.showIcon
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.showIcon = valueShowIcon
+    return settings
+  }
+
+  NCheckbox {
+    id: showIcon
+    Layout.fillWidth: true
+    label: "Show app icon"
+    checked: root.valueShowIcon
+    onToggled: checked => root.valueShowIcon = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/BatterySettings.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueAlwaysShowPercentage: widgetData.alwaysShowPercentage
+                                           !== undefined ? widgetData.alwaysShowPercentage : widgetMetadata.alwaysShowPercentage
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.alwaysShowPercentage = valueAlwaysShowPercentage
+    return settings
+  }
+
+  NCheckbox {
+    label: "Always show percentage"
+    checked: root.valueAlwaysShowPercentage
+    onToggled: checked => root.valueAlwaysShowPercentage = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/BrightnessSettings.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueAlwaysShowPercentage: widgetData.alwaysShowPercentage
+                                           !== undefined ? widgetData.alwaysShowPercentage : widgetMetadata.alwaysShowPercentage
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.alwaysShowPercentage = valueAlwaysShowPercentage
+    return settings
+  }
+
+  NCheckbox {
+    label: "Always show percentage"
+    checked: valueAlwaysShowPercentage
+    onToggled: checked => valueAlwaysShowPercentage = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/ClockSettings.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueShowDate: widgetData.showDate !== undefined ? widgetData.showDate : widgetMetadata.showDate
+  property bool valueUse12h: widgetData.use12HourClock !== undefined ? widgetData.use12HourClock : widgetMetadata.use12HourClock
+  property bool valueShowSeconds: widgetData.showSeconds !== undefined ? widgetData.showSeconds : widgetMetadata.showSeconds
+  property bool valueReverseDayMonth: widgetData.reverseDayMonth !== undefined ? widgetData.reverseDayMonth : widgetMetadata.reverseDayMonth
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.showDate = valueShowDate
+    settings.use12HourClock = valueUse12h
+    settings.showSeconds = valueShowSeconds
+    settings.reverseDayMonth = valueReverseDayMonth
+    return settings
+  }
+
+  NCheckbox {
+    label: "Show date next to time"
+    checked: valueShowDate
+    onToggled: checked => valueShowDate = checked
+  }
+
+  NCheckbox {
+    label: "Use 12-hour clock"
+    checked: valueUse12h
+    onToggled: checked => valueUse12h = checked
+  }
+
+  NCheckbox {
+    label: "Show seconds"
+    checked: valueShowSeconds
+    onToggled: checked => valueShowSeconds = checked
+  }
+
+  NCheckbox {
+    label: "Reverse day and month"
+    checked: valueReverseDayMonth
+    onToggled: checked => valueReverseDayMonth = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/CustomButtonSettings.qml

@@ -0,0 +1,58 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.icon = iconInput.text
+    settings.leftClickExec = leftClickExecInput.text
+    settings.rightClickExec = rightClickExecInput.text
+    settings.middleClickExec = middleClickExecInput.text
+    return settings
+  }
+
+  // Icon setting
+  NTextInput {
+    id: iconInput
+    Layout.fillWidth: true
+    label: "Icon Name"
+    description: "Choose a name from the Material Icon set."
+    placeholderText: "Enter icon name (e.g., favorite, home, settings)"
+    text: widgetData?.icon || widgetMetadata.icon
+  }
+
+  NTextInput {
+    id: leftClickExecInput
+    Layout.fillWidth: true
+    label: "Left Click Command"
+    placeholderText: "Enter command to execute (app or custom script)"
+    text: widgetData?.leftClickExec || widgetMetadata.leftClickExec
+  }
+
+  NTextInput {
+    id: rightClickExecInput
+    Layout.fillWidth: true
+    label: "Right Click Command"
+    placeholderText: "Enter command to execute (app or custom script)"
+    text: widgetData?.rightClickExec || widgetMetadata.rightClickExec
+  }
+
+  NTextInput {
+    id: middleClickExecInput
+    Layout.fillWidth: true
+    label: "Middle Click Command"
+    placeholderText: "Enter command to execute (app or custom script)"
+    text: widgetData.middleClickExec || widgetMetadata.middleClickExec
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/MediaMiniSettings.qml

@@ -0,0 +1,62 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueShowAlbumArt: widgetData.showAlbumArt !== undefined ? widgetData.showAlbumArt : widgetMetadata.showAlbumArt
+  property bool valueShowVisualizer: widgetData.showVisualizer !== undefined ? widgetData.showVisualizer : widgetMetadata.showVisualizer
+  property string valueVisualizerType: widgetData.visualizerType || widgetMetadata.visualizerType
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.showAlbumArt = valueShowAlbumArt
+    settings.showVisualizer = valueShowVisualizer
+    settings.visualizerType = valueVisualizerType
+    return settings
+  }
+
+  NCheckbox {
+    label: "Show album art"
+    checked: valueShowAlbumArt
+    onToggled: checked => valueShowAlbumArt = checked
+  }
+
+  NCheckbox {
+    label: "Show visualizer"
+    checked: valueShowVisualizer
+    onToggled: checked => valueShowVisualizer = checked
+  }
+
+  NComboBox {
+    visible: valueShowVisualizer
+    label: "Visualizer type"
+    model: ListModel {
+      ListElement {
+        key: "linear"
+        name: "Linear"
+      }
+      ListElement {
+        key: "mirrored"
+        name: "Mirrored"
+      }
+      ListElement {
+        key: "wave"
+        name: "Wave"
+      }
+    }
+    currentKey: valueVisualizerType
+    onSelected: key => valueVisualizerType = key
+    minimumWidth: 200 * scaling
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/MicrophoneSettings.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueAlwaysShowPercentage: widgetData.alwaysShowPercentage
+                                           !== undefined ? widgetData.alwaysShowPercentage : widgetMetadata.alwaysShowPercentage
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.alwaysShowPercentage = valueAlwaysShowPercentage
+    return settings
+  }
+
+  NCheckbox {
+    label: "Always show percentage"
+    checked: valueAlwaysShowPercentage
+    onToggled: checked => valueAlwaysShowPercentage = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/NotificationHistorySettings.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueShowUnreadBadge: widgetData.showUnreadBadge !== undefined ? widgetData.showUnreadBadge : widgetMetadata.showUnreadBadge
+  property bool valueHideWhenZero: widgetData.hideWhenZero !== undefined ? widgetData.hideWhenZero : widgetMetadata.hideWhenZero
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.showUnreadBadge = valueShowUnreadBadge
+    settings.hideWhenZero = valueHideWhenZero
+    return settings
+  }
+
+  NCheckbox {
+    label: "Show unread badge"
+    checked: valueShowUnreadBadge
+    onToggled: checked => valueShowUnreadBadge = checked
+  }
+
+  NCheckbox {
+    label: "Hide badge when zero"
+    checked: valueHideWhenZero
+    onToggled: checked => valueHideWhenZero = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/SidePanelToggleSettings.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueUseDistroLogo: widgetData.useDistroLogo !== undefined ? widgetData.useDistroLogo : widgetMetadata.useDistroLogo
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.useDistroLogo = valueUseDistroLogo
+    return settings
+  }
+
+  NCheckbox {
+    label: "Use distro logo instead of icon"
+    checked: valueUseDistroLogo
+    onToggled: checked => valueUseDistroLogo = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/SpacerSettings.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.width = parseInt(widthInput.text) || widgetMetadata.width
+    return settings
+  }
+
+  NTextInput {
+    id: widthInput
+    Layout.fillWidth: true
+    label: "Width"
+    description: "Spacing width in pixels"
+    text: widgetData.width || widgetMetadata.width
+    placeholderText: "Enter width in pixels"
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/SystemMonitorSettings.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local, editable state for checkboxes
+  property bool valueShowCpuUsage: widgetData.showCpuUsage !== undefined ? widgetData.showCpuUsage : widgetMetadata.showCpuUsage
+  property bool valueShowCpuTemp: widgetData.showCpuTemp !== undefined ? widgetData.showCpuTemp : widgetMetadata.showCpuTemp
+  property bool valueShowMemoryUsage: widgetData.showMemoryUsage !== undefined ? widgetData.showMemoryUsage : widgetMetadata.showMemoryUsage
+  property bool valueShowNetworkStats: widgetData.showNetworkStats
+                                       !== undefined ? widgetData.showNetworkStats : widgetMetadata.showNetworkStats
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.showCpuUsage = valueShowCpuUsage
+    settings.showCpuTemp = valueShowCpuTemp
+    settings.showMemoryUsage = valueShowMemoryUsage
+    settings.showNetworkStats = valueShowNetworkStats
+    return settings
+  }
+
+  NCheckbox {
+    id: showCpuUsage
+    Layout.fillWidth: true
+    label: "CPU usage"
+    checked: valueShowCpuUsage
+    onToggled: checked => valueShowCpuUsage = checked
+  }
+
+  NCheckbox {
+    id: showCpuTemp
+    Layout.fillWidth: true
+    label: "CPU temperature"
+    checked: valueShowCpuTemp
+    onToggled: checked => valueShowCpuTemp = checked
+  }
+
+  NCheckbox {
+    id: showMemoryUsage
+    Layout.fillWidth: true
+    label: "Memory usage"
+    checked: valueShowMemoryUsage
+    onToggled: checked => valueShowMemoryUsage = checked
+  }
+
+  NCheckbox {
+    id: showNetworkStats
+    Layout.fillWidth: true
+    label: "Network traffic"
+    checked: valueShowNetworkStats
+    onToggled: checked => valueShowNetworkStats = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/VolumeSettings.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  // Local state
+  property bool valueAlwaysShowPercentage: widgetData.alwaysShowPercentage
+                                           !== undefined ? widgetData.alwaysShowPercentage : widgetMetadata.alwaysShowPercentage
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.alwaysShowPercentage = valueAlwaysShowPercentage
+    return settings
+  }
+
+  NCheckbox {
+    label: "Always show percentage"
+    checked: valueAlwaysShowPercentage
+    onToggled: checked => valueAlwaysShowPercentage = checked
+  }
+}

Modules/SettingsPanel/Bar/WidgetSettings/WorkspaceSettings.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Widgets
+import qs.Services
+
+ColumnLayout {
+  id: root
+  spacing: Style.marginM * scaling
+
+  // Properties to receive data from parent
+  property var widgetData: null
+  property var widgetMetadata: null
+
+  function saveSettings() {
+    var settings = Object.assign({}, widgetData || {})
+    settings.labelMode = labelModeCombo.currentKey
+    return settings
+  }
+
+  NComboBox {
+    id: labelModeCombo
+
+    label: "Label Mode"
+    model: ListModel {
+      ListElement {
+        key: "none"
+        name: "None"
+      }
+      ListElement {
+        key: "index"
+        name: "Index"
+      }
+      ListElement {
+        key: "name"
+        name: "Name"
+      }
+    }
+    currentKey: widgetData.labelMode || widgetMetadata.labelMode
+    onSelected: key => labelModeCombo.currentKey = key
+    minimumWidth: 200 * scaling
+  }
+}

Modules/SettingsPanel/Extras/BarWidgetSettingsDialog.qml

@@ -1,578 +0,0 @@
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Effects
-import QtQuick.Layouts
-import qs.Commons
-import qs.Widgets
-import qs.Services
-
-// Widget Settings Dialog Component
-Popup {
-  id: settingsPopup
-
-  property int widgetIndex: -1
-  property var widgetData: null
-  property string widgetId: ""
-
-  // Center popup in parent
-  x: (parent.width - width) * 0.5
-  y: (parent.height - height) * 0.5
-
-  width: 420 * scaling
-  height: content.implicitHeight + padding * 2
-  padding: Style.marginXL * scaling
-  modal: true
-
-  background: Rectangle {
-    id: bgRect
-    color: Color.mSurface
-    radius: Style.radiusL * scaling
-    border.color: Color.mPrimary
-    border.width: Style.borderM * scaling
-  }
-
-  ColumnLayout {
-    id: content
-    width: parent.width
-    spacing: Style.marginM * scaling
-
-    // Title
-    RowLayout {
-      Layout.fillWidth: true
-
-      NText {
-        text: "Widget Settings: " + settingsPopup.widgetId
-        font.pointSize: Style.fontSizeL * scaling
-        font.weight: Style.fontWeightBold
-        color: Color.mPrimary
-        Layout.fillWidth: true
-      }
-
-      NIconButton {
-        icon: "close"
-        onClicked: settingsPopup.close()
-      }
-    }
-
-    // Separator
-    Rectangle {
-      Layout.fillWidth: true
-      Layout.preferredHeight: 1
-      color: Color.mOutline
-    }
-
-    // Settings based on widget type
-    Loader {
-      id: settingsLoader
-      Layout.fillWidth: true
-      sourceComponent: {
-        if (settingsPopup.widgetId === "CustomButton") {
-          return customButtonSettings
-        } else if (settingsPopup.widgetId === "Spacer") {
-          return spacerSettings
-        } else if (settingsPopup.widgetId === "Workspace") {
-          return workspaceSettings
-        } else if (settingsPopup.widgetId === "SystemMonitor") {
-          return systemMonitorSettings
-        } else if (settingsPopup.widgetId === "ActiveWindow") {
-          return activeWindowSettings
-        } else if (settingsPopup.widgetId === "MediaMini") {
-          return mediaMiniSettings
-        } else if (settingsPopup.widgetId === "Clock") {
-          return clockSettings
-        } else if (settingsPopup.widgetId === "Volume") {
-          return volumeSettings
-        } else if (settingsPopup.widgetId === "Microphone") {
-          return microphoneSettings
-        } else if (settingsPopup.widgetId === "NotificationHistory") {
-          return notificationHistorySettings
-        } else if (settingsPopup.widgetId === "Brightness") {
-          return brightnessSettings
-        } else if (settingsPopup.widgetId === "SidePanelToggle") {
-          return sidePanelToggleSettings
-        }
-        // Add more widget settings components here as needed
-        return null
-      }
-    }
-
-    // Action buttons
-    RowLayout {
-      Layout.fillWidth: true
-      Layout.topMargin: Style.marginM * scaling
-
-      Item {
-        Layout.fillWidth: true
-      }
-
-      NButton {
-        text: "Cancel"
-        outlined: true
-        onClicked: settingsPopup.close()
-      }
-
-      NButton {
-        text: "Apply"
-        icon: "check"
-        onClicked: {
-          if (settingsLoader.item && settingsLoader.item.saveSettings) {
-            var newSettings = settingsLoader.item.saveSettings()
-            root.updateWidgetSettings(sectionId, settingsPopup.widgetIndex, newSettings)
-            settingsPopup.close()
-          }
-        }
-      }
-    }
-  }
-
-  // SidePanelToggle settings component
-  Component {
-    id: sidePanelToggleSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local state
-      property bool valueUseDistroLogo: settingsPopup.widgetData.useDistroLogo
-                                        !== undefined ? settingsPopup.widgetData.useDistroLogo : BarWidgetRegistry.widgetMetadata["SidePanelToggle"].useDistroLogo
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.useDistroLogo = valueUseDistroLogo
-        return settings
-      }
-
-      NCheckbox {
-        label: "Use distro logo instead of icon"
-        checked: valueUseDistroLogo
-        onToggled: checked => valueUseDistroLogo = checked
-      }
-    }
-  }
-
-  // Brightness settings component
-  Component {
-    id: brightnessSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local state
-      property bool valueAlwaysShowPercentage: settingsPopup.widgetData.alwaysShowPercentage
-                                               !== undefined ? settingsPopup.widgetData.alwaysShowPercentage : BarWidgetRegistry.widgetMetadata["Brightness"].alwaysShowPercentage
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.alwaysShowPercentage = valueAlwaysShowPercentage
-        return settings
-      }
-
-      NCheckbox {
-        label: "Always show percentage"
-        checked: valueAlwaysShowPercentage
-        onToggled: checked => valueAlwaysShowPercentage = checked
-      }
-    }
-  }
-
-  // NotificationHistory settings component
-  Component {
-    id: notificationHistorySettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local state
-      property bool valueShowUnreadBadge: settingsPopup.widgetData.showUnreadBadge
-                                          !== undefined ? settingsPopup.widgetData.showUnreadBadge : BarWidgetRegistry.widgetMetadata["NotificationHistory"].showUnreadBadge
-      property bool valueHideWhenZero: settingsPopup.widgetData.hideWhenZero
-                                       !== undefined ? settingsPopup.widgetData.hideWhenZero : BarWidgetRegistry.widgetMetadata["NotificationHistory"].hideWhenZero
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.showUnreadBadge = valueShowUnreadBadge
-        settings.hideWhenZero = valueHideWhenZero
-        return settings
-      }
-
-      NCheckbox {
-        label: "Show unread badge"
-        checked: valueShowUnreadBadge
-        onToggled: checked => valueShowUnreadBadge = checked
-      }
-
-      NCheckbox {
-        label: "Hide badge when zero"
-        checked: valueHideWhenZero
-        onToggled: checked => valueHideWhenZero = checked
-      }
-    }
-  }
-
-  // Microphone settings component
-  Component {
-    id: microphoneSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local state
-      property bool valueAlwaysShowPercentage: settingsPopup.widgetData.alwaysShowPercentage
-                                               !== undefined ? settingsPopup.widgetData.alwaysShowPercentage : BarWidgetRegistry.widgetMetadata["Microphone"].alwaysShowPercentage
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.alwaysShowPercentage = valueAlwaysShowPercentage
-        return settings
-      }
-
-      NCheckbox {
-        label: "Always show percentage"
-        checked: valueAlwaysShowPercentage
-        onToggled: checked => valueAlwaysShowPercentage = checked
-      }
-    }
-  }
-
-  // Volume settings component
-  Component {
-    id: volumeSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local state
-      property bool valueAlwaysShowPercentage: settingsPopup.widgetData.alwaysShowPercentage
-                                               !== undefined ? settingsPopup.widgetData.alwaysShowPercentage : BarWidgetRegistry.widgetMetadata["Volume"].alwaysShowPercentage
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.alwaysShowPercentage = valueAlwaysShowPercentage
-        return settings
-      }
-
-      NCheckbox {
-        label: "Always show percentage"
-        checked: valueAlwaysShowPercentage
-        onToggled: checked => valueAlwaysShowPercentage = checked
-      }
-    }
-  }
-
-  // Clock settings component
-  Component {
-    id: clockSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local state
-      property bool valueShowDate: settingsPopup.widgetData.showDate
-                                   !== undefined ? settingsPopup.widgetData.showDate : BarWidgetRegistry.widgetMetadata["Clock"].showDate
-      property bool valueUse12h: settingsPopup.widgetData.use12HourClock
-                                 !== undefined ? settingsPopup.widgetData.use12HourClock : BarWidgetRegistry.widgetMetadata["Clock"].use12HourClock
-      property bool valueShowSeconds: settingsPopup.widgetData.showSeconds
-                                      !== undefined ? settingsPopup.widgetData.showSeconds : BarWidgetRegistry.widgetMetadata["Clock"].showSeconds
-      property bool valueReverseDayMonth: settingsPopup.widgetData.reverseDayMonth
-                                          !== undefined ? settingsPopup.widgetData.reverseDayMonth : BarWidgetRegistry.widgetMetadata["Clock"].reverseDayMonth
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.showDate = valueShowDate
-        settings.use12HourClock = valueUse12h
-        settings.showSeconds = valueShowSeconds
-        settings.reverseDayMonth = valueReverseDayMonth
-        return settings
-      }
-
-      NCheckbox {
-        label: "Show date next to time"
-        checked: valueShowDate
-        onToggled: checked => valueShowDate = checked
-      }
-
-      NCheckbox {
-        label: "Use 12-hour clock"
-        checked: valueUse12h
-        onToggled: checked => valueUse12h = checked
-      }
-
-      NCheckbox {
-        label: "Show seconds"
-        checked: valueShowSeconds
-        onToggled: checked => valueShowSeconds = checked
-      }
-
-      NCheckbox {
-        label: "Reverse day and month"
-        checked: valueReverseDayMonth
-        onToggled: checked => valueReverseDayMonth = checked
-      }
-    }
-  }
-
-  // MediaMini settings component
-  Component {
-    id: mediaMiniSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local state
-      property bool valueShowAlbumArt: settingsPopup.widgetData.showAlbumArt
-                                       !== undefined ? settingsPopup.widgetData.showAlbumArt : BarWidgetRegistry.widgetMetadata["MediaMini"].showAlbumArt
-      property bool valueShowVisualizer: settingsPopup.widgetData.showVisualizer
-                                         !== undefined ? settingsPopup.widgetData.showVisualizer : BarWidgetRegistry.widgetMetadata["MediaMini"].showVisualizer
-      property string valueVisualizerType: settingsPopup.widgetData.visualizerType
-                                           || BarWidgetRegistry.widgetMetadata["MediaMini"].visualizerType
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.showAlbumArt = valueShowAlbumArt
-        settings.showVisualizer = valueShowVisualizer
-        settings.visualizerType = valueVisualizerType
-        return settings
-      }
-
-      NCheckbox {
-        label: "Show album art"
-        checked: valueShowAlbumArt
-        onToggled: checked => valueShowAlbumArt = checked
-      }
-
-      NCheckbox {
-        label: "Show visualizer"
-        checked: valueShowVisualizer
-        onToggled: checked => valueShowVisualizer = checked
-      }
-
-      NComboBox {
-        label: "Visualizer type"
-        description: "Select the visualizer style"
-        preferredWidth: 180 * scaling
-        model: ListModel {
-          ListElement {
-            key: "linear"
-            name: "Linear"
-          }
-          ListElement {
-            key: "mirrored"
-            name: "Mirrored"
-          }
-          ListElement {
-            key: "wave"
-            name: "Wave"
-          }
-        }
-        currentKey: valueVisualizerType
-        onSelected: key => valueVisualizerType = key
-      }
-    }
-  }
-
-  // ActiveWindow settings component
-  Component {
-    id: activeWindowSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local, editable state
-      property bool valueShowIcon: settingsPopup.widgetData.showIcon
-                                   !== undefined ? settingsPopup.widgetData.showIcon : BarWidgetRegistry.widgetMetadata["ActiveWindow"].showIcon
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.showIcon = valueShowIcon
-        return settings
-      }
-
-      NCheckbox {
-        id: showIcon
-        Layout.fillWidth: true
-        label: "Show app icon"
-        checked: valueShowIcon
-        onToggled: checked => valueShowIcon = checked
-      }
-    }
-  }
-
-  // CustomButton settings component
-  Component {
-    id: customButtonSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.icon = iconInput.text
-        settings.leftClickExec = leftClickExecInput.text
-        settings.rightClickExec = rightClickExecInput.text
-        settings.middleClickExec = middleClickExecInput.text
-        return settings
-      }
-
-      // Icon setting
-      NTextInput {
-        id: iconInput
-        Layout.fillWidth: true
-        Layout.bottomMargin: Style.marginXL * scaling
-        label: "Icon Name"
-        description: "Use Material Icon names from the icon set."
-        text: settingsPopup.widgetData.icon || ""
-        placeholderText: "Enter icon name (e.g., favorite, home, settings)"
-      }
-
-      NTextInput {
-        id: leftClickExecInput
-        Layout.fillWidth: true
-        label: "Left Click Command"
-        description: "Command or application to run when left clicked."
-        text: settingsPopup.widgetData.leftClickExec || ""
-        placeholderText: "Enter command to execute (app or custom script)"
-      }
-
-      NTextInput {
-        id: rightClickExecInput
-        Layout.fillWidth: true
-        label: "Right Click Command"
-        description: "Command or application to run when right clicked."
-        text: settingsPopup.widgetData.rightClickExec || ""
-        placeholderText: "Enter command to execute (app or custom script)"
-      }
-
-      NTextInput {
-        id: middleClickExecInput
-        Layout.fillWidth: true
-        label: "Middle Click Command"
-        description: "Command or application to run when middle clicked."
-        text: settingsPopup.widgetData.middleClickExec || ""
-        placeholderText: "Enter command to execute (app or custom script)"
-      }
-    }
-  }
-
-  // Spacer settings component
-  Component {
-    id: spacerSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.width = parseInt(widthInput.text) || 20
-        return settings
-      }
-
-      NTextInput {
-        id: widthInput
-        Layout.fillWidth: true
-        label: "Width (pixels)"
-        description: "Width of the spacer in pixels."
-        text: settingsPopup.widgetData.width || "20"
-        placeholderText: "Enter width in pixels"
-      }
-    }
-  }
-
-  // Workspace settings component
-  Component {
-    id: workspaceSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.labelMode = labelModeCombo.currentKey
-        return settings
-      }
-
-      NComboBox {
-        id: labelModeCombo
-        Layout.fillWidth: true
-        preferredWidth: 180 * scaling
-        label: "Label Mode"
-        description: "Choose how to label workspace pills."
-        model: ListModel {
-          ListElement {
-            key: "none"
-            name: "None"
-          }
-          ListElement {
-            key: "index"
-            name: "Index"
-          }
-          ListElement {
-            key: "name"
-            name: "Name"
-          }
-        }
-        currentKey: settingsPopup.widgetData.labelMode || BarWidgetRegistry.widgetMetadata["Workspace"].labelMode
-        onSelected: key => labelModeCombo.currentKey = key
-      }
-    }
-  }
-
-  // SystemMonitor settings component
-  Component {
-    id: systemMonitorSettings
-
-    ColumnLayout {
-      spacing: Style.marginM * scaling
-
-      // Local, editable state for checkboxes
-      property bool valueShowCpuUsage: settingsPopup.widgetData.showCpuUsage
-                                       !== undefined ? settingsPopup.widgetData.showCpuUsage : BarWidgetRegistry.widgetMetadata["SystemMonitor"].showCpuUsage
-      property bool valueShowCpuTemp: settingsPopup.widgetData.showCpuTemp
-                                      !== undefined ? settingsPopup.widgetData.showCpuTemp : BarWidgetRegistry.widgetMetadata["SystemMonitor"].showCpuTemp
-      property bool valueShowMemoryUsage: settingsPopup.widgetData.showMemoryUsage
-                                          !== undefined ? settingsPopup.widgetData.showMemoryUsage : BarWidgetRegistry.widgetMetadata["SystemMonitor"].showMemoryUsage
-      property bool valueShowNetworkStats: settingsPopup.widgetData.showNetworkStats
-                                           !== undefined ? settingsPopup.widgetData.showNetworkStats : BarWidgetRegistry.widgetMetadata["SystemMonitor"].showNetworkStats
-
-      function saveSettings() {
-        var settings = Object.assign({}, settingsPopup.widgetData)
-        settings.showCpuUsage = valueShowCpuUsage
-        settings.showCpuTemp = valueShowCpuTemp
-        settings.showMemoryUsage = valueShowMemoryUsage
-        settings.showNetworkStats = valueShowNetworkStats
-        return settings
-      }
-
-      NCheckbox {
-        id: showCpuUsage
-        Layout.fillWidth: true
-        label: "CPU usage"
-        checked: valueShowCpuUsage
-        onToggled: checked => valueShowCpuUsage = checked
-      }
-
-      NCheckbox {
-        id: showCpuTemp
-        Layout.fillWidth: true
-        label: "CPU temperature"
-        checked: valueShowCpuTemp
-        onToggled: checked => valueShowCpuTemp = checked
-      }
-
-      NCheckbox {
-        id: showMemoryUsage
-        Layout.fillWidth: true
-        label: "Memory usage"
-        checked: valueShowMemoryUsage
-        onToggled: checked => valueShowMemoryUsage = checked
-      }
-
-      NCheckbox {
-        id: showNetworkStats
-        Layout.fillWidth: true
-        label: "Network traffic"
-        checked: valueShowNetworkStats
-        onToggled: checked => valueShowNetworkStats = checked
-      }
-    }
-  }
-}

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -4,7 +4,7 @@ import QtQuick.Layouts
 import qs.Commons
 import qs.Services
 import qs.Widgets
-import qs.Modules.SettingsPanel.Extras
+import qs.Modules.SettingsPanel.Bar
 
 ColumnLayout {
   id: root
@@ -70,14 +70,6 @@ ColumnLayout {
         }
       }
     }
-
-    // Keep Battery toggle here for now (cannot test per-widget yet)
-    NToggle {
-      label: "Show Battery Percentage"
-      description: "Display battery percentage at all times."
-      checked: Settings.data.bar.alwaysShowBatteryPercentage
-      onToggled: checked => Settings.data.bar.alwaysShowBatteryPercentage = checked
-    }
   }
 
   NDivider {