Hindi Internationalization (#1914)

* get basic hindi support to work

* get web app language switcher in

* Refactor i18n implementation and remove unused
code

* add missing strings

* add dropdowns and modals missing strings

* complete all hindi translations

* fix merge conflicts

* fix legeacy persisted state

* fix data in RecommendedFeeds

* fix lint

src/view/shell/Drawer.tsx

@@ -247,7 +247,7 @@ export function DrawerContent() {
                 />
               )
             }
-            label="Search"
+            label={_(msg`Search`)}
             accessibilityLabel={_(msg`Search`)}
             accessibilityHint=""
             bold={isAtSearch}
@@ -269,7 +269,7 @@ export function DrawerContent() {
                 />
               )
             }
-            label="Home"
+            label={_(msg`Home`)}
             accessibilityLabel={_(msg`Home`)}
             accessibilityHint=""
             bold={isAtHome}
@@ -291,7 +291,7 @@ export function DrawerContent() {
                 />
               )
             }
-            label="Notifications"
+            label={_(msg`Notifications`)}
             accessibilityLabel={_(msg`Notifications`)}
             accessibilityHint={
               numUnreadNotifications === ''
@@ -318,7 +318,7 @@ export function DrawerContent() {
                 />
               )
             }
-            label="Feeds"
+            label={_(msg`Feeds`)}
             accessibilityLabel={_(msg`Feeds`)}
             accessibilityHint=""
             bold={isAtFeeds}
@@ -326,14 +326,14 @@ export function DrawerContent() {
           />
           <MenuItem
             icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
-            label="Lists"
+            label={_(msg`Lists`)}
             accessibilityLabel={_(msg`Lists`)}
             accessibilityHint=""
             onPress={onPressLists}
           />
           <MenuItem
             icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
-            label="Moderation"
+            label={_(msg`Moderation`)}
             accessibilityLabel={_(msg`Moderation`)}
             accessibilityHint=""
             onPress={onPressModeration}
@@ -354,7 +354,7 @@ export function DrawerContent() {
                 />
               )
             }
-            label="Profile"
+            label={_(msg`Profile`)}
             accessibilityLabel={_(msg`Profile`)}
             accessibilityHint=""
             onPress={onPressProfile}
@@ -367,7 +367,7 @@ export function DrawerContent() {
                 strokeWidth={1.75}
               />
             }
-            label="Settings"
+            label={_(msg`Settings`)}
             accessibilityLabel={_(msg`Settings`)}
             accessibilityHint=""
             onPress={onPressSettings}

src/view/shell/desktop/Feeds.tsx

