Multi-lingual changes

Author: stever

apps/web/src/components/ActivityFeed.jsx

@@ -11,6 +11,7 @@ import { formatDistanceToNow } from "date-fns";
 import { fetchActivityFeed } from "../redux/social/actions";
 import { getLanguageLabel } from "../lib/lang";
 import ProjectThumbnail from "./ProjectThumbnail";
+import { useTranslation } from "@zxplay/i18n";
 import { sep } from "../constants";
 
 function getLanguageColor(lang) {
@@ -27,6 +28,7 @@ function getLanguageColor(lang) {
 }
 
 export default function ActivityFeed() {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
 
   const currentUserId = useSelector((state) => state?.identity.userId);
@@ -51,10 +53,7 @@ export default function ActivityFeed() {
   if (!currentUserId) {
     return (
       <Card className="m-2">
-        <Message
-          severity="info"
-          text="Please log in to view your activity feed"
-        />
+        <Message severity="info" text={t("feed.loginPrompt")} />
       </Card>
     );
   }
@@ -70,14 +69,19 @@ export default function ActivityFeed() {
   return (
     <Titled title={(s) => `Feed ${sep} ${s}`}>
       <div className="m-2">
-        <Card title="Feed">
+        <Card title={t("nav.feed")}>
           <p className="text-500 mb-4">
-            Recent projects from users you follow
+            {t("feed.subtitle")}
             {feedTotalCount > 0 && (
               <span className="ml-2">
-                (showing {feedPage * feedPageSize + 1} -{" "}
-                {Math.min((feedPage + 1) * feedPageSize, feedTotalCount)} of{" "}
-                {feedTotalCount})
+                {t("feed.showing", {
+                  first: feedPage * feedPageSize + 1,
+                  last: Math.min(
+                    (feedPage + 1) * feedPageSize,
+                    feedTotalCount
+                  ),
+                  total: feedTotalCount,
+                })}
               </span>
             )}
           </p>
@@ -126,13 +130,13 @@ export default function ActivityFeed() {
 
                             <div className="mt-auto text-400 text-sm relative z-1">
                               <div>
-                                by @
+                                {t("feed.by")} @
                                 {userSlug ||
                                   project.owner?.greeting_name ||
                                   "unknown"}
                               </div>
                               <div>
-                                Updated{" "}
+                                {t("feed.updated")}{" "}
                                 {formatDistanceToNow(
                                   new Date(project.updated_at),
                                   { addSuffix: true }
@@ -160,10 +164,8 @@ export default function ActivityFeed() {
           ) : (
             <div className="text-center py-4">
               <i className="pi pi-inbox text-4xl text-300 mb-3" />
-              <p className="text-500">No activity yet</p>
-              <p className="text-sm">
-                Follow other users to see their public projects here
-              </p>
+              <p className="text-500">{t("feed.none")}</p>
+              <p className="text-sm">{t("feed.followHint")}</p>
             </div>
           )}
         </Card>

apps/web/src/components/AvatarPixelEditor.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "primereact/button";
+import { useTranslation } from "@zxplay/i18n";
 
 // ZX Spectrum color palette
 const SPECTRUM_COLORS = [
@@ -21,6 +22,7 @@ const SPECTRUM_COLORS = [
 ];
 
 export default function AvatarPixelEditor({ identifier, onSave, onCancel, customAvatarData }) {
+  const { t } = useTranslation();
   const [grid, setGrid] = useState(() => {
     // Initialize empty 8x8 grid
     return Array(8)
@@ -151,7 +153,7 @@ export default function AvatarPixelEditor({ identifier, onSave, onCancel, custom
         {/* Left side - Drawing canvas */}
         <div className="flex-grow-1">
           <div className="mb-2">
-            <h4 className="m-1">Draw Your Avatar</h4>
+            <h4 className="m-1">{t("avatar.drawTitle")}</h4>
           </div>
 
           <div
@@ -197,25 +199,25 @@ export default function AvatarPixelEditor({ identifier, onSave, onCancel, custom
           {/* Tools */}
           <div className="mt-3 flex gap-2">
             <Button
-              label="Clear"
+              label={t("avatar.clear")}
               icon="pi pi-trash"
               className="p-button-sm p-button-outlined"
               onClick={clearGrid}
             />
             <Button
-              label="Fill"
+              label={t("avatar.fill")}
               icon="pi pi-stop"
               className="p-button-sm p-button-outlined"
               onClick={fillGrid}
             />
             <Button
-              label="Flip"
+              label={t("avatar.flip")}
               icon="pi pi-arrows-h"
               className="p-button-sm p-button-outlined"
               onClick={flipHorizontal}
             />
             <Button
-              label="Flip"
+              label={t("avatar.flip")}
               icon="pi pi-arrows-v"
               className="p-button-sm p-button-outlined"
               onClick={flipVertical}
@@ -225,7 +227,7 @@ export default function AvatarPixelEditor({ identifier, onSave, onCancel, custom
 
         {/* Right side - Color palette and preview */}
         <div style={{ width: "200px" }}>
-          <h4 className="m-0 mb-2">Colors</h4>
+          <h4 className="m-0 mb-2">{t("avatar.colors")}</h4>
 
           {/* Tool selection */}
           <div className="flex gap-1 mb-2">
@@ -278,7 +280,7 @@ export default function AvatarPixelEditor({ identifier, onSave, onCancel, custom
           </div>
 
           {/* Preview */}
-          <h4 className="mt-3 mb-2">Preview</h4>
+          <h4 className="mt-3 mb-2">{t("avatar.preview")}</h4>
           <div
             style={{
               padding: "8px",
@@ -303,12 +305,12 @@ export default function AvatarPixelEditor({ identifier, onSave, onCancel, custom
       {/* Action buttons */}
       <div className="flex justify-content-end gap-2 mt-3">
         <Button
-          label="Cancel"
+          label={t("actions.cancel")}
           className="p-button-text p-button-sm"
           onClick={onCancel}
         />
         <Button
-          label="Use This Avatar"
+          label={t("avatar.useThis")}
           icon="pi pi-check"
           className="p-button-sm"
           onClick={handleSave}

apps/web/src/components/AvatarSelector.jsx

@@ -4,6 +4,7 @@ import { Button } from "primereact/button";
 import { TabView, TabPanel } from "primereact/tabview";
 import { generateRetroSpriteAvatar } from "../lib/retroSpriteAvatar";
 import AvatarPixelEditor from "./AvatarPixelEditor";
+import { useTranslation } from "@zxplay/i18n";
 
 export default function AvatarSelector({
   visible,
@@ -12,6 +13,7 @@ export default function AvatarSelector({
   onSelect,
   customAvatarData,
 }) {
+  const { t } = useTranslation();
   const [selectedVariant, setSelectedVariant] = useState(0);
   const [avatars, setAvatars] = useState([]);
   const [currentPage, setCurrentPage] = useState(0);
@@ -90,7 +92,7 @@ export default function AvatarSelector({
           <span
             className="text-sm px-1 avatar-button-min-80"
           >
-            Page {currentPage + 1}/{totalPages}
+            {t("avatar.page", { current: currentPage + 1, total: totalPages })}
           </span>
           <Button
             icon="pi pi-chevron-right"
@@ -103,18 +105,18 @@ export default function AvatarSelector({
         </div>
         <div className="flex gap-2">
           <Button
-            label="Randomize"
+            label={t("avatar.randomize")}
             icon="pi pi-refresh"
             className="p-button-outlined p-button-sm"
             onClick={handleRandomize}
           />
           <Button
-            label="Cancel"
+            label={t("actions.cancel")}
             className="p-button-text p-button-sm"
             onClick={onHide}
           />
           <Button
-            label="Select"
+            label={t("avatar.select")}
             icon="pi pi-check"
             className="p-button-sm"
             onClick={handleConfirm}
@@ -125,7 +127,7 @@ export default function AvatarSelector({
 
   return (
     <Dialog
-      header="Choose Your Avatar"
+      header={t("avatar.chooseTitle")}
       visible={visible}
       onHide={onHide}
       footer={footer}
@@ -135,9 +137,9 @@ export default function AvatarSelector({
         activeIndex={activeTab}
         onTabChange={(e) => setActiveTab(e.index)}
       >
-        <TabPanel header="Selection">
+        <TabPanel header={t("avatar.selection")}>
           <div className="text-center mb-5 mt-3">
-            <p className="text-500">Each pattern is unique to your username.</p>
+            <p className="text-500">{t("avatar.unique")}</p>
           </div>
 
           <div className="grid">
@@ -178,14 +180,11 @@ export default function AvatarSelector({
           </div>
 
           <div className="text-center mt-2 avatar-preview-centered">
-            <small className="text-500">
-              Tip: Use arrow buttons to browse more patterns, or click Randomize
-              for a surprise!
-            </small>
+            <small className="text-500">{t("avatar.tip")}</small>
           </div>
         </TabPanel>
 
-        <TabPanel header="Create Your Own">
+        <TabPanel header={t("avatar.createOwn")}>
           <AvatarPixelEditor
             identifier={identifier}
             onSave={handleCustomAvatarSave}

apps/web/src/components/DemoAssemblyEditor.jsx

@@ -8,8 +8,10 @@ import { dashboardLock } from "../dashboard_lock";
 import { showLoading } from "../dashboard_loading";
 import LineNumbersToggle from "./LineNumbersToggle";
 import { Divider } from "primereact/divider";
+import { useTranslation } from "@zxplay/i18n";
 
 export function DemoAssemblyEditor() {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const cmRef = useRef(null);
   const asmCode = useSelector((state) => state?.demo.asmCode);
@@ -47,7 +49,7 @@ export function DemoAssemblyEditor() {
         onChange={(cm, _) => dispatch(setAssemblyCode(cm.getValue()))}
       />
       <Button
-        label="Play"
+        label={t("actions.play")}
         icon="pi pi-play"
         className="margin-top-8"
         onClick={() => {

apps/web/src/components/DemoSinclairBasicEditor.jsx

@@ -8,8 +8,10 @@ import {dashboardLock} from "../dashboard_lock";
 import {showLoading} from "../dashboard_loading";
 import LineNumbersToggle from "./LineNumbersToggle";
 import {Divider} from "primereact/divider";
+import {useTranslation} from "@zxplay/i18n";
 
 export function DemoSinclairBasicEditor() {
+    const {t} = useTranslation();
     const dispatch = useDispatch();
     const cmRef = useRef(null);
     const code = useSelector(state => state?.demo.sinclairBasicCode);
@@ -47,7 +49,7 @@ export function DemoSinclairBasicEditor() {
                 onChange={(cm, _) => dispatch(setSinclairBasicCode(cm.getValue()))}
             />
             <Button
-                label="Play"
+                label={t("actions.play")}
                 icon="pi pi-play"
                 className="margin-top-8"
                 onClick={() => {

apps/web/src/components/LineNumbersToggle.jsx

@@ -2,8 +2,10 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { InputSwitch } from "primereact/inputswitch";
 import { toggleLineNumbers } from "../redux/app/actions";
+import { useTranslation } from "@zxplay/i18n";
 
 export default function LineNumbersToggle() {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const lineNumbers = useSelector((state) => state?.app?.lineNumbers || false);
 
@@ -14,7 +16,7 @@ export default function LineNumbersToggle() {
   return (
     <div className="flex align-items-center gap-2">
       <i className="pi pi-list" />
-      <span>Line Numbers</span>
+      <span>{t("pages.lineNumbers")}</span>
       <InputSwitch
         checked={lineNumbers}
         onChange={(e) => handleToggle(e.value)}

apps/web/src/components/NewProjectPage.jsx

@@ -7,22 +7,24 @@ import { InputText } from "primereact/inputtext";
 import { Button } from "primereact/button";
 import { createNewProject } from "../redux/project/actions";
 import { getLanguageLabel } from "../lib/lang";
+import { useTranslation } from "@zxplay/i18n";
 import { sep } from "../constants";
 
 NewProjectPage.propTypes = {
   type: PropTypes.string.isRequired,
 };
 
 export default function NewProjectPage(props) {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const [title, setTitle] = useState("");
   const lang = getLanguageLabel(props.type);
 
   return (
-    <Titled title={(s) => `New Project ${sep} ${s}`}>
+    <Titled title={(s) => `${t("nav.newProject")} ${sep} ${s}`}>
       <Card className="m-2">
-        <h1>New {lang} Project</h1>
-        <h3>Project Name</h3>
+        <h1>{t("newProject.title", { lang })}</h1>
+        <h3>{t("editor.projectName")}</h3>
         <div className="field">
           <InputText
             value={title}
@@ -36,7 +38,7 @@ export default function NewProjectPage(props) {
           />
         </div>
         <Button
-          label="Create Project"
+          label={t("newProject.create")}
           onClick={() => dispatch(createNewProject(props.type, title))}
         />
       </Card>