diff options
author | Paul Frazee <pfrazee@gmail.com> | 2023-09-18 11:44:29 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2023-09-18 11:44:29 -0700 |
commit | ea885339cf3a5cba4aa82fbe5e0176052c3b68e1 (patch) | |
tree | a02b0581c42a1a0aae4442a75391c99a1719ec3e /src/view/shell | |
parent | 3118e3e93338c62d2466699b9f339544d3273823 (diff) | |
download | voidsky-ea885339cf3a5cba4aa82fbe5e0176052c3b68e1.tar.zst |
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>
Diffstat (limited to 'src/view/shell')
-rw-r--r-- | src/view/shell/Drawer.tsx | 15 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBar.tsx | 19 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBarStyles.tsx | 3 | ||||
-rw-r--r-- | src/view/shell/bottom-bar/BottomBarWeb.tsx | 12 | ||||
-rw-r--r-- | src/view/shell/desktop/Feeds.tsx | 92 | ||||
-rw-r--r-- | src/view/shell/desktop/LeftNav.tsx | 13 | ||||
-rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 5 | ||||
-rw-r--r-- | src/view/shell/desktop/Search.tsx | 1 |
8 files changed, 126 insertions, 34 deletions
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 3a4b8947a..174e4a806 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -28,8 +28,7 @@ import { MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, UserIconSolid, - SatelliteDishIcon, - SatelliteDishIconSolid, + HashtagIcon, HandIcon, } from 'lib/icons' import {UserAvatar} from 'view/com/util/UserAvatar' @@ -258,21 +257,21 @@ export const DrawerContent = observer(function DrawerContentImpl() { <MenuItem icon={ isAtFeeds ? ( - <SatelliteDishIconSolid - strokeWidth={1.5} + <HashtagIcon + strokeWidth={3} style={pal.text as FontAwesomeIconStyle} size={24} /> ) : ( - <SatelliteDishIcon - strokeWidth={1.5} + <HashtagIcon + strokeWidth={2} style={pal.text as FontAwesomeIconStyle} size={24} /> ) } - label="My Feeds" - accessibilityLabel="My Feeds" + label="Feeds" + accessibilityLabel="Feeds" accessibilityHint="" onPress={onPressMyFeeds} /> diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 4a34371ea..8ba74da2e 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -18,8 +18,7 @@ import { HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - SatelliteDishIcon, - SatelliteDishIconSolid, + HashtagIcon, BellIcon, BellIconSolid, } from 'lib/icons' @@ -134,16 +133,16 @@ export const BottomBar = observer(function BottomBarImpl({ testID="bottomBarFeedsBtn" icon={ isAtFeeds ? ( - <SatelliteDishIconSolid - size={25} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - strokeWidth={1.8} + <HashtagIcon + size={24} + style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} + strokeWidth={4} /> ) : ( - <SatelliteDishIcon - size={25} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - strokeWidth={1.8} + <HashtagIcon + size={24} + style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} + strokeWidth={2.25} /> ) } diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx index f31ab44cf..ae9381440 100644 --- a/src/view/shell/bottom-bar/BottomBarStyles.tsx +++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx @@ -49,6 +49,9 @@ export const styles = StyleSheet.create({ homeIcon: { top: 0, }, + feedsIcon: { + top: -2, + }, searchIcon: { top: -2, }, diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index af70d3364..6448eea63 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -15,8 +15,7 @@ import { HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - SatelliteDishIcon, - SatelliteDishIconSolid, + HashtagIcon, UserIcon, UserIconSolid, } from 'lib/icons' @@ -68,12 +67,11 @@ export const BottomBarWeb = observer(function BottomBarWebImpl() { </NavItem> <NavItem routeName="Feeds" href="/feeds"> {({isActive}) => { - const Icon = isActive ? SatelliteDishIconSolid : SatelliteDishIcon return ( - <Icon - size={25} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - strokeWidth={1.8} + <HashtagIcon + size={22} + style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} + strokeWidth={isActive ? 4 : 2.5} /> ) }} diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx new file mode 100644 index 000000000..4da1401c3 --- /dev/null +++ b/src/view/shell/desktop/Feeds.tsx @@ -0,0 +1,92 @@ +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 {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 route = useNavigationState(state => { + if (!state) { + return {name: 'Home'} + } + return getCurrentRoute(state) + }) + + return ( + <View style={[styles.container, pal.view, pal.border]}> + <FeedItem href="/" title="Following" current={route.name === 'Home'} /> + {store.me.savedFeeds.pinned.map(feed => { + try { + const {hostname, rkey} = new AtUri(feed.uri) + const href = `/profile/${hostname}/feed/${rkey}` + const params = route.params as Record<string, string> + return ( + <FeedItem + key={feed.uri} + href={href} + title={feed.displayName} + current={ + route.name === 'CustomFeed' && + params.name === hostname && + params.rkey === rkey + } + /> + ) + } catch { + return null + } + })} + <View style={{paddingTop: 8, paddingBottom: 6}}> + <TextLink + type="lg" + href="/feeds" + text="More feeds" + style={[pal.link]} + /> + </View> + </View> + ) +}) + +function FeedItem({ + title, + href, + current, +}: { + title: string + href: string + current: boolean +}) { + const pal = usePalette('default') + return ( + <View style={{paddingVertical: 6}}> + <TextLink + type="xl" + href={href} + text={title} + style={[ + current ? pal.text : pal.textLight, + {letterSpacing: 0.15, fontWeight: current ? '500' : 'normal'}, + ]} + /> + </View> + ) +} + +const styles = StyleSheet.create({ + container: { + position: 'relative', + width: 300, + paddingHorizontal: 12, + borderTopWidth: 1, + borderBottomWidth: 1, + paddingVertical: 18, + }, +}) diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 8c1a33245..907df8641 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -32,8 +32,7 @@ import { CogIconSolid, ComposeIcon2, HandIcon, - SatelliteDishIcon, - SatelliteDishIconSolid, + HashtagIcon, } from 'lib/icons' import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers' import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types' @@ -272,20 +271,20 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() { <NavItem href="/feeds" icon={ - <SatelliteDishIcon - strokeWidth={1.75} + <HashtagIcon + strokeWidth={2.25} style={pal.text as FontAwesomeIconStyle} size={isDesktop ? 24 : 28} /> } iconFilled={ - <SatelliteDishIconSolid - strokeWidth={1.75} + <HashtagIcon + strokeWidth={2.5} style={pal.text as FontAwesomeIconStyle} size={isDesktop ? 24 : 28} /> } - label="My Feeds" + label="Feeds" /> <NavItem href="/notifications" diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index e17fa6a84..12ca256d2 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -4,6 +4,7 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' import {DesktopSearch} from './Search' +import {DesktopFeeds} from './Feeds' import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' @@ -26,6 +27,7 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() { return ( <View style={[styles.rightNav, pal.view]}> {store.session.hasSession && <DesktopSearch />} + {store.session.hasSession && <DesktopFeeds />} <View style={styles.message}> {store.session.isSandbox ? ( <View style={[palError.view, styles.messageLine, s.p10]}> @@ -126,7 +128,7 @@ const styles = StyleSheet.create({ }, message: { - marginTop: 20, + paddingVertical: 18, paddingHorizontal: 10, }, messageLine: { @@ -134,7 +136,6 @@ const styles = StyleSheet.create({ }, inviteCodes: { - marginTop: 12, borderTopWidth: 1, paddingHorizontal: 16, paddingVertical: 12, diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index c7b322b58..dfd4f50bf 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -113,6 +113,7 @@ const styles = StyleSheet.create({ container: { position: 'relative', width: 300, + paddingBottom: 18, }, search: { paddingHorizontal: 16, |