@@ -4,10 +4,13 @@ import {useNavigationState} from '@react-navigation/native'
 import {usePalette} from 'lib/hooks/usePalette'
 import {TextLink} from 'view/com/util/Link'
 import {getCurrentRoute} from 'lib/routes/helpers'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
 import {usePinnedFeedsInfos} from '#/state/queries/feed'
 
 export function DesktopFeeds() {
   const pal = usePalette('default')
+  const {_} = useLingui()
   const feeds = usePinnedFeedsInfos()
 
   const route = useNavigationState(state => {
@@ -47,7 +50,7 @@ export function DesktopFeeds() {
         <TextLink
           type="lg"
           href="/feeds"
-          text="More feeds"
+          text={_(msg`More feeds`)}
           style={[pal.link]}
         />
       </View>

src/view/shell/desktop/LeftNav.tsx

@@ -52,6 +52,7 @@ function ProfileCard() {
   const {currentAccount} = useSession()
   const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did})
   const {isDesktop} = useWebMediaQueries()
+  const {_} = useLingui()
   const size = 48
 
   return !isLoading && profile ? (
@@ -61,7 +62,7 @@ function ProfileCard() {
         handle: currentAccount!.handle,
       })}
       style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}
-      title="My Profile"
+      title={_(msg`My Profile`)}
       asAnchor>
       <UserAvatar avatar={profile.avatar} size={size} />
     </Link>
@@ -269,6 +270,7 @@ function ComposeBtn() {
 export function DesktopLeftNav() {
   const {currentAccount} = useSession()
   const pal = usePalette('default')
+  const {_} = useLingui()
   const {isDesktop, isTablet} = useWebMediaQueries()
   const numUnread = useUnreadNotifications()
 
@@ -292,7 +294,7 @@ export function DesktopLeftNav() {
             style={pal.text}
           />
         }
-        label="Home"
+        label={_(msg`Home`)}
       />
       <NavItem
         href="/search"
@@ -310,7 +312,7 @@ export function DesktopLeftNav() {
             style={pal.text}
           />
         }
-        label="Search"
+        label={_(msg`Search`)}
       />
       <NavItem
         href="/feeds"
@@ -328,7 +330,7 @@ export function DesktopLeftNav() {
             size={isDesktop ? 24 : 28}
           />
         }
-        label="Feeds"
+        label={_(msg`Feeds`)}
       />
       <NavItem
         href="/notifications"
@@ -347,7 +349,7 @@ export function DesktopLeftNav() {
             style={pal.text}
           />
         }
-        label="Notifications"
+        label={_(msg`Notifications`)}
       />
       <NavItem
         href="/lists"
@@ -365,7 +367,7 @@ export function DesktopLeftNav() {
             strokeWidth={3}
           />
         }
-        label="Lists"
+        label={_(msg`Lists`)}
       />
       <NavItem
         href="/moderation"
@@ -383,7 +385,7 @@ export function DesktopLeftNav() {
             size={isDesktop ? 20 : 26}
           />
         }
-        label="Moderation"
+        label={_(msg`Moderation`)}
       />
       <NavItem
         href={currentAccount ? makeProfileLink(currentAccount) : '/'}
@@ -419,7 +421,7 @@ export function DesktopLeftNav() {
             style={pal.text}
           />
         }
-        label="Settings"
+        label={_(msg`Settings`)}
       />
       <ComposeBtn />
     </View>

src/view/shell/desktop/RightNav.tsx

@@ -12,12 +12,15 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {pluralize} from 'lib/strings/helpers'
 import {formatCount} from 'view/com/util/numeric/format'
 import {useModalControls} from '#/state/modals'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
 import {useSession} from '#/state/session'
 import {useInviteCodesQuery} from '#/state/queries/invites'
 
 export function DesktopRightNav() {
   const pal = usePalette('default')
   const palError = usePalette('error')
+  const {_} = useLingui()
   const {isSandbox, hasSession, currentAccount} = useSession()
 
   const {isTablet} = useWebMediaQueries()
@@ -45,7 +48,7 @@ export function DesktopRightNav() {
               email: currentAccount!.email,
               handle: currentAccount!.handle,
             })}
-            text="Send feedback"
+            text={_(msg`Feedback`)}
           />
           <Text type="md" style={pal.textLight}>
             &nbsp;&middot;&nbsp;
@@ -54,7 +57,7 @@ export function DesktopRightNav() {
             type="md"
             style={pal.link}
             href="https://blueskyweb.xyz/support/privacy-policy"
-            text="Privacy"
+            text={_(msg`Privacy`)}
           />
           <Text type="md" style={pal.textLight}>
             &nbsp;&middot;&nbsp;
@@ -63,7 +66,7 @@ export function DesktopRightNav() {
             type="md"
             style={pal.link}
             href="https://blueskyweb.xyz/support/tos"
-            text="Terms"
+            text={_(msg`Terms`)}
           />
           <Text type="md" style={pal.textLight}>
             &nbsp;&middot;&nbsp;
@@ -72,7 +75,7 @@ export function DesktopRightNav() {
             type="md"
             style={pal.link}
             href={HELP_DESK_URL}
-            text="Help"
+            text={_(msg`Help`)}
           />
         </View>
       </View>