Merge remote-tracking branch 'origin/master' into editor-robot-api

Actually fix all the merge conflicts.

src/renderer/AppConsole.css

@@ -15,6 +15,7 @@
   margin: 0;
   margin-bottom: 50px;
   min-height: 0;
+  scroll-behavior: smooth;
 }
 .AppConsole-message {
   padding: 2px;

src/renderer/AppConsole.tsx

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from 'react';
 import AppConsoleMessage from '../common/AppConsoleMessage';
 import './AppConsole.css';
 
@@ -14,9 +15,18 @@ export default function AppConsole({
   height: number;
   messages: AppConsoleMessage[];
 }) {
+  // Add autoscroll feature to AppConsole by setting the current scrollTop prop to the current scrollHeight value
+  const consoleRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    if (consoleRef.current) {
+      consoleRef.current.scrollTop = consoleRef.current.scrollHeight;
+    }
+  }, [messages]);
+
   return (
     <div className="AppConsole" style={{ height }}>
-      <pre className="AppConsole-inner">
+      <pre ref={consoleRef} className="AppConsole-inner">
         {messages.map((msg: AppConsoleMessage) => (
           <div
             key={msg.uuid}

src/renderer/editor/Editor.css

@@ -92,6 +92,8 @@
 .Editor-toolbar img {
   width: 100%;
   height: 100%;
+  width: 20px;
+  height: 20px;
   transition: filter 0.25s;
   /* Fix other filter variables so transition is directly from black to blue: */
   filter: invert(0%) sepia(100%) hue-rotate(180deg) saturate(0);

src/renderer/editor/Editor.tsx

@@ -1,9 +1,21 @@
 import { useState, useEffect, useRef } from 'react';
 import AceEditor from 'react-ace';
+import addEditorAutocomplete from './addEditorAutocomplete';
+import addEditorTooltips from './addEditorTooltips';
+
 import 'ace-builds/src-noconflict/mode-python';
 import 'ace-builds/src-noconflict/snippets/python';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/ext-searchbox';
+import 'ace-builds/src-noconflict/theme-chrome';
+import 'ace-builds/src-noconflict/theme-clouds';
+import 'ace-builds/src-noconflict/theme-dawn';
+import 'ace-builds/src-noconflict/theme-dreamweaver';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/theme-tomorrow_night';
+import 'ace-builds/src-noconflict/theme-clouds_midnight';
+import 'ace-builds/src-noconflict/theme-ambiance';
+
 import uploadSvg from '../../../assets/upload.svg';
 import downloadSvg from '../../../assets/download.svg';
 import openSvg from '../../../assets/open.svg';
@@ -18,8 +30,8 @@ import zoomOutSvg from '../../../assets/zoom-out.svg';
 import startRobot from '../../../assets/start-robot.svg';
 import stopRobot from '../../../assets/stop-robot.svg';
 import keyboardKeySvg from '../../../assets/keyboard-key.svg';
-import addEditorAutocomplete from './addEditorAutocomplete';
-import addEditorTooltips from './addEditorTooltips';
+import themeSvg from '../../../assets/theme.svg';
+
 import './Editor.css';
 
 /**
@@ -43,6 +55,7 @@ const STATUS_TOOLTIPS: { [k in EditorContentStatus]: string } = {
   extDirty:
     'The code that will be uploaded to the robot was last changed in an external program.',
 };
+
 /**
  * Content of the editor status indicator (next to the file name).
  */
@@ -52,6 +65,20 @@ const STATUS_TEXT: { [k in EditorContentStatus]: string } = {
   extDirty: 'Externally modified',
 };
 
+/**
+ * Color themes for the ACE code editor.
+ */
+const ACE_THEMES = {
+  dawn: 'Dawn',
+  chrome: 'Chrome',
+  clouds: 'Clouds',
+  dreamweaver: 'Dreamweaver',
+  monokai: 'Monokai',
+  tomorrow_night: 'Tomorrow Night',
+  clouds_midnight: 'Clouds Midnight',
+  ambiance: 'Ambiance',
+};
+
 /**
  * Component holding the Ace editor and editor toolbar.
  * @param props - props
@@ -154,6 +181,12 @@ export default function Editor({
     }
   }, [editorRef]);
 
+  const [theme, setTheme] = useState('dawn'); // Default theme
+  const handleThemeChange = (newTheme: string) => {
+    const cleanTheme = newTheme.replace('ace/theme/', '');
+    setTheme(cleanTheme);
+  };
+
   return (
     <div
       className={`Editor${
@@ -252,6 +285,17 @@ export default function Editor({
             <img src={keyboardKeySvg} alt="Toggle keyboard controls" />
           </button>
         </div>
+        <div className="Editor-toolbar-group">
+          <img src={themeSvg} alt="Change Theme" />
+          <select
+            onChange={(e) => handleThemeChange(`ace/theme/${e.target.value}`)}
+            name="Editor-toolbar-opmode"
+          >
+            {Object.entries(ACE_THEMES).map(([themeKey, themeName]) => (
+              <option key={themeKey} value={themeKey}>{themeName}</option>
+            ))}
+          </select>
+        </div>
         <div className="Editor-toolbar-group">
           <label className="Editor-tbopmode" htmlFor="Editor-toolbar-opmode">
             OpMode:
@@ -298,6 +342,7 @@ export default function Editor({
           <span>Keyboard input sent to robot -- disable to edit code</span>
         </div>
         <AceEditor
+          theme={theme}
           fontSize={fontSize}
           style={{ width: '100%', height: '100%' }}
           mode="python"