Integrate SettingsView into MainLayout

This commit integrates the newly created `SettingsView` into the `MainLayout`, allowing users to access and interact with the settings through the main user interface of the app. When the user selects the settings tab from the `SideBarView`, the `SettingsView` is displayed alongside the `ChatView`, maintaining consistent layout aesthetics with other views like `TaskView`.

Key Changes:
- A new condition has been added in the `ValueListenableBuilder` within the `MainLayout` to check if the selected view is `'SettingsView'`.
- When `'SettingsView'` is selected, `SettingsView` is rendered with the same width as `TaskView`, and `ChatView` is displayed next to it.
- The state of the skill tree is reset when navigating to `SettingsView` to ensure a clean state.

This integration ensures a seamless user experience, allowing users to navigate and configure app settings easily and efficiently from the main layout of the app.

frontend/lib/views/main_layout.dart

@@ -1,6 +1,7 @@
 import 'package:auto_gpt_flutter_client/viewmodels/skill_tree_viewmodel.dart';
 import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart';
 import 'package:auto_gpt_flutter_client/viewmodels/chat_viewmodel.dart';
+import 'package:auto_gpt_flutter_client/views/settings/settings_view.dart';
 import 'package:auto_gpt_flutter_client/views/side_bar/side_bar_view.dart';
 import 'package:auto_gpt_flutter_client/views/skill_tree/skill_tree_view.dart';
 import 'package:auto_gpt_flutter_client/views/task/task_view.dart';
@@ -29,6 +30,9 @@ class MainLayout extends StatelessWidget {
     // Initialize the width for the TaskView
     double taskViewWidth = 280.0;
 
+    // Initialize the width for the SettingsView
+    double settingsViewWidth = 280.0;
+
     // Calculate remaining width after subtracting the width of the SideBarView
     double remainingWidth = width - sideBarWidth;
 
@@ -49,6 +53,7 @@ class MainLayout extends StatelessWidget {
               return Consumer<SkillTreeViewModel>(
                 builder: (context, skillTreeViewModel, _) {
                   if (value == 'TaskView') {
+                    // TODO: Handle this state reset better
                     skillTreeViewModel.resetState();
                     chatViewWidth = remainingWidth - taskViewWidth;
                     return Row(
@@ -61,6 +66,22 @@ class MainLayout extends StatelessWidget {
                             child: ChatView(viewModel: chatViewModel))
                       ],
                     );
+                  } else if (value == 'SettingsView') {
+                    // TODO: Handle this state reset better
+                    skillTreeViewModel.resetState();
+                    chatViewWidth = remainingWidth - settingsViewWidth;
+                    return Row(
+                      children: [
+                        SizedBox(
+                            width: settingsViewWidth,
+                            // Render the SettingsView with the same width as TaskView
+                            child: const SettingsView()),
+                        SizedBox(
+                            width: chatViewWidth,
+                            // Render the ChatView next to the SettingsView
+                            child: ChatView(viewModel: chatViewModel)),
+                      ],
+                    );
                   } else {
                     if (skillTreeViewModel.selectedNode != null) {
                       // If TaskQueueView should be displayed
@@ -97,6 +118,7 @@ class MainLayout extends StatelessWidget {
       );
     } else {
       // For smaller screens, return a tabbed layout
+      // TODO: Include settings view for smaller screen sizes
       return CupertinoTabScaffold(
         tabBar: CupertinoTabBar(
           items: const <BottomNavigationBarItem>[