consistency in top bar tab of settings

CLAUDE.md

@@ -62,6 +62,7 @@ quickshell -p shell.qml
 qs -p .
 
 # Code formatting and linting
+./qmlformat-all.sh       # Format all QML files using project script
 qmlformat -i **/*.qml    # Format all QML files in place
 qmllint **/*.qml         # Lint all QML files for syntax errors
 ```
@@ -74,27 +75,43 @@ The shell follows a clean modular architecture reduced from 4,830 lines to ~250
 
 ```
 shell.qml           # Main entry point (minimal orchestration)
-├── Common/         # Shared resources
+├── Common/         # Shared resources (12 files)
 │   ├── Theme.qml   # Material Design 3 theme singleton
-│   └── Utilities.js # Shared utility functions
+│   ├── SettingsData.qml # User preferences and configuration
-├── Services/       # System integration singletons
+│   ├── SessionData.qml # Session state management
+│   ├── Colors.qml  # Dynamic color scheme
+│   └── [8 more utility files]
+├── Services/       # System integration singletons (20 files)
 │   ├── AudioService.qml
 │   ├── NetworkService.qml
+│   ├── BluetoothService.qml
 │   ├── BrightnessService.qml
-│   └── [9 total services]
+│   ├── NotificationService.qml
-├── Modules/        # UI components
+│   ├── WeatherService.qml
-│   ├── TopBar.qml
+│   └── [14 more services]
-│   ├── AppLauncher.qml
+├── Modules/        # UI components (93 files)
-│   ├── ControlCenter.qml
+│   ├── TopBar/     # Panel components (13 files)
-│   └── [18 total modules]
+│   ├── ControlCenter/ # System controls (13 files)
-└── Widgets/        # Reusable UI controls
+│   ├── Notifications/ # Notification system (12 files)
+│   ├── AppDrawer/  # Application launcher (3 files)
+│   ├── Settings/   # Configuration interface (11 files)
+│   ├── ProcessList/ # System monitoring (8 files)
+│   ├── Dock/       # Application dock (6 files)
+│   ├── Lock/       # Screen lock system (4 files)
+│   └── [23 more module files]
+├── Modals/         # Full-screen overlays (10 files)
+│   ├── SettingsModal.qml
+│   ├── ClipboardHistoryModal.qml
+│   ├── ProcessListModal.qml
+│   └── [7 more modals]
+└── Widgets/        # Reusable UI controls (19 files)
     ├── DankIcon.qml
     ├── DankSlider.qml
     ├── DankToggle.qml
     ├── DankTabBar.qml
     ├── DankGridView.qml
     ├── DankListView.qml
