fix routing on web

src/lib/routes/types.ts

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

src/view/com/algos/AlgoItem.tsx

@@ -18,6 +18,7 @@ import {NavigationProp} from 'lib/routes/types'
 import {useStores} from 'state/index'
 import {HeartIconSolid} from 'lib/icons'
 import {pluralize} from 'lib/strings/helpers'
+import {AtUri} from '@atproto/api'
 
 const AlgoItem = observer(
   ({
@@ -48,8 +49,11 @@ const AlgoItem = observer(
         style={[styles.container, style]}
         onPress={() => {
           navigation.navigate('CustomFeed', {
-            name: item.data.displayName,
+            name: item.data.creator.did,
-            rkey: item.data.uri,
+            rkey: new AtUri(item.data.uri).rkey,
+            displayName:
+              item.data.displayName ??
+              `${item.data.creator.displayName}'s feed`,
           })
         }}
         key={item.data.uri}>

src/view/com/posts/Feed.tsx

@@ -34,6 +34,7 @@ export const Feed = observer(function Feed({
   renderEmptyState,
   testID,
   headerOffset = 0,
+  ListHeaderComponent,
 }: {
   feed: PostsFeedModel
   style?: StyleProp<ViewStyle>
@@ -44,6 +45,7 @@ export const Feed = observer(function Feed({
   renderEmptyState?: () => JSX.Element
   testID?: string
   headerOffset?: number
+  ListHeaderComponent?: () => JSX.Element
 }) {
   const pal = usePalette('default')
   const {track} = useAnalytics()
@@ -163,6 +165,7 @@ export const Feed = observer(function Feed({
           keyExtractor={item => item._reactKey}
           renderItem={renderItem}
           ListFooterComponent={FeedFooter}
+          ListHeaderComponent={ListHeaderComponent}
           refreshControl={
             <RefreshControl
               refreshing={isRefreshing}

src/view/screens/CustomFeed.tsx

@@ -2,6 +2,7 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {usePalette} from 'lib/hooks/usePalette'
 import {HeartIcon, HeartIconSolid} from 'lib/icons'
 import {CommonNavigatorParams} from 'lib/routes/types'
+import {makeRecordUri} from 'lib/strings/url-helpers'
 import {colors, s} from 'lib/styles'
 import {observer} from 'mobx-react-lite'
 import React, {useMemo, useRef} from 'react'
@@ -21,34 +22,27 @@ type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
 export const CustomFeed = withAuthRequired(
   observer(({route}: Props) => {
     const rootStore = useStores()
-    const {rkey, name} = route.params
+    const {rkey, name, displayName} = route.params
     const currentFeed = useCustomFeed(rkey)
     const pal = usePalette('default')
-
     const scrollElRef = useRef<FlatList>(null)
-
     const algoFeed: PostsFeedModel = useMemo(() => {
+      const uri = makeRecordUri(name, 'app.bsky.feed.generator', rkey)
       const feed = new PostsFeedModel(rootStore, 'custom', {
-        feed: rkey,
+        feed: uri,
       })
       feed.setup()
       return feed
-    }, [rkey, rootStore])
+    }, [rkey, rootStore, name])
 
+    console.log(currentFeed?.data.creator)
+
+    const _ListHeaderComponent = () => {
       return (
-      <View style={[styles.container]}>
+        <View style={[styles.headerContainer]}>
-        <View>
-          <ViewHeader
-            title={name ?? `${currentFeed?.data.creator.displayName}'s feed`}
-            showOnDesktop
-          />
-          <View style={[styles.center]}>
           <View style={[styles.header]}>
             <View style={styles.avatarContainer}>
-                <UserAvatar
+              <UserAvatar size={28} avatar={currentFeed?.data.creator.avatar} />
-                  size={30}
-                  avatar={currentFeed?.data.creator.avatar}
-                />
               <Link href={`/profile/${currentFeed?.data.creator.handle}`}>
                 <Text style={[pal.textLight]}>
                   @{currentFeed?.data.creator.handle}
@@ -93,7 +87,17 @@ export const CustomFeed = withAuthRequired(
             </TouchableOpacity>
           </View>
         </View>
-        </View>
+      )
+    }
+
+    return (
+      <View style={[styles.container]}>
+        <ViewHeader
+          title={
+            displayName ?? `${currentFeed?.data.creator.displayName}'s feed`
+          }
+          showOnDesktop
+        />
 
         <Feed
           scrollElRef={scrollElRef}
@@ -101,6 +105,7 @@ export const CustomFeed = withAuthRequired(
           key="default"
           feed={algoFeed}
           headerOffset={12}
+          ListHeaderComponent={_ListHeaderComponent}
         />
       </View>
     )
@@ -110,12 +115,16 @@ export const CustomFeed = withAuthRequired(
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingBottom: 12,
   },
-  center: {alignItems: 'center', justifyContent: 'center', gap: 8},
+  headerContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    marginBottom: 12,
+  },
   header: {
     alignItems: 'center',
-    gap: 8,
+    gap: 4,
   },
   avatarContainer: {
     flexDirection: 'row',

src/view/screens/SavedFeeds.tsx

@@ -25,6 +25,7 @@ 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'
+import {AtUri} from '@atproto/api'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
 
@@ -137,8 +138,11 @@ const ListHeaderComponent = observer(
                     accessibilityRole="button"
                     onPress={() => {
                       navigation.navigate('CustomFeed', {
-                        rkey: item.data.uri,
+                        name: item.data.creator.did,
-                        name: item.data.displayName,
+                        rkey: new AtUri(item.data.uri).rkey,
+                        displayName:
+                          item.data.displayName ??
+                          `${item.data.creator.displayName}'s feed`,
                       })
                     }}
                     style={styles.pinnedItem}>