Add translations to apps

src/components/Apps/AppInfo.tsx

@@ -172,9 +172,13 @@ export const AppInfo = ({ app, myName }) => {
               }}
             >
               <AppDownloadButtonText>
-                {isSelectedAppPinned // TODO translate
-                  ? 'Unpin from dashboard'
-                  : 'Pin to dashboard'}
+                {isSelectedAppPinned
+                  ? t('core:action.unpin_from_dashboard', {
+                      postProcess: 'capitalize',
+                    })
+                  : t('core:action.pin_from_dashboard', {
+                      postProcess: 'capitalize',
+                    })}
               </AppDownloadButtonText>
             </AppDownloadButton>
 
@@ -194,7 +198,13 @@ export const AppInfo = ({ app, myName }) => {
               }}
             >
               <AppDownloadButtonText>
-                {isInstalled ? 'Open' : 'Download'}
+                {isInstalled
+                  ? t('core:action.open', {
+                      postProcess: 'capitalize',
+                    })
+                  : t('core:action.download', {
+                      postProcess: 'capitalize',
+                    })}
               </AppDownloadButtonText>
             </AppDownloadButton>
           </Box>
@@ -217,25 +227,40 @@ export const AppInfo = ({ app, myName }) => {
             <Spacer width="16px" />
 
             <AppsCategoryInfoSub>
-              <AppsCategoryInfoLabel>Category:</AppsCategoryInfoLabel>
+              <AppsCategoryInfoLabel>
+                {t('core:category', {
+                  postProcess: 'capitalize',
+                })}
+                :
+              </AppsCategoryInfoLabel>
 
               <Spacer height="4px" />
 
               <AppsCategoryInfoValue>
-                {app?.metadata?.categoryName || 'none'}
+                {app?.metadata?.categoryName ||
+                  t('core:none', {
+                    postProcess: 'capitalize',
+                  })}
               </AppsCategoryInfoValue>
             </AppsCategoryInfoSub>
           </AppsCategoryInfo>
 
           <Spacer height="30px" />
 
-          <AppInfoAppName>About this Q-App</AppInfoAppName>
+          <AppInfoAppName>
+            {t('core:q_apps.about', {
+              postProcess: 'capitalize',
+            })}
+          </AppInfoAppName>
         </AppsWidthLimiter>
 
         <Spacer height="20px" />
 
         <AppsInfoDescription>
-          {app?.metadata?.description || 'No description'}
+          {app?.metadata?.description ||
+            t('core:message.generic.no_description', {
+              postProcess: 'capitalize',
+            })}
         </AppsInfoDescription>
       </Box>
     </AppsLibraryContainer>

src/components/Apps/AppInfoSnippet.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../atoms/global';
 import { saveToLocalStorage } from './AppsNavBarDesktop';
 import { useAtom, useSetAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
 
 export const AppInfoSnippet = ({
   app,
@@ -41,6 +42,7 @@ export const AppInfoSnippet = ({
   );
 
   const theme = useTheme();
+  const { t } = useTranslation(['core', 'auth', 'group']);
 
   return (
     <AppInfoSnippetContainer
@@ -166,11 +168,16 @@ export const AppInfoSnippet = ({
           sx={{
             backgroundColor: theme.palette.background.paper,
             opacity: isSelectedAppPinned ? 0.6 : 1,
-          }} // TODO translate
+          }}
         >
           <AppDownloadButtonText>
-            {' '}
-            {isSelectedAppPinned ? 'Unpin' : 'Pin'}
+            {isSelectedAppPinned
+              ? t('core:action.unpin', {
+                  postProcess: 'capitalize',
+                })
+              : t('core:action.pin', {
+                  postProcess: 'capitalize',
+                })}
           </AppDownloadButtonText>
         </AppDownloadButton>
 
@@ -187,7 +194,13 @@ export const AppInfoSnippet = ({
           }}
         >
           <AppDownloadButtonText>
-            {isInstalled ? 'Open' : 'Download'}
+            {isInstalled
+              ? t('core:action.open', {
+                  postProcess: 'capitalize',
+                })
+              : t('core:action.download', {
+                  postProcess: 'capitalize',
+                })}
           </AppDownloadButtonText>
         </AppDownloadButton>
       </AppInfoSnippetRight>

src/components/Apps/AppPublish.tsx

@@ -1,20 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import {
-  AppCircle,
-  AppCircleContainer,
-  AppCircleLabel,
-  AppDownloadButton,
-  AppDownloadButtonText,
-  AppInfoAppName,
-  AppInfoSnippetContainer,
-  AppInfoSnippetLeft,
-  AppInfoSnippetMiddle,
-  AppInfoSnippetRight,
-  AppInfoUserName,
   AppLibrarySubTitle,
   AppPublishTagsContainer,
   AppsLibraryContainer,
-  AppsParent,
   AppsWidthLimiter,
   PublishQAppCTAButton,
   PublishQAppChoseFile,
@@ -28,10 +16,7 @@ import {
   useTheme,
 } from '@mui/material';
 import { styled } from '@mui/system';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { Add } from '@mui/icons-material';
 import { MyContext, getBaseApiReact } from '../../App';
-import LogoSelected from '../../assets/svgs/LogoSelected.svg';
 import { Spacer } from '../../common/Spacer';
 import { executeEvent } from '../../utils/events';
 import { useDropzone } from 'react-dropzone';
@@ -39,6 +24,7 @@ import { LoadingSnackbar } from '../Snackbar/LoadingSnackbar';
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { getFee } from '../../background';
 import { fileToBase64 } from '../../utils/fileReading';
+import { useTranslation } from 'react-i18next';
 
 const CustomSelect = styled(Select)({
   border: '0.5px solid var(--50-white, #FFFFFF80)',
@@ -81,6 +67,7 @@ export const AppPublish = ({ names, categories }) => {
   const [file, setFile] = useState(null);
   const { show } = useContext(MyContext);
   const theme = useTheme();
+  const { t } = useTranslation(['core', 'auth', 'group']);
   const [tag1, setTag1] = useState('');
   const [tag2, setTag2] = useState('');
   const [tag3, setTag3] = useState('');
@@ -106,9 +93,11 @@ export const AppPublish = ({ names, categories }) => {
         errors.forEach((error) => {
           if (error.code === 'file-too-large') {
             console.error(
-              `File ${file.name} is too large. Max size allowed is ${
-                maxFileSize / (1024 * 1024)
-              } MB.`
+              t('core:message.error.file_too_large', {
+                filename: file.name,
+                size: maxFileSize / (1024 * 1024),
+                postProcess: 'capitalize',
+              })
             );
           }
         });
@@ -142,6 +131,7 @@ export const AppPublish = ({ names, categories }) => {
         setTag5(myApp?.metadata?.tags[4] || '');
       }
     } catch (error) {
+      console.log(error);
     } finally {
       setIsLoading('');
     }

src/components/QMailStatus.tsx

@@ -65,7 +65,7 @@ export const QMailStatus = () => {
               textTransform: 'uppercase',
             }}
           >
-            {t('core:q_mail', {
+            {t('core:q_apps.q_mail', {
               postProcess: 'capitalize',
             })}
           </span>