-    └── [6 total widgets]
+    └── [13 more widgets]
 ```
 
 ### Component Organization
@@ -112,21 +129,39 @@ shell.qml           # Main entry point (minimal orchestration)
 3. **Services/** - System integration singletons
    - **Pattern**: All services use `Singleton` type with `id: root`
    - **Independence**: No cross-service dependencies
-   - **Examples**: AudioService, NetworkService, BrightnessService, WeatherService
+   - **Examples**: AudioService, NetworkService, BluetoothService, BrightnessService, WeatherService, NotificationService, CalendarService, BatteryService, NiriService, MprisController
    - Services handle system commands, state management, and hardware integration
 
-4. **Modules/** - UI components
+4. **Modules/** - UI components (93 files)
-   - **Full-screen components**: AppLauncher, ClipboardHistoryModal, ControlCenter
+   - **TopBar/**: Panel components with workspace switching, system indicators, media controls
-   - **Panel components**: TopBar, SystemTray, NotificationPopup
+   - **ControlCenter/**: System controls for WiFi, Bluetooth, audio, display settings
-   - **Layout components**: WorkspaceSwitcher
+   - **Notifications/**: Complete notification system with center, popups, and keyboard navigation
+   - **AppDrawer/**: Application launcher with grid/list views and category filtering
+   - **Settings/**: Comprehensive configuration interface with multiple tabs
+   - **ProcessList/**: System monitoring with process management and performance metrics
+   - **Dock/**: Application dock with running apps and window management
+   - **Lock/**: Screen lock system with authentication
+   - **CentcomCenter/**: Calendar, weather, and media widgets
 
-5. **Widgets/** - Reusable UI controls
+5. **Modals/** - Full-screen overlays (10 files)
+   - Modal system for settings, clipboard history, file browser, network info, power menu
+   - Unified modal management with consistent styling and keyboard navigation
+
+6. **Widgets/** - Reusable UI controls (19 files)
    - **DankIcon**: Centralized icon component with Material Design font integration
    - **DankSlider**: Enhanced slider with animations and smart detection
    - **DankToggle**: Consistent toggle switch component
    - **DankTabBar**: Unified tab bar implementation
    - **DankGridView**: Reusable grid view with adaptive columns
    - **DankListView**: Reusable list view with configurable styling
+   - **DankTextField**: Styled text input with validation
+   - **DankDropdown**: Dropdown selection component
+   - **DankPopout**: Base popout component for overlays
+   - **StateLayer**: Material Design 3 interaction states
+   - **StyledRect/StyledText**: Themed base components
+   - **CachingImage**: Optimized image loading with caching
+   - **DankLocationSearch**: Location picker with search
+   - **SystemLogo**: Animated system branding component
 
 ### Key Architectural Patterns
 
@@ -183,7 +218,7 @@ shell.qml           # Main entry point (minimal orchestration)
    - `id` should be the first property
    - Properties before signal handlers before child components
    - Prefer property bindings over imperative code
-   - **IMPORTANT**: Be very conservative with comments - add comments only when absolutely necessary for understanding complex logic
+   - **CRITICAL**: NEVER add comments unless absolutely essential for complex logic understanding. Code should be self-documenting through clear naming and structure. Comments are a code smell indicating unclear implementation.
 
 2. **Naming Conventions**:
    - **Services**: Use `Singleton` type with `id: root`
@@ -243,7 +278,14 @@ shell.qml           # Main entry point (minimal orchestration)
 
 ### Component Development Patterns
 
-1. **Smart Feature Detection**:
+1. **Code Reuse - Search Before Writing**:
+   - **ALWAYS** search the codebase for existing functions before writing new ones
+   - Use `Grep` or `Glob` tools to find existing implementations (e.g., search for "getWifiIcon", "getDeviceIcon")
+   - Many utility functions already exist in Services/ and Common/ - reuse them instead of duplicating
+   - Examples of existing utility functions: `Theme.getBatteryIcon()`, `BluetoothService.getDeviceIcon()`, `WeatherService.getWeatherIcon()`
+   - If similar functionality exists, extend or refactor rather than duplicate
+
+2. **Smart Feature Detection**:
    ```qml
    // In services - detect capabilities
    property bool brightnessAvailable: false
