feat: add translations to button components and their dialogs

Author: david-roper

apps/playground/src/components/Header/CloneButton/CloneButton.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { Dialog, Form, Tooltip } from '@douglasneuroinformatics/libui/components';
-import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { useNotificationsStore, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { CopyPlusIcon } from 'lucide-react';
 import { z } from 'zod/v4';
 
@@ -16,6 +16,7 @@ export const CloneButton = () => {
   const addInstrument = useAppStore((store) => store.addInstrument);
   const setSelectedInstrument = useAppStore((store) => store.setSelectedInstrument);
   const editorFilesRef = useFilesRef();
+  const { t } = useTranslation();
 
   const handleSubmit = ({ label }: { label: string }) => {
     const files = editorFilesRef.current;
@@ -42,36 +43,39 @@ export const CloneButton = () => {
         </Dialog.Trigger>
         <Dialog.Content className="sm:max-w-[475px]">
           <Dialog.Header>
-            <Dialog.Title>Create New Instrument</Dialog.Title>
+            <Dialog.Title>{t({ en: 'Create New Instrument', fr: 'Créer un nouvel instrument' })}</Dialog.Title>
             <Dialog.Description>
-              This will save the current playground state in local storage as a new instrument.
+              {t({
+                en: 'This will save the current playground state in local storage as a new instrument.',
+                fr: "Ceci enregistrera l'état actuel du terrain de jeu dans le stockage local en tant que nouvel instrument."
+              })}
             </Dialog.Description>
           </Dialog.Header>
           <Form
             className="[&_button]:max-w-32"
             content={{
               label: {
                 kind: 'string',
-                label: 'Label',
+                label: t({ en: 'Label', fr: 'Nom' }),
                 variant: 'input'
               }
             }}
-            submitBtnLabel="Save"
+            submitBtnLabel={t({ en: 'Save', fr: 'Enregistrer' })}
             validationSchema={z.object({
               label: z
                 .string()
                 .min(1)
                 .refine(
                   (arg) => !instruments.find((instrument) => instrument.label === arg),
-                  'An instrument with this label already exists'
+                  t({ en: 'An instrument with this label already exists', fr: 'Un instrument avec ce nom existe déjà' })
                 )
             })}
             onSubmit={(data) => void handleSubmit(data)}
           />
         </Dialog.Content>
       </Dialog>
       <Tooltip.Content side="bottom">
-        <p>Create New Instrument</p>
+        <p>{t({ en: 'Create New Instrument', fr: 'Créer un nouvel instrument' })}</p>
       </Tooltip.Content>
     </Tooltip>
   );

apps/playground/src/components/Header/DownloadButton/DownloadButton.tsx

@@ -1,4 +1,4 @@
-import { useDownload } from '@douglasneuroinformatics/libui/hooks';
+import { useDownload, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import JSZip from 'jszip';
 import { DownloadIcon } from 'lucide-react';
 
@@ -24,10 +24,12 @@ export const DownloadButton = () => {
     await download(`${baseName}.zip`, file, { blobType: 'application/zip' });
   };
 
+  const { t } = useTranslation();
+
   return (
     <ActionButton
       icon={<DownloadIcon />}
-      tooltip="Download Archive"
+      tooltip={t({ en: 'Download Archive', fr: "Télécharger l'archive" })}
       onClick={() => {
         void downloadFiles();
       }}

apps/playground/src/components/Header/RefreshButton/RefreshButton.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { RefreshCwIcon } from 'lucide-react';
 
 import { useAppStore } from '@/store';
@@ -6,5 +7,6 @@ import { ActionButton } from '../ActionButton';
 
 export const RefreshButton = () => {
   const onClick = useAppStore((store) => store.viewer.forceRefresh);
-  return <ActionButton icon={<RefreshCwIcon />} tooltip="Refresh" onClick={onClick} />;
+  const { t } = useTranslation();
+  return <ActionButton icon={<RefreshCwIcon />} tooltip={t({ en: 'Refresh', fr: 'Actualiser' })} onClick={onClick} />;
 };

apps/playground/src/components/Header/SaveButton/SaveButton.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { useInterval } from '@douglasneuroinformatics/libui/hooks';
+import { useInterval, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { isEqual } from 'lodash-es';
 import { SaveIcon } from 'lucide-react';
 
@@ -21,11 +21,13 @@ export const SaveButton = () => {
     }
   }, 1000);
 
+  const { t } = useTranslation();
+
   return (
     <ActionButton
       disabled={disabled}
       icon={<SaveIcon />}
-      tooltip="Save"
+      tooltip={t({ en: 'Save', fr: 'Enregistrer' })}
       onClick={() => {
         updateSelectedInstrument({ files: editorFiles.current });
       }}

apps/playground/src/components/Header/ShareButton/ShareButton.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 
 import { formatByteSize } from '@douglasneuroinformatics/libjs';
 import { Heading, Input, Popover, Tooltip } from '@douglasneuroinformatics/libui/components';
+import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { CopyButton } from '@opendatacapture/react-core';
 import { Share2Icon } from 'lucide-react';
 
@@ -15,6 +16,7 @@ export const ShareButton = () => {
   const [shareURL, setShareURL] = useState(encodeShareURL({ files: editorFilesRef.current, label }));
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+  const { t } = useTranslation();
 
   // The user cannot modify the editor without closing the popover
   useEffect(() => {
@@ -40,10 +42,13 @@ export const ShareButton = () => {
         </Popover.Trigger>
         <Popover.Content align="end" className="w-[520px] p-4">
           <div className="flex flex-col space-y-2 text-center sm:text-left">
-            <Heading variant="h5">Share Instrument</Heading>
+            <Heading variant="h5">{t({ en: 'Share Instrument', fr: "Partager l'instrument" })}</Heading>
             <p className="text-muted-foreground text-sm">
-              Anyone with this link can open a snapshot of the current code in your playground. The total size of the
-              URL-encoded source files for this instrument is {formatByteSize(shareURL.size)}.
+              {t({
+                en: 'Anyone with this link can open a snapshot of the current code in your playground. The total size of the URL-encoded source files for this instrument is ',
+                fr: "Toute personne disposant de ce lien peut ouvrir un aperçu du code actuel dans votre terrain de jeu. La taille totale des fichiers sources encodés dans l'URL pour cet instrument est de "
+              })}
+              {formatByteSize(shareURL.size)}.
             </p>
           </div>
           <div className="flex gap-2 pt-4">
@@ -53,7 +58,7 @@ export const ShareButton = () => {
         </Popover.Content>
       </Popover>
       <Tooltip.Content side="bottom">
-        <p>Share</p>
+        <p>{t({ en: 'Share', fr: 'Partager' })}</p>
       </Tooltip.Content>
     </Tooltip>
   );

apps/playground/src/components/Header/UploadButton/UploadButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import { isPlainObject } from '@douglasneuroinformatics/libjs';
-import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
+import { useNotificationsStore, useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import JSZip from 'jszip';
 import { UploadIcon } from 'lucide-react';
 
@@ -18,6 +18,7 @@ export const UploadButton = () => {
   const addInstrument = useAppStore((store) => store.addInstrument);
   const setSelectedInstrument = useAppStore((store) => store.setSelectedInstrument);
   const instruments = useAppStore((store) => store.instruments);
+  const { t } = useTranslation();
 
   const handleSubmit = async (files: File[]) => {
     try {
@@ -53,8 +54,11 @@ export const UploadButton = () => {
     } catch (err) {
       console.error(err);
       addNotification({
-        message: 'Please refer to browser console for details',
-        title: 'Upload Failed',
+        message: t({
+          en: 'Please refer to browser console for details',
+          fr: 'Veuillez consulter la console du navigateur pour plus de détails'
+        }),
+        title: t({ en: 'Upload Failed', fr: 'Échec du téléversement' }),
         type: 'error'
       });
     } finally {
@@ -64,12 +68,16 @@ export const UploadButton = () => {
 
   return (
     <React.Fragment>
-      <ActionButton icon={<UploadIcon />} tooltip="Upload Archive" onClick={() => setIsDialogOpen(true)} />
+      <ActionButton
+        icon={<UploadIcon />}
+        tooltip={t({ en: 'Upload Archive', fr: 'Téléverser une archive' })}
+        onClick={() => setIsDialogOpen(true)}
+      />
       <FileUploadDialog
         accept={{ 'application/zip': ['.zip'] }}
         isOpen={isDialogOpen}
         setIsOpen={setIsDialogOpen}
-        title="Upload Archive"
+        title={t({ en: 'Upload Archive', fr: 'Téléverser une archive' })}
         onSubmit={handleSubmit}
         onValidate={() => {
           return { result: 'success' };