drag to rearrange pinned items

src/Navigation.tsx

@@ -54,6 +54,7 @@ import {BlockedAccounts} from 'view/screens/BlockedAccounts'
 import {getRoutingInstrumentation} from 'lib/sentry'
 import {SavedFeeds} from './view/screens/SavedFeeds'
 import {CustomFeed} from './view/screens/CustomFeed'
+import {PinnedFeeds} from 'view/screens/PinnedFeeds'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -94,6 +95,7 @@ function commonScreens(Stack: typeof HomeTab) {
       <Stack.Screen name="CopyrightPolicy" component={CopyrightPolicyScreen} />
       <Stack.Screen name="AppPasswords" component={AppPasswords} />
       <Stack.Screen name="SavedFeeds" component={SavedFeeds} />
+      <Stack.Screen name="PinnedFeeds" component={PinnedFeeds} />
       <Stack.Screen name="CustomFeed" component={CustomFeed} />
       <Stack.Screen name="MutedAccounts" component={MutedAccounts} />
       <Stack.Screen name="BlockedAccounts" component={BlockedAccounts} />

src/lib/routes/types.ts

@@ -21,6 +21,7 @@ export type CommonNavigatorParams = {
   CopyrightPolicy: undefined
   AppPasswords: undefined
   SavedFeeds: undefined
+  PinnedFeeds: undefined
   CustomFeed: {name?: string; rkey: string}
   MutedAccounts: undefined
   BlockedAccounts: undefined

src/routes.ts

@@ -15,6 +15,7 @@ export const router = new Router({
   Log: '/sys/log',
   AppPasswords: '/settings/app-passwords',
   SavedFeeds: '/settings/saved-feeds',
+  PinnedFeeds: '/settings/pinned-feeds',
   CustomFeed: '/profile/:name/feed/:rkey',
   MutedAccounts: '/settings/muted-accounts',
   BlockedAccounts: '/settings/blocked-accounts',

src/view/com/algos/AlgoItem.tsx

@@ -24,13 +24,11 @@ const AlgoItem = observer(
     item,
     style,
     showBottom = true,
-    onLongPress,
     reloadOnFocus = false,
   }: {
     item: AlgoItemModel
     style?: StyleProp<ViewStyle>
     showBottom?: boolean
-    onLongPress?: () => void
     reloadOnFocus?: boolean
   }) => {
     const store = useStores()
@@ -54,7 +52,6 @@ const AlgoItem = observer(
             rkey: item.data.uri,
           })
         }}
-        onLongPress={onLongPress}
         key={item.data.uri}>
         <View style={[styles.headerContainer]}>
           <View style={[s.mr10]}>
@@ -64,8 +61,9 @@ const AlgoItem = observer(
             <Text style={[pal.text, s.bold]}>
               {item.data.displayName ?? 'Feed name'}
             </Text>
-            <Text style={[pal.textLight, styles.description]}>
+            <Text style={[pal.textLight, styles.description]} numberOfLines={5}>
-              {item.data.description ?? 'Feed description'}
+              {item.data.description ??
+                "Explore our Feed for the latest updates and insights! Dive into a world of intriguing articles, trending news, and exciting stories that cover a wide range of topics. From technology breakthroughs to lifestyle tips, there's something here for everyone. Stay informed and get inspired with us. Join the conversation now!"}
             </Text>
           </View>
         </View>

src/view/com/algos/SavedFeedItem.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import {View, TouchableOpacity, StyleSheet} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {colors} from 'lib/styles'
+import {observer} from 'mobx-react-lite'
+import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
+import {SavedFeedsModel} from 'state/models/feeds/algo/saved'
+import AlgoItem from './AlgoItem'
+
+export const SavedFeedItem = observer(
+  ({item, savedFeeds}: {item: AlgoItemModel; savedFeeds: SavedFeedsModel}) => {
+    const isPinned = savedFeeds.isPinned(item)
+
+    return (
+      <View style={styles.itemContainer}>
+        <AlgoItem
+          key={item.data.uri}
+          item={item}
+          showBottom={false}
+          style={styles.item}
+        />
+        <TouchableOpacity
+          accessibilityRole="button"
+          onPress={() => {
+            savedFeeds.togglePinnedFeed(item)
+            console.log('pinned', savedFeeds.pinned)
+            console.log('isPinned', savedFeeds.isPinned(item))
+          }}>
+          <FontAwesomeIcon
+            icon="thumb-tack"
+            size={20}
+            color={isPinned ? colors.blue3 : colors.gray3}
+          />
+        </TouchableOpacity>
+      </View>
+    )
+  },
+)
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 18,
+  },
+  item: {
+    borderTopWidth: 0,
+  },
+})

