Add trust screen

Changelog: feature

Author: Mark Harding

apps/polycentric/app/(tabs)/_layout.tsx

@@ -22,7 +22,7 @@ export default function TabsLayout() {
     >
       <NativeTabs.Trigger name="feed">
         <NativeTabs.Trigger.Label>Feed</NativeTabs.Trigger.Label>
-        <NativeTabs.Trigger.Icon sf="house.fill" md="home" />
+        <NativeTabs.Trigger.Icon sf="house" md="home" />
       </NativeTabs.Trigger>
 
       <NativeTabs.Trigger name="explore">
@@ -32,7 +32,12 @@ export default function TabsLayout() {
 
       <NativeTabs.Trigger name="activity">
         <NativeTabs.Trigger.Label>Activity</NativeTabs.Trigger.Label>
-        <NativeTabs.Trigger.Icon sf="bell.fill" md="notifications" />
+        <NativeTabs.Trigger.Icon sf="bell" md="notifications" />
+      </NativeTabs.Trigger>
+
+      <NativeTabs.Trigger name="trust">
+        <NativeTabs.Trigger.Label>Trust</NativeTabs.Trigger.Label>
+        <NativeTabs.Trigger.Icon sf="checkmark.seal" md="key" />
       </NativeTabs.Trigger>
 
       {isIOS ? (

apps/polycentric/app/(tabs)/trust.tsx

@@ -0,0 +1 @@
+export { default } from '@/src/features/trust/TrustScreen';

apps/polycentric/src/common/components/layout/Layout.tsx

@@ -88,7 +88,6 @@ function PrimaryColumn({ children }: PrimaryColumnProps) {
       style={[
         Atoms.flex_1,
         isWeb && Atoms.pb_lg,
-        !isWeb && { paddingBottom: insets.bottom },
         isWeb && {
           maxWidth: 600,
           borderLeftColor: theme.palette.neutral_25,

apps/polycentric/src/features/feed/FeedList.tsx

@@ -11,6 +11,7 @@ import { Text } from '@/src/common/components/primitives';
 import { Atoms, useTheme } from '@/src/common/theme';
 import { Post } from '../post/Post';
 import { PostSkeletonList } from '../post/PostSkeleton';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export type FeedListProps = Omit<ListProps<PostData>, 'data' | 'renderItem'> & {
   feed: FeedHookResult;
@@ -33,6 +34,8 @@ export default function FeedList({
 }: FeedListProps) {
   const { theme } = useTheme();
 
+  const insets = useSafeAreaInsets();
+
   return (
     <List<PostData>
       renderItem={renderItem}
@@ -55,15 +58,17 @@ export default function FeedList({
         )
       }
       ListFooterComponent={
-        feed.hasMore && feed.items.length > 0 ? (
-          <View style={[Atoms.items_center, Atoms.p_lg]}>
-            <ActivityIndicator
-              size="small"
-              color={theme.palette.neutral_500}
-              accessibilityLabel="Loading more posts"
-            />
-          </View>
-        ) : null
+        <View style={[!isWeb && { paddingBottom: insets.bottom }]}>
+          {feed.hasMore && feed.items.length > 0 ? (
+            <View style={[Atoms.items_center, Atoms.p_lg]}>
+              <ActivityIndicator
+                size="small"
+                color={theme.palette.neutral_500}
+                accessibilityLabel="Loading more posts"
+              />
+            </View>
+          ) : null}
+        </View>
       }
       onEndReached={feed.hasMore ? feed.loadMore : undefined}
       onEndReachedThreshold={0.5}

apps/polycentric/src/features/trust/TrustScreen.tsx

@@ -0,0 +1,33 @@
+import { Text } from '@/src/common/components';
+import { Screen } from '@/src/common/components/layout';
+import Topbar from '@/src/common/components/layout/Topbar';
+import { Atoms } from '@/src/common/theme';
+import { FlashList } from '@shopify/flash-list';
+import { View } from 'react-native';
+import { List } from '@/src/common/components/List';
+
+export default function TrustScreen() {
+  return (
+    <Screen>
+      <Screen.PrimaryColumn>
+        <List
+          data={[]}
+          renderItem={() => <></>}
+          HeaderComponent={<Topbar title="Trust" />}
+          ListEmptyComponent={() => (
+            <View
+              style={[
+                Atoms.flex_1,
+                Atoms.items_center,
+                Atoms.justify_center,
+                Atoms.p_lg,
+              ]}
+            >
+              <Text color="neutral_500">Coming soon</Text>
+            </View>
+          )}
+        />
+      </Screen.PrimaryColumn>
+    </Screen>
+  );
+}