From 8c6384175c8343c0cdc14b4fbefd53127f3f1866 Mon Sep 17 00:00:00 2001 From: Hailey Date: Fri, 11 Oct 2024 08:35:53 -0700 Subject: [PATCH 01/24] Fix dropdown shift on web (#5710) --- bskyweb/templates/base.html | 4 ++++ web/index.html | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html index 9a50fae69e..59cf39d02c 100644 --- a/bskyweb/templates/base.html +++ b/bskyweb/templates/base.html @@ -75,6 +75,10 @@ top: 50%; transform: translateX(-50%) translateY(-50%) translateY(-50px); } + /* We need this style to prevent web dropdowns from shifting the display when opening */ + body { + width: 100%; + } {% include "scripts.html" %} diff --git a/web/index.html b/web/index.html index 2a406429c7..7b29597bb7 100644 --- a/web/index.html +++ b/web/index.html @@ -80,6 +80,10 @@ top: 50%; transform: translateX(-50%) translateY(-50%) translateY(-50px); } + /* We need this style to prevent web dropdowns from shifting the display when opening */ + body { + width: 100%; + } From 7e5c522718108b26d6eddc46aba47a2e086a2fe3 Mon Sep 17 00:00:00 2001 From: Hailey Date: Fri, 11 Oct 2024 09:30:30 -0700 Subject: [PATCH 02/24] Move intent handler to a child of `InnerApp` (#5695) --- src/App.native.tsx | 2 -- src/lib/hooks/useIntentHandler.ts | 11 ++++++++++- src/view/shell/index.tsx | 3 +++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/App.native.tsx b/src/App.native.tsx index 0b9f112eee..668fb91fcd 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -14,7 +14,6 @@ import * as SplashScreen from 'expo-splash-screen' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useIntentHandler} from '#/lib/hooks/useIntentHandler' import {QueryProvider} from '#/lib/react-query' import { initialize, @@ -85,7 +84,6 @@ function InnerApp() { const theme = useColorModeTheme() const {_} = useLingui() - useIntentHandler() const hasCheckedReferrer = useStarterPackEntry() // init diff --git a/src/lib/hooks/useIntentHandler.ts b/src/lib/hooks/useIntentHandler.ts index 98ba4ec026..a33aff2371 100644 --- a/src/lib/hooks/useIntentHandler.ts +++ b/src/lib/hooks/useIntentHandler.ts @@ -13,6 +13,9 @@ type IntentType = 'compose' | 'verify-email' const VALID_IMAGE_REGEX = /^[\w.:\-_/]+\|\d+(\.\d+)?\|\d+(\.\d+)?$/ +// This needs to stay outside of react to persist between account switches +let previousIntentUrl = '' + export function useIntentHandler() { const incomingUrl = Linking.useURL() const composeIntent = useComposeIntent() @@ -68,7 +71,13 @@ export function useIntentHandler() { } } - if (incomingUrl) handleIncomingURL(incomingUrl) + if (incomingUrl) { + if (previousIntentUrl === incomingUrl) { + return + } + handleIncomingURL(incomingUrl) + previousIntentUrl = incomingUrl + } }, [incomingUrl, composeIntent, verifyEmailIntent]) } diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 9f7569bebf..79fc1a0694 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -14,6 +14,7 @@ import {StatusBar} from 'expo-status-bar' import {useNavigation, useNavigationState} from '@react-navigation/native' import {useDedupe} from '#/lib/hooks/useDedupe' +import {useIntentHandler} from '#/lib/hooks/useIntentHandler' import {useNotificationsHandler} from '#/lib/hooks/useNotificationHandler' import {usePalette} from '#/lib/hooks/usePalette' import {useNotificationsRegistration} from '#/lib/notifications/notifications' @@ -129,6 +130,8 @@ export const Shell: React.FC = function ShellImpl() { const {fullyExpandedCount} = useDialogStateControlContext() const pal = usePalette('default') const theme = useTheme() + useIntentHandler() + React.useEffect(() => { if (isAndroid) { NavigationBar.setBackgroundColorAsync(theme.palette.default.background) From f7852d02bad388069240839bd3311f2c859571f8 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Fri, 11 Oct 2024 14:41:12 -0700 Subject: [PATCH 03/24] Protect against zero-width chars in display name sanitation (see https://github.com/bluesky-social/social-app/pull/5703#issuecomment-2407459187) (#5729) --- src/lib/strings/display-names.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/strings/display-names.ts b/src/lib/strings/display-names.ts index 23f3255129..a95bfd6798 100644 --- a/src/lib/strings/display-names.ts +++ b/src/lib/strings/display-names.ts @@ -7,7 +7,7 @@ import {ModerationUI} from '@atproto/api' const CHECK_MARKS_RE = /[\u2705\u2713\u2714\u2611]/gu const CONTROL_CHARS_RE = /[\u0000-\u001F\u007F-\u009F\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069]/g -const MULTIPLE_SPACES_RE = /[\s][\s]+/g +const MULTIPLE_SPACES_RE = /[\s][\s\u200B]+/g export function sanitizeDisplayName( str: string, From 157011efe3f8c3f1069eda93de6e0b1efcf0f9eb Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Fri, 11 Oct 2024 16:12:14 -0700 Subject: [PATCH 04/24] Fix performance of feed reordering and add layout animations (#5714) * Rework SavedFeeds editor to make changes transactionally * Fix hit slops * Add layout animations * Fix: dont let down go too far down * Speed up layout transitions --- src/view/screens/SavedFeeds.tsx | 203 ++++++++++++++++++-------------- 1 file changed, 114 insertions(+), 89 deletions(-) diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 66bbd9b8a0..2334abb5db 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -1,22 +1,23 @@ import React from 'react' import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native' +import Animated, {LinearTransition} from 'react-native-reanimated' import {AppBskyActorDefs} from '@atproto/api' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' import {useHaptics} from '#/lib/haptics' import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams} from '#/lib/routes/types' +import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' import {colors, s} from '#/lib/styles' import {logger} from '#/logger' import { useOverwriteSavedFeedsMutation, usePreferencesQuery, - useUpdateSavedFeedsMutation, } from '#/state/queries/preferences' import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' import {useSetMinimalShellMode} from '#/state/shell' @@ -29,43 +30,40 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views' import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed' import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType' import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' - -const HITSLOP_TOP = { - top: 20, - left: 20, - bottom: 5, - right: 20, -} -const HITSLOP_BOTTOM = { - top: 5, - left: 20, - bottom: 20, - right: 20, -} +import {Loader} from '#/components/Loader' type Props = NativeStackScreenProps export function SavedFeeds({}: Props) { + const {data: preferences} = usePreferencesQuery() + if (!preferences) { + return + } + return +} + +function SavedFeedsInner({ + preferences, +}: { + preferences: UsePreferencesQueryResponse +}) { const pal = usePalette('default') const {_} = useLingui() - const {isMobile, isTabletOrDesktop} = useWebMediaQueries() + const {isMobile, isTabletOrDesktop, isDesktop} = useWebMediaQueries() const setMinimalShellMode = useSetMinimalShellMode() - const {data: preferences} = usePreferencesQuery() - const { - mutateAsync: overwriteSavedFeeds, - variables: optimisticSavedFeedsResponse, - reset: resetSaveFeedsMutationState, - error: savedFeedsError, - } = useOverwriteSavedFeedsMutation() + const {mutateAsync: overwriteSavedFeeds, isPending: isOverwritePending} = + useOverwriteSavedFeedsMutation() + const navigation = useNavigation() /* * Use optimistic data if exists and no error, otherwise fallback to remote * data */ - const currentFeeds = - optimisticSavedFeedsResponse && !savedFeedsError - ? optimisticSavedFeedsResponse - : preferences?.savedFeeds || [] + const [currentFeeds, setCurrentFeeds] = React.useState( + () => preferences.savedFeeds || [], + ) + const hasUnsavedChanges = currentFeeds !== preferences.savedFeeds const pinnedFeeds = currentFeeds.filter(f => f.pinned) const unpinnedFeeds = currentFeeds.filter(f => !f.pinned) const noSavedFeedsOfAnyType = pinnedFeeds.length + unpinnedFeeds.length === 0 @@ -78,6 +76,35 @@ export function SavedFeeds({}: Props) { }, [setMinimalShellMode]), ) + const onSaveChanges = React.useCallback(async () => { + try { + await overwriteSavedFeeds(currentFeeds) + Toast.show(_(msg`Feeds updated!`)) + navigation.navigate('Feeds') + } catch (e) { + Toast.show(_(msg`There was an issue contacting the server`), 'xmark') + logger.error('Failed to toggle pinned feed', {message: e}) + } + }, [_, overwriteSavedFeeds, currentFeeds, navigation]) + + const renderHeaderBtn = React.useCallback(() => { + return ( + + ) + }, [_, isDesktop, onSaveChanges, hasUnsavedChanges, isOverwritePending]) + return ( - + {noSavedFeedsOfAnyType && ( )) @@ -161,9 +192,8 @@ export function SavedFeeds({}: Props) { key={f.id} feed={f} isPinned={false} - overwriteSavedFeeds={overwriteSavedFeeds} - resetSaveFeedsMutationState={resetSaveFeedsMutationState} currentFeeds={currentFeeds} + setCurrentFeeds={setCurrentFeeds} preferences={preferences} /> )) @@ -197,44 +227,27 @@ function ListItem({ feed, isPinned, currentFeeds, - overwriteSavedFeeds, - resetSaveFeedsMutationState, + setCurrentFeeds, }: { feed: AppBskyActorDefs.SavedFeed isPinned: boolean currentFeeds: AppBskyActorDefs.SavedFeed[] - overwriteSavedFeeds: ReturnType< - typeof useOverwriteSavedFeedsMutation - >['mutateAsync'] - resetSaveFeedsMutationState: ReturnType< - typeof useOverwriteSavedFeedsMutation - >['reset'] + setCurrentFeeds: React.Dispatch preferences: UsePreferencesQueryResponse }) { - const pal = usePalette('default') const {_} = useLingui() + const pal = usePalette('default') const playHaptic = useHaptics() - const {isPending: isUpdatePending, mutateAsync: updateSavedFeeds} = - useUpdateSavedFeedsMutation() const feedUri = feed.value const onTogglePinned = React.useCallback(async () => { playHaptic() - - try { - resetSaveFeedsMutationState() - - await updateSavedFeeds([ - { - ...feed, - pinned: !feed.pinned, - }, - ]) - } catch (e) { - Toast.show(_(msg`There was an issue contacting the server`), 'xmark') - logger.error('Failed to toggle pinned feed', {message: e}) - } - }, [_, playHaptic, feed, updateSavedFeeds, resetSaveFeedsMutationState]) + setCurrentFeeds( + currentFeeds.map(f => + f.id === feed.id ? {...feed, pinned: !feed.pinned} : f, + ), + ) + }, [playHaptic, feed, currentFeeds, setCurrentFeeds]) const onPressUp = React.useCallback(async () => { if (!isPinned) return @@ -250,13 +263,8 @@ function ListItem({ nextFeeds[index], ] - try { - await overwriteSavedFeeds(nextFeeds) - } catch (e) { - Toast.show(_(msg`There was an issue contacting the server`), 'xmark') - logger.error('Failed to set pinned feed order', {message: e}) - } - }, [feed, isPinned, overwriteSavedFeeds, currentFeeds, _]) + setCurrentFeeds(nextFeeds) + }, [feed, isPinned, setCurrentFeeds, currentFeeds]) const onPressDown = React.useCallback(async () => { if (!isPinned) return @@ -266,22 +274,25 @@ function ListItem({ const index = ids.indexOf(feed.id) const nextIndex = index + 1 - if (index === -1 || index >= nextFeeds.length - 1) return + if (index === -1 || index >= nextFeeds.filter(f => f.pinned).length - 1) + return ;[nextFeeds[index], nextFeeds[nextIndex]] = [ nextFeeds[nextIndex], nextFeeds[index], ] - try { - await overwriteSavedFeeds(nextFeeds) - } catch (e) { - Toast.show(_(msg`There was an issue contacting the server`), 'xmark') - logger.error('Failed to set pinned feed order', {message: e}) - } - }, [feed, isPinned, overwriteSavedFeeds, currentFeeds, _]) + setCurrentFeeds(nextFeeds) + }, [feed, isPinned, setCurrentFeeds, currentFeeds]) + + const onPressRemove = React.useCallback(async () => { + playHaptic() + setCurrentFeeds(currentFeeds.filter(f => f.id !== feed.id)) + }, [playHaptic, feed, currentFeeds, setCurrentFeeds]) return ( - + {feed.type === 'timeline' ? ( ) : ( @@ -290,25 +301,22 @@ function ListItem({ feedUri={feedUri} style={[isPinned && {paddingRight: 8}]} showMinimalPlaceholder - showSaveBtn={!isPinned} hideTopBorder={true} /> )} {isPinned ? ( <> ({ backgroundColor: pal.viewLight.backgroundColor, paddingHorizontal: 12, paddingVertical: 10, borderRadius: 4, marginRight: 8, - opacity: - state.hovered || state.pressed || isUpdatePending ? 0.5 : 1, + opacity: state.hovered || state.pressed ? 0.5 : 1, })}> ({ backgroundColor: pal.viewLight.backgroundColor, paddingHorizontal: 12, paddingVertical: 10, borderRadius: 4, marginRight: 8, - opacity: - state.hovered || state.pressed || isUpdatePending ? 0.5 : 1, + opacity: state.hovered || state.pressed ? 0.5 : 1, })}> - ) : null} + ) : ( + ({ + marginRight: 8, + paddingHorizontal: 12, + paddingVertical: 10, + borderRadius: 4, + opacity: state.hovered || state.focused ? 0.5 : 1, + })}> + + + )} ({ backgroundColor: pal.viewLight.backgroundColor, paddingHorizontal: 12, paddingVertical: 10, borderRadius: 4, - opacity: - state.hovered || state.focused || isUpdatePending ? 0.5 : 1, + opacity: state.hovered || state.focused ? 0.5 : 1, })}> - + ) } From e53b9729570d2b58756972f75a40ae4000d03ebd Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Fri, 11 Oct 2024 16:23:30 -0700 Subject: [PATCH 05/24] Make default search language 'all languages' (#5731) --- src/view/screens/Search/Search.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 97888eec56..f4bbde5671 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -436,19 +436,16 @@ function SearchLanguageDropdown({ } function useQueryManager({initialQuery}: {initialQuery: string}) { - const {contentLanguages} = useLanguagePrefs() const {query, params: initialParams} = React.useMemo(() => { return parseSearchQuery(initialQuery || '') }, [initialQuery]) const prevInitialQuery = React.useRef(initialQuery) - const [lang, setLang] = React.useState( - initialParams.lang || contentLanguages[0], - ) + const [lang, setLang] = React.useState(initialParams.lang || '') if (initialQuery !== prevInitialQuery.current) { // handle new queryParam change (from manual search entry) prevInitialQuery.current = initialQuery - setLang(initialParams.lang || contentLanguages[0]) + setLang(initialParams.lang || '') } const params = React.useMemo( From 907b8d17f5784d520d917712dea3acef591db514 Mon Sep 17 00:00:00 2001 From: Hailey Date: Fri, 11 Oct 2024 16:24:22 -0700 Subject: [PATCH 06/24] shift hitslop of avi follow button (#5730) * shift the hitslop of the follow button * increase slop --- src/view/com/posts/AviFollowButton.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/view/com/posts/AviFollowButton.tsx b/src/view/com/posts/AviFollowButton.tsx index 00428cbe61..269d4eb5a9 100644 --- a/src/view/com/posts/AviFollowButton.tsx +++ b/src/view/com/posts/AviFollowButton.tsx @@ -5,7 +5,6 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' -import {createHitslop} from '#/lib/constants' import {NavigationProp} from '#/lib/routes/types' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {useProfileShadow} from '#/state/cache/profile-shadow' @@ -85,7 +84,12 @@ export function AviFollowButton({ {!isFollowing && ( - + @@ -92,6 +93,7 @@ function StorybookInner() { + From 432dc867f8965c252c6793c53d3d162aef2a5f94 Mon Sep 17 00:00:00 2001 From: Hailey Date: Mon, 14 Oct 2024 08:02:16 -0700 Subject: [PATCH 16/24] Fix keyboard hiding alt text input after viewing DMs on iOS (#5739) --- src/components/Dialog/index.tsx | 15 +++++++++++++++ src/view/com/composer/GifAltText.tsx | 9 ++++----- .../com/composer/photos/ImageAltTextDialog.tsx | 7 +++---- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 73e54ea21e..93acad4381 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -11,6 +11,7 @@ import { } from 'react-native' import { KeyboardAwareScrollView, + useKeyboardController, useKeyboardHandler, } from 'react-native-keyboard-controller' import {runOnJS} from 'react-native-reanimated' @@ -189,7 +190,21 @@ export const ScrollableInner = React.forwardRef( function ScrollableInner({children, style, ...props}, ref) { const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext() const insets = useSafeAreaInsets() + const {setEnabled} = useKeyboardController() + const [keyboardHeight, setKeyboardHeight] = React.useState(0) + + React.useEffect(() => { + if (!isIOS) { + return + } + + setEnabled(true) + return () => { + setEnabled(false) + } + }) + useKeyboardHandler({ onEnd: e => { 'worklet' diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index bd3860a284..732bd4bd69 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/src/view/com/composer/GifAltText.tsx @@ -1,5 +1,5 @@ import React, {useState} from 'react' -import {Dimensions, TouchableOpacity, View} from 'react-native' +import {TouchableOpacity, View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -9,7 +9,7 @@ import { EmbedPlayerParams, parseEmbedPlayerFromUrl, } from '#/lib/strings/embed-player' -import {isAndroid, isWeb} from '#/platform/detection' +import {isAndroid} from '#/platform/detection' import {useResolveGifQuery} from '#/state/queries/resolve-link' import {Gif} from '#/state/queries/tenor' import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper' @@ -107,8 +107,7 @@ export function GifAltTextDialogLoaded({ control={control} onClose={() => { onSubmit(altTextDraft) - }} - nativeOptions={{minHeight: Dimensions.get('window').height}}> + }}> { if (nativeEvent.key === 'Escape') { control.close() diff --git a/src/view/com/composer/photos/ImageAltTextDialog.tsx b/src/view/com/composer/photos/ImageAltTextDialog.tsx index 49b4cdd7e4..aa0b0987ac 100644 --- a/src/view/com/composer/photos/ImageAltTextDialog.tsx +++ b/src/view/com/composer/photos/ImageAltTextDialog.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {Dimensions, ImageStyle, useWindowDimensions, View} from 'react-native' +import {ImageStyle, useWindowDimensions, View} from 'react-native' import {Image} from 'expo-image' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -38,8 +38,7 @@ export const ImageAltTextDialog = ({ ...image, alt: enforceLen(altText, MAX_ALT_TEXT, true), }) - }} - nativeOptions={{minHeight: Dimensions.get('window').height}}> + }}> From db7b875c52b31a8c64859ca8e3e4c9e08c18f13e Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 14 Oct 2024 10:11:36 -0500 Subject: [PATCH 17/24] Update web font families def (#5749) --- src/alf/fonts.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/alf/fonts.ts b/src/alf/fonts.ts index 2732821439..c17e35e5ee 100644 --- a/src/alf/fonts.ts +++ b/src/alf/fonts.ts @@ -4,7 +4,7 @@ import {useFonts} from 'expo-font' import {isWeb} from '#/platform/detection' import {Device, device} from '#/storage' -const FAMILIES = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif` +const WEB_FONT_FAMILIES = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"` const factor = 0.0625 // 1 - (15/16) const fontScaleMultipliers: Record = { @@ -48,7 +48,7 @@ export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') { // fallback families only supported on web if (isWeb) { - style.fontFamily += `, ${FAMILIES}` + style.fontFamily += `, ${WEB_FONT_FAMILIES}` } /** @@ -59,7 +59,7 @@ export function applyFonts(style: TextStyle, fontFamily: 'system' | 'theme') { } else { // fallback families only supported on web if (isWeb) { - style.fontFamily = style.fontFamily || FAMILIES + style.fontFamily = style.fontFamily || WEB_FONT_FAMILIES } /** From a445489b53725f3c87f6fa43b904015e910dbfea Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 14 Oct 2024 18:19:30 +0300 Subject: [PATCH 18/24] Translate some missing strings via global i18n instance (#5740) --- src/lib/media/picker.shared.ts | 8 +++++--- src/lib/sharing.ts | 6 ++++-- src/view/com/util/forms/PostDropdownBtn.tsx | 8 ++++---- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/src/lib/media/picker.shared.ts b/src/lib/media/picker.shared.ts index b959ce8be9..a45bf5c0f1 100644 --- a/src/lib/media/picker.shared.ts +++ b/src/lib/media/picker.shared.ts @@ -3,8 +3,10 @@ import { launchImageLibraryAsync, MediaTypeOptions, } from 'expo-image-picker' +// TODO: replace global i18n instance with one returned from useLingui -sfn +import {t} from '@lingui/macro' -import * as Toast from 'view/com/util/Toast' +import * as Toast from '#/view/com/util/Toast' import {getDataUriSize} from './util' export async function openPicker(opts?: ImagePickerOptions) { @@ -17,14 +19,14 @@ export async function openPicker(opts?: ImagePickerOptions) { }) if (response.assets && response.assets.length > 4) { - Toast.show('You may only select up to 4 images', 'exclamation-circle') + Toast.show(t`You may only select up to 4 images`, 'exclamation-circle') } return (response.assets ?? []) .slice(0, 4) .filter(asset => { if (asset.mimeType?.startsWith('image/')) return true - Toast.show('Only image files are supported', 'exclamation-circle') + Toast.show(t`Only image files are supported`, 'exclamation-circle') return false }) .map(image => ({ diff --git a/src/lib/sharing.ts b/src/lib/sharing.ts index a77b5cccaa..c89d2d7a6a 100644 --- a/src/lib/sharing.ts +++ b/src/lib/sharing.ts @@ -1,8 +1,10 @@ import {Share} from 'react-native' // import * as Sharing from 'expo-sharing' import {setStringAsync} from 'expo-clipboard' +// TODO: replace global i18n instance with one returned from useLingui -sfn +import {t} from '@lingui/macro' -import {isAndroid, isIOS} from 'platform/detection' +import {isAndroid, isIOS} from '#/platform/detection' import * as Toast from '#/view/com/util/Toast' /** @@ -20,6 +22,6 @@ export async function shareUrl(url: string) { // React Native Share is not supported by web. Web Share API // has increasing but not full support, so default to clipboard setStringAsync(url) - Toast.show('Copied to clipboard', 'clipboard-check') + Toast.show(t`Copied to clipboard`, 'clipboard-check') } } diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx index dc66746fda..22751d8bfb 100644 --- a/src/view/com/util/forms/PostDropdownBtn.tsx +++ b/src/view/com/util/forms/PostDropdownBtn.tsx @@ -268,8 +268,8 @@ let PostDropdownBtn = ({ item: postUri, feedContext: postFeedContext, }) - Toast.show('Feedback sent!') - }, [feedFeedback, postUri, postFeedContext]) + Toast.show(_(msg`Feedback sent!`)) + }, [feedFeedback, postUri, postFeedContext, _]) const onPressShowLess = React.useCallback(() => { feedFeedback.sendInteraction({ @@ -277,8 +277,8 @@ let PostDropdownBtn = ({ item: postUri, feedContext: postFeedContext, }) - Toast.show('Feedback sent!') - }, [feedFeedback, postUri, postFeedContext]) + Toast.show(_(msg`Feedback sent!`)) + }, [feedFeedback, postUri, postFeedContext, _]) const onSelectChatToShareTo = React.useCallback( (conversation: string) => { From 0b4dc64c63e7fecb82d2be6fe4cd9267c55ee444 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 14 Oct 2024 10:44:04 -0500 Subject: [PATCH 19/24] Add util for link static clicks (#5683) * Add util for link static clicks * Format * Update copy --- src/components/Link.tsx | 19 +++++++++++++++++++ src/components/TagMenu/index.tsx | 28 +++++++--------------------- 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/src/components/Link.tsx b/src/components/Link.tsx index fa8fa0cc3a..010299dfba 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -329,6 +329,25 @@ export function InlineLinkText({ ) } +/** + * Utility to create a static `onPress` handler for a `Link` that would otherwise link to a URI + * + * Example: + * ` {...})} />` + */ +export function createStaticClick( + onPressHandler: Exclude, +): Pick { + return { + to: '#', + onPress(e: GestureResponderEvent) { + e.preventDefault() + onPressHandler(e) + return false + }, + } +} + /** * A Pressable that uses useLink to handle navigation. It is unstyled, so can be used in cases where the Button styles * in Link are not desired. diff --git a/src/components/TagMenu/index.tsx b/src/components/TagMenu/index.tsx index 917624a036..ae9fcdae21 100644 --- a/src/components/TagMenu/index.tsx +++ b/src/components/TagMenu/index.tsx @@ -4,7 +4,6 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' -import {makeSearchLink} from '#/lib/routes/links' import {NavigationProp} from '#/lib/routes/types' import {isInvalidHandle} from '#/lib/strings/handles' import { @@ -19,7 +18,7 @@ import {Divider} from '#/components/Divider' import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' -import {Link} from '#/components/Link' +import {createStaticClick, Link} from '#/components/Link' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -101,19 +100,14 @@ export function TagMenu({ t.atoms.bg_contrast_25, ]}> { - e.preventDefault() - + label={_(msg`View all posts with tag ${displayTag}`)} + {...createStaticClick(() => { control.close(() => { navigation.push('Hashtag', { tag: encodeURIComponent(tag), }) }) - - return false - }}> + })}> { - e.preventDefault() - + {...createStaticClick(() => { control.close(() => { navigation.push('Hashtag', { tag: encodeURIComponent(tag), author: authorHandle, }) }) - - return false - }}> + })}> Date: Mon, 14 Oct 2024 19:21:05 +0300 Subject: [PATCH 20/24] Move the back-button in front of banner (#5748) --- src/screens/Profile/Header/GrowableBanner.tsx | 2 +- src/screens/Profile/Header/Shell.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/Profile/Header/GrowableBanner.tsx b/src/screens/Profile/Header/GrowableBanner.tsx index e1bb8e00ef..144b7cd2de 100644 --- a/src/screens/Profile/Header/GrowableBanner.tsx +++ b/src/screens/Profile/Header/GrowableBanner.tsx @@ -36,8 +36,8 @@ export function GrowableBanner({ if (!pagerContext || !isIOS) { return ( - {backButton} {children} + {backButton} ) } diff --git a/src/screens/Profile/Header/Shell.tsx b/src/screens/Profile/Header/Shell.tsx index f7011fd359..4e34c87ef8 100644 --- a/src/screens/Profile/Header/Shell.tsx +++ b/src/screens/Profile/Header/Shell.tsx @@ -66,7 +66,7 @@ let ProfileHeaderShell = ({ return ( Date: Mon, 14 Oct 2024 21:45:47 +0300 Subject: [PATCH 21/24] Use admonitions in settings screens (#5741) --- src/components/Admonition.tsx | 13 ++++++----- src/screens/Messages/Settings.tsx | 25 +++++++--------------- src/view/screens/NotificationsSettings.tsx | 24 +++++++-------------- 3 files changed, 24 insertions(+), 38 deletions(-) diff --git a/src/components/Admonition.tsx b/src/components/Admonition.tsx index 7c8682119d..140e838e70 100644 --- a/src/components/Admonition.tsx +++ b/src/components/Admonition.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {View} from 'react-native' +import {StyleProp, View, ViewStyle} from 'react-native' import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo' @@ -70,9 +70,11 @@ export function Row({children}: {children: React.ReactNode}) { export function Outer({ children, type = 'info', + style, }: { children: React.ReactNode type?: Context['type'] + style?: StyleProp }) { const t = useTheme() const {gtMobile} = useBreakpoints() @@ -90,9 +92,8 @@ export function Outer({ a.rounded_sm, a.border, t.atoms.bg_contrast_25, - { - borderColor, - }, + {borderColor}, + style, ]}> {children} @@ -103,12 +104,14 @@ export function Outer({ export function Admonition({ children, type, + style, }: { children: TextProps['children'] type?: Context['type'] + style?: StyleProp }) { return ( - + {children} diff --git a/src/screens/Messages/Settings.tsx b/src/screens/Messages/Settings.tsx index b1c52582f0..a7b55229f0 100644 --- a/src/screens/Messages/Settings.tsx +++ b/src/screens/Messages/Settings.tsx @@ -12,7 +12,8 @@ import {useSession} from '#/state/session' import * as Toast from '#/view/com/util/Toast' import {ViewHeader} from '#/view/com/util/ViewHeader' import {ScrollView} from '#/view/com/util/Views' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a} from '#/alf' +import {Admonition} from '#/components/Admonition' import {Divider} from '#/components/Divider' import * as Toggle from '#/components/forms/Toggle' import {Text} from '#/components/Typography' @@ -23,7 +24,6 @@ type AllowIncoming = 'all' | 'none' | 'following' type Props = NativeStackScreenProps export function MessagesSettingsScreen({}: Props) { const {_} = useLingui() - const t = useTheme() const {currentAccount} = useSession() const {data: profile} = useProfileQuery({ did: currentAccount!.did, @@ -99,21 +99,12 @@ export function MessagesSettingsScreen({}: Props) { - - - - You can continue ongoing conversations regardless of which setting - you choose. - - - + + + You can continue ongoing conversations regardless of which setting + you choose. + + {isNative && ( <> diff --git a/src/view/screens/NotificationsSettings.tsx b/src/view/screens/NotificationsSettings.tsx index 8955119a6b..f395941df9 100644 --- a/src/view/screens/NotificationsSettings.tsx +++ b/src/view/screens/NotificationsSettings.tsx @@ -10,6 +10,7 @@ import {useNotificationsSettingsMutation} from '#/state/queries/notifications/se import {ViewHeader} from '#/view/com/util/ViewHeader' import {ScrollView} from '#/view/com/util/Views' import {atoms as a, useTheme} from '#/alf' +import {Admonition} from '#/components/Admonition' import {Error} from '#/components/Error' import * as Toggle from '#/components/forms/Toggle' import {Loader} from '#/components/Loader' @@ -71,22 +72,13 @@ export function NotificationsSettingsScreen({}: Props) { - - - - 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. - - - + + + 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. + + )} From 0f40013963aaf4f3ac893ce58958ea30bc7a1efd Mon Sep 17 00:00:00 2001 From: surfdude29 <149612116+surfdude29@users.noreply.github.com> Date: Mon, 14 Oct 2024 19:47:17 +0100 Subject: [PATCH 22/24] Translate strings in `src/lib/api/index.ts` (#5750) --- src/lib/api/index.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts index 4b203d28b6..db5c9c2478 100644 --- a/src/lib/api/index.ts +++ b/src/lib/api/index.ts @@ -11,6 +11,7 @@ import { ComAtprotoRepoStrongRef, RichText, } from '@atproto/api' +import {t} from '@lingui/macro' import {QueryClient} from '@tanstack/react-query' import {isNetworkError} from '#/lib/strings/errors' @@ -52,7 +53,7 @@ export async function post( {cleanNewlines: true}, ) - opts.onStateChange?.('Processing...') + opts.onStateChange?.(t`Processing...`) await rt.detectFacets(agent) @@ -102,7 +103,7 @@ export async function post( let res try { - opts.onStateChange?.('Posting...') + opts.onStateChange?.(t`Posting...`) res = await agent.post({ text: rt.text, facets: rt.facets, @@ -117,7 +118,7 @@ export async function post( }) if (isNetworkError(e)) { throw new Error( - 'Post failed to upload. Please check your Internet connection and try again.', + t`Post failed to upload. Please check your Internet connection and try again.`, ) } else { throw e @@ -141,7 +142,7 @@ export async function post( safeMessage: e.message, }) throw new Error( - 'Failed to save post interaction settings. Your post was created but users may be able to interact with it.', + t`Failed to save post interaction settings. Your post was created but users may be able to interact with it.`, ) } } @@ -166,7 +167,7 @@ export async function post( safeMessage: e.message, }) throw new Error( - 'Failed to save post interaction settings. Your post was created but users may be able to interact with it.', + t`Failed to save post interaction settings. Your post was created but users may be able to interact with it.`, ) } } @@ -248,7 +249,7 @@ async function resolveMedia( logger.debug(`Uploading images`, { count: imagesDraft.length, }) - onStateChange?.(`Uploading images...`) + onStateChange?.(t`Uploading images...`) const images: AppBskyEmbedImages.Image[] = await Promise.all( imagesDraft.map(async (image, i) => { logger.debug(`Compressing image #${i}`) @@ -302,7 +303,7 @@ async function resolveMedia( ) let blob: BlobRef | undefined if (resolvedGif.thumb) { - onStateChange?.('Uploading link thumbnail...') + onStateChange?.(t`Uploading link thumbnail...`) const {path, mime} = resolvedGif.thumb.source const response = await uploadBlob(agent, path, mime) blob = response.data.blob @@ -326,7 +327,7 @@ async function resolveMedia( if (resolvedLink.type === 'external') { let blob: BlobRef | undefined if (resolvedLink.thumb) { - onStateChange?.('Uploading link thumbnail...') + onStateChange?.(t`Uploading link thumbnail...`) const {path, mime} = resolvedLink.thumb.source const response = await uploadBlob(agent, path, mime) blob = response.data.blob @@ -352,7 +353,7 @@ async function resolveRecord( ): Promise { const resolvedLink = await fetchResolveLinkQuery(queryClient, agent, uri) if (resolvedLink.type !== 'record') { - throw Error('Expected uri to resolve to a record') + throw Error(t`Expected uri to resolve to a record`) } return resolvedLink.record } From 2d88463453abfad1e9e45bbd6cdbcd5824a7e770 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Mon, 14 Oct 2024 22:09:47 +0300 Subject: [PATCH 23/24] Remove top padding from shell, move down into individual screens (#5548) --- src/Navigation.tsx | 26 +- src/components/Layout.tsx | 41 ++ .../E2E/SharedPreferencesTesterScreen.tsx | 199 +++--- src/screens/Hashtag.tsx | 31 +- src/screens/Messages/ChatList.tsx | 9 +- src/screens/Messages/Conversation.tsx | 13 +- src/screens/Messages/Settings.tsx | 175 +++--- src/screens/Moderation/index.tsx | 51 +- src/screens/Post/PostLikedBy.tsx | 18 +- src/screens/Post/PostQuotes.tsx | 18 +- src/screens/Post/PostRepostedBy.tsx | 18 +- src/screens/Profile/KnownFollowers.tsx | 28 +- src/screens/Profile/ProfileLabelerLikedBy.tsx | 6 +- src/screens/Settings/AppearanceSettings.tsx | 6 +- src/screens/StarterPack/StarterPackScreen.tsx | 27 +- src/screens/StarterPack/Wizard/index.tsx | 83 +-- src/view/screens/AccessibilitySettings.tsx | 5 +- src/view/screens/AppPasswords.tsx | 9 + src/view/screens/CommunityGuidelines.tsx | 26 +- src/view/screens/CopyrightPolicy.tsx | 26 +- src/view/screens/Debug.tsx | 47 +- src/view/screens/DebugMod.tsx | 569 +++++++++--------- src/view/screens/Feeds.tsx | 8 +- src/view/screens/Home.tsx | 21 +- src/view/screens/LanguageSettings.tsx | 451 +++++++------- src/view/screens/Lists.tsx | 5 +- src/view/screens/Log.tsx | 17 +- .../screens/ModerationBlockedAccounts.tsx | 145 ++--- src/view/screens/ModerationModlists.tsx | 5 +- src/view/screens/ModerationMutedAccounts.tsx | 143 ++--- src/view/screens/NotFound.tsx | 24 +- src/view/screens/Notifications.tsx | 64 +- src/view/screens/NotificationsSettings.tsx | 95 +-- src/view/screens/PostThread.tsx | 15 +- .../screens/PreferencesExternalEmbeds.tsx | 12 +- src/view/screens/PreferencesFollowingFeed.tsx | 5 +- src/view/screens/PreferencesThreads.tsx | 5 +- src/view/screens/PrivacyPolicy.tsx | 26 +- src/view/screens/Profile.tsx | 11 +- src/view/screens/ProfileFeed.tsx | 53 +- src/view/screens/ProfileFeedLikedBy.tsx | 14 +- src/view/screens/ProfileFollowers.tsx | 24 +- src/view/screens/ProfileFollows.tsx | 24 +- src/view/screens/ProfileList.tsx | 9 + src/view/screens/SavedFeeds.tsx | 226 ++++--- src/view/screens/Search/Explore.tsx | 8 +- src/view/screens/Search/Search.tsx | 5 +- src/view/screens/Settings/index.tsx | 5 +- src/view/screens/Storybook/index.tsx | 15 +- src/view/screens/Support.tsx | 29 +- src/view/screens/TermsOfService.tsx | 26 +- src/view/shell/index.tsx | 28 +- src/view/shell/index.web.tsx | 15 +- 53 files changed, 1562 insertions(+), 1402 deletions(-) create mode 100644 src/components/Layout.tsx diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 323f668b79..81d08c7da3 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -17,7 +17,6 @@ import { import {timeout} from '#/lib/async/timeout' import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' -import {usePalette} from '#/lib/hooks/usePalette' import {useWebScrollRestoration} from '#/lib/hooks/useWebScrollRestoration' import {buildStateObject} from '#/lib/routes/helpers' import { @@ -93,6 +92,7 @@ import { StarterPackScreenShort, } from '#/screens/StarterPack/StarterPackScreen' import {Wizard} from '#/screens/StarterPack/Wizard' +import {useTheme} from '#/alf' import {router} from '#/routes' import {Referrer} from '../modules/expo-bluesky-swiss-army' @@ -412,7 +412,7 @@ function TabsNavigator() { } function HomeTabNavigator() { - const pal = usePalette('default') + const t = useTheme() return ( HomeScreen} /> HomeScreen} /> @@ -432,7 +432,7 @@ function HomeTabNavigator() { } function SearchTabNavigator() { - const pal = usePalette('default') + const t = useTheme() return ( SearchScreen} /> {commonScreens(SearchTab as typeof HomeTab)} @@ -450,7 +450,7 @@ function SearchTabNavigator() { } function NotificationsTabNavigator() { - const pal = usePalette('default') + const t = useTheme() return ( { - const pal = usePalette('default') + const t = useTheme() const numUnread = useUnreadNotifications() const screenListeners = useWebScrollRestoration() const title = (page: MessageDescriptor) => bskyTitle(i18n._(page), numUnread) @@ -541,7 +541,7 @@ const FlatNavigator = () => { gestureEnabled: true, fullScreenGestureEnabled: true, headerShown: false, - contentStyle: pal.view, + contentStyle: t.atoms.bg, }}> & { + disableTopPadding?: boolean + style?: StyleProp +}): React.ReactNode => { + const {top} = useSafeAreaInsets() + return ( + + ) +} +Screen = React.memo(Screen) +export {Screen} diff --git a/src/screens/E2E/SharedPreferencesTesterScreen.tsx b/src/screens/E2E/SharedPreferencesTesterScreen.tsx index 06bf538ea6..5a9e6cd22d 100644 --- a/src/screens/E2E/SharedPreferencesTesterScreen.tsx +++ b/src/screens/E2E/SharedPreferencesTesterScreen.tsx @@ -1,9 +1,10 @@ import React from 'react' import {View} from 'react-native' -import {ScrollView} from 'view/com/util/Views' +import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' import {Button, ButtonText} from '#/components/Button' +import * as Layout from '#/components/Layout' import {Text} from '#/components/Typography' import {SharedPrefs} from '../../../modules/expo-bluesky-swiss-army' @@ -11,103 +12,105 @@ export function SharedPreferencesTesterScreen() { const [currentTestOutput, setCurrentTestOutput] = React.useState('') return ( - - - - {currentTestOutput} + + + + + {currentTestOutput} + + + + + + + + + - - - - - - - - - - + + ) } diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index 964cb0191f..adf5f00801 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -6,23 +6,24 @@ import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {HITSLOP_10} from 'lib/constants' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' -import {CommonNavigatorParams} from 'lib/routes/types' -import {shareUrl} from 'lib/sharing' -import {cleanError} from 'lib/strings/errors' -import {sanitizeHandle} from 'lib/strings/handles' -import {enforceLen} from 'lib/strings/helpers' -import {isNative, isWeb} from 'platform/detection' -import {useSearchPostsQuery} from 'state/queries/search-posts' -import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from 'state/shell' +import {HITSLOP_10} from '#/lib/constants' +import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' +import {CommonNavigatorParams} from '#/lib/routes/types' +import {shareUrl} from '#/lib/sharing' +import {cleanError} from '#/lib/strings/errors' +import {sanitizeHandle} from '#/lib/strings/handles' +import {enforceLen} from '#/lib/strings/helpers' +import {isNative, isWeb} from '#/platform/detection' +import {useSearchPostsQuery} from '#/state/queries/search-posts' +import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {Pager} from '#/view/com/pager/Pager' import {TabBar} from '#/view/com/pager/TabBar' +import {Post} from '#/view/com/post/Post' +import {List} from '#/view/com/util/List' +import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {Post} from 'view/com/post/Post' -import {List} from 'view/com/util/List' -import {ViewHeader} from 'view/com/util/ViewHeader' import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox' +import * as Layout from '#/components/Layout' import {ListFooter, ListMaybePlaceholder} from '#/components/Lists' const renderItem = ({item}: ListRenderItemInfo) => { @@ -108,7 +109,7 @@ export default function HashtagScreen({ }, [_, fullTag, author, activeTab]) return ( - <> + {section.component} ))} - + ) } diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index 9912456e13..45b3bf14fa 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -28,6 +28,7 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider' +import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' import {ListFooter} from '#/components/Lists' import {Loader} from '#/components/Loader' @@ -149,7 +150,7 @@ export function MessagesScreen({navigation, route}: Props) { if (conversations.length < 1) { return ( - + {gtMobile ? ( )} - + ) } return ( - + {!gtMobile && ( - + ) } diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx index 21fdfe0ea9..651915738a 100644 --- a/src/screens/Messages/Conversation.tsx +++ b/src/screens/Messages/Conversation.tsx @@ -18,10 +18,11 @@ import {useProfileQuery} from '#/state/queries/profile' import {useSetMinimalShellMode} from '#/state/shell' import {CenteredView} from '#/view/com/util/Views' import {MessagesList} from '#/screens/Messages/components/MessagesList' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' import {MessagesListBlockedFooter} from '#/components/dms/MessagesListBlockedFooter' import {MessagesListHeader} from '#/components/dms/MessagesListHeader' import {Error} from '#/components/Error' +import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' type Props = NativeStackScreenProps< @@ -64,9 +65,11 @@ export function MessagesConversationScreen({route}: Props) { ) return ( - - - + + + + + ) } @@ -100,7 +103,7 @@ function Inner() { if (convoState.status === ConvoStatus.Error) { return ( - + - - - - Allow new messages from - - - - - - Everyone - - - - - - Users I follow - - - - - - No one - - - - - - - - You can continue ongoing conversations regardless of which setting - you choose. - - - {isNative && ( - <> - - - Notification Sounds - - - - - - Enabled - - - - - - Disabled - - - - - - - )} - - + + + + + + Allow new messages from + + + + + + Everyone + + + + + + Users I follow + + + + + + No one + + + + + + + + You can continue ongoing conversations regardless of which setting + you choose. + + + {isNative && ( + <> + + + Notification Sounds + + + + + + Enabled + + + + + + Disabled + + + + + + + )} + + + ) } diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 070b879508..222774e053 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -41,6 +41,7 @@ import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filte import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' import * as LabelingService from '#/components/LabelingServiceCard' +import * as Layout from '#/components/Layout' import {InlineLinkText, Link} from '#/components/Link' import {Loader} from '#/components/Loader' import {GlobalLabelPreference} from '#/components/moderation/LabelPreference' @@ -94,31 +95,33 @@ export function ModerationScreen( const error = preferencesError return ( - - + + + - {isLoading ? ( - - - - ) : error || !preferences ? ( - - ) : ( - - )} - + {isLoading ? ( + + + + ) : error || !preferences ? ( + + ) : ( + + )} + + ) } diff --git a/src/screens/Post/PostLikedBy.tsx b/src/screens/Post/PostLikedBy.tsx index ea522488cc..6fc485f34b 100644 --- a/src/screens/Post/PostLikedBy.tsx +++ b/src/screens/Post/PostLikedBy.tsx @@ -5,12 +5,12 @@ import {useFocusEffect} from '@react-navigation/native' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {isWeb} from 'platform/detection' import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps @@ -27,10 +27,12 @@ export const PostLikedByScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/screens/Post/PostQuotes.tsx b/src/screens/Post/PostQuotes.tsx index 0d59418f15..71dd8ad8d7 100644 --- a/src/screens/Post/PostQuotes.tsx +++ b/src/screens/Post/PostQuotes.tsx @@ -5,12 +5,12 @@ import {useFocusEffect} from '@react-navigation/native' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {isWeb} from 'platform/detection' import {PostQuotes as PostQuotesComponent} from '#/view/com/post-thread/PostQuotes' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps @@ -27,10 +27,12 @@ export const PostQuotesScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/screens/Post/PostRepostedBy.tsx b/src/screens/Post/PostRepostedBy.tsx index f8c058ff79..c1e8b29878 100644 --- a/src/screens/Post/PostRepostedBy.tsx +++ b/src/screens/Post/PostRepostedBy.tsx @@ -5,12 +5,12 @@ import {useFocusEffect} from '@react-navigation/native' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {isWeb} from 'platform/detection' import {PostRepostedBy as PostRepostedByComponent} from '#/view/com/post-thread/PostRepostedBy' import {ViewHeader} from '#/view/com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' type Props = NativeStackScreenProps @@ -27,10 +27,12 @@ export const PostRepostedByScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/screens/Profile/KnownFollowers.tsx b/src/screens/Profile/KnownFollowers.tsx index 5cb45a11e1..7e396c350f 100644 --- a/src/screens/Profile/KnownFollowers.tsx +++ b/src/screens/Profile/KnownFollowers.tsx @@ -1,20 +1,20 @@ import React from 'react' -import {View} from 'react-native' import {AppBskyActorDefs} from '@atproto/api' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' import {useProfileKnownFollowersQuery} from '#/state/queries/known-followers' import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {useSetMinimalShellMode} from '#/state/shell' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {List} from '#/view/com/util/List' import {ViewHeader} from '#/view/com/util/ViewHeader' +import * as Layout from '#/components/Layout' import { ListFooter, ListHeaderDesktop, @@ -92,19 +92,21 @@ export const ProfileKnownFollowersScreen = ({route}: Props) => { if (followers.length < 1) { return ( - + + + ) } return ( - + { initialNumToRender={initialNumToRender} windowSize={11} /> - + ) } diff --git a/src/screens/Profile/ProfileLabelerLikedBy.tsx b/src/screens/Profile/ProfileLabelerLikedBy.tsx index 8650ac2e64..ccc2700847 100644 --- a/src/screens/Profile/ProfileLabelerLikedBy.tsx +++ b/src/screens/Profile/ProfileLabelerLikedBy.tsx @@ -1,5 +1,4 @@ import React from 'react' -import {View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' @@ -8,6 +7,7 @@ import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {makeRecordUri} from '#/lib/strings/url-helpers' import {useSetMinimalShellMode} from '#/state/shell' import {ViewHeader} from '#/view/com/util/ViewHeader' +import * as Layout from '#/components/Layout' import {LikedByList} from '#/components/LikedByList' export function ProfileLabelerLikedByScreen({ @@ -25,9 +25,9 @@ export function ProfileLabelerLikedByScreen({ ) return ( - + - + ) } diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx index 69e04f4af1..c317c930fa 100644 --- a/src/screens/Settings/AppearanceSettings.tsx +++ b/src/screens/Settings/AppearanceSettings.tsx @@ -10,7 +10,6 @@ import {useLingui} from '@lingui/react' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' -import {s} from '#/lib/styles' import {useSetThemePrefs, useThemePrefs} from '#/state/shell' import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {ScrollView} from '#/view/com/util/Views' @@ -21,6 +20,7 @@ import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon' import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone' import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize' import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase' +import * as Layout from '#/components/Layout' import {Text} from '#/components/Typography' type Props = NativeStackScreenProps @@ -76,7 +76,7 @@ export function AppearanceSettingsScreen({}: Props) { return ( - + - + ) } diff --git a/src/screens/StarterPack/StarterPackScreen.tsx b/src/screens/StarterPack/StarterPackScreen.tsx index 68803ac005..4baec9ec13 100644 --- a/src/screens/StarterPack/StarterPackScreen.tsx +++ b/src/screens/StarterPack/StarterPackScreen.tsx @@ -53,6 +53,7 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/ico import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import * as Layout from '#/components/Layout' import {ListMaybePlaceholder} from '#/components/Lists' import {Loader} from '#/components/Loader' import * as Menu from '#/components/Menu' @@ -76,7 +77,11 @@ type StarterPackScreenShortProps = NativeStackScreenProps< > export function StarterPackScreen({route}: StarterPackScreeProps) { - return + return ( + + + + ) } export function StarterPackScreenShort({route}: StarterPackScreenShortProps) { @@ -91,15 +96,21 @@ export function StarterPackScreenShort({route}: StarterPackScreenShortProps) { if (isLoading || isError || !resolvedStarterPack) { return ( - + + + ) } - return + return ( + + + + ) } export function StarterPackScreenInner({ diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index 29ef44ee09..f8d503274f 100644 --- a/src/screens/StarterPack/Wizard/index.tsx +++ b/src/screens/StarterPack/Wizard/index.tsx @@ -19,32 +19,32 @@ import {useLingui} from '@lingui/react' import {useFocusEffect, useNavigation} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {logger} from '#/logger' -import {HITSLOP_10, STARTER_PACK_MAX_SIZE} from 'lib/constants' -import {createSanitizedDisplayName} from 'lib/moderation/create-sanitized-display-name' -import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' -import {logEvent} from 'lib/statsig/statsig' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {enforceLen} from 'lib/strings/helpers' +import {HITSLOP_10, STARTER_PACK_MAX_SIZE} from '#/lib/constants' +import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name' +import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' +import {logEvent} from '#/lib/statsig/statsig' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {enforceLen} from '#/lib/strings/helpers' import { getStarterPackOgCard, parseStarterPackUri, -} from 'lib/strings/starter-pack' -import {isAndroid, isNative, isWeb} from 'platform/detection' -import {useModerationOpts} from 'state/preferences/moderation-opts' -import {useAllListMembersQuery} from 'state/queries/list-members' -import {useProfileQuery} from 'state/queries/profile' +} from '#/lib/strings/starter-pack' +import {logger} from '#/logger' +import {isAndroid, isNative, isWeb} from '#/platform/detection' +import {useModerationOpts} from '#/state/preferences/moderation-opts' +import {useAllListMembersQuery} from '#/state/queries/list-members' +import {useProfileQuery} from '#/state/queries/profile' import { useCreateStarterPackMutation, useEditStarterPackMutation, useStarterPackQuery, -} from 'state/queries/starter-packs' -import {useSession} from 'state/session' -import {useSetMinimalShellMode} from 'state/shell' +} from '#/state/queries/starter-packs' +import {useSession} from '#/state/session' +import {useSetMinimalShellMode} from '#/state/shell' import * as Toast from '#/view/com/util/Toast' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {CenteredView} from 'view/com/util/Views' +import {UserAvatar} from '#/view/com/util/UserAvatar' +import {CenteredView} from '#/view/com/util/Views' import {useWizardState, WizardStep} from '#/screens/StarterPack/Wizard/State' import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails' import {StepFeeds} from '#/screens/StarterPack/Wizard/StepFeeds' @@ -52,6 +52,7 @@ import {StepProfiles} from '#/screens/StarterPack/Wizard/StepProfiles' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' import {useDialogControl} from '#/components/Dialog' +import * as Layout from '#/components/Layout' import {ListMaybePlaceholder} from '#/components/Lists' import {Loader} from '#/components/Loader' import {WizardEditListDialog} from '#/components/StarterPack/Wizard/WizardEditListDialog' @@ -97,33 +98,39 @@ export function Wizard({ if (!isReady) { return ( - + + + ) } else if (isEdit && starterPack?.creator.did !== currentAccount?.did) { return ( - + + + ) } return ( - - - + + + + + ) } diff --git a/src/view/screens/AccessibilitySettings.tsx b/src/view/screens/AccessibilitySettings.tsx index 5d314e8e69..bf9f5fcb5e 100644 --- a/src/view/screens/AccessibilitySettings.tsx +++ b/src/view/screens/AccessibilitySettings.tsx @@ -27,6 +27,7 @@ import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {Text} from '#/view/com/util/text/Text' import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -54,7 +55,7 @@ export function AccessibilitySettingsScreen({}: Props) { ) return ( - + )} - + ) } diff --git a/src/view/screens/AppPasswords.tsx b/src/view/screens/AppPasswords.tsx index 21a9cb0eb7..48abd964f9 100644 --- a/src/view/screens/AppPasswords.tsx +++ b/src/view/screens/AppPasswords.tsx @@ -30,10 +30,19 @@ import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' import {useDialogControl} from '#/components/Dialog' +import * as Layout from '#/components/Layout' import * as Prompt from '#/components/Prompt' type Props = NativeStackScreenProps export function AppPasswords({}: Props) { + return ( + + + + ) +} + +function AppPasswordsInner() { const pal = usePalette('default') const {_} = useLingui() const setMinimalShellMode = useSetMinimalShellMode() diff --git a/src/view/screens/CommunityGuidelines.tsx b/src/view/screens/CommunityGuidelines.tsx index f6c29a3b8d..76993d5b72 100644 --- a/src/view/screens/CommunityGuidelines.tsx +++ b/src/view/screens/CommunityGuidelines.tsx @@ -1,16 +1,18 @@ import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -28,7 +30,7 @@ export const CommunityGuidelinesScreen = (_props: Props) => { ) return ( - + @@ -45,6 +47,6 @@ export const CommunityGuidelinesScreen = (_props: Props) => { - + ) } diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx index 522a9e4dba..fe2731c539 100644 --- a/src/view/screens/CopyrightPolicy.tsx +++ b/src/view/screens/CopyrightPolicy.tsx @@ -1,16 +1,18 @@ import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const CopyrightPolicyScreen = (_props: Props) => { @@ -25,7 +27,7 @@ export const CopyrightPolicyScreen = (_props: Props) => { ) return ( - + @@ -42,6 +44,6 @@ export const CopyrightPolicyScreen = (_props: Props) => { - + ) } diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx index f26b1505a8..60dc089dd8 100644 --- a/src/view/screens/Debug.tsx +++ b/src/view/screens/Debug.tsx @@ -1,24 +1,29 @@ import React from 'react' import {ScrollView, View} from 'react-native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import * as Toast from 'view/com/util/Toast' -import {Text} from '../com/util/text/Text' -import {ViewSelector} from '../com/util/ViewSelector' -import {EmptyState} from '../com/util/EmptyState' -import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder' -import {Button, ButtonType} from '../com/util/forms/Button' -import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton' -import {ToggleButton} from '../com/util/forms/ToggleButton' -import {RadioGroup} from '../com/util/forms/RadioGroup' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {ErrorMessage} from '../com/util/error/ErrorMessage' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' +import {PaletteColorName, ThemeProvider} from '#/lib/ThemeContext' +import {EmptyState} from '#/view/com/util/EmptyState' +import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import {Button, ButtonType} from '#/view/com/util/forms/Button' +import { + DropdownButton, + DropdownItem, +} from '#/view/com/util/forms/DropdownButton' +import {RadioGroup} from '#/view/com/util/forms/RadioGroup' +import {ToggleButton} from '#/view/com/util/forms/ToggleButton' +import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder' +import {Text} from '#/view/com/util/text/Text' +import * as Toast from '#/view/com/util/Toast' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {ViewSelector} from '#/view/com/util/ViewSelector' +import * as Layout from '#/components/Layout' + const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs'] export const DebugScreen = ({}: NativeStackScreenProps< @@ -33,10 +38,12 @@ export const DebugScreen = ({}: NativeStackScreenProps< } return ( - + + + ) } diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx index d83623adc1..b87fc8683a 100644 --- a/src/view/screens/DebugMod.tsx +++ b/src/view/screens/DebugMod.tsx @@ -21,6 +21,7 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {moderationOptsOverrideContext} from '#/state/preferences/moderation-opts' import {FeedNotification} from '#/state/queries/notifications/types' import { @@ -28,7 +29,6 @@ import { shouldFilterNotif, } from '#/state/queries/notifications/util' import {useSession} from '#/state/session' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {CenteredView, ScrollView} from '#/view/com/util/Views' import {ProfileHeaderStandard} from '#/screens/Profile/Header/ProfileHeaderStandard' import {atoms as a, useTheme} from '#/alf' @@ -41,6 +41,7 @@ import { ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottom, ChevronTop_Stroke2_Corner0_Rounded as ChevronTop, } from '#/components/icons/Chevron' +import * as Layout from '#/components/Layout' import {H1, H3, P, Text} from '#/components/Typography' import {ScreenHider} from '../../components/moderation/ScreenHider' import {FeedItem as NotifFeedItem} from '../com/notifications/FeedItem' @@ -264,309 +265,325 @@ export const DebugModScreen = ({}: NativeStackScreenProps< }, [post, modOpts]) return ( - - - -

Moderation states

+ + + + +

+ Moderation states +

- - - - Label - - - Block - - - Mute - - + + + + Label + + + Block + + + Mute + + - {scenario[0] === 'label' && ( - <> - - - - {LABEL_VALUES.map(labelValue => { - let targetFixed = target[0] - if ( - targetFixed !== 'account' && - targetFixed !== 'profile' - ) { - targetFixed = 'content' - } - const disabled = - isSelfLabel && - LABELS[labelValue].flags.includes('no-self') - return ( - - - {labelValue} - - ) - })} - - - Custom label - - - - - {label[0] === 'custom' ? ( - - ) : ( - <> - - - - )} - - - - + {scenario[0] === 'label' && ( + <> + - - - - Target is me - - - - Following target - - - - Self label - - - - Adult disabled - - - - Logged out + type="radio" + values={label} + onChange={setLabel}> + + {LABEL_VALUES.map(labelValue => { + let targetFixed = target[0] + if ( + targetFixed !== 'account' && + targetFixed !== 'profile' + ) { + targetFixed = 'content' + } + const disabled = + isSelfLabel && + LABELS[labelValue].flags.includes('no-self') + return ( + + + {labelValue} + + ) + })} + + + Custom label - {LABELS[label[0] as keyof typeof LABELS]?.configurable !== - false && ( - - - Preference - - - + ) : ( + <> + + + + )} + + + + + + + + + Target is me + + + + Following target + + + + Self label + + + + Adult disabled + + + + Logged out + + + + + {LABELS[label[0] as keyof typeof LABELS]?.configurable !== + false && ( + + - + Preference + + + + + + Hide + + + + Warn + + + + Ignore + + + + + )} + + + + + + + Target + + + + + - Hide + Account - + - Warn + Profile - + - Ignore + Post + + + + Embed - )} - - - - - - - Target - - - - - - - Account - - - - Profile - - - - Post - - - - Embed - - - - - - )} - - - - - - - - Post - - - Notifications - - - Account - - - Data - - - - - {view[0] === 'post' && ( - <> - - - - - - - - )} - {view[0] === 'notifications' && ( - <> - - - - - - - )} + - {view[0] === 'account' && ( - <> - - + - - - - )} + + + Post + + + Notifications + + + Account + + + Data + + - {view[0] === 'data' && ( - <> - - - - - - - )} - + + {view[0] === 'post' && ( + <> + + - - - - + + + + + + + )} + + {view[0] === 'notifications' && ( + <> + + + + + + + )} + + {view[0] === 'account' && ( + <> + + + + + + + )} + + {view[0] === 'data' && ( + <> + + + + + + + )} + + + + + + + ) } diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 87af59f7f6..404145714a 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -40,6 +40,7 @@ import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' +import * as Layout from '#/components/Layout' import * as ListCard from '#/components/ListCard' type Props = NativeStackScreenProps @@ -545,7 +546,7 @@ export function FeedsScreen(_props: Props) { ) return ( - + {isMobile && ( )} - + ) } @@ -768,9 +769,6 @@ function FeedsAboutHeader() { } const styles = StyleSheet.create({ - container: { - flex: 1, - }, list: { height: '100%', }, diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 4172d64089..2374493838 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' +import {ActivityIndicator, StyleSheet} from 'react-native' import {useFocusEffect} from '@react-navigation/native' import {PROD_DEFAULT_FEED} from '#/lib/constants' @@ -23,12 +23,13 @@ import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' import {FeedPage} from '#/view/com/feeds/FeedPage' +import {HomeHeader} from '#/view/com/home/HomeHeader' import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager' import {CustomFeedEmptyState} from '#/view/com/posts/CustomFeedEmptyState' import {FollowingEmptyState} from '#/view/com/posts/FollowingEmptyState' import {FollowingEndOfFeed} from '#/view/com/posts/FollowingEndOfFeed' import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned' -import {HomeHeader} from '../com/home/HomeHeader' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function HomeScreen(props: Props) { @@ -70,17 +71,19 @@ export function HomeScreen(props: Props) { if (preferences && pinnedFeedInfos && !isPinnedFeedsLoading) { return ( - + + + ) } else { return ( - + - + ) } } diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx index c1daa54e6c..6af18103c1 100644 --- a/src/view/screens/LanguageSettings.tsx +++ b/src/view/screens/LanguageSettings.tsx @@ -19,9 +19,10 @@ import {useModalControls} from '#/state/modals' import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' import {useSetMinimalShellMode} from '#/state/shell' import {Button} from '#/view/com/util/forms/Button' +import {Text} from '#/view/com/util/text/Text' import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {Text} from '../com/util/text/Text' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps @@ -76,232 +77,234 @@ export function LanguageSettingsScreen(_props: Props) { }, [langPrefs.contentLanguages]) return ( - - + + + - - {/* APP LANGUAGE */} - - - 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: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - inputIOS: { - backgroundColor: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - - inputWeb: { - cursor: 'pointer', - // @ts-ignore web only - '-moz-appearance': 'none', - '-webkit-appearance': 'none', - appearance: 'none', - outline: 0, - borderWidth: 0, - backgroundColor: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - fontFamily: 'inherit', - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - }} - /> - - - - - - - - - - {/* PRIMARY LANGUAGE */} - - - 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: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - inputIOS: { - backgroundColor: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - inputWeb: { - cursor: 'pointer', - // @ts-ignore web only - '-moz-appearance': 'none', - '-webkit-appearance': 'none', - appearance: 'none', - outline: 0, - borderWidth: 0, - backgroundColor: pal.viewLight.backgroundColor, - color: pal.text.color, - fontSize: 14, - fontFamily: 'inherit', - letterSpacing: 0.5, - fontWeight: '600', - paddingHorizontal: 14, - paddingVertical: 8, - borderRadius: 24, - }, - }} - /> - - - - - - - - - - {/* CONTENT LANGUAGES */} - - - Content Languages - - - - Select which languages you want your subscribed feeds to include. - If none are selected, all languages will be shown. - - - - + + + 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: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + inputIOS: { + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + + inputWeb: { + cursor: 'pointer', + // @ts-ignore web only + '-moz-appearance': 'none', + '-webkit-appearance': 'none', + appearance: 'none', + outline: 0, + borderWidth: 0, + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + fontFamily: 'inherit', + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + }} + /> + + + + + + + + + + {/* PRIMARY LANGUAGE */} + + + 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: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + inputIOS: { + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + inputWeb: { + cursor: 'pointer', + // @ts-ignore web only + '-moz-appearance': 'none', + '-webkit-appearance': 'none', + appearance: 'none', + outline: 0, + borderWidth: 0, + backgroundColor: pal.viewLight.backgroundColor, + color: pal.text.color, + fontSize: 14, + fontFamily: 'inherit', + letterSpacing: 0.5, + fontWeight: '600', + paddingHorizontal: 14, + paddingVertical: 8, + borderRadius: 24, + }, + }} + /> + + + + + + + + + + {/* CONTENT LANGUAGES */} + + + 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/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index d6a86e5143..b79da6d540 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -16,6 +16,7 @@ import {MyLists} from '#/view/com/lists/MyLists' import {Button} from '#/view/com/util/forms/Button' import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {Text} from '#/view/com/util/text/Text' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function ListsScreen({}: Props) { @@ -48,7 +49,7 @@ export function ListsScreen({}: Props) { }, [openModal, navigation]) return ( - + - + ) } diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx index e6040b77e2..026319baf6 100644 --- a/src/view/screens/Log.tsx +++ b/src/view/screens/Log.tsx @@ -5,16 +5,17 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {usePalette} from '#/lib/hooks/usePalette' import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {getEntries} from '#/logger/logDump' import {useTickEveryMinute} from '#/state/shell' import {useSetMinimalShellMode} from '#/state/shell' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from '../com/util/Views' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' export function LogScreen({}: NativeStackScreenProps< CommonNavigatorParams, @@ -42,7 +43,7 @@ export function LogScreen({}: NativeStackScreenProps< } return ( - + {getEntries() @@ -91,7 +92,7 @@ export function LogScreen({}: NativeStackScreenProps< })} - + ) } diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx index 88a5df7ece..53e31d1d2e 100644 --- a/src/view/screens/ModerationBlockedAccounts.tsx +++ b/src/view/screens/ModerationBlockedAccounts.tsx @@ -20,10 +20,11 @@ import {logger} from '#/logger' import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts' import {useSetMinimalShellMode} from '#/state/shell' import {ProfileCard} from '#/view/com/profile/ProfileCard' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -95,76 +96,78 @@ export function ModerationBlockedAccounts({}: Props) { /> ) return ( - - - + - - Blocked accounts cannot reply in your threads, mention you, or - otherwise interact with you. You will not see their content and they - will be prevented from seeing yours. - - - {isEmpty ? ( - - {isError ? ( - - ) : ( - - - - You have not blocked any accounts yet. To block an account, go - to their profile and select "Block account" from the menu on - their account. - - - - )} - - ) : ( - item.did} - refreshControl={ - - } - onEndReached={onEndReached} - renderItem={renderItem} - initialNumToRender={15} - // FIXME(dan) + styles.container, + isTabletOrDesktop && styles.containerDesktop, + pal.view, + pal.border, + ]} + testID="blockedAccountsScreen"> + + + + Blocked accounts cannot reply in your threads, mention you, or + otherwise interact with you. You will not see their content and they + will be prevented from seeing yours. + + + {isEmpty ? ( + + {isError ? ( + + ) : ( + + + + You have not blocked any accounts yet. To block an account, + go to their profile and select "Block account" from the menu + on their account. + + + + )} + + ) : ( + item.did} + refreshControl={ + + } + onEndReached={onEndReached} + renderItem={renderItem} + initialNumToRender={15} + // FIXME(dan) - ListFooterComponent={() => ( - - {(isFetching || isFetchingNextPage) && } - - )} - // @ts-ignore our .web version only -prf - desktopFixedHeight - /> - )} - + ListFooterComponent={() => ( + + {(isFetching || isFetchingNextPage) && } + + )} + // @ts-ignore our .web version only -prf + desktopFixedHeight + /> + )} + + ) } diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index 39ba540b49..b147ba502d 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/src/view/screens/ModerationModlists.tsx @@ -16,6 +16,7 @@ import {MyLists} from '#/view/com/lists/MyLists' import {Button} from '#/view/com/util/forms/Button' import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {Text} from '#/view/com/util/text/Text' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function ModerationModlistsScreen({}: Props) { @@ -48,7 +49,7 @@ export function ModerationModlistsScreen({}: Props) { }, [openModal, navigation]) return ( - + - + ) } diff --git a/src/view/screens/ModerationMutedAccounts.tsx b/src/view/screens/ModerationMutedAccounts.tsx index bd29cb2d93..6d34c8a5f4 100644 --- a/src/view/screens/ModerationMutedAccounts.tsx +++ b/src/view/screens/ModerationMutedAccounts.tsx @@ -20,10 +20,11 @@ import {logger} from '#/logger' import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts' import {useSetMinimalShellMode} from '#/state/shell' import {ProfileCard} from '#/view/com/profile/ProfileCard' +import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' import {CenteredView} from '#/view/com/util/Views' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -95,75 +96,77 @@ export function ModerationMutedAccounts({}: Props) { /> ) return ( - - - + - - Muted accounts have their posts removed from your feed and from your - notifications. Mutes are completely private. - - - {isEmpty ? ( - - {isError ? ( - - ) : ( - - - - You have not muted any accounts yet. To mute an account, go to - their profile and select "Mute account" from the menu on their - account. - - - - )} - - ) : ( - item.did} - refreshControl={ - - } - onEndReached={onEndReached} - renderItem={renderItem} - initialNumToRender={15} - // FIXME(dan) + styles.container, + isTabletOrDesktop && styles.containerDesktop, + pal.view, + pal.border, + ]} + testID="mutedAccountsScreen"> + + + + Muted accounts have their posts removed from your feed and from your + notifications. Mutes are completely private. + + + {isEmpty ? ( + + {isError ? ( + + ) : ( + + + + You have not muted any accounts yet. To mute an account, go + to their profile and select "Mute account" from the menu on + their account. + + + + )} + + ) : ( + item.did} + refreshControl={ + + } + onEndReached={onEndReached} + renderItem={renderItem} + initialNumToRender={15} + // FIXME(dan) - ListFooterComponent={() => ( - - {(isFetching || isFetchingNextPage) && } - - )} - // @ts-ignore our .web version only -prf - desktopFixedHeight - /> - )} - + ListFooterComponent={() => ( + + {(isFetching || isFetchingNextPage) && } + + )} + // @ts-ignore our .web version only -prf + desktopFixedHeight + /> + )} + + ) } diff --git a/src/view/screens/NotFound.tsx b/src/view/screens/NotFound.tsx index 7d51619b37..90d5e17ddc 100644 --- a/src/view/screens/NotFound.tsx +++ b/src/view/screens/NotFound.tsx @@ -1,19 +1,21 @@ import React from 'react' import {StyleSheet, View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { - useNavigation, StackActions, useFocusEffect, + useNavigation, } from '@react-navigation/native' -import {ViewHeader} from '../com/util/ViewHeader' -import {Text} from '../com/util/text/Text' -import {Button} from 'view/com/util/forms/Button' -import {NavigationProp} from 'lib/routes/types' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + +import {usePalette} from '#/lib/hooks/usePalette' +import {NavigationProp} from '#/lib/routes/types' +import {s} from '#/lib/styles' import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {Button} from '#/view/com/util/forms/Button' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import * as Layout from '#/components/Layout' export const NotFoundScreen = () => { const pal = usePalette('default') @@ -38,7 +40,7 @@ export const NotFoundScreen = () => { }, [navigation, canGoBack]) return ( - + @@ -61,7 +63,7 @@ export const NotFoundScreen = () => { onPress={onPressHome} /> - + ) } diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 818d3d0ed4..531d10a7f8 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -34,6 +34,7 @@ import {CenteredView} from '#/view/com/util/Views' import {atoms as a, useTheme} from '#/alf' import {Button} from '#/components/Button' import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsIcon} from '#/components/icons/SettingsGear2' +import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -192,39 +193,38 @@ export function NotificationsScreen({route: {params}}: Props) { }, [renderButton, isLoadingLatest]) return ( - - - - + + - - {(isScrolledDown || hasNew) && ( - + + + {(isScrolledDown || hasNew) && ( + + )} + openComposer({})} + icon={} + accessibilityRole="button" + accessibilityLabel={_(msg`New post`)} + accessibilityHint="" /> - )} - openComposer({})} - icon={} - accessibilityRole="button" - accessibilityLabel={_(msg`New post`)} - accessibilityHint="" - /> - + + ) } diff --git a/src/view/screens/NotificationsSettings.tsx b/src/view/screens/NotificationsSettings.tsx index f395941df9..f8d848a626 100644 --- a/src/view/screens/NotificationsSettings.tsx +++ b/src/view/screens/NotificationsSettings.tsx @@ -13,6 +13,7 @@ import {atoms as a, useTheme} from '#/alf' import {Admonition} from '#/components/Admonition' import {Error} from '#/components/Error' import * as Toggle from '#/components/forms/Toggle' +import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' @@ -35,52 +36,54 @@ export function NotificationsSettingsScreen({}: Props) { : 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. - - - - )} - + {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/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index 88d0726c12..c183569b74 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -2,11 +2,12 @@ import React from 'react' import {View} from 'react-native' import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {makeRecordUri} from '#/lib/strings/url-helpers' import {useSetMinimalShellMode} from '#/state/shell' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {s} from 'lib/styles' -import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread' +import {PostThread as PostThreadComponent} from '#/view/com/post-thread/PostThread' +import {atoms as a} from '#/alf' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function PostThreadScreen({route}: Props) { @@ -22,10 +23,10 @@ export function PostThreadScreen({route}: Props) { ) return ( - - + + - + ) } diff --git a/src/view/screens/PreferencesExternalEmbeds.tsx b/src/view/screens/PreferencesExternalEmbeds.tsx index ae23b6e950..5a657ce845 100644 --- a/src/view/screens/PreferencesExternalEmbeds.tsx +++ b/src/view/screens/PreferencesExternalEmbeds.tsx @@ -10,17 +10,17 @@ import { EmbedPlayerSource, externalEmbedLabels, } from '#/lib/strings/embed-player' -import {s} from '#/lib/styles' import { useExternalEmbedsPrefs, useSetExternalEmbedPref, } from '#/state/preferences' import {useSetMinimalShellMode} from '#/state/shell' import {ToggleButton} from '#/view/com/util/forms/ToggleButton' +import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' -import {SimpleViewHeader} from '../com/util/SimpleViewHeader' -import {Text} from '../com/util/text/Text' -import {ScrollView} from '../com/util/Views' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -38,7 +38,7 @@ export function PreferencesExternalEmbeds({}: Props) { ) return ( - + ))} - + ) } diff --git a/src/view/screens/PreferencesFollowingFeed.tsx b/src/view/screens/PreferencesFollowingFeed.tsx index 085250e3bd..3d9928901a 100644 --- a/src/view/screens/PreferencesFollowingFeed.tsx +++ b/src/view/screens/PreferencesFollowingFeed.tsx @@ -17,6 +17,7 @@ import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {Text} from '#/view/com/util/text/Text' import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps< CommonNavigatorParams, @@ -35,7 +36,7 @@ export function PreferencesFollowingFeed({}: Props) { ) return ( - + - + ) } diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx index 7a5a88869d..c3992276a9 100644 --- a/src/view/screens/PreferencesThreads.tsx +++ b/src/view/screens/PreferencesThreads.tsx @@ -18,6 +18,7 @@ import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {Text} from '#/view/com/util/text/Text' import {ScrollView} from '#/view/com/util/Views' import {atoms as a} from '#/alf' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export function PreferencesThreads({}: Props) { @@ -38,7 +39,7 @@ export function PreferencesThreads({}: Props) { ) return ( - + )} - + ) } diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx index 776d83918c..57e4652b54 100644 --- a/src/view/screens/PrivacyPolicy.tsx +++ b/src/view/screens/PrivacyPolicy.tsx @@ -1,16 +1,18 @@ import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const PrivacyPolicyScreen = (_props: Props) => { @@ -25,7 +27,7 @@ export const PrivacyPolicyScreen = (_props: Props) => { ) return ( - + @@ -42,6 +44,6 @@ export const PrivacyPolicyScreen = (_props: Props) => { - + ) } diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index 7726256952..677fe09f47 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -45,6 +45,7 @@ import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header' import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed' import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels' import {web} from '#/alf' +import * as Layout from '#/components/Layout' import {ScreenHider} from '#/components/moderation/ScreenHider' import {ProfileStarterPacks} from '#/components/StarterPack/ProfileStarterPacks' import {navigate} from '#/Navigation' @@ -55,7 +56,15 @@ interface SectionRef { } type Props = NativeStackScreenProps -export function ProfileScreen({route}: Props) { +export function ProfileScreen(props: Props) { + return ( + + + + ) +} + +function ProfileScreenInner({route}: Props) { const {_} = useLingui() const {currentAccount} = useSession() const queryClient = useQueryClient() diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index a094cc3dd0..6b9288f3bb 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -61,6 +61,7 @@ import { } from '#/components/icons/Heart2' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import * as Layout from '#/components/Layout' import {InlineLinkText} from '#/components/Link' import * as Menu from '#/components/Menu' import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog' @@ -96,36 +97,42 @@ export function ProfileFeedScreen(props: Props) { if (error) { return ( - - - - Could not load feed - - - {error.toString()} - + + + + + Could not load feed + + + {error.toString()} + - - + + + - - + + ) } return resolvedUri ? ( - + + + ) : ( - + + + ) } diff --git a/src/view/screens/ProfileFeedLikedBy.tsx b/src/view/screens/ProfileFeedLikedBy.tsx index bb9ec2baeb..b796480f34 100644 --- a/src/view/screens/ProfileFeedLikedBy.tsx +++ b/src/view/screens/ProfileFeedLikedBy.tsx @@ -1,14 +1,14 @@ import React from 'react' -import {View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {makeRecordUri} from '#/lib/strings/url-helpers' import {useSetMinimalShellMode} from '#/state/shell' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' -import {ViewHeader} from '../com/util/ViewHeader' +import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export const ProfileFeedLikedByScreen = ({route}: Props) => { @@ -24,9 +24,9 @@ export const ProfileFeedLikedByScreen = ({route}: Props) => { ) return ( - + - + ) } diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx index 3a01edff5a..9fa98cb1a8 100644 --- a/src/view/screens/ProfileFollowers.tsx +++ b/src/view/screens/ProfileFollowers.tsx @@ -3,14 +3,14 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {isWeb} from 'platform/detection' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {ProfileFollowers as ProfileFollowersComponent} from '#/view/com/profile/ProfileFollowers' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' -import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers' -import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const ProfileFollowersScreen = ({route}: Props) => { @@ -25,10 +25,12 @@ export const ProfileFollowersScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx index 762a84a374..483ee93ecc 100644 --- a/src/view/screens/ProfileFollows.tsx +++ b/src/view/screens/ProfileFollows.tsx @@ -3,14 +3,14 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {isWeb} from '#/platform/detection' import {useSetMinimalShellMode} from '#/state/shell' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {isWeb} from 'platform/detection' -import {CenteredView} from 'view/com/util/Views' -import {atoms as a} from '#/alf' +import {ProfileFollows as ProfileFollowsComponent} from '#/view/com/profile/ProfileFollows' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' import {ListHeaderDesktop} from '#/components/Lists' -import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows' -import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const ProfileFollowsScreen = ({route}: Props) => { @@ -25,10 +25,12 @@ export const ProfileFollowsScreen = ({route}: Props) => { ) return ( - - - - - + + + + + + + ) } diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index e0fd18ae9a..cb333befa4 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -73,6 +73,7 @@ import {CenteredView} from '#/view/com/util/Views' import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen' import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' +import * as Layout from '#/components/Layout' import * as Hider from '#/components/moderation/Hider' import * as Prompt from '#/components/Prompt' import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog' @@ -87,6 +88,14 @@ interface SectionRef { type Props = NativeStackScreenProps export function ProfileListScreen(props: Props) { + return ( + + + + ) +} + +function ProfileListScreenInner(props: Props) { const {_} = useLingui() const {name: handleOrDid, rkey} = props.route.params const {data: resolvedUri, error: resolveError} = useResolveUriQuery( diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 2334abb5db..e88866f5b4 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -32,6 +32,7 @@ import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType' import {atoms as a, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' +import * as Layout from '#/components/Layout' import {Loader} from '#/components/Loader' type Props = NativeStackScreenProps @@ -106,120 +107,117 @@ function SavedFeedsInner({ }, [_, isDesktop, onSaveChanges, hasUnsavedChanges, isOverwritePending]) return ( - - - - {noSavedFeedsOfAnyType && ( - - - - )} - - - - Pinned Feeds - - - - {preferences ? ( - !pinnedFeeds.length ? ( - - - You don't have any pinned feeds. - + + + + + {noSavedFeedsOfAnyType && ( + + - ) : ( - pinnedFeeds.map(f => ( - - )) - ) - ) : ( - - )} + )} - {noFollowingFeed && ( - - + + + Pinned Feeds + - )} - - - Saved Feeds - - - {preferences ? ( - !unpinnedFeeds.length ? ( - - - You don't have any saved feeds. - - + {preferences ? ( + !pinnedFeeds.length ? ( + + + You don't have any pinned feeds. + + + ) : ( + pinnedFeeds.map(f => ( + + )) + ) ) : ( - unpinnedFeeds.map(f => ( - - )) - ) - ) : ( - - )} + + )} - - - - Feeds are custom algorithms that users build with a little coding - expertise.{' '} - {' '} - for more information. - - - - - - + {noFollowingFeed && ( + + + + )} + + + + Saved Feeds + + + {preferences ? ( + !unpinnedFeeds.length ? ( + + + You don't have any saved feeds. + + + ) : ( + unpinnedFeeds.map(f => ( + + )) + ) + ) : ( + + )} + + + + + Feeds are custom algorithms that users build with a little + coding expertise.{' '} + {' '} + for more information. + + + + + + + ) } @@ -434,12 +432,6 @@ function FollowingFeedCard() { } const styles = StyleSheet.create({ - desktopContainer: { - borderLeftWidth: 1, - borderRightWidth: 1, - // @ts-ignore only rendered on web - minHeight: '100vh', - }, empty: { paddingHorizontal: 20, paddingVertical: 20, @@ -463,10 +455,4 @@ const styles = StyleSheet.create({ paddingTop: 22, paddingBottom: 100, }, - noBorder: { - borderBottomWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderTopWidth: 0, - }, }) diff --git a/src/view/screens/Search/Explore.tsx b/src/view/screens/Search/Explore.tsx index 650fd43548..6aff9b88ad 100644 --- a/src/view/screens/Search/Explore.tsx +++ b/src/view/screens/Search/Explore.tsx @@ -10,20 +10,20 @@ import { import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' import {isWeb} from '#/platform/detection' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useGetPopularFeedsQuery} from '#/state/queries/feed' import {usePreferencesQuery} from '#/state/queries/preferences' import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows' -import {cleanError} from 'lib/strings/errors' import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' import {List} from '#/view/com/util/List' -import {UserAvatar} from '#/view/com/util/UserAvatar' import { FeedFeedLoadingPlaceholder, ProfileCardFeedLoadingPlaceholder, -} from 'view/com/util/LoadingPlaceholder' +} from '#/view/com/util/LoadingPlaceholder' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {atoms as a, useTheme, ViewStyleProp} from '#/alf' import {Button} from '#/components/Button' import * as FeedCard from '#/components/FeedCard' @@ -564,6 +564,8 @@ export function Explore() { [t, moderationOpts], ) + // note: actually not a screen, instead it's nested within + // the search screen. so we don't need Layout.Screen return ( + - + ) } diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index a40cc4f26a..ce21a043b7 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -57,6 +57,7 @@ import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog' +import * as Layout from '#/components/Layout' import {Email2FAToggle} from './Email2FAToggle' import {ExportCarDialog} from './ExportCarDialog' @@ -286,7 +287,7 @@ export function SettingsScreen({}: Props) { const {mutate: onPressDeleteChatDeclaration} = useDeleteActorDeclaration() return ( - + @@ -919,7 +920,7 @@ export function SettingsScreen({}: Props) { - + ) } diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index c737dad5b7..f1152fb7e4 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -7,6 +7,7 @@ import {CenteredView} from '#/view/com/util/Views' import {ListContained} from '#/view/screens/Storybook/ListContained' import {atoms as a, ThemeProvider, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' +import * as Layout from '#/components/Layout' import {Admonitions} from './Admonitions' import {Breakpoints} from './Breakpoints' import {Buttons} from './Buttons' @@ -21,12 +22,16 @@ import {Theming} from './Theming' import {Typography} from './Typography' export function Storybook() { - if (isWeb) return - return ( - - - + + {isWeb ? ( + + ) : ( + + + + )} + ) } diff --git a/src/view/screens/Support.tsx b/src/view/screens/Support.tsx index 9e7d36ec7a..8782e911b7 100644 --- a/src/view/screens/Support.tsx +++ b/src/view/screens/Support.tsx @@ -1,17 +1,18 @@ import React from 'react' -import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {CenteredView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {HELP_DESK_URL} from 'lib/constants' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {HELP_DESK_URL} from '#/lib/constants' +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ViewHeader} from '#/view/com/util/ViewHeader' +import {CenteredView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps export const SupportScreen = (_props: Props) => { @@ -26,7 +27,7 @@ export const SupportScreen = (_props: Props) => { ) return ( - + @@ -44,6 +45,6 @@ export const SupportScreen = (_props: Props) => { - + ) } diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx index 47aa9f2688..fa40fbca30 100644 --- a/src/view/screens/TermsOfService.tsx +++ b/src/view/screens/TermsOfService.tsx @@ -1,16 +1,18 @@ import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' + +import {usePalette} from '#/lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' +import {s} from '#/lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {TextLink} from '#/view/com/util/Link' +import {Text} from '#/view/com/util/text/Text' +import {ScrollView} from '#/view/com/util/Views' +import * as Layout from '#/components/Layout' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const TermsOfServiceScreen = (_props: Props) => { @@ -25,7 +27,7 @@ export const TermsOfServiceScreen = (_props: Props) => { ) return ( - + @@ -40,6 +42,6 @@ export const TermsOfServiceScreen = (_props: Props) => { - + ) } diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 79fc1a0694..43f8ee6566 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -1,14 +1,7 @@ import React from 'react' -import { - BackHandler, - DimensionValue, - StyleSheet, - useWindowDimensions, - View, -} from 'react-native' +import {BackHandler, StyleSheet, useWindowDimensions, View} from 'react-native' import {Drawer} from 'react-native-drawer-layout' import Animated from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' import * as NavigationBar from 'expo-navigation-bar' import {StatusBar} from 'expo-status-bar' import {useNavigation, useNavigationState} from '@react-navigation/native' @@ -32,6 +25,7 @@ import {useCloseAnyActiveElement} from '#/state/util' import {Lightbox} from '#/view/com/lightbox/Lightbox' import {ModalsContainer} from '#/view/com/modals/Modal' import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' +import {atoms as a} from '#/alf' import {MutedWordsDialog} from '#/components/dialogs/MutedWords' import {SigninDialog} from '#/components/dialogs/Signin' import {Outlet as PortalOutlet} from '#/components/Portal' @@ -46,11 +40,7 @@ function ShellInner() { const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled() const setIsDrawerOpen = useSetDrawerOpen() const winDim = useWindowDimensions() - const safeAreaInsets = useSafeAreaInsets() - const containerPadding = React.useMemo( - () => ({height: '100%' as DimensionValue, paddingTop: safeAreaInsets.top}), - [safeAreaInsets], - ) + const renderDrawerContent = React.useCallback(() => , []) const onOpenDrawer = React.useCallback( () => setIsDrawerOpen(true), @@ -68,14 +58,14 @@ function ShellInner() { useNotificationsHandler() React.useEffect(() => { - let listener = {remove() {}} if (isAndroid) { - listener = BackHandler.addEventListener('hardwareBackPress', () => { + const listener = BackHandler.addEventListener('hardwareBackPress', () => { return closeAnyActiveElement() }) - } - return () => { - listener.remove() + + return () => { + listener.remove() + } } }, [closeAnyActiveElement]) @@ -102,7 +92,7 @@ function ShellInner() { return ( <> - + + From 4c3c10d7f892777e48faccd534441ac7d88df042 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 14 Oct 2024 16:06:23 -0500 Subject: [PATCH 24/24] Link cards (#5677) * New link card styles * Cleanup of consituent parts, add hover state * Fix gif alt text view * Fix alt text view more * Remove dupe * Update remove button * Remove added margin on gif --- .../com/composer/ExternalEmbedRemoveBtn.tsx | 38 ++- src/view/com/composer/GifAltText.tsx | 4 +- .../com/util/post-embeds/ExternalGifEmbed.tsx | 40 +-- .../util/post-embeds/ExternalLinkEmbed.tsx | 235 +++++++++--------- .../util/post-embeds/ExternalPlayerEmbed.tsx | 55 +--- src/view/com/util/post-embeds/GifEmbed.tsx | 28 ++- 6 files changed, 161 insertions(+), 239 deletions(-) diff --git a/src/view/com/composer/ExternalEmbedRemoveBtn.tsx b/src/view/com/composer/ExternalEmbedRemoveBtn.tsx index 57ccc2943a..0dfa3ce09d 100644 --- a/src/view/com/composer/ExternalEmbedRemoveBtn.tsx +++ b/src/view/com/composer/ExternalEmbedRemoveBtn.tsx @@ -1,34 +1,26 @@ import React from 'react' -import {TouchableOpacity} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {s} from 'lib/styles' +import {atoms as a} from '#/alf' +import {Button, ButtonIcon} from '#/components/Button' +import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' export function ExternalEmbedRemoveBtn({onRemove}: {onRemove: () => void}) { const {_} = useLingui() return ( - - - + + + ) } diff --git a/src/view/com/composer/GifAltText.tsx b/src/view/com/composer/GifAltText.tsx index 732bd4bd69..143d7b8263 100644 --- a/src/view/com/composer/GifAltText.tsx +++ b/src/view/com/composer/GifAltText.tsx @@ -13,7 +13,7 @@ import {isAndroid} from '#/platform/detection' import {useResolveGifQuery} from '#/state/queries/resolve-link' import {Gif} from '#/state/queries/tenor' import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper' -import {atoms as a, native, useTheme} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {DialogControlProps} from '#/components/Dialog' @@ -213,7 +213,7 @@ function AltTextInner({ isPreferredAltText={true} params={params} hideAlt - style={[native({maxHeight: 225})]} + style={[{height: 225}]} /> diff --git a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx index 6f1c88dcdf..6db4d6fefb 100644 --- a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx @@ -4,7 +4,6 @@ import { GestureResponderEvent, LayoutChangeEvent, Pressable, - StyleSheet, } from 'react-native' import {Image, ImageLoadEventData} from 'expo-image' import {AppBskyEmbedExternal} from '@atproto/api' @@ -18,7 +17,6 @@ import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent' import {Fill} from '#/components/Fill' -import {MediaInsetBorder} from '#/components/MediaInsetBorder' import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' export function ExternalGifEmbed({ @@ -116,8 +114,7 @@ export function ExternalGifEmbed({ )} - ) } - -const styles = StyleSheet.create({ - topRadius: { - borderTopLeftRadius: 6, - borderTopRightRadius: 6, - }, - layer: { - position: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, - }, - overlayContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - overlayLayer: { - zIndex: 2, - }, - gifContainer: { - width: '100%', - overflow: 'hidden', - }, -}) diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index eb03385d0a..0399667b08 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -6,8 +6,6 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {parseAltFromGIFDescription} from '#/lib/gif-alt-text' -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {shareUrl} from '#/lib/sharing' import {parseEmbedPlayerFromUrl} from '#/lib/strings/embed-player' import { @@ -17,13 +15,14 @@ import { import {toNiceDomain} from '#/lib/strings/url-helpers' import {isNative} from '#/platform/detection' import {useExternalEmbedsPrefs} from '#/state/preferences' -import {Link} from '#/view/com/util/Link' import {ExternalGifEmbed} from '#/view/com/util/post-embeds/ExternalGifEmbed' import {ExternalPlayer} from '#/view/com/util/post-embeds/ExternalPlayerEmbed' import {GifEmbed} from '#/view/com/util/post-embeds/GifEmbed' import {atoms as a, useTheme} from '#/alf' -import {MediaInsetBorder} from '#/components/MediaInsetBorder' -import {Text} from '../text/Text' +import {Divider} from '#/components/Divider' +import {Earth_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' +import {Link} from '#/components/Link' +import {Text} from '#/components/Typography' export const ExternalLinkEmbed = ({ link, @@ -37,16 +36,13 @@ export const ExternalLinkEmbed = ({ hideAlt?: boolean }) => { const {_} = useLingui() - const pal = usePalette('default') const t = useTheme() - const {isMobile} = useWebMediaQueries() const externalEmbedPrefs = useExternalEmbedsPrefs() - + const niceUrl = toNiceDomain(link.uri) const starterPackParsed = parseStarterPackUri(link.uri) const imageUri = starterPackParsed ? getStarterPackOgCard(starterPackParsed.name, starterPackParsed.rkey) : link.thumb - const embedPlayerParams = React.useMemo(() => { const params = parseEmbedPlayerFromUrl(link.uri) @@ -54,122 +50,131 @@ export const ExternalLinkEmbed = ({ return params } }, [link.uri, externalEmbedPrefs]) + const hasMedia = Boolean(imageUri || embedPlayerParams) - if (embedPlayerParams?.source === 'tenor') { - const parsedAlt = parseAltFromGIFDescription(link.description) - return ( - - ) - } - - return ( - - - {imageUri && !embedPlayerParams ? ( - - - - - ) : undefined} - {embedPlayerParams?.isGif ? ( - - ) : embedPlayerParams ? ( - - ) : undefined} - - - {toNiceDomain(link.uri)} - - - {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && ( - - {link.title || link.uri} - - )} - {link.description ? ( - - {link.description} - - ) : undefined} - - - - ) -} - -function LinkWrapper({ - link, - onOpen, - style, - children, -}: { - link: AppBskyEmbedExternal.ViewExternal - onOpen?: () => void - style?: StyleProp - children: React.ReactNode -}) { const onShareExternal = useCallback(() => { if (link.uri && isNative) { shareUrl(link.uri) } }, [link.uri]) + if (embedPlayerParams?.source === 'tenor') { + const parsedAlt = parseAltFromGIFDescription(link.description) + return ( + + + + ) + } + return ( - {children} + {({hovered}) => ( + + {imageUri && !embedPlayerParams ? ( + + ) : undefined} + + {embedPlayerParams?.isGif ? ( + + ) : embedPlayerParams ? ( + + ) : undefined} + + + + {!embedPlayerParams?.isGif && !embedPlayerParams?.dimensions && ( + + {link.title || link.uri} + + )} + {link.description ? ( + + {link.description} + + ) : undefined} + + + + + + + {toNiceDomain(link.uri)} + + + + + + )} ) } diff --git a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx index 6d5eacd1a0..8ac7ee499d 100644 --- a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx @@ -29,7 +29,6 @@ import {atoms as a, useTheme} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent' import {Fill} from '#/components/Fill' -import {MediaInsetBorder} from '#/components/MediaInsetBorder' import {PlayButtonIcon} from '#/components/video/PlayButtonIcon' import {EventStopper} from '../EventStopper' @@ -59,7 +58,7 @@ function PlaceholderOverlay({ accessibilityLabel={_(msg`Play Video`)} accessibilityHint={_(msg`Play Video`)} onPress={onPress} - style={[styles.overlayContainer, styles.topRadius]}> + style={[styles.overlayContainer]}> {!isPlayerActive ? ( ) : ( @@ -108,16 +107,6 @@ function Player({ style={styles.webview} setSupportMultipleWindows={false} // Prevent any redirects from opening a new window (ads) /> - - ) } @@ -227,66 +216,34 @@ export function ExternalPlayer({ + style={[aspect, a.overflow_hidden]}> {link.thumb && (!isPlayerActive || isLoading) ? ( <> - ) : ( )} - + )} - {!hideAlt && isPreferredAltText && }