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>

__e2e__/flows/feed-reorder.yml

@@ -0,0 +1,82 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: ?users&follows&posts&feeds
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+# Pin alice's feed
+- tapOn:
+    id: "bottomBarProfileBtn"
+- swipe:
+    from:
+        id: "profilePager-selector"
+    direction: LEFT
+- tapOn:
+    id: "profilePager-selector-4"
+- tapOn:
+    id: "feed-alice-favs"
+- tapOn: "Pin to Home"
+- tapOn:
+    id: "bottomBarHomeBtn"
+- assertNotVisible: "Feeds ✨"
+- assertVisible:
+    id: "homeScreenFeedTabs-selector-0"
+    text: "Following"
+- assertVisible:
+    id: "homeScreenFeedTabs-selector-1"
+    text: "alice-favs"
+
+# Set alice-favs first
+- tapOn:
+    id: "viewHeaderDrawerBtn"
+- tapOn:
+    id: "menuItemButton-Feeds"
+- tapOn: "Edit Saved Feeds"
+- tapOn:
+    label: "Tap on down arrow"
+    point: "79%,23%"
+- tapOn:
+    id: "bottomBarHomeBtn"
+- assertVisible:
+    id: "homeScreenFeedTabs-selector-0"
+    text: "alice-favs"
+- assertVisible:
+    id: "homeScreenFeedTabs-selector-1"
+    text: "Following"
+
+# Set following first
+- tapOn:
+    id: "viewHeaderDrawerBtn"
+- tapOn:
+    id: "menuItemButton-Feeds"
+- tapOn:
+    label: "Tap on down arrow"
+    point: "79%,23%"
+- tapOn:
+    id: "bottomBarHomeBtn"
+- assertVisible:
+    id: "homeScreenFeedTabs-selector-0"
+    text: "Following"
+- assertVisible:
+    id: "homeScreenFeedTabs-selector-1"
+    text: "alice-favs"
+
+# Remove following
+- tapOn:
+    id: "viewHeaderDrawerBtn"
+- tapOn:
+    id: "menuItemButton-Feeds"
+- tapOn:
+    label: "Tap on unpin"
+    point: "91%,23%"
+- tapOn:
+    id: "bottomBarHomeBtn"
+- assertVisible:
+    id: "homeScreenFeedTabs-selector-0"
+    text: "alice-favs"
+- assertNotVisible: "Following"

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>
               ) : (

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}
+              size={14}
-              style={[pal.text, styles.webArrowUpButton]}
+              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
-          </Pressable>
+              icon="arrow-down"
-        </View>
+              size={14}
-      ) : null}
+              style={[pal.textLight]}
-      {feed.type === 'timeline' ? (
-        <FollowingFeedCard />
-      ) : (
-        <FeedSourceCard
-          key={feedUri}
-          feedUri={feedUri}
-          style={styles.noTopBorder}
-          showSaveBtn
-          showMinimalPlaceholder
             />
-      )}
+          </Pressable>
+        </>
+      ) : null}
       <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,
   },