Migrate to lingui

Switch to "lingui" for better DX.
Tried to persist existing languages as much as possible.

Removed "vite-plugin-node-polyfills" because it's incompatible with "lingui"

src/features/navigation-bar/NavigationBar.constants.ts

@@ -19,7 +19,8 @@ import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import SettingsIcon from '@mui/icons-material/Settings';
 import InfoIcon from '@mui/icons-material/Info';
-import { useTranslation } from 'react-i18next';
+import { useLingui } from '@lingui/react/macro';
+import { msg, plural } from '@lingui/core/macro';
 import { NavbarItem, NavBarItemMoreGroup } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -30,7 +31,7 @@ type RestrictedNavBarItem<Show extends NavbarItem['show']> = Omit<NavbarItem, 's
 const NAVIGATION_BAR_BASE_ITEMS = [
     {
         path: AppRoutes.library.path() as RestrictedNavBarItem<'both'>['path'],
-        title: 'library.title',
+        title: msg`Library`,
         SelectedIconComponent: CollectionsBookmarkIcon,
         IconComponent: CollectionsOutlinedBookmarkIcon,
         show: 'both',
@@ -38,7 +39,7 @@ const NAVIGATION_BAR_BASE_ITEMS = [
     },
     {
         path: AppRoutes.updates.path,
-        title: 'updates.title',
+        title: msg`Updates`,
         SelectedIconComponent: NewReleasesIcon,
         IconComponent: NewReleasesOutlinedIcon,
         show: 'both',
@@ -46,7 +47,7 @@ const NAVIGATION_BAR_BASE_ITEMS = [
     },
     {
         path: AppRoutes.history.path,
-        title: 'history.title',
+        title: msg`History`,
         SelectedIconComponent: HistoryIcon,
         IconComponent: HistoryOutlinedIcon,
         show: 'both',
@@ -54,13 +55,12 @@ const NAVIGATION_BAR_BASE_ITEMS = [
     },
     {
         path: AppRoutes.browse.path() as RestrictedNavBarItem<'both'>['path'],
-        title: 'global.label.browse',
+        title: msg`Browse`,
         SelectedIconComponent: ExploreIcon,
         IconComponent: ExploreOutlinedIcon,
         show: 'both',
         moreGroup: NavBarItemMoreGroup.GENERAL,
         useBadge: () => {
-            const { t } = useTranslation();
             const { data } = requestManager.useGetExtensionList({ fetchPolicy: 'cache-only' });
 
             const extensions = data?.extensions.nodes ?? [];
@@ -75,7 +75,10 @@ const NAVIGATION_BAR_BASE_ITEMS = [
 
             return {
                 count: availableUpdates,
-                title: t('extension.label.available_updates', { count: availableUpdates }),
+                title: plural(availableUpdates, {
+                    one: '# update available',
+                    other: '# updates available',
+                }),
             };
         },
     },
@@ -84,14 +87,14 @@ const NAVIGATION_BAR_BASE_ITEMS = [
 const NAVIGATION_BAR_DESKTOP_ITEMS = [
     {
         path: AppRoutes.downloads.path,
-        title: 'download.title.download',
-        moreTitle: 'download.title.queue',
+        title: msg`Downloads`,
+        moreTitle: msg`Download queue`,
         SelectedIconComponent: GetAppIcon,
         IconComponent: GetAppOutlinedIcon,
         show: 'desktop',
         moreGroup: NavBarItemMoreGroup.HIDDEN_ITEM,
         useBadge: () => {
-            const { t } = useTranslation();
+            const { t } = useLingui();
             const { data } = requestManager.useGetDownloadStatus();
             const downloadStatus = data?.downloadStatus;
 
@@ -107,13 +110,13 @@ const NAVIGATION_BAR_DESKTOP_ITEMS = [
 
             return {
                 count,
-                title: t(isPaused ? 'download.queue.info.paused' : 'download.queue.info.remaining', { count }),
+                title: isPaused ? t`Paused — ${count} remaining` : t`${count} remaining`,
             };
         },
     },
     {
         path: AppRoutes.settings.path,
-        title: 'settings.title',
+        title: msg`Settings`,
         SelectedIconComponent: SettingsIcon,
         IconComponent: SettingsIcon,
         show: 'desktop',
@@ -121,7 +124,7 @@ const NAVIGATION_BAR_DESKTOP_ITEMS = [
     },
     {
         path: AppRoutes.about.path,
-        title: 'settings.about.title',
+        title: msg`About`,
         SelectedIconComponent: InfoIcon,
         IconComponent: InfoIcon,
         show: 'desktop',
@@ -132,7 +135,7 @@ const NAVIGATION_BAR_DESKTOP_ITEMS = [
 export const NAVIGATION_BAR_MOBILE_ITEMS = [
     {
         path: AppRoutes.more.path,
-        title: 'global.label.more',
+        title: msg`More`,
         SelectedIconComponent: MoreHorizIcon,
         IconComponent: MoreHorizIcon,
         show: 'mobile',

src/features/navigation-bar/NavigationBar.types.ts

@@ -6,11 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+import { MessageDescriptor } from '@lingui/core';
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material/SvgIcon';
 import { ReactNode } from 'react';
 import { StaticAppRoute } from '@/base/AppRoute.constants.ts';
-import { TranslationKey } from '@/base/Base.types.ts';
 
 export interface INavbarOverride {
     status: boolean;
@@ -25,8 +25,8 @@ export enum NavBarItemMoreGroup {
 
 export interface NavbarItem {
     path: StaticAppRoute;
-    title: TranslationKey;
-    moreTitle?: TranslationKey;
+    title: MessageDescriptor;
+    moreTitle?: MessageDescriptor;
     SelectedIconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
     IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
     show: 'mobile' | 'desktop' | 'both';

src/features/navigation-bar/components/DesktopSideBar.tsx

@@ -10,7 +10,6 @@ import Drawer from '@mui/material/Drawer';
 import List from '@mui/material/List';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
@@ -22,6 +21,7 @@ import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
 import Badge from '@mui/material/Badge';
 import Typography from '@mui/material/Typography';
+import { useLingui } from '@lingui/react/macro';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { ListItemLink } from '@/base/components/lists/ListItemLink.tsx';
 import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
@@ -40,7 +40,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 }));
 
 const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent, useBadge }: NavbarItem) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
     const location = useLocation();
     const { isCollapsed } = useNavBarContext();
     const theme = useTheme();

src/features/navigation-bar/components/MobileBottomBar.tsx

@@ -8,19 +8,19 @@
 
 import BottomNavigation from '@mui/material/BottomNavigation';
 import BottomNavigationAction from '@mui/material/BottomNavigationAction';
-import { useTranslation } from 'react-i18next';
 import Paper from '@mui/material/Paper';
 import { CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 import Badge from '@mui/material/Badge';
+import { useLingui } from '@lingui/react/macro';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { NavbarItem } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { StaticAppRoute } from '@/base/AppRoute.constants.ts';
 
 export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
-    const { t } = useTranslation();
+    const { t } = useLingui();
     const theme = useTheme();
     const { setBottomBarHeight } = useNavBarContext();
     const location = useLocation();