+1

assets/icons/listPlus_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 5a1 1 0 0 0 0 2h16a1 1 0 1 0 0-2H4Zm0 12a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2H4Zm-1-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm14-3c.552 0 1 .41 1 .917V13.5h3.583c.507 0 .917.448.917 1s-.41 1-.917 1H18v3.583c0 .507-.448.917-1 .917s-1-.41-1-.917V15.5h-3.583c-.507 0-.917-.448-.917-1s.41-1 .917-1H16V9.917C16 9.41 16.448 9 17 9Z" clip-rule="evenodd"/></svg>

+1

assets/icons/menu_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

+1

assets/icons/pin_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.5 3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3.997a6.25 6.25 0 0 0 1.83 4.42l.377.376A1 1 0 0 1 20 12.5V15a1 1 0 0 1-1 1h-6v5a1 1 0 1 1-2 0v-5H5a1 1 0 0 1-1-1v-2.5a1 1 0 0 1 .293-.707l.376-.377A6.25 6.25 0 0 0 6.5 6.996V3.001Zm2 1v2.997a8.25 8.25 0 0 1-2.416 5.834L6 12.914V14h12v-1.086l-.084-.083A8.25 8.25 0 0 1 15.5 6.997V4h-7Z" clip-rule="evenodd"/></svg>

+1

assets/icons/shapes_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7 3a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2H8v2a1 1 0 1 1-2 0V8H4a1 1 0 0 1 0-2h2V4a1 1 0 0 1 1-1Zm6 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 14a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 1v4h4v-4H5Zm9.171-.829a1 1 0 0 1 1.415 0L17 15.585l1.414-1.414a1 1 0 1 1 1.414 1.414L18.414 17l1.414 1.414a1 1 0 0 1-1.414 1.414L17 18.414l-1.415 1.414a1 1 0 0 1-1.414-1.414l1.415-1.415-1.415-1.414a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>

+1

assets/icons/star_filled_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12.902 1.568a1 1 0 0 0-1.804 0L8.455 7.085l-6.085.799a1 1 0 0 0-.557 1.718l4.45 4.207-1.117 6.008a1 1 0 0 0 1.458 1.063L12 17.962l5.396 2.918a1 1 0 0 0 1.459-1.063l-1.117-6.008 4.45-4.207a1 1 0 0 0-.558-1.718l-6.085-.8-2.643-5.516Z"/></svg>

+1

assets/icons/star_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 1a1 1 0 0 1 .902.568l2.643 5.517 6.085.799a1 1 0 0 1 .557 1.718l-4.45 4.207 1.118 6.008a1 1 0 0 1-1.46 1.063L12 17.962 6.604 20.88a1 1 0 0 1-1.459-1.063l1.117-6.008-4.45-4.207a1 1 0 0 1 .558-1.718l6.085-.8 2.643-5.516A1 1 0 0 1 12 1Zm0 3.315-1.975 4.123a1 1 0 0 1-.772.56l-4.538.595 3.317 3.137a1 1 0 0 1 .296.91l-.834 4.485 4.03-2.179a1 1 0 0 1 .952 0l4.03 2.179-.834-4.485a1 1 0 0 1 .296-.91l3.317-3.137-4.538-.596a1 1 0 0 1-.772-.56L12 4.316Z" clip-rule="evenodd"/></svg>

+1 -26

src/Navigation.tsx

