feat: default code button

src/six/components/codeEditor/CodeEditor.tsx

@@ -4,6 +4,7 @@
 import './styles.css';
 import FontSizeMenu from '../fontSizeMenu/FontSizeMenu';
 import LanguageSelector from '../languageSelector/LanguageSelector';
+import DefaultCodeModal from '../defaultCodeModal/DefaultCodeModal';
 
 interface CodeEditorProps {
   code: string;
@@ -35,6 +36,10 @@
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
   const monacoInstance = useMonaco();
 
+  const [showDefaultModal, setShowDefaultModal] = useState(false);
+  const openDefaultModal = () => setShowDefaultModal(true);
+  const closeDefaultModal = () => setShowDefaultModal(false);
+
   const [fontSize, setFontSize] = useState(16);
   const [useLocalFontSize, setUseLocalFontSize] = useState(false);
   useState<monaco.editor.IEditorDecorationsCollection | null>(null);
@@ -231,7 +236,7 @@
       return markers;
     }
     return [];
   }, [codeError]);
 
   useEffect(() => {
     if (editorRef.current) {
@@ -242,7 +247,7 @@
         setEditorKey((prevKey) => prevKey + 1);
       }
     }
   }, [codeError, applyMarkers]);
 
   useEffect(() => {
     if (!monacoInstance || !editorRef.current) return;
@@ -513,7 +518,36 @@
             }}
           />
           <LanguageSelector lang={lang} setLang={setLang} />
+          <button
+            type="button"
+            title="Reset editor to default code"
+            className="default-code-button"
+            onClick={openDefaultModal}
+            style={{
+              height: 32,
+              padding: '0 10px',
+              borderRadius: 8,
+              border: '1px solid var(--border-color)',
+              background: 'transparent',
+              color: 'var(--text-color)',
+              cursor: 'pointer',
+            }}
+          >
+            Reset to Default Code
+          </button>
         </div>
+        <DefaultCodeModal
+          open={showDefaultModal}
+          handleClose={closeDefaultModal}
+          setCode={(newCode: string) => {
+            setCode(newCode);
+            if (editorRef.current) {
+              const model = editorRef.current.getModel();
+              if (model) model.setValue(newCode);
+            }
+          }}
+          language={lang}
+        />
         <Editor
           key={editorKey}
           height="90vh"

src/six/components/defaultCodeModal/DefaultCodeModal.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import Modal from '@mui/material/Modal';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { DEFAULT_C_CODE, DEFAULT_CPP_CODE } from '../../pages/graphs/graphsPage';
+
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 480,
+  bgcolor: 'var(--surface)',
+  color: 'var(--text-color)',
+  border: '1px solid var(--border-color)',
+  boxShadow: '0 12px 32px rgba(0,0,0,0.35)',
+  borderRadius: 12,
+  p: 3,
+  zIndex: 10005,
+};
+
+export default function DefaultCodeModal({
+  open,
+  handleClose,
+  setCode,
+  language,
+}: {
+  open: boolean;
+  handleClose: () => void;
+  setCode: (code: string) => void;
+  language: string;
+}) {
+  const handleConfirm = () => {
+    if (language === 'c') {
+      setCode(DEFAULT_C_CODE);
+    } else {
+      setCode(DEFAULT_CPP_CODE);
+    }
+    handleClose();
+  };
+
+  return (
+    <Modal
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="default-code-modal-title"
+      aria-describedby="default-code-modal-description"
+      sx={{ '& .MuiModal-backdrop': { zIndex: 10004 } }}
+    >
+      <Box sx={style}>
+        <Typography
+          id="default-code-modal-title"
+          variant="h6"
+          component="h2"
+          sx={{ color: 'var(--text-color)' }}
+        >
+          Reset Editor to Default Code
+        </Typography>
+
+        <Typography
+          id="default-code-modal-description"
+          variant="body2"
+          sx={{ color: 'var(--text-color)', mt: 1 }}
+        >
+          This will replace the current editor contents with the default starter code. This action
+          cannot be undone unless you have a saved copy. Are you sure you want to continue?
+        </Typography>
+
+        <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1.5, mt: 3 }}>
+          <Button
+            onClick={handleClose}
+            variant="outlined"
+            sx={{
+              color: 'var(--text-color)',
+              borderColor: 'var(--border-color)',
+              textTransform: 'none',
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            variant="contained"
+            sx={{
+              backgroundColor: 'var(--danger)',
+              color: 'var(--primary-contrast)',
+              textTransform: 'none',
+              '&:hover': { filter: 'brightness(0.95)' },
+            }}
+          >
+            Confirm
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+}

src/six/pages/graphs/graphsPage.tsx

@@ -37,7 +37,7 @@
 const DEFAULT_LANG = 'c';
 
 // Fallback default code for empty sessions (matches SessionManager)
-const DEFAULT_C_CODE = `#include <stdio.h>
+export const DEFAULT_C_CODE = `#include <stdio.h>
 #include <stdlib.h>
 
 typedef struct {
@@ -72,7 +72,7 @@
     return 0;
 }`;
 
-const DEFAULT_CPP_CODE = `#include <iostream>
+export const DEFAULT_CPP_CODE = `#include <iostream>
 #include <vector>
 using namespace std;
 class IntArray {
@@ -293,7 +293,7 @@
       setCurrentSessionId(loadedSessions[0].id);
       loadSession(loadedSessions[0]);
     } else {
       // Create a new session if none exist
       const newSession = SessionManager.createSession();
       setSessions([newSession]);
       setCurrentSessionId(newSession.id);