Merge branch 'bluesky-social:main' into main

app.config.js

@@ -234,8 +234,8 @@ module.exports = function (config) {
           'expo-font',
           {
             fonts: [
-              './assets/fonts/inter/InterVariable.ttf',
-              './assets/fonts/inter/InterVariable-Italic.ttf',
+              './assets/fonts/inter/InterVariable.woff2',
+              './assets/fonts/inter/InterVariable-Italic.woff2',
               // Android only
               './assets/fonts/inter/Inter-Regular.otf',
               './assets/fonts/inter/Inter-Italic.otf',

bskyweb/templates/base.html

@@ -13,8 +13,7 @@
 
   <!-- Hello Humans! API docs at https://atproto.com -->
 
-  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
-  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">
+  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2">
 
   <style>
     /**
@@ -26,14 +25,14 @@
      */
     @font-face {
       font-family: 'InterVariable';
-      src: url("{{ staticCDNHost }}/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf") format('truetype');
+      src: url("{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2") format('woff2');
       font-weight: 300 1000;
       font-style: normal;
       font-display: swap;
     }
     @font-face {
       font-family: 'InterVariableItalic';
-      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf") format('truetype');
+      src: url("{{ staticCDNHost }}/static/media/InterVariable-Italic.01dcbad1bac635f9c9cd.woff2") format('woff2');
       font-weight: 300 1000;
       font-style: italic;
       font-display: swap;

bskyweb/templates/error.html

@@ -12,14 +12,14 @@ <h1>404: Not Found</h1>
 {# don't include the bundle on non-404 error pages #}
 {% block head_bundle %}
   {% if statusCode == 404 %}
-    {{ super() }}
+    {{ block.Super }}
   {% else %}
   {% endif %}
 {% endblock %}
 
 {%- block body_all %}
   {% if statusCode == 404 %}
-    {{ super() }}
+    {{ block.Super }}
   {% else %}
     <h1>{{ statusCode }}: Server Error</h1>
     <p>Sorry about that! Our <a href="https://bluesky.statuspage.io/">Status Page</a> might have more context.

metro.config.js

@@ -14,6 +14,8 @@ if (process.env.BSKY_PROFILE) {
   cfg.cacheVersion += ':PROFILE'
 }
 
+cfg.resolver.assetExts = [...cfg.resolver.assetExts, 'woff2']
+
 cfg.resolver.resolveRequest = (context, moduleName, platform) => {
   // HACK: manually resolve a few packages that use `exports` in `package.json`.
   // A proper solution is to enable `unstable_enablePackageExports` but this needs careful testing.

src/alf/breakpoints.ts

@@ -0,0 +1,28 @@
+import {useMemo} from 'react'
+import {useMediaQuery} from 'react-responsive'
+
+export type Breakpoint = 'gtPhone' | 'gtMobile' | 'gtTablet'
+
+export function useBreakpoints(): Record<Breakpoint, boolean> & {
+  activeBreakpoint: Breakpoint | undefined
+} {
+  const gtPhone = useMediaQuery({minWidth: 500})
+  const gtMobile = useMediaQuery({minWidth: 800})
+  const gtTablet = useMediaQuery({minWidth: 1300})
+  return useMemo(() => {
+    let active: Breakpoint | undefined
+    if (gtTablet) {
+      active = 'gtTablet'
+    } else if (gtMobile) {
+      active = 'gtMobile'
+    } else if (gtPhone) {
+      active = 'gtPhone'
+    }
+    return {
+      activeBreakpoint: active,
+      gtPhone,
+      gtMobile,
+      gtTablet,
+    }
+  }, [gtPhone, gtMobile, gtTablet])
+}

src/alf/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {useMediaQuery} from 'react-responsive'
 
 import {
   computeFontScaleMultiplier,
@@ -14,13 +13,14 @@ import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
 import {Device} from '#/storage'
 
 export {atoms} from '#/alf/atoms'
+export * from '#/alf/breakpoints'
 export * from '#/alf/fonts'
 export * as tokens from '#/alf/tokens'
 export * from '#/alf/types'
 export * from '#/alf/util/flatten'
 export * from '#/alf/util/platform'
 export * from '#/alf/util/themeSelector'
-export * from '#/alf/util/useGutterStyles'
+export * from '#/alf/util/useGutters'
 
 export type Alf = {
   themeName: ThemeName
@@ -142,14 +142,3 @@ export function useTheme(theme?: ThemeName) {
     return theme ? alf.themes[theme] : alf.theme
   }, [theme, alf])
 }
-
-export function useBreakpoints() {
-  const gtPhone = useMediaQuery({minWidth: 500})
-  const gtMobile = useMediaQuery({minWidth: 800})
-  const gtTablet = useMediaQuery({minWidth: 1300})
-  return {
-    gtPhone,
-    gtMobile,
-    gtTablet,
-  }
-}

src/alf/util/unusedUseFonts.ts

@@ -9,7 +9,7 @@ import {useFonts} from 'expo-font'
  */
 export function DO_NOT_USE() {
   return useFonts({
-    InterVariable: require('../../../assets/fonts/inter/InterVariable.ttf'),
-    'InterVariable-Italic': require('../../../assets/fonts/inter/InterVariable-Italic.ttf'),
+    InterVariable: require('../../../assets/fonts/inter/InterVariable.woff2'),
+    'InterVariable-Italic': require('../../../assets/fonts/inter/InterVariable-Italic.woff2'),
   })
 }

src/alf/util/useGutters.ts

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import {Breakpoint, useBreakpoints} from '#/alf/breakpoints'
+import * as tokens from '#/alf/tokens'
+
+type Gutter = 'compact' | 'base' | 'wide' | 0
+
+const gutters: Record<
+  Exclude<Gutter, 0>,
+  Record<Breakpoint | 'default', number>
+> = {
+  compact: {
+    default: tokens.space.sm,
+    gtPhone: tokens.space.sm,
+    gtMobile: tokens.space.md,
+    gtTablet: tokens.space.md,
+  },
+  base: {
+    default: tokens.space.lg,
+    gtPhone: tokens.space.lg,
+    gtMobile: tokens.space.xl,
+    gtTablet: tokens.space.xl,
+  },
+  wide: {
+    default: tokens.space.xl,
+    gtPhone: tokens.space.xl,
+    gtMobile: tokens.space._3xl,
+    gtTablet: tokens.space._3xl,
+  },
+}
+
+type Gutters = {
+  paddingTop: number
+  paddingRight: number
+  paddingBottom: number
+  paddingLeft: number
+}
+
+export function useGutters([all]: [Gutter]): Gutters
+export function useGutters([vertical, horizontal]: [Gutter, Gutter]): Gutters
+export function useGutters([top, right, bottom, left]: [
+  Gutter,
+  Gutter,
+  Gutter,
+  Gutter,
+]): Gutters
+export function useGutters([top, right, bottom, left]: Gutter[]) {
+  const {activeBreakpoint} = useBreakpoints()
+  if (right === undefined) {
+    right = bottom = left = top
+  } else if (bottom === undefined) {
+    bottom = top
+    left = right
+  }
+  return React.useMemo(() => {
+    return {
+      paddingTop: top === 0 ? 0 : gutters[top][activeBreakpoint || 'default'],
+      paddingRight:
+        right === 0 ? 0 : gutters[right][activeBreakpoint || 'default'],
+      paddingBottom:
+        bottom === 0 ? 0 : gutters[bottom][activeBreakpoint || 'default'],
+      paddingLeft:
+        left === 0 ? 0 : gutters[left][activeBreakpoint || 'default'],
+    }
+  }, [activeBreakpoint, top, right, bottom, left])
+}

src/components/Layout/Header/index.tsx

@@ -13,7 +13,7 @@ import {
   platform,
   TextStyleProp,
   useBreakpoints,
-  useGutterStyles,
+  useGutters,
   useTheme,
 } from '#/alf'
 import {Button, ButtonIcon, ButtonProps} from '#/components/Button'
@@ -34,7 +34,7 @@ export function Outer({
   noBottomBorder?: boolean
 }) {
   const t = useTheme()
-  const gutter = useGutterStyles()
+  const gutters = useGutters([0, 'base'])
   const {gtMobile} = useBreakpoints()
   const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
 
@@ -46,7 +46,7 @@ export function Outer({
         a.flex_row,
         a.align_center,
         a.gap_sm,
-        gutter,
+        gutters,
         platform({
           native: [a.pb_sm, a.pt_xs],
           web: [a.py_sm],

src/components/Link.tsx

@@ -237,7 +237,9 @@ export function Link({
 }
 
 export type InlineLinkProps = React.PropsWithChildren<
-  BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
+  BaseLinkProps &
+    TextStyleProp &
+    Pick<TextProps, 'selectable' | 'numberOfLines'>
 > &
   Pick<ButtonProps, 'label'> & {
     disableUnderline?: boolean
@@ -273,7 +275,6 @@ export function InlineLinkText({
     onIn: onHoverIn,
     onOut: onHoverOut,
   } = useInteractionState()
-  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
   const flattenedStyle = flatten(style) || {}
 
   return (
@@ -284,7 +285,7 @@ export function InlineLinkText({
       {...rest}
       style={[
         {color: t.palette.primary_500},
-        (hovered || focused) &&
+        hovered &&
           !disableUnderline && {
             ...web({
               outline: 0,
@@ -298,8 +299,6 @@ export function InlineLinkText({
       role="link"
       onPress={download ? undefined : onPress}
       onLongPress={onLongPress}
-      onFocus={onFocus}
-      onBlur={onBlur}
       onMouseEnter={onHoverIn}
       onMouseLeave={onHoverOut}
       accessibilityRole="link"

src/components/StarterPack/Main/PostsList.tsx

@@ -5,7 +5,7 @@ import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
 import {FeedDescriptor} from '#/state/queries/post-feed'
-import {Feed} from '#/view/com/posts/Feed'
+import {PostFeed} from '#/view/com/posts/PostFeed'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {ListRef} from '#/view/com/util/List'
 import {SectionRef} from '#/screens/Profile/Sections/types'
@@ -38,7 +38,7 @@ export const PostsList = React.forwardRef<SectionRef, ProfilesListProps>(
 
     return (
       <View>
-        <Feed
+        <PostFeed
           feed={feed}
           pollInterval={60e3}
           scrollElRef={scrollElRef}

src/components/dms/dialogs/SearchablePeopleList.tsx

@@ -15,7 +15,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
 import {isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
-import {useListConvosQuery} from '#/state/queries/messages/list-converations'
+import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useSession} from '#/state/session'
 import {ListMethods} from '#/view/com/util/List'

src/screens/Hashtag.tsx

@@ -14,7 +14,7 @@ import {cleanError} from '#/lib/strings/errors'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {enforceLen} from '#/lib/strings/helpers'
 import {useSearchPostsQuery} from '#/state/queries/search-posts'
-import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell'
+import {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'
@@ -63,7 +63,6 @@ export default function HashtagScreen({
 
   const [activeTab, setActiveTab] = React.useState(0)
   const setMinimalShellMode = useSetMinimalShellMode()
-  const setDrawerSwipeDisabled = useSetDrawerSwipeDisabled()
 
   useFocusEffect(
     React.useCallback(() => {
@@ -74,10 +73,9 @@ export default function HashtagScreen({
   const onPageSelected = React.useCallback(
     (index: number) => {
       setMinimalShellMode(false)
-      setDrawerSwipeDisabled(index > 0)
       setActiveTab(index)
     },
-    [setDrawerSwipeDisabled, setMinimalShellMode],
+    [setMinimalShellMode],
   )
 
   const sections = React.useMemo(() => {

src/screens/Login/LoginForm.tsx

@@ -257,7 +257,7 @@ export const LoginForm = ({
               autoCapitalize="none"
               autoFocus
               autoCorrect={false}
-              autoComplete="off"
+              autoComplete="one-time-code"
               returnKeyType="done"
               textContentType="username"
               blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field

src/screens/Messages/ChatList.tsx

@@ -14,7 +14,7 @@ import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
 import {MESSAGE_SCREEN_POLL_INTERVAL} from '#/state/messages/convo/const'
 import {useMessagesEventBus} from '#/state/messages/events'
-import {useListConvosQuery} from '#/state/queries/messages/list-converations'
+import {useListConvosQuery} from '#/state/queries/messages/list-conversations'
 import {List} from '#/view/com/util/List'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'

src/screens/Profile/Sections/Feed.tsx

@@ -10,7 +10,7 @@ import {isNative} from '#/platform/detection'
 import {FeedDescriptor} from '#/state/queries/post-feed'
 import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
 import {truncateAndInvalidate} from '#/state/queries/util'
-import {Feed} from '#/view/com/posts/Feed'
+import {PostFeed} from '#/view/com/posts/PostFeed'
 import {EmptyState} from '#/view/com/util/EmptyState'
 import {ListRef} from '#/view/com/util/List'
 import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
@@ -74,7 +74,7 @@ export const ProfileFeedSection = React.forwardRef<
 
   return (
     <View>
-      <Feed
+      <PostFeed
         testID="postsFeed"
         enabled={isFocused}
         feed={feed}

src/state/cache/profile-shadow.ts

@@ -7,7 +7,7 @@ import {batchedUpdates} from '#/lib/batchedUpdates'
 import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search'
 import {findAllProfilesInQueryData as findAllProfilesInKnownFollowersQueryData} from '../queries/known-followers'
 import {findAllProfilesInQueryData as findAllProfilesInListMembersQueryData} from '../queries/list-members'
-import {findAllProfilesInQueryData as findAllProfilesInListConvosQueryData} from '../queries/messages/list-converations'
+import {findAllProfilesInQueryData as findAllProfilesInListConvosQueryData} from '../queries/messages/list-conversations'
 import {findAllProfilesInQueryData as findAllProfilesInMyBlockedAccountsQueryData} from '../queries/my-blocked-accounts'
 import {findAllProfilesInQueryData as findAllProfilesInMyMutedAccountsQueryData} from '../queries/my-muted-accounts'
 import {findAllProfilesInQueryData as findAllProfilesInFeedsQueryData} from '../queries/post-feed'