Merge remote-tracking branch 'origin/main' into halo/base

* origin/main: (39 commits)
  [Clipclops] Separate messages if there's a time gap (#3777)
  [Clipclops] Header for chat (#3775)
  [Clipclops] adjust scroll position, keyboard color (#3771)
  [Clipclops] Add clop sent time to clipclop (#3772)
  [Clipclops] Use API data for clipclop list (#3769)
  [Clipclops] New clipclop dialog (#3750)
  Session fixes, pt. 1 (#3762)
  use keyboardDismissMode rather than onScrollBeginDrag (#3767)
  [Clipclops] Add screen to view and send clip clops (#3754)
  switch branch for installing `react-native-bottom-sheet` (#3760)
  Fix List onMomentumScrollEnd (#3759)
  Release 1.80 (#3757)
  Update zh-TW translations (#3678)
  Italian localization (#3684)
  Update catalan messages.po (#3697)
  Update Korean localization (#3698)
  Update Japanese translation (#3734)
  Update zh-CN translations (#3716)
  Send Bluesky feeds and suggested follows more data (#3695)
  android: fix various places still using default Material Teal (#3555)
  ...

__e2e__/tests/curate-lists.test.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, loginAsBob, createServer, sleep} from '../util'
+
+import {createServer, loginAsAlice, loginAsBob, openApp, sleep} from '../util'
 
 describe('Curate lists', () => {
   beforeAll(async () => {
@@ -115,6 +116,7 @@ describe('Curate lists', () => {
     await element(by.text('About')).tap()
     await element(by.id('addUserBtn')).tap()
     await expect(element(by.id('listAddUserModal'))).toBeVisible()
+    await element(by.id('searchInput')).typeText('b')
     await waitFor(element(by.id('user-bob.test-addBtn')))
       .toBeVisible()
       .withTimeout(5000)

__tests__/lib/string.test.ts

@@ -396,6 +396,7 @@ describe('parseEmbedPlayerFromUrl', () => {
     'https://youtube.com/watch?v=videoId&feature=share',
     'https://youtube.com/shorts/videoId',
     'https://m.youtube.com/watch?v=videoId',
+    'https://music.youtube.com/watch?v=videoId',
 
     'https://youtube.com/shorts/',
     'https://youtube.com/',
@@ -504,6 +505,11 @@ describe('parseEmbedPlayerFromUrl', () => {
       source: 'youtube',
       playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
     },
+    {
+      type: 'youtube_video',
+      source: 'youtube',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
+    },
 
     undefined,
     undefined,

__tests__/lib/strings/url-helpers.test.ts

@@ -1,10 +1,10 @@
-import {it, describe, expect} from '@jest/globals'
+import {describe, expect, it} from '@jest/globals'
 
 import {
-  linkRequiresWarning,
   isPossiblyAUrl,
-  splitApexDomain,
   isTrustedUrl,
+  linkRequiresWarning,
+  splitApexDomain,
 } from '../../../src/lib/strings/url-helpers'
 
 describe('linkRequiresWarning', () => {
@@ -170,6 +170,7 @@ describe('isTrustedUrl', () => {
     ['https://google.com', false],
     ['https://docs.google.com', false],
     ['https://google.com/#', false],
+    ['https://blueskywebxzendesk.com', false],
   ]
 
   it.each(cases)('given input uri %p, returns %p', (str, expected) => {

app.config.js

@@ -64,6 +64,8 @@ module.exports = function (config) {
       icon: './assets/icon.png',
       userInterfaceStyle: 'automatic',
       splash: SPLASH_CONFIG,
+      // hsl(211, 99%, 53%), same as palette.default.brandText
+      primaryColor: '#1083fe',
       ios: {
         supportsTablet: false,
         bundleIdentifier: 'xyz.blueskyweb.app',
@@ -180,6 +182,7 @@ module.exports = function (config) {
         './plugins/withAndroidManifestPlugin.js',
         './plugins/withAndroidManifestFCMIconPlugin.js',
         './plugins/withAndroidStylesWindowBackgroundPlugin.js',
+        './plugins/withAndroidStylesAccentColorPlugin.js',
         './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
         './plugins/shareExtension/withShareExtensions.js',
       ].filter(Boolean),

bskyweb/cmd/bskyweb/server.go

@@ -200,6 +200,8 @@ func serve(cctx *cli.Context) error {
 	e.GET("/support/community-guidelines", server.WebGeneric)
 	e.GET("/support/copyright", server.WebGeneric)
 	e.GET("/intent/compose", server.WebGeneric)
+	e.GET("/messages", server.WebGeneric)
+	e.GET("/messages/:conversation", server.WebGeneric)
 
 	// profile endpoints; only first populates info
 	e.GET("/profile/:handleOrDID", server.WebProfile)

bskyweb/cmd/embedr/handlers.go

@@ -122,14 +122,20 @@ func (srv *Server) WebOEmbed(c echo.Context) error {
 	}
 
 	// TODO: do we actually do something with width?
-	width := 550
+	width := 600
 	maxWidthParam := c.QueryParam("maxwidth")
 	if maxWidthParam != "" {
 		maxWidthInt, err := strconv.Atoi(maxWidthParam)
-		if err != nil || maxWidthInt < 220 || maxWidthInt > 550 {
-			return c.String(http.StatusBadRequest, "Invalid maxwidth (expected integer between 220 and 550)")
+		if err != nil {
+			return c.String(http.StatusBadRequest, "Invalid maxwidth (expected integer)")
+		}
+		if maxWidthInt < 220 {
+			width = 220
+		} else if maxWidthInt > 600 {
+			width = 600
+		} else {
+			width = maxWidthInt
 		}
-		width = maxWidthInt
 	}
 	// NOTE: maxheight ignored
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.79.0",
+  "version": "1.80.0",
   "private": true,
   "engines": {
     "node": ">=18"
@@ -53,7 +53,7 @@
     "@atproto/api": "^0.12.6",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
-    "@discord/bottom-sheet": "https://github.com/bluesky-social/react-native-bottom-sheet.git#discord-fork-4.6.1",
+    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
     "@emoji-mart/react": "^1.1.1",
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^19.0.0",
@@ -168,6 +168,7 @@
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "^0.38.1",
     "react-native-ios-context-menu": "^1.15.3",
+    "react-native-keyboard-controller": "^1.11.7",
     "react-native-pager-view": "6.2.3",
     "react-native-picker-select": "^8.1.0",
     "react-native-progress": "bluesky-social/react-native-progress",

patches/@atproto+lexicon+0.4.0.patch

@@ -0,0 +1,28 @@
+diff --git a/node_modules/@atproto/lexicon/dist/validators/complex.js b/node_modules/@atproto/lexicon/dist/validators/complex.js
+index 32d7798..9d688b7 100644
+--- a/node_modules/@atproto/lexicon/dist/validators/complex.js
++++ b/node_modules/@atproto/lexicon/dist/validators/complex.js
+@@ -113,7 +113,22 @@ function object(lexicons, path, def, value) {
+             if (value[key] === null && nullableProps.has(key)) {
+                 continue;
+             }
+-            const propDef = def.properties[key];
++            const propDef = def.properties[key]
++            if (typeof value[key] === 'undefined' && !requiredProps.has(key)) {
++              // Fast path for non-required undefined props.
++              if (
++                propDef.type === 'integer' ||
++                propDef.type === 'boolean' ||
++                propDef.type === 'string'
++              ) {
++                if (typeof propDef.default === 'undefined') {
++                  continue
++                }
++              } else {
++                // Other types have no defaults.
++                continue
++              }
++            }
+             const propPath = `${path}/${key}`;
+             const validated = (0, util_1.validateOneOf)(lexicons, propPath, propDef, value[key]);
+             const propValue = validated.success ? validated.value : value[key];

plugins/withAndroidStylesAccentColorPlugin.js

@@ -0,0 +1,25 @@
+/**
+ * @file Set accent color to primaryColor from app.config.js.
+ * This way we get a sane default color for spinners, text inputs, etc.
+ */
+
+const {withAndroidStyles, AndroidConfig} = require('@expo/config-plugins')
+
+module.exports = function withAndroidStylesAccentColorPlugin(appConfig) {
+  return withAndroidStyles(appConfig, function (decoratedAppConfig) {
+    try {
+      decoratedAppConfig.modResults = AndroidConfig.Styles.assignStylesValue(
+        decoratedAppConfig.modResults,
+        {
+          add: true,
+          parent: AndroidConfig.Styles.getAppThemeLightNoActionBarGroup(),
+          name: 'colorAccent',
+          value: '@color/colorPrimary',
+        },
+      )
+    } catch (e) {
+      console.error(`withAndroidStylesAccentColorPlugin failed`, e)
+    }
+    return decoratedAppConfig
+  })
+}

src/App.native.tsx

@@ -4,6 +4,7 @@ import 'view/icons'
 
 import React, {useEffect, useState} from 'react'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
+import {KeyboardProvider} from 'react-native-keyboard-controller'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {
   initialWindowMetrics,
@@ -137,7 +138,9 @@ function App() {
                   <LightboxStateProvider>
                     <I18nProvider>
                       <PortalProvider>
-                        <InnerApp />
+                        <KeyboardProvider>
+                          <InnerApp />
+                        </KeyboardProvider>
                       </PortalProvider>
                     </I18nProvider>
                   </LightboxStateProvider>

src/Navigation.tsx

@@ -25,6 +25,7 @@ import {
   FeedsTabNavigatorParams,
   FlatNavigatorParams,
   HomeTabNavigatorParams,
+  MessagesTabNavigatorParams,
   MyProfileTabNavigatorParams,
   NotificationsTabNavigatorParams,
   SearchTabNavigatorParams,
@@ -46,6 +47,9 @@ import {init as initAnalytics} from './lib/analytics/analytics'
 import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'
 import {attachRouteToLogEvents, logEvent} from './lib/statsig/statsig'
 import {router} from './routes'
+import {MessagesConversationScreen} from './screens/Messages/Conversation'
+import {MessagesListScreen} from './screens/Messages/List'
+import {MessagesSettingsScreen} from './screens/Messages/Settings'
 import {useModalControls} from './state/modals'
 import {useUnreadNotifications} from './state/queries/notifications/unread'
 import {useSession} from './state/session'
@@ -92,6 +96,8 @@ const NotificationsTab =
   createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
 const MyProfileTab =
   createNativeStackNavigatorWithAuth<MyProfileTabNavigatorParams>()
+const MessagesTab =
+  createNativeStackNavigatorWithAuth<MessagesTabNavigatorParams>()
 const Flat = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
 const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()
 
@@ -290,6 +296,16 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => HashtagScreen}
         options={{title: title(msg`Hashtag`)}}
       />
+      <Stack.Screen
+        name="MessagesConversation"
+        getComponent={() => MessagesConversationScreen}
+        options={{title: title(msg`Chat`), requireAuth: true}}
+      />
+      <Stack.Screen
+        name="MessagesSettings"
+        getComponent={() => MessagesSettingsScreen}
+        options={{title: title(msg`Messaging settings`), requireAuth: true}}
+      />
     </>
   )
 }
@@ -323,6 +339,10 @@ function TabsNavigator() {
         name="MyProfileTab"
         getComponent={() => MyProfileTabNavigator}
       />
+      <Tab.Screen
+        name="MessagesTab"
+        getComponent={() => MessagesTabNavigator}
+      />
     </Tab.Navigator>
   )
 }
@@ -429,6 +449,28 @@ function MyProfileTabNavigator() {
   )
 }
 
+function MessagesTabNavigator() {
+  const pal = usePalette('default')
+  return (
+    <MessagesTab.Navigator
+      screenOptions={{
+        animation: isAndroid ? 'none' : undefined,
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true,
+        headerShown: false,
+        animationDuration: 250,
+        contentStyle: pal.view,
+      }}>
+      <MessagesTab.Screen
+        name="MessagesList"
+        getComponent={() => MessagesListScreen}
+        options={{requireAuth: true}}
+      />
+      {commonScreens(MessagesTab as typeof HomeTab)}
+    </MessagesTab.Navigator>
+  )
+}
+
 /**
  * The FlatNavigator is used by Web to represent the routes
  * in a single ("flat") stack.
@@ -469,6 +511,11 @@ const FlatNavigator = () => {
         getComponent={() => NotificationsScreen}
         options={{title: title(msg`Notifications`), requireAuth: true}}
       />
+      <Flat.Screen
+        name="MessagesList"
+        getComponent={() => MessagesListScreen}
+        options={{title: title(msg`Messages`), requireAuth: true}}
+      />
       {commonScreens(Flat as typeof HomeTab, numUnread)}
     </Flat.Navigator>
   )
@@ -522,6 +569,9 @@ const LINKING = {
       if (name === 'Home') {
         return buildStateObject('HomeTab', 'Home', params)
       }
+      if (name === 'Messages') {
+        return buildStateObject('MessagesTab', 'MessagesList', params)
+      }
       // if the path is something else, like a post, profile, or even settings, we need to initialize the home tab as pre-existing state otherwise the back button will not work
       return buildStateObject('HomeTab', name, params, [
         {

src/components/Dialog/index.tsx

@@ -152,6 +152,12 @@ export function Outer({
     [open, close],
   )
 
+  React.useEffect(() => {
+    return () => {
+      setDialogIsOpen(control.id, false)
+    }
+  }, [control.id, setDialogIsOpen])
+
   const context = React.useMemo(() => ({close}), [close])
 
   return (

src/components/Error.tsx

@@ -17,12 +17,14 @@ export function Error({
   message,
   onRetry,
   onGoBack: onGoBackProp,
+  hideBackButton,
   sideBorders = true,
 }: {
   title?: string
   message?: string
   onRetry?: () => unknown
   onGoBack?: () => unknown
+  hideBackButton?: boolean
   sideBorders?: boolean
 }) {
   const navigation = useNavigation<NavigationProp>()
@@ -89,17 +91,19 @@ export function Error({
             </ButtonText>
           </Button>
         )}
-        <Button
-          variant="solid"
-          color={onRetry ? 'secondary' : 'primary'}
-          label={_(msg`Return to previous page`)}
-          onPress={onGoBack}
-          size="large"
-          style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
-          <ButtonText>
-            <Trans>Go Back</Trans>
-          </ButtonText>
-        </Button>
+        {!hideBackButton && (
+          <Button
+            variant="solid"
+            color={onRetry ? 'secondary' : 'primary'}
+            label={_(msg`Return to previous page`)}
+            onPress={onGoBack}
+            size="large"
+            style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
+            <ButtonText>
+              <Trans>Go Back</Trans>
+            </ButtonText>
+          </Button>
+        )}
       </View>
     </CenteredView>
   )