src/view/screens/PinnedFeeds.tsx

@@ -0,0 +1,134 @@
+import React, {useCallback, useMemo} from 'react'
+import {
+  RefreshControl,
+  StyleSheet,
+  View,
+  ActivityIndicator,
+  Pressable,
+} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {useAnalytics} from 'lib/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {CommonNavigatorParams} from 'lib/routes/types'
+import {observer} from 'mobx-react-lite'
+import {useStores} from 'state/index'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {CenteredView} from 'view/com/util/Views'
+import {Text} from 'view/com/util/text/Text'
+import {isDesktopWeb} from 'platform/detection'
+import {s} from 'lib/styles'
+import DraggableFlatList, {
+  ShadowDecorator,
+  ScaleDecorator,
+} from 'react-native-draggable-flatlist'
+import {SavedFeedItem} from 'view/com/algos/SavedFeedItem'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'PinnedFeeds'>
+
+export const PinnedFeeds = withAuthRequired(
+  observer(({}: Props) => {
+    // hooks for global items
+    const pal = usePalette('default')
+    const rootStore = useStores()
+    const {screen} = useAnalytics()
+
+    // hooks for local
+    const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
+    useFocusEffect(
+      useCallback(() => {
+        screen('SavedFeeds')
+        rootStore.shell.setMinimalShellMode(false)
+        savedFeeds.refresh()
+      }, [screen, rootStore, savedFeeds]),
+    )
+    const _ListEmptyComponent = () => {
+      return (
+        <View
+          style={[
+            pal.border,
+            !isDesktopWeb && s.flex1,
+            pal.viewLight,
+            styles.empty,
+          ]}>
+          <Text type="lg" style={[pal.text]}>
+            You don't have any pinned feeds. To pin a feed, go back to the Saved
+            Feeds screen and click the pin icon!
+          </Text>
+        </View>
+      )
+    }
+    const _ListFooterComponent = () => {
+      return (
+        <View style={styles.footer}>
+          {savedFeeds.isLoading && <ActivityIndicator />}
+        </View>
+      )
+    }
+
+    return (
+      <CenteredView style={[s.flex1]}>
+        <ViewHeader title="Arrange Pinned Feeds" showOnDesktop />
+        <DraggableFlatList
+          containerStyle={[!isDesktopWeb && s.flex1]}
+          data={savedFeeds.pinned}
+          keyExtractor={item => item.data.uri}
+          refreshing={savedFeeds.isRefreshing}
+          refreshControl={
+            <RefreshControl
+              refreshing={savedFeeds.isRefreshing}
+              onRefresh={() => savedFeeds.refresh()}
+              tintColor={pal.colors.text}
+              titleColor={pal.colors.text}
+            />
+          }
+          renderItem={({item, drag}) => (
+            <ScaleDecorator>
+              <ShadowDecorator>
+                <Pressable
+                  accessibilityRole="button"
+                  onLongPress={drag}
+                  style={styles.itemContainer}>
+                  <FontAwesomeIcon icon="bars" size={20} style={styles.icon} />
+                  <SavedFeedItem item={item} savedFeeds={savedFeeds} />
+                </Pressable>
+              </ShadowDecorator>
+            </ScaleDecorator>
+          )}
+          initialNumToRender={10}
+          ListFooterComponent={_ListFooterComponent}
+          ListEmptyComponent={_ListEmptyComponent}
+          extraData={savedFeeds.isLoading}
+          onDragEnd={({data}) => savedFeeds.reorderPinnedFeeds(data)}
+          // @ts-ignore our .web version only -prf
+          desktopFixedHeight
+        />
+      </CenteredView>
+    )
+  }),
+)
+
+const styles = StyleSheet.create({
+  footer: {
+    paddingVertical: 20,
+  },
+  empty: {
+    paddingHorizontal: 20,
+    paddingVertical: 20,
+    borderRadius: 16,
+    marginHorizontal: 24,
+    marginTop: 10,
+  },
+  itemContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 18,
+  },
+  item: {
+    borderTopWidth: 0,
+  },
+  icon: {marginRight: 10},
+})

src/view/screens/SavedFeeds.tsx

@@ -6,6 +6,7 @@ import {
   ActivityIndicator,
   FlatList,
   TouchableOpacity,
+  ScrollView,
 } from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -14,21 +15,21 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {CommonNavigatorParams} from 'lib/routes/types'
 import {observer} from 'mobx-react-lite'
 import {useStores} from 'state/index'
