ALF log screen (#8845)

src/Navigation.tsx

@@ -55,7 +55,6 @@ import {DebugModScreen} from '#/view/screens/DebugMod'
 import {FeedsScreen} from '#/view/screens/Feeds'
 import {HomeScreen} from '#/view/screens/Home'
 import {ListsScreen} from '#/view/screens/Lists'
-import {LogScreen} from '#/view/screens/Log'
 import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts'
 import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists'
 import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts'
@@ -74,6 +73,7 @@ import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
 import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
 import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen'
 import HashtagScreen from '#/screens/Hashtag'
+import {LogScreen} from '#/screens/Log'
 import {MessagesScreen} from '#/screens/Messages/ChatList'
 import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
 import {MessagesInboxScreen} from '#/screens/Messages/Inbox'

src/screens/Log.tsx

@@ -0,0 +1,128 @@
+import {useCallback, useState} from 'react'
+import {LayoutAnimation, View} from 'react-native'
+import {Pressable} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
+
+import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
+import {getEntries} from '#/logger/logDump'
+import {useTickEveryMinute} from '#/state/shell'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {atoms as a, useTheme} from '#/alf'
+import {
+  ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottomIcon,
+  ChevronTop_Stroke2_Corner0_Rounded as ChevronTopIcon,
+} from '#/components/icons/Chevron'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import * as Layout from '#/components/Layout'
+import {Text} from '#/components/Typography'
+
+export function LogScreen({}: NativeStackScreenProps<
+  CommonNavigatorParams,
+  'Log'
+>) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const setMinimalShellMode = useSetMinimalShellMode()
+  const [expanded, setExpanded] = useState<string[]>([])
+  const timeAgo = useGetTimeAgo()
+  const tick = useTickEveryMinute()
+
+  useFocusEffect(
+    useCallback(() => {
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
+  )
+
+  const toggler = (id: string) => () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    if (expanded.includes(id)) {
+      setExpanded(expanded.filter(v => v !== id))
+    } else {
+      setExpanded([...expanded, id])
+    }
+  }
+
+  return (
+    <Layout.Screen>
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content>
+          <Layout.Header.TitleText>
+            <Trans>System log</Trans>
+          </Layout.Header.TitleText>
+        </Layout.Header.Content>
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Content>
+        {getEntries()
+          .slice(0)
+          .map(entry => {
+            return (
+              <View key={`entry-${entry.id}`}>
+                <Pressable
+                  style={[
+                    a.flex_row,
+                    a.align_center,
+                    a.py_md,
+                    a.px_sm,
+                    a.border_b,
+                    t.atoms.border_contrast_low,
+                    t.atoms.bg,
+                    a.gap_sm,
+                  ]}
+                  onPress={toggler(entry.id)}
+                  accessibilityLabel={_(msg`View debug entry`)}
+                  accessibilityHint={_(
+                    msg`Opens additional details for a debug entry`,
+                  )}>
+                  {entry.level === 'warn' || entry.level === 'error' ? (
+                    <WarningIcon size="sm" fill={t.palette.negative_500} />
+                  ) : (
+                    <CircleInfoIcon size="sm" />
+                  )}
+                  <Text style={[a.flex_1]}>{String(entry.message)}</Text>
+                  {entry.metadata &&
+                    Object.keys(entry.metadata).length > 0 &&
+                    (expanded.includes(entry.id) ? (
+                      <ChevronTopIcon
+                        size="sm"
+                        style={[t.atoms.text_contrast_low]}
+                      />
+                    ) : (
+                      <ChevronBottomIcon
+                        size="sm"
+                        style={[t.atoms.text_contrast_low]}
+                      />
+                    ))}
+                  <Text style={[{minWidth: 40}, t.atoms.text_contrast_medium]}>
+                    {timeAgo(entry.timestamp, tick)}
+                  </Text>
+                </Pressable>
+                {expanded.includes(entry.id) && (
+                  <View
+                    style={[
+                      t.atoms.bg_contrast_25,
+                      a.rounded_xs,
+                      a.p_sm,
+                      a.border_b,
+                      t.atoms.border_contrast_low,
+                    ]}>
+                    <View style={[a.px_sm, a.py_xs]}>
+                      <Text>{JSON.stringify(entry.metadata, null, 2)}</Text>
+                    </View>
+                  </View>
+                )}
+              </View>
+            )
+          })}
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}

src/view/screens/Log.tsx

@@ -1,116 +0,0 @@
-import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useFocusEffect} from '@react-navigation/native'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {s} from '#/lib/styles'
-import {getEntries} from '#/logger/logDump'
-import {useTickEveryMinute} from '#/state/shell'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {Text} from '#/view/com/util/text/Text'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {ScrollView} from '#/view/com/util/Views'
-import * as Layout from '#/components/Layout'
-
-export function LogScreen({}: NativeStackScreenProps<
-  CommonNavigatorParams,
-  'Log'
->) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const setMinimalShellMode = useSetMinimalShellMode()
-  const [expanded, setExpanded] = React.useState<string[]>([])
-  const timeAgo = useGetTimeAgo()
-  const tick = useTickEveryMinute()
-
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  const toggler = (id: string) => () => {
-    if (expanded.includes(id)) {
-      setExpanded(expanded.filter(v => v !== id))
-    } else {
-      setExpanded([...expanded, id])
-    }
-  }
-
-  return (
-    <Layout.Screen>
-      <ViewHeader title="Log" />
-      <ScrollView style={s.flex1}>
-        {getEntries()
-          .slice(0)
-          .map(entry => {
-            return (
-              <View key={`entry-${entry.id}`}>
-                <TouchableOpacity
-                  style={[styles.entry, pal.border, pal.view]}
-                  onPress={toggler(entry.id)}
-                  accessibilityLabel={_(msg`View debug entry`)}
-                  accessibilityHint={_(
-                    msg`Opens additional details for a debug entry`,
-                  )}>
-                  {entry.level === 'debug' ? (
-                    <FontAwesomeIcon icon="info" />
-                  ) : (
-                    <FontAwesomeIcon icon="exclamation" style={s.red3} />
-                  )}
-                  <Text type="sm" style={[styles.summary, pal.text]}>
-                    {String(entry.message)}
-                  </Text>
-                  {entry.metadata && Object.keys(entry.metadata).length ? (
-                    <FontAwesomeIcon
-                      icon={
-                        expanded.includes(entry.id) ? 'angle-up' : 'angle-down'
-                      }
-                      style={s.mr5}
-                    />
-                  ) : undefined}
-                  <Text type="sm" style={[styles.ts, pal.textLight]}>
-                    {timeAgo(entry.timestamp, tick)}
-                  </Text>
-                </TouchableOpacity>
-                {expanded.includes(entry.id) ? (
-                  <View style={[pal.view, s.pl10, s.pr10, s.pb10]}>
-                    <View style={[pal.btn, styles.details]}>
-                      <Text type="mono" style={pal.text}>
-                        {JSON.stringify(entry.metadata, null, 2)}
-                      </Text>
-                    </View>
-                  </View>
-                ) : undefined}
-              </View>
-            )
-          })}
-        <View style={s.footerSpacer} />
-      </ScrollView>
-    </Layout.Screen>
-  )
-}
-
-const styles = StyleSheet.create({
-  entry: {
-    flexDirection: 'row',
-    borderTopWidth: 1,
-    paddingVertical: 10,
-    paddingHorizontal: 6,
-  },
-  summary: {
-    flex: 1,
-  },
-  ts: {
-    width: 40,
-  },
-  details: {
-    paddingVertical: 10,
-    paddingHorizontal: 6,
-  },
-})