Small changes, solved merge conflicts

Author: justinnas

app/back-end/gunicorn_config.py

@@ -23,5 +23,8 @@
 # Use Gevent worker class for handling asynchronous requests with WebSocket support
 worker_class = "geventwebsocket.gunicorn.workers.GeventWebSocketWorker"
 
+# Maximum number of simultaneous connections
+worker_connections = 1
+
 # Number of worker processes
 workers = multiprocessing.cpu_count() * 2 + 1

app/back-end/src/constants.py

@@ -31,3 +31,4 @@
 
 # Events
 CONSOLE_FEEDBACK_EVENT = "console_feedback"
+WORKSPACE_FILE_SAVE_FEEDBACK_EVENT = "workspace_file_save_feedback"

app/back-end/src/routes/workspace_route.py

@@ -18,7 +18,6 @@
     "@mui/x-tree-view": "^7.12.1",
     "@react-spring/web": "^9.7.4",
     "axios": "^1.7.4",
-    "papaparse": "^5.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0",
@@ -27,7 +26,6 @@
   "devDependencies": {
     "@mui/x-data-grid-generator": "^7.12.1",
     "@types/node": "^22.2.0",
-    "@types/papaparse": "^5.3.14",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",

app/front-end/package.json

@@ -0,0 +1,2 @@
+export { SettingsDialog } from './settingsDialog/settingsDialog';
+export { ShortcutsDialog } from './shortcutsDialog/shortcutsDialog';

app/front-end/src/components/dialogs/index.ts

@@ -0,0 +1,3 @@
+export { SettingsDialog } from './settingsDialog';
+export { SettingSpacer } from './settingSpacer';
+export { SettingsSelectField } from './settingsSelectField';

app/front-end/src/components/dialogs/settingsDialog/index.ts

@@ -0,0 +1,5 @@
+import { Box } from '@mui/material';
+
+export const SettingSpacer = ({ size = 3 }) => {
+  return <Box mb={size} />;
+};

app/front-end/src/components/dialogs/settingsDialog/settingSpacer.tsx

@@ -0,0 +1,63 @@
+import { SettingSpacer } from '@/components/dialogs/settingsDialog';
+import { ColorModeSetting, LanguageSetting, TimeZoneSetting } from '@/components/dialogs/settingsDialog/settingsFields';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { alpha, Box, Dialog, DialogContent, DialogTitle, Grid, IconButton, styled, useTheme } from '@mui/material';
+
+const BootstrapDialog = styled(Dialog)(({ theme }) => ({
+  backdropFilter: 'blur(5px)',
+  '& .MuiDialogContent-root': {
+    padding: '1.5rem',
+  },
+  '& .MuiDialogActions-root': {
+    padding: '1.5rem',
+  },
+  '& .MuiDialog-paper': {
+    borderRadius: '1.5rem',
+    minWidth: '25%',
+    backgroundColor: theme.palette.background.paper,
+    backgroundImage: 'none',
+  },
+}));
+
+interface SettingsDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const SettingsDialog: React.FC<SettingsDialogProps> = ({ open, onClose }) => {
+  const Theme = useTheme();
+
+  return (
+    <BootstrapDialog onClose={onClose} open={open}>
+      <Grid container spacing={2} justifyContent='center' alignItems='center'>
+        <Grid item xs={8}>
+          <DialogTitle sx={{ color: Theme.palette.primary.main, pl: '1.5rem', pt: '1.5rem', fontWeight: '700' }}>
+            Settings
+          </DialogTitle>
+        </Grid>
+        <Grid item xs={4}>
+          <Box display='flex' justifyContent='flex-end'>
+            <IconButton
+              aria-label='close'
+              onClick={onClose}
+              sx={{
+                color: Theme.palette.primary.main,
+                mt: '0.5rem',
+                mr: '1.5rem',
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Box>
+        </Grid>
+      </Grid>
+      <DialogContent sx={{ borderTop: `1px solid ${alpha(Theme.palette.text.secondary, 0.3)}` }}>
+        <ColorModeSetting />
+        <SettingSpacer />
+        <LanguageSetting />
+        <SettingSpacer />
+        <TimeZoneSetting />
+      </DialogContent>
+    </BootstrapDialog>
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsDialog.tsx

@@ -0,0 +1,23 @@
+import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
+import { useThemeContext } from '@/hooks';
+
+export const ColorModeSetting = () => {
+  const ThemeContext = useThemeContext();
+
+  const handleThemeChange = () => {
+    ThemeContext.update();
+  };
+
+  return (
+    <SettingsSelectField
+      title='Color mode'
+      description='Toggle between light and dark modes'
+      settings={[
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+      ]}
+      value={ThemeContext.mode}
+      onChange={handleThemeChange}
+    />
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsFields/colorModeSetting.tsx

@@ -0,0 +1,3 @@
+export { ColorModeSetting } from './colorModeSetting';
+export { LanguageSetting } from './languageSetting';
+export { TimeZoneSetting } from './timeZoneSetting';

app/front-end/src/components/dialogs/settingsDialog/settingsFields/index.ts

@@ -0,0 +1,28 @@
+import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
+import { SelectChangeEvent } from '@mui/material';
+import { useState } from 'react';
+
+export const LanguageSetting = () => {
+  // TODO: Implement language switching functionality and replace with correct values
+
+  const [switchLanguage, setSwitchLanguage] = useState('en');
+
+  const handleLanguageChange = (event: SelectChangeEvent<string>) => {
+    const selectedLanguage = event.target.value;
+    setSwitchLanguage(selectedLanguage);
+  };
+
+  return (
+    <SettingsSelectField
+      title='Language'
+      description='Change the language of the application'
+      settings={[
+        { value: 'en', label: 'English' },
+        { value: 'lt', label: 'Lithuanian' },
+        { value: 'it', label: 'Italian' },
+      ]}
+      value={switchLanguage}
+      onChange={handleLanguageChange}
+    />
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsFields/languageSetting.tsx

@@ -0,0 +1,24 @@
+import { SettingsSelectField } from '@/components/dialogs/settingsDialog';
+import { SelectChangeEvent } from '@mui/material';
+import { useState } from 'react';
+
+export const TimeZoneSetting = () => {
+  // TODO: Implement time zone switching functionality and replace with correct values
+
+  const [switchTimeZone, setSwitchTimeZone] = useState('GMT+3');
+
+  const handleTimeZoneChange = (event: SelectChangeEvent<string>) => {
+    const selectedValue = event.target.value;
+    setSwitchTimeZone(selectedValue);
+  };
+
+  return (
+    <SettingsSelectField
+      title='Time zone'
+      description='Change the time zone of the application'
+      settings={[{ value: 'GMT+3', label: 'GMT+3' }]}
+      value={switchTimeZone}
+      onChange={handleTimeZoneChange}
+    />
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsFields/timeZoneSetting.tsx

@@ -0,0 +1,53 @@
+import { Box, FormControl, Grid, MenuItem, Select, SelectChangeEvent, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+interface Setting {
+  value: string | undefined;
+  label: string;
+}
+
+interface SettingsSelectFieldProps {
+  title: string;
+  description: string;
+  settings: Setting[];
+  value: string | undefined;
+  onChange: (event: SelectChangeEvent) => void;
+}
+
+export const SettingsSelectField: React.FC<SettingsSelectFieldProps> = ({
+  title,
+  description,
+  settings,
+  value,
+  onChange,
+}) => {
+  const Theme = useTheme();
+
+  return (
+    <Grid container spacing={2} justifyContent='center' alignItems='center'>
+      <Grid item xs={8}>
+        <Typography sx={{ fontSize: '1.1rem', fontWeight: '500' }}>{title}</Typography>
+        <Typography sx={{ fontSize: '0.9rem', color: Theme.palette.text.secondary }}>{description}</Typography>
+      </Grid>
+      <Grid item xs={4}>
+        <Box display='flex' justifyContent='flex-end'>
+          <FormControl sx={{ minWidth: 120 }}>
+            <Select
+              value={value}
+              onChange={onChange}
+              displayEmpty
+              size='small'
+              inputProps={{ 'aria-label': 'Without label' }}
+            >
+              {settings.map((setting) => (
+                <MenuItem key={setting.value} value={setting.value}>
+                  {setting.label}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};

app/front-end/src/components/dialogs/settingsDialog/settingsSelectField.tsx

@@ -1,8 +1,12 @@
 import { IconTitleButton } from '@/components/buttons/IconTitleButton';
-import { ShortcutsDialog } from '@/components/dialogs/shortcutsDialog';
-import { useThemeContext } from '@/hooks';
+import { SettingsDialog, ShortcutsDialog } from '@/components/dialogs';
 import { Colors } from '@/types';
-import { AutoMode, DarkMode, Home, LightMode, SettingsOutlined, SwitchAccessShortcut } from '@mui/icons-material';
+import {
+  AutoMode as AutoModeIcon,
+  Home as HomeIcon,
+  SettingsOutlined as SettingsOutlinedIcon,
+  SwitchAccessShortcut as SwitchAccessShortcutIcon,
+} from '@mui/icons-material';
 import { Box, Typography, useTheme } from '@mui/material';
 import { useState } from 'react';
 
@@ -28,7 +32,6 @@ interface Props {
  */
 export const BaseLayout: React.FC<Props> = ({ children }) => {
   const Theme = useTheme();
-  const ThemeContext = useThemeContext();
 
   const [isShortcutsMenuOpen, setIsShortcutsMenuOpen] = useState(false);
   const handleShortcutsMenuOpen = () => {
@@ -38,6 +41,14 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
     setIsShortcutsMenuOpen(false);
   };
 
+  const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false);
+  const handleSettingsDialogOpen = () => {
+    setIsSettingsDialogOpen(true);
+  };
+  const handleSettingsDialogClose = () => {
+    setIsSettingsDialogOpen(false);
+  };
+
   return (
     <Box
       sx={{
@@ -110,11 +121,11 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
             }}
           >
             <IconTitleButton
-              icon={<Home sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
+              icon={<HomeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
               title={'Home'}
             />
             <IconTitleButton
-              icon={<AutoMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
+              icon={<AutoModeIcon sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
               title={'Macros'}
             />
           </Box>
@@ -131,34 +142,27 @@ export const BaseLayout: React.FC<Props> = ({ children }) => {
           >
             <IconTitleButton
               icon={
-                <SettingsOutlined sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />
+                <SettingsOutlinedIcon
+                  sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
+                />
               }
+              onClick={handleSettingsDialogOpen}
             />
             <IconTitleButton
               icon={
-                <SwitchAccessShortcut
+                <SwitchAccessShortcutIcon
                   sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }}
                 />
               }
               onClick={handleShortcutsMenuOpen}
             />
-            {ThemeContext.mode === 'light' ? (
-              <IconTitleButton
-                icon={<DarkMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
-                onClick={() => ThemeContext.update()}
-              />
-            ) : (
-              <IconTitleButton
-                icon={<LightMode sx={{ width: '1.5rem', height: '1.5rem', color: Colors.backgroundPrimaryLight }} />}
-                onClick={() => ThemeContext.update()}
-              />
-            )}
           </Box>
         </Box>
         <Box sx={{ width: '95.75%', height: '99.5%', borderRadius: '0.625rem', bgcolor: Theme.palette.secondary.main }}>
-          <ShortcutsDialog open={isShortcutsMenuOpen} handleClose={handleShortcutsMenuClose} />
           {children}
         </Box>
+        <SettingsDialog open={isSettingsDialogOpen} onClose={handleSettingsDialogClose} />
+        <ShortcutsDialog open={isShortcutsMenuOpen} handleClose={handleShortcutsMenuClose} />
       </Box>
     </Box>
   );

app/front-end/src/components/layouts/baseLayout.tsx

@@ -1,6 +1,7 @@
 import { ConsoleGroup, ConsoleGroupItem } from '@/features/editor/components/consoleView';
 import { ConsoleFeedback } from '@/features/editor/types';
 import { socket } from '@/lib';
+import { Events } from '@/types';
 import { useEffect, useRef, useState } from 'react';
 
 /**
@@ -29,10 +30,10 @@ export const ConsoleView: React.FC = () => {
       setConsoleFeedback((prev) => [...prev, data]);
     };
 
-    socket.on('console_feedback', handleConsoleFeedback);
+    socket.on(Events.CONSOLE_FEEDBACK_EVENT, handleConsoleFeedback);
 
     return () => {
-      socket.off('console_feedback');
+      socket.off(Events.CONSOLE_FEEDBACK_EVENT);
     };
   }, []);
 

app/front-end/src/features/editor/components/consoleView/consoleView.tsx

@@ -0,0 +1,40 @@
+import { styled } from '@mui/material/styles';
+import { GridColumnMenuContainer, GridColumnMenuHideItem, GridColumnMenuProps } from '@mui/x-data-grid';
+
+const StyledGridColumnMenuContainer = styled(GridColumnMenuContainer)(({ theme }) => ({
+  backgroundColor: theme.palette.secondary.main,
+}));
+
+interface GridColumnMenuContainerProps extends GridColumnMenuProps {}
+
+/**
+ * `EditorColumnMenu` component customizes the column menu in a DataGrid with a styled container.
+ *
+ * @description This component extends the default column menu functionality of the DataGrid by applying custom styles
+ * to the menu container. The `StyledGridColumnMenuContainer` applies a background color from the theme's secondary palette
+ * to the menu. The menu includes a `GridColumnMenuHideItem` for hiding the column, which invokes the `hideMenu` function
+ * when clicked.
+ *
+ * @component
+ *
+ * @param {GridColumnMenuContainerProps} props - The props for the component.
+ * @param {() => void} props.hideMenu - A callback function to hide the column menu.
+ * @param {object} props.colDef - Column definition object passed to the menu.
+ * @param {GridColumnMenuProps} [other] - Other props that are passed to the `GridColumnMenuContainer`.
+ *
+ * @example
+ * // Example usage of the EditorColumnMenu component
+ * <EditorColumnMenu
+ *   hideMenu={() => console.log('Hide menu')}
+ *   colDef={columnDefinition}
+ * />
+ *
+ * @returns {JSX.Element} A styled `GridColumnMenuContainer` containing a `GridColumnMenuHideItem`.
+ */
+export const EditorColumnMenu: React.FC<GridColumnMenuContainerProps> = ({ hideMenu, colDef, ...other }) => {
+  return (
+    <StyledGridColumnMenuContainer hideMenu={hideMenu} colDef={colDef} {...other}>
+      <GridColumnMenuHideItem onClick={hideMenu} colDef={colDef!} />
+    </StyledGridColumnMenuContainer>
+  );
+};