From 5f862f55d94bb867e4adbaf35c33a999283e3538 Mon Sep 17 00:00:00 2001
From: Reece <reecebrowne1995@gmail.com>
Date: Wed, 28 May 2025 22:18:19 +0100
Subject: [PATCH] Restore theme toggle

---
 frontend/src/pages/HomePage.tsx | 37 +++++++++++++++++++++++++++------
 frontend/tsconfig.json          |  2 +-
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 4e6b5e782..579d60c3e 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -154,7 +154,7 @@ const TOOL_PARAMS = {
 export default function HomePage() {
   const [searchParams, setSearchParams] = useSearchParams();
   const theme = useMantineTheme();
-  const { colorScheme } = useMantineColorScheme(); // <-- Call hook ONCE at the top
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
   // Core app state
   const [selectedToolKey, setSelectedToolKey] = useState<string>(searchParams.get("tool") || "split");
@@ -260,7 +260,7 @@ export default function HomePage() {
         style={{
           flex: 1,
           height: "100vh",
-          minWidth:"20rem",
+          minWidth: "20rem",
           position: "relative",
           display: "flex",
           flexDirection: "column",
@@ -268,19 +268,44 @@ export default function HomePage() {
           background: colorScheme === "dark" ? theme.colors.dark[6] : "#f8f9fa",
         }}
       >
-        {/* Overlayed View Switcher */}
+        {/* Overlayed View Switcher + Theme Toggle */}
         <div
           style={{
             position: "absolute",
             left: 0,
             width: "100%",
-            display: "flex",
-            justifyContent: "center",
+            top: 0,
             zIndex: 30,
             pointerEvents: "none",
           }}
         >
-          <div style={{ pointerEvents: "auto" }}>
+          <div
+            style={{
+              position: "absolute",
+              left: 16,
+              top: "50%",
+              transform: "translateY(-50%)",
+              pointerEvents: "auto",
+            }}
+          >
+            <Button
+              onClick={toggleColorScheme}
+              variant="subtle"
+              size="md"
+              aria-label="Toggle theme"
+            >
+              {colorScheme === "dark" ? <LightModeIcon /> : <DarkModeIcon />}
+            </Button>
+          </div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%",
+              pointerEvents: "auto",
+            }}
+          >
             <SegmentedControl
               data={VIEW_OPTIONS}
               value={currentView}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index bf86ee2b5..00a8eb39e 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -11,7 +11,7 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2024",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
     // "libReplacement": true,                           /* Enable lib replacement. */