Add /support and /support/privacy

src/view/com/util/Html.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text} from './text/Text'
+import {TextLink} from './Link'
+
+/**
+ * These utilities are used to define long documents in an html-like
+ * DSL. See for instance /locale/en/privacy-policy.tsx
+ */
+
+export function H1({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="title-xl" style={[pal.text, styles.h1]}>
+      {children}
+    </Text>
+  )
+}
+
+export function H2({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="title-lg" style={[pal.text, styles.h2]}>
+      {children}
+    </Text>
+  )
+}
+
+export function H3({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="title" style={[pal.text, styles.h3]}>
+      {children}
+    </Text>
+  )
+}
+
+export function H4({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="title-sm" style={[pal.text, styles.h4]}>
+      {children}
+    </Text>
+  )
+}
+
+export function P({children}: React.PropsWithChildren<{}>) {
+  const pal = usePalette('default')
+  return (
+    <Text type="md" style={[pal.text, styles.p]}>
+      {children}
+    </Text>
+  )
+}
+
+export function UL({children}: React.PropsWithChildren<{}>) {
+  return <View style={styles.ul}>{children}</View>
+}
+
+export function OL({children}: React.PropsWithChildren<{}>) {
+  return <View style={styles.ol}>{children}</View>
+}
+
+export function LI({
+  children,
+  value,
+}: React.PropsWithChildren<{value?: string}>) {
+  const pal = usePalette('default')
+  return (
+    <View style={styles.li}>
+      <Text style={[pal.text, styles.liBullet]}>{value || <>&bull;</>}</Text>
+      <Text type="md" style={[pal.text, styles.liText]}>
+        {children}
+      </Text>
+    </View>
+  )
+}
+
+export function A({children, href}: React.PropsWithChildren<{href: string}>) {
+  const pal = usePalette('default')
+  return (
+    <TextLink
+      type="md"
+      style={[pal.link, styles.a]}
+      text={children}
+      href={href}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  h1: {
+    marginTop: 20,
+    marginBottom: 10,
+    letterSpacing: 0.8,
+  },
+  h2: {
+    marginTop: 20,
+    marginBottom: 10,
+    letterSpacing: 0.8,
+  },
+  h3: {
+    marginBottom: 10,
+  },
+  h4: {
+    marginBottom: 10,
+    fontWeight: 'bold',
+  },
+  p: {
+    marginBottom: 10,
+  },
+  ul: {
+    marginBottom: 10,
+    paddingLeft: 18,
+  },
+  ol: {
+    marginBottom: 10,
+    paddingLeft: 18,
+  },
+  li: {
+    flexDirection: 'row',
+    paddingRight: 10,
+    marginBottom: 10,
+  },
+  liBullet: {
+    paddingRight: 10,
+  },
+  liText: {},
+  a: {
+    marginBottom: 10,
+  },
+})

src/view/com/util/Link.tsx

@@ -89,7 +89,7 @@ export const TextLink = observer(function TextLink({
   type?: TypographyVariant
   style?: StyleProp<TextStyle>
   href: string
-  text: string | JSX.Element
+  text: string | JSX.Element | React.ReactNode
   numberOfLines?: number
   lineHeight?: number
 }) {
@@ -193,7 +193,7 @@ function onPressInner(
 
   if (shouldHandle) {
     href = convertBskyAppUrlIfNeeded(href)
-    if (href.startsWith('http')) {
+    if (href.startsWith('http') || href.startsWith('mailto')) {
       Linking.openURL(href)
     } else {
       store.shell.closeModal() // close any active modals

src/view/com/util/Views.web.tsx

@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
   },
   containerScroll: {
     width: '100%',
-    minHeight: '100vh',
+    maxHeight: '100vh',
     maxWidth: 600,
     marginLeft: 'auto',
     marginRight: 'auto',

src/view/screens/PrivacyPolicy.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {useStores} from 'state/index'
+import {ScrollView} from 'view/com/util/Views'
+import {Text} from 'view/com/util/text/Text'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+import PrivacyPolicyHtml from '../../locale/en/privacy-policy'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'PrivacyPolicy'>
+export const PrivacyPolicyScreen = (_props: Props) => {
+  const pal = usePalette('default')
+  const store = useStores()
+
+  useFocusEffect(
+    React.useCallback(() => {
+      store.shell.setMinimalShellMode(false)
+    }, [store]),
+  )
+
+  return (
+    <View>
+      <ViewHeader title="Privacy Policy" />
+      <ScrollView style={[s.hContentRegion, pal.view]}>
+        <View style={[s.p20]}>
+          <Text type="title-xl" style={[pal.text, s.pb20]}>
+            Privacy Policy
+          </Text>
+          <PrivacyPolicyHtml />
+        </View>
+        <View style={s.footerSpacer} />
+      </ScrollView>
+    </View>
+  )
+}

src/view/screens/Support.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import {View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {useStores} from 'state/index'
+import {Text} from 'view/com/util/text/Text'
+import {TextLink} from 'view/com/util/Link'
+import {CenteredView} from 'view/com/util/Views'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'>
+export const SupportScreen = (_props: Props) => {
+  const store = useStores()
+  const pal = usePalette('default')
+
+  useFocusEffect(
+    React.useCallback(() => {
+      store.shell.setMinimalShellMode(false)
+    }, [store]),
+  )
+
+  return (
+    <View>
+      <ViewHeader title="Support" />
+      <CenteredView>
+        <Text type="title-xl" style={[pal.text, s.p20, s.pb5]}>
+          Support
+        </Text>
+        <Text style={[pal.text, s.p20]}>
+          If you need help, email us at{' '}
+          <TextLink
+            href="mailto:support@bsky.app"
+            text="support@bsky.app"
+            style={pal.link}
+          />{' '}
+          with a description of your issue and information about how we can help
+          you.
+        </Text>
+      </CenteredView>
+    </View>
+  )
+}

src/view/shell/desktop/RightNav.tsx

@@ -6,6 +6,7 @@ import {DesktopSearch} from './Search'
 import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
 import {FEEDBACK_FORM_URL} from 'lib/constants'
+import {s} from 'lib/styles'
 
 export const DesktopRightNav = observer(function DesktopRightNav() {
   const pal = usePalette('default')
@@ -17,12 +18,23 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
           Welcome to Bluesky! This is a beta application that's still in
           development.
         </Text>
-        <TextLink
-          type="md"
-          style={pal.link}
-          href={FEEDBACK_FORM_URL}
-          text="Send feedback"
-        />
+        <View style={[s.flexRow]}>
+          <TextLink
+            type="md"
+            style={pal.link}
+            href={FEEDBACK_FORM_URL}
+            text="Send feedback"
+          />
+          <Text type="md" style={pal.textLight}>
+            &nbsp;&middot;&nbsp;
+          </Text>
+          <TextLink
+            type="md"
+            style={pal.link}
+            href="/support/privacy"
+            text="Privacy Policy"
+          />
+        </View>
       </View>
     </View>
   )