My lists are done

src/components/Menu.tsx

@@ -0,0 +1,5 @@
+import MenuContainer from './Menu/Container'
+import MenuHeader from './Menu/Header'
+import MenuItem from './Menu/Item'
+
+export { MenuContainer, MenuHeader, MenuItem }

src/components/Menu/Container.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { View } from 'react-native'
+
+const MenuContainer: React.FC = ({ ...props }) => {
+  return <View>{props.children}</View>
+}
+
+export default MenuContainer

src/components/Menu/Header.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+export interface Props {
+  heading: string
+}
+
+const MenuHeader: React.FC<Props> = ({ heading }) => {
+  return <Text style={styles.header}>{heading}</Text>
+}
+
+const styles = StyleSheet.create({
+  header: {
+    marginTop: 12,
+    paddingLeft: 12,
+    paddingRight: 12
+  }
+})
+
+export default MenuHeader

src/components/Menu/Item.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+import { Feather } from '@expo/vector-icons'
+
+export interface Props {
+  icon?: string
+  title: string
+  navigateTo?: string
+  navigateToParams?: {}
+}
+
+const Core: React.FC<Props> = ({ icon, title, navigateTo }) => {
+  return (
+    <View style={styles.core}>
+      {icon && <Feather name={icon} size={24} style={styles.iconLeading} />}
+      <Text>{title}</Text>
+      {navigateTo && (
+        <Feather
+          name='chevron-right'
+          size={24}
+          color='lightgray'
+          style={styles.iconNavigation}
+        />
+      )}
+    </View>
+  )
+}
+
+const MenuItem: React.FC<Props> = ({ ...props }) => {
+  const navigation = useNavigation()
+
+  return props.navigateTo ? (
+    <Pressable
+      style={styles.base}
+      onPress={() => {
+        navigation.navigate(props.navigateTo!, props.navigateToParams)
+      }}
+    >
+      <Core {...props} />
+    </Pressable>
+  ) : (
+    <View style={styles.base}>
+      <Core {...props} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  base: {
+    height: 50,
+    borderBottomColor: 'lightgray',
+    borderBottomWidth: 1
+  },
+  core: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 12,
+    paddingRight: 12
+  },
+  iconLeading: {
+    marginRight: 8
+  },
+  iconNavigation: {
+    marginLeft: 'auto'
+  }
+})
+
+export default MenuItem

src/components/Status/Avatar.tsx