··· 22 22 import { 23 23 AllNavigatorParams, 24 24 BottomTabNavigatorParams, 25 25 - FeedsTabNavigatorParams, 26 25 FlatNavigatorParams, 27 26 HomeTabNavigatorParams, 28 27 MessagesTabNavigatorParams, ··· 91 90 92 91 const HomeTab = createNativeStackNavigatorWithAuth<HomeTabNavigatorParams>() 93 92 const SearchTab = createNativeStackNavigatorWithAuth<SearchTabNavigatorParams>() 94 94 - const FeedsTab = createNativeStackNavigatorWithAuth<FeedsTabNavigatorParams>() 95 93 const NotificationsTab = 96 94 createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>() 97 95 const MyProfileTab = ··· 306 304 getComponent={() => MessagesSettingsScreen} 307 305 options={{title: title(msg`Chat settings`), requireAuth: true}} 308 306 /> 307 307 + <Stack.Screen name="Feeds" getComponent={() => FeedsScreen} /> 309 308 </> 310 309 ) 311 310 } ··· 330 329 tabBar={tabBar}> 331 330 <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} /> 332 331 <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} /> 333 333 - <Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} /> 334 332 <Tab.Screen 335 333 name="NotificationsTab" 336 334 getComponent={() => NotificationsTabNavigator} ··· 384 382 ) 385 383 } 386 384 387 387 - function FeedsTabNavigator() { 388 388 - const pal = usePalette('default') 389 389 - return ( 390 390 - <FeedsTab.Navigator 391 391 - screenOptions={{ 392 392 - animation: isAndroid ? 'ios' : undefined, 393 393 - animationDuration: 285, 394 394 - gestureEnabled: true, 395 395 - fullScreenGestureEnabled: true, 396 396 - headerShown: false, 397 397 - contentStyle: pal.view, 398 398 - }}> 399 399 - <FeedsTab.Screen name="Feeds" getComponent={() => FeedsScreen} /> 400 400 - {commonScreens(FeedsTab as typeof HomeTab)} 401 401 - </FeedsTab.Navigator> 402 402 - ) 403 403 - } 404 404 - 405 385 function NotificationsTabNavigator() { 406 386 const pal = usePalette('default') 407 387 return ( ··· 504 484 name="Search" 505 485 getComponent={() => SearchScreen} 506 486 options={{title: title(msg`Search`)}} 507 507 - /> 508 508 - <Flat.Screen 509 509 - name="Feeds" 510 510 - getComponent={() => FeedsScreen} 511 511 - options={{title: title(msg`Feeds`)}} 512 487 /> 513 488 <Flat.Screen 514 489 name="Notifications"

+9

src/components/icons/ListPlus.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + /* 4 4 + * This icon is off-menu, not part of the icon set 5 5 + */ 6 6 + 7 7 + export const ListPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({ 8 8 + path: 'M4 5a1 1 0 0 0 0 2h16a1 1 0 1 0 0-2H4Zm0 12a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2H4Zm-1-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm14-3c.552 0 1 .41 1 .917V13.5h3.583c.507 0 .917.448.917 1s-.41 1-.917 1H18v3.583c0 .507-.448.917-1 .917s-1-.41-1-.917V15.5h-3.583c-.507 0-.917-.448-.917-1s.41-1 .917-1H16V9.917C16 9.41 16.448 9 17 9Z', 9 9 + })

+5

src/components/icons/Menu.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + export const Menu_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 + path: 'M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z', 5 5 + })

+5

src/components/icons/Pin.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + export const Pin_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 + path: 'M6.5 3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3.997a6.25 6.25 0 0 0 1.83 4.42l.377.376A1 1 0 0 1 20 12.5V15a1 1 0 0 1-1 1h-6v5a1 1 0 1 1-2 0v-5H5a1 1 0 0 1-1-1v-2.5a1 1 0 0 1 .293-.707l.376-.377A6.25 6.25 0 0 0 6.5 6.996V3.001Zm2 1v2.997a8.25 8.25 0 0 1-2.416 5.834L6 12.914V14h12v-1.086l-.084-.083A8.25 8.25 0 0 1 15.5 6.997V4h-7Z', 5 5 + })

+5

src/components/icons/Shapes.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + export const Shapes_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 + path: 'M7 3a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2H8v2a1 1 0 1 1-2 0V8H4a1 1 0 0 1 0-2h2V4a1 1 0 0 1 1-1Zm6 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 14a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 1v4h4v-4H5Zm9.171-.829a1 1 0 0 1 1.415 0L17 15.585l1.414-1.414a1 1 0 1 1 1.414 1.414L18.414 17l1.414 1.414a1 1 0 0 1-1.414 1.414L17 18.414l-1.415 1.414a1 1 0 0 1-1.414-1.414l1.415-1.415-1.415-1.414a1 1 0 0 1 0-1.414Z', 5 5 + })

+9

