chore: working on this, probably will abandon

Merge pull request #7 from sern-handler/fix/locale-emojis
fix: language selector not showing emojis on windows
2026-06-06 09:26:54 +00:00 · 2023-09-22 22:59:04 +02:00 · 2023-09-17 16:39:25 -05:00 · 2023-09-17 20:44:22 +02:00 · 2023-09-17 20:03:29 +02:00 · 2023-08-24 14:12:08 +02:00
13 changed files with 127 additions and 18 deletions
--- a/index.html
+++ b/index.html
@@ -5,6 +5,9 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
--- a/locales/en.json
+++ b/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",
--- a/package.json
+++ b/package.json
@@ -29,17 +29,19 @@
    "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",
-    "electron": "^25.2.0",
+    "electron": "^26.2.1",
    "electron-builder": "^24.4.0",
    "eslint": "^8.44.0",
    "eslint-plugin-react-hooks": "^4.6.0",
--- a/src/App.css
+++ b/src/App.css
@@ -1,11 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');

-/* @font-face {
-	font-family: 'Classic Console Neue';
-	src: local('Classic Console Neue'),
-		url('https://fonts.srizan.dev/clacon2.ttf') format('truetype');
-} */
-
 .titleHeader {
 	color: #4af626;
 	font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
@@ -17,6 +11,5 @@
 	gap: 30px;
 	padding: 20px;
 	align-items: center;
-	display: 'grid';
 	grid-template-columns: repeat(2, 1fr);
 }
--- a/src/App.tsx
+++ b/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">
--- a/src/ComponentLoadTimeWidget.css
+++ b/src/ComponentLoadTimeWidget.css
--- a/src/ComponentLoadTimeWidget.tsx
+++ b/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>
+	)
+}
--- a/src/InitModal.tsx
+++ b/src/InitModal.tsx
@@ -49,7 +49,7 @@ export default function InitModal() {

  const [templates, setTemplates] = React.useState<Array<TemplateList>>([]);
  React.useEffect(() => {
-    fetch('https://raw.githubusercontent.com/sern-handler/create-bot/main/metadata/templateChoices.jso')
+    fetch('https://raw.githubusercontent.com/sern-handler/create-bot/main/metadata/templateChoices.json')
      .then((res) => res.json())
      .then((data) => {
        setTemplates(data as TemplateList[]);
--- a/src/LanguageSelector.css
+++ b/src/LanguageSelector.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
+
 .languageSelector {
    position: absolute;
    top: 15px;
--- a/src/LanguageSelector.tsx
+++ b/src/LanguageSelector.tsx
@@ -25,12 +25,13 @@ export default function LanguageSelector() {
 						height: '40px',
 						textAlign: 'center',
 						// this fixes a little text selection gap that appears in a
-						// few pixels outside the outer part of the selection "square"
-						cursor: 'pointer'
+						// few pixels outside the outer part of the selection outline
+						cursor: 'pointer',
+						fontFamily: 'Noto Color Emoji'
 					}}
 				>
-					<MenuItem value={'en'} className={'menuItems'}>🇺🇸</MenuItem>
-					<MenuItem value={'es'} className={'menuItems'}>🇪🇸</MenuItem>
+					<MenuItem value={'en'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇺🇸</MenuItem>
+					<MenuItem value={'es'} className={'menuItems'} sx={{ fontFamily: 'Noto Color Emoji' }}>🇪🇸</MenuItem>
 				</Select>
 			</FormControl>
 		</div>
--- a/src/Settings.css
+++ b/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;
+}
--- a/src/Settings.tsx
+++ b/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>
+	)
+}
--- a/yarn.lock
+++ b/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"
@@ -1814,10 +1819,10 @@ electron-publish@24.4.0:
    lazy-val "^1.0.5"
    mime "^2.5.2"

-electron@^25.2.0:
-  version "25.3.0"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-25.3.0.tgz#e818ab3ebd3e7a45f8fca0f47e607c9af2dc92c7"
-  integrity sha512-cyqotxN+AroP5h2IxUsJsmehYwP5LrFAOO7O7k9tILME3Sa1/POAg3shrhx4XEnaAMyMqMLxzGvkzCVxzEErnA==
+electron@^26.2.1:
+  version "26.2.1"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-26.2.1.tgz#2ef86c03d9753647622bb9a53c4213fb290e5eac"
+  integrity sha512-SNT24Cf/wRvfcFZQoERXjzswUlg5ouqhIuA2t9x2L7VdTn+2Jbs0QXRtOfzcnOV/raVMz3e8ICyaU2GGeciKLg==
  dependencies:
    "@electron/get" "^2.0.0"
    "@types/node" "^18.11.18"
@@ -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"
Author	SHA1	Message	Date
SrIzan10	524399a2ee	chore: working on this, probably will abandon	2023-09-22 22:59:04 +02:00
Jacob Nguyen	81996728cd	Merge pull request #7 from sern-handler/fix/locale-emojis fix: language selector not showing emojis on windows	2023-09-17 16:39:25 -05:00
SrIzan10	3301b99308	fix: language selector not showing emojis on windows (and probably macOS)	2023-09-17 20:44:22 +02:00
SrIzan10	3d7161e5af	chore: update electron to newer version	2023-09-17 20:03:29 +02:00
SrIzan10	ede5e73f0b	fix: another testing remnant from the past	2023-08-24 14:12:08 +02:00
Izan Gil Cruz	cc615f91fa	Merge pull request #6 from sern-handler/fix-builds fix: build errors	2023-08-23 22:51:58 +02:00