fix: add missed translations

.prettierrc.json

@@ -12,6 +12,9 @@
   "importOrder": [
     "^@background/app/(.*)$",
     "^@background/features/(.*)$",
+    "^@background/shared/(.*)$",
+    "^@content/(.*)$",
+    "^@content/shared/(.*)$",
     "^@popup/app/(.*)$",
     "^@popup/widgets/(.*)$",
     "^@popup/features/(.*)$",

public/_locales/en/messages.json

@@ -34,11 +34,8 @@
   "SELECT_LANGUAGES_FORM_TITLE": {
     "message": "Select languages to learn"
   },
-  "SELECT_DICTIONARY_VARIANT_SAVED": {
-    "message": "Your choice was succesfully saved"
-  },
-  "ERROR_CAN_NOT_FIND_DICTIONARY_TO_SELECT_VARIANT": {
-    "message": "Can't find dictionary"
+  "SELECTED_LANGUAGES_NO_ITEMS": {
+    "message": "No languages are selected. Select some languages to learn"
   },
   "EDIT_NOTE_OPEN": {
     "message": "Open note editor $noteText$",
@@ -70,6 +67,9 @@
   "EDIT_NOTE_FORM_FIELD_PLACEHOLDER_FOR_TRANSCRIPTION": {
     "message": "Transcription"
   },
+  "ERROR_CAN_NOT_FIND_NOTE_TO_EDIT": {
+    "message": "Can't find note"
+  },
   "DELETE_NOTE": {
     "message": "Delete note $noteText$",
     "placeholders": {
@@ -79,6 +79,9 @@
       }
     }
   },
+  "ERROR_CAN_NOT_FIND_NOTE_TO_DELETE": {
+    "message": "Can't find note"
+  },
   "COPY_TEXT": {
     "message": "Copy text $text$",
     "placeholders": {
@@ -90,5 +93,68 @@
   },
   "COPY_TEXT_COPIED": {
     "message": "Text copied to clipboard"
+  },
+  "CONTEXT_MENU_ROOT": {
+    "message": "Flashcardis"
+  },
+  "CONTEXT_MENU_ADD_NEW_WORD": {
+    "message": "Add word"
+  },
+  "CONTEXT_MENU_ADD_NOTE_AUTOMATICALLY": {
+    "message": "Add note"
+  },
+  "ERROR_CAN_NOT_IDENTIFY_DICTIONARY_ADD_NOTE_AUTOMATICALLY": {
+    "message": "Adding note automatically failed, can't identify dictionary"
+  },
+  "NOTE_LIST_NO_ITEMS": {
+    "message": "No notes found"
+  },
+  "SELECT_DICTIONARY_VERSION_IS_USED": {
+    "message": "$text$ version is used",
+    "placeholders": {
+      "text": {
+        "content": "$1",
+        "example": "British"
+      }
+    }
+  },
+  "SELECT_DICTIONARY_USE_VERSION": {
+    "message": "Use $text$ version",
+    "placeholders": {
+      "text": {
+        "content": "$1",
+        "example": "British"
+      }
+    }
+  },
+  "SELECT_DICTIONARY_VARIANT_SAVED": {
+    "message": "Your choice was succesfully saved"
+  },
+  "ERROR_CAN_NOT_FIND_DICTIONARY_TO_SELECT_VARIANT": {
+    "message": "Can't find dictionary"
+  },
+  "FILL_ANKI_FORM_FORM_FILLED": {
+    "message": "Form filled"
+  },
+  "FILL_ANKI_FORM_BUTTON": {
+    "message": "Fill anki form with note $text$",
+     "placeholders": {
+      "text": {
+        "content": "$1",
+        "example": "carpel"
+      }
+    }
+  },
+  "FILL_ANKI_FORM_NOT_AVAILABLE": {
+    "message": "Filling anki available only on anki page"
+  },
+  "TABS_BUTTON_BACK": {
+    "message": "Back"
+  },
+  "TABS_BUTTON_FORWARD": {
+    "message": "Forward"
+  },
+  "TOAST_BUTTON_OPEN_DETAILS": {
+    "message": "Open details"
   }
 }

src/background/app/index.ts

@@ -1,15 +1,15 @@
-import { browser } from '@background/shared/browser'
-
 import { addNewWord } from '@background/features/addNewWord'
 import { autoAddNewNote } from '@background/features/autoAddNewNote'
 
+import { browser } from '@background/shared/browser'
+
 import { $notes } from '@shared/entities/note/model/store'
 
 const PARENT_ID = 'CONTEXT_MENU_ROOT'
 
 browser.contextMenus.removeAll(() => {
   browser.contextMenus.create({
-    title: 'CONTEXT_MENU_ROOT',
+    title: browser.i18n.getMessage('CONTEXT_MENU_ROOT'),
     id: PARENT_ID,
     contexts: ['page', 'selection'],
     type: 'normal',

src/background/features/addNewWord/index.ts

@@ -10,7 +10,7 @@ import { noteStore } from '@shared/entities/note'
 
 export const addNewWord = (parentId: string) => {
   browser.contextMenus.create({
-    title: 'CONTEXT_MENU_ADD_NEW_WORD',
+    title: browser.i18n.getMessage('CONTEXT_MENU_ADD_NEW_WORD'),
     id: 'new_word',
     parentId: parentId,
     contexts: ['selection'],

src/background/features/autoAddNewNote/ui.tsx

@@ -1,9 +1,10 @@
+import { map } from 'nanostores'
+
 import { browser } from '@background/shared/browser'
 import {
   TOnClickContextMenuInfoProps,
   TOnClickContextMenuTabProps,
-} from '@background/shared/browser/contextMenus/types'
-import { map } from 'nanostores'
+} from '@background/shared/browser/contextMenus'
 
 import {
   getLanguageFromPage,
@@ -21,14 +22,13 @@ import {
 import { addError } from '@shared/entities/error'
 import { noteStore } from '@shared/entities/note'
 
-import { PortEmitter } from '@shared/shared/browser/port'
-import { IPortEmitter } from '@shared/shared/browser/port/types'
+import { IPortEmitter, PortEmitter } from '@shared/shared/browser/port'
 
 const $dictionaryPorts = map<Record<string, IPortEmitter>>()
 
 export const autoAddNewNote = (parentId: string) => {
   browser.contextMenus.create({
-    title: 'CONTEXT_MENU_ADD_NOTE_AUTOMATICALLY',
+    title: browser.i18n.getMessage('CONTEXT_MENU_ADD_NOTE_AUTOMATICALLY'),
     id: 'auto_new_note',
     parentId: parentId,
     contexts: ['page'],
@@ -66,7 +66,9 @@ export const autoAddNewNote = (parentId: string) => {
           })
         } else {
           addError({
-            type: 'ERROR_CAN_NOT_IDENTIFY_DICTIONARY_ADD_NOTE_AUTOMATICALLY',
+            type: browser.i18n.getMessage(
+              'ERROR_CAN_NOT_IDENTIFY_DICTIONARY_ADD_NOTE_AUTOMATICALLY',
+            ),
             error: null,
           })
 

src/background/shared/browser/contextMenus/index.tsx

@@ -1,5 +1,9 @@
 import { chromeContextMenus } from './chromeContextMenus'
 import { IContextMenus } from './types'
 
-export type { IContextMenus, TOnClickContextMenuInfoProps } from './types'
+export type {
+  IContextMenus,
+  TOnClickContextMenuInfoProps,
+  TOnClickContextMenuTabProps,
+} from './types'
 export const contextMenus: IContextMenus = chromeContextMenus

src/popup/entities/note/ui/NoNotes/index.tsx

@@ -1 +1,5 @@
-export const NoNotes = () => <span>No notes found</span>
+import { browser } from '@popup/shared/browser'
+
+export const NoNotes = () => (
+  <span>{browser.i18n.getMessage('NOTE_LIST_NO_ITEMS')}</span>
+)

src/popup/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryList.tsx

@@ -46,6 +46,7 @@ export const SelectDictionaryList = () => {
                               <SelectDictionaryVariant
                                 key={dictionary.id}
                                 dictionary={dictionary}
+                                lang={language.value}
                               />
                             </li>
                           )

src/popup/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryVariant.tsx

@@ -1,23 +1,26 @@
 import { DictionaryCard } from '@popup/entities/dictionary'
 
+import { browser } from '@popup/shared/browser'
 import { Button } from '@popup/shared/ui/Button'
 import { addToast } from '@popup/shared/ui/Toast'
 
 import {
   IDictionaryWithVariants,
   dictionaryStore,
 } from '@shared/entities/dictionary'
+import { TLanguageCode } from '@shared/entities/language'
 
 import styles from './styles.module.scss'
 
 interface GroupProps {
   dictionary: IDictionaryWithVariants
+  lang: TLanguageCode
 }
 
-export const SelectDictionaryVariant = ({ dictionary }: GroupProps) => {
+export const SelectDictionaryVariant = ({ dictionary, lang }: GroupProps) => {
   const onSelectVariant = async (variant: string) => {
     const result = await dictionaryStore.selectVariant(
-      'en',
+      lang,
       dictionary.id,
       variant,
     )
@@ -39,9 +42,12 @@ export const SelectDictionaryVariant = ({ dictionary }: GroupProps) => {
                 disabled={isActive}
                 onClick={() => onSelectVariant(variant.value)}
               >
-                {isActive
-                  ? `${variant.label} version is used`
-                  : `Use ${variant.label} version`}
+                {browser.i18n.getMessage(
+                  isActive
+                    ? 'SELECT_DICTIONARY_VERSION_IS_USED'
+                    : 'SELECT_DICTIONARY_USE_VERSION',
+                  variant.label,
+                )}
               </Button>
             }
           />

src/popup/features/language/SelectLanguages/ui/NoSelectedLanguages.tsx

@@ -1,3 +1,5 @@
+import { browser } from '@popup/shared/browser'
+
 export const NoSelectedLanguages = () => (
-  <span>No languages are selected. Select some languages to learn</span>
+  <span>{browser.i18n.getMessage('SELECTED_LANGUAGES_NO_ITEMS')}</span>
 )

src/popup/features/language/SelectLanguages/ui/SelectLanguages.tsx

@@ -57,7 +57,6 @@ export const SelectLanguages = ({ languages }: Props) => {
                 checked={checkIsSelected(language.value)}
                 onChange={() => toggle(language.value)}
               />
-
               {language.label}
             </label>
           </li>

src/popup/features/note/FillFlashcardForm/ui/FillFlashcardForm.tsx

@@ -47,8 +47,8 @@ export const FillFlashcardForm = ({ note }: Props) => {
       startIcon={isFormFilled ? <DoneIcon /> : <AddCardIcon />}
       aria-label={
         isFormFilled
-          ? 'Form filled'
-          : browser.i18n.getMessage('FILL_ANKI_BUTTON', note.text)
+          ? browser.i18n.getMessage('FILL_ANKI_FORM_FORM_FILLED')
+          : browser.i18n.getMessage('FILL_ANKI_FORM_BUTTON', note.text)
       }
       onClick={fillAnkiForm}
       disabled={!ankiPort}

src/popup/features/note/FillFlashcardForm/ui/FillFlashcardFormNotAvailable.tsx

@@ -1,3 +1,5 @@
+import { browser } from '@popup/shared/browser'
+
 export const FillFlashcardFormNotAvailable = () => (
-  <span>Filling anki available only on anki page</span>
+  <span>{browser.i18n.getMessage('FILL_ANKI_FORM_NOT_AVAILABLE')}</span>
 )

src/popup/shared/ui/Modal/index.tsx

@@ -19,12 +19,15 @@ export const Modal = ({ open, children, onClose }: Props) => {
 
   useEffect(() => {
     if (dialogRef.current) {
-      open ? dialogRef.current.showModal() : onClose()
+      if (open) {
+        dialogRef.current.showModal()
+      } else {
+        dialogRef.current.close()
+        onClose()
+      }
     }
   }, [open])
 
-  if (!open) return null
-
   return createPortal(
     <dialog ref={dialogRef} className={styles.modal}>
       <Button

src/popup/shared/ui/Tabs/ui/TabsList.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames'
 import { ComponentChildren } from 'preact'
 import { useRef } from 'preact/hooks'
 
+import { browser } from '@popup/shared/browser'
 import { Button } from '@popup/shared/ui/Button'
 import { ArrowUp } from '@popup/shared/ui/icons/ArrowUp'
 
@@ -49,7 +50,7 @@ export const TabsList = ({ className, children, arrows }: Props) => {
           className={styles['tablist__button-left']}
           onClick={move('back')}
           startIcon={<ArrowUp />}
-          aria-label="Back"
+          aria-label={browser.i18n.getMessage('TABS_BUTTON_BACK')}
         />
       )}
 
@@ -69,7 +70,7 @@ export const TabsList = ({ className, children, arrows }: Props) => {
           className={styles['tablist__button-right']}
           onClick={move('forward')}
           startIcon={<ArrowUp />}
-          aria-label="Forward"
+          aria-label={browser.i18n.getMessage('TABS_BUTTON_FORWARD')}
         />
       )}
     </div>

src/popup/shared/ui/Toast/helpers/getErrorToast.tsx

@@ -1,17 +1,12 @@
-import { browser } from '@popup/shared/browser'
-
 import { TBaseError } from '@shared/shared/libs/operationResult'
 
 import { ErrorDetails } from '../../ErrorDetails'
 import { IToast } from '../model/types'
 
 export const getErrorToast = (error: TBaseError): Omit<IToast, 'id'> => ({
   type: 'error',
-  title: browser.i18n.getMessage(error.type),
+  title: error.type,
   details: (
-    <ErrorDetails
-      type={browser.i18n.getMessage(error.type)}
-      content={error.error?.toString() ?? ''}
-    />
+    <ErrorDetails type={error.type} content={error.error?.toString() ?? ''} />
   ),
 })

src/popup/shared/ui/Toast/ui/Toast.tsx

@@ -29,16 +29,14 @@ export const Toast = ({ toast, removeToast, openDetails }: Props) => {
     <li className={toastClass} role="status">
       <div className={styles.toast__content}>
         <p className={cn(styles.toast__title, 'h2')}>{title}</p>
-
         {typeof message === 'string' ? <p>{message}</p> : message}
-
         {!!details && (
           <Button
             variant="secondary"
             color={mapToastTypeToButtonColor[type]}
             onClick={() => openDetails(details)}
           >
-            Open details
+            {browser.i18n.getMessage('TOAST_BUTTON_OPEN_DETAILS')}
           </Button>
         )}
       </div>