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>
This commit is contained in:
parent
3118e3e933
commit
ea885339cf
57 changed files with 1884 additions and 1497 deletions
|
@ -8,6 +8,7 @@ import {
|
|||
FontAwesomeIconStyle,
|
||||
} from '@fortawesome/react-native-fontawesome'
|
||||
import {PostsFeedItemModel} from 'state/models/feeds/post'
|
||||
import {FeedSourceInfo} from 'lib/api/feed/types'
|
||||
import {Link, DesktopWebTextLink} from '../util/Link'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {UserInfoText} from '../util/UserInfoText'
|
||||
|
@ -26,17 +27,19 @@ import {usePalette} from 'lib/hooks/usePalette'
|
|||
import {useAnalytics} from 'lib/analytics/analytics'
|
||||
import {sanitizeDisplayName} from 'lib/strings/display-names'
|
||||
import {sanitizeHandle} from 'lib/strings/handles'
|
||||
import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers'
|
||||
import {getTranslatorLink} from '../../../locale/helpers'
|
||||
import {makeProfileLink} from 'lib/routes/links'
|
||||
import {isEmbedByEmbedder} from 'lib/embeds'
|
||||
|
||||
export const FeedItem = observer(function FeedItemImpl({
|
||||
item,
|
||||
source,
|
||||
isThreadChild,
|
||||
isThreadLastChild,
|
||||
isThreadParent,
|
||||
}: {
|
||||
item: PostsFeedItemModel
|
||||
source?: FeedSourceInfo
|
||||
isThreadChild?: boolean
|
||||
isThreadLastChild?: boolean
|
||||
isThreadParent?: boolean
|
||||
|
@ -62,12 +65,6 @@ export const FeedItem = observer(function FeedItemImpl({
|
|||
return urip.hostname
|
||||
}, [record?.reply])
|
||||
const translatorUrl = getTranslatorLink(record?.text || '')
|
||||
const needsTranslation = useMemo(
|
||||
() =>
|
||||
store.preferences.contentLanguages.length > 0 &&
|
||||
!isPostInLanguage(item.post, store.preferences.contentLanguages),
|
||||
[item.post, store.preferences.contentLanguages],
|
||||
)
|
||||
|
||||
const onPressReply = React.useCallback(() => {
|
||||
track('FeedItem:PostReply')
|
||||
|
@ -179,7 +176,27 @@ export const FeedItem = observer(function FeedItemImpl({
|
|||
</View>
|
||||
|
||||
<View style={{paddingTop: 12}}>
|
||||
{item.reasonRepost && (
|
||||
{source ? (
|
||||
<Link
|
||||
title={sanitizeDisplayName(source.displayName)}
|
||||
href={source.uri}>
|
||||
<Text
|
||||
type="sm-bold"
|
||||
style={pal.textLight}
|
||||
lineHeight={1.2}
|
||||
numberOfLines={1}>
|
||||
From{' '}
|
||||
<DesktopWebTextLink
|
||||
type="sm-bold"
|
||||
style={pal.textLight}
|
||||
lineHeight={1.2}
|
||||
numberOfLines={1}
|
||||
text={sanitizeDisplayName(source.displayName)}
|
||||
href={source.uri}
|
||||
/>
|
||||
</Text>
|
||||
</Link>
|
||||
) : item.reasonRepost ? (
|
||||
<Link
|
||||
style={styles.includeReason}
|
||||
href={makeProfileLink(item.reasonRepost.by)}
|
||||
|
@ -188,10 +205,10 @@ export const FeedItem = observer(function FeedItemImpl({
|
|||
)}>
|
||||
<FontAwesomeIcon
|
||||
icon="retweet"
|
||||
style={[
|
||||
styles.includeReasonIcon,
|
||||
{color: pal.colors.textLight} as FontAwesomeIconStyle,
|
||||
]}
|
||||
style={{
|
||||
marginRight: 4,
|
||||
color: pal.colors.textLight,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
type="sm-bold"
|
||||
|
@ -212,7 +229,7 @@ export const FeedItem = observer(function FeedItemImpl({
|
|||
/>
|
||||
</Text>
|
||||
</Link>
|
||||
)}
|
||||
) : null}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
@ -304,15 +321,6 @@ export const FeedItem = observer(function FeedItemImpl({
|
|||
/>
|
||||
</ContentHider>
|
||||
) : null}
|
||||
{needsTranslation && (
|
||||
<View style={[pal.borderDark, styles.translateLink]}>
|
||||
<Link href={translatorUrl} title="Translate">
|
||||
<Text type="sm" style={pal.link}>
|
||||
Translate this post
|
||||
</Text>
|
||||
</Link>
|
||||
</View>
|
||||
)}
|
||||
</ContentHider>
|
||||
<PostCtrls
|
||||
itemUri={itemUri}
|
||||
|
@ -362,12 +370,9 @@ const styles = StyleSheet.create({
|
|||
includeReason: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 2,
|
||||
marginBottom: 4,
|
||||
marginBottom: 2,
|
||||
marginLeft: -20,
|
||||
},
|
||||
includeReasonIcon: {
|
||||
marginRight: 4,
|
||||
},
|
||||
layout: {
|
||||
flexDirection: 'row',
|
||||
marginTop: 1,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue