web: Add routes, solve button

web/frontend/src/components/CaseBuilder/CaseBuilder.tsx

@@ -91,6 +91,10 @@ const CaseBuilder = () => {
     setAndSaveScenario(undoStack[undoStack.length - 1]!, false);
   };
 
+  const onSolve = () => {
+    console.log("Solve!");
+  };
+
   return (
     <div>
       <Header
@@ -98,6 +102,7 @@ const CaseBuilder = () => {
         onSave={onSave}
         onLoad={onLoad}
         onUndo={onUndo}
+        onSolve={onSolve}
       />
       <div className="content">
         <Parameters

web/frontend/src/components/CaseBuilder/Header.tsx

@@ -15,6 +15,7 @@ interface HeaderProps {
   onSave: () => void;
   onUndo: () => void;
   onLoad: (data: UnitCommitmentScenario) => void;
+  onSolve: () => void;
 }
 
 function Header(props: HeaderProps) {
@@ -36,6 +37,11 @@ function Header(props: HeaderProps) {
           <SiteHeaderButton title="Clear" onClick={props.onClear} />
           <SiteHeaderButton title="Load" onClick={onLoad} />
           <SiteHeaderButton title="Save" onClick={props.onSave} />
+          <SiteHeaderButton
+            title="Solve"
+            variant="primary"
+            onClick={props.onSolve}
+          />
         </div>
         <FileUploadElement ref={fileElem} accept=".json,.json.gz" />
       </div>

web/frontend/src/components/Common/Buttons/SiteHeaderButton.module.css

@@ -12,17 +12,33 @@
   box-shadow: var(--box-shadow);
   border-radius: var(--border-radius);
   cursor: pointer;
-  color: var(--contrast-80);
   text-transform: uppercase;
   font-weight: bold;
   font-size: 12px;
+}
+
+.light {
+  color: var(--contrast-80);
   background: linear-gradient(var(--contrast-0) 25%, var(--contrast-10) 100%);
 }
 
-.SiteHeaderButton:hover {
+.light:hover {
   background: rgb(245, 245, 245);
 }
 
-.SiteHeaderButton:active {
+.light:active {
   background: rgba(220, 220, 220);
 }
+
+.primary {
+  color: white;
+  background: linear-gradient(var(--primary) 25%, color-mix(in hsl, #000, var(--primary) 90%) 100%);
+}
+
+.primary:hover {
+  background: color-mix(in hsl, #fff, var(--primary) 90%);
+}
+
+.primary:active {
+  background: color-mix(in hsl, #000, var(--primary) 90%);
+}

web/frontend/src/components/Common/Buttons/SiteHeaderButton.tsx

@@ -9,12 +9,19 @@ import styles from "./SiteHeaderButton.module.css";
 function SiteHeaderButton({
   title,
   onClick,
+  variant = "light",
 }: {
   title: string;
   onClick?: () => void;
+  variant?: "light" | "primary";
 }) {
+  const variantClass = variant === "primary" ? styles.primary : styles.light;
+
   return (
-    <button className={styles.SiteHeaderButton} onClick={onClick}>
+    <button
+      className={`${styles.SiteHeaderButton} ${variantClass}`}
+      onClick={onClick}
+    >
       {title}
     </button>
   );

web/frontend/src/index.tsx

@@ -8,15 +8,21 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import reportWebVitals from "./reportWebVitals";
 import CaseBuilder from "./components/CaseBuilder/CaseBuilder";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement,
 );
 
 root.render(
-  <React.StrictMode>
-    <CaseBuilder />
-  </React.StrictMode>,
+  <BrowserRouter>
+    <React.StrictMode>
+      <Routes>
+        <Route path="/builder" element={<CaseBuilder />} />
+        <Route path="/" element={<Navigate to="/builder" replace />} />
+      </Routes>
+    </React.StrictMode>
+  </BrowserRouter>,
 );
 
 reportWebVitals();