src/components/icons/Star.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + export const Star_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 + path: 'M12 1a1 1 0 0 1 .902.568l2.643 5.517 6.085.799a1 1 0 0 1 .557 1.718l-4.45 4.207 1.118 6.008a1 1 0 0 1-1.46 1.063L12 17.962 6.604 20.88a1 1 0 0 1-1.459-1.063l1.117-6.008-4.45-4.207a1 1 0 0 1 .558-1.718l6.085-.8 2.643-5.516A1 1 0 0 1 12 1Zm0 3.315-1.975 4.123a1 1 0 0 1-.772.56l-4.538.595 3.317 3.137a1 1 0 0 1 .296.91l-.834 4.485 4.03-2.179a1 1 0 0 1 .952 0l4.03 2.179-.834-4.485a1 1 0 0 1 .296-.91l3.317-3.137-4.538-.596a1 1 0 0 1-.772-.56L12 4.316Z', 5 5 + }) 6 6 + 7 7 + export const Star_Filled_Corner0_Rounded = createSinglePathSVG({ 8 8 + path: 'M12.902 1.568a1 1 0 0 0-1.804 0L8.455 7.085l-6.085.799a1 1 0 0 0-.557 1.718l4.45 4.207-1.117 6.008a1 1 0 0 0 1.458 1.063L12 17.962l5.396 2.918a1 1 0 0 0 1.459-1.063l-1.117-6.008 4.45-4.207a1 1 0 0 0-.558-1.718l-6.085-.8-2.643-5.516Z', 9 9 + })

+1

src/lib/hooks/useNavigationTabState.ts

