Changes to the UI and icons.

Signed-off-by: Adam Treat <treat.adam@gmail.com>

gpt4all-chat/main.qml

@@ -43,29 +43,6 @@ Window {
         font.pixelSize: theme.fontSizeLarge
     }
 
-    SettingsDialog {
-        id: settingsDialog
-        anchors.centerIn: parent
-        width: Math.min(1920, window.width - (window.width * .1))
-        height: window.height - (window.height * .1)
-        onDownloadClicked: {
-            downloadNewModels.showEmbeddingModels = true
-            downloadNewModels.open()
-        }
-    }
-
-    ModelDownloaderDialog {
-        id: downloadNewModels
-        anchors.centerIn: parent
-        width: Math.min(1920, window.width - (window.width * .1))
-        height: window.height - (window.height * .1)
-        Item {
-            Accessible.role: Accessible.Dialog
-            Accessible.name: qsTr("Download new models")
-            Accessible.description: qsTr("Dialog for downloading new models")
-        }
-    }
-
     NetworkDialog {
         id: networkDialog
         anchors.centerIn: parent
@@ -124,48 +101,56 @@ Window {
             MyToolButton {
                 id: chatButton
                 backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar
-                backgroundColorHovered: theme.iconBackgroundViewBarHovered
+                backgroundColorHovered: toggled ? backgroundColor : theme.iconBackgroundViewBarHovered
+                Layout.preferredWidth: 40
+                Layout.preferredHeight: 40
+                Layout.alignment: Qt.AlignCenter
                 toggledWidth: 0
-                toggled: true
-                Layout.preferredWidth: 50
-                Layout.preferredHeight: 50
+                toggled: stackLayout.currentIndex === 0
+                toggledColor: theme.iconBackgroundViewBarToggled
                 scale: 1.5
                 source: "qrc:/gpt4all/icons/chat.svg"
                 Accessible.name: qsTr("Chat view")
                 Accessible.description: qsTr("Chat view to interact with models")
                 onClicked: {
+                    stackLayout.currentIndex = 0
                 }
             }
 
             MyToolButton {
                 id: searchButton
-                backgroundColor: theme.iconBackgroundViewBar
-                backgroundColorHovered: theme.iconBackgroundViewBarHovered
-                Layout.preferredWidth: 50
-                Layout.preferredHeight: 50
+                backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar
+                backgroundColorHovered: toggled ? backgroundColor : theme.iconBackgroundViewBarHovered
+                Layout.preferredWidth: 40
+                Layout.preferredHeight: 40
+                toggledWidth: 0
+                toggled: stackLayout.currentIndex === 1
+                toggledColor: theme.iconBackgroundViewBarToggled
                 scale: 1.5
-                source: "qrc:/gpt4all/icons/search.svg"
+                source: "qrc:/gpt4all/icons/models.svg"
                 Accessible.name: qsTr("Search")
                 Accessible.description: qsTr("Launch a dialog to download new models")
                 onClicked: {
-                    downloadNewModels.showEmbeddingModels = false
-                    downloadNewModels.open()
+                    stackLayout.currentIndex = 1
                 }
             }
 
             MyToolButton {
                 id: settingsButton
-                backgroundColor: theme.iconBackgroundViewBar
-                backgroundColorHovered: theme.iconBackgroundViewBarHovered
-                Layout.preferredWidth: 50
-                Layout.preferredHeight: 50
+                backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar
+                backgroundColorHovered: toggled ? backgroundColor : theme.iconBackgroundViewBarHovered
+                Layout.preferredWidth: 40
+                Layout.preferredHeight: 40
+                toggledWidth: 0
+                toggledColor: theme.iconBackgroundViewBarToggled
+                toggled: stackLayout.currentIndex === 2
                 scale: 1.5
                 source: "qrc:/gpt4all/icons/settings.svg"
                 Accessible.name: qsTr("Settings")
                 Accessible.description: qsTr("Reveals a dialogue with settings")
 
                 onClicked: {
-                    settingsDialog.open()
+                    stackLayout.currentIndex = 2
                 }
             }
         }
@@ -181,8 +166,8 @@ Window {
 
             MyToolButton {
                 id: networkButton
-                backgroundColor: theme.iconBackgroundViewBar
-                backgroundColorHovered: theme.iconBackgroundViewBarHovered
+                backgroundColor: toggled ? theme.iconBackgroundViewBarToggled : theme.iconBackgroundViewBar
+                backgroundColorHovered: toggled ? backgroundColor : theme.iconBackgroundViewBarHovered
                 toggledColor: theme.iconBackgroundViewBar
                 Layout.preferredWidth: 40
                 Layout.preferredHeight: 40
@@ -218,10 +203,52 @@ Window {
         }
     }
 
-    ChatView {
+    StackLayout {
+        id: stackLayout
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         anchors.left: viewBar.right
         anchors.right: parent.right
+
+        ChatView {
+            id: chatView
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            Connections {
+                target: chatView
+                function onDownloadViewRequested(showEmbeddingModels) {
+                    console.log("onDownloadViewRequested")
+                    stackLayout.currentIndex = 1;
+                    if (showEmbeddingModels)
+                        downloadView.showEmbeddingModels();
+                }
+                function onSettingsViewRequested(page) {
+                    settingsDialog.pageToDisplay = page;
+                    stackLayout.currentIndex = 2;
+                }
+            }
+        }
+
+        ModelDownloaderDialog {
+            id: downloadView
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Item {
+                Accessible.role: Accessible.Dialog
+                Accessible.name: qsTr("Download new models")
+                Accessible.description: qsTr("Dialog for downloading new models")
+            }
+        }
+
+        SettingsDialog {
+            id: settingsDialog
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            onDownloadClicked: {
+                stackLayout.currentIndex = 1
+                downloadView.showEmbeddingModels()
+            }
+        }
     }
 }