Feed UI update working branch [WIP] (#1420)

* Feeds navigation on right side of desktop (#1403)

* Remove home feed header on desktop

* Add feeds to right sidebar

* Add simple non-moving header to desktop

* Improve loading state of custom feed header

* Remove log

Co-authored-by: Eric Bailey <git@esb.lol>

* Remove dead comment

---------

Co-authored-by: Eric Bailey <git@esb.lol>

* Redesign feeds tab (#1439)

* consolidate saved feeds and discover into one screen

* Add hoverStyle behavior to <Link>

* More UI work on SavedFeeds

* Replace satellite icon with a hashtag

* Tune My Feeds mobile ui

* Handle no results in my feeds

* Remove old DiscoverFeeds screen

* Remove multifeed

* Remove DiscoverFeeds from router

* Improve loading placeholders

* Small fixes

* Fix types

* Fix overflow issue on firefox

* Add icons prompting to open feeds

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

* Merge feed prototype [WIP] (#1398)

* POC WIP for the mergefeed

* Add feed API wrapper and move mergefeed into it

* Show feed source in mergefeed

* Add lodash.random dep

* Improve mergefeed sampling and reliability

* Tune source ui element

* Improve mergefeed edge condition handling

* Remove in-place update of feeds for performance

* Fix link on native

* Fix bad ref

* Improve variety in mergefeed sampling

* Fix types

* Fix rebase error

* Add missing source field (got dropped in merge)

* Update find more link

* Simplify the right hand feeds nav

* Bring back load latest button on desktop & unify impl

* Add 'From' to source

* Add simple headers to desktop home & notifications

* Fix thread view jumping around horizontally

* Add unread indicators to desktop headers

* Add home feed preference for enabling the mergefeed

* Add a preference for showing replies among followed users only (#1448)

* Add a preference for showing replies among followed users only

* Simplify the reply filter UI

* Fix typo

* Simplified custom feed header

* Add soft reset to custom feed screen

* Drop all the in-post translate links except when expanded (#1455)

* Update mobile feed settings links to match desktop

* Fixes to feeds screen loading states

* Bolder active state of feeds tab on mobile web

* Fix dark mode issue

---------

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Ansh <anshnanda10@gmail.com>

1 files changed, 0 insertions, 256 deletions

diff --git a/src/view/com/posts/MultiFeed.tsx b/src/view/com/posts/MultiFeed.tsx
deleted file mode 100644
index 9c8f4f246..000000000
--- a/src/view/com/posts/MultiFeed.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, {MutableRefObject} from 'react'
-import {observer} from 'mobx-react-lite'
-import {
-  ActivityIndicator,
-  RefreshControl,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {FlatList} from '../util/Views'
-import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {PostsMultiFeedModel, MultiFeedItem} from 'state/models/feeds/multi-feed'
-import {FeedSlice} from './FeedSlice'
-import {Text} from '../util/text/Text'
-import {Link} from '../util/Link'
-import {UserAvatar} from '../util/UserAvatar'
-import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
-import {s} from 'lib/styles'
-import {useAnalytics} from 'lib/analytics/analytics'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useTheme} from 'lib/ThemeContext'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {CogIcon} from 'lib/icons'
-
-export const MultiFeed = observer(function Feed({
-  multifeed,
-  style,
-  scrollElRef,
-  onScroll,
-  scrollEventThrottle,
-  testID,
-  headerOffset = 0,
-  extraData,
-}: {
-  multifeed: PostsMultiFeedModel
-  style?: StyleProp<ViewStyle>
-  scrollElRef?: MutableRefObject<FlatList<any> | null>
-  onPressTryAgain?: () => void
-  onScroll?: OnScrollCb
-  scrollEventThrottle?: number
-  renderEmptyState?: () => JSX.Element
-  testID?: string
-  headerOffset?: number
-  extraData?: any
-}) {
-  const pal = usePalette('default')
-  const theme = useTheme()
-  const {isMobile} = useWebMediaQueries()
-  const {track} = useAnalytics()
-  const [isRefreshing, setIsRefreshing] = React.useState(false)
-
-  // events
-  // =
-
-  const onRefresh = React.useCallback(async () => {
-    track('MultiFeed:onRefresh')
-    setIsRefreshing(true)
-    try {
-      await multifeed.refresh()
-    } catch (err) {
-      multifeed.rootStore.log.error('Failed to refresh posts feed', err)
-    }
-    setIsRefreshing(false)
-  }, [multifeed, track, setIsRefreshing])
-
-  const onEndReached = React.useCallback(async () => {
-    track('MultiFeed:onEndReached')
-    try {
-      await multifeed.loadMore()
-    } catch (err) {
-      multifeed.rootStore.log.error('Failed to load more posts', err)
-    }
-  }, [multifeed, track])
-
-  // rendering
-  // =
-
-  const renderItem = React.useCallback(
-    ({item}: {item: MultiFeedItem}) => {
-      if (item.type === 'header') {
-        if (!isMobile) {
-          return (
-            <>
-              <View style={[pal.view, pal.border, styles.headerDesktop]}>
-                <Text type="2xl-bold" style={pal.text}>
-                  My Feeds
-                </Text>
-                <Link href="/settings/saved-feeds">
-                  <CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
-                </Link>
-              </View>
-              <DiscoverLink />
-            </>
-          )
-        }
-        return (
-          <>
-            <View style={[styles.header, pal.border]} />
-            <DiscoverLink />
-          </>
-        )
-      } else if (item.type === 'feed-header') {
-        return (
-          <View style={styles.feedHeader}>
-            <UserAvatar type="algo" avatar={item.avatar} size={28} />
-            <Text type="title-lg" style={[pal.text, styles.feedHeaderTitle]}>
-              {item.title}
-            </Text>
-          </View>
-        )
-      } else if (item.type === 'feed-slice') {
-        return <FeedSlice slice={item.slice} />
-      } else if (item.type === 'feed-loading') {
-        return <PostFeedLoadingPlaceholder />
-      } else if (item.type === 'feed-error') {
-        return <ErrorMessage message={item.error} />
-      } else if (item.type === 'feed-footer') {
-        return (
-          <Link
-            href={item.uri}
-            style={[styles.feedFooter, pal.border, pal.view]}>
-            <Text type="lg" style={pal.link}>
-              See more from {item.title}
-            </Text>
-            <FontAwesomeIcon
-              icon="angle-right"
-              size={18}
-              color={pal.colors.link}
-            />
-          </Link>
-        )
-      } else if (item.type === 'footer') {
-        return <DiscoverLink />
-      }
-      return null
-    },
-    [pal, isMobile],
-  )
-
-  const ListFooter = React.useCallback(
-    () =>
-      multifeed.isLoading && !isRefreshing ? (
-        <View style={styles.loadMore}>
-          <ActivityIndicator color={pal.colors.text} />
-        </View>
-      ) : (
-        <View />
-      ),
-    [multifeed.isLoading, isRefreshing, pal],
-  )
-
-  return (
-    <View testID={testID} style={style}>
-      {multifeed.items.length > 0 && (
-        <FlatList
-          testID={testID ? `${testID}-flatlist` : undefined}
-          ref={scrollElRef}
-          data={multifeed.items}
-          keyExtractor={item => item._reactKey}
-          renderItem={renderItem}
-          ListFooterComponent={ListFooter}
-          refreshControl={
-            <RefreshControl
-              refreshing={isRefreshing}
-              onRefresh={onRefresh}
-              tintColor={pal.colors.text}
-              titleColor={pal.colors.text}
-              progressViewOffset={headerOffset}
-            />
-          }
-          contentContainerStyle={s.contentContainer}
-          style={[{paddingTop: headerOffset}, pal.view, styles.container]}
-          onScroll={onScroll}
-          scrollEventThrottle={scrollEventThrottle}
-          indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
-          onEndReached={onEndReached}
-          onEndReachedThreshold={0.6}
-          removeClippedSubviews={true}
-          contentOffset={{x: 0, y: headerOffset * -1}}
-          extraData={extraData}
-          // @ts-ignore our .web version only -prf
-          desktopFixedHeight
-        />
-      )}
-    </View>
-  )
-})
-
-function DiscoverLink() {
-  const pal = usePalette('default')
-  return (
-    <Link style={[styles.discoverLink, pal.viewLight]} href="/search/feeds">
-      <FontAwesomeIcon icon="search" size={18} color={pal.colors.text} />
-      <Text type="xl-medium" style={pal.text}>
-        Discover new feeds
-      </Text>
-    </Link>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: '100%',
-  },
-  header: {
-    borderTopWidth: 1,
-    marginBottom: 4,
-  },
-  headerDesktop: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderBottomWidth: 1,
-    marginBottom: 4,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-  },
-  feedHeader: {
-    flexDirection: 'row',
-    gap: 8,
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingBottom: 8,
-    marginTop: 12,
-  },
-  feedHeaderTitle: {
-    fontWeight: 'bold',
-  },
-  feedFooter: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    marginBottom: 12,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-  },
-  discoverLink: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 8,
-    paddingHorizontal: 14,
-    paddingVertical: 12,
-    marginHorizontal: 8,
-    marginVertical: 8,
-    gap: 8,
-  },
-  loadMore: {
-    paddingTop: 10,
-  },
-})