··· 7 7 const res = { 8 8 isAtHome: getTabState(state, 'Home') !== TabState.Outside, 9 9 isAtSearch: getTabState(state, 'Search') !== TabState.Outside, 10 10 + // FeedsTab no longer exists, but this check works for `Feeds` screen as well 10 11 isAtFeeds: getTabState(state, 'Feeds') !== TabState.Outside, 11 12 isAtNotifications: 12 13 getTabState(state, 'Notifications') !== TabState.Outside,

+1 -1

src/lib/routes/helpers.ts

··· 35 35 return ( 36 36 isTab(currentRoute.name, 'Home') || 37 37 isTab(currentRoute.name, 'Search') || 38 38 - isTab(currentRoute.name, 'Feeds') || 38 38 + isTab(currentRoute.name, 'Messages') || 39 39 isTab(currentRoute.name, 'Notifications') || 40 40 isTab(currentRoute.name, 'MyProfile') 41 41 )

+1 -6

src/lib/routes/types.ts

··· 40 40 Hashtag: {tag: string; author?: string} 41 41 MessagesConversation: {conversation: string; embed?: string} 42 42 MessagesSettings: undefined 43 43 + Feeds: undefined 43 44 } 44 45 45 46 export type BottomTabNavigatorParams = CommonNavigatorParams & { 46 47 HomeTab: undefined 47 48 SearchTab: undefined 48 48 - FeedsTab: undefined 49 49 NotificationsTab: undefined 50 50 MyProfileTab: undefined 51 51 MessagesTab: undefined ··· 57 57 58 58 export type SearchTabNavigatorParams = CommonNavigatorParams & { 59 59 Search: {q?: string} 60 60 - } 61 61 - 62 62 - export type FeedsTabNavigatorParams = CommonNavigatorParams & { 63 63 - Feeds: undefined 64 60 } 65 61 66 62 export type NotificationsTabNavigatorParams = CommonNavigatorParams & { ··· 89 85 Home: undefined 90 86 SearchTab: undefined 91 87 Search: {q?: string} 92 92 - FeedsTab: undefined 93 88 Feeds: undefined 94 89 NotificationsTab: undefined 95 90 Notifications: undefined

-14

src/screens/Home/NoFeedsPinned.tsx

··· 3 3 import {TID} from '@atproto/common-web' 4 4 import {msg, Trans} from '@lingui/macro' 5 5 import {useLingui} from '@lingui/react' 6 6 - import {useNavigation} from '@react-navigation/native' 7 6 8 7 import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants' 9 9 - import {isNative} from '#/platform/detection' 10 8 import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences' 11 9 import {UsePreferencesQueryResponse} from '#/state/queries/preferences' 12 12 - import {NavigationProp} from 'lib/routes/types' 13 10 import {CenteredView} from '#/view/com/util/Views' 14 11 import {atoms as a} from '#/alf' 15 12 import {Button, ButtonIcon, ButtonText} from '#/components/Button' ··· 26 23 }) { 27 24 const {_} = useLingui() 28 25 const headerOffset = useHeaderOffset() 29 29 - const navigation = useNavigation<NavigationProp>() 30 26 const {isPending, mutateAsync: overwriteSavedFeeds} = 31 27 useOverwriteSavedFeedsMutation() 32 28 ··· 66 62 await overwriteSavedFeeds(toSave) 67 63 }, [overwriteSavedFeeds, preferences.savedFeeds]) 68 64 69 69 - const onPressFeedsLink = React.useCallback(() => { 70 70 - if (isNative) { 71 71 - // Hack that's necessary due to how our navigators are set up. 72 72 - navigation.navigate('FeedsTab') 73 73 - navigation.popToTop() 74 74 - return false 75 75 - } 76 76 - }, [navigation]) 77 77 - 78 65 return ( 79 66 <CenteredView sideBorders style={[a.h_full_vh]}> 80 67 <View ··· 115 102 <Link 116 103 label={_(msg`Browse other feeds`)} 117 104 to="/feeds" 118 118 - onPress={onPressFeedsLink} 119 105 size="medium" 120 106 variant="solid" 121 107 color="secondary">

+1 -7

src/view/com/home/HomeHeader.tsx

··· 5 5 import {FeedSourceInfo} from '#/state/queries/feed' 6 6 import {useSession} from '#/state/session' 7 7 import {NavigationProp} from 'lib/routes/types' 8 8 - import {isWeb} from 'platform/detection' 9 8 import {RenderTabBarFnProps} from 'view/com/pager/Pager' 10 9 import {TabBar} from '../pager/TabBar' 11 10 import {HomeHeaderLayout} from './HomeHeaderLayout' ··· 39 38 }, [hasPinnedCustom, feeds]) 40 39 41 40 const onPressFeedsLink = React.useCallback(() => { 42 42 - if (isWeb) { 43 43 - navigation.navigate('Feeds') 44 44 - } else { 45 45 - navigation.navigate('FeedsTab') 46 46 - navigation.popToTop() 47 47 - } 41 41 + navigation.navigate('Feeds') 48 42 }, [navigation]) 49 43 50 44 const onSelect = React.useCallback(

+42 -31

src/view/com/home/HomeHeaderLayout.web.tsx

··· 1 1 import React from 'react' 2 2 import {StyleSheet, View} from 'react-native' 3 3 import Animated from 'react-native-reanimated' 4 4 - import { 5 5 - FontAwesomeIcon, 6 6 - FontAwesomeIconStyle, 7 7 - } from '@fortawesome/react-native-fontawesome' 8 4 import {msg} from '@lingui/macro' 9 5 import {useLingui} from '@lingui/react' 10 6 11 11 - import {CogIcon} from '#/lib/icons' 12 7 import {useSession} from '#/state/session' 13 8 import {useShellLayout} from '#/state/shell/shell-layout' 14 9 import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform' 15 15 - import {usePalette} from 'lib/hooks/usePalette' 16 10 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 17 11 import {Logo} from '#/view/icons/Logo' 12 12 + import {atoms as a, useTheme} from '#/alf' 13 13 + import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' 14 14 + import {Link} from '#/components/Link' 18 15 import {useKawaiiMode} from '../../../state/preferences/kawaii' 19 19 - import {Link} from '../util/Link' 20 16 import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' 21 17 22 18 export function HomeHeaderLayout(props: { ··· 38 34 children: React.ReactNode 39 35 tabBarAnchor: JSX.Element | null | undefined 40 36 }) { 41 41 - const pal = usePalette('default') 37 37 + const t = useTheme() 42 38 const headerMinimalShellTransform = useMinimalShellHeaderTransform() 43 39 const {headerHeight} = useShellLayout() 44 40 const {hasSession} = useSession() ··· 51 47 {hasSession && ( 52 48 <View 53 49 style={[ 54 54 - pal.view, 55 55 - pal.border, 50 50 + a.relative, 51 51 + a.flex_row, 52 52 + a.justify_end, 53 53 + a.align_center, 54 54 + a.pt_lg, 55 55 + a.px_md, 56 56 + a.pb_2xs, 57 57 + t.atoms.bg, 58 58 + t.atoms.border_contrast_low, 56 59 styles.bar, 57 57 - styles.topBar, 58 58 - kawaii && {paddingTop: 4, paddingBottom: 0}, 59 60 ]}> 60 60 - <Link 61 61 - href="/settings/following-feed" 62 62 - hitSlop={10} 63 63 - accessibilityRole="button" 64 64 - accessibilityLabel={_(msg`Following Feed Preferences`)} 65 65 - accessibilityHint=""> 66 66 - <FontAwesomeIcon 67 67 - icon="sliders" 68 68 - style={pal.textLight as FontAwesomeIconStyle} 69 69 - /> 70 70 - </Link> 71 71 - <Logo width={kawaii ? 60 : 28} /> 61 61 + <View 62 62 + style={[ 63 63 + a.absolute, 64 64 + a.inset_0, 65 65 + a.pt_lg, 66 66 + a.m_auto, 67 67 + kawaii && {paddingTop: 4, paddingBottom: 0}, 68 68 + { 69 69 + width: kawaii ? 60 : 28, 70 70 + }, 71 71 + ]}> 72 72 + <Logo width={kawaii ? 60 : 28} /> 73 73 + </View> 74 74 + 72 75 <Link 73 73 - href="/settings/saved-feeds" 76 76 + to="/feeds" 74 77 hitSlop={10} 75 75 - accessibilityRole="button" 76 76 - accessibilityLabel={_(msg`Edit Saved Feeds`)} 77 77 - accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}> 78 78 - <CogIcon size={22} strokeWidth={2} style={pal.textLight} /> 78 78 + label={_(msg`View your feeds and explore more`)} 79 79 + size="small" 80 80 + variant="ghost" 81 81 + color="secondary" 82 82 + shape="square" 83 83 + style={[ 84 84 + a.justify_center, 85 85 + { 86 86 + marginTop: -4, 87 87 + }, 88 88 + ]}> 89 89 + <FeedsIcon size="md" fill={t.atoms.text_contrast_medium.color} /> 79 90 </Link> 80 91 </View> 81 92 )} ··· 85 96 headerHeight.value = e.nativeEvent.layout.height 86 97 }} 87 98 style={[ 88 88 - pal.view, 89 89 - pal.border, 99 99 + t.atoms.bg, 100 100 + t.atoms.border_contrast_low, 90 101 styles.bar, 91 102 styles.tabBar, 92 103 headerMinimalShellTransform,

+25 -21

src/view/com/home/HomeHeaderLayoutMobile.tsx

··· 1 1 import React from 'react' 2 2 import {StyleSheet, TouchableOpacity, View} from 'react-native' 3 3 import Animated from 'react-native-reanimated' 4 4 - import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 5 5 - import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' 6 4 import {msg} from '@lingui/macro' 7 5 import {useLingui} from '@lingui/react' 8 6 ··· 15 13 import {isWeb} from 'platform/detection' 16 14 import {Logo} from '#/view/icons/Logo' 17 15 import {atoms} from '#/alf' 16 16 + import {useTheme} from '#/alf' 17 17 + import {atoms as a} from '#/alf' 18 18 import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' 19 19 - import {Link as Link2} from '#/components/Link' 19 19 + import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag' 20 20 + import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' 21 21 + import {Link} from '#/components/Link' 20 22 import {IS_DEV} from '#/env' 21 21 - import {Link} from '../util/Link' 22 23 23 24 export function HomeHeaderLayoutMobile({ 24 25 children, ··· 26 27 children: React.ReactNode 27 28 tabBarAnchor: JSX.Element | null | undefined 28 29 }) { 30 30 + const t = useTheme() 29 31 const pal = usePalette('default') 30 32 const {_} = useLingui() 31 33 const setDrawerOpen = useSetDrawerOpen() ··· 54 56 msg`Access profile and other navigation links`, 55 57 )} 56 58 hitSlop={HITSLOP_10}> 57 57 - <FontAwesomeIcon 58 58 - icon="bars" 59 59 - size={18} 60 60 - color={pal.colors.textLight} 61 61 - /> 59 59 + <Menu size="lg" fill={t.atoms.text_contrast_medium.color} /> 62 60 </TouchableOpacity> 63 61 </View> 64 62 <View> ··· 74 72 {width: 100}, 75 73 ]}> 76 74 {IS_DEV && ( 77 77 - <Link2 to="/sys/debug"> 75 75 + <Link to="/sys/debug"> 78 76 <ColorPalette size="md" /> 79 79 - </Link2> 77 77 + </Link> 80 78 )} 81 79 {hasSession && ( 82 80 <Link 83 81 testID="viewHeaderHomeFeedPrefsBtn" 84 84 - href="/settings/following-feed" 82 82 + to="/feeds" 85 83 hitSlop={HITSLOP_10} 86 86 - accessibilityRole="button" 87 87 - accessibilityLabel={_(msg`Following Feed Preferences`)} 88 88 - accessibilityHint=""> 89 89 - <FontAwesomeIcon 90 90 - icon="sliders" 91 91 - style={pal.textLight as FontAwesomeIconStyle} 92 92 - /> 84 84 + label={_(msg`View your feeds and explore more`)} 85 85 + size="small" 86 86 + variant="ghost" 87 87 + color="secondary" 88 88 + shape="square" 89 89 + style={[ 90 90 + a.justify_center, 91 91 + { 92 92 + marginTop: 2, 93 93 + marginRight: -6, 94 94 + }, 95 95 + ]}> 96 96 + <FeedsIcon size="lg" fill={t.atoms.text_contrast_medium.color} /> 93 97 </Link> 94 98 )} 95 99 </View> ··· 113 117 flexDirection: 'row', 114 118 justifyContent: 'space-between', 115 119 alignItems: 'center', 116 116 - paddingHorizontal: 18, 117 117 - paddingVertical: 8, 120 120 + paddingHorizontal: 16, 121 121 + paddingVertical: 5, 118 122 width: '100%', 119 123 }, 120 124 title: {

+7 -11

src/view/com/posts/FollowingEmptyState.tsx

··· 1 1 import React from 'react' 2 2 import {StyleSheet, View} from 'react-native' 3 3 - import {useNavigation} from '@react-navigation/native' 4 3 import { 5 4 FontAwesomeIcon, 6 5 FontAwesomeIconStyle, 7 6 } from '@fortawesome/react-native-fontawesome' 8 8 - import {Text} from '../util/text/Text' 9 9 - import {Button} from '../util/forms/Button' 7 7 + import {Trans} from '@lingui/macro' 8 8 + import {useNavigation} from '@react-navigation/native' 9 9 + 10 10 + import {usePalette} from 'lib/hooks/usePalette' 10 11 import {MagnifyingGlassIcon} from 'lib/icons' 11 12 import {NavigationProp} from 'lib/routes/types' 12 12 - import {usePalette} from 'lib/hooks/usePalette' 13 13 import {s} from 'lib/styles' 14 14 import {isWeb} from 'platform/detection' 15 15 - import {Trans} from '@lingui/macro' 15 15 + import {Button} from '../util/forms/Button' 16 16 + import {Text} from '../util/text/Text' 16 17 17 18 export function FollowingEmptyState() { 18 19 const pal = usePalette('default') ··· 29 30 }, [navigation]) 30 31 31 32 const onPressDiscoverFeeds = React.useCallback(() => { 32 32 - if (isWeb) { 33 33 - navigation.navigate('Feeds') 34 34 - } else { 35 35 - navigation.navigate('FeedsTab') 36 36 - navigation.popToTop() 37 37 - } 33 33 + navigation.navigate('Feeds') 38 34 }, [navigation]) 39 35 40 36 return (

+8 -12

src/view/com/posts/FollowingEndOfFeed.tsx

··· 1 1 import React from 'react' 2 2 - import {StyleSheet, View, Dimensions} from 'react-native' 3 3 - import {useNavigation} from '@react-navigation/native' 2 2 + import {Dimensions, StyleSheet, View} from 'react-native' 4 3 import { 5 4 FontAwesomeIcon, 6 5 FontAwesomeIconStyle, 7 6 } from '@fortawesome/react-native-fontawesome' 8 8 - import {Text} from '../util/text/Text' 9 9 - import {Button} from '../util/forms/Button' 10 10 - import {NavigationProp} from 'lib/routes/types' 7 7 + import {Trans} from '@lingui/macro' 8 8 + import {useNavigation} from '@react-navigation/native' 9 9 + 11 10 import {usePalette} from 'lib/hooks/usePalette' 11 11 + import {NavigationProp} from 'lib/routes/types' 12 12 import {s} from 'lib/styles' 13 13 import {isWeb} from 'platform/detection' 14 14 - import {Trans} from '@lingui/macro' 14 14 + import {Button} from '../util/forms/Button' 15 15 + import {Text} from '../util/text/Text' 15 16 16 17 export function FollowingEndOfFeed() { 17 18 const pal = usePalette('default') ··· 28 29 }, [navigation]) 29 30 30 31 const onPressDiscoverFeeds = React.useCallback(() => { 31 31 - if (isWeb) { 32 32 - navigation.navigate('Feeds') 33 33 - } else { 34 34 - navigation.navigate('FeedsTab') 35 35 - navigation.popToTop() 36 36 - } 32 32 + navigation.navigate('Feeds') 37 33 }, [navigation]) 38 34 39 35 return (

+3 -6

src/view/com/profile/ProfileSubpageHeader.tsx

··· 21 21 import {UserAvatar, UserAvatarType} from '../util/UserAvatar' 22 22 import {CenteredView} from '../util/Views' 23 23 import hairlineWidth = StyleSheet.hairlineWidth 24 24 + import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' 24 25 25 26 export function ProfileSubpageHeader({ 26 27 isLoading, ··· 103 104 style={[styles.backIcon, pal.text]} 104 105 /> 105 106 ) : ( 106 106 - <FontAwesomeIcon 107 107 - size={18} 108 108 - icon="bars" 109 109 - style={[styles.backIcon, pal.textLight]} 110 110 - /> 107 107 + <Menu size="lg" style={[{marginTop: 4}, pal.textLight]} /> 111 108 )} 112 109 </Pressable> 113 110 <View style={{flex: 1}} /> ··· 194 191 backBtnWide: { 195 192 width: 20, 196 193 height: 30, 197 197 - paddingHorizontal: 6, 194 194 + marginRight: 4, 198 195 }, 199 196 backIcon: { 200 197 marginTop: 6,

+1 -1

src/view/com/testing/TestCtrls.e2e.tsx

··· 90 90 /> 91 91 <Pressable 92 92 testID="e2eGotoFeeds" 93 93 - onPress={() => navigate('FeedsTab')} 93 93 + onPress={() => navigate('Feeds')} 94 94 accessibilityRole="button" 95 95 style={BTN} 96 96 />

+9 -10

src/view/com/util/SimpleViewHeader.tsx

··· 8 8 } from 'react-native' 9 9 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 10 10 import {useNavigation} from '@react-navigation/native' 11 11 - import {CenteredView} from './Views' 11 11 + 12 12 + import {isWeb} from '#/platform/detection' 13 13 + import {useSetDrawerOpen} from '#/state/shell' 14 14 + import {useAnalytics} from 'lib/analytics/analytics' 12 15 import {usePalette} from 'lib/hooks/usePalette' 13 16 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 14 14 - import {useAnalytics} from 'lib/analytics/analytics' 15 17 import {NavigationProp} from 'lib/routes/types' 16 16 - import {useSetDrawerOpen} from '#/state/shell' 17 17 - import {isWeb} from '#/platform/detection' 18 18 + import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' 19 19 + import {CenteredView} from './Views' 18 20 19 21 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} 20 22 ··· 72 74 style={[styles.backIcon, pal.text]} 73 75 /> 74 76 ) : ( 75 75 - <FontAwesomeIcon 76 76 - size={18} 77 77 - icon="bars" 78 78 - style={[styles.backIcon, pal.textLight]} 79 79 - /> 77 77 + <Menu size="lg" style={[{marginTop: 4}, pal.textLight]} /> 80 78 )} 81 79 </TouchableOpacity> 82 80 ) : null} ··· 110 108 backBtnWide: { 111 109 width: 30, 112 110 height: 30, 113 113 - paddingHorizontal: 6, 111 111 + paddingLeft: 4, 112 112 + marginRight: 4, 114 113 }, 115 114 backIcon: { 116 115 marginTop: 6,

