SettingsPanel: converted to layout

Modules/SettingsPanel/SettingsPanel.qml

@@ -267,9 +267,18 @@ NPanel {
   }
 
   panelContent: Rectangle {
+    color: Color.transparent
+
+    // Main layout container that fills the panel
+    ColumnLayout {
       anchors.fill: parent
       anchors.margins: Style.marginL * scaling
-    color: Color.transparent
+      spacing: 0
+
+      // Keyboard shortcuts container
+      Item {
+        Layout.preferredWidth: 0
+        Layout.preferredHeight: 0
 
         // Scrolling via keyboard
         Shortcut {
@@ -320,15 +329,20 @@ NPanel {
           onActivated: root.selectPreviousTab()
           enabled: root.opened
         }
+      }
 
+      // Main content area
       RowLayout {
-      anchors.fill: parent
+        Layout.fillWidth: true
+        Layout.fillHeight: true
         spacing: Style.marginM * scaling
 
+        // Sidebar
         Rectangle {
           id: sidebar
           Layout.preferredWidth: 220 * scaling
           Layout.fillHeight: true
+          Layout.alignment: Qt.AlignTop
           color: Color.mSurfaceVariant
           border.color: Color.mOutline
           border.width: Math.max(1, Style.borderS * scaling)
@@ -351,7 +365,7 @@ NPanel {
                      }
           }
 
-        Column {
+          ColumnLayout {
             anchors.fill: parent
             anchors.margins: Style.marginS * scaling
             spacing: Style.marginXS * 1.5 * scaling
@@ -361,8 +375,8 @@ NPanel {
               model: root.tabsModel
               delegate: Rectangle {
                 id: tabItem
-              width: parent.width
-              height: 32 * scaling
+                Layout.fillWidth: true
+                Layout.preferredHeight: tabEntryRow.implicitHeight + Style.marginS * scaling * 2
                 radius: Style.radiusS * scaling
                 color: selected ? Color.mPrimary : (tabItem.hovering ? Color.mTertiary : Color.transparent)
                 readonly property bool selected: index === currentTabIndex
@@ -382,17 +396,19 @@ NPanel {
                 }
 
                 RowLayout {
+                  id: tabEntryRow
                   anchors.fill: parent
-                anchors.leftMargin: Style.marginS * scaling
-                anchors.rightMargin: Style.marginS * scaling
+                  anchors.margins: Style.marginS * scaling
                   spacing: Style.marginS * scaling
-                // Tab icon on the left side
+
+                  // Tab icon
                   NIcon {
                     text: modelData.icon
                     color: tabTextColor
                     font.pointSize: Style.fontSizeL * scaling
                   }
-                // Tab label on the left side
+                  
+                  // Tab label
                   NText {
                     text: modelData.label
                     color: tabTextColor
@@ -401,6 +417,7 @@ NPanel {
                     Layout.fillWidth: true
                   }
                 }
+
                 MouseArea {
                   anchors.fill: parent
                   hoverEnabled: true
@@ -412,14 +429,19 @@ NPanel {
                 }
               }
             }
+
+            Item {
+              Layout.fillHeight: true
+            }
           }
         }
 
-      // Content
+        // Content pane
         Rectangle {
           id: contentPane
           Layout.fillWidth: true
           Layout.fillHeight: true
+          Layout.alignment: Qt.AlignTop
           radius: Style.radiusM * scaling
           color: Color.mSurfaceVariant
           border.color: Color.mOutline
@@ -432,19 +454,23 @@ NPanel {
             anchors.margins: Style.marginL * scaling
             spacing: Style.marginS * scaling
 
+            // Header row
             RowLayout {
               id: headerRow
               Layout.fillWidth: true
               spacing: Style.marginS * scaling
 
-            // Tab label on the main right side
+              // Tab title
               NText {
-              text: root.tabsModel[currentTabIndex].label
+                text: root.tabsModel[currentTabIndex]?.label || ""
                 font.pointSize: Style.fontSizeXL * scaling
                 font.weight: Style.fontWeightBold
                 color: Color.mPrimary
                 Layout.fillWidth: true
+                Layout.alignment: Qt.AlignVCenter
               }
+
+              // Close button
               NIconButton {
                 icon: "close"
                 tooltipText: "Close"
@@ -453,13 +479,16 @@ NPanel {
               }
             }
 
+            // Divider
             NDivider {
               Layout.fillWidth: true
             }
 
-          Item {
+            // Tab content area
+            Rectangle {
               Layout.fillWidth: true
               Layout.fillHeight: true
+              color: Color.transparent
 
               Repeater {
                 model: root.tabsModel
@@ -479,7 +508,7 @@ NPanel {
 
                   sourceComponent: Flickable {
                     // Using a Flickable here with a pressDelay to fix conflict between
-                  // ScrollView and NTextInput. This fix the weird text selection issue.
+                    // ScrollView and NTextInput. This fixes the weird text selection issue.
                     id: flickable
                     anchors.fill: parent
                     pressDelay: 200
@@ -498,7 +527,7 @@ NPanel {
 
                       Loader {
                         active: true
-                      sourceComponent: root.tabsModel[index].source
+                        sourceComponent: root.tabsModel[index]?.source
                         width: scrollView.availableWidth
                       }
                     }
@@ -511,3 +540,4 @@ NPanel {
       }
     }
   }
+}