Make feeds easier to reorder (#3998)

* Make feeds easier to reorder

* Add reorder e2e test

* Tweak feed card to only allow one line (#4002)

---------

Co-authored-by: Eric Bailey <git@esb.lol>

2 files changed, 39 insertions, 29 deletions

diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx
index bb536bccd..9bf6ba6b6 100644
--- a/src/view/com/feeds/FeedSourceCard.tsx
+++ b/src/view/com/feeds/FeedSourceCard.tsx
@@ -211,10 +211,10 @@ export function FeedSourceCardLoaded({
             <UserAvatar type="algo" size={36} avatar={feed.avatar} />
           </View>
           <View style={[styles.headerTextContainer]}>
-            <Text style={[pal.text, s.bold]} numberOfLines={3}>
+            <Text style={[pal.text, s.bold]} numberOfLines={1}>
               {feed.displayName}
             </Text>
-            <Text style={[pal.textLight]} numberOfLines={3}>
+            <Text style={[pal.textLight]} numberOfLines={1}>
               {feed.type === 'feed' ? (
                 <Trans>Feed by {sanitizeHandle(feed.creatorHandle, '@')}</Trans>
               ) : (
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index d50f9f74d..a3aee19dc 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -292,21 +292,37 @@ function ListItem({
 
   return (
     <View style={[styles.itemContainer, pal.border]}>
+      {feed.type === 'timeline' ? (
+        <FollowingFeedCard />
+      ) : (
+        <FeedSourceCard
+          key={feedUri}
+          feedUri={feedUri}
+          style={[styles.noTopBorder, isPinned && {paddingRight: 8}]}
+          showMinimalPlaceholder
+          showSaveBtn={!isPinned}
+        />
+      )}
       {isPinned ? (
-        <View style={styles.webArrowButtonsContainer}>
+        <>
           <Pressable
             disabled={isUpdatePending}
             accessibilityRole="button"
             onPress={onPressUp}
             hitSlop={HITSLOP_TOP}
             style={state => ({
+              backgroundColor: pal.viewLight.backgroundColor,
+              paddingHorizontal: 12,
+              paddingVertical: 10,
+              borderRadius: 4,
+              marginRight: 8,
               opacity:
-                state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
+                state.hovered || state.pressed || isUpdatePending ? 0.5 : 1,
             })}>
             <FontAwesomeIcon
               icon="arrow-up"
-              size={12}
-              style={[pal.text, styles.webArrowUpButton]}
+              size={14}
+              style={[pal.textLight]}
             />
           </Pressable>
           <Pressable
@@ -315,24 +331,22 @@ function ListItem({
             onPress={onPressDown}
             hitSlop={HITSLOP_BOTTOM}
             style={state => ({
+              backgroundColor: pal.viewLight.backgroundColor,
+              paddingHorizontal: 12,
+              paddingVertical: 10,
+              borderRadius: 4,
+              marginRight: 8,
               opacity:
-                state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
+                state.hovered || state.pressed || isUpdatePending ? 0.5 : 1,
             })}>
-            <FontAwesomeIcon icon="arrow-down" size={12} style={[pal.text]} />
+            <FontAwesomeIcon
+              icon="arrow-down"
+              size={14}
+              style={[pal.textLight]}
+            />
           </Pressable>
-        </View>
+        </>
       ) : null}
-      {feed.type === 'timeline' ? (
-        <FollowingFeedCard />
-      ) : (
-        <FeedSourceCard
-          key={feedUri}
-          feedUri={feedUri}
-          style={styles.noTopBorder}
-          showSaveBtn
-          showMinimalPlaceholder
-        />
-      )}
       <View style={{paddingRight: 16}}>
         <Pressable
           disabled={isUpdatePending}
@@ -340,12 +354,16 @@ function ListItem({
           hitSlop={10}
           onPress={onTogglePinned}
           style={state => ({
+            backgroundColor: pal.viewLight.backgroundColor,
+            paddingHorizontal: 12,
+            paddingVertical: 10,
+            borderRadius: 4,
             opacity:
               state.hovered || state.focused || isUpdatePending ? 0.5 : 1,
           })}>
           <FontAwesomeIcon
             icon="thumb-tack"
-            size={20}
+            size={14}
             color={isPinned ? colors.blue3 : pal.colors.icon}
           />
         </Pressable>
@@ -424,14 +442,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderBottomWidth: 1,
   },
-  webArrowButtonsContainer: {
-    paddingLeft: 16,
-    flexDirection: 'column',
-    justifyContent: 'space-around',
-  },
-  webArrowUpButton: {
-    marginBottom: 10,
-  },
   noTopBorder: {
     borderTopWidth: 0,
   },