6 files changed, 134 insertions, 16 deletions
diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
index 118ba9ed8..dbf665837 100644
--- a/src/view/screens/Home.tsx
+++ b/src/view/screens/Home.tsx
@@ -35,9 +35,9 @@ export const Home = observer(function Home({
     if (store.me.mainFeed.isLoading) {
       return
     }
-    console.log('Polling home feed')
+    store.log.debug('Polling home feed')
     store.me.mainFeed.checkForLatest().catch(e => {
-      console.error('Failed to poll feed', e)
+      store.log.error('Failed to poll feed', e.toString())
     })
   }
 
@@ -49,12 +49,12 @@ export const Home = observer(function Home({
     }
 
     if (hasSetup) {
-      console.log('Updating home feed')
+      store.log.debug('Updating home feed')
       store.me.mainFeed.update()
       doPoll()
     } else {
       store.nav.setTitle(navIdx, 'Home')
-      console.log('Fetching home feed')
+      store.log.debug('Fetching home feed')
       store.me.mainFeed.setup().then(() => {
         if (aborted) return
         setHasSetup(true)
diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx
new file mode 100644
index 000000000..56337435f
--- /dev/null
+++ b/src/view/screens/Log.tsx
@@ -0,0 +1,100 @@
+import React, {useEffect} from 'react'
+import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {useStores} from '../../state'
+import {ScreenParams} from '../routes'
+import {s} from '../lib/styles'
+import {ViewHeader} from '../com/util/ViewHeader'
+import {Text} from '../com/util/text/Text'
+import {usePalette} from '../lib/hooks/usePalette'
+import {ago} from '../../lib/strings'
+
+export const Log = observer(function Log({navIdx, visible}: ScreenParams) {
+  const pal = usePalette('default')
+  const store = useStores()
+  const [expanded, setExpanded] = React.useState<string[]>([])
+
+  useEffect(() => {
+    if (!visible) {
+      return
+    }
+    store.shell.setMinimalShellMode(false)
+    store.nav.setTitle(navIdx, 'Log')
+  }, [visible, store])
+
+  const toggler = (id: string) => () => {
+    if (expanded.includes(id)) {
+      setExpanded(expanded.filter(v => v !== id))
+    } else {
+      setExpanded([...expanded, id])
+    }
+  }
+
+  return (
+    <View style={[s.flex1]}>
+      <ViewHeader title="Log" />
+      <ScrollView style={s.flex1}>
+        {store.log.entries
+          .slice(0)
+          .reverse()
+          .map(entry => {
+            return (
+              <View key={`entry-${entry.id}`}>
+                <TouchableOpacity
+                  style={[styles.entry, pal.border, pal.view]}
+                  onPress={toggler(entry.id)}>
+                  {entry.type === 'debug' ? (
+                    <FontAwesomeIcon icon="info" />
+                  ) : (
+                    <FontAwesomeIcon icon="exclamation" style={s.red3} />
+                  )}
+                  <Text type="body2" style={[styles.summary, pal.text]}>
+                    {entry.summary}
+                  </Text>
+                  {!!entry.details ? (
+                    <FontAwesomeIcon
+                      icon={
+                        expanded.includes(entry.id) ? 'angle-up' : 'angle-down'
+                      }
+                      style={s.mr5}
+                    />
+                  ) : undefined}
+                  <Text type="body2" style={[styles.ts, pal.textLight]}>
+                    {entry.ts ? ago(entry.ts) : ''}
+                  </Text>
+                </TouchableOpacity>
+                {expanded.includes(entry.id) ? (
+                  <View style={[pal.btn, styles.details]}>
+                    <Text type="body1" style={pal.text}>
+                      {entry.details}
+                    </Text>
+                  </View>
+                ) : undefined}
+              </View>
+            )
+          })}
+        <View style={{height: 100}} />
+      </ScrollView>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  entry: {
+    flexDirection: 'row',
+    borderTopWidth: 1,
+    paddingVertical: 10,
+    paddingHorizontal: 6,
+  },
+  summary: {
+    flex: 1,
+  },
+  ts: {
+    width: 40,
+  },
+  details: {
+    paddingVertical: 10,
+    paddingHorizontal: 6,
+  },
+})
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 2257dd221..5a4d9c223 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -14,12 +14,12 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => {
     if (!visible) {
       return
     }
-    console.log('Updating notifications feed')
+    store.log.debug('Updating notifications feed')
     store.me.refreshMemberships() // needed for the invite notifications
     store.me.notifications
       .update()
       .catch(e => {
-        console.error('Error while updating notifications feed', e)
+        store.log.error('Error while updating notifications feed', e.toString())
       })
       .then(() => {
         store.me.notifications.updateReadState()
diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx
index 4caf144bf..86fde1374 100644
--- a/src/view/screens/PostThread.tsx
+++ b/src/view/screens/PostThread.tsx
@@ -31,7 +31,6 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
     setTitle()
     store.shell.setMinimalShellMode(false)
     if (!view.hasLoaded && !view.isLoading) {
-      console.log('Fetching post thread', uri)
       view.setup().then(
         () => {
           if (!aborted) {
@@ -39,14 +38,14 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
           }
         },
         err => {
-          console.error('Failed to fetch thread', err)
+          store.log.error('Failed to fetch thread', err.toString())
         },
       )
     }
     return () => {
       aborted = true
     }
-  }, [visible, store.nav, name])
+  }, [visible, store.nav, store.log, name])
 
   return (
     <View style={{flex: 1}}>
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index 8dd2dbe33..af011f837 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -40,10 +40,8 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
       return
     }
     if (hasSetup) {
-      console.log('Updating profile for', params.name)
       uiState.update()
     } else {
-      console.log('Fetching profile for', params.name)
       store.nav.setTitle(navIdx, params.name)
       uiState.setup().then(() => {
         if (aborted) return
@@ -64,12 +62,19 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
   const onRefresh = () => {
     uiState
       .refresh()
-      .catch((err: any) => console.error('Failed to refresh', err))
+      .catch((err: any) =>
+        store.log.error('Failed to refresh user profile', err.toString()),
+      )
   }
   const onEndReached = () => {
     uiState
       .loadMore()
-      .catch((err: any) => console.error('Failed to load more', err))
+      .catch((err: any) =>
+        store.log.error(
+          'Failed to load more entries in user profile',
+          err.toString(),
+        ),
+      )
   }
   const onPressTryAgain = () => {
     uiState.setup()
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index d7565e9c8..39597152d 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -3,7 +3,7 @@ import {StyleSheet, 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 {s} from '../lib/styles'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Link} from '../com/util/Link'
 import {Text} from '../com/util/text/Text'
@@ -32,7 +32,7 @@ export const Settings = observer(function Settings({
   return (
     <View style={[s.flex1]}>
       <ViewHeader title="Settings" />
-      <View style={[s.mt10, s.pl10, s.pr10]}>
+      <View style={[s.mt10, s.pl10, s.pr10, s.flex1]}>
         <View style={[s.flexRow]}>
           <Text style={pal.text}>Signed in as</Text>
           <View style={s.flex1} />
@@ -61,9 +61,23 @@ export const Settings = observer(function Settings({
             </View>
           </View>
         </Link>
-        <Link href="/debug" title="Debug tools">
+        <View style={s.flex1} />
+        <Text type="overline1" style={[s.mb5]}>
+          Advanced
+        </Text>
+        <Link
+          style={[pal.view, s.p10, s.mb2]}
+          href="/sys/log"
+          title="System log">
+          <Text style={pal.link}>System log</Text>
+        </Link>
+        <Link
+          style={[pal.view, s.p10, s.mb2]}
+          href="/sys/debug"
+          title="Debug tools">
           <Text style={pal.link}>Debug tools</Text>
         </Link>
+        <View style={{height: 100}} />
       </View>
     </View>
   )