[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/composer/useExternalLinkFetch.ts

@@ -3,9 +3,17 @@ import {useStores} from 'state/index'
 import {ImageModel} from 'state/models/media/image'
 import * as apilib from 'lib/api/index'
 import {getLinkMeta} from 'lib/link-meta/link-meta'
-import {getPostAsQuote, getFeedAsEmbed} from 'lib/link-meta/bsky'
+import {
+  getPostAsQuote,
+  getFeedAsEmbed,
+  getListAsEmbed,
+} from 'lib/link-meta/bsky'
 import {downloadAndResize} from 'lib/media/manip'
-import {isBskyPostUrl, isBskyCustomFeedUrl} from 'lib/strings/url-helpers'
+import {
+  isBskyPostUrl,
+  isBskyCustomFeedUrl,
+  isBskyListUrl,
+} from 'lib/strings/url-helpers'
 import {ComposerOpts} from 'state/models/ui/shell'
 import {POST_IMG_MAX} from 'lib/constants'
 
@@ -60,6 +68,24 @@ export function useExternalLinkFetch({
             setExtLink(undefined)
           },
         )
+      } else if (isBskyListUrl(extLink.uri)) {
+        getListAsEmbed(store, extLink.uri).then(
+          ({embed, meta}) => {
+            if (aborted) {
+              return
+            }
+            setExtLink({
+              uri: extLink.uri,
+              isLoading: false,
+              meta,
+              embed,
+            })
+          },
+          err => {
+            store.log.error('Failed to fetch list for embedding', {err})
+            setExtLink(undefined)
+          },
+        )
       } else {
         getLinkMeta(store, extLink.uri).then(meta => {
           if (aborted) {

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,
+  },
 })

src/view/com/util/images/ImageHorzList.tsx

@@ -13,6 +13,7 @@ export function ImageHorzList({images, style}: Props) {
     <View style={[styles.flexRow, style]}>
       {images.map(({thumb, alt}) => (
         <Image
+          key={thumb}
           source={{uri: thumb}}
           style={styles.image}
           accessible={true}

src/view/com/util/post-embeds/CustomFeedEmbed.tsx

@@ -0,0 +1,37 @@
+import React, {useMemo} from 'react'
+import {AppBskyFeedDefs} from '@atproto/api'
+import {usePalette} from 'lib/hooks/usePalette'
+import {StyleSheet} from 'react-native'
+import {useStores} from 'state/index'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
+import {CustomFeed} from 'view/com/feeds/CustomFeed'
+
+export function CustomFeedEmbed({
+  record,
+}: {
+  record: AppBskyFeedDefs.GeneratorView
+}) {
+  const pal = usePalette('default')
+  const store = useStores()
+  const item = useMemo(
+    () => new CustomFeedModel(store, record),
+    [store, record],
+  )
+  return (
+    <CustomFeed
+      item={item}
+      style={[pal.view, pal.border, styles.customFeedOuter]}
+      showLikes
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  customFeedOuter: {
+    borderWidth: 1,
+    borderRadius: 8,
+    marginTop: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+  },
+})

src/view/com/util/post-embeds/ListEmbed.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {usePalette} from 'lib/hooks/usePalette'
+import {observer} from 'mobx-react-lite'
+import {ListCard} from 'view/com/lists/ListCard'
+import {AppBskyGraphDefs} from '@atproto/api'
+import {s} from 'lib/styles'
+
+export const ListEmbed = observer(
+  ({
+    item,
+    style,
+  }: {
+    item: AppBskyGraphDefs.ListView
+    style?: StyleProp<ViewStyle>
+  }) => {
+    const pal = usePalette('default')
+
+    return (
+      <View style={[pal.view, pal.border, s.border1, styles.container]}>
+        <ListCard list={item} style={[style, styles.card]} />
+      </View>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+  },
+  card: {
+    borderTopWidth: 0,
+    borderRadius: 8,
+  },
+})

src/view/com/util/post-embeds/index.tsx

@@ -14,6 +14,7 @@ import {
   AppBskyEmbedRecordWithMedia,
   AppBskyFeedPost,
   AppBskyFeedDefs,
+  AppBskyGraphDefs,
 } from '@atproto/api'
 import {Link} from '../Link'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
@@ -25,8 +26,8 @@ import {ExternalLinkEmbed} from './ExternalLinkEmbed'
 import {getYoutubeVideoId} from 'lib/strings/url-helpers'
 import QuoteEmbed from './QuoteEmbed'
 import {AutoSizedImage} from '../images/AutoSizedImage'
-import {CustomFeed} from 'view/com/feeds/CustomFeed'
-import {CustomFeedModel} from 'state/models/feeds/custom-feed'
+import {CustomFeedEmbed} from './CustomFeedEmbed'
+import {ListEmbed} from './ListEmbed'
 
 type Embed =
   | AppBskyEmbedRecord.View
@@ -144,6 +145,23 @@ export function PostEmbeds({
     }
   }
 
+  // custom feed embed (i.e. generator view)
+  // =
+  if (
+    AppBskyEmbedRecord.isView(embed) &&
+    AppBskyFeedDefs.isGeneratorView(embed.record)
+  ) {
+    return <CustomFeedEmbed record={embed.record} />
+  }
+
+  // list embed (e.g. mute lists; i.e. ListView)
+  if (
+    AppBskyEmbedRecord.isView(embed) &&
+    AppBskyGraphDefs.isListView(embed.record)
+  ) {
+    return <ListEmbed item={embed.record} />
+  }
+
   // external link embed
   // =
   if (AppBskyEmbedExternal.isView(embed)) {
@@ -164,34 +182,9 @@ export function PostEmbeds({
     )
   }
 
-  // custom feed embed (i.e. generator view)
-  // =
-  if (
-    AppBskyEmbedRecord.isView(embed) &&
-    AppBskyFeedDefs.isGeneratorView(embed.record)
-  ) {
-    return <CustomFeedEmbed record={embed.record} />
-  }
-
   return <View />
 }
 
-function CustomFeedEmbed({record}: {record: AppBskyFeedDefs.GeneratorView}) {
-  const pal = usePalette('default')
-  const store = useStores()
-  const item = React.useMemo(
-    () => new CustomFeedModel(store, record),
-    [store, record],
-  )
-  return (
-    <CustomFeed
-      item={item}
-      style={[pal.view, pal.border, styles.customFeedOuter]}
-      showLikes
-    />
-  )
-}
-
 const styles = StyleSheet.create({
   stackContainer: {
     gap: 6,
@@ -208,13 +201,6 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     marginTop: 4,
   },
-  customFeedOuter: {
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-  },
   alt: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',
     borderRadius: 6,