Update app translation text

src/components/PreferencesModal/GeneralTab.tsx

@@ -180,40 +180,40 @@ const GeneralTab = () => {
         </SectionControl>
       </Section>
       <Section>
-        <SectionHeader>Note List view</SectionHeader>
+        <SectionHeader>{t('preferences.notesView')}</SectionHeader>
         <SectionControl>
           <SectionSelect
             value={preferences['general.noteListView']}
             onChange={selectNoteListView}
           >
-            <option value='default'>Default</option>
-            <option value='compact'>Compact</option>
+            <option value='default'>{t('preferences.notesViewDefault')}</option>
+            <option value='compact'>{t('preferences.notesViewCompact')}</option>
           </SectionSelect>
         </SectionControl>
       </Section>
       <Section>
-        <SectionHeader>Enable auto sync</SectionHeader>
+        <SectionHeader>{t('preferences.autoSync')}</SectionHeader>
         <SectionControl>
           <FormCheckItem
             id='checkbox-enable-auto-sync'
             type='checkbox'
             checked={preferences['general.enableAutoSync']}
             onChange={toggleEnableAutoSync}
           >
-            Enable auto sync
+            {t('preferences.autoSync')}
           </FormCheckItem>
         </SectionControl>
       </Section>
       <Section>
-        <SectionHeader>Subfolders</SectionHeader>
+        <SectionHeader>{t('preferences.subfolders')}</SectionHeader>
         <SectionControl>
           <FormCheckItem
             id='checkbox-show-subfolder-content'
             type='checkbox'
             checked={preferences['general.showSubfolderContents']}
             onChange={toggleShowSubfolderContents}
           >
-            Show content of all subfolders
+            {t('preferences.subfoldersView')}
           </FormCheckItem>
         </SectionControl>
       </Section>

src/components/PreferencesModal/MarkdownTab.tsx

@@ -145,15 +145,15 @@ const MarkdownTab = () => {
         </PreviewContainer>
       </Section>
       <Section>
-        <SectionHeader>Export</SectionHeader>
+        <SectionHeader>{t('preferences.markdownExport')}</SectionHeader>
         <SectionControl>
           <FormCheckItem
             id='checkbox-include-front-matter'
             type='checkbox'
             checked={preferences['markdown.includeFrontMatter']}
             onChange={toggleFrontMatterExport}
           >
-            Include Front Matter
+            {t('preferences.markdownExportOption')}
           </FormCheckItem>
         </SectionControl>
       </Section>

src/components/PreferencesModal/PreferencesModal.tsx

@@ -170,13 +170,13 @@ const PreferencesModal = () => {
         <ModalBody>
           <TabNav>
             <TabButton
-              label='About'
+              label={t('about.about')}
               tab='about'
               active={tab === 'about'}
               setTab={setTab}
             />
             <TabButton
-              label='General'
+              label={t('general.general')}
               tab='general'
               active={tab === 'general'}
               setTab={setTab}
@@ -190,7 +190,7 @@ const PreferencesModal = () => {
               />
             )}
             <TabButton
-              label='Editor'
+              label={t('editor.editor')}
               tab='editor'
               active={tab === 'editor'}
               setTab={setTab}
@@ -202,7 +202,7 @@ const PreferencesModal = () => {
               setTab={setTab}
             />
             <TabButton
-              label='Billing'
+              label={t('billing.billing')}
               tab='billing'
               active={tab === 'billing'}
               setTab={setTab}

src/components/atoms/FormFolderSelector.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import styled from '../../lib/styled'
 import { border, secondaryButtonStyle } from '../../lib/styled/styleFunctions'
 import { getHomePath, showOpenDialog } from '../../lib/electronOnly'
@@ -42,6 +43,7 @@ interface FormFolderSelector {
 
 const FormFolderSelector = ({ value, setValue }: FormFolderSelector) => {
   const [dialogIsOpen, setDialogIsOpen] = useState(false)
+  const { t } = useTranslation()
   const openDialog = useCallback(async () => {
     if (dialogIsOpen) {
       return
@@ -50,7 +52,7 @@ const FormFolderSelector = ({ value, setValue }: FormFolderSelector) => {
     try {
       const result = await showOpenDialog({
         properties: ['openDirectory', 'createDirectory'],
-        buttonLabel: 'Select Folder',
+        buttonLabel: t('folder.select'),
         defaultPath: getHomePath(),
       })
       if (result.canceled) {
@@ -74,7 +76,9 @@ const FormFolderSelector = ({ value, setValue }: FormFolderSelector) => {
         type='text'
         onClick={openDialog}
         readOnly
-        value={value.trim().length === 0 ? 'No location selected' : value}
+        value={
+          value.trim().length === 0 ? t('folder.noLocationSelected') : value
+        }
       />
       <FormFolderSelectorButton onClick={openDialog}>
         Select Folder

src/components/organisms/FSStorageCreateForm.tsx

@@ -55,7 +55,7 @@ const FSStorageCreateForm = () => {
           onClick={createStorageCallback}
           disabled={name.trim().length === 0 || location.trim().length === 0}
         >
-          Create Storage
+          {t('storage.create')}
         </FormPrimaryButton>
       </FormGroup>
     </>

src/components/organisms/LocalStorageCreateForm.tsx

@@ -44,7 +44,7 @@ const LocalStorageCreateForm = () => {
       </FormGroup>
       <FormGroup>
         <FormPrimaryButton onClick={createStorageCallback}>
-          Create Storage
+          {t('storage.create')}
         </FormPrimaryButton>
       </FormGroup>
     </>

src/components/organisms/SubscribeNewsLettersForm.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, FormEvent, ChangeEvent } from 'react'
+import { useTranslation } from 'react-i18next'
 import {
   SectionHeader,
   SectionInput,
@@ -13,7 +14,7 @@ const SubscribeNewsLettersForm = () => {
   const [status, setStatus] = useState<Status>('idle')
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const [email, setEmail] = useState('')
-
+  const { t } = useTranslation()
   const subscribe = useCallback(
     async (event: FormEvent<HTMLFormElement>) => {
       event.preventDefault()
@@ -44,9 +45,9 @@ const SubscribeNewsLettersForm = () => {
 
   return (
     <div>
-      <SectionHeader>Subscribe Update Notes</SectionHeader>
+      <SectionHeader>{t('newsletter.heading')}</SectionHeader>
       {status === 'done' ? (
-        <FormBlockquote>Thanks for the subscription!</FormBlockquote>
+        <FormBlockquote>{t('newsletter.subscribed')}</FormBlockquote>
       ) : (
         <>
           {errorMessage != null && (
@@ -63,7 +64,7 @@ const SubscribeNewsLettersForm = () => {
                 type='submit'
                 disabled={status === 'sending'}
               >
-                Subscribe
+                {t('newsletter.subscribe')}
               </SectionPrimaryButton>
             </div>
           </form>

src/components/pages/StorageCreatePage.tsx

@@ -41,11 +41,11 @@ const StorageCreatePage = () => {
     <PageContainer>
       <PageDraggableHeader
         iconPath={mdiBookPlusMultiple}
-        label={t('Create new storage')}
+        label={t('storage.create')}
       />
       <PageScrollableContent>
         <FormGroup>
-          <FormLabel>Storage Type</FormLabel>
+          <FormLabel>{t('storage.type')}</FormLabel>
           <FormCheckList>
             {appIsElectron && (
               <FormCheckInlineItem

src/locales/enUS.ts

@@ -1,6 +1,7 @@
 export default {
   translation: {
     //General
+    'general.general': 'General',
     'general.error': 'Error',
     'general.cancel': 'Cancel',
     'general.attachments': 'Attachments',
@@ -12,6 +13,14 @@ export default {
     'general.default': 'Default',
     'general.networkError': 'Network Error',
 
+    // Navigator
+    'navigator.noStorage': 'There are no storages',
+    'navigator.createStorage': 'Click here to create one.',
+
+    // Newsletter
+    'newsletter.subscribe': 'Subscribe',
+    'newsletter.heading': 'Subscribe Update Notes',
+    'newsletter.subscribed': 'Thanks for the subscription!',
     // Storage
     'storage.storage': 'Storage',
     'storage.name': 'Storage Name',
@@ -29,6 +38,7 @@ export default {
     'storage.moveMessage':
       'You are trying to move a note to different storage.',
     'storage.copy': 'Copy Note',
+    'storage.type': 'Storage Type',
     'storage.typeLocal': 'Local',
     'storage.typeCloud': 'Cloud',
     'storage.needSignIn': 'You need to sign in to create a cloud storage.',
@@ -43,6 +53,8 @@ export default {
     'folder.renameErrorMessage': 'You could not rename the folder',
     'folder.remove': 'Remove Folder',
     'folder.removeMessage': 'All notes and subfolders will be deleted.',
+    'folder.select': 'Select Folder',
+    'folder.noLocationSelected': 'No location selected',
 
     //Tag
     'tag.tags': 'Tags',
@@ -115,6 +127,8 @@ export default {
       '* If you need more cloud storage, you can add it at any time by paying $5 (USD) for every 5GB. Click the "Add Extra Storage" button below.',
     'billing.addStorage': 'Add Extra Storage',
 
+    'editor.editor': 'Editor',
+
     // Preferences
     'preferences.general': 'Preferences',
 
@@ -140,6 +154,12 @@ export default {
       'You can choose to enable or disable this option.',
     'preferences.analyticsLabel': 'Enable analytics to help improve Boostnote',
     'preferences.displayTutorialsLabel': 'Tutorials and FAQ',
+    'preferences.notesView': 'Note List View',
+    'preferences.notesViewDefault': 'Default',
+    'preferences.notesViewCompact': 'Compact',
+    'preferences.autoSync': 'Enable auto sync',
+    'preferences.subfolders': 'Subfolders',
+    'preferences.subfoldersView': 'Show content of all subfolders',
 
     // Preferences EditorTab
     'preferences.editorTheme': 'Editor Theme',
@@ -157,6 +177,8 @@ export default {
     'preferences.markdownCodeBlockTheme': 'Code Block Theme',
     'preferences.defaultTheme': 'Use default style',
     'preferences.markdownPreview': 'Markdown Preview',
+    'preferences.markdownExport': 'Export',
+    'preferences.markdownExportOption': 'Include Front Matter',
 
     // Preferences ImportTab
     'preferences.import': 'Import',