diff options
Diffstat (limited to 'src/view/screens/Feeds.tsx')
| -rw-r--r-- | src/view/screens/Feeds.tsx | 128 |
1 files changed, 45 insertions, 83 deletions
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 406f11792..0dcf1f016 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -24,14 +24,13 @@ import {useSetMinimalShellMode} from '#/state/shell' import {useComposerControls} from '#/state/shell/composer' import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {FAB} from '#/view/com/util/fab/FAB' -import {TextLink} from '#/view/com/util/Link' import {List, ListMethods} from '#/view/com/util/List' import {FeedFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import {Text} from '#/view/com/util/text/Text' -import {ViewHeader} from '#/view/com/util/ViewHeader' import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed' import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType' import {atoms as a, useTheme} from '#/alf' +import {ButtonIcon} from '#/components/Button' import {Divider} from '#/components/Divider' import * as FeedCard from '#/components/FeedCard' import {SearchInput} from '#/components/forms/SearchInput' @@ -40,7 +39,9 @@ import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' +import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2' import * as Layout from '#/components/Layout' +import {Link} from '#/components/Link' import * as ListCard from '#/components/ListCard' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'> @@ -102,7 +103,7 @@ type FlatlistSlice = export function FeedsScreen(_props: Props) { const pal = usePalette('default') const {openComposer} = useComposerControls() - const {isMobile, isTabletOrDesktop} = useWebMediaQueries() + const {isMobile} = useWebMediaQueries() const [query, setQuery] = React.useState('') const [isPTR, setIsPTR] = React.useState(false) const { @@ -374,22 +375,6 @@ export function FeedsScreen(_props: Props) { isUserSearching, ]) - const renderHeaderBtn = React.useCallback(() => { - return ( - <View style={styles.headerBtnGroup}> - <TextLink - testID="editFeedsBtn" - type="lg-medium" - href="/settings/saved-feeds" - accessibilityLabel={_(msg`Edit My Feeds`)} - accessibilityHint="" - text={_(msg`Edit`)} - style={[pal.link, a.pr_xs]} - /> - </View> - ) - }, [pal, _]) - const searchBarIndex = items.findIndex( item => item.type === 'popularFeedsHeader', ) @@ -430,36 +415,7 @@ export function FeedsScreen(_props: Props) { </View> ) } else if (item.type === 'savedFeedsHeader') { - return ( - <> - {!isMobile && ( - <View - style={[ - pal.view, - styles.header, - pal.border, - { - borderBottomWidth: 1, - }, - ]}> - <Text type="title-lg" style={[pal.text, s.bold]}> - <Trans>Feeds</Trans> - </Text> - <View style={styles.headerBtnGroup}> - <TextLink - type="lg" - href="/settings/saved-feeds" - accessibilityLabel={_(msg`Edit My Feeds`)} - accessibilityHint="" - text={_(msg`Edit`)} - style={[pal.link]} - /> - </View> - </View> - )} - <FeedsSavedHeader /> - </> - ) + return <FeedsSavedHeader /> } else if (item.type === 'savedFeedNoResults') { return ( <View @@ -530,13 +486,8 @@ export function FeedsScreen(_props: Props) { return null }, [ - isMobile, - pal.view, pal.border, - pal.text, pal.textLight, - pal.link, - _, query, onChangeQuery, onPressCancelSearch, @@ -547,31 +498,45 @@ export function FeedsScreen(_props: Props) { return ( <Layout.Screen testID="FeedsScreen"> - {isMobile && ( - <ViewHeader - title={_(msg`Feeds`)} - renderButton={renderHeaderBtn} - showBorder + <Layout.Center> + <Layout.Header.Outer> + <Layout.Header.BackButton /> + <Layout.Header.Content> + <Layout.Header.TitleText> + <Trans>Feeds</Trans> + </Layout.Header.TitleText> + </Layout.Header.Content> + <Layout.Header.Slot> + <Link + testID="editFeedsBtn" + to="/settings/saved-feeds" + label={_(msg`Edit My Feeds`)} + size="small" + variant="ghost" + color="secondary" + shape="round" + style={[a.justify_center, {right: -3}]}> + <ButtonIcon icon={Gear} size="lg" /> + </Link> + </Layout.Header.Slot> + </Layout.Header.Outer> + + <List + ref={listRef} + data={items} + keyExtractor={item => item.key} + contentContainerStyle={styles.contentContainer} + renderItem={renderItem} + refreshing={isPTR} + onRefresh={isUserSearching ? undefined : onPullToRefresh} + initialNumToRender={10} + onEndReached={onEndReached} + desktopFixedHeight + keyboardShouldPersistTaps="handled" + keyboardDismissMode="on-drag" + sideBorders={false} /> - )} - - <List - ref={listRef} - style={[!isTabletOrDesktop && s.flex1, styles.list]} - data={items} - keyExtractor={item => item.key} - contentContainerStyle={styles.contentContainer} - renderItem={renderItem} - refreshing={isPTR} - onRefresh={isUserSearching ? undefined : onPullToRefresh} - initialNumToRender={10} - onEndReached={onEndReached} - // @ts-ignore our .web version only -prf - desktopFixedHeight - scrollIndicatorInsets={{right: 1}} - keyboardShouldPersistTaps="handled" - keyboardDismissMode="on-drag" - /> + </Layout.Center> {hasSession && ( <FAB @@ -728,7 +693,7 @@ function FeedsSavedHeader() { }> <IconCircle icon={ListSparkle_Stroke2_Corner0_Rounded} size="lg" /> <View style={[a.flex_1, a.gap_xs]}> - <Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}> + <Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}> <Trans>My Feeds</Trans> </Text> <Text style={[t.atoms.text_contrast_high]}> @@ -754,7 +719,7 @@ function FeedsAboutHeader() { size="lg" /> <View style={[a.flex_1, a.gap_sm]}> - <Text style={[a.flex_1, a.text_2xl, a.font_bold, t.atoms.text]}> + <Text style={[a.flex_1, a.text_2xl, a.font_heavy, t.atoms.text]}> <Trans>Discover New Feeds</Trans> </Text> <Text style={[t.atoms.text_contrast_high]}> @@ -769,9 +734,6 @@ function FeedsAboutHeader() { } const styles = StyleSheet.create({ - list: { - height: '100%', - }, contentContainer: { paddingBottom: 100, }, |