allow changing pinned feed order on web

src/view/com/algos/AlgoItem.tsx

@@ -19,6 +19,7 @@ import {useStores} from 'state/index'
 import {HeartIconSolid} from 'lib/icons'
 import {pluralize} from 'lib/strings/helpers'
 import {AtUri} from '@atproto/api'
+import {isWeb} from 'platform/detection'
 
 const AlgoItem = observer(
   ({
@@ -37,8 +38,9 @@ const AlgoItem = observer(
     const navigation = useNavigation<NavigationProp>()
 
     // TODO: this is pretty hacky, but it works for now
+    // causes issues on web
     useFocusEffect(() => {
-      if (reloadOnFocus) {
+      if (reloadOnFocus && !isWeb) {
         item.reload()
       }
     })

src/view/com/pager/FeedsTabBar.web.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {Animated, StyleSheet} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {TabBar} from 'view/com/pager/TabBar'
@@ -27,6 +27,14 @@ const FeedsTabBarDesktop = observer(
     props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
   ) => {
     const store = useStores()
+    const items = useMemo(
+      () => [
+        'Following',
+        "What's hot",
+        ...store.me.savedFeeds.listOfPinnedFeedNames,
+      ],
+      [store.me.savedFeeds.listOfPinnedFeedNames],
+    )
     const pal = usePalette('default')
     const interp = useAnimatedValue(0)
 
@@ -44,12 +52,13 @@ const FeedsTabBarDesktop = observer(
         {translateY: Animated.multiply(interp, -100)},
       ],
     }
+
     return (
       // @ts-ignore the type signature for transform wrong here, translateX and translateY need to be in separate objects -prf
       <Animated.View style={[pal.view, styles.tabBar, transform]}>
         <TabBar
           {...props}
-          items={['Following', "What's hot"]}
+          items={items}
           indicatorPosition="bottom"
           indicatorColor={pal.colors.link}
         />