@@ -14,7 +14,7 @@ const Avatar: React.FC<Props> = ({ uri, id }) => {
     <Pressable
       style={styles.avatar}
       onPress={() => {
-        navigation.navigate('Account', {
+        navigation.navigate('Screen-Shared-Account', {
           id: id
         })
       }}

src/components/Status/HeaderConversation.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import relativeTime from 'src/utils/relativeTime'
+import Emojis from './Emojis'
+
+export interface Props {
+  account: Mastodon.Account
+  created_at?: Mastodon.Status['created_at']
+}
+
+const HeaderConversation: React.FC<Props> = ({ account, created_at }) => {
+  return (
+    <View>
+      <View style={styles.nameAndDate}>
+        <View style={styles.name}>
+          {account.emojis ? (
+            <Emojis
+              content={account.display_name || account.username}
+              emojis={account.emojis}
+              dimension={14}
+            />
+          ) : (
+            <Text numberOfLines={1}>
+              {account.display_name || account.username}
+            </Text>
+          )}
+        </View>
+        {created_at && (
+          <View>
+            <Text style={styles.created_at}>{relativeTime(created_at)}</Text>
+          </View>
+        )}
+      </View>
+      <Text style={styles.account} numberOfLines={1}>
+        @{account.acct}
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  nameAndDate: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  name: {
+    flexDirection: 'row',
+    marginRight: 8,
+    fontWeight: '900'
+  },
+  created_at: {
+    fontSize: 12,
+    lineHeight: 12,
+    marginTop: 8,
+    marginBottom: 8,
+    marginRight: 8
+  },
+  account: {
+    lineHeight: 14,
+    flexShrink: 1
+  }
+})
+
+export default HeaderConversation

src/components/StatusInNotifications.tsx

@@ -45,7 +45,9 @@ const TootNotification: React.FC<Props> = ({ notification, queryKey }) => {
             />
             <Pressable
               onPress={() =>
-                navigation.navigate('Toot', { toot: notification.id })
+                navigation.navigate('Screen-Shared-Toot', {
+                  toot: notification.id
+                })
               }
             >
               {notification.status ? (

src/components/TimelineConversation.tsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import { useNavigation } from '@react-navigation/native'
+
+import Avatar from './Status/Avatar'
+import HeaderConversation from './Status/HeaderConversation'
+import Content from './Status/Content'
+
+export interface Props {
+  item: Mastodon.Conversation
+}
+// Unread and mark as unread
+const TimelineConversation: React.FC<Props> = ({ item }) => {
+  const navigation = useNavigation()
+
+  const statusView = useMemo(() => {
+    return (
+      <View style={styles.statusView}>
+        <View style={styles.status}>
+          <Avatar uri={item.accounts[0].avatar} id={item.accounts[0].id} />
+          <View style={styles.details}>
+            <HeaderConversation
+              account={item.accounts[0]}
+              created_at={item.last_status?.created_at}
+            />
+            {/* Can pass toot info to next page to speed up performance */}
+            <Pressable
+              onPress={() =>
+                item.last_status &&
+                navigation.navigate('Screen-Shared-Toot', {
+                  toot: item.last_status.id
+                })
+              }
+            >
+              {item.last_status ? (
+                <Content
+                  content={item.last_status.content}
+                  emojis={item.last_status.emojis}
+                  mentions={item.last_status.mentions}
+                  spoiler_text={item.last_status.spoiler_text}
+                  // tags={actualStatus.tags}
+                  // style={{ flex: 1 }}
+                />
+              ) : (
+                <></>
+              )}
+            </Pressable>
+          </View>
+        </View>
+      </View>
+    )
+  }, [item])
+
+  return statusView
+}
+
+const styles = StyleSheet.create({
+  statusView: {
+    flex: 1,
+    flexDirection: 'column',
+    padding: 12
+  },
+  status: {
+    flex: 1,
+    flexDirection: 'row'
+  },
+  details: {
+    flex: 1,
+    flexGrow: 1
+  }
+})
+
+export default TimelineConversation

src/components/TimelineDefault.tsx

@@ -12,23 +12,23 @@ import Card from './Status/Card'
 import ActionsStatus from './Status/ActionsStatus'
 
 export interface Props {
-  status: Mastodon.Status
+  item: Mastodon.Status
   queryKey: App.QueryKey
 }
 
-const StatusInTimeline: React.FC<Props> = ({ status, queryKey }) => {
+const TimelineDefault: React.FC<Props> = ({ item, queryKey }) => {
   const navigation = useNavigation()
 
-  let actualStatus = status.reblog ? status.reblog : status
+  let actualStatus = item.reblog ? item.reblog : item
 
   const statusView = useMemo(() => {
     return (
       <View style={styles.statusView}>
-        {status.reblog && (
+        {item.reblog && (
           <Actioned
             action='reblog'
-            name={status.account.display_name || status.account.username}
-            emojis={status.account.emojis}
+            name={item.account.display_name || item.account.username}
+            emojis={item.account.emojis}
           />
         )}
         <View style={styles.status}>
@@ -47,13 +47,15 @@ const StatusInTimeline: React.FC<Props> = ({ status, queryKey }) => {
               }
               emojis={actualStatus.account.emojis}
               account={actualStatus.account.acct}
-              created_at={status.created_at}
-              application={status.application}
+              created_at={item.created_at}
+              application={item.application}
             />
             {/* Can pass toot info to next page to speed up performance */}
             <Pressable
               onPress={() =>
-                navigation.navigate('Toot', { toot: actualStatus.id })
+                navigation.navigate('Screen-Shared-Toot', {
+                  toot: actualStatus.id
+                })
               }
             >
               {actualStatus.content ? (
@@ -83,7 +85,7 @@ const StatusInTimeline: React.FC<Props> = ({ status, queryKey }) => {
         </View>
       </View>
     )
-  }, [status])
+  }, [item])
 
   return statusView
 }
@@ -104,4 +106,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default StatusInTimeline
+export default TimelineDefault