+4 -6

src/view/com/util/ViewHeader.tsx

··· 16 16 import {Text} from './text/Text' 17 17 import {CenteredView} from './Views' 18 18 import hairlineWidth = StyleSheet.hairlineWidth 19 19 + import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' 19 20 20 21 const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} 21 22 ··· 98 99 style={[styles.backIcon, pal.text]} 99 100 /> 100 101 ) : !isTablet ? ( 101 101 - <FontAwesomeIcon 102 102 - size={18} 103 103 - icon="bars" 104 104 - style={[styles.backIcon, pal.textLight]} 105 105 - /> 102 102 + <Menu size="lg" style={[{marginTop: 3}, pal.textLight]} /> 106 103 ) : null} 107 104 </TouchableOpacity> 108 105 ) : null} ··· 269 266 backBtnWide: { 270 267 width: 30, 271 268 height: 30, 272 272 - paddingHorizontal: 6, 269 269 + paddingLeft: 4, 270 270 + marginRight: 4, 273 271 }, 274 272 backIcon: { 275 273 marginTop: 6,

+2 -3

src/view/screens/Feeds.tsx

··· 29 29 import {usePalette} from 'lib/hooks/usePalette' 30 30 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' 31 31 import {CogIcon, ComposeIcon2, MagnifyingGlassIcon2} from 'lib/icons' 32 32 - import {FeedsTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' 32 32 + import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' 33 33 import {cleanError} from 'lib/strings/errors' 34 34 import {s} from 'lib/styles' 35 35 import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' ··· 54 54 import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' 55 55 import hairlineWidth = StyleSheet.hairlineWidth 56 56 57 57 - type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'> 57 57 + type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'> 58 58 59 59 type FlatlistSlice = 60 60 | { ··· 594 594 {isMobile && ( 595 595 <ViewHeader 596 596 title={_(msg`Feeds`)} 597 597 - canGoBack={false} 598 597 renderButton={renderHeaderBtn} 599 598 showBorder 600 599 />

