[APP-657] Add share list functionality (#863)

* replace delete list button text with icon

* fix mute list styling on desktop

* add share button to nav bar on a list

* fix styling when on profile

* bug: add key to ImageHorzList

* clean up code & refactor

* fix styling for ListItems

* create a reusable ListActions component for actions on a list

* remove dead styles

* add keys to ListActions

* add helpers to set list embed

* render list embeds

* fix list sharing on web

* make style prop optional in ListCard

* update `@atproto/api` to `0.3.13`

src/view/com/lists/ListActions.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {Button} from '../util/forms/Button'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {usePalette} from 'lib/hooks/usePalette'
+
+export const ListActions = ({
+  muted,
+  onToggleSubscribed,
+  onPressEditList,
+  isOwner,
+  onPressDeleteList,
+  onPressShareList,
+  reversed = false, // Default value of reversed is false
+}: {
+  isOwner: boolean
+  muted?: boolean
+  onToggleSubscribed?: () => void
+  onPressEditList?: () => void
+  onPressDeleteList?: () => void
+  onPressShareList?: () => void
+  reversed?: boolean // New optional prop
+}) => {
+  const pal = usePalette('default')
+
+  let buttons = [
+    <Button
+      key="subscribeButton"
+      type={muted ? 'inverted' : 'primary'}
+      label={muted ? 'Unsubscribe' : 'Subscribe & Mute'}
+      accessibilityLabel={muted ? 'Unsubscribe' : 'Subscribe and mute'}
+      accessibilityHint=""
+      onPress={onToggleSubscribed}
+    />,
+    isOwner && (
+      <Button
+        key="editListButton"
+        type="default"
+        label="Edit List"
+        accessibilityLabel="Edit list"
+        accessibilityHint=""
+        onPress={onPressEditList}
+      />
+    ),
+    isOwner && (
+      <Button
+        key="deleteListButton"
+        type="default"
+        testID="deleteListBtn"
+        accessibilityLabel="Delete list"
+        accessibilityHint=""
+        onPress={onPressDeleteList}>
+        <FontAwesomeIcon icon={['far', 'trash-can']} style={[pal.text]} />
+      </Button>
+    ),
+    <Button
+      key="shareListButton"
+      type="default"
+      testID="shareListBtn"
+      accessibilityLabel="Share list"
+      accessibilityHint=""
+      onPress={onPressShareList}>
+      <FontAwesomeIcon icon={'share'} style={[pal.text]} />
+    </Button>,
+  ]
+
+  // If reversed is true, reverse the array to reverse the order of the buttons
+  if (reversed) {
+    buttons = buttons.filter(Boolean).reverse() // filterting out any falsey values and reversing the array
+  } else {
+    buttons = buttons.filter(Boolean) // filterting out any falsey values
+  }
+
+  return <View style={styles.headerBtns}>{buttons}</View>
+}
+
+const styles = StyleSheet.create({
+  headerBtns: {
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 12,
+  },
+})

src/view/com/lists/ListCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {AtUri, AppBskyGraphDefs, RichText} from '@atproto/api'
 import {Link} from '../util/Link'
 import {Text} from '../util/text/Text'
@@ -16,12 +16,14 @@ export const ListCard = ({
   noBg,
   noBorder,
   renderButton,
+  style,
 }: {
   testID?: string
   list: AppBskyGraphDefs.ListView
   noBg?: boolean
   noBorder?: boolean
   renderButton?: () => JSX.Element
+  style?: StyleProp<ViewStyle>
 }) => {
   const pal = usePalette('default')
   const store = useStores()
@@ -53,6 +55,7 @@ export const ListCard = ({
         pal.border,
         noBorder && styles.outerNoBorder,
         !noBg && pal.view,
+        style,
       ]}
       href={`/profile/${list.creator.did}/lists/${rkey}`}
       title={list.name}

src/view/com/lists/ListItems.tsx

@@ -6,10 +6,10 @@ import {
   StyleSheet,
   View,
   ViewStyle,
+  FlatList,
 } from 'react-native'
 import {AppBskyActorDefs, AppBskyGraphDefs, RichText} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
-import {FlatList} from '../util/Views'
 import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
@@ -25,6 +25,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {s} from 'lib/styles'
 import {isDesktopWeb} from 'platform/detection'
+import {ListActions} from './ListActions'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}
 const HEADER_ITEM = {_reactKey: '__header__'}
@@ -41,6 +42,7 @@ export const ListItems = observer(
     onToggleSubscribed,
     onPressEditList,
     onPressDeleteList,
+    onPressShareList,
     renderEmptyState,
     testID,
     headerOffset = 0,
@@ -49,9 +51,10 @@ export const ListItems = observer(
     style?: StyleProp<ViewStyle>
     scrollElRef?: MutableRefObject<FlatList<any> | null>
     onPressTryAgain?: () => void
-    onToggleSubscribed?: () => void
-    onPressEditList?: () => void
-    onPressDeleteList?: () => void
+    onToggleSubscribed: () => void
+    onPressEditList: () => void
+    onPressDeleteList: () => void
+    onPressShareList: () => void
     renderEmptyState?: () => JSX.Element
     testID?: string
     headerOffset?: number
@@ -163,6 +166,7 @@ export const ListItems = observer(
               onToggleSubscribed={onToggleSubscribed}
               onPressEditList={onPressEditList}
               onPressDeleteList={onPressDeleteList}
+              onPressShareList={onPressShareList}
             />
           ) : null
         } else if (item === ERROR_ITEM) {
@@ -193,14 +197,17 @@ export const ListItems = observer(
         )
       },
       [
-        list,
-        onPressTryAgain,
-        onPressRetryLoadMore,
         renderMemberButton,
+        renderEmptyState,
+        list.list,
+        list.isOwner,
+        list.error,
+        onToggleSubscribed,
         onPressEditList,
         onPressDeleteList,
-        onToggleSubscribed,
-        renderEmptyState,
+        onPressShareList,
+        onPressTryAgain,
+        onPressRetryLoadMore,
       ],
     )
 
@@ -257,12 +264,14 @@ const ListHeader = observer(
     onToggleSubscribed,
     onPressEditList,
     onPressDeleteList,
+    onPressShareList,
   }: {
     list: AppBskyGraphDefs.ListView
     isOwner: boolean
-    onToggleSubscribed?: () => void
-    onPressEditList?: () => void
-    onPressDeleteList?: () => void
+    onToggleSubscribed: () => void
+    onPressEditList: () => void
+    onPressDeleteList: () => void
+    onPressShareList: () => void
   }) => {
     const pal = usePalette('default')
     const store = useStores()
@@ -301,43 +310,14 @@ const ListHeader = observer(
               />
             )}
             {isDesktopWeb && (
-              <View style={styles.headerBtns}>
-                {list.viewer?.muted ? (
-                  <Button
-                    type="inverted"
-                    label="Unsubscribe"
-                    accessibilityLabel="Unsubscribe"
-                    accessibilityHint=""
-                    onPress={onToggleSubscribed}
-                  />
-                ) : (
-                  <Button
-                    type="primary"
-                    label="Subscribe & Mute"
-                    accessibilityLabel="Subscribe and mute"
-                    accessibilityHint=""
-                    onPress={onToggleSubscribed}
-                  />
-                )}
-                {isOwner && (
-                  <Button
-                    type="default"
-                    label="Edit List"
-                    accessibilityLabel="Edit list"
-                    accessibilityHint=""
-                    onPress={onPressEditList}
-                  />
-                )}
-                {isOwner && (
-                  <Button
-                    type="default"
-                    label="Delete List"
-                    accessibilityLabel="Delete list"
-                    accessibilityHint=""
-                    onPress={onPressDeleteList}
-                  />
-                )}
-              </View>
+              <ListActions
+                isOwner={isOwner}
+                muted={list.viewer?.muted}
+                onPressDeleteList={onPressDeleteList}
+                onPressEditList={onPressEditList}
+                onToggleSubscribed={onToggleSubscribed}
+                onPressShareList={onPressShareList}
+              />
             )}
           </View>
           <View>

src/view/com/lists/ListsList.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   View,
   ViewStyle,
+  FlatList,
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {
@@ -13,7 +14,6 @@ import {
   FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
-import {FlatList} from '../util/Views'
 import {ListCard} from './ListCard'
 import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {ErrorMessage} from '../util/error/ErrorMessage'
@@ -149,7 +149,11 @@ export const ListsList = observer(
         return renderItem ? (
           renderItem(item)
         ) : (
-          <ListCard list={item} testID={`list-${item.name}`} />
+          <ListCard
+            list={item}
+            testID={`list-${item.name}`}
+            style={styles.item}
+          />
         )
       },
       [
@@ -193,7 +197,7 @@ export const ListsList = observer(
                 progressViewOffset={headerOffset}
               />
             }
-            contentContainerStyle={s.contentContainer}
+            contentContainerStyle={[s.contentContainer]}
             style={{paddingTop: headerOffset}}
             onEndReached={onEndReached}
             onEndReachedThreshold={0.6}
@@ -237,4 +241,7 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   feedFooter: {paddingTop: 20},
+  item: {
+    paddingHorizontal: 18,
+  },
 })