feat: add button to go to strategy editor

Author: Elscrux

src/components/solvers/SolverConfiguration.tsx

@@ -1,5 +1,7 @@
-import { Button, Flex, Tooltip } from "@chakra-ui/react";
+import { Button, Flex, HStack, Link, Tooltip } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
+import { BsArrowUpRight } from "react-icons/bs";
+import { FaPlay } from "react-icons/fa6";
 import { getInvalidProblemDto } from "../../api/toolbox/data-model/ProblemDto";
 import { toolboxApi } from "../../api/toolbox/ToolboxAPI";
 import { StrategyProvider } from "./Graph/MetaSolverStrategyProvider";
@@ -32,24 +34,41 @@ export const SolverConfiguration = (props: SolverConfigurationProps) => {
   return (
     <Flex alignSelf="center">
       {problemId === null ? (
-        <Tooltip label="Unleash the Qubits!" color="white">
-          <Button
-            colorScheme="teal"
-            size="md"
-            onClick={() => {
-              toolboxApi
-                .postProblem<string>(props.problemTypeId, {
-                  ...getInvalidProblemDto<string>(),
-                  input: props.problemInput,
-                })
-                .then((problem) => {
-                  setProblemId(problem.id);
-                });
-            }}
-          >
-            Configure {props.problemTypeName} Solver
-          </Button>
-        </Tooltip>
+        <HStack>
+          <Tooltip label="Interactively configure and solve this problem using a selection of various solvers.">
+            <Button
+              bg="kitGreen"
+              textColor="white"
+              size="md"
+              gap="5px"
+              onClick={() => {
+                toolboxApi
+                  .postProblem<string>(props.problemTypeId, {
+                    ...getInvalidProblemDto<string>(),
+                    input: props.problemInput,
+                  })
+                  .then((problem) => {
+                    setProblemId(problem.id);
+                  });
+              }}
+            >
+              <FaPlay />
+              Configure {props.problemTypeName ?? props.problemTypeId} Solver
+            </Button>
+          </Tooltip>
+
+          <Tooltip label="Create and save a strategy what solvers to use.">
+            <Link
+              href={process.env.NEXT_PUBLIC_MSS_EDITOR_BASE_URL}
+              target="_blank"
+            >
+              <Button bg="kitBlue" textColor="white" size="md" gap="5px">
+                <BsArrowUpRight />
+                Go to Strategy Editor
+              </Button>
+            </Link>
+          </Tooltip>
+        </HStack>
       ) : (
         <SolverProvider>
           <StrategyProvider>