Lists updates: curate lists and blocklists (#1689)
* Add lists screen * Update Lists screen and List create/edit modal to support curate lists * Rework the ProfileList screen and add curatelist support * More ProfileList progress * Update list modals * Rename mutelists to modlists * Layout updates/fixes * More layout fixes * Modal fixes * List list screen updates * Update feed page to give more info * Layout fixes to ListAddUser modal * Layout fixes to FlatList and Feed on desktop * Layout fix to LoadLatestBtn on Web * Handle did resolution before showing the ProfileList screen * Rename the CustomFeed routes to ProfileFeed for consistency * Fix layout issues with the pager and feeds * Factor out some common code * Fix UIs for mobile * Fix user list rendering * Fix: dont bubble custom feed errors in the merge feed * Refactor feed models to reduce usage of the SavedFeeds model * Replace CustomFeedModel with FeedSourceModel which abstracts feed-generators and lists * Add the ability to pin lists * Add pinned lists to mobile * Remove dead code * Rework the ProfileScreenHeader to create more real-estate for action buttons * Improve layout behavior on web mobile breakpoints * Refactor feed & list pages to use new Tabs layout component * Refactor to ProfileSubpageHeader * Implement modlist block and mute * Switch to new api and just modify state on modlist actions * Fix some UI overflows * Fix: dont show edit buttons on lists you dont own * Fix alignment issue on long titles * Improve loading and error states for feeds & lists * Update list dropdown icons for ios * Fetch feed display names in the mergefeed * Improve rendering off offline feeds in the feed-listing page * Update Feeds listing UI to react to changes in saved/pinned state * Refresh list and feed on posts tab press * Fix pinned feed ordering UI * Fixes to list pinning * Remove view=simple qp * Add list to feed tuners * Render richtext * Add list href * Add 'view avatar' * Remove unused import * Fix missing import * Correctly reflect block by list state * Replace the <Tabs> component with the more effective <PagerWithHeader> component * Improve the responsiveness of the PagerWithHeader * Fix visual jank in the feed loading state * Improve performance of the PagerWithHeader * Fix a case that would cause the header to animate too aggressively * Add the ability to scroll to top by tapping the selected tab * Fix unit test runner * Update modlists test * Add curatelist tests * Fix: remove link behavior in ListAddUser modal * Fix some layout jank in the PagerWithHeader on iOS * Simplify ListItems header rendering * Wait for the appview to recognize the list before proceeding with list creation * Fix glitch in the onPageSelecting index of the Pager * Fix until() * Copy fix Co-authored-by: Eric Bailey <git@esb.lol> --------- Co-authored-by: Eric Bailey <git@esb.lol>
This commit is contained in:
parent
f9944b55e2
commit
f57a8cf8ba
87 changed files with 4090 additions and 1988 deletions
|
@ -29,6 +29,7 @@ import {
|
|||
MagnifyingGlassIcon2Solid,
|
||||
UserIconSolid,
|
||||
HashtagIcon,
|
||||
ListIcon,
|
||||
HandIcon,
|
||||
} from 'lib/icons'
|
||||
import {UserAvatar} from 'view/com/util/UserAvatar'
|
||||
|
@ -106,6 +107,12 @@ export const DrawerContent = observer(function DrawerContentImpl() {
|
|||
[onPressTab],
|
||||
)
|
||||
|
||||
const onPressLists = React.useCallback(() => {
|
||||
track('Menu:ItemClicked', {url: 'Lists'})
|
||||
navigation.navigate('Lists')
|
||||
store.shell.closeDrawer()
|
||||
}, [navigation, track, store.shell])
|
||||
|
||||
const onPressModeration = React.useCallback(() => {
|
||||
track('Menu:ItemClicked', {url: 'Moderation'})
|
||||
navigation.navigate('Moderation')
|
||||
|
@ -276,6 +283,13 @@ export const DrawerContent = observer(function DrawerContentImpl() {
|
|||
bold={isAtFeeds}
|
||||
onPress={onPressMyFeeds}
|
||||
/>
|
||||
<MenuItem
|
||||
icon={<ListIcon strokeWidth={2} style={pal.text} size={26} />}
|
||||
label="Lists"
|
||||
accessibilityLabel="Lists"
|
||||
accessibilityHint=""
|
||||
onPress={onPressLists}
|
||||
/>
|
||||
<MenuItem
|
||||
icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
|
||||
label="Moderation"
|
||||
|
|
|
@ -1,16 +1,17 @@
|
|||
import React from 'react'
|
||||
import {View, StyleSheet} from 'react-native'
|
||||
import {useNavigationState} from '@react-navigation/native'
|
||||
import {AtUri} from '@atproto/api'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {useStores} from 'state/index'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {useDesktopRightNavItems} from 'lib/hooks/useDesktopRightNavItems'
|
||||
import {TextLink} from 'view/com/util/Link'
|
||||
import {getCurrentRoute} from 'lib/routes/helpers'
|
||||
|
||||
export const DesktopFeeds = observer(function DesktopFeeds() {
|
||||
const store = useStores()
|
||||
const pal = usePalette('default')
|
||||
const items = useDesktopRightNavItems(store.preferences.pinnedFeeds)
|
||||
|
||||
const route = useNavigationState(state => {
|
||||
if (!state) {
|
||||
|
@ -22,20 +23,22 @@ export const DesktopFeeds = observer(function DesktopFeeds() {
|
|||
return (
|
||||
<View style={[styles.container, pal.view, pal.border]}>
|
||||
<FeedItem href="/" title="Following" current={route.name === 'Home'} />
|
||||
{store.me.savedFeeds.pinned.map(feed => {
|
||||
{items.map(item => {
|
||||
try {
|
||||
const {hostname, rkey} = new AtUri(feed.uri)
|
||||
const href = `/profile/${hostname}/feed/${rkey}`
|
||||
const params = route.params as Record<string, string>
|
||||
const routeName =
|
||||
item.collection === 'app.bsky.feed.generator'
|
||||
? 'ProfileFeed'
|
||||
: 'ProfileList'
|
||||
return (
|
||||
<FeedItem
|
||||
key={feed.uri}
|
||||
href={href}
|
||||
title={feed.displayName}
|
||||
key={item.uri}
|
||||
href={item.href}
|
||||
title={item.displayName}
|
||||
current={
|
||||
route.name === 'CustomFeed' &&
|
||||
params.name === hostname &&
|
||||
params.rkey === rkey
|
||||
route.name === routeName &&
|
||||
params.name === item.hostname &&
|
||||
params.rkey === item.rkey
|
||||
}
|
||||
/>
|
||||
)
|
||||
|
|
|
@ -31,8 +31,9 @@ import {
|
|||
CogIcon,
|
||||
CogIconSolid,
|
||||
ComposeIcon2,
|
||||
HandIcon,
|
||||
ListIcon,
|
||||
HashtagIcon,
|
||||
HandIcon,
|
||||
} from 'lib/icons'
|
||||
import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
|
||||
import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types'
|
||||
|
@ -319,13 +320,31 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
|
|||
}
|
||||
label="Notifications"
|
||||
/>
|
||||
<NavItem
|
||||
href="/lists"
|
||||
icon={
|
||||
<ListIcon
|
||||
style={pal.text}
|
||||
size={isDesktop ? 26 : 30}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
}
|
||||
iconFilled={
|
||||
<ListIcon
|
||||
style={pal.text}
|
||||
size={isDesktop ? 26 : 30}
|
||||
strokeWidth={3}
|
||||
/>
|
||||
}
|
||||
label="Lists"
|
||||
/>
|
||||
<NavItem
|
||||
href="/moderation"
|
||||
icon={
|
||||
<HandIcon
|
||||
strokeWidth={5.5}
|
||||
style={pal.text}
|
||||
size={isDesktop ? 24 : 27}
|
||||
strokeWidth={5.5}
|
||||
/>
|
||||
}
|
||||
iconFilled={
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue