From aa6aad652e8091ea6039af82f41d4de3669a5944 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 31 Oct 2024 20:45:34 +0000 Subject: [Settings] Thread prefs revamp (#5772) * thread preferences screen * minor tweaks * more spacing * replace gate with IS_INTERNAL * [Settings] Following feed prefs revamp (#5773) * gated new settings screen * Following feed prefs * Update src/screens/Settings/FollowingFeedPreferences.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * Update src/screens/Settings/FollowingFeedPreferences.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * replace pref following feed gate * Update src/screens/Settings/FollowingFeedPreferences.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * use "Experimental" as the header --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * [Settings] External media prefs revamp (#5774) * gated new settings screen * external media prefs revamp * replace gate ext media embeds * Update src/screens/Settings/ExternalMediaPreferences.tsx Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * add imports for translation * alternate list style on native --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * [Settings] Languages revamp (partial) (#5775) * language settings (lazy restyle) * replace gate * fix text determining flex space * [Settings] App passwords revamp (#5777) * rework app passwords screen * Apply surfdude's copy changes Thanks @surfdude29! Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * format * replace gate * use admonition for input error and animate --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * [Settings] Change handle dialog (#5781) * new change handle dialog * animations native only * overflow hidden on togglebutton animation * add a low-contrast border * extract out copybutton * finish change handle dialog * invalidate query on success * web fixes * error message for rate limit exceeded * typo * em dash! Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * another em dash Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * set maxwidth of suffixtext * Copy tweak Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * [Settings] Notifs settings revamp (#5884) * rename, move, and restyle notif settings * bold "experimental:" --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> --- src/Navigation.tsx | 6 +- src/components/Admonition.tsx | 2 +- src/components/forms/TextField.tsx | 1 + src/components/icons/Beaker.tsx | 5 + src/lib/routes/types.ts | 2 +- src/routes.ts | 2 +- src/screens/Settings/AccountSettings.tsx | 26 +- src/screens/Settings/AppPasswords.tsx | 209 +++++++ src/screens/Settings/ExternalMediaPreferences.tsx | 99 ++++ src/screens/Settings/FollowingFeedPreferences.tsx | 143 +++++ src/screens/Settings/LanguageSettings.tsx | 275 ++++++++++ src/screens/Settings/NotificationSettings.tsx | 85 +++ src/screens/Settings/Settings.tsx | 1 + src/screens/Settings/ThreadPreferences.tsx | 145 +++++ .../Settings/components/AddAppPasswordDialog.tsx | 280 ++++++++++ .../Settings/components/ChangeHandleDialog.tsx | 602 +++++++++++++++++++++ src/screens/Settings/components/CopyButton.tsx | 69 +++ src/screens/Settings/components/SettingsList.tsx | 14 +- src/state/queries/handle.ts | 5 +- src/state/queries/notifications/settings.ts | 2 +- src/view/screens/AppPasswords.tsx | 8 +- src/view/screens/LanguageSettings.tsx | 12 +- src/view/screens/NotificationsSettings.tsx | 89 --- src/view/screens/PreferencesExternalEmbeds.tsx | 12 +- src/view/screens/PreferencesFollowingFeed.tsx | 12 +- src/view/screens/PreferencesThreads.tsx | 12 +- 26 files changed, 1990 insertions(+), 128 deletions(-) create mode 100644 src/components/icons/Beaker.tsx create mode 100644 src/screens/Settings/AppPasswords.tsx create mode 100644 src/screens/Settings/ExternalMediaPreferences.tsx create mode 100644 src/screens/Settings/FollowingFeedPreferences.tsx create mode 100644 src/screens/Settings/LanguageSettings.tsx create mode 100644 src/screens/Settings/NotificationSettings.tsx create mode 100644 src/screens/Settings/ThreadPreferences.tsx create mode 100644 src/screens/Settings/components/AddAppPasswordDialog.tsx create mode 100644 src/screens/Settings/components/ChangeHandleDialog.tsx create mode 100644 src/screens/Settings/components/CopyButton.tsx delete mode 100644 src/view/screens/NotificationsSettings.tsx (limited to 'src') diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 436f2488a..efe4b8c29 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -55,7 +55,6 @@ import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists' import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts' import {NotFoundScreen} from '#/view/screens/NotFound' import {NotificationsScreen} from '#/view/screens/Notifications' -import {NotificationsSettingsScreen} from '#/view/screens/NotificationsSettings' import {PostThreadScreen} from '#/view/screens/PostThread' import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds' import {PreferencesFollowingFeed} from '#/view/screens/PreferencesFollowingFeed' @@ -87,6 +86,7 @@ import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy' import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers' import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy' import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings' +import {NotificationSettingsScreen} from '#/screens/Settings/NotificationSettings' import { StarterPackScreen, StarterPackScreenShort, @@ -378,8 +378,8 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) { options={{title: title(msg`Chat settings`), requireAuth: true}} /> NotificationsSettingsScreen} + name="NotificationSettings" + getComponent={() => NotificationSettingsScreen} options={{title: title(msg`Notification settings`), requireAuth: true}} /> @@ -32,10 +30,9 @@ export function AccountSettingsScreen({}: Props) { const t = useTheme() const {_} = useLingui() const {currentAccount} = useSession() - const queryClient = useQueryClient() - const {data: profile} = useProfileQuery({did: currentAccount?.did}) const {openModal} = useModalControls() const birthdayControl = useDialogControl() + const changeHandleControl = useDialogControl() const exportCarControl = useDialogControl() const deactivateAccountControl = useDialogControl() @@ -117,26 +114,12 @@ export function AccountSettingsScreen({}: Props) { - openModal({ - name: 'change-handle', - onChanged() { - if (currentAccount) { - // refresh my profile - queryClient.invalidateQueries({ - queryKey: RQKEY_PROFILE(currentAccount.did), - }) - } - }, - }) - }> + accessibilityHint={_(msg`Open change handle dialog`)} + onPress={() => changeHandleControl.open()}> Handle - {profile && ( - @{profile.handle} - )} @@ -173,6 +156,7 @@ export function AccountSettingsScreen({}: Props) { + diff --git a/src/screens/Settings/AppPasswords.tsx b/src/screens/Settings/AppPasswords.tsx new file mode 100644 index 000000000..8cebf97ce --- /dev/null +++ b/src/screens/Settings/AppPasswords.tsx @@ -0,0 +1,209 @@ +import React, {useCallback} from 'react' +import {View} from 'react-native' +import Animated, { + FadeIn, + FadeOut, + LayoutAnimationConfig, + LinearTransition, + StretchOutY, +} from 'react-native-reanimated' +import {ComAtprotoServerListAppPasswords} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {NativeStackScreenProps} from '@react-navigation/native-stack' + +import {CommonNavigatorParams} from '#/lib/routes/types' +import {cleanError} from '#/lib/strings/errors' +import {isWeb} from '#/platform/detection' +import { + useAppPasswordDeleteMutation, + useAppPasswordsQuery, +} from '#/state/queries/app-passwords' +import {EmptyState} from '#/view/com/util/EmptyState' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import * as Toast from '#/view/com/util/Toast' +import {atoms as a, useTheme} from '#/alf' +import {Admonition, colors} from '#/components/Admonition' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {useDialogControl} from '#/components/Dialog' +import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus' +import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash' +import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning' +import * as Layout from '#/components/Layout' +import {Loader} from '#/components/Loader' +import * as Prompt from '#/components/Prompt' +import {Text} from '#/components/Typography' +import {AddAppPasswordDialog} from './components/AddAppPasswordDialog' +import * as SettingsList from './components/SettingsList' + +type Props = NativeStackScreenProps +export function AppPasswordsScreen({}: Props) { + const {_} = useLingui() + const {data: appPasswords, error} = useAppPasswordsQuery() + const createAppPasswordControl = useDialogControl() + + return ( + + + + {error ? ( + + ) : ( + + + + + Use app passwords to sign in to other Bluesky clients without + giving full access to your account or password. + + + + + + + + + {appPasswords ? ( + appPasswords.length > 0 ? ( + + {appPasswords.map(appPassword => ( + + + + + + ))} + + ) : ( + + ) + ) : ( + + + + )} + + + )} + + + p.name) || []} + /> + + ) +} + +function AppPasswordCard({ + appPassword, +}: { + appPassword: ComAtprotoServerListAppPasswords.AppPassword +}) { + const t = useTheme() + const {i18n, _} = useLingui() + const deleteControl = Prompt.usePromptControl() + const {mutateAsync: deleteMutation} = useAppPasswordDeleteMutation() + + const onDelete = useCallback(async () => { + await deleteMutation({name: appPassword.name}) + Toast.show(_(msg`App password deleted`)) + }, [deleteMutation, appPassword.name, _]) + + return ( + + + + + {appPassword.name} + + + + Created{' '} + {i18n.date(appPassword.createdAt, { + year: 'numeric', + month: 'numeric', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + })} + + + + + + {appPassword.privileged && ( + + + + Allows access to direct messages + + + )} + + + + ) +} diff --git a/src/screens/Settings/ExternalMediaPreferences.tsx b/src/screens/Settings/ExternalMediaPreferences.tsx new file mode 100644 index 000000000..91c7ea7fc --- /dev/null +++ b/src/screens/Settings/ExternalMediaPreferences.tsx @@ -0,0 +1,99 @@ +import React, {Fragment} from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import { + EmbedPlayerSource, + externalEmbedLabels, +} from '#/lib/strings/embed-player' +import { + useExternalEmbedsPrefs, + useSetExternalEmbedPref, +} from '#/state/preferences' +import {atoms as a, native} from '#/alf' +import {Admonition} from '#/components/Admonition' +import * as Toggle from '#/components/forms/Toggle' +import * as Layout from '#/components/Layout' +import * as SettingsList from './components/SettingsList' + +type Props = NativeStackScreenProps< + CommonNavigatorParams, + 'PreferencesExternalEmbeds' +> +export function ExternalMediaPreferencesScreen({}: Props) { + const {_} = useLingui() + return ( + + + + + + + + External media may allow websites to collect information about + you and your device. No information is sent or requested until + you press the "play" button. + + + + + + Enable media players for + + + {native()} + {Object.entries(externalEmbedLabels) + // TODO: Remove special case when we disable the old integration. + .filter(([key]) => key !== 'tenor') + .map(([key, label]) => ( + + + {native()} + + ))} + + + + + + ) +} + +function PrefSelector({ + source, + label, +}: { + source: EmbedPlayerSource + label: string +}) { + const setExternalEmbedPref = useSetExternalEmbedPref() + const sources = useExternalEmbedsPrefs() + + return ( + + setExternalEmbedPref( + source, + sources?.[source] === 'show' ? 'hide' : 'show', + ) + } + style={[ + a.flex_1, + a.py_md, + native([a.justify_between, a.flex_row_reverse]), + ]}> + + {label} + + ) +} diff --git a/src/screens/Settings/FollowingFeedPreferences.tsx b/src/screens/Settings/FollowingFeedPreferences.tsx new file mode 100644 index 000000000..12de2a31a --- /dev/null +++ b/src/screens/Settings/FollowingFeedPreferences.tsx @@ -0,0 +1,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 ( + + + + + + + These settings only apply to the Following feed. + + + + setFeedViewPref({ + hideReplies: !value, + }) + }> + + + + Show replies + + + + + + setFeedViewPref({ + hideReposts: !value, + }) + }> + + + + Show reposts + + + + + + setFeedViewPref({ + hideQuotePosts: !value, + }) + }> + + + + Show quote posts + + + + + + + + + Experimental + + + setFeedViewPref({ + lab_mergeFeedEnabled: value, + }) + } + style={[a.w_full, a.gap_md]}> + + + Show samples of your saved feeds in your Following feed + + + + + + + + + ) +} diff --git a/src/screens/Settings/LanguageSettings.tsx b/src/screens/Settings/LanguageSettings.tsx new file mode 100644 index 000000000..c6cd8bb5a --- /dev/null +++ b/src/screens/Settings/LanguageSettings.tsx @@ -0,0 +1,275 @@ +import React, {useCallback, useMemo} from 'react' +import {View} from 'react-native' +import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useModalControls} from '#/state/modals' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {atoms as a, useTheme, web} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check' +import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon} from '#/components/icons/Chevron' +import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus' +import * as Layout from '#/components/Layout' +import {Text} from '#/components/Typography' +import * as SettingsList from './components/SettingsList' + +type Props = NativeStackScreenProps +export function LanguageSettingsScreen({}: Props) { + const {_} = useLingui() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() + const t = useTheme() + + const {openModal} = useModalControls() + + const onPressContentLanguages = useCallback(() => { + openModal({name: 'content-languages-settings'}) + }, [openModal]) + + const onChangePrimaryLanguage = useCallback( + (value: Parameters[0]) => { + if (!value) return + if (langPrefs.primaryLanguage !== value) { + setLangPrefs.setPrimaryLanguage(value) + } + }, + [langPrefs, setLangPrefs], + ) + + const onChangeAppLanguage = useCallback( + (value: Parameters[0]) => { + if (!value) return + if (langPrefs.appLanguage !== value) { + setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value)) + } + }, + [langPrefs, setLangPrefs], + ) + + const myLanguages = useMemo(() => { + return ( + langPrefs.contentLanguages + .map(lang => LANGUAGES.find(l => l.code2 === lang)) + .filter(Boolean) + // @ts-ignore + .map(l => l.name) + .join(', ') + ) + }, [langPrefs.contentLanguages]) + + return ( + + + + + + + App Language + + + + + Select your app language for the default text to display in + the app. + + + + Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2, + }))} + style={{ + inputAndroid: { + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + inputIOS: { + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + inputWeb: { + flex: 1, + width: '100%', + cursor: 'pointer', + // @ts-ignore web only + '-moz-appearance': 'none', + '-webkit-appearance': 'none', + appearance: 'none', + outline: 0, + borderWidth: 0, + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + fontFamily: 'inherit', + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + }} + /> + + + + + + + + + + + Primary Language + + + + + Select your preferred language for translations in your feed. + + + + Boolean(l.code2)).map(l => ({ + label: l.name, + value: l.code2, + key: l.code2 + l.code3, + }))} + style={{ + inputAndroid: { + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + inputIOS: { + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + inputWeb: { + flex: 1, + width: '100%', + cursor: 'pointer', + // @ts-ignore web only + '-moz-appearance': 'none', + '-webkit-appearance': 'none', + appearance: 'none', + outline: 0, + borderWidth: 0, + backgroundColor: t.atoms.bg_contrast_25.backgroundColor, + color: t.atoms.text.color, + fontSize: 14, + fontFamily: 'inherit', + letterSpacing: 0.5, + fontWeight: a.font_bold.fontWeight, + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: a.rounded_xs.borderRadius, + }, + }} + /> + + + + + + + + + + + Content Languages + + + + + Select which languages you want your subscribed feeds to + include. If none are selected, all languages will be shown. + + + + + + + + + + ) +} diff --git a/src/screens/Settings/NotificationSettings.tsx b/src/screens/Settings/NotificationSettings.tsx new file mode 100644 index 000000000..8e1033742 --- /dev/null +++ b/src/screens/Settings/NotificationSettings.tsx @@ -0,0 +1,85 @@ +import React from 'react' +import {Text} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {AllNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {useNotificationFeedQuery} from '#/state/queries/notifications/feed' +import {useNotificationSettingsMutation} from '#/state/queries/notifications/settings' +import {atoms as a} from '#/alf' +import {Admonition} from '#/components/Admonition' +import {Error} from '#/components/Error' +import * as Toggle from '#/components/forms/Toggle' +import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker' +import * as Layout from '#/components/Layout' +import {Loader} from '#/components/Loader' +import * as SettingsList from './components/SettingsList' + +type Props = NativeStackScreenProps +export function NotificationSettingsScreen({}: Props) { + const {_} = useLingui() + + const {data, isError: isQueryError, refetch} = useNotificationFeedQuery() + const serverPriority = data?.pages.at(0)?.priority + + const { + mutate: onChangePriority, + isPending: isMutationPending, + variables, + } = useNotificationSettingsMutation() + + const priority = isMutationPending + ? variables[0] === 'enabled' + : serverPriority + + return ( + + + + {isQueryError ? ( + + ) : ( + + + + + Notification filters + + + + + Enable priority notifications + + {!data ? : } + + + + + + + Experimental: When this + preference is enabled, you'll only receive reply and quote + notifications from users you follow. We'll continue to add + more controls here over time. + + + + + )} + + + ) +} diff --git a/src/screens/Settings/Settings.tsx b/src/screens/Settings/Settings.tsx index 789ffb56f..bfdb79135 100644 --- a/src/screens/Settings/Settings.tsx +++ b/src/screens/Settings/Settings.tsx @@ -60,6 +60,7 @@ export function SettingsScreen({}: Props) { +export function ThreadPreferencesScreen({}: Props) { + const {_} = useLingui() + const t = useTheme() + + const {data: preferences} = usePreferencesQuery() + const {mutate: setThreadViewPrefs, variables} = + useSetThreadViewPreferencesMutation() + + const sortReplies = variables?.sort ?? preferences?.threadViewPrefs?.sort + + const prioritizeFollowedUsers = Boolean( + variables?.prioritizeFollowedUsers ?? + preferences?.threadViewPrefs?.prioritizeFollowedUsers, + ) + const treeViewEnabled = Boolean( + variables?.lab_treeViewEnabled ?? + preferences?.threadViewPrefs?.lab_treeViewEnabled, + ) + + return ( + + + + + + + Sort replies + + + Sort replies to the same post by: + + setThreadViewPrefs({sort: values[0]})}> + + + + + Oldest replies first + + + + + + Newest replies first + + + + + + Most-liked first + + + + + + Random (aka "Poster's Roulette") + + + + + + + + + + Prioritize your Follows + + + setThreadViewPrefs({ + prioritizeFollowedUsers: value, + }) + } + style={[a.w_full, a.gap_md]}> + + + Show replies by people you follow before all other replies. + + + + + + + + + + Experimental + + + setThreadViewPrefs({ + lab_treeViewEnabled: value, + }) + } + style={[a.w_full, a.gap_md]}> + + Show replies in a threaded view + + + + + + + + ) +} diff --git a/src/screens/Settings/components/AddAppPasswordDialog.tsx b/src/screens/Settings/components/AddAppPasswordDialog.tsx new file mode 100644 index 000000000..dcb212879 --- /dev/null +++ b/src/screens/Settings/components/AddAppPasswordDialog.tsx @@ -0,0 +1,280 @@ +import React, {useEffect, useMemo, useState} from 'react' +import {useWindowDimensions, View} from 'react-native' +import Animated, { + FadeIn, + FadeOut, + LayoutAnimationConfig, + LinearTransition, + SlideInRight, + SlideOutLeft, +} from 'react-native-reanimated' +import {ComAtprotoServerCreateAppPassword} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useMutation} from '@tanstack/react-query' + +import {isWeb} from '#/platform/detection' +import {useAppPasswordCreateMutation} from '#/state/queries/app-passwords' +import {atoms as a, native, useTheme} from '#/alf' +import {Admonition} from '#/components/Admonition' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import * as TextInput from '#/components/forms/TextField' +import * as Toggle from '#/components/forms/Toggle' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {SquareBehindSquare4_Stroke2_Corner0_Rounded as CopyIcon} from '#/components/icons/SquareBehindSquare4' +import {Text} from '#/components/Typography' +import {CopyButton} from './CopyButton' + +export function AddAppPasswordDialog({ + control, + passwords, +}: { + control: Dialog.DialogControlProps + passwords: string[] +}) { + const {height} = useWindowDimensions() + return ( + + + + + ) +} + +function CreateDialogInner({passwords}: {passwords: string[]}) { + const control = Dialog.useDialogContext() + const t = useTheme() + const {_} = useLingui() + const autogeneratedName = useRandomName() + const [name, setName] = useState('') + const [privileged, setPrivileged] = useState(false) + const { + mutateAsync: actuallyCreateAppPassword, + error: apiError, + data, + } = useAppPasswordCreateMutation() + + const regexFailError = useMemo( + () => + new DisplayableError( + _( + msg`App password names can only contain letters, numbers, spaces, dashes, and underscores`, + ), + ), + [_], + ) + + const { + mutate: createAppPassword, + error: validationError, + isPending, + } = useMutation< + ComAtprotoServerCreateAppPassword.AppPassword, + Error | DisplayableError + >({ + mutationFn: async () => { + const chosenName = name.trim() || autogeneratedName + if (chosenName.length < 4) { + throw new DisplayableError( + _(msg`App password names must be at least 4 characters long`), + ) + } + if (passwords.find(p => p === chosenName)) { + throw new DisplayableError(_(msg`App password name must be unique`)) + } + return await actuallyCreateAppPassword({name: chosenName, privileged}) + }, + }) + + const [hasBeenCopied, setHasBeenCopied] = useState(false) + useEffect(() => { + if (hasBeenCopied) { + const timeout = setTimeout(() => setHasBeenCopied(false), 100) + return () => clearTimeout(timeout) + } + }, [hasBeenCopied]) + + const error = + validationError || (!name.match(/^[a-zA-Z0-9-_ ]*$/) && regexFailError) + + return ( + + + + {!data ? ( + + + Add App Password + + + + Please enter a unique name for this app password or use our + randomly generated one. + + + + + createAppPassword()} + blurOnSubmit + autoCorrect={false} + autoComplete="off" + autoCapitalize="none" + autoFocus + /> + + + {error instanceof DisplayableError && ( + + {error.message} + + )} + + + + + Allow access to your direct messages + + + + {!!apiError || + (error && !(error instanceof DisplayableError) && ( + + + + Failed to create app password. Please try again. + + + + ))} + + + ) : ( + + + Here is your app password! + + + + Use this to sign into the other app along with your handle. + + + + {data.password} + + + + + For security reasons, you won't be able to view this again. If + you lose this app password, you'll need to generate a new one. + + + + + )} + + + + + ) +} + +class DisplayableError extends Error { + constructor(message: string) { + super(message) + this.name = 'DisplayableError' + } +} + +function useRandomName() { + return useState( + () => shadesOfBlue[Math.floor(Math.random() * shadesOfBlue.length)], + )[0] +} + +const shadesOfBlue: string[] = [ + 'AliceBlue', + 'Aqua', + 'Aquamarine', + 'Azure', + 'BabyBlue', + 'Blue', + 'BlueViolet', + 'CadetBlue', + 'CornflowerBlue', + 'Cyan', + 'DarkBlue', + 'DarkCyan', + 'DarkSlateBlue', + 'DeepSkyBlue', + 'DodgerBlue', + 'ElectricBlue', + 'LightBlue', + 'LightCyan', + 'LightSkyBlue', + 'LightSteelBlue', + 'MediumAquaMarine', + 'MediumBlue', + 'MediumSlateBlue', + 'MidnightBlue', + 'Navy', + 'PowderBlue', + 'RoyalBlue', + 'SkyBlue', + 'SlateBlue', + 'SteelBlue', + 'Teal', + 'Turquoise', +] diff --git a/src/screens/Settings/components/ChangeHandleDialog.tsx b/src/screens/Settings/components/ChangeHandleDialog.tsx new file mode 100644 index 000000000..e76d6257f --- /dev/null +++ b/src/screens/Settings/components/ChangeHandleDialog.tsx @@ -0,0 +1,602 @@ +import React, {useCallback, useMemo, useState} from 'react' +import {useWindowDimensions, View} from 'react-native' +import Animated, { + FadeIn, + FadeOut, + LayoutAnimationConfig, + LinearTransition, + SlideInLeft, + SlideInRight, + SlideOutLeft, + SlideOutRight, +} from 'react-native-reanimated' +import {ComAtprotoServerDescribeServer} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useMutation, useQueryClient} from '@tanstack/react-query' + +import {HITSLOP_10} from '#/lib/constants' +import {cleanError} from '#/lib/strings/errors' +import {createFullHandle, validateHandle} from '#/lib/strings/handles' +import {useFetchDid, useUpdateHandleMutation} from '#/state/queries/handle' +import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile' +import {useServiceQuery} from '#/state/queries/service' +import {useAgent, useSession} from '#/state/session' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import {atoms as a, native, useBreakpoints, useTheme} from '#/alf' +import {Admonition} from '#/components/Admonition' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import * as TextField from '#/components/forms/TextField' +import * as ToggleButton from '#/components/forms/ToggleButton' +import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow' +import {At_Stroke2_Corner0_Rounded as AtIcon} from '#/components/icons/At' +import {CheckThick_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check' +import {SquareBehindSquare4_Stroke2_Corner0_Rounded as CopyIcon} from '#/components/icons/SquareBehindSquare4' +import {InlineLinkText} from '#/components/Link' +import {Loader} from '#/components/Loader' +import {Text} from '#/components/Typography' +import {CopyButton} from './CopyButton' + +export function ChangeHandleDialog({ + control, +}: { + control: Dialog.DialogControlProps +}) { + const {height} = useWindowDimensions() + + return ( + + + + ) +} + +function ChangeHandleDialogInner() { + const control = Dialog.useDialogContext() + const {_} = useLingui() + const agent = useAgent() + const { + data: serviceInfo, + error: serviceInfoError, + refetch, + } = useServiceQuery(agent.serviceUrl.toString()) + + const [page, setPage] = useState<'provided-handle' | 'own-handle'>( + 'provided-handle', + ) + + const cancelButton = useCallback( + () => ( + + ), + [control, _], + ) + + return ( + + + Change Handle + + + } + contentContainerStyle={[a.pt_0, a.px_0]}> + + {serviceInfoError ? ( + + ) : serviceInfo ? ( + + {page === 'provided-handle' ? ( + + setPage('own-handle')} + /> + + ) : ( + + setPage('provided-handle')} + /> + + )} + + ) : ( + + + + )} + + + ) +} + +function ProvidedHandlePage({ + serviceInfo, + goToOwnHandle, +}: { + serviceInfo: ComAtprotoServerDescribeServer.OutputSchema + goToOwnHandle: () => void +}) { + const {_} = useLingui() + const [subdomain, setSubdomain] = useState('') + const agent = useAgent() + const control = Dialog.useDialogContext() + const {currentAccount} = useSession() + const queryClient = useQueryClient() + + const { + mutate: changeHandle, + isPending, + error, + isSuccess, + } = useUpdateHandleMutation({ + onSuccess: () => { + if (currentAccount) { + queryClient.invalidateQueries({ + queryKey: RQKEY_PROFILE(currentAccount.did), + }) + } + agent.resumeSession(agent.session!).then(() => control.close()) + }, + }) + + const host = serviceInfo.availableUserDomains[0] + + const validation = useMemo( + () => validateHandle(subdomain, host), + [subdomain, host], + ) + + const isTooLong = subdomain.length > 18 + const isInvalid = + isTooLong || + !validation.handleChars || + !validation.hyphenStartOrEnd || + !validation.totalLength + + return ( + + + {isSuccess && ( + + + + )} + {error && ( + + + + )} + + + + New handle + + + + setSubdomain(text)} + label={_(msg`New handle`)} + placeholder={_(msg`e.g. alice`)} + autoCapitalize="none" + autoCorrect={false} + /> + + {host} + + + + + + Your full handle will be{' '} + + @{createFullHandle(subdomain, host)} + + + + + + + If you have your own domain, you can use that as your handle. This + lets you self-verify your identity –{' '} + + learn more + + . + + + + + + + ) +} + +function OwnHandlePage({goToServiceHandle}: {goToServiceHandle: () => void}) { + const {_} = useLingui() + const t = useTheme() + const {currentAccount} = useSession() + const [dnsPanel, setDNSPanel] = useState(true) + const [domain, setDomain] = useState('') + const agent = useAgent() + const control = Dialog.useDialogContext() + const fetchDid = useFetchDid() + const queryClient = useQueryClient() + + const { + mutate: changeHandle, + isPending, + error, + isSuccess, + } = useUpdateHandleMutation({ + onSuccess: () => { + if (currentAccount) { + queryClient.invalidateQueries({ + queryKey: RQKEY_PROFILE(currentAccount.did), + }) + } + agent.resumeSession(agent.session!).then(() => control.close()) + }, + }) + + const { + mutate: verify, + isPending: isVerifyPending, + isSuccess: isVerified, + error: verifyError, + reset: resetVerification, + } = useMutation({ + mutationKey: ['verify-handle', domain], + mutationFn: async () => { + const did = await fetchDid(domain) + if (did !== currentAccount?.did) { + throw new DidMismatchError(did) + } + return true + }, + }) + + return ( + + {isSuccess && ( + + + + )} + {error && ( + + + + )} + {verifyError && ( + + + {verifyError instanceof DidMismatchError ? ( + + Wrong DID returned from server. Received: {verifyError.did} + + ) : ( + Failed to verify handle. Please try again. + )} + + + )} + + + + Enter the domain you want to use + + + + { + setDomain(text) + resetVerification() + }} + autoCapitalize="none" + autoCorrect={false} + /> + + + setDNSPanel(values[0] === 'dns')}> + + + DNS Panel + + + + + No DNS Panel + + + + {dnsPanel ? ( + <> + + Add the following DNS record to your domain: + + + + Host: + + + + _atproto + + + + + Type: + + + TXT + + + Value: + + + + + did={currentAccount?.did} + + + + + + + This should create a domain record at: + + + _atproto.{domain} + + + ) : ( + <> + + Upload a text file to: + + + + https://{domain}/.well-known/atproto-did + + + + That contains the following: + + + {currentAccount?.did} + + + + )} + + {isVerified && ( + + + + )} + + + + + + + + ) +} + +class DidMismatchError extends Error { + did: string + constructor(did: string) { + super('DID mismatch') + this.name = 'DidMismatchError' + this.did = did + } +} + +function ChangeHandleError({error}: {error: unknown}) { + const {_} = useLingui() + + let message = _(msg`Failed to change handle. Please try again.`) + + if (error instanceof Error) { + if (error.message.startsWith('Handle already taken')) { + message = _(msg`Handle already taken. Please try a different one.`) + } else if (error.message === 'Reserved handle') { + message = _(msg`This handle is reserved. Please try a different one.`) + } else if (error.message === 'Handle too long') { + message = _(msg`Handle too long. Please try a shorter one.`) + } else if (error.message === 'Input/handle must be a valid handle') { + message = _(msg`Invalid handle. Please try a different one.`) + } else if (error.message === 'Rate Limit Exceeded') { + message = _( + msg`Rate limit exceeded – you've tried to change your handle too many times in a short period. Please wait a minute before trying again.`, + ) + } + } + + return {message} +} + +function SuccessMessage({text}: {text: string}) { + const {gtMobile} = useBreakpoints() + const t = useTheme() + return ( + + + + + {text} + + ) +} diff --git a/src/screens/Settings/components/CopyButton.tsx b/src/screens/Settings/components/CopyButton.tsx new file mode 100644 index 000000000..eb538f5de --- /dev/null +++ b/src/screens/Settings/components/CopyButton.tsx @@ -0,0 +1,69 @@ +import React, {useCallback, useEffect, useState} from 'react' +import {GestureResponderEvent, View} from 'react-native' +import Animated, {FadeOutUp, ZoomIn} from 'react-native-reanimated' +import * as Clipboard from 'expo-clipboard' +import {Trans} from '@lingui/macro' + +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonProps} from '#/components/Button' +import {Text} from '#/components/Typography' + +export function CopyButton({ + style, + value, + onPress: onPressProp, + ...props +}: ButtonProps & {value: string}) { + const [hasBeenCopied, setHasBeenCopied] = useState(false) + const t = useTheme() + + useEffect(() => { + if (hasBeenCopied) { + const timeout = setTimeout(() => setHasBeenCopied(false), 100) + return () => clearTimeout(timeout) + } + }, [hasBeenCopied]) + + const onPress = useCallback( + (evt: GestureResponderEvent) => { + Clipboard.setStringAsync(value) + setHasBeenCopied(true) + onPressProp?.(evt) + }, + [value, onPressProp], + ) + + return ( + + {hasBeenCopied && ( + + + Copied! + + + )} +