1 files changed, 143 insertions, 0 deletions
diff --git a/src/view/com/modals/ContentLanguagesSettings.tsx b/src/view/com/modals/ContentLanguagesSettings.tsx
new file mode 100644
index 000000000..0c750fe0e
--- /dev/null
+++ b/src/view/com/modals/ContentLanguagesSettings.tsx
@@ -0,0 +1,143 @@
+import React from 'react'
+import {StyleSheet, Pressable, View} from 'react-native'
+import LinearGradient from 'react-native-linear-gradient'
+import {observer} from 'mobx-react-lite'
+import {ScrollView} from './util'
+import {useStores} from 'state/index'
+import {ToggleButton} from '../util/forms/ToggleButton'
+import {s, colors, gradients} from 'lib/styles'
+import {Text} from '../util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {isDesktopWeb} from 'platform/detection'
+import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../locale/languages'
+
+export const snapPoints = ['100%']
+
+export function Component({}: {}) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const onPressDone = React.useCallback(() => {
+    store.shell.closeModal()
+  }, [store])
+
+  const languages = React.useMemo(() => {
+    const langs = LANGUAGES.filter(
+      lang =>
+        !!lang.code2.trim() &&
+        LANGUAGES_MAP_CODE2[lang.code2].code3 === lang.code3,
+    )
+    // sort so that selected languages are on top, then alphabetically
+    langs.sort((a, b) => {
+      const hasA = store.preferences.hasContentLanguage(a.code2)
+      const hasB = store.preferences.hasContentLanguage(b.code2)
+      if (hasA === hasB) return a.name.localeCompare(b.name)
+      if (hasA) return -1
+      return 1
+    })
+    return langs
+  }, [store])
+
+  return (
+    <View testID="contentLanguagesModal" style={[pal.view, styles.container]}>
+      <Text style={[pal.text, styles.title]}>Content Languages</Text>
+      <Text style={[pal.text, styles.description]}>
+        Which languages would you like to see in the What's Hot feed? (Leave
+        them all unchecked to see any language.)
+      </Text>
+      <ScrollView style={styles.scrollContainer}>
+        {languages.map(lang => (
+          <LanguageToggle
+            key={lang.code2}
+            code2={lang.code2}
+            name={lang.name}
+          />
+        ))}
+        <View style={styles.bottomSpacer} />
+      </ScrollView>
+      <View style={[styles.btnContainer, pal.borderDark]}>
+        <Pressable
+          testID="sendReportBtn"
+          onPress={onPressDone}
+          accessibilityRole="button"
+          accessibilityLabel="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]}>Done</Text>
+          </LinearGradient>
+        </Pressable>
+      </View>
+    </View>
+  )
+}
+
+const LanguageToggle = observer(
+  ({code2, name}: {code2: string; name: string}) => {
+    const store = useStores()
+    const pal = usePalette('default')
+
+    const onPress = React.useCallback(() => {
+      store.preferences.toggleContentLanguage(code2)
+    }, [store, code2])
+
+    return (
+      <ToggleButton
+        label={name}
+        isSelected={store.preferences.contentLanguages.includes(code2)}
+        onPress={onPress}
+        style={[pal.border, styles.languageToggle]}
+      />
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 20,
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+    paddingHorizontal: 16,
+    marginBottom: 10,
+  },
+  scrollContainer: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  bottomSpacer: {
+    height: isDesktopWeb ? 0 : 60,
+  },
+  btnContainer: {
+    paddingTop: 10,
+    paddingHorizontal: 10,
+    paddingBottom: isDesktopWeb ? 0 : 40,
+    borderTopWidth: isDesktopWeb ? 0 : 1,
+  },
+
+  languageToggle: {
+    borderTopWidth: 1,
+    borderRadius: 0,
+    paddingHorizontal: 0,
+    paddingVertical: 12,
+  },
+
+  btn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    borderRadius: 32,
+    padding: 14,
+    backgroundColor: colors.gray1,
+  },
+})