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