-import AlgoItem from 'view/com/algos/AlgoItem'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from 'view/com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
 import {Text} from 'view/com/util/text/Text'
 import {isDesktopWeb} from 'platform/detection'
-import {colors, s} from 'lib/styles'
+import {s} from 'lib/styles'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
 import {SavedFeedsModel} from 'state/models/feeds/algo/saved'
+import {Link} from 'view/com/util/Link'
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {SavedFeedItem} from 'view/com/algos/SavedFeedItem'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
 
 export const SavedFeeds = withAuthRequired(
-  observer(({}: Props) => {
+  observer(({navigation}: Props) => {
     // hooks for global items
     const pal = usePalette('default')
     const rootStore = useStores()
@@ -87,6 +88,12 @@ export const SavedFeeds = withAuthRequired(
             <SavedFeedItem item={item} savedFeeds={savedFeeds} />
           )}
           initialNumToRender={10}
+          ListHeaderComponent={() => (
+            <ListHeaderComponent
+              savedFeeds={savedFeeds}
+              navigation={navigation}
+            />
+          )}
           ListFooterComponent={_ListFooterComponent}
           ListEmptyComponent={_ListEmptyComponent}
           extraData={savedFeeds.isLoading}
@@ -98,31 +105,53 @@ export const SavedFeeds = withAuthRequired(
   }),
 )
 
-const SavedFeedItem = observer(
+const ListHeaderComponent = observer(
-  ({item, savedFeeds}: {item: AlgoItemModel; savedFeeds: SavedFeedsModel}) => {
+  ({
-    const isPinned = savedFeeds.isPinned(item)
+    savedFeeds,
-
+    navigation,
+  }: {
+    savedFeeds: SavedFeedsModel
+    navigation: Props['navigation']
+  }) => {
     return (
-      <View style={styles.itemContainer}>
+      <View style={styles.headerContainer}>
-        <AlgoItem
+        {savedFeeds.pinned.length > 0 ? (
-          key={item.data.uri}
+          <View style={styles.pinnedContainer}>
-          item={item}
+            <View style={styles.pinnedHeader}>
-          showBottom={false}
+              <Text type="lg-bold">Pinned Feeds</Text>
-          style={styles.item}
+              <Link href="/settings/pinned-feeds">
-        />
+                <Text style={styles.editPinned}>Edit</Text>
-        <TouchableOpacity
+              </Link>
-          accessibilityRole="button"
+            </View>
-          onPress={() => {
+
-            savedFeeds.togglePinnedFeed(item)
+            <ScrollView
-            console.log('pinned', savedFeeds.pinned)
+              horizontal={true}
-            console.log('isPinned', savedFeeds.isPinned(item))
+              showsHorizontalScrollIndicator={false}>
-          }}>
+              {savedFeeds.pinned.map(item => {
-          <FontAwesomeIcon
+                return (
-            icon="thumb-tack"
+                  <TouchableOpacity
-            size={20}
+                    key={item.data.uri}
-            color={isPinned ? colors.blue3 : colors.gray3}
+                    accessibilityRole="button"
-          />
+                    onPress={() => {
-        </TouchableOpacity>
+                      navigation.navigate('CustomFeed', {
+                        rkey: item.data.uri,
+                        name: item.data.displayName,
+                      })
+                    }}
+                    style={styles.pinnedItem}>
+                    <UserAvatar avatar={item.data.avatar} size={80} />
+                    <Text type="sm-medium" numberOfLines={1}>
+                      {item.data.displayName ??
+                        `${item.data.creator.displayName}'s feed`}
+                    </Text>
+                  </TouchableOpacity>
+                )
+              })}
+            </ScrollView>
+          </View>
+        ) : null}
+
+        <Text type="lg-bold">All Saved Feeds</Text>
       </View>
     )
   },
@@ -139,12 +168,14 @@ const styles = StyleSheet.create({
     marginHorizontal: 24,
     marginTop: 10,
   },
-  itemContainer: {
+  headerContainer: {paddingHorizontal: 18},
-    flexDirection: 'row',
+  pinnedContainer: {marginBottom: 18, gap: 18},
+  pinnedHeader: {flexDirection: 'row', justifyContent: 'space-between'},
+  pinnedItem: {
+    flex: 1,
     alignItems: 'center',
     marginRight: 18,
+    maxWidth: 100,
   },
-  item: {
+  editPinned: {textDecorationLine: 'underline'},
-    borderTopWidth: 0,
-  },
 })