improve: use i18n

Author: afarago

src/editor/Editor.tsx

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2020-2023 The Pybricks Authors
+// Copyright (c) 2020-2024 The Pybricks Authors
 
 import './editor.scss';
 import {
@@ -510,7 +510,7 @@ const Editor: React.FunctionComponent = () => {
                 <ContextMenu
                     className={classNames('pb-editor-tabpanel', isEmpty && 'pb-empty')}
                     role="tabpanel"
-                    aria-label={isEmpty ? i18n.translate('welcome') : fileName}
+                    aria-label={isEmpty ? i18n.translate('welcome.label') : fileName}
                     // NB: we have to create a new context menu each time it is
                     // shown in order to get some state, like canUndo and canRedo
                     // that don't have events to monitor changes.

src/editor/Welcome.tsx

@@ -11,6 +11,7 @@ import Two from 'two.js';
 import { useTernaryDarkMode } from 'usehooks-ts';
 import { Activity, useActivitiesSelectedActivity } from '../activities/hooks';
 import { explorerCreateNewFile } from '../explorer/actions';
+import { useI18n } from './i18n';
 import logoSvg from './logo.svg';
 
 const defaultRotation = -Math.PI / 9; // radians
@@ -65,6 +66,7 @@ type WelcomeProps = {
 };
 
 const Welcome: React.FunctionComponent<WelcomeProps> = ({ isVisible }) => {
+    const i18n = useI18n();
     const dispatch = useDispatch();
     const stateRef = useRef<State>({
         rotation: defaultRotation,
@@ -182,13 +184,13 @@ const Welcome: React.FunctionComponent<WelcomeProps> = ({ isVisible }) => {
             <div className="logo" ref={elementRef}></div>
             <div className="shortcuts">
                 <dl>
-                    <dt>Open existing project</dt>
+                    <dt>{i18n.translate('welcome.openProject')}</dt>
                     <dd>
                         <Button icon={<Document />} onClick={handleOpenExplorer} />
                     </dd>
                 </dl>
                 <dl>
-                    <dt>Open a new project</dt>
+                    <dt>{i18n.translate('welcome.newProject')}</dt>
                     <dd>
                         <Button icon={<Plus />} onClick={handleOpenNewProject} />
                     </dd>

src/editor/translations/en.json

@@ -2,7 +2,6 @@
     "tablist": {
         "label": "Editor"
     },
-    "welcome": "Welcome",
     "placeholder": "Write your program here...",
     "check": "Check syntax",
     "toggleDocs": "Toggle documentation",
@@ -16,5 +15,10 @@
     "docs": {
         "show": "Show documentation",
         "hide": "Hide documentation"
+    },
+    "welcome": {
+        "label": "Welcome",
+        "openProject": "Open existing project",
+        "newProject": "Open a new project"
     }
 }