chore: working on this, probably will abandon

locales/en.json

@@ -29,6 +29,9 @@
       "COMMENT_FOR_TRANSLATOR_2": "the next string is used to change the text 'with' in the sentence 'with <package manager>'",
       "with": "with"
     },
+    "settings": {
+      "componentLoadTimes": "Component load times (some of them)"
+    },
     "footer": {
       "COMMENT_FOR_TRANSLATOR": "Keep all the strings here as lowercase. It kinda gives a good vibe to the text :D",
       "web": "front page",

package.json

@@ -29,13 +29,15 @@
     "i18next": "^23.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.1.2"
+    "react-i18next": "^13.1.2",
+    "to-boolean": "^1.0.0"
   },
   "devDependencies": {
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.70",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
+    "@types/to-boolean": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "@vitejs/plugin-react-swc": "^3.3.2",

src/App.tsx

@@ -4,6 +4,7 @@ import './FunctionalityCard.js';
 import FunctionalityCard from './FunctionalityCard.js';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import LanguageSelector from './LanguageSelector';
+import Settings from './Settings';
 
 const darkTheme = createTheme({
 	palette: {
@@ -18,6 +19,7 @@ function App() {
 	return (
 		<div className="App">
 			<ThemeProvider theme={darkTheme}>
+				<Settings />
 				<LanguageSelector />
 				<h1 className="titleHeader">~$ sern</h1>
 				<div className="functionalityCards">

src/ComponentLoadTimeWidget.tsx

@@ -0,0 +1,7 @@
+import './ComponentLoadTimeWidget.css'
+
+export default function ComponentLoadTimeWidget(props: { state: { show: boolean, ad: number, bd: number } }) {
+	return (
+		<p>hi from the widget</p>
+	)
+}

src/Settings.css

@@ -0,0 +1,13 @@
+.boxStyle {
+    /* background-color: 'background.paper'; set in sx property of Box tag */
+    transform: translate(-50%, -50%);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 74.6vw;
+    height: 74.6vh;
+    border: 2px solid #FFF;
+    box-shadow: 24px;
+    padding: 40px;
+    color: white;
+}

src/Settings.tsx

@@ -0,0 +1,73 @@
+import './Settings.css';
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Modal from '@mui/material/Modal';
+import SettingsIcon from '@mui/icons-material/Settings';
+import Checkbox from '@mui/material/Checkbox';
+import { useTranslation } from 'react-i18next';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import { Profiler } from 'react';
+import ComponentLoadTimeWidget from './ComponentLoadTimeWidget';
+
+export default function Settings() {
+	const [CLTW, setCLTW] = React.useState({ show: false, ad: 0, bd: 0 })
+	const onRender = (_id: string, _phase: string, actualDuration: number, baseDuration: number, _startTime: EpochTimeStamp, _commitTime: EpochTimeStamp) => {
+		if (!!window.localStorage.getItem('componentLoadTimes')) {
+			setCLTW({
+				show: true,
+				ad: actualDuration,
+				bd: baseDuration
+			})
+		}
+	}
+
+	const { t } = useTranslation('translation', { keyPrefix: 'settings' });
+	const [state, setState] = React.useState({
+		componentLoadTimes: !!window.localStorage.getItem('componentLoadTimes')
+	});
+	const { componentLoadTimes } = state;
+
+	const [open, setOpen] = React.useState(false);
+	const handleModalOpen = () => setOpen(true);
+	const handleModalClose = () => setOpen(false);
+
+	const handleButtonChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setState({ ...state, [event.target.name]: event.target.checked });
+		switch (event.target.name) {
+			case 'componentLoadTimes':
+				return window.localStorage.setItem('componentLoadTimes', event.target.checked.toString())
+		}
+		console.log(state)
+	}
+
+	return (
+		<div>
+			<SettingsIcon onClick={handleModalOpen} color={'primary'} />
+			<Profiler onRender={onRender} id={'settings-modal'}>
+				<ComponentLoadTimeWidget state={CLTW} />
+				<Modal
+					open={open}
+					onClose={handleModalClose}
+					aria-labelledby="settings-modal-title"
+					aria-describedby="settings-modal-description"
+				>
+					<Box className={'boxStyle'} sx={{ bgcolor: 'background.paper' }}>
+						<FormGroup>
+							<Typography variant="h5" gutterBottom>
+								Debugging
+							</Typography>
+							<FormControlLabel
+								control={
+									<Checkbox checked={componentLoadTimes} onChange={handleButtonChange} name="componentLoadTimes" />
+								}
+								label={t('componentLoadTimes')}
+							/>
+						</FormGroup>
+					</Box>
+				</Modal>
+			</Profiler>
+		</div>
+	)
+}

yarn.lock

@@ -915,6 +915,11 @@
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
   integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
 
+"@types/to-boolean@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/to-boolean/-/to-boolean-1.0.0.tgz#bce7dd64d2d4dc644d39c69f4cdf62867e1bd5dd"
+  integrity sha512-rKY7I5UUlC3mUjGasRsZyg/ksLqUDQMahpn0QWXA3nxZehZF25rJpbvTB37Vjd61iW3j662L3Iu/WlRdGlDcJQ==
+
 "@types/verror@^1.10.3":
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/@types/verror/-/verror-1.10.6.tgz#3e600c62d210c5826460858f84bcbb65805460bb"
@@ -3946,6 +3951,11 @@ tmp@^0.2.0:
   dependencies:
     rimraf "^3.0.0"
 
+to-boolean@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/to-boolean/-/to-boolean-1.0.0.tgz#840653cc95abde6ae7fa259e7d74868a91232e3f"
+  integrity sha512-6BregB7cU5D+BVONyLbjoOd3dZXWDNyz6GFu+WdTzd5YbLcgFdZFstwsSgEmELmjdWy9U5e38q2sYSlFhka/Lw==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"