fix routing on web

5 files changed, 87 insertions, 67 deletions

diff --git a/src/lib/routes/types.ts b/src/lib/routes/types.ts
index 12ff27070..b1dcbb999 100644
--- a/src/lib/routes/types.ts
+++ b/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
 }
diff --git a/src/view/com/algos/AlgoItem.tsx b/src/view/com/algos/AlgoItem.tsx
index b28545c17..f2c36d7e9 100644
--- a/src/view/com/algos/AlgoItem.tsx
+++ b/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,
-            rkey: item.data.uri,
+            name: item.data.creator.did,
+            rkey: new AtUri(item.data.uri).rkey,
+            displayName:
+              item.data.displayName ??
+              `${item.data.creator.displayName}'s feed`,
           })
         }}
         key={item.data.uri}>
diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
index 998cfe0c9..443cf70bd 100644
--- a/src/view/com/posts/Feed.tsx
+++ b/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}
diff --git a/src/view/screens/CustomFeed.tsx b/src/view/screens/CustomFeed.tsx
index 615a63261..016f3400c 100644
--- a/src/view/screens/CustomFeed.tsx
+++ b/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,79 +22,82 @@ 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])
-
-    return (
-      <View style={[styles.container]}>
-        <View>
-          <ViewHeader
-            title={name ?? `${currentFeed?.data.creator.displayName}'s feed`}
-            showOnDesktop
-          />
-          <View style={[styles.center]}>
-            <View style={[styles.header]}>
-              <View style={styles.avatarContainer}>
-                <UserAvatar
-                  size={30}
-                  avatar={currentFeed?.data.creator.avatar}
-                />
-                <Link href={`/profile/${currentFeed?.data.creator.handle}`}>
-                  <Text style={[pal.textLight]}>
-                    @{currentFeed?.data.creator.handle}
-                  </Text>
-                </Link>
-              </View>
-              <Text style={[pal.text]}>{currentFeed?.data.description}</Text>
-            </View>
+    }, [rkey, rootStore, name])
 
-            <View style={[styles.buttonsContainer]}>
-              <Button
-                type={currentFeed?.isSaved ? 'default' : 'inverted'}
-                style={[styles.saveButton]}
-                onPress={() => {
-                  if (currentFeed?.data.viewer?.saved) {
-                    rootStore.me.savedFeeds.unsave(currentFeed!)
-                  } else {
-                    rootStore.me.savedFeeds.save(currentFeed!)
-                  }
-                }}
-                label={currentFeed?.data.viewer?.saved ? 'Unsave' : 'Save'}
-              />
+    console.log(currentFeed?.data.creator)
 
-              <TouchableOpacity
-                accessibilityRole="button"
-                onPress={() => {
-                  if (currentFeed?.isLiked) {
-                    currentFeed?.unlike()
-                  } else {
-                    currentFeed?.like()
-                  }
-                }}
-                style={[styles.likeButton, pal.viewLight]}>
-                <Text style={[pal.text, s.semiBold]}>
-                  {currentFeed?.data.likeCount}
+    const _ListHeaderComponent = () => {
+      return (
+        <View style={[styles.headerContainer]}>
+          <View style={[styles.header]}>
+            <View style={styles.avatarContainer}>
+              <UserAvatar size={28} avatar={currentFeed?.data.creator.avatar} />
+              <Link href={`/profile/${currentFeed?.data.creator.handle}`}>
+                <Text style={[pal.textLight]}>
+                  @{currentFeed?.data.creator.handle}
                 </Text>
-                {currentFeed?.isLiked ? (
-                  <HeartIconSolid size={18} style={styles.liked} />
-                ) : (
-                  <HeartIcon strokeWidth={3} size={18} style={styles.liked} />
-                )}
-              </TouchableOpacity>
+              </Link>
             </View>
+            <Text style={[pal.text]}>{currentFeed?.data.description}</Text>
+          </View>
+
+          <View style={[styles.buttonsContainer]}>
+            <Button
+              type={currentFeed?.isSaved ? 'default' : 'inverted'}
+              style={[styles.saveButton]}
+              onPress={() => {
+                if (currentFeed?.data.viewer?.saved) {
+                  rootStore.me.savedFeeds.unsave(currentFeed!)
+                } else {
+                  rootStore.me.savedFeeds.save(currentFeed!)
+                }
+              }}
+              label={currentFeed?.data.viewer?.saved ? 'Unsave' : 'Save'}
+            />
+
+            <TouchableOpacity
+              accessibilityRole="button"
+              onPress={() => {
+                if (currentFeed?.isLiked) {
+                  currentFeed?.unlike()
+                } else {
+                  currentFeed?.like()
+                }
+              }}
+              style={[styles.likeButton, pal.viewLight]}>
+              <Text style={[pal.text, s.semiBold]}>
+                {currentFeed?.data.likeCount}
+              </Text>
+              {currentFeed?.isLiked ? (
+                <HeartIconSolid size={18} style={styles.liked} />
+              ) : (
+                <HeartIcon strokeWidth={3} size={18} style={styles.liked} />
+              )}
+            </TouchableOpacity>
           </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},
-  header: {
+  headerContainer: {
     alignItems: 'center',
+    justifyContent: 'center',
     gap: 8,
+    marginBottom: 12,
+  },
+  header: {
+    alignItems: 'center',
+    gap: 4,
   },
   avatarContainer: {
     flexDirection: 'row',
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index 827a4a256..c3a4542c6 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/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.displayName,
+                        name: item.data.creator.did,
+                        rkey: new AtUri(item.data.uri).rkey,
+                        displayName:
+                          item.data.displayName ??
+                          `${item.data.creator.displayName}'s feed`,
                       })
                     }}
                     style={styles.pinnedItem}>