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

1 files changed, 22 insertions, 49 deletions

diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index 7c3ed831c..98a8d0ac4 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@@ -1,5 +1,5 @@
 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'
@@ -9,7 +9,6 @@ import {ViewHeader} from 'view/com/util/ViewHeader'
 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'
@@ -17,6 +16,9 @@ import {usePalette} from 'lib/hooks/usePalette'
 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(
@@ -71,7 +73,7 @@ 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()) {
@@ -83,59 +85,33 @@ export const ProfileListScreen = withAuthRequired(
       })
     }, [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,
     ])
 
@@ -155,6 +131,7 @@ export const ProfileListScreen = withAuthRequired(
           onToggleSubscribed={onToggleSubscribed}
           onPressEditList={onPressEditList}
           onPressDeleteList={onPressDeleteList}
+          onPressShareList={onPressShareList}
         />
       </CenteredView>
     )
@@ -162,10 +139,6 @@ export const ProfileListScreen = withAuthRequired(
 )
 
 const styles = StyleSheet.create({
-  headerBtns: {
-    flexDirection: 'row',
-    gap: 8,
-  },
   container: {
     flex: 1,
     paddingBottom: isDesktopWeb ? 0 : 100,