Unify the display name fallback behavior

src/state/models/feeds/custom-feed.ts

@@ -1,6 +1,7 @@
 import {AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {makeAutoObservable} from 'mobx'
 import {RootStoreModel} from 'state/models/root-store'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
 
 export class CustomFeedModel {
   // data
@@ -34,6 +35,13 @@ export class CustomFeedModel {
     return this.data.uri
   }
 
+  get displayName() {
+    if (this.data.displayName) {
+      return sanitizeDisplayName(this.data.displayName)
+    }
+    return `Feed by @${this.data.creator.handle}`
+  }
+
   get isSaved() {
     return this.data.viewer?.saved
   }

src/state/models/ui/saved-feeds.ts

@@ -66,15 +66,11 @@ export class SavedFeedsModel {
   }
 
   get listOfFeedNames() {
-    return this.feeds.map(
+    return this.feeds.map(f => f.displayName)
-      f => f.data.displayName ?? f.data.creator.displayName + "'s feed",
-    )
   }
 
   get listOfPinnedFeedNames() {
-    return this.pinned.map(
+    return this.pinned.map(f => f.displayName)
-      f => f.data.displayName ?? f.data.creator.displayName + "'s feed",
-    )
   }
 
   get savedFeedsWithoutPinned() {

src/view/com/feeds/CustomFeed.tsx

@@ -54,9 +54,7 @@ export const CustomFeed = observer(
           navigation.navigate('CustomFeed', {
             name: item.data.creator.did,
             rkey: new AtUri(item.data.uri).rkey,
-            displayName:
+            displayName: item.displayName,
-              item.data.displayName ??
-              `${item.data.creator.displayName}'s feed`,
           })
         }}
         key={item.data.uri}>
@@ -65,8 +63,11 @@ export const CustomFeed = observer(
             <UserAvatar type="algo" size={36} avatar={item.data.avatar} />
           </View>
           <View style={[styles.headerTextContainer]}>
-            <Text style={[pal.text, s.bold]}>
+            <Text style={[pal.text, s.bold]} numberOfLines={3}>
-              {item.data.displayName ?? 'Feed name'}
+              {item.displayName}
+            </Text>
+            <Text style={[pal.textLight]} numberOfLines={3}>
+              by @{item.data.creator.handle}
             </Text>
           </View>
           {showSaveBtn && (