feat: allow users to choose post terminology (skeet/post/spell)

src/screens/Settings/DeerSettings.tsx

···
   useShowExternalShareButtons,
 } from '#/state/preferences/external-share-buttons'
 import {
+  useSetTerminologyPreference,
+  useTerminologyPreference,
+} from '#/state/preferences/terminology-preference'
+import {
   useHideFeedsPromoTab,
   useSetHideFeedsPromoTab,
 } from '#/state/preferences/hide-feeds-promo-tab'
···
   const showLinkInHandle = useShowLinkInHandle()
   const setShowLinkInHandle = useSetShowLinkInHandle()
 
+  const terminologyPreference = useTerminologyPreference()
+  const setTerminologyPreference = useSetTerminologyPreference()
+
   const [gates, setGatesView] = useState(Object.assign({
     alt_share_icon: false,
     debug_show_feedcontext: false,
···
                 {customAppViewDid && _(` Currently ${customAppViewDid}`)}
               </Trans>
             </Admonition>
+          </SettingsList.Item>
+
+          <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
+            <SettingsList.ItemIcon icon={PaintRollerIcon} />
+            <SettingsList.ItemText>
+              <Trans>Terminology</Trans>
+            </SettingsList.ItemText>
+          </SettingsList.Group>
+
+          <SettingsList.Item>
+            <Admonition type="info" style={[a.flex_1]}>
+              <Trans>
+                Choose your preferred terminology for posts throughout the app.
+              </Trans>
+            </Admonition>
+          </SettingsList.Item>
+
+          <SettingsList.Item>
+            <Toggle.Item
+              name="terminology_skeet"
+              label={_(msg`Use "skeet(s)"`)}
+              value={terminologyPreference === 'skeet'}
+              onChange={() => setTerminologyPreference('skeet')}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>Use "skeet(s)"</Trans>
+              </Toggle.LabelText>
+              <Toggle.Radio />
+            </Toggle.Item>
+          </SettingsList.Item>
+
+          <SettingsList.Item>
+            <Toggle.Item
+              name="terminology_post"
+              label={_(msg`Use "post(s)"`)}
+              value={terminologyPreference === 'post'}
+              onChange={() => setTerminologyPreference('post')}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>Use "post(s)"</Trans>
+              </Toggle.LabelText>
+              <Toggle.Radio />
+            </Toggle.Item>
+          </SettingsList.Item>
+
+          <SettingsList.Item>
+            <Toggle.Item
+              name="terminology_spell"
+              label={_(msg`Use "spell(s)"`)}
+              value={terminologyPreference === 'spell'}
+              onChange={() => setTerminologyPreference('spell')}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>Use "spell(s)"</Trans>
+              </Toggle.LabelText>
+              <Toggle.Radio />
+            </Toggle.Item>
           </SettingsList.Item>
 
           <SettingsList.Group contentContainerStyle={[a.gap_sm]}>

src/state/persisted/schema.ts

···
   hideUnreplyablePosts: z.boolean().optional(),
 
   showExternalShareButtons: z.boolean().optional(),
+  terminologyPreference: z.enum(['skeet', 'post', 'spell']).optional(),
 
   /** @deprecated */
   mutedThreads: z.array(z.string()),
···
   highQualityImages: false,
   hideUnreplyablePosts: false,
   showExternalShareButtons: false,
+  terminologyPreference: 'skeet',
 }
 
 export function tryParse(rawData: string): Schema | undefined {

src/state/preferences/index.tsx

···
 import {Provider as RepostCarouselProvider} from './repost-carousel-enabled'
 import {Provider as ShowLinkInHandleProvider} from './show-link-in-handle'
 import {Provider as SubtitlesProvider} from './subtitles'
+import {Provider as TerminologyPreferenceProvider} from './terminology-preference'
 import {Provider as TrendingSettingsProvider} from './trending'
 import {Provider as UsedStarterPacksProvider} from './used-starter-packs'
 
···
 export {useLabelDefinitions} from './label-defs'
 export {useLanguagePrefs, useLanguagePrefsApi} from './languages'
 export {useSetSubtitlesEnabled, useSubtitlesEnabled} from './subtitles'
+export {
+  useTerminologyPreference,
+  useSetTerminologyPreference,
+} from './terminology-preference'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   return (
···
                                                                           <EnableSquareAvatarsProvider>
                                                                             <EnableSquareButtonsProvider>
                                                                               <DisableVerifyEmailReminderProvider>
-                                                                                {children}
+                                                                                <TerminologyPreferenceProvider>
+                                                                                  {children}
+                                                                                </TerminologyPreferenceProvider>
                                                                               </DisableVerifyEmailReminderProvider>
                                                                             </EnableSquareButtonsProvider>
                                                                           </EnableSquareAvatarsProvider>

src/state/preferences/terminology-preference.tsx

···
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+type StateContext = persisted.Schema['terminologyPreference']
+type SetContext = (v: persisted.Schema['terminologyPreference']) => void
+
+const stateContext = React.createContext<StateContext>(
+  persisted.defaults.terminologyPreference,
+)
+const setContext = React.createContext<SetContext>(
+  (_: persisted.Schema['terminologyPreference']) => {},
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState(
+    persisted.get('terminologyPreference'),
+  )
+
+  const setStateWrapped = React.useCallback(
+    (terminologyPreference: persisted.Schema['terminologyPreference']) => {
+      setState(terminologyPreference)
+      persisted.write('terminologyPreference', terminologyPreference)
+    },
+    [setState],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate(
+      'terminologyPreference',
+      nextTerminologyPreference => {
+        setState(nextTerminologyPreference)
+      },
+    )
+  }, [setStateWrapped])
+
+  return (
+    <stateContext.Provider value={state}>
+      <setContext.Provider value={setStateWrapped}>
+        {children}
+      </setContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useTerminologyPreference() {
+  return React.useContext(stateContext)
+}
+
+export function useSetTerminologyPreference() {
+  return React.useContext(setContext)
+}