diff --git a/src/components/dialogs/MyFeeds.tsx b/src/components/dialogs/MyFeeds.tsx new file mode 100644 index 0000000000..893f9dea26 --- /dev/null +++ b/src/components/dialogs/MyFeeds.tsx @@ -0,0 +1,131 @@ +import React, {useCallback} from 'react' +import {View} from 'react-native' +import {AtUri} from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' + +import {cleanError} from '#/lib/strings/errors' +import {useFeedSourceInfoQuery} from '#/state/queries/feed' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {NavigationProp} from 'lib/routes/types' +import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {atoms as a, useTheme} from '#/alf' +import * as Dialog from '#/components/Dialog' +import {router} from '#/routes' +import {Button} from '../Button' +import {Text} from '../Typography' + +export function MyFeedsDialog({control}: {control: Dialog.DialogControlProps}) { + const {_} = useLingui() + const t = useTheme() + const {data: preferences} = usePreferencesQuery() + const navigation = useNavigation() + + const onPressFeed = useCallback( + (uri: string) => { + control.close() + + const urip = new AtUri(uri) + const collection = + urip.collection === 'app.bsky.feed.generator' ? 'feed' : 'lists' + const href = `/profile/${urip.hostname}/${collection}/${urip.rkey}` + const route = router.matchPath(href) + // @ts-ignore This is correct -prf + navigation.navigate(route[0], route[1]) + }, + [control, navigation], + ) + const onPressEditFeeds = useCallback(() => { + control.close() + navigation.navigate('SavedFeeds') + }, [control, navigation]) + + let feeds: string[] = [] + if (preferences && preferences?.feeds?.saved.length !== 0) { + const {saved, pinned} = preferences.feeds + feeds = feeds.concat(pinned) + feeds = feeds.concat(saved.filter(uri => !pinned.includes(uri))) + } + + return ( + + + + + {feeds.map(feedUri => ( + + ))} + + + + ) +} + +function SavedFeed({ + feedUri, + onPress, +}: { + feedUri: string + onPress: (uri: string) => void +}) { + const t = useTheme() + const {data: info, error} = useFeedSourceInfoQuery({uri: feedUri}) + + if (!info && !error) { + return + } + + return ( + + ) +} + +function SavedFeedLoadingPlaceholder() { + const t = useTheme() + return ( + + + + ) +} diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index ff8acd60cc..26722d2c74 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -1,11 +1,16 @@ -import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react' -import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native' -import {Text} from '../util/text/Text' -import {PressableWithHover} from '../util/PressableWithHover' +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' +import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native' + +import {isNative} from '#/platform/detection' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useDialogControl} from '#/components/Dialog' +import {MyFeedsDialog} from '#/components/dialogs/MyFeeds' +// import {ArrowTriangleBottom_Stroke2_Corner1_Rounded as ArrowTriangleBottom} from '#/components/icons/ArrowTriangle' +import {ChevronBottom_Stroke2_Corner0_Rounded as ArrowTriangleBottom} from '#/components/icons/Chevron' +import {PressableWithHover} from '../util/PressableWithHover' +import {Text} from '../util/text/Text' import {DraggableScrollView} from './DraggableScrollView' -import {isNative} from '#/platform/detection' export interface TabBarProps { testID?: string @@ -36,6 +41,7 @@ export function TabBar({ () => ({borderBottomColor: indicatorColor || pal.colors.link}), [indicatorColor, pal], ) + const myFeedsControl = useDialogControl() const {isDesktop, isTablet} = useWebMediaQueries() const styles = isDesktop || isTablet ? desktopStyles : mobileStyles @@ -147,6 +153,14 @@ export function TabBar({ ) })} + myFeedsControl.open()}> + + + ) @@ -178,6 +192,10 @@ const desktopStyles = StyleSheet.create({ bottom: -1, borderBottomWidth: 1, }, + dropdownBtn: { + paddingTop: 14, + paddingHorizontal: 14, + }, }) const mobileStyles = StyleSheet.create({ @@ -205,4 +223,8 @@ const mobileStyles = StyleSheet.create({ bottom: -1, borderBottomWidth: 1, }, + dropdownBtn: { + paddingTop: 12, + paddingHorizontal: 14, + }, }) diff --git a/src/view/shell/profile-menu/index.tsx b/src/view/shell/profile-menu/index.tsx index 558a329c44..dda14f5d2f 100644 --- a/src/view/shell/profile-menu/index.tsx +++ b/src/view/shell/profile-menu/index.tsx @@ -93,7 +93,7 @@ export function ProfileMenuDialog({ - +