diff --git a/src/view/com/feeds/SavedFeeds.tsx b/src/view/com/feeds/SavedFeeds.tsx index 2d0057cf..7135fdf0 100644 --- a/src/view/com/feeds/SavedFeeds.tsx +++ b/src/view/com/feeds/SavedFeeds.tsx @@ -1,10 +1,10 @@ import React, {useEffect, useCallback} from 'react' -import {FlatList, RefreshControl, StyleSheet, View} from 'react-native' +import {RefreshControl, StyleSheet, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' import {observer} from 'mobx-react-lite' import {useStores} from 'state/index' -import {CenteredView} from 'view/com/util/Views' +import {FlatList} from 'view/com/util/Views' import {Text} from 'view/com/util/text/Text' import {isDesktopWeb} from 'platform/detection' import {s} from 'lib/styles' @@ -65,31 +65,29 @@ export const SavedFeeds = observer( ) return ( - - item.data.uri} - refreshing={store.me.savedFeeds.isRefreshing} - refreshControl={ - store.me.savedFeeds.refresh()} - tintColor={pal.colors.text} - titleColor={pal.colors.text} - progressViewOffset={headerOffset} - /> - } - renderItem={renderItem} - initialNumToRender={10} - ListFooterComponent={renderListFooterComponent} - ListEmptyComponent={renderListEmptyComponent} - extraData={store.me.savedFeeds.isLoading} - contentOffset={{x: 0, y: headerOffset * -1}} - // @ts-ignore our .web version only -prf - desktopFixedHeight - /> - + item.data.uri} + refreshing={store.me.savedFeeds.isRefreshing} + refreshControl={ + store.me.savedFeeds.refresh()} + tintColor={pal.colors.text} + titleColor={pal.colors.text} + progressViewOffset={headerOffset} + /> + } + renderItem={renderItem} + initialNumToRender={10} + ListFooterComponent={renderListFooterComponent} + ListEmptyComponent={renderListEmptyComponent} + extraData={store.me.savedFeeds.isLoading} + contentOffset={{x: 0, y: headerOffset * -1}} + // @ts-ignore our .web version only -prf + desktopFixedHeight + /> ) }, ) diff --git a/src/view/com/pager/FeedsTabBar.web.tsx b/src/view/com/pager/FeedsTabBar.web.tsx index 13ee9a68..56ca6f2a 100644 --- a/src/view/com/pager/FeedsTabBar.web.tsx +++ b/src/view/com/pager/FeedsTabBar.web.tsx @@ -28,7 +28,12 @@ const FeedsTabBarDesktop = observer( ) => { const store = useStores() const items = useMemo( - () => ['Following', "What's hot", ...store.me.savedFeeds.pinnedFeedNames], + () => [ + 'Following', + "What's hot", + ...store.me.savedFeeds.pinnedFeedNames, + 'My feeds', + ], [store.me.savedFeeds.pinnedFeedNames], ) const pal = usePalette('default') diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index a04693fa..fe76a08b 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -107,11 +107,12 @@ const styles = isDesktopWeb ? StyleSheet.create({ outer: { flexDirection: 'row', - paddingHorizontal: 18, + width: 598, + paddingHorizontal: 14, }, item: { paddingTop: 14, - paddingBottom: 16, + paddingBottom: 12, paddingHorizontal: 12, borderBottomWidth: 3, borderBottomColor: 'transparent', diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 97802394..7f13f183 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -20,12 +20,14 @@ export const ViewHeader = observer(function ({ canGoBack, hideOnScroll, showOnDesktop, + showBorder, renderButton, }: { title: string canGoBack?: boolean hideOnScroll?: boolean showOnDesktop?: boolean + showBorder?: boolean renderButton?: () => JSX.Element }) { const pal = usePalette('default') @@ -57,7 +59,7 @@ export const ViewHeader = observer(function ({ } return ( - + { const store = useStores() const pal = usePalette('default') @@ -145,11 +149,28 @@ const Container = observer( } if (!hideOnScroll) { - return {children} + return ( + + {children} + + ) } return ( + style={[ + styles.header, + pal.view, + pal.border, + styles.headerFloating, + transform, + showBorder && styles.border, + ]}> {children} ) @@ -172,6 +193,9 @@ const styles = StyleSheet.create({ borderBottomWidth: 1, paddingVertical: 12, }, + border: { + borderBottomWidth: 1, + }, titleContainer: { marginLeft: 'auto', diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index 9d6501d5..3313492e 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -126,5 +126,6 @@ const styles = StyleSheet.create({ }, fixedHeight: { height: '100vh', + scrollbarGutter: 'stable both-edges', }, }) diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 5b9b546f..c2723f69 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -71,8 +71,17 @@ export const SavedFeeds = withAuthRequired( } return ( - - + + savedFeeds.reorderPinnedFeeds(data)} - // @ts-ignore our .web version only -prf - desktopFixedHeight /> ) @@ -126,8 +133,8 @@ const ListItem = observer( }}> @@ -173,6 +180,11 @@ const ListItem = observer( ) const styles = StyleSheet.create({ + desktopContainer: { + borderLeftWidth: 1, + borderRightWidth: 1, + minHeight: '100vh', + }, footer: { paddingVertical: 20, }, @@ -187,10 +199,11 @@ const styles = StyleSheet.create({ flex: 1, flexDirection: 'row', alignItems: 'center', - borderTopWidth: 1, + borderBottomWidth: 1, paddingRight: 16, }, webArrowButtonsContainer: { + paddingLeft: 16, flexDirection: 'column', justifyContent: 'space-around', },