implement custom post name feature with replace

replaces "Post" with "Skeet" when language files are loaded

finish up the feature

src/locale/i18n.ts

···
 
 import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {AppLanguage} from '#/locale/languages'
+import {applySkeetReplacements} from '#/locale/linguiHook'
 import {messages as messagesAn} from '#/locale/locales/an/messages'
 import {messages as messagesAst} from '#/locale/locales/ast/messages'
 import {messages as messagesCa} from '#/locale/locales/ca/messages'
···
       break
     }
     case AppLanguage.en_GB: {
-      i18n.loadAndActivate({locale, messages: messagesEn_GB})
+      const transformedMsgs = applySkeetReplacements(messagesEn_GB, locale)
+      i18n.loadAndActivate({locale, messages: transformedMsgs})
       await Promise.all([
         import('@formatjs/intl-pluralrules/locale-data/en'),
         import('@formatjs/intl-numberformat/locale-data/en-GB'),
···
       await Promise.all([
         import('@formatjs/intl-pluralrules/locale-data/zh'),
         import('@formatjs/intl-numberformat/locale-data/zh'),
-        import('@formatjs/intl-displaynames/locale-data/zh'),
       ])
       break
     }
     default: {
-      i18n.loadAndActivate({locale, messages: messagesEn})
+      const transformedMsgs = applySkeetReplacements(messagesEn, locale)
+      i18n.loadAndActivate({locale, messages: transformedMsgs})
       break
     }
   }

src/locale/i18n.web.ts

···
 import {useEffect} from 'react'
-import {i18n} from '@lingui/core'
+import {i18n, type Messages} from '@lingui/core'
 
 import {sanitizeAppLanguageSetting} from '#/locale/helpers'
 import {AppLanguage} from '#/locale/languages'
+import {applySkeetReplacements} from '#/locale/linguiHook'
 import {useLanguagePrefs} from '#/state/preferences'
 
 /**
  * We do a dynamic import of just the catalog that we need
  */
 export async function dynamicActivate(locale: AppLanguage) {
-  let mod: any
+  let mod: {messages: Messages}
 
   switch (locale) {
     case AppLanguage.an: {
···
       mod = await import(`./locales/el/messages`)
       break
     }
+    case AppLanguage.en: {
+      mod = await import(`./locales/en/messages`)
+      const transformedEnMessages = applySkeetReplacements(mod.messages, locale)
+      i18n.load(locale, transformedEnMessages)
+      i18n.activate(locale)
+      break
+    }
     case AppLanguage.en_GB: {
       mod = await import(`./locales/en-GB/messages`)
+      const transformedEnGbMessages = applySkeetReplacements(
+        mod.messages,
+        locale,
+      )
+      i18n.load(locale, transformedEnGbMessages)
+      i18n.activate(locale)
       break
     }
     case AppLanguage.eo: {
···
     }
     default: {
       mod = await import(`./locales/en/messages`)
+      const transformedDefaultMessages = applySkeetReplacements(
+        mod.messages,
+        locale,
+      )
+      i18n.load(locale, transformedDefaultMessages)
+      i18n.activate(locale)
       break
     }
   }
-
-  i18n.load(locale, mod.messages)
-  i18n.activate(locale)
 }
 
 export function useLocaleLanguage() {

src/locale/linguiHook.ts

···
+import {type Messages} from '@lingui/core'
+
+import * as persisted from '#/state/persisted'
+
+// Helper to apply the replacement to a single string
+function replaceInString(text: string): string {
+  const {string: replacement, enabled} = persisted.get('postReplacement')
+  if (!enabled) return text
+  let repl = replacement?.length ? replacement.toLowerCase() : 'skeet'
+  return text
+    .replaceAll('Post', repl[0].toUpperCase() + repl.slice(1))
+    .replaceAll('post', repl)
+}
+
+// Recursive helper to traverse and replace strings in nested structures
+function traverseAndReplace(value: any): any {
+  if (typeof value === 'string') {
+    return replaceInString(value)
+  }
+  if (Array.isArray(value)) {
+    return value.map(item => traverseAndReplace(item))
+  }
+  if (typeof value === 'object' && value !== null) {
+    const newObject: Record<string, any> = {}
+    for (const key in value) {
+      if (Object.prototype.hasOwnProperty.call(value, key)) {
+        newObject[key] = traverseAndReplace(value[key])
+      }
+    }
+    return newObject
+  }
+  return value
+}
+
+/**
+ * Applies "Post" to "Skeet" replacements (case-insensitive) to messages
+ * for English locales.
+ * @param messages The raw messages object loaded from Lingui.
+ * @param locale The current locale string.
+ * @returns The messages object with replacements applied if the locale is English,
+ *          otherwise the original messages object.
+ */
+export function applySkeetReplacements(
+  messages: Messages,
+  locale: string,
+): Messages {
+  const {enabled} = persisted.get('postReplacement')
+  console.log('replacements enabled:', enabled)
+  if (!enabled || !locale.startsWith('en')) {
+    return messages
+  }
+
+  // Traverse the entire messages catalog and apply replacements
+  const transformedCatalog: Messages = {}
+  for (const key in messages) {
+    if (Object.prototype.hasOwnProperty.call(messages, key)) {
+      transformedCatalog[key] = traverseAndReplace(messages[key])
+    }
+  }
+  return transformedCatalog
+}

src/screens/Profile/Header/Metrics.tsx

···
   const disablePostsMetrics = useDisablePostsMetrics()
 
   return (
-    <View
-      style={[a.flex_row, a.gap_sm, a.align_center]}
-      pointerEvents="box-none">
-      <InlineLinkText
-        testID="profileHeaderFollowersButton"
-        style={[a.flex_row, t.atoms.text]}
-        to={makeProfileLink(profile, 'followers')}
-        label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
-        <Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
-        <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
-          {pluralizedFollowers}
-        </Text>
-      </InlineLinkText>
-      <InlineLinkText
-        testID="profileHeaderFollowsButton"
-        style={[a.flex_row, t.atoms.text]}
-        to={makeProfileLink(profile, 'follows')}
-        label={_(msg`${profile.followsCount || 0} following`)}>
-        <Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
-        <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
-          {pluralizedFollowings}
-        </Text>
-      </InlineLinkText>
-      <Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
-        {formatCount(i18n, profile.postsCount || 0)}{' '}
-        <Text style={[t.atoms.text_contrast_medium, a.font_normal, a.text_md]}>
-          {plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
-        </Text>
-      </Text>
-    </View>
+    <>
+      {disableFollowersMetrics &&
+      disableFollowingMetrics &&
+      disablePostsMetrics ? null : (
+        <View
+          style={[a.flex_row, a.gap_sm, a.align_center]}
+          pointerEvents="box-none">
+          {!disableFollowersMetrics ? (
+            <InlineLinkText
+              testID="profileHeaderFollowersButton"
+              style={[a.flex_row, t.atoms.text]}
+              to={makeProfileLink(profile, 'followers')}
+              label={`${profile.followersCount || 0} ${pluralizedFollowers}`}>
+              <Text style={[a.font_semi_bold, a.text_md]}>{followers} </Text>
+              <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
+                {pluralizedFollowers}
+              </Text>
+            </InlineLinkText>
+          ) : null}
+          {!disableFollowingMetrics ? (
+            <InlineLinkText
+              testID="profileHeaderFollowsButton"
+              style={[a.flex_row, t.atoms.text]}
+              to={makeProfileLink(profile, 'follows')}
+              label={_(msg`${profile.followsCount || 0} following`)}>
+              <Text style={[a.font_semi_bold, a.text_md]}>{following} </Text>
+              <Text style={[t.atoms.text_contrast_medium, a.text_md]}>
+                {pluralizedFollowings}
+              </Text>
+            </InlineLinkText>
+          ) : null}
+          {!disablePostsMetrics ? (
+            <Text style={[a.font_semi_bold, t.atoms.text, a.text_md]}>
+              {formatCount(i18n, profile.postsCount || 0)}{' '}
+              <Text
+                style={[
+                  t.atoms.text_contrast_medium,
+                  a.font_normal,
+                  a.text_md,
+                ]}>
+                {plural(profile.postsCount || 0, {one: 'post', other: 'posts'})}
+              </Text>
+            </Text>
+          ) : null}
+        </View>
+      )}
+    </>
   )
 }

src/screens/Settings/DeerSettings.tsx

···
   useSetNoDiscoverFallback,
 } from '#/state/preferences/no-discover-fallback'
 import {
+  usePostReplacement,
+  useSetPostReplacement,
+} from '#/state/preferences/post-name-replacement'
+import {
   useRepostCarouselEnabled,
   useSetRepostCarouselEnabled,
 } from '#/state/preferences/repost-carousel-enabled'
···
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import * as TextField from '#/components/forms/TextField'
 import * as Toggle from '#/components/forms/Toggle'
 import {Atom_Stroke2_Corner0_Rounded as DeerIcon} from '#/components/icons/Atom'
 import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
···
 
   const setLibreTranslateInstanceControl = Dialog.useDialogControl()
 
+  const postReplacement = usePostReplacement()
+  const setPostReplacement = useSetPostReplacement()
+
   return (
     <Layout.Screen>
       <Layout.Header.Outer>
···
           </SettingsList.Item>
 
           <SettingsList.Divider />
+
+          <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
+            <SettingsList.ItemIcon icon={VerifiedIcon} />
+            <SettingsList.ItemText>
+              <Trans>
+                Call posts{' '}
+                {postReplacement.string.length
+                  ? postReplacement.string.toLowerCase()
+                  : 'skeet'}
+                s
+              </Trans>
+            </SettingsList.ItemText>
+            <Toggle.Item
+              name="call_posts_skeets"
+              label={_(
+                msg`Changes post to another word of your choosing. Requires a refresh to update.`,
+              )}
+              value={postReplacement.enabled}
+              onChange={value =>
+                setPostReplacement({
+                  enabled: value,
+                  string: postReplacement.string,
+                })
+              }
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>
+                  Changes post to another word of your choosing. Requires a
+                  refresh to update.
+                </Trans>
+              </Toggle.LabelText>
+              <Toggle.Platform />
+            </Toggle.Item>
+
+            {postReplacement.enabled && (
+              <SettingsList.Item>
+                <TextField.Root>
+                  <TextField.Input
+                    label={_(msg`Custom post name`)}
+                    value={postReplacement.string}
+                    onChangeText={(value: string) =>
+                      setPostReplacement(
+                        (curr: {enabled: boolean; string: string}) => ({
+                          ...curr,
+                          string: value,
+                        }),
+                      )
+                    }
+                  />
+                </TextField.Root>
+              </SettingsList.Item>
+            )}
+          </SettingsList.Group>
 
           <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
             <SettingsList.ItemIcon icon={PaintRollerIcon} />

src/state/persisted/schema.ts

···
   highQualityImages: z.boolean().optional(),
   hideUnreplyablePosts: z.boolean().optional(),
 
+  postReplacement: z.object({
+    enabled: z.boolean().optional(),
+    string: z.string().optional(),
+  }),
+
   showExternalShareButtons: z.boolean().optional(),
 
   translationServicePreference: z.enum([
···
   showExternalShareButtons: false,
   translationServicePreference: 'google',
   libreTranslateInstance: 'https://libretranslate.com/',
+
+  postReplacement: {
+    enabled: false,
+    string: 'skeet',
+  },
 }
 
 export function tryParse(rawData: string): Schema | undefined {

src/state/preferences/index.tsx

···
 import {Provider as LargeAltBadgeProvider} from './large-alt-badge'
 import {Provider as NoAppLabelersProvider} from './no-app-labelers'
 import {Provider as NoDiscoverProvider} from './no-discover-fallback'
+import {Provider as PostNameReplacementProvider} from './post-name-replacement.tsx'
 import {Provider as RepostCarouselProvider} from './repost-carousel-enabled'
 import {Provider as ShowLinkInHandleProvider} from './show-link-in-handle'
 import {Provider as SubtitlesProvider} from './subtitles'
···
                                                                           <HideUnreplyablePostsProvider>
                                                                             <EnableSquareAvatarsProvider>
                                                                               <EnableSquareButtonsProvider>
-                                                                                <DisableVerifyEmailReminderProvider>
-                                                                                  <TranslationServicePreferenceProvider>
-                                                                                    <DisableComposerPromptProvider>
-                                                                                      {
-                                                                                        children
-                                                                                      }
-                                                                                    </DisableComposerPromptProvider>
-                                                                                  </TranslationServicePreferenceProvider>
-                                                                                </DisableVerifyEmailReminderProvider>
+                                                                                <PostNameReplacementProvider>
+                                                                                  <DisableVerifyEmailReminderProvider>
+                                                                                    <TranslationServicePreferenceProvider>
+                                                                                      <DisableComposerPromptProvider>
+                                                                                        {
+                                                                                          children
+                                                                                        }
+                                                                                      </DisableComposerPromptProvider>
+                                                                        	    </TranslationServicePreferenceProvider>
+                                                                                  </DisableVerifyEmailReminderProvider>
+                                                                                </PostNameReplacementProvider>
                                                                               </EnableSquareButtonsProvider>
                                                                             </EnableSquareAvatarsProvider>
                                                                           </HideUnreplyablePostsProvider>

src/state/preferences/post-name-replacement.tsx

···
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+interface PostReplacementState {
+  enabled: boolean
+  string: string
+}
+
+type StateContext = PostReplacementState
+type SetContext = (
+  v:
+    | PostReplacementState
+    | ((curr: PostReplacementState) => PostReplacementState),
+) => void
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.postReplacement as PostReplacementState,
+)
+const setContext = React.createContext<SetContext>(
+  (
+    _:
+      | PostReplacementState
+      | ((curr: PostReplacementState) => PostReplacementState),
+  ) => {},
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, _setState] = React.useState<PostReplacementState>(() => {
+    const persistedState = persisted.get('postReplacement')
+    return {
+      enabled:
+        persistedState?.enabled ?? persisted.defaults.postReplacement.enabled!,
+      string:
+        persistedState?.string ?? persisted.defaults.postReplacement.string!,
+    }
+  })
+
+  const setState = React.useCallback(
+    (
+      val:
+        | PostReplacementState
+        | ((curr: PostReplacementState) => PostReplacementState),
+    ) => {
+      _setState(curr => {
+        const next = typeof val === 'function' ? val(curr) : val
+        persisted.write('postReplacement', next)
+        return next
+      })
+    },
+    [],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate('postReplacement', next => {
+      setState({string: next.string ?? 'skeet', enabled: next.enabled ?? true})
+      /*
+      if (nextVal) {
+        _setState({
+          enabled:
+            nextVal.enabled ?? persisted.defaults.postReplacement.enabled!,
+          string: nextVal.string ?? persisted.defaults.postReplacement.string!,
+        })
+      }*/
+    })
+  }, [])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setState}>{children}</setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function usePostReplacement() {
+  return React.useContext(stateContext)
+}
+
+export function useSetPostReplacement() {
+  return React.useContext(setContext)
+}