Tune the empty state code

src/view/com/lists/MyListsEmptyState.tsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {Text} from '../util/text/Text'
-import {Button} from '../util/forms/Button'
-import {usePalette} from 'lib/hooks/usePalette'
-import {s} from 'lib/styles'
-
-export function MyListsEmptyState() {
-  const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
-
-  const onPressCreateList = React.useCallback(() => {
-    // TODO
-  }, [])
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.iconContainer}>
-        <FontAwesomeIcon
-          icon="list-ul"
-          style={[styles.icon, pal.text]}
-          size={62}
-        />
-      </View>
-      <Text type="xl-medium" style={[s.textCenter, pal.text]}>
-        Lists are public collections of users. You can create a list or find
-        other users' lists on their profiles.
-      </Text>
-      <View style={styles.btns}>
-        <Button type="inverted" style={styles.btn} onPress={onPressCreateList}>
-          <FontAwesomeIcon
-            icon="plus"
-            style={palInverted.text as FontAwesomeIconStyle}
-            size={14}
-          />
-          <Text type="lg-medium" style={palInverted.text}>
-            New mutelist
-          </Text>
-        </Button>
-      </View>
-      <View style={[pal.viewLight, styles.notice]}>
-        <Text type="lg" style={[pal.textLight, s.textCenter]}>
-          Currently only "mutelists" are available. Feed lists will be
-          implemented soon!
-        </Text>
-      </View>
-    </View>
-  )
-}
-const styles = StyleSheet.create({
-  container: {
-    height: '100%',
-    paddingVertical: 40,
-    paddingHorizontal: 30,
-  },
-  iconContainer: {
-    marginBottom: 16,
-  },
-  icon: {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-  },
-  btns: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  btn: {
-    gap: 10,
-    marginVertical: 20,
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 14,
-    paddingHorizontal: 24,
-    borderRadius: 30,
-  },
-  notice: {
-    borderRadius: 12,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    marginHorizontal: 30,
-  },
-})

src/view/com/util/EmptyStateWithButton.tsx