+1 -1

src/view/screens/Notifications.tsx

··· 163 163 return ( 164 164 <CenteredView 165 165 testID="notificationsScreen" 166 166 - style={s.hContentRegion} 166 166 + style={[s.hContentRegion, {paddingTop: 2}]} 167 167 sideBorders={true}> 168 168 <ViewHeader 169 169 title={_(msg`Notifications`)}

+4 -7

src/view/screens/Search/Search.tsx

··· 59 59 import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search' 60 60 import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' 61 61 import {atoms as a} from '#/alf' 62 62 + import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' 62 63 63 64 function Loader() { 64 65 const pal = usePalette('default') ··· 712 713 accessibilityRole="button" 713 714 accessibilityLabel={_(msg`Menu`)} 714 715 accessibilityHint={_(msg`Access navigation links and settings`)}> 715 715 - <FontAwesomeIcon 716 716 - icon="bars" 717 717 - size={18} 718 718 - color={pal.colors.textLight} 719 719 - /> 716 716 + <Menu size="lg" fill={pal.colors.textLight} /> 720 717 </Pressable> 721 718 )} 722 719 <SearchInputBox ··· 1073 1070 } 1074 1071 } 1075 1072 1076 1076 - const HEADER_HEIGHT = 50 1073 1073 + const HEADER_HEIGHT = 46 1077 1074 1078 1075 const styles = StyleSheet.create({ 1079 1076 header: { 1080 1077 flexDirection: 'row', 1081 1078 alignItems: 'center', 1082 1079 paddingHorizontal: 12, 1080 1080 + paddingLeft: 13, 1083 1081 paddingVertical: 4, 1084 1082 height: HEADER_HEIGHT, 1085 1083 // @ts-ignore web only ··· 1092 1090 height: 30, 1093 1091 borderRadius: 30, 1094 1092 marginRight: 6, 1095 1095 - paddingBottom: 2, 1096 1093 alignItems: 'center', 1097 1094 justifyContent: 'center', 1098 1095 },

+5 -4

src/view/shell/Drawer.tsx

··· 186 186 onPressTab('MyProfile') 187 187 }, [onPressTab]) 188 188 189 189 - const onPressMyFeeds = React.useCallback( 190 190 - () => onPressTab('Feeds'), 191 191 - [onPressTab], 192 192 - ) 189 189 + const onPressMyFeeds = React.useCallback(() => { 190 190 + track('Menu:ItemClicked', {url: 'Feeds'}) 191 191 + navigation.navigate('Feeds') 192 192 + setDrawerOpen(false) 193 193 + }, [navigation, setDrawerOpen, track]) 193 194 194 195 const onPressLists = React.useCallback(() => { 195 196 track('Menu:ItemClicked', {url: 'Lists'})