Add settings page

src/view/com/modals/TabsSelector.tsx

@@ -151,7 +151,12 @@ export const Component = observer(() => {
             url="/notifications"
             gradient="purple"
           />
-          <FatMenuItem icon="gear" label="Settings" url="/" gradient="blue" />
+          <FatMenuItem
+            icon="gear"
+            label="Settings"
+            url="/settings"
+            gradient="blue"
+          />
         </View>
       </View>
       <View style={[s.p10, styles.section]}>

src/view/routes.ts

@@ -10,6 +10,7 @@ import {PostRepostedBy} from './screens/PostRepostedBy'
 import {Profile} from './screens/Profile'
 import {ProfileFollowers} from './screens/ProfileFollowers'
 import {ProfileFollows} from './screens/ProfileFollows'
+import {Settings} from './screens/Settings'
 
 export type ScreenParams = {
   params: Record<string, any>
@@ -27,6 +28,7 @@ export const routes: Route[] = [
   [Home, 'house', r('/')],
   [Search, 'magnifying-glass', r('/search')],
   [Notifications, 'bell', r('/notifications')],
+  [Settings, 'bell', r('/settings')],
   [Profile, ['far', 'user'], r('/profile/(?<name>[^/]+)')],
   [ProfileFollowers, 'users', r('/profile/(?<name>[^/]+)/followers')],
   [ProfileFollows, 'users', r('/profile/(?<name>[^/]+)/follows')],

src/view/screens/Settings.tsx

@@ -0,0 +1,68 @@
+import React, {useEffect} from 'react'
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {useStores} from '../../state'
+import {ScreenParams} from '../routes'
+import {s, colors} from '../lib/styles'
+import {DEF_AVATER} from '../lib/assets'
+import {Link} from '../com/util/Link'
+
+export const Settings = observer(function Settings({visible}: ScreenParams) {
+  const store = useStores()
+
+  useEffect(() => {
+    if (!visible) {
+      return
+    }
+    store.nav.setTitle('Settings')
+  }, [visible, store])
+
+  const onPressSignout = () => {
+    store.session.logout()
+  }
+
+  return (
+    <View style={[s.flex1, s.pl10, s.pr10]}>
+      <Text style={styles.title}>Settings</Text>
+      <View style={[s.flexRow]}>
+        <Text>Signed in as</Text>
+        <View style={s.flex1} />
+        <TouchableOpacity onPress={onPressSignout}>
+          <Text style={[s.blue3, s.bold]}>Sign out</Text>
+        </TouchableOpacity>
+      </View>
+      <Link href={`/profile/${store.me.name}`} title="Your profile">
+        <View style={styles.profile}>
+          <Image style={styles.avi} source={DEF_AVATER} />
+          <View>
+            <Text style={[s.f18]}>{store.me.displayName}</Text>
+            <Text style={[s.gray5]}>@{store.me.name}</Text>
+          </View>
+        </View>
+      </Link>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    marginTop: 20,
+    marginBottom: 14,
+  },
+  profile: {
+    flexDirection: 'row',
+    marginVertical: 6,
+    backgroundColor: colors.white,
+    borderRadius: 4,
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+  },
+  avi: {
+    width: 40,
+    height: 40,
+    borderRadius: 30,
+    marginRight: 8,
+  },
+})

todos.txt

@@ -2,14 +2,22 @@ Paul's todo list
 
 - General
   - Update to RN 0.70
+  - Go through every button and make sure it does what it's supposed to
+- Onboarding flow
+  - *
+- Private beta
+  - Users list
+  - Firehose
 - Composer
   - Update the view after creating a post
 - Profile
-  - Real badges
+  - Disable badges for now
-  - Edit profile: avatar, cover photo
+  - Disable editing avi or banner
   - More button
 - Search view
   - *
+- Notifications view
+  - *
 - Linking
   - Web linking
   - App linking
@@ -20,4 +28,5 @@ Paul's todo list
   - Follows list
 - Bugs
   - Check that sub components arent reloading too much
-  - Titles are getting screwed up (possibly swipe related)
+  - Titles are getting screwed up (possibly swipe related)
+  - Likes, RTs?