Refactor the settings dialog so that it uses a set of components/abstractions

for all of the tabs and stacks

gpt4all-chat/CMakeLists.txt

@@ -102,6 +102,7 @@ qt_add_qml_module(chat
       qml/ApplicationSettings.qml
       qml/LocalDocsSettings.qml
       qml/MySettingsTab.qml
+      qml/MySettingsStack.qml
       qml/MyButton.qml
       qml/MyComboBox.qml
       qml/MyDirectoryField.qml

gpt4all-chat/qml/LocalDocsSettings.qml

@@ -102,7 +102,7 @@ MySettingsTab {
         ScrollView {
             id: scrollView
             Layout.fillWidth: true
-            Layout.bottomMargin: 20
+            Layout.bottomMargin: 10
             clip: true
             contentHeight: 300
             ScrollBar.vertical.policy: ScrollBar.AlwaysOn

gpt4all-chat/qml/MySettingsStack.qml

@@ -0,0 +1,87 @@
+import QtCore
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import mysettings
+
+Item {
+    id: settingsStack
+
+    Theme {
+        id: theme
+    }
+
+    property ListModel tabTitlesModel: ListModel { }
+    property list<Component> tabs: [ ]
+
+    TabBar {
+        id: settingsTabBar
+        width: parent.width / 1.25
+        z: 200
+        Repeater {
+            model: settingsStack.tabTitlesModel
+            TabButton {
+                id: tabButton
+                contentItem: IconLabel {
+                    color: theme.textColor
+                    font.bold: tabButton.checked
+                    text: model.title
+                }
+                background: Rectangle {
+                    color: tabButton.checked ? theme.backgroundDarkest : theme.backgroundLight
+                    Rectangle {
+                        anchors.top: parent.top
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        height: tabButton.checked
+                        color: theme.tabBorder
+                    }
+                    Rectangle {
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        height: !tabButton.checked
+                        color: theme.tabBorder
+                    }
+                    Rectangle {
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        anchors.left: parent.left
+                        width: tabButton.checked
+                        color: theme.tabBorder
+                    }
+                    Rectangle {
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+                        anchors.right: parent.right
+                        width: tabButton.checked
+                        color: theme.tabBorder
+                    }
+                }
+                Accessible.role: Accessible.Button
+                Accessible.name: model.title
+            }
+        }
+    }
+
+    StackLayout {
+        id: stackLayout
+        anchors.top: settingsTabBar.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        currentIndex: settingsTabBar.currentIndex
+
+        Repeater {
+            model: settingsStack.tabs
+            delegate: Loader {
+                id: loader
+                sourceComponent: model.modelData
+                onLoaded: {
+                    settingsStack.tabTitlesModel.append({ "title": loader.item.title });
+                }
+            }
+        }
+    }
+}

gpt4all-chat/qml/SettingsDialog.qml

@@ -29,164 +29,18 @@ Dialog {
         Network.sendSettingsDialog();
     }
 
-    Theme {
-        id: theme
-    }
-
     Item {
         Accessible.role: Accessible.Dialog
         Accessible.name: qsTr("Settings dialog")
         Accessible.description: qsTr("Dialog containing various application settings")
     }
-    TabBar {
-        id: settingsTabBar
-        width: parent.width / 1.25
-        z: 200
 
-        TabButton {
+    MySettingsStack {
-            id: genSettingsButton
+        anchors.fill: parent
-            contentItem: IconLabel {
+        tabs: [
-                color: theme.textColor
+            Component { GenerationSettings { } },
-                font.bold: genSettingsButton.checked
+            Component { ApplicationSettings { } },
-                text: qsTr("Generation")
+            Component { LocalDocsSettings { } }
-            }
+        ]
-            background: Rectangle {
-                color: genSettingsButton.checked ? theme.backgroundDarkest : theme.backgroundLight
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: genSettingsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: !genSettingsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    width: genSettingsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.right: parent.right
-                    width: genSettingsButton.checked
-                    color: theme.tabBorder
-                }
-            }
-            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
-                text: qsTr("Application")
-            }
-            background: Rectangle {
-                color: appSettingsButton.checked ? theme.backgroundDarkest : theme.backgroundLight
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: appSettingsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: !appSettingsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    width: appSettingsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.right: parent.right
-                    width: appSettingsButton.checked
-                    color: theme.tabBorder
-                }
-            }
-            Accessible.role: Accessible.Button
-            Accessible.name: qsTr("Application settings")
-            Accessible.description: qsTr("Settings related to general behavior of the application")
-        }
-
-        TabButton {
-            id: localDocsButton
-            contentItem: IconLabel {
-                color: theme.textColor
-                font.bold: localDocsButton.checked
-                text: qsTr("LocalDocs Plugin (BETA)")
-            }
-            background: Rectangle {
-                color: localDocsButton.checked ? theme.backgroundDarkest : theme.backgroundLight
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: localDocsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: !localDocsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.left: parent.left
-                    width: localDocsButton.checked
-                    color: theme.tabBorder
-                }
-                Rectangle {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.right: parent.right
-                    width: localDocsButton.checked
-                    color: theme.tabBorder
-                }
-            }
-            Accessible.role: Accessible.Button
-            Accessible.name: qsTr("LocalDocs settings")
-            Accessible.description: qsTr("Settings related to localdocs plugin")
-        }
-    }
-
-    StackLayout {
-        anchors.top: settingsTabBar.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        currentIndex: settingsTabBar.currentIndex
-
-        GenerationSettings {
-        }
-
-        ApplicationSettings {
-        }
-
-        LocalDocsSettings {
-        }
     }
 }