Update settings to include everything that used to be in the drawer

src/alf/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import {Dimensions} from 'react-native'
+
 import * as themes from '#/alf/themes'
 
-export * from '#/alf/types'
-export * as tokens from '#/alf/tokens'
 export {atoms} from '#/alf/atoms'
-export * from '#/alf/util/platform'
+export * as tokens from '#/alf/tokens'
+export * from '#/alf/types'
 export * from '#/alf/util/flatten'
+export * from '#/alf/util/platform'
 
 type BreakpointName = keyof typeof breakpoints
 
@@ -89,6 +90,10 @@ export function ThemeProvider({
   )
 }
 
+export function useThemeName() {
+  return React.useContext(Context).themeName
+}
+
 export function useTheme() {
   return React.useContext(Context).theme
 }

src/view/screens/Settings/index.tsx

@@ -42,12 +42,12 @@ import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
 import {useAnalytics} from 'lib/analytics/analytics'
 import * as AppInfo from 'lib/app-info'
-import {STATUS_PAGE_URL} from 'lib/constants'
+import {FEEDBACK_FORM_URL, HELP_DESK_URL, STATUS_PAGE_URL} from 'lib/constants'
 import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher'
 import {useCustomPalette} from 'lib/hooks/useCustomPalette'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {HandIcon, HashtagIcon} from 'lib/icons'
+import {HandIcon, HashtagIcon, ListIcon} from 'lib/icons'
 import {makeProfileLink} from 'lib/routes/links'
 import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
 import {NavigationProp} from 'lib/routes/types'
@@ -61,6 +61,7 @@ import {Text} from 'view/com/util/text/Text'
 import * as Toast from 'view/com/util/Toast'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {ScrollView} from 'view/com/util/Views'
+import {atoms as a, useThemeName} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
 import {navigate, resetToTab} from '#/Navigation'
@@ -270,6 +271,10 @@ export function SettingsScreen({}: Props) {
     navigation.navigate('SavedFeeds')
   }, [navigation])
 
+  const onPressLists = React.useCallback(() => {
+    navigation.navigate('Lists')
+  }, [navigation])
+
   const onPressAccessibilitySettings = React.useCallback(() => {
     navigation.navigate('AccessibilitySettings')
   }, [navigation])
@@ -315,49 +320,112 @@ export function SettingsScreen({}: Props) {
         scrollIndicatorInsets={{right: 1}}
         // @ts-ignore web only -prf
         dataSet={{'stable-gutters': 1}}>
+        <FeedbackAndHelp />
+        <TouchableOpacity
+          testID="moderationBtn"
+          style={[
+            styles.linkCard,
+            pal.view,
+            isSwitchingAccounts && styles.dimmed,
+          ]}
+          onPress={
+            isSwitchingAccounts
+              ? undefined
+              : () => navigation.navigate('Moderation')
+          }
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`Moderation settings`)}
+          accessibilityHint={_(msg`Opens moderation settings`)}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <HandIcon style={pal.text} size={18} strokeWidth={6} />
+          </View>
+          <Text type="lg" style={pal.text}>
+            <Trans>Moderation</Trans>
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          testID="savedFeedsBtn"
+          style={[
+            styles.linkCard,
+            pal.view,
+            isSwitchingAccounts && styles.dimmed,
+          ]}
+          onPress={onPressSavedFeeds}
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`My saved feeds`)}
+          accessibilityHint={_(msg`Opens screen with all saved feeds`)}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <HashtagIcon style={pal.text} size={18} strokeWidth={3} />
+          </View>
+          <Text type="lg" style={pal.text}>
+            <Trans>My Saved Feeds</Trans>
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          testID="listsBtn"
+          style={[
+            styles.linkCard,
+            pal.view,
+            isSwitchingAccounts && styles.dimmed,
+          ]}
+          onPress={onPressLists}
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`My lists`)}
+          accessibilityHint={_(msg`Opens screen with all my lists`)}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <ListIcon strokeWidth={3} style={pal.text} size={18} />
+          </View>
+          <Text type="lg" style={pal.text}>
+            <Trans>My Lists</Trans>
+          </Text>
+        </TouchableOpacity>
+
         <View style={styles.spacer20} />
