diff options
27 files changed, 273 insertions, 196 deletions
diff --git a/app.config.js b/app.config.js index 1f4de0370..e5d7fdf41 100644 --- a/app.config.js +++ b/app.config.js @@ -6,7 +6,7 @@ module.exports = function () { slug: 'bluesky', scheme: 'bluesky', owner: 'blueskysocial', - version: '1.53.0', + version: '1.55.0', runtimeVersion: { policy: 'appVersion', }, @@ -43,7 +43,7 @@ module.exports = function () { backgroundColor: '#ffffff', }, android: { - versionCode: 42, + versionCode: 44, adaptiveIcon: { foregroundImage: './assets/adaptive-icon.png', backgroundColor: '#ffffff', diff --git a/babel.config.js b/babel.config.js index 706fdff5c..78edf5749 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,7 +1,23 @@ module.exports = function (api) { api.cache(true) + const isTestEnv = process.env.NODE_ENV === 'test' return { - presets: ['babel-preset-expo'], + presets: [ + [ + 'babel-preset-expo', + { + lazyImports: true, + native: { + // We should be able to remove this after upgrading Expo + // to a version that includes https://github.com/expo/expo/pull/24672. + unstable_transformProfile: 'hermes-stable', + // Disable ESM -> CJS compilation because Metro takes care of it. + // However, we need it in Jest tests since those run without Metro. + disableImportExportTransform: !isTestEnv, + }, + }, + ], + ], plugins: [ [ 'module:react-native-dotenv', diff --git a/eas.json b/eas.json index 402abeccd..69e5c94d6 100644 --- a/eas.json +++ b/eas.json @@ -9,7 +9,7 @@ "distribution": "internal", "ios": { "simulator": true, - "resourceClass": "large" + "resourceClass": "m-large" }, "channel": "development" }, @@ -17,20 +17,20 @@ "developmentClient": true, "distribution": "internal", "ios": { - "resourceClass": "large" + "resourceClass": "m-large" }, "channel": "development" }, "preview": { "distribution": "internal", "ios": { - "resourceClass": "large" + "resourceClass": "m-large" }, "channel": "preview" }, "production": { "ios": { - "resourceClass": "large" + "resourceClass": "m-large" }, "channel": "production" }, diff --git a/metro.config.js b/metro.config.js index b1714479f..a49d95f9a 100644 --- a/metro.config.js +++ b/metro.config.js @@ -1,7 +1,25 @@ // Learn more https://docs.expo.io/guides/customizing-metro const {getDefaultConfig} = require('expo/metro-config') const cfg = getDefaultConfig(__dirname) + cfg.resolver.sourceExts = process.env.RN_SRC_EXT ? process.env.RN_SRC_EXT.split(',').concat(cfg.resolver.sourceExts) : cfg.resolver.sourceExts + +cfg.transformer.getTransformOptions = async () => ({ + transform: { + experimentalImportSupport: true, + inlineRequires: true, + nonInlinedRequires: [ + // We can remove this option and rely on the default after + // https://github.com/facebook/metro/pull/1126 is released. + 'React', + 'react', + 'react/jsx-dev-runtime', + 'react/jsx-runtime', + 'react-native', + ], + }, +}) + module.exports = cfg diff --git a/package.json b/package.json index c058c5ce6..3a91528cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bsky.app", - "version": "1.53.0", + "version": "1.55.0", "private": true, "scripts": { "prepare": "is-ci || husky install", @@ -31,7 +31,7 @@ "build:apk": "eas build -p android --profile dev-android-apk" }, "dependencies": { - "@atproto/api": "^0.6.20", + "@atproto/api": "^0.6.21", "@bam.tech/react-native-image-resizer": "^3.0.4", "@braintree/sanitize-url": "^6.0.2", "@emoji-mart/react": "^1.1.1", diff --git a/patches/babel-preset-expo+9.5.2.patch b/patches/babel-preset-expo+9.5.2.patch new file mode 100644 index 000000000..5e328c224 --- /dev/null +++ b/patches/babel-preset-expo+9.5.2.patch @@ -0,0 +1,14 @@ +diff --git a/node_modules/babel-preset-expo/index.js b/node_modules/babel-preset-expo/index.js +index 2099ee3..2b9e092 100644 +--- a/node_modules/babel-preset-expo/index.js ++++ b/node_modules/babel-preset-expo/index.js +@@ -105,7 +105,8 @@ module.exports = function (api, options = {}) { + ], + ], + plugins: [ +- getObjectRestSpreadPlugin(), ++ // - dan: This will be disabled anyway when we upgrade Expo, but let's do it now. ++ // getObjectRestSpreadPlugin(), + ...extraPlugins, + getAliasPlugin(), + [require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }], diff --git a/src/App.native.tsx b/src/App.native.tsx index f99e976ce..f4298c461 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -2,7 +2,6 @@ import 'react-native-url-polyfill/auto' import React, {useState, useEffect} from 'react' import 'lib/sentry' // must be relatively on top import {withSentry} from 'lib/sentry' -import {Linking} from 'react-native' import {RootSiblingParent} from 'react-native-root-siblings' import * as SplashScreen from 'expo-splash-screen' import {GestureHandlerRootView} from 'react-native-gesture-handler' @@ -15,7 +14,6 @@ import {Shell} from './view/shell' import * as notifications from 'lib/notifications/notifications' import * as analytics from 'lib/analytics/analytics' import * as Toast from './view/com/util/Toast' -import {handleLink} from './Navigation' import {QueryClientProvider} from '@tanstack/react-query' import {queryClient} from 'lib/react-query' import {TestCtrls} from 'view/com/testing/TestCtrls' @@ -34,15 +32,6 @@ const App = observer(function AppImpl() { setRootStore(store) analytics.init(store) notifications.init(store) - SplashScreen.hideAsync() - Linking.getInitialURL().then((url: string | null) => { - if (url) { - handleLink(url) - } - }) - Linking.addEventListener('url', ({url}) => { - handleLink(url) - }) store.onSessionDropped(() => { Toast.show('Sorry! Your session expired. Please log in again.') }) diff --git a/src/Navigation.tsx b/src/Navigation.tsx index e1d5e76aa..52235ad75 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import {StyleSheet} from 'react-native' +import * as SplashScreen from 'expo-splash-screen' import {observer} from 'mobx-react-lite' import { NavigationContainer, @@ -91,42 +92,42 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) { <> <Stack.Screen name="NotFound" - component={NotFoundScreen} + getComponent={() => NotFoundScreen} options={{title: title('Not Found')}} /> <Stack.Screen name="Moderation" - component={ModerationScreen} + getComponent={() => ModerationScreen} options={{title: title('Moderation')}} /> <Stack.Screen name="ModerationMuteLists" - component={ModerationMuteListsScreen} + getComponent={() => ModerationMuteListsScreen} options={{title: title('Mute Lists')}} /> <Stack.Screen name="ModerationMutedAccounts" - component={ModerationMutedAccounts} + getComponent={() => ModerationMutedAccounts} options={{title: title('Muted Accounts')}} /> <Stack.Screen name="ModerationBlockedAccounts" - component={ModerationBlockedAccounts} + getComponent={() => ModerationBlockedAccounts} options={{title: title('Blocked Accounts')}} /> <Stack.Screen name="Settings" - component={SettingsScreen} + getComponent={() => SettingsScreen} options={{title: title('Settings')}} /> <Stack.Screen name="LanguageSettings" - component={LanguageSettingsScreen} + getComponent={() => LanguageSettingsScreen} options={{title: title('Language Settings')}} /> <Stack.Screen name="Profile" - component={ProfileScreen} + getComponent={() => ProfileScreen} options={({route}) => ({ title: title(`@${route.params.name}`), animation: 'none', @@ -134,101 +135,101 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) { /> <Stack.Screen name="ProfileFollowers" - component={ProfileFollowersScreen} + getComponent={() => ProfileFollowersScreen} options={({route}) => ({ title: title(`People following @${route.params.name}`), })} /> <Stack.Screen name="ProfileFollows" - component={ProfileFollowsScreen} + getComponent={() => ProfileFollowsScreen} options={({route}) => ({ title: title(`People followed by @${route.params.name}`), })} /> <Stack.Screen name="ProfileList" - component={ProfileListScreen} + getComponent={() => ProfileListScreen} options={{title: title('Mute List')}} /> <Stack.Screen name="PostThread" - component={PostThreadScreen} + getComponent={() => PostThreadScreen} options={({route}) => ({title: title(`Post by @${route.params.name}`)})} /> <Stack.Screen name="PostLikedBy" - component={PostLikedByScreen} + getComponent={() => PostLikedByScreen} options={({route}) => ({title: title(`Post by @${route.params.name}`)})} /> <Stack.Screen name="PostRepostedBy" - component={PostRepostedByScreen} + getComponent={() => PostRepostedByScreen} options={({route}) => ({title: title(`Post by @${route.params.name}`)})} /> <Stack.Screen name="CustomFeed" - component={CustomFeedScreen} + getComponent={() => CustomFeedScreen} options={{title: title('Feed')}} /> <Stack.Screen name="CustomFeedLikedBy" - component={CustomFeedLikedByScreen} + getComponent={() => CustomFeedLikedByScreen} options={{title: title('Liked by')}} /> <Stack.Screen name="Debug" - component={DebugScreen} + getComponent={() => DebugScreen} options={{title: title('Debug')}} /> <Stack.Screen name="Log" - component={LogScreen} + getComponent={() => LogScreen} options={{title: title('Log')}} /> <Stack.Screen name="Support" - component={SupportScreen} + getComponent={() => SupportScreen} options={{title: title('Support')}} /> <Stack.Screen name="PrivacyPolicy" - component={PrivacyPolicyScreen} + getComponent={() => PrivacyPolicyScreen} options={{title: title('Privacy Policy')}} /> <Stack.Screen name="TermsOfService" - component={TermsOfServiceScreen} + getComponent={() => TermsOfServiceScreen} options={{title: title('Terms of Service')}} /> <Stack.Screen name="CommunityGuidelines" - component={CommunityGuidelinesScreen} + getComponent={() => CommunityGuidelinesScreen} options={{title: title('Community Guidelines')}} /> <Stack.Screen name="CopyrightPolicy" - component={CopyrightPolicyScreen} + getComponent={() => CopyrightPolicyScreen} options={{title: title('Copyright Policy')}} /> <Stack.Screen name="AppPasswords" - component={AppPasswords} + getComponent={() => AppPasswords} options={{title: title('App Passwords')}} /> <Stack.Screen name="SavedFeeds" - component={SavedFeeds} + getComponent={() => SavedFeeds} options={{title: title('Edit My Feeds')}} /> <Stack.Screen name="PreferencesHomeFeed" - component={PreferencesHomeFeed} + getComponent={() => PreferencesHomeFeed} options={{title: title('Home Feed Preferences')}} /> <Stack.Screen name="PreferencesThreads" - component={PreferencesThreads} + getComponent={() => PreferencesThreads} options={{title: title('Threads Preferences')}} /> </> @@ -253,14 +254,17 @@ function TabsNavigator() { backBehavior="initialRoute" screenOptions={{headerShown: false, lazy: true}} tabBar={tabBar}> - <Tab.Screen name="HomeTab" component={HomeTabNavigator} /> - <Tab.Screen name="SearchTab" component={SearchTabNavigator} /> - <Tab.Screen name="FeedsTab" component={FeedsTabNavigator} /> + <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} /> + <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} /> + <Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} /> <Tab.Screen name="NotificationsTab" - component={NotificationsTabNavigator} + getComponent={() => NotificationsTabNavigator} + /> + <Tab.Screen + name="MyProfileTab" + getComponent={() => MyProfileTabNavigator} /> - <Tab.Screen name="MyProfileTab" component={MyProfileTabNavigator} /> </Tab.Navigator> ) } @@ -277,7 +281,7 @@ function HomeTabNavigator() { animationDuration: 250, contentStyle, }}> - <HomeTab.Screen name="Home" component={HomeScreen} /> + <HomeTab.Screen name="Home" getComponent={() => HomeScreen} /> {commonScreens(HomeTab)} </HomeTab.Navigator> ) @@ -294,7 +298,7 @@ function SearchTabNavigator() { animationDuration: 250, contentStyle, }}> - <SearchTab.Screen name="Search" component={SearchScreen} /> + <SearchTab.Screen name="Search" getComponent={() => SearchScreen} /> {commonScreens(SearchTab as typeof HomeTab)} </SearchTab.Navigator> ) @@ -311,7 +315,7 @@ function FeedsTabNavigator() { animationDuration: 250, contentStyle, }}> - <FeedsTab.Screen name="Feeds" component={FeedsScreen} /> + <FeedsTab.Screen name="Feeds" getComponent={() => FeedsScreen} /> {commonScreens(FeedsTab as typeof HomeTab)} </FeedsTab.Navigator> ) @@ -330,7 +334,7 @@ function NotificationsTabNavigator() { }}> <NotificationsTab.Screen name="Notifications" - component={NotificationsScreen} + getComponent={() => NotificationsScreen} /> {commonScreens(NotificationsTab as typeof HomeTab)} </NotificationsTab.Navigator> @@ -352,7 +356,7 @@ const MyProfileTabNavigator = observer(function MyProfileTabNavigatorImpl() { <MyProfileTab.Screen name="MyProfile" // @ts-ignore // TODO: fix this broken type in ProfileScreen - component={ProfileScreen} + getComponent={() => ProfileScreen} initialParams={{ name: store.me.did, }} @@ -383,22 +387,22 @@ const FlatNavigator = observer(function FlatNavigatorImpl() { }}> <Flat.Screen name="Home" - component={HomeScreen} + getComponent={() => HomeScreen} options={{title: title('Home')}} /> <Flat.Screen name="Search" - component={SearchScreen} + getComponent={() => SearchScreen} options={{title: title('Search')}} /> <Flat.Screen name="Feeds" - component={FeedsScreen} + getComponent={() => FeedsScreen} options={{title: title('Feeds')}} /> <Flat.Screen name="Notifications" - component={NotificationsScreen} + getComponent={() => NotificationsScreen} options={{title: title('Notifications')}} /> {commonScreens(Flat as typeof HomeTab, unreadCountLabel)} @@ -462,6 +466,7 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) { linking={LINKING} theme={theme} onReady={() => { + SplashScreen.hideAsync() // Register the navigation container with the Sentry instrumentation (only works on native) if (isNative) { const routingInstrumentation = getRoutingInstrumentation() diff --git a/src/lib/analytics/analytics.tsx b/src/lib/analytics/analytics.tsx index d1eb50f8a..b3db9149c 100644 --- a/src/lib/analytics/analytics.tsx +++ b/src/lib/analytics/analytics.tsx @@ -51,10 +51,10 @@ export function init(store: RootStoreModel) { store.onSessionLoaded(() => { const sess = store.session.currentSession if (sess) { - if (sess.email) { + if (sess.did) { + const did_hashed = sha256(sess.did) + segmentClient.identify(did_hashed, {did_hashed}) store.log.debug('Ping w/hash') - const email_hashed = sha256(sess.email) - segmentClient.identify(email_hashed, {email_hashed}) } else { store.log.debug('Ping w/o hash') segmentClient.identify() diff --git a/src/lib/analytics/analytics.web.tsx b/src/lib/analytics/analytics.web.tsx index db9d86e3c..78bd9b42b 100644 --- a/src/lib/analytics/analytics.web.tsx +++ b/src/lib/analytics/analytics.web.tsx @@ -46,10 +46,10 @@ export function init(store: RootStoreModel) { store.onSessionLoaded(() => { const sess = store.session.currentSession if (sess) { - if (sess.email) { + if (sess.did) { + const did_hashed = sha256(sess.did) + segmentClient.identify(did_hashed, {did_hashed}) store.log.debug('Ping w/hash') - const email_hashed = sha256(sess.email) - segmentClient.identify(email_hashed, {email_hashed}) } else { store.log.debug('Ping w/o hash') segmentClient.identify() diff --git a/src/state/models/feeds/post.ts b/src/state/models/feeds/post.ts index ae4f29105..d46cced75 100644 --- a/src/state/models/feeds/post.ts +++ b/src/state/models/feeds/post.ts @@ -116,6 +116,7 @@ export class PostsFeedItemModel { }, () => this.rootStore.agent.deleteLike(url), ) + track('Post:Unlike') } else { // like await updateDataOptimistically( @@ -129,11 +130,10 @@ export class PostsFeedItemModel { this.post.viewer!.like = res.uri }, ) + track('Post:Like') } } catch (error) { this.rootStore.log.error('Failed to toggle like', error) - } finally { - track(this.post.viewer.like ? 'Post:Unlike' : 'Post:Like') } } @@ -141,6 +141,7 @@ export class PostsFeedItemModel { this.post.viewer = this.post.viewer || {} try { if (this.post.viewer?.repost) { + // unrepost const url = this.post.viewer.repost await updateDataOptimistically( this.post, @@ -150,7 +151,9 @@ export class PostsFeedItemModel { }, () => this.rootStore.agent.deleteRepost(url), ) + track('Post:Unrepost') } else { + // repost await updateDataOptimistically( this.post, () => { @@ -162,11 +165,10 @@ export class PostsFeedItemModel { this.post.viewer!.repost = res.uri }, ) + track('Post:Repost') } } catch (error) { this.rootStore.log.error('Failed to toggle repost', error) - } finally { - track(this.post.viewer.repost ? 'Post:Unrepost' : 'Post:Repost') } } @@ -174,13 +176,13 @@ export class PostsFeedItemModel { try { if (this.isThreadMuted) { this.rootStore.mutedThreads.uris.delete(this.rootUri) + track('Post:ThreadUnmute') } else { this.rootStore.mutedThreads.uris.add(this.rootUri) + track('Post:ThreadMute') } } catch (error) { this.rootStore.log.error('Failed to toggle thread mute', error) - } finally { - track(this.isThreadMuted ? 'Post:ThreadUnmute' : 'Post:ThreadMute') } } diff --git a/src/view/com/modals/CreateOrEditMuteList.tsx b/src/view/com/modals/CreateOrEditMuteList.tsx index 3f3cfc5f0..4a440afeb 100644 --- a/src/view/com/modals/CreateOrEditMuteList.tsx +++ b/src/view/com/modals/CreateOrEditMuteList.tsx @@ -18,7 +18,7 @@ import {ListModel} from 'state/models/content/list' import {s, colors, gradients} from 'lib/styles' import {enforceLen} from 'lib/strings/helpers' import {compressIfNeeded} from 'lib/media/manip' -import {UserAvatar} from '../util/UserAvatar' +import {EditableUserAvatar} from '../util/UserAvatar' import {usePalette} from 'lib/hooks/usePalette' import {useTheme} from 'lib/ThemeContext' import {useAnalytics} from 'lib/analytics/analytics' @@ -148,7 +148,7 @@ export function Component({ )} <Text style={[styles.label, pal.text]}>List Avatar</Text> <View style={[styles.avi, {borderColor: pal.colors.background}]}> - <UserAvatar + <EditableUserAvatar type="list" size={80} avatar={avatar} diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 620aad9fc..58d0857ad 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -20,7 +20,7 @@ import {enforceLen} from 'lib/strings/helpers' import {MAX_DISPLAY_NAME, MAX_DESCRIPTION} from 'lib/constants' import {compressIfNeeded} from 'lib/media/manip' import {UserBanner} from '../util/UserBanner' -import {UserAvatar} from '../util/UserAvatar' +import {EditableUserAvatar} from '../util/UserAvatar' import {usePalette} from 'lib/hooks/usePalette' import {useTheme} from 'lib/ThemeContext' import {useAnalytics} from 'lib/analytics/analytics' @@ -153,7 +153,7 @@ export function Component({ onSelectNewBanner={onSelectNewBanner} /> <View style={[styles.avi, {borderColor: pal.colors.background}]}> - <UserAvatar + <EditableUserAvatar size={80} avatar={userAvatar} onSelectNewAvatar={onSelectNewAvatar} diff --git a/src/view/com/modals/Waitlist.tsx b/src/view/com/modals/Waitlist.tsx index 1104c0a39..0fb371fe4 100644 --- a/src/view/com/modals/Waitlist.tsx +++ b/src/view/com/modals/Waitlist.tsx @@ -77,6 +77,8 @@ export function Component({}: {}) { keyboardAppearance={theme.colorScheme} value={email} onChangeText={setEmail} + onSubmitEditing={onPressSignup} + enterKeyHint="done" accessible={true} accessibilityLabel="Email" accessibilityHint="Input your email to get on the Bluesky waitlist" diff --git a/src/view/com/modals/crop-image/CropImage.web.tsx b/src/view/com/modals/crop-image/CropImage.web.tsx index c5959cf4c..8e35201d1 100644 --- a/src/view/com/modals/crop-image/CropImage.web.tsx +++ b/src/view/com/modals/crop-image/CropImage.web.tsx @@ -100,7 +100,7 @@ export function Component({ accessibilityHint="Sets image aspect ratio to wide"> <RectWideIcon size={24} - style={as === AspectRatio.Wide ? s.blue3 : undefined} + style={as === AspectRatio.Wide ? s.blue3 : pal.text} /> </TouchableOpacity> <TouchableOpacity @@ -110,7 +110,7 @@ export function Component({ accessibilityHint="Sets image aspect ratio to tall"> <RectTallIcon size={24} - style={as === AspectRatio.Tall ? s.blue3 : undefined} + style={as === AspectRatio.Tall ? s.blue3 : pal.text} /> </TouchableOpacity> <TouchableOpacity @@ -120,7 +120,7 @@ export function Component({ accessibilityHint="Sets image aspect ratio to square"> <SquareIcon size={24} - style={as === AspectRatio.Square ? s.blue3 : undefined} + style={as === AspectRatio.Square ? s.blue3 : pal.text} /> </TouchableOpacity> </View> diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 1ceae80ae..6aac450ff 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -9,7 +9,7 @@ import { } from '@fortawesome/react-native-fontawesome' import {PostsFeedItemModel} from 'state/models/feeds/post' import {FeedSourceInfo} from 'lib/api/feed/types' -import {Link, DesktopWebTextLink} from '../util/Link' +import {Link, TextLinkOnWebOnly} from '../util/Link' import {Text} from '../util/text/Text' import {UserInfoText} from '../util/UserInfoText' import {PostMeta} from '../util/PostMeta' @@ -189,7 +189,7 @@ export const FeedItem = observer(function FeedItemImpl({ lineHeight={1.2} numberOfLines={1}> From{' '} - <DesktopWebTextLink + <TextLinkOnWebOnly type="sm-bold" style={pal.textLight} lineHeight={1.2} @@ -220,7 +220,7 @@ export const FeedItem = observer(function FeedItemImpl({ lineHeight={1.2} numberOfLines={1}> Reposted by{' '} - <DesktopWebTextLink + <TextLinkOnWebOnly type="sm-bold" style={pal.textLight} lineHeight={1.2} diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index df19ecad5..5514bf98e 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -132,20 +132,19 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({ }, [store, view]) const onPressToggleFollow = React.useCallback(() => { - track( - view.viewer.following - ? 'ProfileHeader:FollowButtonClicked' - : 'ProfileHeader:UnfollowButtonClicked', - ) view?.toggleFollowing().then( () => { setShowSuggestedFollows(Boolean(view.viewer.following)) - Toast.show( `${ view.viewer.following ? 'Following' : 'No longer following' } ${sanitizeDisplayName(view.displayName || view.handle)}`, ) + track( + view.viewer.following + ? 'ProfileHeader:FollowButtonClicked' + : 'ProfileHeader:UnfollowButtonClicked', + ) }, err => store.log.error('Failed to toggle follow', err), ) diff --git a/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx b/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx index c5b187fb3..cf759ddd1 100644 --- a/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx +++ b/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {View, StyleSheet, ScrollView, Pressable} from 'react-native' +import {View, StyleSheet, Pressable, ScrollView} from 'react-native' import Animated, { useSharedValue, withTiming, @@ -26,6 +26,7 @@ import {sanitizeHandle} from 'lib/strings/handles' import {makeProfileLink} from 'lib/routes/links' import {Link} from 'view/com/util/Link' import {useAnalytics} from 'lib/analytics/analytics' +import {isWeb} from 'platform/detection' const OUTER_PADDING = 10 const INNER_PADDING = 14 @@ -100,7 +101,6 @@ export function ProfileHeaderSuggestedFollows({ backgroundColor: pal.viewLight.backgroundColor, height: '100%', paddingTop: INNER_PADDING / 2, - paddingBottom: INNER_PADDING, }}> <View style={{ @@ -130,11 +130,15 @@ export function ProfileHeaderSuggestedFollows({ </View> <ScrollView - horizontal - showsHorizontalScrollIndicator={false} + horizontal={true} + showsHorizontalScrollIndicator={isWeb} + persistentScrollbar={true} + scrollIndicatorInsets={{bottom: 0}} + scrollEnabled={true} contentContainerStyle={{ alignItems: 'flex-start', paddingLeft: INNER_PADDING / 2, + paddingBottom: INNER_PADDING, }}> {isLoading ? ( <> diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index 6915d3e08..1777f6659 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -1,5 +1,4 @@ -import React, {ComponentProps, useMemo} from 'react' -import {observer} from 'mobx-react-lite' +import React, {ComponentProps, memo, useMemo} from 'react' import { Linking, GestureResponderEvent, @@ -28,11 +27,10 @@ import { isExternalUrl, linkRequiresWarning, } from 'lib/strings/url-helpers' -import {isAndroid} from 'platform/detection' +import {isAndroid, isWeb} from 'platform/detection' import {sanitizeUrl} from '@braintree/sanitize-url' import {PressableWithHover} from './PressableWithHover' import FixedTouchableHighlight from '../pager/FixedTouchableHighlight' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' type Event = | React.MouseEvent<HTMLAnchorElement, MouseEvent> @@ -50,7 +48,7 @@ interface Props extends ComponentProps<typeof TouchableOpacity> { anchorNoUnderline?: boolean } -export const Link = observer(function Link({ +export const Link = memo(function Link({ testID, style, href, @@ -136,7 +134,7 @@ export const Link = observer(function Link({ ) }) -export const TextLink = observer(function TextLink({ +export const TextLink = memo(function TextLink({ testID, type = 'md', style, @@ -223,7 +221,7 @@ export const TextLink = observer(function TextLink({ /** * Only acts as a link on desktop web */ -interface DesktopWebTextLinkProps extends TextProps { +interface TextLinkOnWebOnlyProps extends TextProps { testID?: string type?: TypographyVariant style?: StyleProp<TextStyle> @@ -236,7 +234,7 @@ interface DesktopWebTextLinkProps extends TextProps { accessibilityHint?: string title?: string } -export const DesktopWebTextLink = observer(function DesktopWebTextLink({ +export const TextLinkOnWebOnly = memo(function DesktopWebTextLink({ testID, type = 'md', style, @@ -245,10 +243,8 @@ export const DesktopWebTextLink = observer(function DesktopWebTextLink({ numberOfLines, lineHeight, ...props -}: DesktopWebTextLinkProps) { - const {isDesktop} = useWebMediaQueries() - - if (isDesktop) { +}: TextLinkOnWebOnlyProps) { + if (isWeb) { return ( <TextLink testID={testID} diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index b5c47dea5..c5e438f8d 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -1,7 +1,7 @@ import React from 'react' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' import {Text} from './text/Text' -import {DesktopWebTextLink} from './Link' +import {TextLinkOnWebOnly} from './Link' import {niceDate} from 'lib/strings/time' import {usePalette} from 'lib/hooks/usePalette' import {TypographyVariant} from 'lib/ThemeContext' @@ -47,7 +47,7 @@ export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) { </View> )} <View style={styles.maxWidth}> - <DesktopWebTextLink + <TextLinkOnWebOnly type={opts.displayNameType || 'lg-bold'} style={[pal.text, opts.displayNameStyle]} numberOfLines={1} @@ -78,7 +78,7 @@ export const PostMeta = observer(function PostMetaImpl(opts: PostMetaOpts) { )} <TimeElapsed timestamp={opts.timestamp}> {({timeElapsed}) => ( - <DesktopWebTextLink + <TextLinkOnWebOnly type="md" style={pal.textLight} lineHeight={1.2} diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index d24e47499..fbc0b5e11 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -23,14 +23,18 @@ interface BaseUserAvatarProps { type?: Type size: number avatar?: string | null - moderation?: ModerationUI } interface UserAvatarProps extends BaseUserAvatarProps { - onSelectNewAvatar?: (img: RNImage | null) => void + moderation?: ModerationUI +} + +interface EditableUserAvatarProps extends BaseUserAvatarProps { + onSelectNewAvatar: (img: RNImage | null) => void } interface PreviewableUserAvatarProps extends BaseUserAvatarProps { + moderation?: ModerationUI did: string handle: string } @@ -106,8 +110,65 @@ export function UserAvatar({ size, avatar, moderation, - onSelectNewAvatar, }: UserAvatarProps) { + const pal = usePalette('default') + + const aviStyle = useMemo(() => { + if (type === 'algo' || type === 'list') { + return { + width: size, + height: size, + borderRadius: size > 32 ? 8 : 3, + } + } + return { + width: size, + height: size, + borderRadius: Math.floor(size / 2), + } + }, [type, size]) + + const alert = useMemo(() => { + if (!moderation?.alert) { + return null + } + return ( + <View style={[styles.alertIconContainer, pal.view]}> + <FontAwesomeIcon + icon="exclamation-circle" + style={styles.alertIcon} + size={Math.floor(size / 3)} + /> + </View> + ) + }, [moderation?.alert, size, pal]) + + return avatar && + !((moderation?.blur && isAndroid) /* android crashes with blur */) ? ( + <View style={{width: size, height: size}}> + <HighPriorityImage + testID="userAvatarImage" + style={aviStyle} + contentFit="cover" + source={{uri: avatar}} + blurRadius={moderation?.blur ? BLUR_AMOUNT : 0} + /> + {alert} + </View> + ) : ( + <View style={{width: size, height: size}}> + <DefaultAvatar type={type} size={size} /> + {alert} + </View> + ) +} + +export function EditableUserAvatar({ + type = 'user', + size, + avatar, + onSelectNewAvatar, +}: EditableUserAvatarProps) { const store = useStores() const pal = usePalette('default') const {requestCameraAccessIfNeeded} = useCameraPermission() @@ -146,7 +207,7 @@ export function UserAvatar({ return } - onSelectNewAvatar?.( + onSelectNewAvatar( await openCamera(store, { width: 1000, height: 1000, @@ -186,7 +247,7 @@ export function UserAvatar({ path: item.path, }) - onSelectNewAvatar?.(croppedImage) + onSelectNewAvatar(croppedImage) }, }, !!avatar && { @@ -203,7 +264,7 @@ export function UserAvatar({ web: 'trash', }, onPress: async () => { - onSelectNewAvatar?.(null) + onSelectNewAvatar(null) }, }, ].filter(Boolean) as DropdownItem[], @@ -216,23 +277,7 @@ export function UserAvatar({ ], ) - const alert = useMemo(() => { - if (!moderation?.alert) { - return null - } - return ( - <View style={[styles.alertIconContainer, pal.view]}> - <FontAwesomeIcon - icon="exclamation-circle" - style={styles.alertIcon} - size={Math.floor(size / 3)} - /> - </View> - ) - }, [moderation?.alert, size, pal]) - - // onSelectNewAvatar is only passed as prop on the EditProfile component - return onSelectNewAvatar ? ( + return ( <NativeDropdown testID="changeAvatarBtn" items={dropdownItems} @@ -256,23 +301,6 @@ export function UserAvatar({ /> </View> </NativeDropdown> - ) : avatar && - !((moderation?.blur && isAndroid) /* android crashes with blur */) ? ( - <View style={{width: size, height: size}}> - <HighPriorityImage - testID="userAvatarImage" - style={aviStyle} - contentFit="cover" - source={{uri: avatar}} - blurRadius={moderation?.blur ? BLUR_AMOUNT : 0} - /> - {alert} - </View> - ) : ( - <View style={{width: size, height: size}}> - <DefaultAvatar type={type} size={size} /> - {alert} - </View> ) } diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx index 695711b2a..e4ca981d9 100644 --- a/src/view/com/util/UserInfoText.tsx +++ b/src/view/com/util/UserInfoText.tsx @@ -1,7 +1,7 @@ import React, {useState, useEffect} from 'react' import {AppBskyActorGetProfile as GetProfile} from '@atproto/api' import {StyleProp, StyleSheet, TextStyle} from 'react-native' -import {DesktopWebTextLink} from './Link' +import {TextLinkOnWebOnly} from './Link' import {Text} from './text/Text' import {LoadingPlaceholder} from './LoadingPlaceholder' import {useStores} from 'state/index' @@ -65,7 +65,7 @@ export function UserInfoText({ ) } else if (profile) { inner = ( - <DesktopWebTextLink + <TextLinkOnWebOnly type={type} style={style} lineHeight={1.2} diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 035e29c25..6cbcddc32 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -52,20 +52,20 @@ export function AutoSizedImage({ if (onPress || onLongPress || onPressIn) { return ( + // disable a11y rule because in this case we want the tags on the image (#1640) + // eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors <Pressable onPress={onPress} onLongPress={onLongPress} onPressIn={onPressIn} - style={[styles.container, style]} - accessible={true} - accessibilityRole="button" - accessibilityLabel={alt || 'Image'} - accessibilityHint="Tap to view fully"> + style={[styles.container, style]}> <Image style={[styles.image, {aspectRatio}]} source={uri} - accessible={false} // Must set for `accessibilityLabel` to work + accessible={true} // Must set for `accessibilityLabel` to work accessibilityIgnoresInvertColors + accessibilityLabel={alt} + accessibilityHint="Tap to view fully" /> {children} </Pressable> diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 2e352d086..4aa6f28de 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -63,8 +63,8 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { case 4: return ( - <View style={styles.flexRow}> - <View style={{flex: 1}}> + <> + <View style={styles.flexRow}> <View style={styles.smallItem}> <GalleryItem {...props} index={0} imageStyle={styles.image} /> </View> @@ -72,7 +72,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { <GalleryItem {...props} index={2} imageStyle={styles.image} /> </View> </View> - <View style={{flex: 1}}> + <View style={styles.flexRow}> <View style={styles.smallItem}> <GalleryItem {...props} index={1} imageStyle={styles.image} /> </View> @@ -80,7 +80,7 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) { <GalleryItem {...props} index={3} imageStyle={styles.image} /> </View> </View> - </View> + </> ) default: diff --git a/src/view/screens/Support.tsx b/src/view/screens/Support.tsx index de1b38b84..dc00d473d 100644 --- a/src/view/screens/Support.tsx +++ b/src/view/screens/Support.tsx @@ -9,6 +9,7 @@ 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' type Props = NativeStackScreenProps<CommonNavigatorParams, 'Support'> export const SupportScreen = (_props: Props) => { @@ -29,14 +30,13 @@ export const SupportScreen = (_props: Props) => { Support </Text> <Text style={[pal.text, s.p20]}> - If you need help, email us at{' '} + The support form has been moved. If you need help, please <TextLink - href="mailto:support@bsky.app" - text="support@bsky.app" + href={HELP_DESK_URL} + text=" click here" style={pal.link} />{' '} - with a description of your issue and information about how we can help - you. + or visit {HELP_DESK_URL} to get in touch with us. </Text> </CenteredView> </View> diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 3119715e9..b564f99f8 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -21,7 +21,10 @@ import {usePalette} from 'lib/hooks/usePalette' import * as backHandler from 'lib/routes/back-handler' import {RoutesContainer, TabsNavigator} from '../../Navigation' import {isStateAtTabRoot} from 'lib/routes/helpers' -import {SafeAreaProvider} from 'react-native-safe-area-context' +import { + SafeAreaProvider, + initialWindowMetrics, +} from 'react-native-safe-area-context' import {useOTAUpdate} from 'lib/hooks/useOTAUpdate' const ShellInner = observer(function ShellInnerImpl() { @@ -87,7 +90,7 @@ export const Shell: React.FC = observer(function ShellImpl() { const pal = usePalette('default') const theme = useTheme() return ( - <SafeAreaProvider style={pal.view}> + <SafeAreaProvider initialMetrics={initialWindowMetrics} style={pal.view}> <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}> <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} /> <RoutesContainer> diff --git a/yarn.lock b/yarn.lock index 819488e5b..906e84650 100644 --- a/yarn.lock +++ b/yarn.lock @@ -47,18 +47,19 @@ tlds "^1.234.0" typed-emitter "^2.1.0" -"@atproto/api@^0.6.20": - version "0.6.20" - resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.20.tgz#3a7eda60d73a5d5b6938e2dd016c24a7ba180c83" - integrity sha512-+peoKgkaxbglXQg9qEZcZIvyWm39yj0+syV3TBDrz5cWK4OIsdOyYBg2iISy+jvB5RzEUMe2WvOojP6Nq34mOg== - dependencies: - "@atproto/common-web" "^0.2.1" - "@atproto/lexicon" "^0.2.2" - "@atproto/syntax" "^0.1.2" - "@atproto/xrpc" "^0.3.2" +"@atproto/api@^0.6.21": + version "0.6.21" + resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.21.tgz#6e5b00facf46f2556d9766290341aae7e6ef75c8" + integrity sha512-ZWVEnLhZ8nonkCVzeFgdUFZhTOUtPxvicZFuttvb2G2Q5u43RmJ5qXXZvox/S9XQEw7TubG6Jza1mesH7CjfVQ== + dependencies: + "@atproto/common-web" "^0.2.2" + "@atproto/lexicon" "^0.2.3" + "@atproto/syntax" "^0.1.3" + "@atproto/xrpc" "^0.3.3" multiformats "^9.9.0" tlds "^1.234.0" typed-emitter "^2.1.0" + zod "^3.21.4" "@atproto/bsky@^0.0.5": version "0.0.5" @@ -105,10 +106,10 @@ uint8arrays "3.0.0" zod "^3.21.4" -"@atproto/common-web@^0.2.1": - version "0.2.1" - resolved "https://registry.yarnpkg.com/@atproto/common-web/-/common-web-0.2.1.tgz#97412cb241321fc6c56a2b8c0b2416b3240caf50" - integrity sha512-5AoDKkKz7JhXSiicjhPihA/MJMlSuTQ9Aed9fflPuoTuT6C3aXbxaUZEcqqipSwlCfGpOzPmJmWJjMWWsYr2ew== +"@atproto/common-web@^0.2.2": + version "0.2.2" + resolved "https://registry.yarnpkg.com/@atproto/common-web/-/common-web-0.2.2.tgz#decc12584c84f3c34d077d1afe7442bfc21bcf6c" + integrity sha512-XWZHj82kWGdhm0y6e/DxLA5qK0LPHTozfPCH2ws1B/Qh9Hh5DD/gakvlIRT1FouwPM+hWcs8YHVJ8bjnehrhHA== dependencies: graphemer "^1.4.0" multiformats "^9.9.0" @@ -219,13 +220,13 @@ multiformats "^9.9.0" zod "^3.21.4" -"@atproto/lexicon@^0.2.2": - version "0.2.2" - resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.2.2.tgz#938a39482ff41c6a908f4ad43274adba595f3643" - integrity sha512-CvmjaSDavHMOJTuNYE8VjYhL7TVxBYV8QSWh2jHCpzfmj02DvVD9UBIfnoVv67POJkEtWXddjoV9beaIbaq/Xg== +"@atproto/lexicon@^0.2.3": + version "0.2.3" + resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.2.3.tgz#3f8ba24187d5628ec06b1bdbec90747f7cdc0948" + integrity sha512-1xUs0KNw4CopWI5HSlLYZ8UHW5nb6V7sldO5OPONiEVKjETrqqjfopezloYAIBNrekUNXwd1pbp05afkAxW5og== dependencies: - "@atproto/common-web" "^0.2.1" - "@atproto/syntax" "^0.1.2" + "@atproto/common-web" "^0.2.2" + "@atproto/syntax" "^0.1.3" iso-datestring-validator "^2.2.2" multiformats "^9.9.0" zod "^3.21.4" @@ -297,12 +298,12 @@ dependencies: "@atproto/common-web" "^0.2.0" -"@atproto/syntax@^0.1.2": - version "0.1.2" - resolved "https://registry.yarnpkg.com/@atproto/syntax/-/syntax-0.1.2.tgz#417366d36b53ecf29d9d1f6e35179b1f3feef95b" - integrity sha512-n6VSuccMGouwftCvZBq9WNwI0qYCMOH/lTHSV+/dT232lX7pIrqisOlErUSBoOJ49B1Wxy1DjeeBS26ap9SsGQ== +"@atproto/syntax@^0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@atproto/syntax/-/syntax-0.1.3.tgz#5cafd5d82eee939fde06a2eacd11b264fb2f3b13" + integrity sha512-Xbw+Rx15puW8wZ/ro40nAQVc7ymPqcGOinVt8Jxi+lcY/1iKpID9a86E6ZOzvw0ncFKONwILYk1+xGeUT6OUNA== dependencies: - "@atproto/common-web" "^0.2.1" + "@atproto/common-web" "^0.2.2" "@atproto/xrpc-server@^0.3.1": version "0.3.1" @@ -329,12 +330,12 @@ "@atproto/lexicon" "^0.2.1" zod "^3.21.4" -"@atproto/xrpc@^0.3.2": - version "0.3.2" - resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.3.2.tgz#432a364be4b3bf8660a088a07dadecac10209763" - integrity sha512-D9jGjcFnEMHuGQ56v6+78uX3RiytKLrA5ITLq6shy0Qj6Zvt5MqV+/cTFuNPKrNCrnWOtHFeRQwMqyGhNS9qZQ== +"@atproto/xrpc@^0.3.3": + version "0.3.3" + resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.3.3.tgz#05f1c431ccd366e950637b93acca85faa249f52b" + integrity sha512-o0VUrUGu5Y/1F+ujZKIJYpuHdfXaIDacxuiq2IjwR2rbHXlefh+9FJy5XNkq4do+jMj7U+gSiPrgqaqLYbc9ng== dependencies: - "@atproto/lexicon" "^0.2.2" + "@atproto/lexicon" "^0.2.3" zod "^3.21.4" "@babel/code-frame@7.10.4", "@babel/code-frame@~7.10.4": |