Handle saved feed screen edge case

src/view/com/feeds/FeedSourceCard.tsx

@@ -193,11 +193,9 @@ export function FeedSourceCardLoaded({
       </View>
     )
 
-  const showFeedSaveButton = showSaveBtn && feed.type === 'feed'
+  const primaryAlgo = preferences?.primaryAlgorithm
   const isPrimaryAlgo =
-    preferences.primaryAlgorithm?.enabled &&
+    primaryAlgo?.enabled && primaryAlgo?.uri && primaryAlgo.uri === feed.uri
-    preferences.primaryAlgorithm?.uri &&
-    preferences.primaryAlgorithm.uri === feed.uri
 
   return (
     <>
@@ -236,52 +234,57 @@ export function FeedSourceCardLoaded({
             </Text>
           </View>
 
-          {showFeedSaveButton &&
+          {showSaveBtn && feed.type === 'feed' && (
-            (gate('reduced_onboarding_and_home_algo') && isPrimaryAlgo ? (
+            <>
-              <Button
+              {gate('reduced_onboarding_and_home_algo') && isPrimaryAlgo ? (
-                variant="solid"
+                <Button
-                color="secondary"
+                  variant="solid"
-                size="small"
+                  color="secondary"
-                label={_(
+                  size="small"
-                  msg`This feed is already set as your primary algorithm.`,
+                  label={_(
-                )}
+                    msg`This feed is already set as your primary algorithm.`,
-                onPress={() => {
-                  primaryAlgoDialogControl.open()
-                }}>
-                <ButtonIcon icon={Check} position="left" />
-                <ButtonText>Primary Algorithm</ButtonText>
-              </Button>
-            ) : (
-              <View style={[s.justifyCenter]}>
-                <Pressable
-                  testID={`feed-${feed.displayName}-toggleSave`}
-                  disabled={isSavePending || isPinPending || isRemovePending}
-                  accessibilityRole="button"
-                  accessibilityLabel={
-                    isSaved
-                      ? _(msg`Remove from my feeds`)
-                      : _(msg`Add to my feeds`)
-                  }
-                  accessibilityHint=""
-                  onPress={onToggleSaved}
-                  hitSlop={15}
-                  style={styles.btn}>
-                  {isSaved ? (
-                    <FontAwesomeIcon
-                      icon={['far', 'trash-can']}
-                      size={19}
-                      color={pal.colors.icon}
-                    />
-                  ) : (
-                    <FontAwesomeIcon
-                      icon="plus"
-                      size={18}
-                      color={pal.colors.link}
-                    />
                   )}
-                </Pressable>
+                  onPress={() => {
-              </View>
+                    primaryAlgoDialogControl.open()
-            ))}
+                  }}>
+                  <ButtonIcon icon={Check} position="left" />
+                  <ButtonText>
+                    <Trans>Primary Algorithm</Trans>
+                  </ButtonText>
+                </Button>
+              ) : (
+                <View style={[s.justifyCenter]}>
+                  <Pressable
+                    testID={`feed-${feed.displayName}-toggleSave`}
+                    disabled={isSavePending || isPinPending || isRemovePending}
+                    accessibilityRole="button"
+                    accessibilityLabel={
+                      isSaved
+                        ? _(msg`Remove from my feeds`)
+                        : _(msg`Add to my feeds`)
+                    }
+                    accessibilityHint=""
+                    onPress={onToggleSaved}
+                    hitSlop={15}
+                    style={styles.btn}>
+                    {isSaved ? (
+                      <FontAwesomeIcon
+                        icon={['far', 'trash-can']}
+                        size={19}
+                        color={pal.colors.icon}
+                      />
+                    ) : (
+                      <FontAwesomeIcon
+                        icon="plus"
+                        size={18}
+                        color={pal.colors.link}
+                      />
+                    )}
+                  </Pressable>
+                </View>
+              )}
+            </>
+          )}
         </View>
 
         {showDescription && feed.description ? (

src/view/screens/ProfileFeed.tsx

@@ -341,7 +341,9 @@ export function ProfileFeedScreenInner({
                       primaryAlgoDialogControl.open()
                     }}>
                     <ButtonIcon icon={Check} position="left" />
-                    <ButtonText>Primary Algorithm</ButtonText>
+                    <ButtonText>
+                      <Trans>Primary Algorithm</Trans>
+                    </ButtonText>
                   </NewButton>
                 ) : (
                   <NewButton

src/view/screens/SavedFeeds.tsx

@@ -7,6 +7,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {track} from '#/lib/analytics/analytics'
+import {useGate} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {
   usePinFeedMutation,
@@ -14,6 +15,7 @@ import {
   useSetSaveFeedsMutation,
   useUnpinFeedMutation,
 } from '#/state/queries/preferences'
+import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useAnalytics} from 'lib/analytics/analytics'
 import {useHaptics} from 'lib/haptics'
@@ -112,6 +114,7 @@ export function SavedFeeds({}: Props) {
                 setSavedFeeds={setSavedFeeds}
                 resetSaveFeedsMutationState={resetSaveFeedsMutationState}
                 currentFeeds={currentFeeds}
+                preferences={preferences}
               />
             ))
           )
@@ -145,6 +148,7 @@ export function SavedFeeds({}: Props) {
                 setSavedFeeds={setSavedFeeds}
                 resetSaveFeedsMutationState={resetSaveFeedsMutationState}
                 currentFeeds={currentFeeds}
+                preferences={preferences}
               />
             ))
           )
@@ -179,6 +183,7 @@ function ListItem({
   currentFeeds,
   setSavedFeeds,
   resetSaveFeedsMutationState,
+  preferences,
 }: {
   feedUri: string // uri
   isPinned: boolean
@@ -187,6 +192,7 @@ function ListItem({
   resetSaveFeedsMutationState: ReturnType<
     typeof useSetSaveFeedsMutation
   >['reset']
+  preferences: UsePreferencesQueryResponse
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
@@ -195,6 +201,13 @@ function ListItem({
   const {isPending: isUnpinPending, mutateAsync: unpinFeed} =
     useUnpinFeedMutation()
   const isPending = isPinPending || isUnpinPending
+  const gate = useGate()
+  const primaryAlgo = preferences.primaryAlgorithm
+  const isPrimaryAlgoExperimentEnabled = gate(
+    'reduced_onboarding_and_home_algo',
+  )
+  const isPrimaryAlgo = primaryAlgo?.enabled && primaryAlgo?.uri === feedUri
+  const showPinButton = !(isPrimaryAlgoExperimentEnabled && isPrimaryAlgo)
 
   const onTogglePinned = React.useCallback(async () => {
     playHaptic()
@@ -303,20 +316,24 @@ function ListItem({
         showSaveBtn
         showMinimalPlaceholder
       />
-      <Pressable
+      {showPinButton && (
-        disabled={isPending}
+        <View style={{paddingRight: 16}}>
-        accessibilityRole="button"
+          <Pressable
-        hitSlop={10}
+            disabled={isPending}
-        onPress={onTogglePinned}
+            accessibilityRole="button"
-        style={state => ({
+            hitSlop={10}
-          opacity: state.hovered || state.focused || isPending ? 0.5 : 1,
+            onPress={onTogglePinned}
-        })}>
+            style={state => ({
-        <FontAwesomeIcon
+              opacity: state.hovered || state.focused || isPending ? 0.5 : 1,
-          icon="thumb-tack"
+            })}>
-          size={20}
+            <FontAwesomeIcon
-          color={isPinned ? colors.blue3 : pal.colors.icon}
+              icon="thumb-tack"
-        />
+              size={20}
-      </Pressable>
+              color={isPinned ? colors.blue3 : pal.colors.icon}
+            />
+          </Pressable>
+        </View>
+      )}
     </Pressable>
   )
 }
@@ -345,7 +362,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     borderBottomWidth: 1,
-    paddingRight: 16,
   },
   webArrowButtonsContainer: {
     paddingLeft: 16,