+
         {currentAccount ? (
           <>
             <Text type="xl-bold" style={[pal.text, styles.heading]}>
               <Trans>Account</Trans>
             </Text>
-            <View style={[styles.infoLine]}>
-              <Text type="lg-medium" style={pal.text}>
-                <Trans>Email:</Trans>{' '}
-              </Text>
-              {currentAccount.emailConfirmed && (
-                <>
-                  <FontAwesomeIcon
-                    icon="check"
-                    size={10}
-                    style={{color: colors.green3, marginRight: 2}}
-                  />
-                </>
-              )}
-              <Text
-                type="lg"
-                numberOfLines={1}
-                style={[
-                  pal.text,
-                  {overflow: 'hidden', marginRight: 4, flex: 1},
-                ]}>
-                {currentAccount.email || '(no email)'}
-              </Text>
-              <Link onPress={() => openModal({name: 'change-email'})}>
-                <Text type="lg" style={pal.link}>
-                  <Trans context="action">Change</Trans>
+            <View style={[pal.view, {paddingBottom: 8, paddingTop: 16}]}>
+              <View style={[styles.infoLine]}>
+                <Text type="lg-medium" style={pal.text}>
+                  <Trans>Email:</Trans>{' '}
                 </Text>
-              </Link>
-            </View>
-            <View style={[styles.infoLine]}>
-              <Text type="lg-medium" style={pal.text}>
-                <Trans>Birthday:</Trans>{' '}
-              </Text>
-              <Link onPress={onPressBirthday}>
-                <Text type="lg" style={pal.link}>
-                  <Trans>Show</Trans>
+                {currentAccount.emailConfirmed && (
+                  <>
+                    <FontAwesomeIcon
+                      icon="check"
+                      size={10}
+                      style={{color: colors.green3, marginRight: 2}}
+                    />
+                  </>
+                )}
+                <Text
+                  type="lg"
+                  numberOfLines={1}
+                  style={[
+                    pal.text,
+                    {overflow: 'hidden', marginRight: 4, flex: 1},
+                  ]}>
+                  {currentAccount.email || '(no email)'}
                 </Text>
-              </Link>
+                <Link onPress={() => openModal({name: 'change-email'})}>
+                  <Text type="lg" style={pal.link}>
+                    <Trans context="action">Change</Trans>
+                  </Text>
+                </Link>
+              </View>
+              <View style={[styles.infoLine]}>
+                <Text type="lg-medium" style={pal.text}>
+                  <Trans>Birthday:</Trans>{' '}
+                </Text>
+                <Link onPress={onPressBirthday}>
+                  <Text type="lg" style={pal.link}>
+                    <Trans>Show</Trans>
+                  </Text>
+                </Link>
+              </View>
             </View>
             <View style={styles.spacer20} />
 
@@ -535,24 +603,6 @@ export function SettingsScreen({}: Props) {
             <Trans>Thread Preferences</Trans>
           </Text>
         </TouchableOpacity>
-        <TouchableOpacity
-          testID="savedFeedsBtn"
-          style={[
-            styles.linkCard,
-            pal.view,
-            isSwitchingAccounts && styles.dimmed,
-          ]}
-          onPress={onPressSavedFeeds}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`My saved feeds`)}
-          accessibilityHint={_(msg`Opens screen with all saved feeds`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <HashtagIcon style={pal.text} size={18} strokeWidth={3} />
-          </View>
-          <Text type="lg" style={pal.text}>
-            <Trans>My Saved Feeds</Trans>
-          </Text>
-        </TouchableOpacity>
         <TouchableOpacity
           testID="languageSettingsBtn"
           style={[
@@ -574,28 +624,6 @@ export function SettingsScreen({}: Props) {
             <Trans>Languages</Trans>
           </Text>
         </TouchableOpacity>
-        <TouchableOpacity
-          testID="moderationBtn"
-          style={[
-            styles.linkCard,
-            pal.view,
-            isSwitchingAccounts && styles.dimmed,
-          ]}
-          onPress={
-            isSwitchingAccounts
-              ? undefined
-              : () => navigation.navigate('Moderation')
-          }
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Moderation settings`)}
-          accessibilityHint={_(msg`Opens moderation settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <HandIcon style={pal.text} size={18} strokeWidth={6} />
-          </View>
-          <Text type="lg" style={pal.text}>
-            <Trans>Moderation</Trans>
-          </Text>
-        </TouchableOpacity>
 
         <View style={styles.spacer20} />
 
@@ -936,6 +964,88 @@ function EmailConfirmationNotice() {
   )
 }
 
+function FeedbackAndHelp() {
+  const themeName = useThemeName()
+  const pal = usePalette('default')
+  const {_} = useLingui()
+  const {track} = useAnalytics()
+  const {currentAccount} = useSession()
+
+  const onPressFeedback = React.useCallback(() => {
+    track('Menu:FeedbackClicked')
+    Linking.openURL(
+      FEEDBACK_FORM_URL({
+        email: currentAccount?.email,
+        handle: currentAccount?.handle,
+      }),
+    )
+  }, [track, currentAccount])
+
+  const onPressHelp = React.useCallback(() => {
+    track('Menu:HelpClicked')
+    Linking.openURL(HELP_DESK_URL)
+  }, [track])
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.flex_wrap,
+        a.gap_md,
+        a.px_lg,
+        a.py_sm,
+        pal.view,
+        {marginBottom: 1},
+      ]}>
+      <TouchableOpacity
+        accessibilityRole="link"
+        accessibilityLabel={_(msg`Send feedback`)}
+        accessibilityHint=""
+        onPress={onPressFeedback}
+        style={[
+          a.flex_1,
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
+          a.p_md,
+          a.rounded_md,
+          themeName === 'light'
+            ? {backgroundColor: '#DDEFFF'}
+            : {backgroundColor: colors.blue6},
+        ]}>
+        <FontAwesomeIcon
+          style={pal.link as FontAwesomeIconStyle}
+          size={18}
+          icon={['far', 'message']}
+        />
+        <Text type="lg-medium" style={[pal.link, s.pl10]}>
+          <Trans>Feedback</Trans>
+        </Text>
+      </TouchableOpacity>
+      <TouchableOpacity
+        accessibilityRole="link"
+        accessibilityLabel={_(msg`Send feedback`)}
+        accessibilityHint=""
+        onPress={onPressHelp}
+        style={[
+          a.flex_1,
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
+          a.p_md,
+          a.rounded_md,
+          themeName === 'light'
+            ? {backgroundColor: '#DDEFFF'}
+            : {backgroundColor: colors.blue6},
+        ]}>
+        <Text type="lg-medium" style={[pal.link, s.pl10]}>
+          <Trans>Help</Trans>
+        </Text>
+      </TouchableOpacity>
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5,