@@ -4,12 +4,20 @@ import {
   FontAwesomeIcon,
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
-import {Text} from '../util/text/Text'
-import {Button} from '../util/forms/Button'
+import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {Text} from './text/Text'
+import {Button} from './forms/Button'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 
-export function SubscribedMutelistsEmptyState() {
+interface Props {
+  icon: IconProp
+  message: string
+  buttonLabel: string
+  onPress: () => void
+}
+
+export function EmptyStateWithButton(props: Props) {
   const pal = usePalette('default')
   const palInverted = usePalette('inverted')
 
@@ -21,25 +29,23 @@ export function SubscribedMutelistsEmptyState() {
     <View style={styles.container}>
       <View style={styles.iconContainer}>
         <FontAwesomeIcon
-          icon="list-ul"
+          icon={props.icon}
           style={[styles.icon, pal.text]}
           size={62}
         />
       </View>
       <Text type="xl-medium" style={[s.textCenter, pal.text]}>
-        You can subscribe to mutelists to automatically mute all of the users
-        they include. Mutelists are public but your subscription to a mutelist
-        is private.
+        {props.message}
       </Text>
       <View style={styles.btns}>
-        <Button type="inverted" style={styles.btn} onPress={onPressCreateList}>
+        <Button type="inverted" style={styles.btn} onPress={props.onPress}>
           <FontAwesomeIcon
             icon="plus"
             style={palInverted.text as FontAwesomeIconStyle}
             size={14}
           />
           <Text type="lg-medium" style={palInverted.text}>
-            New mutelist
+            {props.buttonLabel}
           </Text>
         </Button>
       </View>

src/view/screens/Moderation.tsx

@@ -74,7 +74,7 @@ export const ModerationScreen = withAuthRequired(
             />
           </View>
           <Text type="lg" style={pal.text}>
-            Mutelist subscriptions
+            Mute-list subscriptions
           </Text>
         </Link>
         <Link

src/view/screens/ModerationMuteLists.tsx

@@ -1,15 +1,17 @@
 import React from 'react'
+import {StyleSheet} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
-import {TabBar} from '../com/pager/TabBar'
-import {Pager, RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {MyListsEmptyState} from 'view/com/lists/MyListsEmptyState'
-import {SubscribedMutelistsEmptyState} from 'view/com/lists/SubscribedMutelistsEmptyState'
+import {EmptyStateWithButton} from 'view/com/util/EmptyStateWithButton'
+import {MutelistsEmptyState} from 'view/com/lists/MutelistsEmptyState'
 import {useStores} from 'state/index'
 import {ListsListModel} from 'state/models/lists/lists-list'
 import {ListsList} from 'view/com/lists/ListsList'
 import {usePalette} from 'lib/hooks/usePalette'
+import {CenteredView} from 'view/com/util/Views'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {isDesktopWeb} from 'platform/detection'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -18,13 +20,6 @@ type Props = NativeStackScreenProps<
 export const ModerationMuteListsScreen = withAuthRequired(({route}: Props) => {
   const pal = usePalette('default')
   const store = useStores()
-  const [selectedPage, setSelectedPage] = React.useState(0)
-
-  const mine: ListsListModel = React.useMemo(() => {
-    const list = new ListsListModel(store, store.me.did)
-    list.loadMore()
-    return list
-  }, [store])
 
   const mutelists: ListsListModel = React.useMemo(() => {
     const list = new ListsListModel(store, 'mutelists')
@@ -35,54 +30,74 @@ export const ModerationMuteListsScreen = withAuthRequired(({route}: Props) => {
   useFocusEffect(
     React.useCallback(() => {
       store.shell.setMinimalShellMode(false)
-    }, [store, selectedPage]),
+    }, [store]),
   )
 
-  const onPageSelected = React.useCallback(
-    (index: number) => {
-      setSelectedPage(index)
-    },
-    [store, setSelectedPage],
-  )
-
-  const renderTabBar = React.useCallback((props: RenderTabBarFnProps) => {
+  const renderEmptyState = React.useCallback(() => {
     return (
-      <TabBar
-        {...props}
-        items={['My Lists', 'Mutelists']}
-        indicatorColor={pal.colors.link}
-        indicatorPosition="bottom"
-        testID="tabs"
+      <EmptyStateWithButton
+        icon="users-slash"
+        message="You can subscribe to mute-lists to automatically mute all of the users they include. Mute-lists are public but your subscription to a mute-list is private."
+        buttonLabel="New Mute List"
+        onPress={() => undefined}
       />
     )
   }, [])
 
-  const renderMineEmptyState = React.useCallback(() => {
-    return <MyListsEmptyState />
-  }, [])
-
-  const renderMutelistsEmptyState = React.useCallback(() => {
-    return <SubscribedMutelistsEmptyState />
-  }, [])
-
   return (
-    <Pager
-      testID="listsScreen"
-      onPageSelected={onPageSelected}
-      renderTabBar={renderTabBar}
-      tabBarPosition="top">
-      <ListsList
-        key="1"
-        testID="minePage"
-        listsList={mine}
-        renderEmptyState={renderMineEmptyState}
-      />
-      <ListsList
-        key="2"
-        testID="mutelistsPage"
-        listsList={mutelists}
-        renderEmptyState={renderMutelistsEmptyState}
-      />
-    </Pager>
+    <CenteredView
+      style={[
+        styles.container,
+        isDesktopWeb && styles.containerDesktop,
+        pal.view,
+        pal.border,
+      ]}
+      testID="moderationMutelistsScreen">
+      <ViewHeader title="Mute-list Subscriptions" showOnDesktop />
+      <ListsList listsList={mutelists} renderEmptyState={renderEmptyState} />
+    </CenteredView>
   )
 })
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingBottom: isDesktopWeb ? 0 : 100,
+  },
+  containerDesktop: {
+    borderLeftWidth: 1,
+    borderRightWidth: 1,
+  },
+  title: {
+    textAlign: 'center',
+    marginTop: 12,
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: 'center',
+    paddingHorizontal: 30,
+    marginBottom: 14,
+  },
+  descriptionDesktop: {
+    marginTop: 14,
+  },
+
+  flex1: {
+    flex: 1,
+  },
+  empty: {
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    borderRadius: 16,
+    marginHorizontal: 24,
+    marginTop: 10,
+  },
+  emptyText: {
+    textAlign: 'center',
+  },
+
+  footer: {
+    height: 200,
+    paddingTop: 20,
+  },
+})