ALF content language dialog (#9471)

Co-authored-by: Eric Bailey <git@esb.lol>

modules/bottom-sheet/src/BottomSheetNativeComponent.tsx

@@ -16,8 +16,10 @@ import {
   type BottomSheetState,
   type BottomSheetViewProps,
 } from './BottomSheet.types'
-import {BottomSheetPortalProvider} from './BottomSheetPortal'
+import {
-import {Context as PortalContext} from './BottomSheetPortal'
+  BottomSheetPortalProvider,
+  Context as PortalContext,
+} from './BottomSheetPortal'
 
 const screenHeight = Dimensions.get('screen').height
 

src/components/Select/index.tsx

@@ -103,9 +103,9 @@ export function Trigger({children, label}: TriggerProps) {
       <Button
         label={label}
         onPress={control.open}
-        style={[a.flex_1, a.justify_between]}
+        style={[a.flex_1, a.justify_between, a.pl_lg, a.pr_md]}
         color="secondary"
-        size="small"
+        size="large"
         shape="rectangular">
         <>{children}</>
       </Button>

src/components/dialogs/LanguageSelectDialog.tsx

@@ -6,11 +6,7 @@ import {useLingui} from '@lingui/react'
 
 import {languageName} from '#/locale/helpers'
 import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages'
-import {
+import {useLanguagePrefs} from '#/state/preferences/languages'
-  toPostLanguages,
-  useLanguagePrefs,
-  useLanguagePrefsApi,
-} from '#/state/preferences/languages'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, useTheme, web} from '#/alf'
@@ -22,18 +18,27 @@ import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Ti
 import {Text} from '#/components/Typography'
 import {IS_NATIVE, IS_WEB} from '#/env'
 
-export function PostLanguageSelectDialog({
+export function LanguageSelectDialog({
+  titleText,
+  subtitleText,
   control,
   /**
    * Optionally can be passed to show different values than what is saved in
    * langPrefs.
    */
   currentLanguages,
-  onSelectLanguage,
+  onSelectLanguages,
+  maxLanguages,
 }: {
   control: Dialog.DialogControlProps
+  titleText?: React.ReactNode
+  subtitleText?: React.ReactNode
+  /**
+   * Defaults to the primary language
+   */
   currentLanguages?: string[]
-  onSelectLanguage?: (language: string) => void
+  onSelectLanguages: (languages: string[]) => void
+  maxLanguages?: number
 }) {
   const {height} = useWindowDimensions()
   const insets = useSafeAreaInsets()
@@ -50,8 +55,11 @@ export function PostLanguageSelectDialog({
       <Dialog.Handle />
       <ErrorBoundary renderError={renderErrorBoundary}>
         <DialogInner
+          titleText={titleText}
+          subtitleText={subtitleText}
           currentLanguages={currentLanguages}
-          onSelectLanguage={onSelectLanguage}
+          onSelectLanguages={onSelectLanguages}
+          maxLanguages={maxLanguages}
         />
       </ErrorBoundary>
     </Dialog.Outer>
@@ -59,11 +67,17 @@ export function PostLanguageSelectDialog({
 }
 
 export function DialogInner({
+  titleText,
+  subtitleText,
   currentLanguages,
-  onSelectLanguage,
+  onSelectLanguages,
+  maxLanguages,
 }: {
+  titleText?: React.ReactNode
+  subtitleText?: React.ReactNode
   currentLanguages?: string[]
-  onSelectLanguage?: (language: string) => void
+  onSelectLanguages?: (languages: string[]) => void
+  maxLanguages?: number
 }) {
   const control = Dialog.useDialogContext()
   const [headerHeight, setHeaderHeight] = useState(0)
@@ -81,26 +95,17 @@ export function DialogInner({
   }, [])
 
   const langPrefs = useLanguagePrefs()
-  const postLanguagesPref =
-    currentLanguages ?? toPostLanguages(langPrefs.postLanguage)
-
   const [checkedLanguagesCode2, setCheckedLanguagesCode2] = useState<string[]>(
-    postLanguagesPref || [langPrefs.primaryLanguage],
+    currentLanguages || [langPrefs.primaryLanguage],
   )
   const [search, setSearch] = useState('')
 
-  const setLangPrefs = useLanguagePrefsApi()
   const t = useTheme()
   const {_} = useLingui()
 
   const handleClose = () => {
     control.close(() => {
-      let langsString = checkedLanguagesCode2.join(',')
+      onSelectLanguages?.(checkedLanguagesCode2)
-      if (!langsString) {
-        langsString = langPrefs.primaryLanguage
-      }
-      setLangPrefs.setPostLanguage(langsString)
-      onSelectLanguage?.(langsString)
     })
   }
 
@@ -181,8 +186,9 @@ export function DialogInner({
               a.text_xl,
               a.mb_sm,
             ]}>
-            <Trans>Choose Post Languages</Trans>
+            {titleText ?? <Trans>Choose languages</Trans>}
           </Text>
+          {subtitleText && (
             <Text
               nativeID="dialog-description"
               style={[
@@ -191,8 +197,9 @@ export function DialogInner({
                 a.text_md,
                 a.mb_lg,
               ]}>
-            <Trans>Select up to 3 languages used in this post</Trans>
+              {subtitleText}
             </Text>
+          )}
         </View>
 
         {IS_WEB && (
@@ -244,7 +251,7 @@ export function DialogInner({
       values={checkedLanguagesCode2}
       onChange={setCheckedLanguagesCode2}
       type="checkbox"
-      maxSelections={3}
+      maxSelections={maxLanguages}
       label={_(msg`Select languages`)}
       style={web([a.contents])}>
       <Dialog.InnerFlatList

src/screens/Settings/LanguageSettings.tsx

@@ -1,19 +1,21 @@
-import {useCallback, useMemo} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
 import {
   type CommonNavigatorParams,
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {languageName, sanitizeAppLanguageSetting} from '#/locale/helpers'
-import {useModalControls} from '#/state/modals'
+import {APP_LANGUAGES, LANGUAGES} from '#/locale/languages'
 import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
-import {atoms as a, useTheme, web} from '#/alf'
+import {atoms as a, web} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Admonition} from '#/components/Admonition'
-import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
+import {Button} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {LanguageSelectDialog} from '#/components/dialogs/LanguageSelectDialog'
+import * as Toggle from '#/components/forms/Toggle'
 import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
 import * as Layout from '#/components/Layout'
 import * as Select from '#/components/Select'
@@ -30,13 +32,8 @@ export function LanguageSettingsScreen({}: Props) {
   const {_} = useLingui()
   const langPrefs = useLanguagePrefs()
   const setLangPrefs = useLanguagePrefsApi()
-  const t = useTheme()
 
-  const {openModal} = useModalControls()
+  const contentLanguagePrefsControl = useDialogControl()
-
-  const onPressContentLanguages = useCallback(() => {
-    openModal({name: 'content-languages-settings'})
-  }, [openModal])
 
   const onChangePrimaryLanguage = useCallback(
     (value: string) => {
@@ -58,16 +55,21 @@ export function LanguageSettingsScreen({}: Props) {
     [langPrefs, setLangPrefs],
   )
 
-  const myLanguages = useMemo(() => {
+  const [recentLanguages, setRecentLanguages] = useState<string[]>(
-    return (
+    langPrefs.contentLanguages,
-      langPrefs.contentLanguages
-        .map(lang => LANGUAGES.find(l => l.code2 === lang))
-        .filter(Boolean)
-        // @ts-ignore
-        .map(l => languageName(l, langPrefs.appLanguage))
-        .join(', ')
   )
-  }, [langPrefs.appLanguage, langPrefs.contentLanguages])
+
+  const possibleLanguages = useMemo(() => {
+    return [
+      ...new Set([
+        ...recentLanguages,
+        ...langPrefs.contentLanguages,
+        ...langPrefs.primaryLanguage,
+      ]),
+    ]
+      .map(lang => LANGUAGES.find(l => l.code2 === lang))
+      .filter(x => !!x)
+  }, [recentLanguages, langPrefs.contentLanguages, langPrefs.primaryLanguage])
 
   return (
     <Layout.Screen testID="PreferencesLanguagesScreen">
@@ -84,7 +86,7 @@ export function LanguageSettingsScreen({}: Props) {
         <SettingsList.Container>
           <SettingsList.Group iconInset={false}>
             <SettingsList.ItemText>
-              <Trans>App Language</Trans>
+              <Trans>App language</Trans>
             </SettingsList.ItemText>
             <View style={[a.gap_md, a.w_full]}>
               <Text style={[a.leading_snug]}>
@@ -118,7 +120,7 @@ export function LanguageSettingsScreen({}: Props) {
           <SettingsList.Divider />
           <SettingsList.Group iconInset={false}>
             <SettingsList.ItemText>
-              <Trans>Primary Language</Trans>
+              <Trans>Primary language</Trans>
             </SettingsList.ItemText>
             <View style={[a.gap_md, a.w_full]}>
               <Text style={[a.leading_snug]}>
@@ -152,7 +154,7 @@ export function LanguageSettingsScreen({}: Props) {
           <SettingsList.Divider />
           <SettingsList.Group iconInset={false}>
             <SettingsList.ItemText>
-              <Trans>Content Languages</Trans>
+              <Trans>Content languages</Trans>
             </SettingsList.ItemText>
             <View style={[a.gap_md]}>
               <Text style={[a.leading_snug]}>
@@ -162,24 +164,67 @@ export function LanguageSettingsScreen({}: Props) {
                 </Trans>
               </Text>
 
-              <Button
+              {langPrefs.contentLanguages.length === 0 && (
+                <Admonition type="info">
+                  <Trans>All languages will be shown in your feeds.</Trans>
+                </Admonition>
+              )}
+
+              <View style={[a.w_full, web({maxWidth: 400})]}>
+                <Toggle.Group
                   label={_(msg`Select content languages`)}
-                size="small"
+                  values={langPrefs.contentLanguages}
-                color="secondary"
+                  onChange={setLangPrefs.setContentLanguages}>
-                shape="rectangular"
+                  <Toggle.PanelGroup>
-                onPress={onPressContentLanguages}
+                    {possibleLanguages.map((language, index) => {
-                style={[a.justify_start, web({maxWidth: 400})]}>
+                      const name = languageName(language, langPrefs.appLanguage)
-                <ButtonIcon
+                      return (
-                  icon={myLanguages.length > 0 ? CheckIcon : PlusIcon}
+                        <Toggle.Item
-                />
+                          key={language.code2}
-                <ButtonText
+                          name={language.code2}
-                  style={[t.atoms.text, a.text_md, a.flex_1, a.text_left]}
+                          label={name}>
-                  numberOfLines={1}>
+                          {({selected}) => (
-                  {myLanguages.length > 0
+                            <Toggle.Panel
-                    ? myLanguages
+                              active={selected}
-                    : _(msg`Select languages`)}
+                              adjacent={index === 0 ? 'trailing' : 'both'}>
-                </ButtonText>
+                              <Toggle.Checkbox />
+                              <Toggle.PanelText>{name}</Toggle.PanelText>
+                            </Toggle.Panel>
+                          )}
+                        </Toggle.Item>
+                      )
+                    })}
+                    <Button
+                      label={_(msg`Add more languages...`)}
+                      onPress={contentLanguagePrefsControl.open}>
+                      <Toggle.Panel adjacent="leading">
+                        <Toggle.PanelIcon icon={PlusIcon} />
+                        <Toggle.PanelText>
+                          Add more languages...
+                        </Toggle.PanelText>
+                      </Toggle.Panel>
                     </Button>
+                  </Toggle.PanelGroup>
+                </Toggle.Group>
+              </View>
+
+              <LanguageSelectDialog
+                control={contentLanguagePrefsControl}
+                titleText={<Trans>Select content languages</Trans>}
+                subtitleText={
+                  <Trans>
+                    If none are selected, all languages will be shown in your
+                    feeds.
+                  </Trans>
+                }
+                currentLanguages={langPrefs.contentLanguages}
+                onSelectLanguages={languages => {
+                  setLangPrefs.setContentLanguages(languages)
+                  setRecentLanguages(recent => [
+                    ...new Set([...recent, ...languages]),
+                  ])
+                }}
+              />
             </View>
           </SettingsList.Group>
         </SettingsList.Container>

src/state/preferences/languages.tsx

@@ -11,9 +11,7 @@ type StateContext = persisted.Schema['languagePrefs']
 type ApiContext = {
   setPrimaryLanguage: (code2: string) => void
   setPostLanguage: (commaSeparatedLangCodes: string) => void
-  setContentLanguage: (code2: string) => void
+  setContentLanguages: (code2s: string[]) => void
-  toggleContentLanguage: (code2: string) => void
-  togglePostLanguage: (code2: string) => void
   savePostLanguageToHistory: () => void
   setAppLanguage: (code2: AppLanguage) => void
 }
@@ -25,16 +23,14 @@ stateContext.displayName = 'LanguagePrefsStateContext'
 const apiContext = React.createContext<ApiContext>({
   setPrimaryLanguage: (_: string) => {},
   setPostLanguage: (_: string) => {},
-  setContentLanguage: (_: string) => {},
+  setContentLanguages: (_: string[]) => {},
-  toggleContentLanguage: (_: string) => {},
-  togglePostLanguage: (_: string) => {},
   savePostLanguageToHistory: () => {},
   setAppLanguage: (_: AppLanguage) => {},
 })
 apiContext.displayName = 'LanguagePrefsApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(persisted.get('languagePrefs'))
+  const [state, setState] = React.useState(() => persisted.get('languagePrefs'))
 
   const setStateWrapped = React.useCallback(
     (fn: SetStateCb) => {
@@ -59,43 +55,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       setPostLanguage(commaSeparatedLangCodes: string) {
         setStateWrapped(s => ({...s, postLanguage: commaSeparatedLangCodes}))
       },
-      setContentLanguage(code2: string) {
+      setContentLanguages(code2s: string[]) {
-        setStateWrapped(s => ({...s, contentLanguages: [code2]}))
+        setStateWrapped(s => ({...s, contentLanguages: code2s}))
-      },
-      toggleContentLanguage(code2: string) {
-        setStateWrapped(s => {
-          const exists = s.contentLanguages.includes(code2)
-          const next = exists
-            ? s.contentLanguages.filter(lang => lang !== code2)
-            : s.contentLanguages.concat(code2)
-          return {
-            ...s,
-            contentLanguages: next,
-          }
-        })
-      },
-      togglePostLanguage(code2: string) {
-        setStateWrapped(s => {
-          const exists = hasPostLanguage(state.postLanguage, code2)
-          let next = s.postLanguage
-
-          if (exists) {
-            next = toPostLanguages(s.postLanguage)
-              .filter(lang => lang !== code2)
-              .join(',')
-          } else {
-            // sort alphabetically for deterministic comparison in context menu
-            next = toPostLanguages(s.postLanguage)
-              .concat([code2])
-              .sort((a, b) => a.localeCompare(b))
-              .join(',')
-          }
-
-          return {
-            ...s,
-            postLanguage: next,
-          }
-        })
       },
       /**
        * Saves whatever language codes are currently selected into a history array,
@@ -120,7 +81,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
         setStateWrapped(s => ({...s, appLanguage: code2}))
       },
     }),
-    [state, setStateWrapped],
+    [setStateWrapped],
   )
 
   return (

src/state/shell/color-mode.tsx

@@ -20,8 +20,12 @@ const setContext = React.createContext<SetContext>({} as SetContext)
 setContext.displayName = 'ColorModeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))
+  const [colorMode, setColorMode] = React.useState(() =>
-  const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))
+    persisted.get('colorMode'),
+  )
+  const [darkTheme, setDarkTheme] = React.useState(() =>
+    persisted.get('darkTheme'),
+  )
 
   const stateContextValue = React.useMemo(
     () => ({

src/view/com/composer/select-language/PostLanguageSelect.tsx

@@ -11,11 +11,11 @@ import {
 import {atoms as a, useTheme} from '#/alf'
 import {Button, type ButtonProps} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {LanguageSelectDialog} from '#/components/dialogs/LanguageSelectDialog'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron'
 import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
 import * as Menu from '#/components/Menu'
 import {Text} from '#/components/Typography'
-import {PostLanguageSelectDialog} from './PostLanguageSelectDialog'
 
 export function PostLanguageSelect({
   currentLanguages: currentLanguagesProp,
@@ -36,6 +36,15 @@ export function PostLanguageSelect({
   const currentLanguages =
     currentLanguagesProp ?? toPostLanguages(langPrefs.postLanguage)
 
+  const onSelectLanguages = (languages: string[]) => {
+    let langsString = languages.join(',')
+    if (!langsString) {
+      langsString = langPrefs.primaryLanguage
+    }
+    setLangPrefs.setPostLanguage(langsString)
+    onSelectLanguage?.(langsString)
+  }
+
   if (
     dedupedHistory.length === 1 &&
     dedupedHistory[0] === langPrefs.postLanguage
@@ -43,9 +52,15 @@ export function PostLanguageSelect({
     return (
       <>
         <LanguageBtn onPress={languageDialogControl.open} />
-        <PostLanguageSelectDialog
+        <LanguageSelectDialog
+          titleText={<Trans>Choose post languages</Trans>}
+          subtitleText={
+            <Trans>Select up to 3 languages used in this post</Trans>
+          }
           control={languageDialogControl}
           currentLanguages={currentLanguages}
+          onSelectLanguages={onSelectLanguages}
+          maxLanguages={3}
         />
       </>
     )
@@ -94,10 +109,13 @@ export function PostLanguageSelect({
         </Menu.Outer>
       </Menu.Root>
 
-      <PostLanguageSelectDialog
+      <LanguageSelectDialog
+        titleText={<Trans>Choose post languages</Trans>}
+        subtitleText={<Trans>Select up to 3 languages used in this post</Trans>}
         control={languageDialogControl}
         currentLanguages={currentLanguages}
-        onSelectLanguage={onSelectLanguage}
+        onSelectLanguages={onSelectLanguages}
+        maxLanguages={3}
       />
     </>
   )

src/view/com/modals/Modal.tsx

@@ -7,7 +7,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {useModalControls, useModals} from '#/state/modals'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
-import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as UserAddRemoveListsModal from './UserAddRemoveLists'
 
 const DEFAULT_SNAPPOINTS = ['90%']
@@ -44,9 +43,6 @@ export function ModalsContainer() {
   if (activeModal?.name === 'user-add-remove-lists') {
     snapPoints = UserAddRemoveListsModal.snapPoints
     element = <UserAddRemoveListsModal.Component {...activeModal} />
-  } else if (activeModal?.name === 'content-languages-settings') {
-    snapPoints = ContentLanguagesSettingsModal.snapPoints
-    element = <ContentLanguagesSettingsModal.Component />
   } else {
     return null
   }

src/view/com/modals/Modal.web.tsx

@@ -6,7 +6,6 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {type Modal as ModalIface} from '#/state/modals'
 import {useModalControls, useModals} from '#/state/modals'
-import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
 import * as UserAddRemoveLists from './UserAddRemoveLists'
 
 export function ModalsContainer() {
@@ -47,8 +46,6 @@ function Modal({modal}: {modal: ModalIface}) {
   let element
   if (modal.name === 'user-add-remove-lists') {
     element = <UserAddRemoveLists.Component {...modal} />
-  } else if (modal.name === 'content-languages-settings') {
-    element = <ContentLanguagesSettingsModal.Component />
   } else {
     return null
   }

src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx

@@ -1,64 +0,0 @@
-import {Pressable, StyleSheet, Text, View} from 'react-native'
-import {LinearGradient} from 'expo-linear-gradient'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {colors, gradients, s} from '#/lib/styles'
-
-export const ConfirmLanguagesButton = ({
-  onPress,
-  extraText,
-}: {
-  onPress: () => void
-  extraText?: string
-}) => {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {isMobile} = useWebMediaQueries()
-  return (
-    <View
-      style={[
-        styles.btnContainer,
-        pal.borderDark,
-        isMobile && {
-          paddingBottom: 40,
-          borderTopWidth: 1,
-        },
-      ]}>
-      <Pressable
-        testID="confirmContentLanguagesBtn"
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`Confirm content language settings`)}
-        accessibilityHint="">
-        <LinearGradient
-          colors={[gradients.blueLight.start, gradients.blueLight.end]}
-          start={{x: 0, y: 0}}
-          end={{x: 1, y: 1}}
-          style={[styles.btn]}>
-          <Text style={[s.white, s.bold, s.f18]}>
-            <Trans>Done{extraText}</Trans>
-          </Text>
-        </LinearGradient>
-      </Pressable>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  btnContainer: {
-    paddingTop: 10,
-    paddingHorizontal: 10,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.gray1,
-  },
-})

src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {Trans} from '@lingui/macro'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {deviceLanguageCodes} from '#/locale/deviceLocales'
-import {languageName} from '#/locale/helpers'
-import {useModalControls} from '#/state/modals'
-import {
-  useLanguagePrefs,
-  useLanguagePrefsApi,
-} from '#/state/preferences/languages'
-import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages'
-import {Text} from '../../util/text/Text'
-import {ScrollView} from '../util'
-import {ConfirmLanguagesButton} from './ConfirmLanguagesButton'
-import {LanguageToggle} from './LanguageToggle'
-
-export const snapPoints = ['100%']
-
-export function Component({}: {}) {
-  const {closeModal} = useModalControls()
-  const langPrefs = useLanguagePrefs()
-  const setLangPrefs = useLanguagePrefsApi()
-  const pal = usePalette('default')
-  const {isMobile} = useWebMediaQueries()
-  const onPressDone = React.useCallback(() => {
-    closeModal()
-  }, [closeModal])
-
-  const languages = React.useMemo(() => {
-    const langs = LANGUAGES.filter(
-      lang =>
-        !!lang.code2.trim() &&
-        LANGUAGES_MAP_CODE2[lang.code2].code3 === lang.code3,
-    )
-    // sort so that device & selected languages are on top, then alphabetically
-    langs.sort((a, b) => {
-      const hasA =
-        langPrefs.contentLanguages.includes(a.code2) ||
-        deviceLanguageCodes.includes(a.code2)
-      const hasB =
-        langPrefs.contentLanguages.includes(b.code2) ||
-        deviceLanguageCodes.includes(b.code2)
-      if (hasA === hasB) return a.name.localeCompare(b.name)
-      if (hasA) return -1
-      return 1
-    })
-    return langs
-  }, [langPrefs])
-
-  const onPress = React.useCallback(
-    (code2: string) => {
-      setLangPrefs.toggleContentLanguage(code2)
-    },
-    [setLangPrefs],
-  )
-
-  return (
-    <View
-      testID="contentLanguagesModal"
-      style={[
-        pal.view,
-        styles.container,
-        // @ts-ignore vh is web only
-        isMobile
-          ? {
-              paddingTop: 20,
-            }
-          : {
-              maxHeight: '90vh',
-            },
-      ]}>
-      <Text style={[pal.text, styles.title]}>
-        <Trans>Content Languages</Trans>
-      </Text>
-      <Text style={[pal.text, styles.description]}>
-        <Trans>
-          Which languages would you like to see in your algorithmic feeds?
-        </Trans>
-      </Text>
-      <Text style={[pal.textLight, styles.description]}>
-        <Trans>Leave them all unselected to see any language.</Trans>
-      </Text>
-      <ScrollView style={styles.scrollContainer}>
-        {languages.map(lang => (
-          <LanguageToggle
-            key={lang.code2}
-            code2={lang.code2}
-            langType="contentLanguages"
-            name={languageName(lang, langPrefs.appLanguage)}
-            onPress={() => {
-              onPress(lang.code2)
-            }}
-          />
-        ))}
-        <View
-          style={{
-            height: isMobile ? 60 : 0,
-          }}
-        />
-      </ScrollView>
-      <ConfirmLanguagesButton onPress={onPressDone} />
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  title: {
-    textAlign: 'center',
-    fontWeight: '600',
-    fontSize: 24,
-    marginBottom: 12,
-  },
-  description: {
-    textAlign: 'center',
-    paddingHorizontal: 16,
-    marginBottom: 10,
-  },
-  scrollContainer: {
-    flex: 1,
-    paddingHorizontal: 10,
-  },
-})

src/view/com/modals/lang-settings/LanguageToggle.tsx

@@ -1,53 +0,0 @@
-import {StyleSheet} from 'react-native'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {toPostLanguages, useLanguagePrefs} from '#/state/preferences/languages'
-import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
-
-export function LanguageToggle({
-  code2,
-  name,
-  onPress,
-  langType,
-}: {
-  code2: string
-  name: string
-  onPress: () => void
-  langType: 'contentLanguages' | 'postLanguages'
-}) {
-  const pal = usePalette('default')
-  const langPrefs = useLanguagePrefs()
-
-  const values =
-    langType === 'contentLanguages'
-      ? langPrefs.contentLanguages
-      : toPostLanguages(langPrefs.postLanguage)
-  const isSelected = values.includes(code2)
-
-  // enforce a max of 3 selections for post languages
-  let isDisabled = false
-  if (langType === 'postLanguages' && values.length >= 3 && !isSelected) {
-    isDisabled = true
-  }
-
-  return (
-    <ToggleButton
-      label={name}
-      isSelected={isSelected}
-      onPress={isDisabled ? undefined : onPress}
-      style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]}
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  languageToggle: {
-    borderTopWidth: 1,
-    borderRadius: 0,
-    paddingHorizontal: 6,
-    paddingVertical: 12,
-  },
-  dimmed: {
-    opacity: 0.5,
-  },
-})

src/view/com/util/forms/ToggleButton.tsx

@@ -1,193 +0,0 @@
-import {
-  type StyleProp,
-  StyleSheet,
-  type TextStyle,
-  View,
-  type ViewStyle,
-} from 'react-native'
-
-import {choose} from '#/lib/functions'
-import {colors} from '#/lib/styles'
-import {useTheme} from '#/lib/ThemeContext'
-import {type TypographyVariant} from '#/lib/ThemeContext'
-import {Text} from '../text/Text'
-import {Button, type ButtonType} from './Button'
-
-/**
- * @deprecated use Toggle from `#/components/form/Toggle.tsx` instead
- */
-export function ToggleButton({
-  testID,
-  type = 'default-light',
-  label,
-  isSelected,
-  style,
-  labelType,
-  onPress,
-}: {
-  testID?: string
-  type?: ButtonType
-  label: string
-  isSelected: boolean
-  style?: StyleProp<ViewStyle>
-  labelType?: TypographyVariant
-  onPress?: () => void
-}) {
-  const theme = useTheme()
-  const circleStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
-    primary: {
-      borderColor: theme.palette.primary.text,
-    },
-    secondary: {
-      borderColor: theme.palette.secondary.text,
-    },
-    inverted: {
-      borderColor: theme.palette.inverted.text,
-    },
-    'primary-outline': {
-      borderColor: theme.palette.primary.border,
-    },
-    'secondary-outline': {
-      borderColor: theme.palette.secondary.border,
-    },
-    'primary-light': {
-      borderColor: theme.palette.primary.border,
-    },
-    'secondary-light': {
-      borderColor: theme.palette.secondary.border,
-    },
-    default: {
-      borderColor: theme.palette.default.border,
-    },
-    'default-light': {
-      borderColor: theme.palette.default.border,
-    },
-  })
-  const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(
-    type,
-    {
-      primary: {
-        backgroundColor: theme.palette.primary.text,
-        opacity: isSelected ? 1 : 0.33,
-      },
-      secondary: {
-        backgroundColor: theme.palette.secondary.text,
-        opacity: isSelected ? 1 : 0.33,
-      },
-      inverted: {
-        backgroundColor: theme.palette.inverted.text,
-        opacity: isSelected ? 1 : 0.33,
-      },
-      'primary-outline': {
-        backgroundColor: theme.palette.primary.background,
-        opacity: isSelected ? 1 : 0.5,
-      },
-      'secondary-outline': {
-        backgroundColor: theme.palette.secondary.background,
-        opacity: isSelected ? 1 : 0.5,
-      },
-      'primary-light': {
-        backgroundColor: theme.palette.primary.background,
-        opacity: isSelected ? 1 : 0.5,
-      },
-      'secondary-light': {
-        backgroundColor: theme.palette.secondary.background,
-        opacity: isSelected ? 1 : 0.5,
-      },
-      default: {
-        backgroundColor: isSelected
-          ? theme.palette.primary.background
-          : colors.gray3,
-      },
-      'default-light': {
-        backgroundColor: isSelected
-          ? theme.palette.primary.background
-          : colors.gray3,
-      },
-    },
-  )
-  const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
-    primary: {
-      color: theme.palette.primary.text,
-      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
-    },
-    secondary: {
-      color: theme.palette.secondary.text,
-      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
-    },
-    inverted: {
-      color: theme.palette.inverted.text,
-      fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
-    },
-    'primary-outline': {
-      color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
-    },
-    'secondary-outline': {
-      color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
-    },
-    'primary-light': {
-      color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
-    },
-    'secondary-light': {
-      color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
-    },
-    default: {
-      color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
-    },
-    'default-light': {
-      color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
-    },
-  })
-  return (
-    <Button testID={testID} type={type} onPress={onPress} style={style}>
-      <View style={styles.outer}>
-        <View style={[circleStyle, styles.circle]}>
-          <View
-            style={[
-              circleFillStyle,
-              styles.circleFill,
-              isSelected ? styles.circleFillSelected : undefined,
-            ]}
-          />
-        </View>
-        {label === '' ? null : (
-          <Text type={labelType || 'button'} style={[labelStyle, styles.label]}>
-            {label}
-          </Text>
-        )}
-      </View>
-    </Button>
-  )
-}
-
-const styles = StyleSheet.create({
-  outer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10,
-  },
-  circle: {
-    width: 42,
-    height: 26,
-    borderRadius: 15,
-    padding: 3,
-    borderWidth: 2,
-  },
-  circleFill: {
-    width: 16,
-    height: 16,
-    borderRadius: 10,
-  },
-  circleFillSelected: {
-    marginLeft: 16,
-  },
-  label: {
-    flex: 1,
-  },
-})

src/view/screens/Debug.tsx

@@ -14,7 +14,6 @@ import {EmptyState} from '#/view/com/util/EmptyState'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {Button} from '#/view/com/util/forms/Button'
-import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
 import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder'
 import {Text} from '#/view/com/util/text/Text'
 import * as Toast from '#/view/com/util/Toast'
@@ -47,10 +46,7 @@ export const DebugScreen = ({}: NativeStackScreenProps<
   )
 }
 
-function DebugInner({
+function DebugInner({}: {
-  colorScheme,
-  onToggleColorScheme,
-}: {
   colorScheme: 'light' | 'dark'
   onToggleColorScheme: () => void
 }) {
@@ -61,14 +57,6 @@ function DebugInner({
   const renderItem = (item: any) => {
     return (
       <View key={`view-${item.currentView}`}>
-        <View style={[s.pt10, s.pl10, s.pr10]}>
-          <ToggleButton
-            type="default-light"
-            onPress={onToggleColorScheme}
-            isSelected={colorScheme === 'dark'}
-            label={_(msg`Dark mode`)}
-          />
-        </View>
         {item.currentView === 3 ? (
           <NotifsView />
         ) : item.currentView === 2 ? (
@@ -134,8 +122,6 @@ function ControlsView() {
     <ScrollView style={[s.pl10, s.pr10]}>
       <Heading label="Buttons" />
       <ButtonsView />
-      <Heading label="Toggle Buttons" />
-      <ToggleButtonsView />
       <View style={s.footerSpacer} />
     </ScrollView>
   )
@@ -401,70 +387,3 @@ function ButtonsView() {
     </View>
   )
 }
-
-function ToggleButtonsView() {
-  const defaultPal = usePalette('default')
-  const buttonStyles = s.mb5
-  const [isSelected, setIsSelected] = React.useState(false)
-  const onToggle = () => setIsSelected(!isSelected)
-  return (
-    <View style={[defaultPal.view]}>
-      <ToggleButton
-        type="primary"
-        label="Primary solid"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="secondary"
-        label="Secondary solid"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="inverted"
-        label="Inverted solid"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="primary-outline"
-        label="Primary outline"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="secondary-outline"
-        label="Secondary outline"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="primary-light"
-        label="Primary light"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="secondary-light"
-        label="Secondary light"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-      <ToggleButton
-        type="default-light"
-        label="Default light"
-        style={buttonStyles}
-        isSelected={isSelected}
-        onPress={onToggle}
-      />
-    </View>
-  )
-}