Extract all strings from extension & prepare translation files #37

src/components/OnboardingCard.tsx

@@ -1,31 +1,28 @@
+import { Trans, useTranslation } from 'react-i18next';
 import './OnboardingCard.scss';
 import { ShortcutHint } from './ShortcutHint';
 import { WidgetCard } from './WidgetCard';
 
 export const OnboardingCard = () => {
+    const { t } = useTranslation();
+
     return (
         <WidgetCard
             width={4}
             height={3}
             withAnimation={false}
         >
             <div className="OnboardingCard">
-                <h2>Fresh start, huh?</h2>
-                <div>
-                    Hello! I'm onboarding card, and my mission here is to help you set up your perfect new tab.
-                </div>
-                <div>
-                    Click on pencil in top right corner. This will switch the page into editing mode. Here you can add new widgets and reposition or remove existing ones.
-                </div>
-                <div>
-                    If you click on the gear icon in the bottom left corner, you'll open settings. There you can manage your folders (which you find on the sidebar to the left) and change theme.
-                </div>
-                <div>
-                    Oh, and we also have a command menu for quick access. Just hit <ShortcutHint shortcut='meta+k' /> (explore more shortcuts by pressing <ShortcutHint shortcut='alt+h' /> ).
-                </div>
+                <h2>{t('onboarding.title')}</h2>
+                <div>{t('onboarding.p1')}</div>
+                <div>{t('onboarding.p2')}</div>
+                <div>{t('onboarding.p3')}</div>
                 <div>
-                    This card will disappear once you add your first widget.
+                    <Trans t={t} i18nKey="onboarding.p4">
+                        <ShortcutHint shortcut='meta+k' /><ShortcutHint shortcut='alt+h' />
+                    </Trans>
                 </div>
+                <div>{t('onboarding.p5')}</div>
             </div>
         </WidgetCard>
     );

src/components/ShortcutsHelp.tsx

@@ -1,70 +1,66 @@
+import { useTranslation } from 'react-i18next';
 import { ShortcutHint } from './ShortcutHint';
 import './ShortcutsHelp.scss';
 
 export const ShortcutsHelp = () => {
+    const { t } = useTranslation();
     return (<div className='ShortcutsHelp'>
         <div className="shortcut-row">
             <div className='hint-wrapper'>
                 <ShortcutHint shortcut='alt+h' />
             </div>
-            <div>Show/hide shortcuts cheatsheet</div>
+            <div>{t("shortcuts.showCheatsheet")}</div>
         </div>
         <div className="shortcut-row">
             <div className='hint-wrapper'>
                 <ShortcutHint shortcut='alt+s' />
             </div>
-            <div>Show/hide settings</div>
+            <div>{t("shortcuts.toggleSettings")}</div>
         </div>
         <div className="shortcut-row">
             <div className='hint-wrapper'>
                 <ShortcutHint shortcut='meta+k' />
             </div>
-            <div>Display command menu</div>
+            <div>{t("shortcuts.displayCommandMenu")}</div>
         </div>
         <div className="shortcut-row">
             <div className='hint-wrapper'>
                 <ShortcutHint shortcut='Esc' />
             </div>
-            <div>Close command menu or modal window</div>
+            <div>{t("shortcuts.closeMenuOrModal")}</div>
         </div>
         <div className="shortcut-row">
             <div className='hint-wrapper'>
                 <ShortcutHint shortcut='meta+up' />
                 <ShortcutHint shortcut='alt+up' />
             </div>
-            <div>Switch to folder above</div>
+            <div>{t("shortcuts.switchToFolderAbove")}</div>
         </div>
         <div className="shortcut-row">
-        <div className='hint-wrapper'>
+            <div className='hint-wrapper'>
                 <ShortcutHint shortcut='meta+down' />
                 <ShortcutHint shortcut='alt+down' />
             </div>
-            <div>Switch to folder below</div>
+            <div>{t("shortcuts.switchToFolderBelow")}</div>
         </div>
         <div className="shortcut-row">
             <div className='hint-wrapper'>
                 <ShortcutHint shortcut='alt+1' />
             </div>
-            <div>
-                Switch to 1st folder (works with other numbers too!)
-            </div>
+            <div>{t("shortcuts.switchToNFolder")}</div>
         </div>
 
         <div className="shortcut-row">
             <div className='hint-wrapper'>
                 <ShortcutHint shortcut='alt+e' />
             </div>
-            <div>
-                Edit current folder
-            </div>
+            <div>{t("shortcuts.editCurrentFolder")}</div>
         </div>
         <div className="shortcut-row">
             <div className='hint-wrapper'>
                 <ShortcutHint shortcut='alt+a' />
             </div>
-            <div>
-                Add new widget to current folder
-            </div>
+            <div>{t("shortcuts.addNewWidget")}</div>
         </div>
     </div>);
 }

src/components/WhatsNew.tsx

@@ -4,22 +4,26 @@ import './WhatsNew.scss';
 import { analyticsEnabledAtom } from '@utils/analytics';
 import { Checkbox } from './Checkbox';
 import { useAtomWithStorage } from '@utils/storage';
+import { useTranslation } from 'react-i18next';
 
 export const WhatsNew = () => {
     const [analyticsEnabled, setAnalyticsEnabled] = useAtomWithStorage(analyticsEnabledAtom);
-
+    const { t, i18n } = useTranslation();
     return (<div className="WhatsNew">
         <ScrollArea className='WhatsNew-scrollarea'>
             <div className='WhatsNew-content'>
+                {i18n.language !== 'en' && <section>
+                    {t('availableOnlyInEnglish')}
+                </section>}
                 <section>
                     <h2>1.7.0</h2>
 
                     <ul>
                         <li>Added option to open bookmarks in a new tab. Contribution from @bil0ak. Thanks!</li>
                         <li>Added Ecosia as search provider to Internet search widget. Contribution from @Radeox. Thanks!</li>
                         <li>
-                            Settings grown to be quite lengthy for single modal, so in this version they got reorganized 
-                            into separate screens. And we have two new options: to hide "Edit folder" button and to 
+                            Settings grown to be quite lengthy for single modal, so in this version they got reorganized
+                            into separate screens. And we have two new options: to hide "Edit folder" button and to
                             change page title.
                         </li>
                     </ul>
@@ -34,7 +38,7 @@ export const WhatsNew = () => {
                     </p>
                     <ul className='margin-top'>
                         <li>
-                            Open Anori tab by clicking on extension icon in top right 
+                            Open Anori tab by clicking on extension icon in top right
                             corner (especially useful for Opera users).
                         </li>
                         <li>
@@ -46,17 +50,17 @@ export const WhatsNew = () => {
                     </ul>
 
                     <p>
-                        I also added analytics to better understand which functions you use the most and which aren't 
+                        I also added analytics to better understand which functions you use the most and which aren't
                         used. Analytics is opt-in, so Anori won't send any data if you don't enable analytics. And
                         even when enabled, extension doesn't send any private info. All it collect is: how much folders
                         you have, which widgets you use, which theme you use, how many custom icons you have, how often
-                        you use keyboard shortcuts. Anori doesn't send name of your folder, or URL of bookmarks, or 
+                        you use keyboard shortcuts. Anori doesn't send name of your folder, or URL of bookmarks, or
                         content of your notes.
                     </p>
 
                     <p>
-                        I kindly ask you to enable this feature, as it will help me to develop better product. 
-                        You can always change your choice in settings. 
+                        I kindly ask you to enable this feature, as it will help me to develop better product.
+                        You can always change your choice in settings.
                     </p>
 
                     <Checkbox className="analytics-checkbox" checked={analyticsEnabled} onChange={setAnalyticsEnabled}>Enable sending analytics</Checkbox>

src/components/command-menu/CommandMenu.tsx

@@ -8,6 +8,7 @@ import { wait } from '@utils/misc';
 import { ScrollArea } from '@components/ScrollArea';
 import { useHotkeys } from '@utils/hooks';
 import { trackEvent } from '@utils/analytics';
+import { useTranslation } from 'react-i18next';
 
 const ON_COMMAND_INPUT_TIMEOUT = 300;
 
@@ -46,6 +47,7 @@ export const CommandMenu = () => {
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState('');
     const [actions, setActions] = useState<ActionsWithMetadata[]>([]);
+    const { t } = useTranslation();
 
     useEffect(() => {
         loadActionsByQuery('');
@@ -54,13 +56,13 @@ export const CommandMenu = () => {
     useHotkeys('meta+k', () => setOpen((open) => !open), []);
 
     return (
-        <Command.Dialog open={open} onOpenChange={setOpen} label="Global Command Menu" shouldFilter={false}>
-            <Command.Input value={query} onValueChange={updateQuery} className='Input' placeholder='Enter command' />
+        <Command.Dialog open={open} onOpenChange={setOpen} label={t('commandMenu.name')} shouldFilter={false}>
+            <Command.Input value={query} onValueChange={updateQuery} className='Input' placeholder={t('commandMenu.placeholder')} />
             <Command.List>
                 <ScrollArea className='cmdk-scrollarea'>
                     <div className="cmdk-scrollarea-content">
-                        {!!query && <Command.Empty>No results found.</Command.Empty>}
-                        {!query && <Command.Empty>Nothing here yet. Try adding some widgets to folder.</Command.Empty>}
+                        {!!query && <Command.Empty>{t('noResults')}</Command.Empty>}
+                        {!query && <Command.Empty>{t('commandMenu.noWidgets')}</Command.Empty>}
 
                         {actions.filter(({ items }) => items.length !== 0).map(({ plugin, items }) => {
                             return (<Command.Group heading={plugin.name} key={plugin.id}>