[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`

package.json

···
     "e2e:run": "detox test --configuration ios.sim.debug --take-screenshots all"
   },
   "dependencies": {
-    "@atproto/api": "0.3.8",
+    "@atproto/api": "^0.3.13",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@expo/html-elements": "^0.4.2",

src/lib/link-meta/bsky.ts

···
     },
   }
 }
+
+export async function getListAsEmbed(
+  store: RootStoreModel,
+  url: string,
+): Promise<apilib.ExternalEmbedDraft> {
+  url = convertBskyAppUrlIfNeeded(url)
+  const [_0, user, _1, rkey] = url.split('/').filter(Boolean)
+  const list = makeRecordUri(user, 'app.bsky.graph.list', rkey)
+  const res = await store.agent.app.bsky.graph.getList({list})
+  return {
+    isLoading: false,
+    uri: list,
+    meta: {
+      url: list,
+      likelyType: LikelyType.AtpData,
+      title: res.data.list.name,
+    },
+    embed: {
+      $type: 'app.bsky.embed.record',
+      record: {
+        uri: res.data.list.uri,
+        cid: res.data.list.cid,
+      },
+    },
+  }
+}

src/lib/strings/url-helpers.ts

···
   return false
 }
 
+export function isBskyListUrl(url: string): boolean {
+  if (isBskyAppUrl(url)) {
+    try {
+      const urlp = new URL(url)
+      return /profile\/(?<name>[^/]+)\/lists\/(?<rkey>[^/]+)/i.test(
+        urlp.pathname,
+      )
+    } catch {
+      console.error('Unexpected error in isBskyListUrl()', url)
+    }
+  }
+  return false
+}
+
 export function convertBskyAppUrlIfNeeded(url: string): string {
   if (isBskyAppUrl(url)) {
     try {

src/state/models/content/list.ts

···
     return this.list?.creator.did === this.rootStore.me.did
   }
 
+  get isSubscribed() {
+    return this.list?.viewer?.muted
+  }
+
   // public api
   // =
 

src/view/com/composer/useExternalLinkFetch.ts

···
 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'
 
···
           },
           err => {
             store.log.error('Failed to fetch feed for embedding', {err})
+            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)
           },
         )

src/view/com/lists/ListActions.tsx

···
+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

···
 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'
···
   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()
···
         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

···
   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'
···
 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__'}
···
     onToggleSubscribed,
     onPressEditList,
     onPressDeleteList,
+    onPressShareList,
     renderEmptyState,
     testID,
     headerOffset = 0,
···
     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
···
               onToggleSubscribed={onToggleSubscribed}
               onPressEditList={onPressEditList}
               onPressDeleteList={onPressDeleteList}
+              onPressShareList={onPressShareList}
             />
           ) : null
         } else if (item === ERROR_ITEM) {
···
         )
       },
       [
-        list,
-        onPressTryAgain,
-        onPressRetryLoadMore,
         renderMemberButton,
+        renderEmptyState,
+        list.list,
+        list.isOwner,
+        list.error,
+        onToggleSubscribed,
         onPressEditList,
         onPressDeleteList,
-        onToggleSubscribed,
-        renderEmptyState,
+        onPressShareList,
+        onPressTryAgain,
+        onPressRetryLoadMore,
       ],
     )
 
···
     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()
···
               />
             )}
             {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

···
   StyleSheet,
   View,
   ViewStyle,
+  FlatList,
 } from 'react-native'
 import {observer} from 'mobx-react-lite'
 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'
···
         return renderItem ? (
           renderItem(item)
         ) : (
-          <ListCard list={item} testID={`list-${item.name}`} />
+          <ListCard
+            list={item}
+            testID={`list-${item.name}`}
+            style={styles.item}
+          />
         )
       },
       [
···
                 progressViewOffset={headerOffset}
               />
             }
-            contentContainerStyle={s.contentContainer}
+            contentContainerStyle={[s.contentContainer]}
             style={{paddingTop: headerOffset}}
             onEndReached={onEndReached}
             onEndReachedThreshold={0.6}
···
     gap: 8,
   },
   feedFooter: {paddingTop: 20},
+  item: {
+    paddingHorizontal: 18,
+  },
 })

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

···
     <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

···
+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

···
+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

···
   AppBskyEmbedRecordWithMedia,
   AppBskyFeedPost,
   AppBskyFeedDefs,
+  AppBskyGraphDefs,
 } from '@atproto/api'
 import {Link} from '../Link'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
···
 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
···
     }
   }
 
+  // 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)) {
···
     )
   }
 
-  // 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,
···
     borderWidth: 1,
     borderRadius: 8,
     marginTop: 4,
-  },
-  customFeedOuter: {
-    borderWidth: 1,
-    borderRadius: 8,
-    marginTop: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
   },
   alt: {
     backgroundColor: 'rgba(0, 0, 0, 0.75)',

src/view/screens/ModerationMuteLists.tsx

···
     <CenteredView
       style={[
         styles.container,
-        isDesktopWeb && styles.containerDesktop,
         pal.view,
         pal.border,
+        isDesktopWeb && styles.containerDesktop,
       ]}
       testID="moderationMutelistsScreen">
       <ViewHeader

src/view/screens/ProfileList.tsx

···
 import React from 'react'
-import {StyleSheet, View} from 'react-native'
+import {StyleSheet} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {useNavigation} from '@react-navigation/native'
···
 import {CenteredView} from 'view/com/util/Views'
 import {ListItems} from 'view/com/lists/ListItems'
 import {EmptyState} from 'view/com/util/EmptyState'
-import {Button} from 'view/com/util/forms/Button'
 import * as Toast from 'view/com/util/Toast'
 import {ListModel} from 'state/models/content/list'
 import {useStores} from 'state/index'
···
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {NavigationProp} from 'lib/routes/types'
 import {isDesktopWeb} from 'platform/detection'
+import {toShareUrl} from 'lib/strings/url-helpers'
+import {shareUrl} from 'lib/sharing'
+import {ListActions} from 'view/com/lists/ListActions'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileList'>
 export const ProfileListScreen = withAuthRequired(
···
       store.shell.openModal({
         name: 'confirm',
         title: 'Delete List',
-        message: 'Are you sure?',
+        message: 'Are you sure',
         async onPressConfirm() {
           await list.delete()
           if (navigation.canGoBack()) {
···
       })
     }, [store, list, navigation])
 
+    const onPressShareList = React.useCallback(() => {
+      const url = toShareUrl(`/profile/${name}/lists/${rkey}`)
+      shareUrl(url)
+    }, [name, rkey])
+
     const renderEmptyState = React.useCallback(() => {
       return <EmptyState icon="users-slash" message="This list is empty!" />
     }, [])
 
     const renderHeaderBtns = React.useCallback(() => {
       return (
-        <View style={styles.headerBtns}>
-          {list?.isOwner && (
-            <Button
-              type="default"
-              label="Delete List"
-              testID="deleteListBtn"
-              accessibilityLabel="Delete list"
-              accessibilityHint=""
-              onPress={onPressDeleteList}
-            />
-          )}
-          {list?.isOwner && (
-            <Button
-              type="default"
-              label="Edit List"
-              testID="editListBtn"
-              accessibilityLabel="Edit list"
-              accessibilityHint=""
-              onPress={onPressEditList}
-            />
-          )}
-          {list.list?.viewer?.muted ? (
-            <Button
-              type="inverted"
-              label="Unsubscribe"
-              testID="unsubscribeListBtn"
-              accessibilityLabel="Unsubscribe from list"
-              accessibilityHint=""
-              onPress={onToggleSubscribed}
-            />
-          ) : (
-            <Button
-              type="primary"
-              label="Subscribe & Mute"
-              testID="subscribeListBtn"
-              accessibilityLabel="Subscribe to this list"
-              accessibilityHint="Mutes the users included in this list"
-              onPress={onToggleSubscribed}
-            />
-          )}
-        </View>
+        <ListActions
+          muted={list.list?.viewer?.muted}
+          isOwner={list.isOwner}
+          onPressDeleteList={onPressDeleteList}
+          onPressEditList={onPressEditList}
+          onToggleSubscribed={onToggleSubscribed}
+          onPressShareList={onPressShareList}
+          reversed={true}
+        />
       )
     }, [
-      list?.isOwner,
+      list.isOwner,
       list.list?.viewer?.muted,
       onPressDeleteList,
       onPressEditList,
+      onPressShareList,
       onToggleSubscribed,
     ])
 
···
           onToggleSubscribed={onToggleSubscribed}
           onPressEditList={onPressEditList}
           onPressDeleteList={onPressDeleteList}
+          onPressShareList={onPressShareList}
         />
       </CenteredView>
     )
···
 )
 
 const styles = StyleSheet.create({
-  headerBtns: {
-    flexDirection: 'row',
-    gap: 8,
-  },
   container: {
     flex: 1,
     paddingBottom: isDesktopWeb ? 0 : 100,

src/view/shell/bottom-bar/BottomBar.tsx

···
                   pal.text,
                   styles.profileIcon,
                   styles.onProfile,
+                  {borderColor: pal.text.color},
                 ]}>
                 <UserAvatar avatar={store.me.avatar} size={27} />
               </View>

src/view/shell/bottom-bar/BottomBarStyles.tsx

···
     top: -4,
   },
   onProfile: {
-    borderColor: colors.black,
     borderWidth: 1,
     borderRadius: 100,
   },

yarn.lock

···
     tlds "^1.234.0"
     typed-emitter "^2.1.0"
 
-"@atproto/api@0.3.8":
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.3.8.tgz#3fc0ebd092cc212c2d0b31a600fe1945a02f9cf7"
-  integrity sha512-7qaIZGEP5J9FW4z8bXezzAmLRzHSXXHo6bWP9Jyu5MLp8tYt9vG6yR2N0QA7GvO0xSYqP87Q5vblPjYXGqtDKg==
+"@atproto/api@^0.3.13":
+  version "0.3.13"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.3.13.tgz#e5ccaa83bb909e662286cdf74a77a76de6562a47"
+  integrity sha512-smDlomgipca16G+jKXAZSMfsAmA5wG8WR3Z1dj29ZShVJlhs6+HHdxX7dWVDYEdSeb2rp/wyHN/tQhxGDAkz/g==
   dependencies:
     "@atproto/common-web" "*"
     "@atproto/uri" "*"