Integrate TaskQueueView and Enhance SkillTree Functionality (#5206)

* Add TestQueueView to Main Layout

This commit integrates the TestQueueView into the main layout. The layout now conditionally displays the TestQueueView based on whether a node in the SkillTree is selected.

- TestQueueView appears when a SkillTree node is selected.
- Main layout adjusts to accommodate TestQueueView alongside SkillTreeView and ChatView.
- Implemented responsive layout logic to manage the widths of the different views based on the screen width and the state of the SkillTree.

* Extend SkillTreeViewModel to Track Selected Node Hierarchy

This commit enhances the SkillTreeViewModel to maintain a list of nodes that form a hierarchy from the currently selected node to the root. This allows for more interactive and informative views that can leverage this hierarchical data.

- Added a new property `selectedNodeHierarchy` to keep track of the node hierarchy.
- Modified the `toggleNodeSelection` method to populate or clear `selectedNodeHierarchy` based on node selection.
- Introduced a new method `populateSelectedNodeHierarchy` to build the hierarchy from the selected node to the root.

* Extract skill tree view model reset state to method

* Implement UI enhancements for TaskQueueView

This commit introduces several UI improvements to the TaskQueueView:
- Tiles are padded 20 units from both the leading and trailing edges.
- Tiles now have a white background.
- Added a thin black border to the tiles.
- Incorporated a slight corner radius for the tiles.
- Centered the title and subtitle horizontally within the tiles.
- Added a checkmark button with a tooltip at the bottom-right corner for running a suite of tests.

These changes aim to improve the user experience and visual appeal of the TaskQueueView.

* Make MainLayout a consumer of SkillTreeViewModel

frontend/lib/views/main_layout.dart

@@ -5,6 +5,7 @@ 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';
 import 'package:auto_gpt_flutter_client/views/chat/chat_view.dart';
+import 'package:auto_gpt_flutter_client/views/task_queue/task_queue_view.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:provider/provider.dart';
 
@@ -18,37 +19,80 @@ class MainLayout extends StatelessWidget {
     // Get the screen width
     double width = MediaQuery.of(context).size.width;
 
-    // Access the TaskViewModel from the context
+    // Access the various ViewModels from the context
     final taskViewModel = Provider.of<TaskViewModel>(context);
-
-    // Access the ChatViewModel from the context
     final chatViewModel = Provider.of<ChatViewModel>(context);
 
-    // Access the ChatViewModel from the context
-    final skillTreeViewModel = Provider.of<SkillTreeViewModel>(context);
+    // Initialize the width for the SideBarView
+    double sideBarWidth = 60.0;
+
+    // Initialize the width for the TaskView
+    double taskViewWidth = 280.0;
+
+    // Calculate remaining width after subtracting the width of the SideBarView
+    double remainingWidth = width - sideBarWidth;
+
+    // Declare variables to hold the widths of SkillTreeView, TestQueueView, and ChatView
+    double skillTreeViewWidth = 0;
+    double testQueueViewWidth = 0;
+    double chatViewWidth = 0;
 
-    // Check the screen width and return the appropriate layout
     if (width > 800) {
-      // For larger screens, return a side-by-side layout
       return Row(
         children: [
-          SideBarView(selectedViewNotifier: selectedViewNotifier),
+          SizedBox(
+              width: sideBarWidth,
+              child: SideBarView(selectedViewNotifier: selectedViewNotifier)),
           ValueListenableBuilder(
             valueListenable: selectedViewNotifier,
             builder: (context, String value, _) {
-              if (value == 'TaskView') {
-                return SizedBox(
-                    width: 280, child: TaskView(viewModel: taskViewModel));
-              } else {
-                return Expanded(
-                    child: SkillTreeView(viewModel: skillTreeViewModel));
-              }
+              return Consumer<SkillTreeViewModel>(
+                builder: (context, skillTreeViewModel, _) {
+                  if (value == 'TaskView') {
+                    skillTreeViewModel.resetState();
+                    chatViewWidth = remainingWidth - taskViewWidth;
+                    return Row(
+                      children: [
+                        SizedBox(
+                            width: taskViewWidth,
+                            child: TaskView(viewModel: taskViewModel)),
+                        SizedBox(
+                            width: chatViewWidth,
+                            child: ChatView(viewModel: chatViewModel))
+                      ],
+                    );
+                  } else {
+                    if (skillTreeViewModel.selectedNode != null) {
+                      // If TaskQueueView should be displayed
+                      testQueueViewWidth = remainingWidth * 0.25;
+                      skillTreeViewWidth = remainingWidth * 0.25;
+                      chatViewWidth = remainingWidth * 0.5;
+                    } else {
+                      // If only SkillTreeView and ChatView should be displayed
+                      skillTreeViewWidth = remainingWidth * 0.5;
+                      chatViewWidth = remainingWidth * 0.5;
+                    }
+
+                    return Row(
+                      children: [
+                        SizedBox(
+                            width: skillTreeViewWidth,
+                            child:
+                                SkillTreeView(viewModel: skillTreeViewModel)),
+                        if (skillTreeViewModel.selectedNode != null)
+                          SizedBox(
+                              width: testQueueViewWidth,
+                              child: TaskQueueView()),
+                        SizedBox(
+                            width: chatViewWidth,
+                            child: ChatView(viewModel: chatViewModel)),
+                      ],
+                    );
+                  }
+                },
+              );
             },
           ),
-          Expanded(
-              child: ChatView(
-            viewModel: chatViewModel,
-          )),
         ],
       );
     } else {