1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
import React from 'react'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
import {
usePreferencesQuery,
useSetFeedViewPreferencesMutation,
} from '#/state/queries/preferences'
import {atoms as a} from '#/alf'
import {Admonition} from '#/components/Admonition'
import * as Toggle from '#/components/forms/Toggle'
import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker'
import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble'
import {CloseQuote_Stroke2_Corner1_Rounded as QuoteIcon} from '#/components/icons/Quote'
import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
import * as Layout from '#/components/Layout'
import * as SettingsList from './components/SettingsList'
type Props = NativeStackScreenProps<
CommonNavigatorParams,
'PreferencesFollowingFeed'
>
export function FollowingFeedPreferencesScreen({}: Props) {
const {_} = useLingui()
const {data: preferences} = usePreferencesQuery()
const {mutate: setFeedViewPref, variables} =
useSetFeedViewPreferencesMutation()
const showReplies = !(
variables?.hideReplies ?? preferences?.feedViewPrefs?.hideReplies
)
const showReposts = !(
variables?.hideReposts ?? preferences?.feedViewPrefs?.hideReposts
)
const showQuotePosts = !(
variables?.hideQuotePosts ?? preferences?.feedViewPrefs?.hideQuotePosts
)
const mergeFeedEnabled = Boolean(
variables?.lab_mergeFeedEnabled ??
preferences?.feedViewPrefs?.lab_mergeFeedEnabled,
)
return (
<Layout.Screen testID="followingFeedPreferencesScreen">
<Layout.Header title={_(msg`Following Feed Preferences`)} />
<Layout.Content>
<SettingsList.Container>
<SettingsList.Item>
<Admonition type="tip" style={[a.flex_1]}>
<Trans>These settings only apply to the Following feed.</Trans>
</Admonition>
</SettingsList.Item>
<Toggle.Item
type="checkbox"
name="show-replies"
label={_(msg`Show replies`)}
value={showReplies}
onChange={value =>
setFeedViewPref({
hideReplies: !value,
})
}>
<SettingsList.Item>
<SettingsList.ItemIcon icon={BubblesIcon} />
<SettingsList.ItemText>
<Trans>Show replies</Trans>
</SettingsList.ItemText>
<Toggle.Platform />
</SettingsList.Item>
</Toggle.Item>
<Toggle.Item
type="checkbox"
name="show-reposts"
label={_(msg`Show reposts`)}
value={showReposts}
onChange={value =>
setFeedViewPref({
hideReposts: !value,
})
}>
<SettingsList.Item>
<SettingsList.ItemIcon icon={RepostIcon} />
<SettingsList.ItemText>
<Trans>Show reposts</Trans>
</SettingsList.ItemText>
<Toggle.Platform />
</SettingsList.Item>
</Toggle.Item>
<Toggle.Item
type="checkbox"
name="show-quotes"
label={_(msg`Show quote posts`)}
value={showQuotePosts}
onChange={value =>
setFeedViewPref({
hideQuotePosts: !value,
})
}>
<SettingsList.Item>
<SettingsList.ItemIcon icon={QuoteIcon} />
<SettingsList.ItemText>
<Trans>Show quote posts</Trans>
</SettingsList.ItemText>
<Toggle.Platform />
</SettingsList.Item>
</Toggle.Item>
<SettingsList.Divider />
<SettingsList.Group>
<SettingsList.ItemIcon icon={BeakerIcon} />
<SettingsList.ItemText>
<Trans>Experimental</Trans>
</SettingsList.ItemText>
<Toggle.Item
type="checkbox"
name="merge-feed"
label={_(
msg`Show samples of your saved feeds in your Following feed`,
)}
value={mergeFeedEnabled}
onChange={value =>
setFeedViewPref({
lab_mergeFeedEnabled: value,
})
}
style={[a.w_full, a.gap_md]}>
<Toggle.LabelText style={[a.flex_1]}>
<Trans>
Show samples of your saved feeds in your Following feed
</Trans>
</Toggle.LabelText>
<Toggle.Platform />
</Toggle.Item>
</SettingsList.Group>
</SettingsList.Container>
</Layout.Content>
</Layout.Screen>
)
}
|
