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/task_queue/task_queue_view.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+import 'package:auto_gpt_flutter_client/viewmodels/skill_tree_viewmodel.dart';
+import 'package:provider/provider.dart';
+
+// TODO: Add view model for task queue instead of skill tree view model
+class TaskQueueView extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final viewModel = Provider.of<SkillTreeViewModel>(context);
+
+    // Reverse the node hierarchy
+    final reversedHierarchy =
+        viewModel.selectedNodeHierarchy?.reversed.toList() ?? [];
+
+    return Material(
+      color: Colors.white,
+      child: Stack(
+        children: [
+          // The list of tasks (tiles)
+          ListView.builder(
+            itemCount: reversedHierarchy.length,
+            itemBuilder: (context, index) {
+              final node = reversedHierarchy[index];
+              return Container(
+                margin: EdgeInsets.fromLTRB(20, 5, 20, 5),
+                decoration: BoxDecoration(
+                  color: Colors.white, // white background
+                  border: Border.all(
+                      color: Colors.black, width: 1), // thin black border
+                  borderRadius: BorderRadius.circular(4), // small corner radius
+                ),
+                child: ListTile(
+                  title: Center(child: Text('Node ID: ${node.id}')),
+                  subtitle: Center(child: Text('Color: ${node.color}')),
+                ),
+              );
+            },
+          ),
+
+          // Checkmark button at the bottom right
+          Positioned(
+            bottom: 50,
+            right: 50,
+            child: Tooltip(
+              message: 'Run suite of tests',
+              child: ElevatedButton(
+                onPressed: () {
+                  // Add your logic here to run the suite of tests
+                },
+                child: Icon(Icons.check, color: Colors.green),
+                style: ButtonStyle(
+                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                    RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(8.0),
+                    ),
+                  ),
+                  backgroundColor: MaterialStateProperty.all(Colors.white),
+                  side: MaterialStateProperty.all(
+                      BorderSide(color: Colors.green, width: 3)),
+                  minimumSize:
+                      MaterialStateProperty.all(Size(50, 50)), // Square size
+                  padding: MaterialStateProperty.all(EdgeInsets.all(0)),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}