Begin redesign of settings dialog.

gpt4all-chat/CMakeLists.txt

@@ -98,6 +98,7 @@ qt_add_qml_module(chat
       qml/PopupDialog.qml
       qml/AboutDialog.qml
       qml/Theme.qml
+      qml/ModelSettings.qml
       qml/GenerationSettings.qml
       qml/ApplicationSettings.qml
       qml/LocalDocsSettings.qml

gpt4all-chat/qml/GenerationSettings.qml

@@ -7,7 +7,7 @@ import localdocs
 import mysettings
 
 MySettingsTab {
-    title: qsTr("Generation")
+    title: qsTr("Presets")
     contentItem: GridLayout {
         id: generationSettingsTabInner
         columns: 2

gpt4all-chat/qml/ModelSettings.qml

@@ -0,0 +1,29 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import localdocs
+import mysettings
+
+MySettingsTab {
+    title: qsTr("Models")
+    contentItem: GridLayout {
+        id: generationSettingsTabInner
+        columns: 2
+        rowSpacing: 10
+        columnSpacing: 10
+
+        MyButton {
+            Layout.row: 8
+            Layout.column: 1
+            Layout.fillWidth: true
+            text: qsTr("Restore Defaults")
+            Accessible.description: qsTr("Restores the settings dialog to a default state")
+            onClicked: {
+                MySettings.restoreGenerationDefaults();
+                templateTextArea.text = MySettings.promptTemplate
+            }
+        }
+    }
+}

gpt4all-chat/qml/MySettingsStack.qml

@@ -15,10 +15,29 @@ Item {
     property ListModel tabTitlesModel: ListModel { }
     property list<Component> tabs: [ ]
 
+    Canvas {
+        id: canvas
+        anchors.fill: parent
+        contextType: "2d"
+        onPaint: {
+            var context = getContext("2d");
+            context.reset();
+            context.lineWidth = 2;
+            context.moveTo(stackLayout.x, stackLayout.y);
+            context.lineTo(stackLayout.x, stackLayout.y + stackLayout.height);
+            context.lineTo(stackLayout.x + stackLayout.width, stackLayout.y + stackLayout.height);
+            context.lineTo(stackLayout.x + stackLayout.width, stackLayout.y);
+            context.lineTo(/*settingsTabBar.currentItem.x + */settingsTabBar.currentItem.width, stackLayout.y);
+            context.strokeStyle = theme.tabBorder;
+            context.stroke();
+        }
+    }
+
     TabBar {
         id: settingsTabBar
         width: parent.width / 1.25
         z: 200
+        visible: tabTitlesModel.count > 1
         Repeater {
             model: settingsStack.tabTitlesModel
             TabButton {
@@ -30,34 +49,34 @@ Item {
                 }
                 background: Rectangle {
                     color: tabButton.checked ? theme.backgroundDarkest : theme.backgroundLight
-                    Rectangle {
+//                    Rectangle {
-                        anchors.top: parent.top
+//                        anchors.top: parent.top
-                        anchors.left: parent.left
+//                        anchors.left: parent.left
-                        anchors.right: parent.right
+//                        anchors.right: parent.right
-                        height: tabButton.checked
+//                        height: tabButton.checked
-                        color: theme.tabBorder
+//                        color: theme.tabBorder
-                    }
+//                    }
-                    Rectangle {
+//                    Rectangle {
-                        anchors.bottom: parent.bottom
+//                        anchors.bottom: parent.bottom
-                        anchors.left: parent.left
+//                        anchors.left: parent.left
-                        anchors.right: parent.right
+//                        anchors.right: parent.right
-                        height: !tabButton.checked
+//                        height: !tabButton.checked
-                        color: theme.tabBorder
+//                        color: theme.tabBorder
-                    }
+//                    }
-                    Rectangle {
+//                    Rectangle {
-                        anchors.top: parent.top
+//                        anchors.top: parent.top
-                        anchors.bottom: parent.bottom
+//                        anchors.bottom: parent.bottom
-                        anchors.left: parent.left
+//                        anchors.left: parent.left
-                        width: tabButton.checked
+//                        width: tabButton.checked
-                        color: theme.tabBorder
+//                        color: theme.tabBorder
-                    }
+//                    }
-                    Rectangle {
+//                    Rectangle {
-                        anchors.top: parent.top
+//                        anchors.top: parent.top
-                        anchors.bottom: parent.bottom
+//                        anchors.bottom: parent.bottom
-                        anchors.right: parent.right
+//                        anchors.right: parent.right
-                        width: tabButton.checked
+//                        width: tabButton.checked
-                        color: theme.tabBorder
+//                        color: theme.tabBorder
-                    }
+//                    }
                 }
                 Accessible.role: Accessible.Button
                 Accessible.name: model.title
@@ -67,7 +86,7 @@ Item {
 
     StackLayout {
         id: stackLayout
-        anchors.top: settingsTabBar.bottom
+        anchors.top: tabTitlesModel.count > 1 ? settingsTabBar.bottom : parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom

gpt4all-chat/qml/MySettingsTab.qml

@@ -30,12 +30,12 @@ Item {
             id: theme
         }
 
-        background: Rectangle {
+//        background: Rectangle {
-            color: 'transparent'
+//            color: 'transparent'
-            border.color: theme.tabBorder
+//            border.color: theme.tabBorder
-            border.width: 1
+//            border.width: 1
-            radius: 2
+//            radius: 10
-        }
+//        }
 
         Column {
             id: tabInner

gpt4all-chat/qml/SettingsDialog.qml

@@ -35,12 +35,88 @@ Dialog {
         Accessible.description: qsTr("Dialog containing various application settings")
     }
 
-    MySettingsStack {
+    ListModel {
+        id: stacksModel
+        ListElement {
+            title: "Generation"
+        }
+        ListElement {
+            title: "Application"
+        }
+        ListElement {
+            title: "Plugins"
+        }
+    }
+
+    ScrollView {
+        id: stackList
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        width: 200
+        ScrollBar.vertical.policy: ScrollBar.AsNeeded
+        clip: true
+
+        ListView {
+            id: listView
             anchors.fill: parent
+            anchors.rightMargin: 10
+            model: stacksModel
+
+            delegate: Rectangle {
+                id: item
+                width: listView.width
+                height: titleLabel.height + 25
+//                color: index % 2 === 0 ? theme.backgroundLight : theme.backgroundLighter
+                color: "transparent"
+                border.color: theme.backgroundLighter
+                border.width: index == listView.currentIndex ? 1 : 0
+                radius: 10
+
+                Text {
+                    id: titleLabel
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
+                    anchors.margins: 20
+                    text: title
+                    elide: Text.ElideRight
+                    color: theme.textColor
+                    width: 200
+                    TapHandler {
+                        onTapped: {
+                            listView.currentIndex = index
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    StackLayout {
+        id: stackLayout
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: stackList.right
+        anchors.right: parent.right
+        currentIndex: listView.currentIndex
+
+        MySettingsStack {
+            tabs: [
+                Component { ModelSettings { } },
+                Component { GenerationSettings { } }
+            ]
+        }
+
+        MySettingsStack {
+            tabs: [
+                Component { ApplicationSettings { } }
+            ]
+        }
+
+        MySettingsStack {
             tabs: [
-            Component { GenerationSettings { } },
-            Component { ApplicationSettings { } },
                 Component { LocalDocsSettings { } }
             ]
         }
     }
+}

gpt4all-chat/qml/Theme.qml

@@ -19,7 +19,7 @@ QtObject {
     property color userColor: "#ec86bf"
     property color assistantColor: "#10a37f"
     property color linkColor: "#55aaff"
-    property color tabBorder: "#2c2d35"
+    property color tabBorder: backgroundLight
     property real  fontSizeLarge: Qt.application.font.pixelSize
     property real  fontSizeLarger: Qt.application.font.pixelSize + 2
 }