tab UI fixes

qml/SettingsDialog.qml

@@ -67,28 +67,27 @@ The prompt below is a question to answer, a task to complete, or a conversation
         property string modelPath: settingsDialog.defaultModelPath
     }
 
-
     function restoreGenerationDefaults() {
-        settings.temperature = defaultTemperature;
+        settings.temperature = defaultTemperature
-        settings.topP = defaultTopP;
+        settings.topP = defaultTopP
-        settings.topK = defaultTopK;
+        settings.topK = defaultTopK
-        settings.maxLength = defaultMaxLength;
+        settings.maxLength = defaultMaxLength
-        settings.promptBatchSize = defaultPromptBatchSize;
+        settings.promptBatchSize = defaultPromptBatchSize
-        settings.promptTemplate = defaultPromptTemplate;
+        settings.promptTemplate = defaultPromptTemplate
         settings.sync()
     }
 
     function restoreApplicationDefaults() {
-        settings.modelPath = settingsDialog.defaultModelPath;
+        settings.modelPath = settingsDialog.defaultModelPath
         settings.threadCount = defaultThreadCount
-        Download.downloadLocalModelsPath = settings.modelPath;
+        Download.downloadLocalModelsPath = settings.modelPath
-        LLM.threadCount = settings.threadCount;
+        LLM.threadCount = settings.threadCount
         settings.sync()
     }
 
     Component.onCompleted: {
-        LLM.threadCount = settings.threadCount;
+        LLM.threadCount = settings.threadCount
-        Download.downloadLocalModelsPath = settings.modelPath;
+        Download.downloadLocalModelsPath = settings.modelPath
     }
 
     Component.onDestruction: {
@@ -102,16 +101,41 @@ The prompt below is a question to answer, a task to complete, or a conversation
     }
     TabBar {
         id: settingsTabBar
-        width: parent.width
+        width: parent.width / 1.5
+
         TabButton {
+            id: genSettingsButton
+            contentItem: IconLabel {
+                color: theme.textColor
+                font.bold: genSettingsButton.checked
+                font.pixelSize: genSettingsButton.checked ? theme.fontSizeLarger : theme.fontSizeLarge
                 text: qsTr("Generation")
+            }
+            background: Rectangle {
+                color: genSettingsButton.checked ? theme.backgroundDarkest : theme.backgroundLight
+                radius: 5
+                border.color: "#fff"
+                border.width: 1 ? genSettingsButton.checked : 0
+            }
             Accessible.role: Accessible.Button
             Accessible.name: qsTr("Generation settings")
             Accessible.description: qsTr("Settings related to how the model generates text")
         }
 
         TabButton {
+            id: appSettingsButton
+            contentItem: IconLabel {
+                color: theme.textColor
+                font.bold: appSettingsButton.checked
+                font.pixelSize: appSettingsButton.checked ? theme.fontSizeLarger : theme.fontSizeLarge
                 text: qsTr("Application")
+            }
+            background: Rectangle {
+                color: appSettingsButton.checked ? theme.backgroundDarkest : theme.backgroundLight
+                radius: 2
+                border.color: "#fff"
+                border.width: 1 ? appSettingsButton.checked : 0
+            }
             Accessible.role: Accessible.Button
             Accessible.name: qsTr("Application settings")
             Accessible.description: qsTr("Settings related to general behavior of the application")
@@ -120,14 +144,30 @@ The prompt below is a question to answer, a task to complete, or a conversation
 
     StackLayout {
         anchors.top: settingsTabBar.bottom
-        anchors.bottom: parent.bottom
         width: parent.width
+        height: availableHeight
         currentIndex: settingsTabBar.currentIndex
+
         Item {
             id: generationSettingsTab
+            ScrollView {
+                background: Rectangle {
+                    color: 'transparent'
+                    border.color: theme.tabBorder
+                    border.width: 1
+                    radius: 2
+                }
+                width: parent.width
+                height: parent.height - 30
+                contentWidth: availableWidth - 20
+                contentHeight: generationSettingsTabInner.implicitHeight + 40
+                ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+
                 GridLayout {
+                    id: generationSettingsTabInner
+                    anchors.margins: 10
                     columns: 2
-                rowSpacing: 2
+                    rowSpacing: 10
                     columnSpacing: 10
                     anchors.fill: parent
 
@@ -151,7 +191,7 @@ The prompt below is a question to answer, a task to complete, or a conversation
                         ToolTip.visible: hovered
                         Layout.row: 0
                         Layout.column: 1
-                    validator: DoubleValidator { }
+                        validator: DoubleValidator {}
                         onEditingFinished: {
                             var val = parseFloat(text)
                             if (!isNaN(val)) {
@@ -221,7 +261,9 @@ The prompt below is a question to answer, a task to complete, or a conversation
                         ToolTip.visible: hovered
                         Layout.row: 2
                         Layout.column: 1
-                     validator: IntValidator { bottom: 1 }
+                        validator: IntValidator {
+                            bottom: 1
+                        }
                         onEditingFinished: {
                             var val = parseInt(text)
                             if (!isNaN(val)) {
@@ -256,7 +298,9 @@ The prompt below is a question to answer, a task to complete, or a conversation
                         ToolTip.visible: hovered
                         Layout.row: 3
                         Layout.column: 1
-                     validator: IntValidator { bottom: 1 }
+                        validator: IntValidator {
+                            bottom: 1
+                        }
                         onEditingFinished: {
                             var val = parseInt(text)
                             if (!isNaN(val)) {
@@ -292,7 +336,9 @@ The prompt below is a question to answer, a task to complete, or a conversation
                         ToolTip.visible: hovered
                         Layout.row: 4
                         Layout.column: 1
-                     validator: IntValidator { bottom: 1 }
+                        validator: IntValidator {
+                            bottom: 1
+                        }
                         onEditingFinished: {
                             var val = parseInt(text)
                             if (!isNaN(val)) {
@@ -362,7 +408,9 @@ The prompt below is a question to answer, a task to complete, or a conversation
                         ToolTip.visible: hovered
                         Layout.row: 6
                         Layout.column: 1
-                      validator: IntValidator { bottom: 1 }
+                        validator: IntValidator {
+                            bottom: 1
+                        }
                         onEditingFinished: {
                             var val = parseInt(text)
                             if (!isNaN(val)) {
@@ -394,7 +442,8 @@ The prompt below is a question to answer, a task to complete, or a conversation
                         clip: true
                         Label {
                             id: promptTemplateLabelHelp
-                        visible: settings.promptTemplate.indexOf("%1") === -1
+                            visible: settings.promptTemplate.indexOf(
+                                         "%1") === -1
                             font.bold: true
                             color: theme.textErrorColor
                             text: qsTr("Prompt template must contain %1 to be replaced with the user's input.")
@@ -456,14 +505,27 @@ The prompt below is a question to answer, a task to complete, or a conversation
                     }
                 }
             }
+        }
         Item {
-            id: systemSettingsTab
+            id: applicationSettingsTab
-            GridLayout {
+            ScrollView {
-                columns: 3
+                background: Rectangle {
-                rowSpacing: 2
+                    color: 'transparent'
-                columnSpacing: 10
+                    border.color: theme.tabBorder
+                    border.width: 1
+                    radius: 2
+                }
                 width: parent.width
-                anchors.top: parent.top
+                height: parent.height - 30
+                contentWidth: availableWidth - 20
+                ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+
+                GridLayout {
+                    anchors.margins: 10
+                    columns: 3
+                    rowSpacing: 10
+                    columnSpacing: 10
+                    anchors.fill: parent
                     FolderDialog {
                         id: modelPathDialog
                         title: "Please choose a directory"
@@ -483,15 +545,36 @@ The prompt below is a question to answer, a task to complete, or a conversation
                     TextField {
                         id: modelPathDisplayLabel
                         text: settings.modelPath
-                    color: theme.textColor
                         readOnly: true
+                        color: theme.textColor
+                        implicitWidth: 300
                         Layout.row: 1
                         Layout.column: 1
+                        ToolTip.text: qsTr("Path where model files will be downloaded to")
+                        ToolTip.visible: hovered
+                        Accessible.role: Accessible.ToolTip
+                        Accessible.name: topKLabel.text
+                        Accessible.description: ToolTip.text
                     }
                     Button {
                         Layout.row: 1
                         Layout.column: 2
                         text: qsTr("Browse")
+                        contentItem: Text {
+                            text: qsTr("Browse")
+                            horizontalAlignment: Text.AlignHCenter
+                            color: theme.textColor
+                            Accessible.role: Accessible.Button
+                            Accessible.name: text
+                            Accessible.description: qsTr("Opens a folder picker dialog to choose where to save model files")
+                        }
+                        background: Rectangle {
+                            opacity: .5
+                            border.color: theme.backgroundLightest
+                            border.width: 1
+                            radius: 10
+                            color: theme.backgroundLight
+                        }
                         onClicked: modelPathDialog.open()
                     }
                     Label {
@@ -514,7 +597,9 @@ The prompt below is a question to answer, a task to complete, or a conversation
                         ToolTip.visible: hovered
                         Layout.row: 2
                         Layout.column: 1
-                    validator: IntValidator { bottom: 1 }
+                        validator: IntValidator {
+                            bottom: 1
+                        }
                         onEditingFinished: {
                             var val = parseInt(text)
                             if (!isNaN(val)) {
@@ -558,5 +643,5 @@ The prompt below is a question to answer, a task to complete, or a conversation
                 }
             }
         }
-
+    }
 }

qml/Theme.qml

@@ -14,5 +14,7 @@ QtObject {
     property color userColor: "#ec86bf"
     property color assistantColor: "#10a37f"
     property color linkColor: "white"
+    property color tabBorder: "#ddd"
     property real  fontSizeLarge: Qt.application.font.pixelSize
+    property real  fontSizeLarger: Qt.application.font.pixelSize + 2
 }