@@ -256,12 +298,12 @@ shell.qml           # Main entry point (minimal orchestration)
    }
    ```
 
-2. **Reusable Components**:
+3. **Reusable Components**:
    - Create reusable widgets for common patterns (like DankSlider)
    - Use configurable properties for different use cases
    - Include proper signal handling with unique names (avoid `valueChanged`)
 
-3. **Service Integration**:
+4. **Service Integration**:
    - Services expose properties and functions
    - Modules and Widgets bind to service properties for reactive updates
    - Use service functions for actions: `ServiceName.performAction(value)`
@@ -305,7 +347,7 @@ The shell uses Quickshell's `Variants` pattern for multi-monitor support:
 
 When modifying the shell:
 1. **Test changes**: `qs -p .` (automatic reload on file changes)
-2. **Code quality**: Run `qmlformat -i **/*.qml` and `qmllint **/*.qml` to ensure proper formatting and syntax
+2. **Code quality**: Run `./qmlformat-all.sh` or `qmlformat -i **/*.qml` and `qmllint **/*.qml` to ensure proper formatting and syntax
 3. **Performance**: Ensure animations remain smooth (60 FPS target)
 4. **Theming**: Use `Theme.propertyName` for Material Design 3 consistency
 5. **Wayland compatibility**: Test on Wayland session
@@ -396,6 +438,8 @@ When modifying the shell:
 
 ### Best Practices Summary
 
+- **Code Reuse**: ALWAYS search existing codebase before writing new functions - avoid duplication at all costs
+- **No Comments**: Code should be self-documenting - comments indicate poor naming/structure
 - **Modularity**: Keep components focused and independent
 - **Reusability**: Create reusable components for common patterns using Widgets/
 - **Responsiveness**: Use property bindings for reactive UI
@@ -405,6 +449,9 @@ When modifying the shell:
 - **Icon Management**: Use `DankIcon` for all icons instead of manual Text components
 - **Widget System**: Leverage existing widgets (DankSlider, DankToggle, etc.) for consistency
 - **NO WRAPPER HELL**: Avoid creating unnecessary wrapper functions - bind directly to underlying APIs for better reactivity and performance
+- **Function Discovery**: Use grep/search tools to find existing utility functions before implementing new ones
+- **Modern QML Patterns**: Leverage new widgets like DankTextField, DankDropdown, CachingImage
+- **Structured Organization**: Follow the established Services/Modules/Widgets/Modals separation
 
 ### Common Widget Patterns
 
@@ -414,3 +461,29 @@ When modifying the shell:
 4. **Tab Bars**: Use `DankTabBar` for tabbed interfaces
 5. **Lists**: Use `DankListView` for scrollable lists
 6. **Grids**: Use `DankGridView` for grid layouts
+7. **Text Fields**: Use `DankTextField` for text input with validation
+8. **Dropdowns**: Use `DankDropdown` for selection menus
+9. **Popouts**: Use `DankPopout` as base for overlay components
+10. **Images**: Use `CachingImage` for optimized image loading
+
+### Essential Utility Functions
+
+Before writing new utility functions, check these existing ones:
+
+**Theme.qml utilities:**
+- `getBatteryIcon(level, isCharging, batteryAvailable)` - Battery status icons
+- `getPowerProfileIcon(profile)` - Power profile indicators
+
+**Service utilities:**
+- `BluetoothService.getDeviceIcon(device)` - Bluetooth device type icons
+- `BluetoothService.getSignalIcon(device)` - Signal strength indicators
+- `WeatherService.getWeatherIcon(code)` - Weather condition icons
+- `AppSearchService.getCategoryIcon(category)` - Application category icons
+- `DgopService.getProcessIcon(command)` - Process type icons
+- `SettingsData.getWorkspaceNameIcon(workspaceName)` - Workspace icons
+
+**Always search for existing functions using:**
+```bash
+grep -r "function.*get.*Icon" Services/ Common/
+grep -r "function.*" path/to/relevant/directory/
+```

Modules/Settings/PersonalizationTab.qml

@@ -879,6 +879,68 @@ Item {
 
             }
 
+            // Corner Radius
+            StyledRect {
+                width: parent.width
+                height: cornerRadiusSection.implicitHeight + Theme.spacingL * 2
+                radius: Theme.cornerRadius
+                color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+                border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                border.width: 1
+
+                Column {
+                    id: cornerRadiusSection
+
+                    anchors.fill: parent
+                    anchors.margins: Theme.spacingL
+                    spacing: Theme.spacingM
+
+                    Row {
+                        width: parent.width
+                        spacing: Theme.spacingM
+
+                        DankIcon {
+                            name: "rounded_corner"
+                            size: Theme.iconSize
+                            color: Theme.primary
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+
+                        StyledText {
+                            text: "Corner Radius"
+                            font.pixelSize: Theme.fontSizeLarge
+                            font.weight: Font.Medium
+                            color: Theme.surfaceText
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+
+                    Column {
+                        width: parent.width
+                        spacing: Theme.spacingS
+
+                        StyledText {
+                            text: "Bar & Widget Corner Roundness"
+                            font.pixelSize: Theme.fontSizeSmall
+                            color: Theme.surfaceText
+                            font.weight: Font.Medium
+                        }
+
+                        DankSlider {
+                            width: parent.width
+                            height: 24
+                            value: SettingsData.cornerRadius
+                            minimum: 0
+                            maximum: 32
+                            unit: ""
+                            showValue: true
+                            onSliderValueChanged: (newValue) => {
+                                SettingsData.setCornerRadius(newValue);
+                            }
+                        }
+                    }
+                }
+            }
 
         }
 

Modules/Settings/TopBarTab.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import qs.Common
 import qs.Services
 import qs.Widgets
@@ -512,326 +513,6 @@ Item {
 
       }
 
-      Row {
-        width: parent.width
-        spacing: Theme.spacingM
-
-        DankIcon {
-          name: "widgets"
-          size: Theme.iconSize
-          color: Theme.primary
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        StyledText {
-          text: "Widget Management"
-          font.pixelSize: Theme.fontSizeLarge
-          font.weight: Font.Medium
-          color: Theme.surfaceText
-          anchors.verticalCenter: parent.verticalCenter
-        }
-
-        Item {
-          width: parent.width - 400
-          height: 1
-        }
-
-        Rectangle {
-          width: 80
-          height: 28
-          radius: Theme.cornerRadius
-          color: resetArea.containsMouse ? Theme.surfacePressed : Theme.surfaceVariant
-          anchors.verticalCenter: parent.verticalCenter
-          border.width: 1
-          border.color: resetArea.containsMouse ? Theme.outline : Qt.rgba(
-                                                    Theme.outline.r,
-                                                    Theme.outline.g,
-                                                    Theme.outline.b, 0.5)
-
-          Row {
-            anchors.centerIn: parent
-            spacing: Theme.spacingXS
-
-            DankIcon {
-              name: "refresh"
-              size: 14
-              color: Theme.surfaceText
-              anchors.verticalCenter: parent.verticalCenter
-            }
-
-            StyledText {
-              text: "Reset"
-              font.pixelSize: Theme.fontSizeSmall
-              font.weight: Font.Medium
-              color: Theme.surfaceText
-              anchors.verticalCenter: parent.verticalCenter
-            }
-          }
-
-          MouseArea {
-            id: resetArea
-
-            anchors.fill: parent
-            hoverEnabled: true
-            cursorShape: Qt.PointingHandCursor
-            onClicked: {
-              SettingsData.setTopBarLeftWidgets(defaultLeftWidgets)
-              SettingsData.setTopBarCenterWidgets(defaultCenterWidgets)
-              SettingsData.setTopBarRightWidgets(defaultRightWidgets)
-            }
-          }
-
-          Behavior on color {
-            ColorAnimation {
-              duration: Theme.shortDuration
-              easing.type: Theme.standardEasing
-            }
-          }
-
-          Behavior on border.color {
-            ColorAnimation {
-              duration: Theme.shortDuration
-              easing.type: Theme.standardEasing
-            }
-          }
-        }
-      }
-
-      Rectangle {
-        width: parent.width
-        height: messageText.contentHeight + Theme.spacingM * 2
-        radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g,
-                       Theme.surfaceVariant.b, 0.3)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g,
-                              Theme.outline.b, 0.2)
-        border.width: 1
-
-        StyledText {
-          id: messageText
-
-          anchors.centerIn: parent
-          text: "Drag widgets to reorder within sections. Use the eye icon to hide/show widgets (maintains spacing), or X to remove them completely."
-          font.pixelSize: Theme.fontSizeSmall
-          color: Theme.outline
-          width: parent.width - Theme.spacingM * 2
-          wrapMode: Text.WordWrap
-        }
-      }
-
-      Column {
-        width: parent.width
-        spacing: Theme.spacingL
-
-        WidgetsTabSection {
-          width: parent.width
-          title: "Left Section"
-          titleIcon: "format_align_left"
-          sectionId: "left"
-          allWidgets: topBarTab.baseWidgetDefinitions
-          items: topBarTab.getItemsForSection("left")
-          onItemEnabledChanged: (sectionId, itemId, enabled) => {
-                                  topBarTab.handleItemEnabledChanged(sectionId,
-                                                                      itemId,
-                                                                      enabled)
-                                }
-          onItemOrderChanged: newOrder => {
-                                topBarTab.handleItemOrderChanged("left",
-                                                                  newOrder)
-                              }
-          onAddWidget: sectionId => {
-                         widgetSelectionPopup.allWidgets = topBarTab.baseWidgetDefinitions
-                         widgetSelectionPopup.targetSection = sectionId
-                         widgetSelectionPopup.safeOpen()
-                       }
-          onRemoveWidget: (sectionId, widgetIndex) => {
-                            topBarTab.removeWidgetFromSection(sectionId,
-                                                               widgetIndex)
-                          }
-          onSpacerSizeChanged: (sectionId, itemId, newSize) => {
-                                 topBarTab.handleSpacerSizeChanged(sectionId,
-                                                                    itemId,
-                                                                    newSize)
-                               }
-          onCompactModeChanged: (widgetId, value) => {
-                                  if (widgetId === "clock") {
-                                    SettingsData.setClockCompactMode(value)
-                                  } else if (widgetId === "music") {
-                                    SettingsData.setMediaSize(value)
-                                  } else if (widgetId === "focusedWindow") {
-                                    SettingsData.setFocusedWindowCompactMode(value)
-                                  } else if (widgetId === "runningApps") {
-                                    SettingsData.setRunningAppsCompactMode(value)
-                                  }
-                                }
-          onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
-                                   topBarTab.handleGpuSelectionChanged(
-                                     sectionId, widgetIndex, selectedIndex)
-                                 }
-        }
-
-        WidgetsTabSection {
-          width: parent.width
-          title: "Center Section"
-          titleIcon: "format_align_center"
-          sectionId: "center"
-          allWidgets: topBarTab.baseWidgetDefinitions
-          items: topBarTab.getItemsForSection("center")
-          onItemEnabledChanged: (sectionId, itemId, enabled) => {
-                                  topBarTab.handleItemEnabledChanged(sectionId,
-                                                                      itemId,
-                                                                      enabled)
-                                }
-          onItemOrderChanged: newOrder => {
-                                topBarTab.handleItemOrderChanged("center",
-                                                                  newOrder)
-                              }
-          onAddWidget: sectionId => {
-                         widgetSelectionPopup.allWidgets = topBarTab.baseWidgetDefinitions
-                         widgetSelectionPopup.targetSection = sectionId
-                         widgetSelectionPopup.safeOpen()
-                       }
-          onRemoveWidget: (sectionId, widgetIndex) => {
-                            topBarTab.removeWidgetFromSection(sectionId,
-                                                               widgetIndex)
-                          }
-          onSpacerSizeChanged: (sectionId, itemId, newSize) => {
-                                 topBarTab.handleSpacerSizeChanged(sectionId,
-                                                                    itemId,
-                                                                    newSize)
-                               }
-          onCompactModeChanged: (widgetId, value) => {
-                                  if (widgetId === "clock") {
-                                    SettingsData.setClockCompactMode(value)
-                                  } else if (widgetId === "music") {
-                                    SettingsData.setMediaSize(value)
-                                  } else if (widgetId === "focusedWindow") {
-                                    SettingsData.setFocusedWindowCompactMode(value)
-                                  } else if (widgetId === "runningApps") {
-                                    SettingsData.setRunningAppsCompactMode(value)
-                                  }
-                                }
-          onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
-                                   topBarTab.handleGpuSelectionChanged(
-                                     sectionId, widgetIndex, selectedIndex)
-                                 }
-        }
-
-        WidgetsTabSection {
-          width: parent.width
-          title: "Right Section"
-          titleIcon: "format_align_right"
-          sectionId: "right"
-          allWidgets: topBarTab.baseWidgetDefinitions
-          items: topBarTab.getItemsForSection("right")
-          onItemEnabledChanged: (sectionId, itemId, enabled) => {
-                                  topBarTab.handleItemEnabledChanged(sectionId,
-                                                                      itemId,
-                                                                      enabled)
-                                }
-          onItemOrderChanged: newOrder => {
-                                topBarTab.handleItemOrderChanged("right",
-                                                                  newOrder)
-                              }
-          onAddWidget: sectionId => {
-                         widgetSelectionPopup.allWidgets = topBarTab.baseWidgetDefinitions
-                         widgetSelectionPopup.targetSection = sectionId
-                         widgetSelectionPopup.safeOpen()
-                       }
-          onRemoveWidget: (sectionId, widgetIndex) => {
-                            topBarTab.removeWidgetFromSection(sectionId,
-                                                               widgetIndex)
-                          }
-          onSpacerSizeChanged: (sectionId, itemId, newSize) => {
-                                 topBarTab.handleSpacerSizeChanged(sectionId,
-                                                                    itemId,
-                                                                    newSize)
-                               }
-          onCompactModeChanged: (widgetId, value) => {
-                                  if (widgetId === "clock") {
-                                    SettingsData.setClockCompactMode(value)
-                                  } else if (widgetId === "music") {
-                                    SettingsData.setMediaSize(value)
-                                  } else if (widgetId === "focusedWindow") {
-                                    SettingsData.setFocusedWindowCompactMode(value)
-                                  } else if (widgetId === "runningApps") {
-                                    SettingsData.setRunningAppsCompactMode(value)
-                                  }
-                                }
-          onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
-                                   topBarTab.handleGpuSelectionChanged(
-                                     sectionId, widgetIndex, selectedIndex)
-                                 }
-        }
-      }
-
-      // Corner Radius
-      StyledRect {
-        width: parent.width
-        height: cornerRadiusSection.implicitHeight + Theme.spacingL * 2
-        radius: Theme.cornerRadius
-        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
-        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
-        border.width: 1
-
-        Column {
-          id: cornerRadiusSection
-
-          anchors.fill: parent
-          anchors.margins: Theme.spacingL
-          spacing: Theme.spacingM
-
-          Row {
-            width: parent.width
-            spacing: Theme.spacingM
-
-            DankIcon {
-              name: "rounded_corner"
-              size: Theme.iconSize
-              color: Theme.primary
-              anchors.verticalCenter: parent.verticalCenter
-            }
-
-            StyledText {
-              text: "Corner Radius"
-              font.pixelSize: Theme.fontSizeLarge
-              font.weight: Font.Medium
-              color: Theme.surfaceText
-              anchors.verticalCenter: parent.verticalCenter
-            }
-
-          }
-
-          Column {
-            width: parent.width
-            spacing: Theme.spacingS
-
-            StyledText {
-              text: "Bar & Widget Corner Roundness"
-              font.pixelSize: Theme.fontSizeSmall
-              color: Theme.surfaceText
-              font.weight: Font.Medium
-            }
-
-            DankSlider {
-              width: parent.width
-              height: 24
-              value: SettingsData.cornerRadius
-              minimum: 0
-              maximum: 32
-              unit: ""
-              showValue: true
-              onSliderValueChanged: (newValue) => {
-                SettingsData.setCornerRadius(newValue);
-              }
-            }
-
-          }
-
-        }
-
-      }
-
       // Spacing
       StyledRect {
         width: parent.width
@@ -908,6 +589,302 @@ Item {
         }
 
       }
+
+      // Widget Management Section
+      StyledRect {
+        width: parent.width
+        height: widgetManagementSection.implicitHeight + Theme.spacingL * 2
+        radius: Theme.cornerRadius
+        color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+        border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+        border.width: 1
+
+        Column {
+          id: widgetManagementSection
+
+          anchors.fill: parent
+          anchors.margins: Theme.spacingL
+          spacing: Theme.spacingM
+
+          RowLayout {
+            width: parent.width
+            spacing: Theme.spacingM
+
+            DankIcon {
+              id: widgetIcon
+              name: "widgets"
+              size: Theme.iconSize
+              color: Theme.primary
+              Layout.alignment: Qt.AlignVCenter
+            }
+
+            StyledText {
+              id: widgetTitle
+              text: "Widget Management"
+              font.pixelSize: Theme.fontSizeLarge
+              font.weight: Font.Medium
+              color: Theme.surfaceText
+              Layout.alignment: Qt.AlignVCenter
+            }
+
+            Item {
+              height: 1
+              Layout.fillWidth: true
+            }
+
+            Rectangle {
+              id: resetButton
+              width: 80
+              height: 28
+              radius: Theme.cornerRadius
+              color: resetArea.containsMouse ? Theme.surfacePressed : Theme.surfaceVariant
+              Layout.alignment: Qt.AlignVCenter
+              border.width: 1
+              border.color: resetArea.containsMouse ? Theme.outline : Qt.rgba(
+                                                        Theme.outline.r,
+                                                        Theme.outline.g,
+                                                        Theme.outline.b, 0.5)
+
+              Row {
+                anchors.centerIn: parent
+                spacing: Theme.spacingXS
+
+                DankIcon {
+                  name: "refresh"
+                  size: 14
+                  color: Theme.surfaceText
+                  anchors.verticalCenter: parent.verticalCenter
+                }
+
+                StyledText {
+                  text: "Reset"
+                  font.pixelSize: Theme.fontSizeSmall
+                  font.weight: Font.Medium
+                  color: Theme.surfaceText
+                  anchors.verticalCenter: parent.verticalCenter
+                }
+              }
+
+              MouseArea {
+                id: resetArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                  SettingsData.setTopBarLeftWidgets(defaultLeftWidgets)
+                  SettingsData.setTopBarCenterWidgets(defaultCenterWidgets)
+                  SettingsData.setTopBarRightWidgets(defaultRightWidgets)
+                }
+              }
+
+              Behavior on color {
+                ColorAnimation {
+                  duration: Theme.shortDuration
+                  easing.type: Theme.standardEasing
+                }
+              }
+
+              Behavior on border.color {
+                ColorAnimation {
+                  duration: Theme.shortDuration
+                  easing.type: Theme.standardEasing
+                }
+              }
+            }
+          }
+
+          StyledText {
+            width: parent.width
+            text: "Drag widgets to reorder within sections. Use the eye icon to hide/show widgets (maintains spacing), or X to remove them completely."
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceVariantText
+            wrapMode: Text.WordWrap
+          }
+        }
+      }
+
+      Column {
+        width: parent.width
+        spacing: Theme.spacingL
+
+        // Left Section
+        StyledRect {
+          width: parent.width
+          height: leftSection.implicitHeight + Theme.spacingL * 2
+          radius: Theme.cornerRadius
+          color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+          border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+          border.width: 1
+
+          WidgetsTabSection {
+            id: leftSection
+            anchors.fill: parent
+            anchors.margins: Theme.spacingL
+            title: "Left Section"
+            titleIcon: "format_align_left"
+            sectionId: "left"
+            allWidgets: topBarTab.baseWidgetDefinitions
+            items: topBarTab.getItemsForSection("left")
+            onItemEnabledChanged: (sectionId, itemId, enabled) => {
+                                    topBarTab.handleItemEnabledChanged(sectionId,
+                                                                        itemId,
+                                                                        enabled)
+                                  }
+            onItemOrderChanged: newOrder => {
+                                  topBarTab.handleItemOrderChanged("left",
+                                                                    newOrder)
+                                }
+            onAddWidget: sectionId => {
+                           widgetSelectionPopup.allWidgets = topBarTab.baseWidgetDefinitions
+                           widgetSelectionPopup.targetSection = sectionId
+                           widgetSelectionPopup.safeOpen()
+                         }
+            onRemoveWidget: (sectionId, widgetIndex) => {
+                              topBarTab.removeWidgetFromSection(sectionId,
+                                                                 widgetIndex)
+                            }
+            onSpacerSizeChanged: (sectionId, itemId, newSize) => {
+                                   topBarTab.handleSpacerSizeChanged(sectionId,
+                                                                      itemId,
+                                                                      newSize)
+                                 }
+            onCompactModeChanged: (widgetId, value) => {
+                                    if (widgetId === "clock") {
+                                      SettingsData.setClockCompactMode(value)
+                                    } else if (widgetId === "music") {
+                                      SettingsData.setMediaSize(value)
+                                    } else if (widgetId === "focusedWindow") {
+                                      SettingsData.setFocusedWindowCompactMode(value)
+                                    } else if (widgetId === "runningApps") {
+                                      SettingsData.setRunningAppsCompactMode(value)
+                                    }
+                                  }
+            onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
+                                     topBarTab.handleGpuSelectionChanged(
+                                       sectionId, widgetIndex, selectedIndex)
+                                   }
+          }
+        }
+
+        // Center Section
+        StyledRect {
+          width: parent.width
+          height: centerSection.implicitHeight + Theme.spacingL * 2
+          radius: Theme.cornerRadius
+          color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+          border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+          border.width: 1
+
+          WidgetsTabSection {
+            id: centerSection
+            anchors.fill: parent
+            anchors.margins: Theme.spacingL
+            title: "Center Section"
+            titleIcon: "format_align_center"
+            sectionId: "center"
+            allWidgets: topBarTab.baseWidgetDefinitions
+            items: topBarTab.getItemsForSection("center")
+            onItemEnabledChanged: (sectionId, itemId, enabled) => {
+                                    topBarTab.handleItemEnabledChanged(sectionId,
+                                                                        itemId,
+                                                                        enabled)
+                                  }
+            onItemOrderChanged: newOrder => {
+                                  topBarTab.handleItemOrderChanged("center",
+                                                                    newOrder)
+                                }
+            onAddWidget: sectionId => {
+                           widgetSelectionPopup.allWidgets = topBarTab.baseWidgetDefinitions
+                           widgetSelectionPopup.targetSection = sectionId
+                           widgetSelectionPopup.safeOpen()
+                         }
+            onRemoveWidget: (sectionId, widgetIndex) => {
+                              topBarTab.removeWidgetFromSection(sectionId,
+                                                                 widgetIndex)
+                            }
+            onSpacerSizeChanged: (sectionId, itemId, newSize) => {
+                                   topBarTab.handleSpacerSizeChanged(sectionId,
+                                                                      itemId,
+                                                                      newSize)
+                                 }
+            onCompactModeChanged: (widgetId, value) => {
+                                    if (widgetId === "clock") {
+                                      SettingsData.setClockCompactMode(value)
+                                    } else if (widgetId === "music") {
+                                      SettingsData.setMediaSize(value)
+                                    } else if (widgetId === "focusedWindow") {
+                                      SettingsData.setFocusedWindowCompactMode(value)
+                                    } else if (widgetId === "runningApps") {
+                                      SettingsData.setRunningAppsCompactMode(value)
+                                    }
+                                  }
+            onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
+                                     topBarTab.handleGpuSelectionChanged(
+                                       sectionId, widgetIndex, selectedIndex)
+                                   }
+          }
+        }
+
+        // Right Section
+        StyledRect {
+          width: parent.width
+          height: rightSection.implicitHeight + Theme.spacingL * 2
+          radius: Theme.cornerRadius
+          color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
+          border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+          border.width: 1
+
+          WidgetsTabSection {
+            id: rightSection
+            anchors.fill: parent
+            anchors.margins: Theme.spacingL
+            title: "Right Section"
+            titleIcon: "format_align_right"
+            sectionId: "right"
+            allWidgets: topBarTab.baseWidgetDefinitions
+            items: topBarTab.getItemsForSection("right")
+            onItemEnabledChanged: (sectionId, itemId, enabled) => {
+                                    topBarTab.handleItemEnabledChanged(sectionId,
+                                                                        itemId,
+                                                                        enabled)
+                                  }
+            onItemOrderChanged: newOrder => {
+                                  topBarTab.handleItemOrderChanged("right",
+                                                                    newOrder)
+                                }
+            onAddWidget: sectionId => {
+                           widgetSelectionPopup.allWidgets = topBarTab.baseWidgetDefinitions
+                           widgetSelectionPopup.targetSection = sectionId
+                           widgetSelectionPopup.safeOpen()
+                         }
+            onRemoveWidget: (sectionId, widgetIndex) => {
+                              topBarTab.removeWidgetFromSection(sectionId,
+                                                                 widgetIndex)
+                            }
+            onSpacerSizeChanged: (sectionId, itemId, newSize) => {
+                                   topBarTab.handleSpacerSizeChanged(sectionId,
+                                                                      itemId,
+                                                                      newSize)
+                                 }
+            onCompactModeChanged: (widgetId, value) => {
+                                    if (widgetId === "clock") {
+                                      SettingsData.setClockCompactMode(value)
+                                    } else if (widgetId === "music") {
+                                      SettingsData.setMediaSize(value)
+                                    } else if (widgetId === "focusedWindow") {
+                                      SettingsData.setFocusedWindowCompactMode(value)
+                                    } else if (widgetId === "runningApps") {
+                                      SettingsData.setRunningAppsCompactMode(value)
+                                    }
+                                  }
+            onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
+                                     topBarTab.handleGpuSelectionChanged(
+                                       sectionId, widgetIndex, selectedIndex)
+                                   }
+          }
+        }
+      }
     }
   }