quilling.dev
An ATproto social media client -- with an independent Appview.
Move feeds screen into common navigator, handle usages (#4365)
* Move feeds screen into common navigator, handle usages
* Add link to Feeds from home screen (#4366)
* Add link to feeds to home screen header
* Center logo
* Replace icons
* Tweak spacing
* Tweak spacing
* Swap icon, sizing
* Buttonize, size
* Make menu same alignment on all screens
* Remove FeedsTab support, enable drawer swipe on MessagesTab
* Add note
* Vertically align header
* Swap in Pin
* Use hashtag icon
* Remove png
* Fix reference
* Ensure alignment with home and other screens
authored by
Eric Bailey
and committed by
GitHub
4b6609d4
3573f7ea
+1
assets/icons/listPlus_stroke2_corner0_rounded.svg
+1
assets/icons/listPlus_stroke2_corner0_rounded.svg
···
···
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/pin_stroke2_corner0_rounded.svg
+1
assets/icons/pin_stroke2_corner0_rounded.svg
···
···
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
assets/icons/shapes_stroke2_corner0_rounded.svg
···
···
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
assets/icons/star_filled_corner0_rounded.svg
···
···
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
assets/icons/star_stroke2_corner0_rounded.svg
···
···
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>
+9
src/components/icons/ListPlus.tsx
+9
src/components/icons/ListPlus.tsx
···
···
1
+
import {createSinglePathSVG} from './TEMPLATE'
2
+
3
+
/*
4
+
* This icon is off-menu, not part of the icon set
5
+
*/
6
+
7
+
export const ListPlus_Stroke2_Corner0_Rounded = createSinglePathSVG({
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
+
})
+5
src/components/icons/Menu.tsx
+5
src/components/icons/Menu.tsx
···
···
1
+
import {createSinglePathSVG} from './TEMPLATE'
2
+
3
+
export const Menu_Stroke2_Corner0_Rounded = createSinglePathSVG({
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
src/components/icons/Pin.tsx
+5
src/components/icons/Pin.tsx
···
···
1
+
import {createSinglePathSVG} from './TEMPLATE'
2
+
3
+
export const Pin_Stroke2_Corner0_Rounded = createSinglePathSVG({
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
src/components/icons/Shapes.tsx
+5
src/components/icons/Shapes.tsx
···
···
1
+
import {createSinglePathSVG} from './TEMPLATE'
2
+
3
+
export const Shapes_Stroke2_Corner0_Rounded = createSinglePathSVG({
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
+
})
+9
src/components/icons/Star.tsx
+9
src/components/icons/Star.tsx
···
···
1
+
import {createSinglePathSVG} from './TEMPLATE'
2
+
3
+
export const Star_Stroke2_Corner0_Rounded = createSinglePathSVG({
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
+
})
6
+
7
+
export const Star_Filled_Corner0_Rounded = createSinglePathSVG({
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
+
})
+1
-1
src/lib/routes/helpers.ts
+1
-1
src/lib/routes/helpers.ts
+1
-6
src/lib/routes/types.ts
+1
-6
src/lib/routes/types.ts
···
40
Hashtag: {tag: string; author?: string}
41
MessagesConversation: {conversation: string; embed?: string}
42
MessagesSettings: undefined
43
}
44
45
export type BottomTabNavigatorParams = CommonNavigatorParams & {
46
HomeTab: undefined
47
SearchTab: undefined
48
-
FeedsTab: undefined
49
NotificationsTab: undefined
50
MyProfileTab: undefined
51
MessagesTab: undefined
···
57
58
export type SearchTabNavigatorParams = CommonNavigatorParams & {
59
Search: {q?: string}
60
-
}
61
-
62
-
export type FeedsTabNavigatorParams = CommonNavigatorParams & {
63
-
Feeds: undefined
64
}
65
66
export type NotificationsTabNavigatorParams = CommonNavigatorParams & {
···
89
Home: undefined
90
SearchTab: undefined
91
Search: {q?: string}
92
-
FeedsTab: undefined
93
Feeds: undefined
94
NotificationsTab: undefined
95
Notifications: undefined
···
40
Hashtag: {tag: string; author?: string}
41
MessagesConversation: {conversation: string; embed?: string}
42
MessagesSettings: undefined
43
+
Feeds: undefined
44
}
45
46
export type BottomTabNavigatorParams = CommonNavigatorParams & {
47
HomeTab: undefined
48
SearchTab: undefined
49
NotificationsTab: undefined
50
MyProfileTab: undefined
51
MessagesTab: undefined
···
57
58
export type SearchTabNavigatorParams = CommonNavigatorParams & {
59
Search: {q?: string}
60
}
61
62
export type NotificationsTabNavigatorParams = CommonNavigatorParams & {
···
85
Home: undefined
86
SearchTab: undefined
87
Search: {q?: string}
88
Feeds: undefined
89
NotificationsTab: undefined
90
Notifications: undefined
-14
src/screens/Home/NoFeedsPinned.tsx
-14
src/screens/Home/NoFeedsPinned.tsx
···
3
import {TID} from '@atproto/common-web'
4
import {msg, Trans} from '@lingui/macro'
5
import {useLingui} from '@lingui/react'
6
-
import {useNavigation} from '@react-navigation/native'
7
8
import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants'
9
-
import {isNative} from '#/platform/detection'
10
import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences'
11
import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
12
-
import {NavigationProp} from 'lib/routes/types'
13
import {CenteredView} from '#/view/com/util/Views'
14
import {atoms as a} from '#/alf'
15
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
···
26
}) {
27
const {_} = useLingui()
28
const headerOffset = useHeaderOffset()
29
-
const navigation = useNavigation<NavigationProp>()
30
const {isPending, mutateAsync: overwriteSavedFeeds} =
31
useOverwriteSavedFeedsMutation()
32
···
66
await overwriteSavedFeeds(toSave)
67
}, [overwriteSavedFeeds, preferences.savedFeeds])
68
69
-
const onPressFeedsLink = React.useCallback(() => {
70
-
if (isNative) {
71
-
// Hack that's necessary due to how our navigators are set up.
72
-
navigation.navigate('FeedsTab')
73
-
navigation.popToTop()
74
-
return false
75
-
}
76
-
}, [navigation])
77
-
78
return (
79
<CenteredView sideBorders style={[a.h_full_vh]}>
80
<View
···
115
<Link
116
label={_(msg`Browse other feeds`)}
117
to="/feeds"
118
-
onPress={onPressFeedsLink}
119
size="medium"
120
variant="solid"
121
color="secondary">
···
3
import {TID} from '@atproto/common-web'
4
import {msg, Trans} from '@lingui/macro'
5
import {useLingui} from '@lingui/react'
6
7
import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants'
8
import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences'
9
import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
10
import {CenteredView} from '#/view/com/util/Views'
11
import {atoms as a} from '#/alf'
12
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
···
23
}) {
24
const {_} = useLingui()
25
const headerOffset = useHeaderOffset()
26
const {isPending, mutateAsync: overwriteSavedFeeds} =
27
useOverwriteSavedFeedsMutation()
28
···
62
await overwriteSavedFeeds(toSave)
63
}, [overwriteSavedFeeds, preferences.savedFeeds])
64
65
return (
66
<CenteredView sideBorders style={[a.h_full_vh]}>
67
<View
···
102
<Link
103
label={_(msg`Browse other feeds`)}
104
to="/feeds"
105
size="medium"
106
variant="solid"
107
color="secondary">
+1
-7
src/view/com/home/HomeHeader.tsx
+1
-7
src/view/com/home/HomeHeader.tsx
···
5
import {FeedSourceInfo} from '#/state/queries/feed'
6
import {useSession} from '#/state/session'
7
import {NavigationProp} from 'lib/routes/types'
8
-
import {isWeb} from 'platform/detection'
9
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
10
import {TabBar} from '../pager/TabBar'
11
import {HomeHeaderLayout} from './HomeHeaderLayout'
···
39
}, [hasPinnedCustom, feeds])
40
41
const onPressFeedsLink = React.useCallback(() => {
42
-
if (isWeb) {
43
-
navigation.navigate('Feeds')
44
-
} else {
45
-
navigation.navigate('FeedsTab')
46
-
navigation.popToTop()
47
-
}
48
}, [navigation])
49
50
const onSelect = React.useCallback(
···
5
import {FeedSourceInfo} from '#/state/queries/feed'
6
import {useSession} from '#/state/session'
7
import {NavigationProp} from 'lib/routes/types'
8
import {RenderTabBarFnProps} from 'view/com/pager/Pager'
9
import {TabBar} from '../pager/TabBar'
10
import {HomeHeaderLayout} from './HomeHeaderLayout'
···
38
}, [hasPinnedCustom, feeds])
39
40
const onPressFeedsLink = React.useCallback(() => {
41
+
navigation.navigate('Feeds')
42
}, [navigation])
43
44
const onSelect = React.useCallback(
+42
-31
src/view/com/home/HomeHeaderLayout.web.tsx
+42
-31
src/view/com/home/HomeHeaderLayout.web.tsx
···
1
import React from 'react'
2
import {StyleSheet, View} from 'react-native'
3
import Animated from 'react-native-reanimated'
4
-
import {
5
-
FontAwesomeIcon,
6
-
FontAwesomeIconStyle,
7
-
} from '@fortawesome/react-native-fontawesome'
8
import {msg} from '@lingui/macro'
9
import {useLingui} from '@lingui/react'
10
11
-
import {CogIcon} from '#/lib/icons'
12
import {useSession} from '#/state/session'
13
import {useShellLayout} from '#/state/shell/shell-layout'
14
import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
15
-
import {usePalette} from 'lib/hooks/usePalette'
16
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
17
import {Logo} from '#/view/icons/Logo'
18
import {useKawaiiMode} from '../../../state/preferences/kawaii'
19
-
import {Link} from '../util/Link'
20
import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
21
22
export function HomeHeaderLayout(props: {
···
38
children: React.ReactNode
39
tabBarAnchor: JSX.Element | null | undefined
40
}) {
41
-
const pal = usePalette('default')
42
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
43
const {headerHeight} = useShellLayout()
44
const {hasSession} = useSession()
···
51
{hasSession && (
52
<View
53
style={[
54
-
pal.view,
55
-
pal.border,
56
styles.bar,
57
-
styles.topBar,
58
-
kawaii && {paddingTop: 4, paddingBottom: 0},
59
]}>
60
-
<Link
61
-
href="/settings/following-feed"
62
-
hitSlop={10}
63
-
accessibilityRole="button"
64
-
accessibilityLabel={_(msg`Following Feed Preferences`)}
65
-
accessibilityHint="">
66
-
<FontAwesomeIcon
67
-
icon="sliders"
68
-
style={pal.textLight as FontAwesomeIconStyle}
69
-
/>
70
-
</Link>
71
-
<Logo width={kawaii ? 60 : 28} />
72
<Link
73
-
href="/settings/saved-feeds"
74
hitSlop={10}
75
-
accessibilityRole="button"
76
-
accessibilityLabel={_(msg`Edit Saved Feeds`)}
77
-
accessibilityHint={_(msg`Opens screen to edit Saved Feeds`)}>
78
-
<CogIcon size={22} strokeWidth={2} style={pal.textLight} />
79
</Link>
80
</View>
81
)}
···
85
headerHeight.value = e.nativeEvent.layout.height
86
}}
87
style={[
88
-
pal.view,
89
-
pal.border,
90
styles.bar,
91
styles.tabBar,
92
headerMinimalShellTransform,
···
1
import React from 'react'
2
import {StyleSheet, View} from 'react-native'
3
import Animated from 'react-native-reanimated'
4
import {msg} from '@lingui/macro'
5
import {useLingui} from '@lingui/react'
6
7
import {useSession} from '#/state/session'
8
import {useShellLayout} from '#/state/shell/shell-layout'
9
import {useMinimalShellHeaderTransform} from 'lib/hooks/useMinimalShellTransform'
10
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
11
import {Logo} from '#/view/icons/Logo'
12
+
import {atoms as a, useTheme} from '#/alf'
13
+
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
14
+
import {Link} from '#/components/Link'
15
import {useKawaiiMode} from '../../../state/preferences/kawaii'
16
import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile'
17
18
export function HomeHeaderLayout(props: {
···
34
children: React.ReactNode
35
tabBarAnchor: JSX.Element | null | undefined
36
}) {
37
+
const t = useTheme()
38
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
39
const {headerHeight} = useShellLayout()
40
const {hasSession} = useSession()
···
47
{hasSession && (
48
<View
49
style={[
50
+
a.relative,
51
+
a.flex_row,
52
+
a.justify_end,
53
+
a.align_center,
54
+
a.pt_lg,
55
+
a.px_md,
56
+
a.pb_2xs,
57
+
t.atoms.bg,
58
+
t.atoms.border_contrast_low,
59
styles.bar,
60
]}>
61
+
<View
62
+
style={[
63
+
a.absolute,
64
+
a.inset_0,
65
+
a.pt_lg,
66
+
a.m_auto,
67
+
kawaii && {paddingTop: 4, paddingBottom: 0},
68
+
{
69
+
width: kawaii ? 60 : 28,
70
+
},
71
+
]}>
72
+
<Logo width={kawaii ? 60 : 28} />
73
+
</View>
74
+
75
<Link
76
+
to="/feeds"
77
hitSlop={10}
78
+
label={_(msg`View your feeds and explore more`)}
79
+
size="small"
80
+
variant="ghost"
81
+
color="secondary"
82
+
shape="square"
83
+
style={[
84
+
a.justify_center,
85
+
{
86
+
marginTop: -4,
87
+
},
88
+
]}>
89
+
<FeedsIcon size="md" fill={t.atoms.text_contrast_medium.color} />
90
</Link>
91
</View>
92
)}
···
96
headerHeight.value = e.nativeEvent.layout.height
97
}}
98
style={[
99
+
t.atoms.bg,
100
+
t.atoms.border_contrast_low,
101
styles.bar,
102
styles.tabBar,
103
headerMinimalShellTransform,
+25
-21
src/view/com/home/HomeHeaderLayoutMobile.tsx
+25
-21
src/view/com/home/HomeHeaderLayoutMobile.tsx
···
1
import React from 'react'
2
import {StyleSheet, TouchableOpacity, View} from 'react-native'
3
import Animated from 'react-native-reanimated'
4
-
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
5
-
import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
6
import {msg} from '@lingui/macro'
7
import {useLingui} from '@lingui/react'
8
···
15
import {isWeb} from 'platform/detection'
16
import {Logo} from '#/view/icons/Logo'
17
import {atoms} from '#/alf'
18
import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
19
-
import {Link as Link2} from '#/components/Link'
20
import {IS_DEV} from '#/env'
21
-
import {Link} from '../util/Link'
22
23
export function HomeHeaderLayoutMobile({
24
children,
···
26
children: React.ReactNode
27
tabBarAnchor: JSX.Element | null | undefined
28
}) {
29
const pal = usePalette('default')
30
const {_} = useLingui()
31
const setDrawerOpen = useSetDrawerOpen()
···
54
msg`Access profile and other navigation links`,
55
)}
56
hitSlop={HITSLOP_10}>
57
-
<FontAwesomeIcon
58
-
icon="bars"
59
-
size={18}
60
-
color={pal.colors.textLight}
61
-
/>
62
</TouchableOpacity>
63
</View>
64
<View>
···
74
{width: 100},
75
]}>
76
{IS_DEV && (
77
-
<Link2 to="/sys/debug">
78
<ColorPalette size="md" />
79
-
</Link2>
80
)}
81
{hasSession && (
82
<Link
83
testID="viewHeaderHomeFeedPrefsBtn"
84
-
href="/settings/following-feed"
85
hitSlop={HITSLOP_10}
86
-
accessibilityRole="button"
87
-
accessibilityLabel={_(msg`Following Feed Preferences`)}
88
-
accessibilityHint="">
89
-
<FontAwesomeIcon
90
-
icon="sliders"
91
-
style={pal.textLight as FontAwesomeIconStyle}
92
-
/>
93
</Link>
94
)}
95
</View>
···
113
flexDirection: 'row',
114
justifyContent: 'space-between',
115
alignItems: 'center',
116
-
paddingHorizontal: 18,
117
-
paddingVertical: 8,
118
width: '100%',
119
},
120
title: {
···
1
import React from 'react'
2
import {StyleSheet, TouchableOpacity, View} from 'react-native'
3
import Animated from 'react-native-reanimated'
4
import {msg} from '@lingui/macro'
5
import {useLingui} from '@lingui/react'
6
···
13
import {isWeb} from 'platform/detection'
14
import {Logo} from '#/view/icons/Logo'
15
import {atoms} from '#/alf'
16
+
import {useTheme} from '#/alf'
17
+
import {atoms as a} from '#/alf'
18
import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette'
19
+
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
20
+
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
21
+
import {Link} from '#/components/Link'
22
import {IS_DEV} from '#/env'
23
24
export function HomeHeaderLayoutMobile({
25
children,
···
27
children: React.ReactNode
28
tabBarAnchor: JSX.Element | null | undefined
29
}) {
30
+
const t = useTheme()
31
const pal = usePalette('default')
32
const {_} = useLingui()
33
const setDrawerOpen = useSetDrawerOpen()
···
56
msg`Access profile and other navigation links`,
57
)}
58
hitSlop={HITSLOP_10}>
59
+
<Menu size="lg" fill={t.atoms.text_contrast_medium.color} />
60
</TouchableOpacity>
61
</View>
62
<View>
···
72
{width: 100},
73
]}>
74
{IS_DEV && (
75
+
<Link to="/sys/debug">
76
<ColorPalette size="md" />
77
+
</Link>
78
)}
79
{hasSession && (
80
<Link
81
testID="viewHeaderHomeFeedPrefsBtn"
82
+
to="/feeds"
83
hitSlop={HITSLOP_10}
84
+
label={_(msg`View your feeds and explore more`)}
85
+
size="small"
86
+
variant="ghost"
87
+
color="secondary"
88
+
shape="square"
89
+
style={[
90
+
a.justify_center,
91
+
{
92
+
marginTop: 2,
93
+
marginRight: -6,
94
+
},
95
+
]}>
96
+
<FeedsIcon size="lg" fill={t.atoms.text_contrast_medium.color} />
97
</Link>
98
)}
99
</View>
···
117
flexDirection: 'row',
118
justifyContent: 'space-between',
119
alignItems: 'center',
120
+
paddingHorizontal: 16,
121
+
paddingVertical: 5,
122
width: '100%',
123
},
124
title: {
+7
-11
src/view/com/posts/FollowingEmptyState.tsx
+7
-11
src/view/com/posts/FollowingEmptyState.tsx
···
1
import React from 'react'
2
import {StyleSheet, View} from 'react-native'
3
-
import {useNavigation} from '@react-navigation/native'
4
import {
5
FontAwesomeIcon,
6
FontAwesomeIconStyle,
7
} from '@fortawesome/react-native-fontawesome'
8
-
import {Text} from '../util/text/Text'
9
-
import {Button} from '../util/forms/Button'
10
import {MagnifyingGlassIcon} from 'lib/icons'
11
import {NavigationProp} from 'lib/routes/types'
12
-
import {usePalette} from 'lib/hooks/usePalette'
13
import {s} from 'lib/styles'
14
import {isWeb} from 'platform/detection'
15
-
import {Trans} from '@lingui/macro'
16
17
export function FollowingEmptyState() {
18
const pal = usePalette('default')
···
29
}, [navigation])
30
31
const onPressDiscoverFeeds = React.useCallback(() => {
32
-
if (isWeb) {
33
-
navigation.navigate('Feeds')
34
-
} else {
35
-
navigation.navigate('FeedsTab')
36
-
navigation.popToTop()
37
-
}
38
}, [navigation])
39
40
return (
···
1
import React from 'react'
2
import {StyleSheet, View} from 'react-native'
3
import {
4
FontAwesomeIcon,
5
FontAwesomeIconStyle,
6
} from '@fortawesome/react-native-fontawesome'
7
+
import {Trans} from '@lingui/macro'
8
+
import {useNavigation} from '@react-navigation/native'
9
+
10
+
import {usePalette} from 'lib/hooks/usePalette'
11
import {MagnifyingGlassIcon} from 'lib/icons'
12
import {NavigationProp} from 'lib/routes/types'
13
import {s} from 'lib/styles'
14
import {isWeb} from 'platform/detection'
15
+
import {Button} from '../util/forms/Button'
16
+
import {Text} from '../util/text/Text'
17
18
export function FollowingEmptyState() {
19
const pal = usePalette('default')
···
30
}, [navigation])
31
32
const onPressDiscoverFeeds = React.useCallback(() => {
33
+
navigation.navigate('Feeds')
34
}, [navigation])
35
36
return (
+8
-12
src/view/com/posts/FollowingEndOfFeed.tsx
+8
-12
src/view/com/posts/FollowingEndOfFeed.tsx
···
1
import React from 'react'
2
-
import {StyleSheet, View, Dimensions} from 'react-native'
3
-
import {useNavigation} from '@react-navigation/native'
4
import {
5
FontAwesomeIcon,
6
FontAwesomeIconStyle,
7
} from '@fortawesome/react-native-fontawesome'
8
-
import {Text} from '../util/text/Text'
9
-
import {Button} from '../util/forms/Button'
10
-
import {NavigationProp} from 'lib/routes/types'
11
import {usePalette} from 'lib/hooks/usePalette'
12
import {s} from 'lib/styles'
13
import {isWeb} from 'platform/detection'
14
-
import {Trans} from '@lingui/macro'
15
16
export function FollowingEndOfFeed() {
17
const pal = usePalette('default')
···
28
}, [navigation])
29
30
const onPressDiscoverFeeds = React.useCallback(() => {
31
-
if (isWeb) {
32
-
navigation.navigate('Feeds')
33
-
} else {
34
-
navigation.navigate('FeedsTab')
35
-
navigation.popToTop()
36
-
}
37
}, [navigation])
38
39
return (
···
1
import React from 'react'
2
+
import {Dimensions, StyleSheet, View} from 'react-native'
3
import {
4
FontAwesomeIcon,
5
FontAwesomeIconStyle,
6
} from '@fortawesome/react-native-fontawesome'
7
+
import {Trans} from '@lingui/macro'
8
+
import {useNavigation} from '@react-navigation/native'
9
+
10
import {usePalette} from 'lib/hooks/usePalette'
11
+
import {NavigationProp} from 'lib/routes/types'
12
import {s} from 'lib/styles'
13
import {isWeb} from 'platform/detection'
14
+
import {Button} from '../util/forms/Button'
15
+
import {Text} from '../util/text/Text'
16
17
export function FollowingEndOfFeed() {
18
const pal = usePalette('default')
···
29
}, [navigation])
30
31
const onPressDiscoverFeeds = React.useCallback(() => {
32
+
navigation.navigate('Feeds')
33
}, [navigation])
34
35
return (
+3
-6
src/view/com/profile/ProfileSubpageHeader.tsx
+3
-6
src/view/com/profile/ProfileSubpageHeader.tsx
···
21
import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
22
import {CenteredView} from '../util/Views'
23
import hairlineWidth = StyleSheet.hairlineWidth
24
25
export function ProfileSubpageHeader({
26
isLoading,
···
103
style={[styles.backIcon, pal.text]}
104
/>
105
) : (
106
-
<FontAwesomeIcon
107
-
size={18}
108
-
icon="bars"
109
-
style={[styles.backIcon, pal.textLight]}
110
-
/>
111
)}
112
</Pressable>
113
<View style={{flex: 1}} />
···
194
backBtnWide: {
195
width: 20,
196
height: 30,
197
-
paddingHorizontal: 6,
198
},
199
backIcon: {
200
marginTop: 6,
···
21
import {UserAvatar, UserAvatarType} from '../util/UserAvatar'
22
import {CenteredView} from '../util/Views'
23
import hairlineWidth = StyleSheet.hairlineWidth
24
+
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
25
26
export function ProfileSubpageHeader({
27
isLoading,
···
104
style={[styles.backIcon, pal.text]}
105
/>
106
) : (
107
+
<Menu size="lg" style={[{marginTop: 4}, pal.textLight]} />
108
)}
109
</Pressable>
110
<View style={{flex: 1}} />
···
191
backBtnWide: {
192
width: 20,
193
height: 30,
194
+
marginRight: 4,
195
},
196
backIcon: {
197
marginTop: 6,
+1
-1
src/view/com/testing/TestCtrls.e2e.tsx
+1
-1
src/view/com/testing/TestCtrls.e2e.tsx
+9
-10
src/view/com/util/SimpleViewHeader.tsx
+9
-10
src/view/com/util/SimpleViewHeader.tsx
···
8
} from 'react-native'
9
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
10
import {useNavigation} from '@react-navigation/native'
11
-
import {CenteredView} from './Views'
12
import {usePalette} from 'lib/hooks/usePalette'
13
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
14
-
import {useAnalytics} from 'lib/analytics/analytics'
15
import {NavigationProp} from 'lib/routes/types'
16
-
import {useSetDrawerOpen} from '#/state/shell'
17
-
import {isWeb} from '#/platform/detection'
18
19
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
20
···
72
style={[styles.backIcon, pal.text]}
73
/>
74
) : (
75
-
<FontAwesomeIcon
76
-
size={18}
77
-
icon="bars"
78
-
style={[styles.backIcon, pal.textLight]}
79
-
/>
80
)}
81
</TouchableOpacity>
82
) : null}
···
110
backBtnWide: {
111
width: 30,
112
height: 30,
113
-
paddingHorizontal: 6,
114
},
115
backIcon: {
116
marginTop: 6,
···
8
} from 'react-native'
9
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
10
import {useNavigation} from '@react-navigation/native'
11
+
12
+
import {isWeb} from '#/platform/detection'
13
+
import {useSetDrawerOpen} from '#/state/shell'
14
+
import {useAnalytics} from 'lib/analytics/analytics'
15
import {usePalette} from 'lib/hooks/usePalette'
16
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
17
import {NavigationProp} from 'lib/routes/types'
18
+
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
19
+
import {CenteredView} from './Views'
20
21
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
22
···
74
style={[styles.backIcon, pal.text]}
75
/>
76
) : (
77
+
<Menu size="lg" style={[{marginTop: 4}, pal.textLight]} />
78
)}
79
</TouchableOpacity>
80
) : null}
···
108
backBtnWide: {
109
width: 30,
110
height: 30,
111
+
paddingLeft: 4,
112
+
marginRight: 4,
113
},
114
backIcon: {
115
marginTop: 6,
+4
-6
src/view/com/util/ViewHeader.tsx
+4
-6
src/view/com/util/ViewHeader.tsx
···
16
import {Text} from './text/Text'
17
import {CenteredView} from './Views'
18
import hairlineWidth = StyleSheet.hairlineWidth
19
20
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
21
···
98
style={[styles.backIcon, pal.text]}
99
/>
100
) : !isTablet ? (
101
-
<FontAwesomeIcon
102
-
size={18}
103
-
icon="bars"
104
-
style={[styles.backIcon, pal.textLight]}
105
-
/>
106
) : null}
107
</TouchableOpacity>
108
) : null}
···
269
backBtnWide: {
270
width: 30,
271
height: 30,
272
-
paddingHorizontal: 6,
273
},
274
backIcon: {
275
marginTop: 6,
···
16
import {Text} from './text/Text'
17
import {CenteredView} from './Views'
18
import hairlineWidth = StyleSheet.hairlineWidth
19
+
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
20
21
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
22
···
99
style={[styles.backIcon, pal.text]}
100
/>
101
) : !isTablet ? (
102
+
<Menu size="lg" style={[{marginTop: 3}, pal.textLight]} />
103
) : null}
104
</TouchableOpacity>
105
) : null}
···
266
backBtnWide: {
267
width: 30,
268
height: 30,
269
+
paddingLeft: 4,
270
+
marginRight: 4,
271
},
272
backIcon: {
273
marginTop: 6,
+2
-3
src/view/screens/Feeds.tsx
+2
-3
src/view/screens/Feeds.tsx
···
29
import {usePalette} from 'lib/hooks/usePalette'
30
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
31
import {CogIcon, ComposeIcon2, MagnifyingGlassIcon2} from 'lib/icons'
32
-
import {FeedsTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
33
import {cleanError} from 'lib/strings/errors'
34
import {s} from 'lib/styles'
35
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
···
54
import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
55
import hairlineWidth = StyleSheet.hairlineWidth
56
57
-
type Props = NativeStackScreenProps<FeedsTabNavigatorParams, 'Feeds'>
58
59
type FlatlistSlice =
60
| {
···
594
{isMobile && (
595
<ViewHeader
596
title={_(msg`Feeds`)}
597
-
canGoBack={false}
598
renderButton={renderHeaderBtn}
599
showBorder
600
/>
···
29
import {usePalette} from 'lib/hooks/usePalette'
30
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
31
import {CogIcon, ComposeIcon2, MagnifyingGlassIcon2} from 'lib/icons'
32
+
import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
33
import {cleanError} from 'lib/strings/errors'
34
import {s} from 'lib/styles'
35
import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard'
···
54
import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
55
import hairlineWidth = StyleSheet.hairlineWidth
56
57
+
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'>
58
59
type FlatlistSlice =
60
| {
···
594
{isMobile && (
595
<ViewHeader
596
title={_(msg`Feeds`)}
597
renderButton={renderHeaderBtn}
598
showBorder
599
/>
+1
-1
src/view/screens/Notifications.tsx
+1
-1
src/view/screens/Notifications.tsx
+4
-7
src/view/screens/Search/Search.tsx
+4
-7
src/view/screens/Search/Search.tsx
···
59
import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
60
import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
61
import {atoms as a} from '#/alf'
62
63
function Loader() {
64
const pal = usePalette('default')
···
712
accessibilityRole="button"
713
accessibilityLabel={_(msg`Menu`)}
714
accessibilityHint={_(msg`Access navigation links and settings`)}>
715
-
<FontAwesomeIcon
716
-
icon="bars"
717
-
size={18}
718
-
color={pal.colors.textLight}
719
-
/>
720
</Pressable>
721
)}
722
<SearchInputBox
···
1073
}
1074
}
1075
1076
-
const HEADER_HEIGHT = 50
1077
1078
const styles = StyleSheet.create({
1079
header: {
1080
flexDirection: 'row',
1081
alignItems: 'center',
1082
paddingHorizontal: 12,
1083
paddingVertical: 4,
1084
height: HEADER_HEIGHT,
1085
// @ts-ignore web only
···
1092
height: 30,
1093
borderRadius: 30,
1094
marginRight: 6,
1095
-
paddingBottom: 2,
1096
alignItems: 'center',
1097
justifyContent: 'center',
1098
},
···
59
import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
60
import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
61
import {atoms as a} from '#/alf'
62
+
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
63
64
function Loader() {
65
const pal = usePalette('default')
···
713
accessibilityRole="button"
714
accessibilityLabel={_(msg`Menu`)}
715
accessibilityHint={_(msg`Access navigation links and settings`)}>
716
+
<Menu size="lg" fill={pal.colors.textLight} />
717
</Pressable>
718
)}
719
<SearchInputBox
···
1070
}
1071
}
1072
1073
+
const HEADER_HEIGHT = 46
1074
1075
const styles = StyleSheet.create({
1076
header: {
1077
flexDirection: 'row',
1078
alignItems: 'center',
1079
paddingHorizontal: 12,
1080
+
paddingLeft: 13,
1081
paddingVertical: 4,
1082
height: HEADER_HEIGHT,
1083
// @ts-ignore web only
···
1090
height: 30,
1091
borderRadius: 30,
1092
marginRight: 6,
1093
alignItems: 'center',
1094
justifyContent: 'center',
1095
},
+5
-4
src/view/shell/Drawer.tsx
+5
-4
src/view/shell/Drawer.tsx
···
186
onPressTab('MyProfile')
187
}, [onPressTab])
188
189
+
const onPressMyFeeds = React.useCallback(() => {
190
+
track('Menu:ItemClicked', {url: 'Feeds'})
191
+
navigation.navigate('Feeds')
192
+
setDrawerOpen(false)
193
+
}, [navigation, setDrawerOpen, track])
194
195
const onPressLists = React.useCallback(() => {
196
track('Menu:ItemClicked', {url: 'Lists'})