Merge #7903 (#7917)

* Add missing msg macro calls for i18n (#7903)

* Add missing msg macro calls for i18n

* Update src/screens/Settings/AppIconSettings/useAppIconSets.ts

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Apply surfdude29's suggestions from code review

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* Format

---------

Co-authored-by: Stanislas Signoud <signez@stanisoft.net>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

src/screens/Messages/components/RequestButtons.tsx

@@ -49,18 +49,42 @@ export function RejectMenu({
       }
     },
     onError: () => {
-      Toast.show(_('Failed to delete chat'), 'xmark')
+      Toast.show(
+        _(
+          msg({
+            context: 'toast',
+            message: 'Failed to delete chat',
+          }),
+        ),
+        'xmark',
+      )
     },
   })
   const [queueBlock] = useProfileBlockMutationQueue(shadowedProfile)
 
   const onPressDelete = useCallback(() => {
-    Toast.show(_('Chat deleted'), 'check')
+    Toast.show(
+      _(
+        msg({
+          context: 'toast',
+          message: 'Chat deleted',
+        }),
+      ),
+      'check',
+    )
     leaveConvo()
   }, [leaveConvo, _])
 
   const onPressBlock = useCallback(() => {
-    Toast.show(_('Account blocked'), 'check')
+    Toast.show(
+      _(
+        msg({
+          context: 'toast',
+          message: 'Account blocked',
+        }),
+      ),
+      'check',
+    )
     // block and also delete convo
     queueBlock()
     leaveConvo()
@@ -179,7 +203,15 @@ export function AcceptChatButton({
       // no difference if the request failed - when they send a message, the convo will be accepted
       // automatically. The only difference is that when they back out of the convo (without sending a message), the conversation will be rejected.
       // the list will still have this chat in it -sfn
-      Toast.show(_('Failed to accept chat'), 'xmark')
+      Toast.show(
+        _(
+          msg({
+            context: 'toast',
+            message: 'Failed to accept chat',
+          }),
+        ),
+        'xmark',
+      )
     },
   })
 
@@ -230,12 +262,28 @@ export function DeleteChatButton({
       }
     },
     onError: () => {
-      Toast.show(_('Failed to delete chat'), 'xmark')
+      Toast.show(
+        _(
+          msg({
+            context: 'toast',
+            message: 'Failed to delete chat',
+          }),
+        ),
+        'xmark',
+      )
     },
   })
 
   const onPressDelete = useCallback(() => {
-    Toast.show(_('Chat deleted'), 'check')
+    Toast.show(
+      _(
+        msg({
+          context: 'toast',
+          message: 'Chat deleted',
+        }),
+      ),
+      'check',
+    )
     leaveConvo()
   }, [leaveConvo, _])
 

src/screens/Settings/AppIconSettings/useAppIconSets.ts

@@ -1,4 +1,5 @@
 import {useMemo} from 'react'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {AppIconSet} from '#/screens/Settings/AppIconSettings/types'
@@ -10,7 +11,7 @@ export function useAppIconSets() {
     const defaults = [
       {
         id: 'default_light',
-        name: _('Light'),
+        name: _(msg({context: 'Name of app icon variant', message: 'Light'})),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_default_light.png`)
         },
@@ -20,7 +21,7 @@ export function useAppIconSets() {
       },
       {
         id: 'default_dark',
-        name: _('Dark'),
+        name: _(msg({context: 'Name of app icon variant', message: 'Dark'})),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_default_dark.png`)
         },
@@ -36,7 +37,7 @@ export function useAppIconSets() {
     const core = [
       {
         id: 'core_aurora',
-        name: _('Aurora'),
+        name: _(msg({context: 'Name of app icon variant', message: 'Aurora'})),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_core_aurora.png`)
         },
@@ -46,7 +47,7 @@ export function useAppIconSets() {
       },
       // {
       //   id: 'core_bonfire',
-      //   name: _('Bonfire'),
+      //   name: _(msg({ context: 'Name of app icon variant', message: 'Bonfire' })),
       //   iosImage: () => {
       //     return require(`../../../../assets/app-icons/ios_icon_core_bonfire.png`)
       //   },
@@ -56,7 +57,7 @@ export function useAppIconSets() {
       // },
       {
         id: 'core_sunrise',
-        name: _('Sunrise'),
+        name: _(msg({context: 'Name of app icon variant', message: 'Sunrise'})),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_core_sunrise.png`)
         },
@@ -66,7 +67,7 @@ export function useAppIconSets() {
       },
       {
         id: 'core_sunset',
-        name: _('Sunset'),
+        name: _(msg({context: 'Name of app icon variant', message: 'Sunset'})),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_core_sunset.png`)
         },
@@ -76,7 +77,9 @@ export function useAppIconSets() {
       },
       {
         id: 'core_midnight',
-        name: _('Midnight'),
+        name: _(
+          msg({context: 'Name of app icon variant', message: 'Midnight'}),
+        ),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_core_midnight.png`)
         },
@@ -86,7 +89,9 @@ export function useAppIconSets() {
       },
       {
         id: 'core_flat_blue',
-        name: _('Flat Blue'),
+        name: _(
+          msg({context: 'Name of app icon variant', message: 'Flat Blue'}),
+        ),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_core_flat_blue.png`)
         },
@@ -96,7 +101,9 @@ export function useAppIconSets() {
       },
       {
         id: 'core_flat_white',
-        name: _('Flat White'),
+        name: _(
+          msg({context: 'Name of app icon variant', message: 'Flat White'}),
+        ),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_core_flat_white.png`)
         },
@@ -106,7 +113,9 @@ export function useAppIconSets() {
       },
       {
         id: 'core_flat_black',
-        name: _('Flat Black'),
+        name: _(
+          msg({context: 'Name of app icon variant', message: 'Flat Black'}),
+        ),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_core_flat_black.png`)
         },
@@ -116,7 +125,12 @@ export function useAppIconSets() {
       },
       {
         id: 'core_classic',
-        name: _('Bluesky Classic™'),
+        name: _(
+          msg({
+            context: 'Name of app icon variant',
+            message: 'Bluesky Classic™',
+          }),
+        ),
         iosImage: () => {
           return require(`../../../../assets/app-icons/ios_icon_core_classic.png`)
         },

src/screens/StarterPack/Wizard/StepDetails.tsx

@@ -50,7 +50,14 @@ export function StepDetails() {
               value={state.name}
               onChangeText={text => dispatch({type: 'SetName', name: text})}
             />
-            <TextField.SuffixText label={_(`${state.name?.length} out of 50`)}>
+            <TextField.SuffixText
+              label={_(
+                msg({
+                  comment:
+                    'Accessibility label describing how many characters the user has entered out of a 50-character limit in a text input field',
+                  message: '${state.name?.length} out of 50',
+                }),
+              )}>
               <Text style={[t.atoms.text_contrast_medium]}>
                 {state.name?.length ?? 0}/50
               </Text>