experimental gesture view

* Add fontScale, gate it, fix some computes

* Add inter, integrate

* Clean up

* Apply to old Text component

* Use numeric weight

* Cleanup

* Clean up appearance settings

* Global tracking

* Fix regular italic variant

* Refactor settings and fontScale values

* Remove flags

* Get rid of lower weight font usage

* Remove gate from settings

* Refactor appearance settings for reuse

* Add neue type nux

* Update defaults

* Load fonts, add fallback families

* Load fonts via plugin in production

* Fixes

* Fix for web

* Nits

---------

Co-authored-by: Hailey <me@haileyok.com>

.eslintrc.js

@@ -71,6 +71,19 @@ module.exports = {
     'simple-import-sort/exports': 'warn',
     // TODO: Reenable when we figure out why it gets stuck on CI.
     // 'react-compiler/react-compiler': 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: '@atproto/api',
+            importNames: ['moderatePost'],
+            message:
+              'Please use `moderatePost_wrapped` from `#/lib/moderatePost_wrapped` instead.',
+          },
+        ],
+      },
+    ],
   },
   ignorePatterns: [
     '**/__mocks__/*.ts',

__e2e__/flows/curate-lists.yml

@@ -74,8 +74,7 @@ appId: xyz.blueskyweb.app
 - tapOn: "Delete List"
 - tapOn:
     id: "confirmBtn"
-- assertVisible:
-    id: "listsEmpty"
+- assertVisible: "This list is empty!"
 
 - tapOn:
     label: "Create a new curatelist"
@@ -161,17 +160,6 @@ appId: xyz.blueskyweb.app
 - assertNotVisible:
     id: "userAddRemoveListsModal"
 
-- tapOn:
-    label: "Shows the curatelist on my profile"
-    id: "bottomBarProfileBtn"
-- swipe:
-    from:
-        id: "profilePager-selector"
-    direction: LEFT
-- tapOn:
-    id: "profilePager-selector-6"
-- tapOn: "Good Ppl"
-
 - tapOn:
     label: "Adds and removes users on curatelists from the profile"
     id: "bottomBarSearchBtn"

__e2e__/flows/feed-reorder.yml

@@ -10,8 +10,13 @@ appId: xyz.blueskyweb.app
     id: "e2eSignInAlice"
 
 # Pin alice's feed
+- extendedWaitUntil:
+    visible:
+        id: "viewHeaderDrawerBtn"
 - tapOn:
-    id: "bottomBarProfileBtn"
+    id: "viewHeaderDrawerBtn"
+- tapOn:
+    id: "profileCardButton"
 - swipe:
     from:
         id: "profilePager-selector"

__e2e__/flows/home-screen.yml

@@ -9,6 +9,9 @@ appId: xyz.blueskyweb.app
 - tapOn:
     id: "e2eSignInAlice"
 
+- extendedWaitUntil:
+    visible:
+        text: "Feeds ✨"
 - tapOn:
     label: "Can go to feeds page using feeds button in tab bar"
     text: "Feeds ✨"
@@ -34,26 +37,16 @@ appId: xyz.blueskyweb.app
 - tapOn:
     label: "Can like posts"
     id: "likeBtn"
-- assertVisible:
-    id: "likeCount"
-    text: "1"
 - tapOn:
     id: "likeBtn"
-- assertNotVisible:
-    id: "likeCount"
 
 - tapOn:
     label: "Can repost posts"
     id: "repostBtn"
 - tapOn: "Repost"
-- assertVisible:
-    id: "repostCount"
-    text: "1"
 - tapOn:
     id: "repostBtn"
 - tapOn: "Remove repost"
-- assertNotVisible:
-    id: "repostCount"
 
 - tapOn:
     label: "Can delete posts"

__e2e__/flows/profile-screen-edit.yml

@@ -11,6 +11,9 @@ appId: xyz.blueskyweb.app
 
 
 # Navigate to my profile
+- extendedWaitUntil:
+    visible:
+        id: "bottomBarSearchBtn"
 - tapOn:
     id: "bottomBarProfileBtn"
 

__e2e__/flows/profile-screen.yml

@@ -10,6 +10,9 @@ appId: xyz.blueskyweb.app
     id: "e2eSignInAlice"
 
 # Navigate to another user profile
+- extendedWaitUntil:
+    visible:
+        id: "bottomBarSearchBtn"
 - tapOn:
     id: "bottomBarSearchBtn"
 - tapOn:

__e2e__/flows/thread-screen.yml

@@ -11,6 +11,8 @@ appId: xyz.blueskyweb.app
 
 
 # Navigate to thread
+- extendedWaitUntil:
+    visible: "Thread root"
 - tapOn: "Thread root"
 - assertVisible: "Thread reply"
 
@@ -19,32 +21,22 @@ appId: xyz.blueskyweb.app
     id: "likeBtn"
     childOf:
         id: "postThreadItem-by-bob.test"
-- assertVisible:
-    id: "likeCount-expanded"
+- assertVisible: "1 like"
 - tapOn:
     id: "likeBtn"
     childOf:
         id: "postThreadItem-by-bob.test"
-- assertNotVisible:
-    id: "likeCount-expanded"
+- assertNotVisible: "1 like"
 
 # Can like a reply post
 - tapOn:
     id: "likeBtn"
     childOf:
         id: "postThreadItem-by-carla.test"
-- assertVisible:
-    id: "likeCount"
-    childOf:
-        id: "postThreadItem-by-carla.test"
 - tapOn:
     id: "likeBtn"
     childOf:
         id: "postThreadItem-by-carla.test"
-- assertNotVisible:
-    id: "likeCount"
-    childOf:
-        id: "postThreadItem-by-carla.test"
 
 # Can repost the root post
 - tapOn:

__tests__/lib/string.test.ts

@@ -340,12 +340,14 @@ describe('parseEmbedPlayerFromUrl', () => {
     'https://youtube.com/watch?v=videoId',
     'https://youtube.com/watch?v=videoId&feature=share',
     'https://youtube.com/shorts/videoId',
+    'https://youtube.com/live/videoId',
     'https://m.youtube.com/watch?v=videoId',
     'https://music.youtube.com/watch?v=videoId',
 
     'https://youtube.com/shorts/',
     'https://youtube.com/',
     'https://youtube.com/random',
+    'https://youtube.com/live/',
 
     'https://twitch.tv/channelName',
     'https://www.twitch.tv/channelName',
@@ -475,10 +477,16 @@ 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,
     undefined,
+    undefined,
 
     {
       type: 'twitch_video',

app.config.js

@@ -55,6 +55,7 @@ module.exports = function (config) {
     : undefined
   const UPDATES_ENABLED = !!UPDATES_CHANNEL
 
+  const USE_SENTRY = Boolean(process.env.SENTRY_AUTH_TOKEN)
   const SENTRY_DIST = `${PLATFORM}.${VERSION}.${IS_TESTFLIGHT ? 'tf' : ''}${
     IS_DEV ? 'dev' : ''
   }`
@@ -186,12 +187,20 @@ module.exports = function (config) {
       },
       plugins: [
         'expo-localization',
-        Boolean(process.env.SENTRY_AUTH_TOKEN) && 'sentry-expo',
+        USE_SENTRY && [
+          '@sentry/react-native/expo',
+          {
+            organization: 'blueskyweb',
+            project: 'react-native',
+            release: VERSION,
+            dist: SENTRY_DIST,
+          },
+        ],
         [
           'expo-build-properties',
           {
             ios: {
-              deploymentTarget: '14.0',
+              deploymentTarget: '15.1',
               newArchEnabled: false,
             },
             android: {
@@ -211,7 +220,6 @@ module.exports = function (config) {
             sounds: PLATFORM === 'ios' ? ['assets/dm.aiff'] : ['assets/dm.mp3'],
           },
         ],
-        'expo-video',
         'react-native-compressor',
         './plugins/starterPackAppClipExtension/withStarterPackAppClip.js',
         './plugins/withAndroidManifestPlugin.js',
@@ -222,6 +230,31 @@ module.exports = function (config) {
         './plugins/shareExtension/withShareExtensions.js',
         './plugins/notificationsExtension/withNotificationsExtension.js',
         './plugins/withAppDelegateReferrer.js',
+        [
+          'expo-font',
+          {
+            fonts: [
+              // './assets/fonts/inter/Inter-Thin.otf',
+              // './assets/fonts/inter/Inter-ThinItalic.otf',
+              // './assets/fonts/inter/Inter-ExtraLight.otf',
+              // './assets/fonts/inter/Inter-ExtraLightItalic.otf',
+              // './assets/fonts/inter/Inter-Light.otf',
+              // './assets/fonts/inter/Inter-LightItalic.otf',
+              './assets/fonts/inter/Inter-Regular.otf',
+              './assets/fonts/inter/Inter-Italic.otf',
+              './assets/fonts/inter/Inter-Medium.otf',
+              './assets/fonts/inter/Inter-MediumItalic.otf',
+              './assets/fonts/inter/Inter-SemiBold.otf',
+              './assets/fonts/inter/Inter-SemiBoldItalic.otf',
+              './assets/fonts/inter/Inter-Bold.otf',
+              './assets/fonts/inter/Inter-BoldItalic.otf',
+              './assets/fonts/inter/Inter-ExtraBold.otf',
+              './assets/fonts/inter/Inter-ExtraBoldItalic.otf',
+              './assets/fonts/inter/Inter-Black.otf',
+              './assets/fonts/inter/Inter-BlackItalic.otf',
+            ],
+          },
+        ],
       ].filter(Boolean),
       extra: {
         eas: {
@@ -264,7 +297,7 @@ module.exports = function (config) {
            * @see https://docs.expo.dev/guides/using-sentry/#app-configuration
            */
           {
-            file: 'sentry-expo/upload-sourcemaps',
+            file: './postHooks/uploadSentrySourcemapsPostHook',
             config: {
               organization: 'blueskyweb',
               project: 'react-native',

assets/icons/arrowsDiagonalIn_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z" fill="#000"/></svg>

assets/icons/arrowsDiagonalIn_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-5a2 2 0 0 1-2-2V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z" fill="#000"/></svg>

assets/icons/arrowsDiagonalOut_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM4 13a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z" fill="#000"/></svg>

assets/icons/arrowsDiagonalOut_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 4a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14a1 1 0 0 1-1-1Zm-9 9a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2v-5a1 1 0 0 1 1-1Z" fill="#000"/></svg>

assets/icons/cc_filled_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm11.543 7.293a1 1 0 0 1 1.414 0 1 1 0 0 0 1.414-1.414 3 3 0 1 0 0 4.242 1 1 0 0 0-1.414-1.414 1 1 0 0 1-1.414-1.414Zm-6 0a1 1 0 0 1 1.414 0 1 1 0 0 0 1.414-1.414 3 3 0 1 0 0 4.243 1 1 0 0 0-1.414-1.415 1 1 0 0 1-1.414-1.414Z" fill="#000"/></svg>

assets/icons/cc_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Zm10.957 6.293a1 1 0 1 0 0 1.414 1 1 0 0 1 1.414 1.414 3 3 0 1 1 0-4.242 1 1 0 0 1-1.414 1.414Zm-6.331-.22a1 1 0 1 0 .331 1.634 1 1 0 0 1 1.414 1.414 3 3 0 1 1 0-4.242 1 1 0 0 1-1.414 1.414.994.994 0 0 0-.331-.22Z" fill="#000"/></svg>

assets/icons/crop_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6 2a1 1 0 0 1 1 1v2h11a1 1 0 0 1 1 1v11h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2H6a1 1 0 0 1-1-1V7H3a1 1 0 0 1 0-2h2V3a1 1 0 0 1 1-1Zm1 5v10h10V7H7Z" clip-rule="evenodd"/></svg>

assets/icons/download_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 3a1 1 0 0 1 1 1v8.086l1.793-1.793a1 1 0 1 1 1.414 1.414l-3.5 3.5a1 1 0 0 1-1.414 0l-3.5-3.5a1 1 0 1 1 1.414-1.414L11 12.086V4a1 1 0 0 1 1-1ZM4 14a1 1 0 0 1 1 1v4h14v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

assets/icons/eye_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.135 12C5.413 16.088 8.77 18 12 18s6.587-1.912 8.865-6C18.587 7.912 15.23 6 12 6c-3.228 0-6.587 1.912-8.865 6ZM12 4c4.24 0 8.339 2.611 10.888 7.54a1 1 0 0 1 0 .92C20.338 17.388 16.24 20 12 20c-4.24 0-8.339-2.611-10.888-7.54a1 1 0 0 1 0-.92C3.662 6.612 7.76 4 12 4Zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" clip-rule="evenodd"/></svg>

assets/icons/moon_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.097 2.53a1 1 0 0 1-.041 1.07 6 6 0 0 0 8.345 8.344 1 1 0 0 1 1.563.908c-.434 5.122-4.728 9.144-9.962 9.144-5.522 0-9.998-4.476-9.998-9.998 0-5.234 4.021-9.528 9.144-9.962a1 1 0 0 1 .949.494ZM9.424 4.424a7.998 7.998 0 1 0 10.152 10.152A8 8 0 0 1 9.424 4.424Z" clip-rule="evenodd"/></svg>

assets/icons/pause_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4ZM14 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z" fill="#000"/></svg>

assets/icons/pause_filled_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6ZM14 6a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Z" fill="#000"/></svg>

assets/icons/pause_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4Zm2 1v14h2V5H6Zm8-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Zm2 1v14h2V5h-2Z" fill="#000"/></svg>

assets/icons/pause_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Zm7 1a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Z" fill="#000"/></svg>

assets/icons/phone_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H8Zm2 2a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

assets/icons/play_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.514 2.143A1 1 0 0 0 5 3v18a1 1 0 0 0 1.514.858l15-9a1 1 0 0 0 0-1.716l-15-9Z" fill="#000"/></svg>

assets/icons/play_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.507 2.13a1 1 0 0 1 1.008.013l15 9a1 1 0 0 1 0 1.714l-15 9A1 1 0 0 1 5 21V3a1 1 0 0 1 .507-.87ZM7 4.766v14.468L19.056 12 7 4.766Z" fill="#000"/></svg>

assets/icons/textSize_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9 5a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2h-5v14a1 1 0 1 1-2 0V6h-5a1 1 0 0 1-1-1Zm-3.073 7v8a1 1 0 1 0 2 0v-8H12a1 1 0 1 0 0-2H6.971a1.015 1.015 0 0 0-.089 0H2a1 1 0 1 0 0 2h3.927Z" clip-rule="evenodd"/></svg>

assets/icons/titleCase_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.65 17.247c-.242.832-.632 1.178-1.325 1.178-.814 0-1.325-.476-1.325-1.23 0-.216.06-.51.173-.831L4.586 7.07c.364-1.014.979-1.482 1.966-1.482 1.022 0 1.629.45 2.001 1.473l3.43 9.303c.121.337.165.571.165.831 0 .72-.546 1.23-1.308 1.23-.736 0-1.126-.338-1.36-1.152l-.658-1.975H4.309l-.658 1.95ZM6.5 8.152l-1.62 5.12h3.335l-1.654-5.12H6.5Zm13.005 8.688c-.52.988-1.68 1.568-2.84 1.568-1.768 0-3.11-1.144-3.11-2.815 0-1.69 1.299-2.668 3.62-2.807l2.34-.138v-.615c0-.867-.607-1.369-1.56-1.369-.771 0-1.239.251-1.802.979-.277.312-.597.468-1.004.468-.615 0-1.057-.399-1.057-.97 0-.2.043-.382.13-.572.433-1.109 1.923-1.793 3.845-1.793 2.383 0 3.933 1.23 3.933 3.1v5.293c0 .84-.511 1.273-1.23 1.273-.684 0-1.16-.38-1.213-1.126v-.476h-.052Zm-3.43-1.386c0 .693.572 1.126 1.42 1.126 1.11 0 2.02-.719 2.02-1.723v-.676l-1.959.121c-.944.07-1.48.494-1.48 1.152Z" clip-rule="evenodd"/></svg>

bskyembed/.eslintrc

@@ -10,11 +10,12 @@
   ],
   "rules": {
     "simple-import-sort/imports": "warn",
-    "simple-import-sort/exports": "warn"
+    "simple-import-sort/exports": "warn",
+    'no-else-return': 'off'
   },
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": "latest",
     "project": "./bskyembed/tsconfig.json"
   }
-}
+}

bskyembed/assets/play_filled_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M9.576 2.534C7.578 1.299 5 2.737 5 5.086v13.828c0 2.35 2.578 3.787 4.576 2.552l11.194-6.914c1.899-1.172 1.899-3.932 0-5.104L9.576 2.534Z"/></svg>

bskyembed/assets/starterPack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><defs><linearGradient x1="0" y1="0" x2="100%" y2="0" gradientTransform="rotate(45)" id="sky_V5w1FF_xb91wVQ_1euhBX"><stop offset="0" stop-color="#0A7AFF"></stop><stop offset="1" stop-color="#59B9FF"></stop></linearGradient></defs><path fill="url(#sky_V5w1FF_xb91wVQ_1euhBX)" fill-rule="evenodd" clip-rule="evenodd" d="M11.26 5.227 5.02 6.899c-.734.197-1.17.95-.973 1.685l1.672 6.24c.197.734.951 1.17 1.685.973l6.24-1.672c.734-.197 1.17-.951.973-1.685L12.945 6.2a1.375 1.375 0 0 0-1.685-.973Zm-6.566.459a2.632 2.632 0 0 0-1.86 3.223l1.672 6.24a2.632 2.632 0 0 0 3.223 1.861l6.24-1.672a2.631 2.631 0 0 0 1.861-3.223l-1.672-6.24a2.632 2.632 0 0 0-3.223-1.861l-6.24 1.672Z"></path><path fill="url(#sky_V5w1FF_xb91wVQ_1euhBX)" fill-rule="evenodd" clip-rule="evenodd" d="M15.138 18.411a4.606 4.606 0 1 0 0-9.211 4.606 4.606 0 0 0 0 9.211Zm0 1.257a5.862 5.862 0 1 0 0-11.724 5.862 5.862 0 0 0 0 11.724Z"></path></svg>

bskyembed/package.json

@@ -9,7 +9,7 @@
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src"
   },
   "dependencies": {
-    "@atproto/api": "^0.12.2",
+    "@atproto/api": "0.13.6",
     "@preact/preset-vite": "^2.8.2",
     "@vitejs/plugin-legacy": "^5.3.2",
     "preact": "^10.4.8",
@@ -22,7 +22,7 @@
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "typescript": "^4.0.5",
+    "typescript": "^5.5.4",
     "vite": "^5.2.8",
     "vite-tsconfig-paths": "^4.3.2"
   }

bskyembed/src/components/embed.tsx

@@ -3,15 +3,20 @@ import {
   AppBskyEmbedImages,
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
+  AppBskyEmbedVideo,
   AppBskyFeedDefs,
   AppBskyFeedPost,
   AppBskyGraphDefs,
+  AppBskyGraphStarterpack,
   AppBskyLabelerDefs,
+  AtUri,
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
 
 import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
+import playIcon from '../../assets/play_filled_corner2_rounded.svg'
+import starterPackIcon from '../../assets/starterPack.svg'
 import {CONTENT_LABELS, labelsToInfo} from '../labels'
 import {getRkey} from '../utils'
 import {Link} from './link'
@@ -105,7 +110,7 @@ export function Embed({
       // Case 3.2: List
       if (AppBskyGraphDefs.isListView(record)) {
         return (
-          <GenericWithImage
+          <GenericWithImageEmbed
             image={record.avatar}
             title={record.name}
             href={`/profile/${record.creator.did}/lists/${getRkey(record)}`}
@@ -122,7 +127,7 @@ export function Embed({
       // Case 3.3: Feed
       if (AppBskyFeedDefs.isGeneratorView(record)) {
         return (
-          <GenericWithImage
+          <GenericWithImageEmbed
             image={record.avatar}
             title={record.displayName}
             href={`/profile/${record.creator.did}/feed/${getRkey(record)}`}
@@ -134,31 +139,35 @@ export function Embed({
 
       // Case 3.4: Labeler
       if (AppBskyLabelerDefs.isLabelerView(record)) {
-        return (
-          <GenericWithImage
-            image={record.creator.avatar}
-            title={record.creator.displayName || record.creator.handle}
-            href={`/profile/${record.creator.did}`}
-            subtitle="Labeler"
-            description={`Liked by ${record.likeCount ?? 0} users`}
-          />
-        )
+        // Embed type does not exist in the app, so show nothing
+        return null
       }
 
-      // Case 3.5: Post not found
+      // Case 3.5: Starter pack
+      if (AppBskyGraphDefs.isStarterPackViewBasic(record)) {
+        return <StarterPackEmbed content={record} />
+      }
+
+      // Case 3.6: Post not found
       if (AppBskyEmbedRecord.isViewNotFound(record)) {
         return <Info>Quoted post not found, it may have been deleted.</Info>
       }
 
-      // Case 3.6: Post blocked
+      // Case 3.7: Post blocked
       if (AppBskyEmbedRecord.isViewBlocked(record)) {
         return <Info>The quoted post is blocked.</Info>
       }
 
-      throw new Error('Unknown embed type')
+      // Unknown embed type
+      return null
     }
 
-    // Case 4: Record with media
+    // Case 4: Video
+    if (AppBskyEmbedVideo.isView(content)) {
+      return <VideoEmbed content={content} />
+    }
+
+    // Case 5: Record with media
     if (
       AppBskyEmbedRecordWithMedia.isView(content) &&
       AppBskyEmbedRecord.isViewRecord(content.record.record)
@@ -182,7 +191,8 @@ export function Embed({
       )
     }
 
-    throw new Error('Unsupported embed type')
+    // Unknown embed type
+    return null
   } catch (err) {
     return (
       <Info>{err instanceof Error ? err.message : 'An error occurred'}</Info>
@@ -314,7 +324,7 @@ function ExternalEmbed({
   )
 }
 
-function GenericWithImage({
+function GenericWithImageEmbed({
   title,
   subtitle,
   href,
@@ -350,3 +360,89 @@ function GenericWithImage({
     </Link>
   )
 }
+
+// just the thumbnail and a play button
+function VideoEmbed({content}: {content: AppBskyEmbedVideo.View}) {
+  let aspectRatio = 1
+
+  if (content.aspectRatio) {
+    const {width, height} = content.aspectRatio
+    aspectRatio = clamp(width / height, 1 / 1, 3 / 1)
+  }
+
+  return (
+    <div
+      className="w-full overflow-hidden rounded-lg aspect-square relative"
+      style={{aspectRatio: `${aspectRatio} / 1`}}>
+      <img
+        src={content.thumbnail}
+        alt={content.alt}
+        className="object-cover size-full"
+      />
+      <div className="size-24 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black/50 flex items-center justify-center">
+        <img src={playIcon} className="object-cover size-3/5" />
+      </div>
+    </div>
+  )
+}
+
+function StarterPackEmbed({
+  content,
+}: {
+  content: AppBskyGraphDefs.StarterPackViewBasic
+}) {
+  if (!AppBskyGraphStarterpack.isRecord(content.record)) {
+    return null
+  }
+
+  const starterPackHref = getStarterPackHref(content)
+  const imageUri = getStarterPackImage(content)
+
+  return (
+    <Link
+      href={starterPackHref}
+      className="w-full rounded-lg overflow-hidden border flex flex-col items-stretch">
+      <img src={imageUri} className="aspect-[1.91/1] object-cover" />
+      <div className="py-3 px-4">
+        <div className="flex space-x-2 items-center">
+          <img src={starterPackIcon} className="w-10 h-10" />
+          <div>
+            <p className="font-semibold leading-[21px]">
+              {content.record.name}
+            </p>
+            <p className="text-sm text-textLight line-clamp-2 leading-[18px]">
+              Starter pack by{' '}
+              {content.creator.displayName || `@${content.creator.handle}`}
+            </p>
+          </div>
+        </div>
+        {content.record.description && (
+          <p className="text-sm mt-1">{content.record.description}</p>
+        )}
+        {!!content.joinedAllTimeCount && content.joinedAllTimeCount > 50 && (
+          <p className="text-sm font-semibold text-textLight mt-1">
+            {content.joinedAllTimeCount} users have joined!
+          </p>
+        )}
+      </div>
+    </Link>
+  )
+}
+
+// from #/lib/strings/starter-pack.ts
+function getStarterPackImage(starterPack: AppBskyGraphDefs.StarterPackView) {
+  const rkey = new AtUri(starterPack.uri).rkey
+  return `https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`
+}
+
+function getStarterPackHref(
+  starterPack: AppBskyGraphDefs.StarterPackViewBasic,
+) {
+  const rkey = new AtUri(starterPack.uri).rkey
+  const handleOrDid = starterPack.creator.handle || starterPack.creator.did
+  return `/starter-pack/${handleOrDid}/${rkey}`
+}
+
+function clamp(num: number, min: number, max: number) {
+  return Math.max(min, Math.min(num, max))
+}

bskyembed/src/components/post.tsx

@@ -11,7 +11,7 @@ import likeIcon from '../../assets/heart2_filled_stroke2_corner0_rounded.svg'
 import logo from '../../assets/logo.svg'
 import repostIcon from '../../assets/repost_stroke2_corner2_rounded.svg'
 import {CONTENT_LABELS} from '../labels'
-import {getRkey, niceDate} from '../utils'
+import {getRkey, niceDate, prettyNumber} from '../utils'
 import {Container} from './container'
 import {Embed} from './embed'
 import {Link} from './link'
@@ -78,7 +78,7 @@ export function Post({thread}: Props) {
             <div className="flex items-center gap-2 cursor-pointer">
               <img src={likeIcon} className="w-5 h-5" />
               <p className="font-bold text-neutral-500 mb-px">
-                {post.likeCount}
+                {prettyNumber(post.likeCount)}
               </p>
             </div>
           )}
@@ -86,7 +86,7 @@ export function Post({thread}: Props) {
             <div className="flex items-center gap-2 cursor-pointer">
               <img src={repostIcon} className="w-5 h-5" />
               <p className="font-bold text-neutral-500 mb-px">
-                {post.repostCount}
+                {prettyNumber(post.repostCount)}
               </p>
             </div>
           )}
@@ -97,7 +97,7 @@ export function Post({thread}: Props) {
           <div className="flex-1" />
           <p className="cursor-pointer text-brand font-bold hover:underline hidden min-[450px]:inline">
             {post.replyCount
-              ? `Read ${post.replyCount} ${
+              ? `Read ${prettyNumber(post.replyCount)} ${
                   post.replyCount > 1 ? 'replies' : 'reply'
                 } on Bluesky`
               : `View on Bluesky`}
@@ -132,7 +132,10 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
           key={counter}
           href={segment.link.uri}
           className="text-blue-400 hover:underline"
-          disableTracking={!segment.link.uri.startsWith('https://bsky.app')}>
+          disableTracking={
+            !segment.link.uri.startsWith('https://bsky.app') &&
+            !segment.link.uri.startsWith('https://go.bsky.app')
+          }>
           {segment.text}
         </Link>,
       )

bskyembed/src/screens/post.tsx

@@ -1,6 +1,6 @@
 import '../index.css'
 
-import {AppBskyFeedDefs, BskyAgent} from '@atproto/api'
+import {AppBskyFeedDefs, AtpAgent} from '@atproto/api'
 import {h, render} from 'preact'
 
 import logo from '../../assets/logo.svg'
@@ -12,7 +12,7 @@ import {getRkey} from '../utils'
 const root = document.getElementById('app')
 if (!root) throw new Error('No root element')
 
-const agent = new BskyAgent({
+const agent = new AtpAgent({
   service: 'https://public.api.bsky.app',
 })
 

bskyembed/src/utils.ts

@@ -16,3 +16,13 @@ export function getRkey({uri}: {uri: string}): string {
   const at = new AtUri(uri)
   return at.rkey
 }
+
+const formatter = new Intl.NumberFormat('en-US', {
+  notation: 'compact',
+  maximumFractionDigits: 1,
+  roundingMode: 'trunc',
+})
+
+export function prettyNumber(number: number) {
+  return formatter.format(number)
+}

bskyembed/tsconfig.json

@@ -20,5 +20,5 @@
     "jsxFragmentFactory": "Fragment",
     "downlevelIteration": true
   },
-  "include": ["src"]
+  "include": ["src", "vite.config.ts"]
 }

bskyembed/tsconfig.snippet.json

@@ -6,5 +6,5 @@
     "strict": true,
     "outDir": "dist"
   },
-  "include": ["snippet"],
+  "include": ["snippet"]
 }

bskyembed/yarn.lock

@@ -20,15 +20,16 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@atproto/api@^0.12.2":
-  version "0.12.2"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.12.2.tgz#5df6d4f60dea0395c84fdebd9e81a7e853edf130"
-  integrity sha512-UVzCiDZH2j0wrr/O8nb1edD5cYLVqB5iujueXUCbHS3rAwIxgmyLtA3Hzm2QYsGPo/+xsIg1fNvpq9rNT6KWUA==
+"@atproto/api@0.13.6":
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.13.6.tgz#2500e9d7143e6718089632300c42ce50149f8cd5"
+  integrity sha512-58emFFZhqY8nVWD3xFWK0yYqAmJ2un+NaTtZxBbRo00mGq1rz9VXTpVmfoHFcuXL1hoDQN3WyJfsub8r6xGOgg==
   dependencies:
     "@atproto/common-web" "^0.3.0"
-    "@atproto/lexicon" "^0.4.0"
+    "@atproto/lexicon" "^0.4.1"
     "@atproto/syntax" "^0.3.0"
-    "@atproto/xrpc" "^0.5.0"
+    "@atproto/xrpc" "^0.6.1"
+    await-lock "^2.2.2"
     multiformats "^9.9.0"
     tlds "^1.234.0"
 
@@ -42,29 +43,29 @@
     uint8arrays "3.0.0"
     zod "^3.21.4"
 
-"@atproto/lexicon@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.4.0.tgz#63e8829945d80c25524882caa8ed27b1151cc576"
-  integrity sha512-RvCBKdSI4M8qWm5uTNz1z3R2yIvIhmOsMuleOj8YR6BwRD+QbtUBy3l+xQ7iXf4M5fdfJFxaUNa6Ty0iRwdKqQ==
+"@atproto/lexicon@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.4.1.tgz#19155210570a2fafbcc7d4f655d9b813948e72a0"
+  integrity sha512-bzyr+/VHXLQWbumViX5L7h1NKQObfs8Z+XZJl43OUK8nYFUI4e/sW1IZKRNfw7Wvi5YVNK+J+yP3DWIBZhkCYA==
   dependencies:
     "@atproto/common-web" "^0.3.0"
     "@atproto/syntax" "^0.3.0"
     iso-datestring-validator "^2.2.2"
     multiformats "^9.9.0"
-    zod "^3.21.4"
+    zod "^3.23.8"
 
 "@atproto/syntax@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@atproto/syntax/-/syntax-0.3.0.tgz#fafa2dbea9add37253005cb663e7373e05e618b3"
   integrity sha512-Weq0ZBxffGHDXHl9U7BQc2BFJi/e23AL+k+i5+D9hUq/bzT4yjGsrCejkjq0xt82xXDjmhhvQSZ0LqxyZ5woxA==
 
-"@atproto/xrpc@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.5.0.tgz#dacbfd8f7b13f0ab5bd56f8fdd4b460e132a6032"
-  integrity sha512-swu+wyOLvYW4l3n+VAuJbHcPcES+tin2Lsrp8Bw5aIXIICiuFn1YMFlwK9JwVUzTH21Py1s1nHEjr4CJeElJog==
+"@atproto/xrpc@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.6.1.tgz#dcd1315c8c60eef5af2db7fa4e35a38ebc6d79d5"
+  integrity sha512-Zy5ydXEdk6sY7FDUZcEVfCL1jvbL4tXu5CcdPqbEaW6LQtk9GLds/DK1bCX9kswTGaBC88EMuqQMfkxOhp2t4A==
   dependencies:
-    "@atproto/lexicon" "^0.4.0"
-    zod "^3.21.4"
+    "@atproto/lexicon" "^0.4.1"
+    zod "^3.23.8"
 
 "@babel/code-frame@^7.23.5", "@babel/code-frame@^7.24.1", "@babel/code-frame@^7.24.2":
   version "7.24.2"
@@ -1710,6 +1711,11 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+await-lock@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/await-lock/-/await-lock-2.2.2.tgz#a95a9b269bfd2f69d22b17a321686f551152bcef"
+  integrity sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==
+
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.10"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz#276f41710b03a64f6467433cab72cbc2653c38b1"
@@ -3730,8 +3736,16 @@ stack-trace@^1.0.0-pre2:
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-1.0.0-pre2.tgz#46a83a79f1b287807e9aaafc6a5dd8bcde626f9c"
   integrity sha512-2ztBJRek8IVofG9DBJqdy2N5kulaacX30Nz7xmkYF6ale9WBVmIy6mFBchvGX7Vx/MyjBhx+Rcxqrj+dbOnQ6A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3795,7 +3809,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4003,10 +4024,10 @@ typed-array-length@^1.0.6:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@^4.0.5:
-  version "4.9.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
-  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+typescript@^5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
 uint8arrays@3.0.0:
   version "3.0.0"
@@ -4192,3 +4213,8 @@ zod@^3.21.4:
   version "3.22.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
   integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
+
+zod@^3.23.8:
+  version "3.23.8"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
+  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==

bskyweb/cmd/bskyweb/main.go

@@ -41,10 +41,10 @@ func run(args []string) {
 					EnvVars: []string{"ATP_APPVIEW_HOST", "ATP_PDS_HOST"},
 				},
 				&cli.StringFlag{
-					Name:  "ogcard-host",
-					Usage: "scheme, hostname, and port of ogcard service",
+					Name:     "ogcard-host",
+					Usage:    "scheme, hostname, and port of ogcard service",
 					Required: false,
-					EnvVars: []string{"OGCARD_HOST"},
+					EnvVars:  []string{"OGCARD_HOST"},
 				},
 				&cli.StringFlag{
 					Name:     "http-address",
@@ -60,6 +60,12 @@ func run(args []string) {
 					Value:    "",
 					EnvVars:  []string{"LINK_HOST"},
 				},
+				&cli.StringFlag{
+					Name:    "ipcc-host",
+					Usage:   "scheme, hostname, and port of ipcc service",
+					Value:   "https://localhost:8730",
+					EnvVars: []string{"IPCC_HOST"},
+				},
 				&cli.BoolFlag{
 					Name:     "debug",
 					Usage:    "Enable debug mode",
@@ -67,6 +73,20 @@ func run(args []string) {
 					Required: false,
 					EnvVars:  []string{"DEBUG"},
 				},
+				&cli.StringFlag{
+					Name:     "basic-auth-password",
+					Usage:    "optional password to restrict access to web interface",
+					Required: false,
+					Value:    "",
+					EnvVars:  []string{"BASIC_AUTH_PASSWORD"},
+				},
+				&cli.StringSliceFlag{
+					Name:     "cors-allowed-origins",
+					Usage:    "list of allowed origins for CORS requests",
+					Required: false,
+					Value:    cli.NewStringSlice("https://bsky.app", "https://main.bsky.dev", "https://app.staging.bsky.dev"),
+					EnvVars:  []string{"CORS_ALLOWED_ORIGINS"},
+				},
 			},
 		},
 	}

bskyweb/cmd/bskyweb/server.go

@@ -1,11 +1,17 @@
 package main
 
 import (
+	"bytes"
 	"context"
+	"crypto/subtle"
+	"crypto/tls"
+	"encoding/base64"
+	"encoding/json"
 	"errors"
 	"fmt"
 	"io/fs"
 	"net/http"
+	"net/netip"
 	"net/url"
 	"os"
 	"os/signal"
@@ -40,6 +46,7 @@ type Config struct {
 	appviewHost string
 	ogcardHost  string
 	linkHost    string
+	ipccHost    string
 }
 
 func serve(cctx *cli.Context) error {
@@ -48,6 +55,9 @@ func serve(cctx *cli.Context) error {
 	appviewHost := cctx.String("appview-host")
 	ogcardHost := cctx.String("ogcard-host")
 	linkHost := cctx.String("link-host")
+	ipccHost := cctx.String("ipcc-host")
+	basicAuthPassword := cctx.String("basic-auth-password")
+	corsOrigins := cctx.StringSlice("cors-allowed-origins")
 
 	// Echo
 	e := echo.New()
@@ -89,6 +99,7 @@ func serve(cctx *cli.Context) error {
 			appviewHost: appviewHost,
 			ogcardHost:  ogcardHost,
 			linkHost:    linkHost,
+			ipccHost:    ipccHost,
 		},
 	}
 
@@ -140,12 +151,30 @@ func serve(cctx *cli.Context) error {
 		},
 	}))
 
+	// optional password gating of entire web interface
+	if basicAuthPassword != "" {
+		e.Use(middleware.BasicAuth(func(username, password string, c echo.Context) (bool, error) {
+			// Be careful to use constant time comparison to prevent timing attacks
+			if subtle.ConstantTimeCompare([]byte(username), []byte("admin")) == 1 &&
+				subtle.ConstantTimeCompare([]byte(password), []byte(basicAuthPassword)) == 1 {
+				return true, nil
+			}
+			return false, nil
+		}))
+	}
+
 	// redirect trailing slash to non-trailing slash.
 	// all of our current endpoints have no trailing slash.
 	e.Use(middleware.RemoveTrailingSlashWithConfig(middleware.TrailingSlashConfig{
 		RedirectCode: http.StatusFound,
 	}))
 
+	// CORS middleware
+	e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
+		AllowOrigins: corsOrigins,
+		AllowMethods: []string{http.MethodGet, http.MethodHead, http.MethodOptions},
+	}))
+
 	//
 	// configure routes
 	//
@@ -211,6 +240,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/threads", server.WebGeneric)
 	e.GET("/settings/external-embeds", server.WebGeneric)
 	e.GET("/settings/accessibility", server.WebGeneric)
+	e.GET("/settings/appearance", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/debug-mod", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)
@@ -240,11 +270,15 @@ func serve(cctx *cli.Context) error {
 	e.GET("/profile/:handleOrDID/post/:rkey", server.WebPost)
 	e.GET("/profile/:handleOrDID/post/:rkey/liked-by", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/post/:rkey/reposted-by", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/post/:rkey/quotes", server.WebGeneric)
 
 	// starter packs
 	e.GET("/starter-pack/:handleOrDID/:rkey", server.WebStarterPack)
 	e.GET("/start/:handleOrDID/:rkey", server.WebStarterPack)
 
+	// ipcc
+	e.GET("/ipcc", server.WebIpCC)
+
 	if linkHost != "" {
 		linkUrl, err := url.Parse(linkHost)
 		if err != nil {
@@ -504,3 +538,61 @@ func (srv *Server) WebProfile(c echo.Context) error {
 	data["requestHost"] = req.Host
 	return c.Render(http.StatusOK, "profile.html", data)
 }
+
+type IPCCRequest struct {
+	IP string `json:"ip"`
+}
+type IPCCResponse struct {
+	CC string `json:"countryCode"`
+}
+
+func (srv *Server) WebIpCC(c echo.Context) error {
+	realIP := c.RealIP()
+	addr, err := netip.ParseAddr(realIP)
+	if err != nil {
+		log.Warnf("could not parse IP %q %s", realIP, err)
+		return c.JSON(400, IPCCResponse{})
+	}
+	var request []byte
+	if addr.Is4() {
+		ip4 := addr.As4()
+		var dest [8]byte
+		base64.StdEncoding.Encode(dest[:], ip4[:])
+		request, _ = json.Marshal(IPCCRequest{IP: string(dest[:])})
+	} else if addr.Is6() {
+		ip6 := addr.As16()
+		var dest [24]byte
+		base64.StdEncoding.Encode(dest[:], ip6[:])
+		request, _ = json.Marshal(IPCCRequest{IP: string(dest[:])})
+	}
+
+	ipccUrlBuilder, err := url.Parse(srv.cfg.ipccHost)
+	if err != nil {
+		log.Errorf("ipcc misconfigured bad url %s", err)
+		return c.JSON(500, IPCCResponse{})
+	}
+	ipccUrlBuilder.Path = "ipccdata.IpCcService/Lookup"
+	ipccUrl := ipccUrlBuilder.String()
+	cl := http.Client{
+		Transport: &http.Transport{
+			TLSClientConfig: &tls.Config{
+				InsecureSkipVerify: true,
+			},
+		},
+	}
+	postBodyReader := bytes.NewReader(request)
+	response, err := cl.Post(ipccUrl, "application/json", postBodyReader)
+	if err != nil {
+		log.Warnf("ipcc backend error %s", err)
+		return c.JSON(500, IPCCResponse{})
+	}
+	defer response.Body.Close()
+	dec := json.NewDecoder(response.Body)
+	var outResponse IPCCResponse
+	err = dec.Decode(&outResponse)
+	if err != nil {
+		log.Warnf("ipcc bad response %s", err)
+		return c.JSON(500, IPCCResponse{})
+	}
+	return c.JSON(200, outResponse)
+}

bskyweb/templates/base.html

@@ -253,7 +253,56 @@
       from { opacity: 1; }
       to { opacity: 0; }
     }
-  </style>
+
+    .force-no-clicks > *,
+    .force-no-clicks * {
+      pointer-events: none !important;
+    }
+
+    input[type=range][orient=vertical] {
+      writing-mode: vertical-lr;
+      direction: rtl;
+      appearance: slider-vertical;
+      width: 16px;
+      vertical-align: bottom;
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      cursor: pointer;
+    }
+
+    input[type="range"][orient=vertical]::-webkit-slider-runnable-track {
+      background: white;
+      height: 100%;
+      width: 4px;
+      border-radius: 4px;
+    }
+
+    input[type="range"][orient=vertical]::-moz-range-track {
+      background: white;
+      height: 100%;
+      width: 4px;
+      border-radius: 4px;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      border-radius: 50%;
+      background-color: white;
+      height: 16px;
+      width: 16px;
+      margin-left: -6px;
+    }
+
+    input[type="range"][orient=vertical]::-moz-range-thumb {
+      border: none;
+      border-radius: 50%;
+      background-color: white;
+      height: 16px;
+      width: 16px;
+      margin-left: -6px;
+    }
   </style>
   {% include "scripts.html" %}
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">

index.js

@@ -1,14 +1,11 @@
 import 'react-native-gesture-handler' // must be first
-import {LogBox} from 'react-native'
-
 import '#/platform/polyfills'
-import {IS_TEST} from '#/env'
+
+import {LogBox} from 'react-native'
 import {registerRootComponent} from 'expo'
-import {doPolyfill} from '#/lib/api/api-polyfill'
 
 import App from '#/App'
-
-doPolyfill()
+import {IS_TEST} from '#/env'
 
 if (IS_TEST) {
   LogBox.ignoreAllLogs() // suppress all logs in tests

index.web.js

@@ -1,9 +1,8 @@
 import '#/platform/markBundleStartTime'
-
 import '#/platform/polyfills'
+
 import {registerRootComponent} from 'expo'
-import {doPolyfill} from '#/lib/api/api-polyfill'
+
 import App from '#/App'
 
-doPolyfill()
 registerRootComponent(App)

jest/jestSetup.js

@@ -95,3 +95,16 @@ jest.mock('expo-application', () => ({
   nativeApplicationVersion: '1.0.0',
   nativeBuildVersion: '1',
 }))
+
+jest.mock('expo-modules-core', () => ({
+  requireNativeModule: jest.fn().mockImplementation(moduleName => {
+    if (moduleName === 'ExpoPlatformInfo') {
+      return {
+        getIsReducedMotionEnabled: () => false,
+      }
+    }
+  }),
+  requireNativeViewManager: jest.fn().mockImplementation(moduleName => {
+    return () => null
+  }),
+}))

jest/test-pds.ts

@@ -79,32 +79,33 @@ export async function createServer(
     plc: {port: port2},
   })
 
+  // DISABLED - looks like dev-env added this and now it conflicts
   // add the test mod authority
-  const agent = new BskyAgent({service: pdsUrl})
-  const res = await agent.api.com.atproto.server.createAccount({
-    email: 'mod-authority@test.com',
-    handle: 'mod-authority.test',
-    password: 'hunter2',
-  })
-  agent.api.setHeader('Authorization', `Bearer ${res.data.accessJwt}`)
-  await agent.api.app.bsky.actor.profile.create(
-    {repo: res.data.did},
-    {
-      displayName: 'Dev-env Moderation',
-      description: `The pretend version of mod.bsky.app`,
-    },
-  )
+  // const agent = new BskyAgent({service: pdsUrl})
+  // const res = await agent.api.com.atproto.server.createAccount({
+  //   email: 'mod-authority@test.com',
+  //   handle: 'mod-authority.test',
+  //   password: 'hunter2',
+  // })
+  // agent.api.setHeader('Authorization', `Bearer ${res.data.accessJwt}`)
+  // await agent.api.app.bsky.actor.profile.create(
+  //   {repo: res.data.did},
+  //   {
+  //     displayName: 'Dev-env Moderation',
+  //     description: `The pretend version of mod.bsky.app`,
+  //   },
+  // )
 
-  await agent.api.app.bsky.labeler.service.create(
-    {repo: res.data.did, rkey: 'self'},
-    {
-      policies: {
-        labelValues: ['!hide', '!warn'],
-        labelValueDefinitions: [],
-      },
-      createdAt: new Date().toISOString(),
-    },
-  )
+  // await agent.api.app.bsky.labeler.service.create(
+  //   {repo: res.data.did, rkey: 'self'},
+  //   {
+  //     policies: {
+  //       labelValues: ['!hide', '!warn'],
+  //       labelValueDefinitions: [],
+  //     },
+  //     createdAt: new Date().toISOString(),
+  //   },
+  // )
 
   const pic = fs.readFileSync(
     path.join(__dirname, '..', 'assets', 'default-avatar.png'),
@@ -156,7 +157,7 @@ class Mocker {
   }
 
   async createUser(name: string) {
-    const agent = new BskyAgent({service: this.agent.service})
+    const agent = new BskyAgent({service: this.service})
 
     const inviteRes = await agent.api.com.atproto.server.createInviteCode(
       {useCount: 1},
@@ -332,7 +333,7 @@ class Mocker {
   }
 
   async createInvite(forAccount: string) {
-    const agent = new BskyAgent({service: this.agent.service})
+    const agent = new BskyAgent({service: this.service})
     await agent.api.com.atproto.server.createInviteCode(
       {useCount: 1, forAccount},
       {

lingui.config.js

@@ -14,6 +14,7 @@ module.exports = {
     'ja',
     'ko',
     'pt-BR',
+    'ru',
     'tr',
     'uk',
     'zh-CN',

modules/expo-bluesky-swiss-army/android/src/main/java/expo/modules/blueskyswissarmy/platforminfo/ExpoPlatformInfoModule.kt

@@ -0,0 +1,24 @@
+package expo.modules.blueskyswissarmy.platforminfo
+
+import android.provider.Settings
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoPlatformInfoModule : Module() {
+  override fun definition() =
+    ModuleDefinition {
+      Name("ExpoPlatformInfo")
+
+      // See https://github.com/software-mansion/react-native-reanimated/blob/7df5fd57d608fe25724608835461cd925ff5151d/packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/nativeProxy/NativeProxyCommon.java#L242
+      Function("getIsReducedMotionEnabled") {
+        val resolver = appContext.reactContext?.contentResolver ?: return@Function false
+        val scale = Settings.Global.getString(resolver, Settings.Global.TRANSITION_ANIMATION_SCALE) ?: return@Function false
+
+        try {
+          return@Function scale.toFloat() == 0f
+        } catch (_: Error) {
+          return@Function false
+        }
+      }
+    }
+}

modules/expo-bluesky-swiss-army/android/src/main/java/expo/modules/blueskyswissarmy/visibilityview/ExpoBlueskyVisibilityViewModule.kt

@@ -0,0 +1,23 @@
+package expo.modules.blueskyswissarmy.visibilityview
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoBlueskyVisibilityViewModule : Module() {
+  override fun definition() =
+    ModuleDefinition {
+      Name("ExpoBlueskyVisibilityView")
+
+      AsyncFunction("updateActiveViewAsync") {
+        VisibilityViewManager.updateActiveView()
+      }
+
+      View(VisibilityView::class) {
+        Events(arrayOf("onChangeStatus"))
+
+        Prop("enabled") { view: VisibilityView, prop: Boolean ->
+          view.isViewEnabled = prop
+        }
+      }
+    }
+}

modules/expo-bluesky-swiss-army/android/src/main/java/expo/modules/blueskyswissarmy/visibilityview/VisibilityView.kt

@@ -0,0 +1,63 @@
+package expo.modules.blueskyswissarmy.visibilityview
+
+import android.content.Context
+import android.graphics.Rect
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class VisibilityView(
+  context: Context,
+  appContext: AppContext,
+) : ExpoView(context, appContext) {
+  var isViewEnabled: Boolean = false
+
+  private val onChangeStatus by EventDispatcher()
+
+  private var isCurrentlyActive = false
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    VisibilityViewManager.addView(this)
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    VisibilityViewManager.removeView(this)
+  }
+
+  fun setIsCurrentlyActive(isActive: Boolean) {
+    if (isCurrentlyActive == isActive) {
+      return
+    }
+
+    this.isCurrentlyActive = isActive
+    this.onChangeStatus(
+      mapOf(
+        "isActive" to isActive,
+      ),
+    )
+  }
+
+  fun getPositionOnScreen(): Rect? {
+    if (!this.isShown) {
+      return null
+    }
+
+    val screenPosition = intArrayOf(0, 0)
+    this.getLocationInWindow(screenPosition)
+    return Rect(
+      screenPosition[0],
+      screenPosition[1],
+      screenPosition[0] + this.width,
+      screenPosition[1] + this.height,
+    )
+  }
+
+  fun isViewableEnough(): Boolean {
+    val positionOnScreen = this.getPositionOnScreen() ?: return false
+    val visibleArea = positionOnScreen.width() * positionOnScreen.height()
+    val totalArea = this.width * this.height
+    return visibleArea >= 0.5 * totalArea
+  }
+}

modules/expo-bluesky-swiss-army/android/src/main/java/expo/modules/blueskyswissarmy/visibilityview/VisibilityViewManager.kt

@@ -0,0 +1,82 @@
+package expo.modules.blueskyswissarmy.visibilityview
+
+import android.graphics.Rect
+
+class VisibilityViewManager {
+  companion object {
+    private val views = HashMap<Int, VisibilityView>()
+    private var currentlyActiveView: VisibilityView? = null
+    private var prevCount = 0
+
+    fun addView(view: VisibilityView) {
+      this.views[view.id] = view
+
+      if (this.prevCount == 0) {
+        this.updateActiveView()
+      }
+      this.prevCount = this.views.count()
+    }
+
+    fun removeView(view: VisibilityView) {
+      this.views.remove(view.id)
+      this.prevCount = this.views.count()
+    }
+
+    fun updateActiveView() {
+      var activeView: VisibilityView? = null
+      val count = this.views.count()
+
+      if (count == 1) {
+        val view = this.views.values.first()
+        if (view.isViewableEnough()) {
+          activeView = view
+        }
+      } else if (count > 1) {
+        val views = this.views.values
+        var mostVisibleView: VisibilityView? = null
+        var mostVisiblePosition: Rect? = null
+
+        views.forEach { view ->
+          if (!view.isViewableEnough()) {
+            return
+          }
+
+          val position = view.getPositionOnScreen() ?: return@forEach
+          val topY = position.centerY() - (position.height() / 2)
+
+          if (topY >= 150) {
+            if (mostVisiblePosition == null) {
+              mostVisiblePosition = position
+            }
+
+            if (position.centerY() <= mostVisiblePosition!!.centerY()) {
+              mostVisibleView = view
+              mostVisiblePosition = position
+            }
+          }
+        }
+
+        activeView = mostVisibleView
+      }
+
+      if (activeView == this.currentlyActiveView) {
+        return
+      }
+
+      this.clearActiveView()
+      if (activeView != null) {
+        this.setActiveView(activeView)
+      }
+    }
+
+    private fun clearActiveView() {
+      this.currentlyActiveView?.setIsCurrentlyActive(false)
+      this.currentlyActiveView = null
+    }
+
+    private fun setActiveView(view: VisibilityView) {
+      view.setIsCurrentlyActive(true)
+      this.currentlyActiveView = view
+    }
+  }
+}

modules/expo-bluesky-swiss-army/expo-module.config.json

@@ -1,12 +1,19 @@
 {
   "platforms": ["ios", "tvos", "android", "web"],
   "ios": {
-    "modules": ["ExpoBlueskySharedPrefsModule", "ExpoBlueskyReferrerModule"]
+    "modules": [
+      "ExpoBlueskySharedPrefsModule",
+      "ExpoBlueskyReferrerModule",
+      "ExpoBlueskyVisibilityViewModule",
+      "ExpoPlatformInfoModule"
+    ]
   },
   "android": {
     "modules": [
       "expo.modules.blueskyswissarmy.sharedprefs.ExpoBlueskySharedPrefsModule",
-      "expo.modules.blueskyswissarmy.referrer.ExpoBlueskyReferrerModule"
+      "expo.modules.blueskyswissarmy.referrer.ExpoBlueskyReferrerModule",
+      "expo.modules.blueskyswissarmy.visibilityview.ExpoBlueskyVisibilityViewModule",
+      "expo.modules.blueskyswissarmy.platforminfo.ExpoPlatformInfoModule"
     ]
   }
 }

modules/expo-bluesky-swiss-army/index.ts

@@ -1,4 +1,7 @@
+import * as PlatformInfo from './src/PlatformInfo'
+import {AudioCategory} from './src/PlatformInfo/types'
 import * as Referrer from './src/Referrer'
 import * as SharedPrefs from './src/SharedPrefs'
+import VisibilityView from './src/VisibilityView'
 
-export {Referrer, SharedPrefs}
+export {AudioCategory, PlatformInfo, Referrer, SharedPrefs, VisibilityView}

modules/expo-bluesky-swiss-army/ios/PlatformInfo/ExpoPlatformInfoModule.swift

@@ -0,0 +1,46 @@
+import ExpoModulesCore
+
+public class ExpoPlatformInfoModule: Module {
+  private var prevAudioActive: Bool?
+  private var prevAudioCategory: AVAudioSession.Category?
+
+  public func definition() -> ModuleDefinition {
+    Name("ExpoPlatformInfo")
+
+    Function("getIsReducedMotionEnabled") {
+      return UIAccessibility.isReduceMotionEnabled
+    }
+
+    Function("setAudioCategory") { (audioCategoryString: String) in
+      let audioCategory = AVAudioSession.Category(rawValue: audioCategoryString)
+      if audioCategory == self.prevAudioCategory {
+        return
+      }
+      self.prevAudioCategory = audioCategory
+      DispatchQueue.global(qos: .background).async {
+        try? AVAudioSession.sharedInstance().setCategory(audioCategory)
+      }
+    }
+
+    Function("setAudioActive") { (active: Bool) in
+      if active == self.prevAudioActive {
+        return
+      }
+      self.prevAudioActive = active
+      if active {
+        DispatchQueue.global(qos: .background).async {
+          try? AVAudioSession.sharedInstance().setActive(true)
+        }
+      } else {
+        DispatchQueue.global(qos: .background).async {
+          try? AVAudioSession
+            .sharedInstance()
+            .setActive(
+              false,
+              options: [.notifyOthersOnDeactivation]
+            )
+        }
+      }
+    }
+  }
+}

modules/expo-bluesky-swiss-army/ios/Visibility/ExpoBlueskyVisibilityViewModule.swift

@@ -0,0 +1,21 @@
+import ExpoModulesCore
+
+public class ExpoBlueskyVisibilityViewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoBlueskyVisibilityView")
+
+    AsyncFunction("updateActiveViewAsync") {
+      VisibilityViewManager.shared.updateActiveView()
+    }
+
+    View(VisibilityView.self) {
+      Events([
+        "onChangeStatus"
+      ])
+
+      Prop("enabled") { (view: VisibilityView, prop: Bool) in
+        view.enabled = prop
+      }
+    }
+  }
+}

modules/expo-bluesky-swiss-army/ios/Visibility/VisibilityViewManager.swift

@@ -0,0 +1,86 @@
+import Foundation
+
+class VisibilityViewManager {
+  static let shared = VisibilityViewManager()
+
+  private let views = NSHashTable<VisibilityView>(options: .weakMemory)
+  private var currentlyActiveView: VisibilityView?
+  private var screenHeight: CGFloat = UIScreen.main.bounds.height
+  private var prevCount = 0
+
+  func addView(_ view: VisibilityView) {
+    self.views.add(view)
+
+    if self.prevCount == 0 {
+      self.updateActiveView()
+    }
+    self.prevCount = self.views.count
+  }
+
+  func removeView(_ view: VisibilityView) {
+    self.views.remove(view)
+    self.prevCount = self.views.count
+  }
+
+  func updateActiveView() {
+    DispatchQueue.main.async {
+      var activeView: VisibilityView?
+
+      if self.views.count == 1 {
+        let view = self.views.allObjects[0]
+        if view.isViewableEnough() {
+          activeView = view
+        }
+      } else if self.views.count > 1 {
+        let views = self.views.allObjects
+        var mostVisibleView: VisibilityView?
+        var mostVisiblePosition: CGRect?
+
+        views.forEach { view in
+          if !view.isViewableEnough() {
+            return
+          }
+
+          guard let position = view.getPositionOnScreen() else {
+            return
+          }
+
+          if position.minY >= 150 {
+            if mostVisiblePosition == nil {
+              mostVisiblePosition = position
+            }
+
+            if let unwrapped = mostVisiblePosition,
+               position.minY <= unwrapped.minY {
+              mostVisibleView = view
+              mostVisiblePosition = position
+            }
+          }
+        }
+
+        activeView = mostVisibleView
+      }
+
+      if activeView == self.currentlyActiveView {
+        return
+      }
+
+      self.clearActiveView()
+      if let view = activeView {
+        self.setActiveView(view)
+      }
+    }
+  }
+
+  private func clearActiveView() {
+    if let currentlyActiveView = self.currentlyActiveView {
+      currentlyActiveView.setIsCurrentlyActive(isActive: false)
+      self.currentlyActiveView = nil
+    }
+  }
+
+  private func setActiveView(_ view: VisibilityView) {
+    view.setIsCurrentlyActive(isActive: true)
+    self.currentlyActiveView = view
+  }
+}

modules/expo-bluesky-swiss-army/ios/Visibility/VisiblityView.swift

@@ -0,0 +1,69 @@
+import ExpoModulesCore
+
+class VisibilityView: ExpoView {
+  var enabled = false {
+    didSet {
+      if enabled {
+        VisibilityViewManager.shared.removeView(self)
+      }
+    }
+  }
+
+  private let onChangeStatus = EventDispatcher()
+  private var isCurrentlyActiveView = false
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+  }
+
+  public override func willMove(toWindow newWindow: UIWindow?) {
+    super.willMove(toWindow: newWindow)
+
+    if !self.enabled {
+      return
+    }
+
+    if newWindow == nil {
+      VisibilityViewManager.shared.removeView(self)
+    } else {
+      VisibilityViewManager.shared.addView(self)
+    }
+  }
+
+  func setIsCurrentlyActive(isActive: Bool) {
+    if isCurrentlyActiveView == isActive {
+      return
+    }
+    self.isCurrentlyActiveView = isActive
+    self.onChangeStatus([
+      "isActive": isActive
+    ])
+  }
+}
+
+// 🚨 DANGER 🚨
+// These functions need to be called from the main thread. Xcode will warn you if you call one of them
+// off the main thread, so pay attention!
+extension UIView {
+  func getPositionOnScreen() -> CGRect? {
+    if let window = self.window {
+      return self.convert(self.bounds, to: window)
+    }
+    return nil
+  }
+
+  func isViewableEnough() -> Bool {
+    guard let window = self.window else {
+      return false
+    }
+
+    let viewFrameOnScreen = self.convert(self.bounds, to: window)
+    let screenBounds = window.bounds
+    let intersection = viewFrameOnScreen.intersection(screenBounds)
+
+    let viewHeight = viewFrameOnScreen.height
+    let intersectionHeight = intersection.height
+
+    return intersectionHeight >= 0.5 * viewHeight
+  }
+}

modules/expo-bluesky-swiss-army/src/PlatformInfo/index.native.ts

@@ -0,0 +1,20 @@
+import {Platform} from 'react-native'
+import {requireNativeModule} from 'expo-modules-core'
+
+import {AudioCategory} from './types'
+
+const NativeModule = requireNativeModule('ExpoPlatformInfo')
+
+export function getIsReducedMotionEnabled(): boolean {
+  return NativeModule.getIsReducedMotionEnabled()
+}
+
+export function setAudioActive(active: boolean): void {
+  if (Platform.OS !== 'ios') return
+  NativeModule.setAudioActive(active)
+}
+
+export function setAudioCategory(audioCategory: AudioCategory): void {
+  if (Platform.OS !== 'ios') return
+  NativeModule.setAudioCategory(audioCategory)
+}

modules/expo-bluesky-swiss-army/src/PlatformInfo/index.ts

@@ -0,0 +1,25 @@
+import {NotImplementedError} from '../NotImplemented'
+import {AudioCategory} from './types'
+
+export function getIsReducedMotionEnabled(): boolean {
+  throw new NotImplementedError()
+}
+
+/**
+ * Set whether the app's audio should mix with other apps' audio. Will also resume background music playback when `false`
+ * if it was previously playing.
+ * @param mixWithOthers
+ * @see https://developer.apple.com/documentation/avfaudio/avaudiosession/setactiveoptions/1616603-notifyothersondeactivation
+ */
+export function setAudioActive(active: boolean): void {
+  throw new NotImplementedError({active})
+}
+
+/**
+ * Set the audio category for the app.
+ * @param audioCategory
+ * @platform ios
+ */
+export function setAudioCategory(audioCategory: AudioCategory): void {
+  throw new NotImplementedError({audioCategory})
+}

modules/expo-bluesky-swiss-army/src/PlatformInfo/index.web.ts

@@ -0,0 +1,17 @@
+import {NotImplementedError} from '../NotImplemented'
+import {AudioCategory} from './types'
+
+export function getIsReducedMotionEnabled(): boolean {
+  if (typeof window === 'undefined') {
+    return false
+  }
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+export function setAudioActive(active: boolean): void {
+  throw new NotImplementedError({active})
+}
+
+export function setAudioCategory(audioCategory: AudioCategory): void {
+  throw new NotImplementedError({audioCategory})
+}

modules/expo-bluesky-swiss-army/src/PlatformInfo/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Sets the audio session category on iOS. In general, we should only need to use this for the `playback` and `ambient`
+ * categories. This enum however includes other categories that are available in the native API for clarity and
+ * potential future use.
+ * @see https://developer.apple.com/documentation/avfoundation/avaudiosession/category
+ * @platform ios
+ */
+export enum AudioCategory {
+  Ambient = 'AVAudioSessionCategoryAmbient',
+  Playback = 'AVAudioSessionCategoryPlayback',
+  _SoloAmbient = 'AVAudioSessionCategorySoloAmbient',
+  _Record = 'AVAudioSessionCategoryRecord',
+  _PlayAndRecord = 'AVAudioSessionCategoryPlayAndRecord',
+  _MultiRoute = 'AVAudioSessionCategoryMultiRoute',
+}

modules/expo-bluesky-swiss-army/src/VisibilityView/index.native.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
+import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
+
+import {VisibilityViewProps} from './types'
+const NativeView: React.ComponentType<{
+  onChangeStatus: (e: {nativeEvent: {isActive: boolean}}) => void
+  children: React.ReactNode
+  enabled: Boolean
+  style: StyleProp<ViewStyle>
+}> = requireNativeViewManager('ExpoBlueskyVisibilityView')
+
+const NativeModule = requireNativeModule('ExpoBlueskyVisibilityView')
+
+export async function updateActiveViewAsync() {
+  await NativeModule.updateActiveViewAsync()
+}
+
+export default function VisibilityView({
+  children,
+  onChangeStatus: onChangeStatusOuter,
+  enabled,
+}: VisibilityViewProps) {
+  const onChangeStatus = React.useCallback(
+    (e: {nativeEvent: {isActive: boolean}}) => {
+      onChangeStatusOuter(e.nativeEvent.isActive)
+    },
+    [onChangeStatusOuter],
+  )
+
+  return (
+    <NativeView
+      onChangeStatus={onChangeStatus}
+      enabled={enabled}
+      style={{flex: 1}}>
+      {children}
+    </NativeView>
+  )
+}

modules/expo-bluesky-swiss-army/src/VisibilityView/index.tsx

@@ -0,0 +1,10 @@
+import {NotImplementedError} from '../NotImplemented'
+import {VisibilityViewProps} from './types'
+
+export async function updateActiveViewAsync() {
+  throw new NotImplementedError()
+}
+
+export default function VisibilityView({children}: VisibilityViewProps) {
+  return children
+}

modules/expo-bluesky-swiss-army/src/VisibilityView/types.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+export interface VisibilityViewProps {
+  children: React.ReactNode
+  onChangeStatus: (isActive: boolean) => void
+  enabled: boolean
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.90.0",
+  "version": "1.91.2",
   "private": true,
   "engines": {
     "node": ">=18"
@@ -32,7 +32,7 @@
     "lint-native": "swiftlint ./modules && ktlint ./modules",
     "lint-native:fix": "swiftlint --fix ./modules && ktlint --format ./modules",
     "typecheck": "tsc --project ./tsconfig.check.json",
-    "e2e:mock-server": "./jest/dev-infra/with-test-redis-and-db.sh ts-node --project tsconfig.e2e.json __e2e__/mock-server.ts",
+    "e2e:mock-server": "NODE_ENV=development ./jest/dev-infra/with-test-redis-and-db.sh ts-node --project tsconfig.e2e.json __e2e__/mock-server.ts",
     "e2e:metro": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios",
     "e2e:metro-android": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:android",
     "e2e:run": "maestro test __e2e__",
@@ -52,7 +52,7 @@
     "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
   },
   "dependencies": {
-    "@atproto/api": "0.12.25",
+    "@atproto/api": "^0.13.7",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
@@ -68,6 +68,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
+    "@haileyok/bluesky-video": "0.1.10",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
     "@miblanchard/react-native-slider": "^2.3.1",
@@ -84,7 +85,7 @@
     "@segment/analytics-react": "^1.0.0-rc1",
     "@segment/analytics-react-native": "^2.10.1",
     "@segment/sovran-react-native": "^0.4.5",
-    "@sentry/react-native": "5.5.0",
+    "@sentry/react-native": "5.32.0",
     "@tamagui/focus-scope": "^1.84.1",
     "@tanstack/query-async-storage-persister": "^5.25.0",
     "@tanstack/react-query": "^5.8.1",
@@ -123,6 +124,7 @@
     "expo-dev-client": "^4.0.14",
     "expo-device": "~6.0.2",
     "expo-file-system": "^17.0.1",
+    "expo-font": "~12.0.10",
     "expo-haptics": "^13.0.1",
     "expo-image": "~1.12.9",
     "expo-image-manipulator": "^12.0.5",
@@ -139,7 +141,6 @@
     "expo-system-ui": "~3.0.4",
     "expo-task-manager": "~11.8.1",
     "expo-updates": "~0.25.14",
-    "expo-video": "^1.1.10",
     "expo-web-browser": "~13.0.3",
     "fast-text-encoding": "^1.0.6",
     "history": "^5.3.0",
@@ -177,9 +178,10 @@
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.16.2",
     "react-native-get-random-values": "~1.11.0",
-    "react-native-image-crop-picker": "0.40.3",
+    "react-native-image-crop-picker": "0.41.2",
     "react-native-ios-context-menu": "^1.15.3",
     "react-native-keyboard-controller": "^1.12.1",
+    "react-native-mmkv": "^2.12.2",
     "react-native-pager-view": "6.2.3",
     "react-native-picker-select": "^9.1.3",
     "react-native-progress": "bluesky-social/react-native-progress",
@@ -189,7 +191,7 @@
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "~3.31.1",
     "react-native-svg": "^15.3.0",
-    "react-native-uitextview": "^1.1.7",
+    "react-native-uitextview": "^1.3.0",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.2",
     "react-native-view-shot": "^3.8.0",
@@ -199,8 +201,6 @@
     "react-responsive": "^9.0.2",
     "react-textarea-autosize": "^8.5.3",
     "rn-fetch-blob": "^0.12.0",
-    "rn-tourguide": "bluesky-social/rn-tourguide",
-    "sentry-expo": "~7.0.1",
     "statsig-react-native-expo": "^4.6.1",
     "tippy.js": "^6.3.7",
     "tlds": "^1.234.0",
@@ -208,7 +208,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/dev-env": "^0.3.5",
+    "@atproto/dev-env": "^0.3.39",
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
@@ -270,7 +270,7 @@
     "react-scripts": "^5.0.1",
     "react-test-renderer": "18.2.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.10.1",

patches/@atproto+lexicon+0.4.0.patch

@@ -1,28 +0,0 @@
-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];

patches/@sentry+react-native+5.32.0.patch

@@ -0,0 +1,36 @@
+diff --git a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
+index 7e0b4cd..177454c 100644
+--- a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
++++ b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
+@@ -3,6 +3,8 @@ import { LogBox } from 'react-native';
+  * This is a workaround for using fetch on RN, this is a known issue in react-native and only generates a warning.
+  */
+ export function ignoreRequireCycleLogs() {
+-    LogBox.ignoreLogs(['Require cycle:']);
++    try {
++        LogBox.ignoreLogs(['Require cycle:']);
++    } catch (e) {}
+ }
+ //# sourceMappingURL=ignorerequirecyclelogs.js.map
+\ No newline at end of file
+diff --git a/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js b/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
+index 0f244f2..ae7dfb3 100755
+--- a/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
++++ b/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
+@@ -174,6 +174,7 @@ if (!outputDir) {
+   process.exit(1);
+ }
+
++const otherArgs = process.argv.slice(3);
+ const files = getAssetPathsSync(outputDir);
+ const groupedAssets = groupAssets(files);
+
+@@ -195,7 +196,7 @@ for (const [assetGroupName, assets] of Object.entries(groupedAssets)) {
+
+   const isHermes = assets.find(asset => asset.endsWith('.hbc'));
+   const windowsCallback = process.platform === "win32" ? 'node ' : '';
+-  execSync(`${windowsCallback}${sentryCliBin} sourcemaps upload ${isHermes ? '--debug-id-reference' : ''} ${assets.join(' ')}`, {
++  execSync(`${windowsCallback}${sentryCliBin} sourcemaps upload ${isHermes ? '--debug-id-reference' : ''} ${assets.join(' ')} ${otherArgs.join(' ')}`, {
+     env: {
+       ...process.env,
+       [SENTRY_PROJECT]: sentryProject,

patches/@sentry+react-native+5.5.0.patch

@@ -1,15 +0,0 @@
-diff --git a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
-index 7e0b4cd..177454c 100644
---- a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
-+++ b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
-@@ -3,6 +3,8 @@ import { LogBox } from 'react-native';
-  * This is a workaround for using fetch on RN, this is a known issue in react-native and only generates a warning.
-  */
- export function ignoreRequireCycleLogs() {
--    LogBox.ignoreLogs(['Require cycle:']);
-+    try {
-+        LogBox.ignoreLogs(['Require cycle:']);
-+    } catch (e) {}
- }
- //# sourceMappingURL=ignorerequirecyclelogs.js.map
-\ No newline at end of file

patches/expo-video+1.1.10.patch

@@ -1,20 +0,0 @@
---- a/node_modules/expo-video/android/src/main/java/expo/modules/video/PlayerViewExtension.kt
-+++ b/node_modules/expo-video/android/src/main/java/expo/modules/video/PlayerViewExtension.kt
-@@ -11,6 +11,7 @@ internal fun PlayerView.applyRequiresLinearPlayback(requireLinearPlayback: Boole
-   setShowPreviousButton(!requireLinearPlayback)
-   setShowNextButton(!requireLinearPlayback)
-   setTimeBarInteractive(requireLinearPlayback)
-+  setShowSubtitleButton(true)
- }
-
- @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
-@@ -27,7 +28,8 @@ internal fun PlayerView.setTimeBarInteractive(interactive: Boolean) {
-
- @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
- internal fun PlayerView.setFullscreenButtonVisibility(visible: Boolean) {
--  val fullscreenButton = findViewById<android.widget.ImageButton>(androidx.media3.ui.R.id.exo_fullscreen)
-+  val fullscreenButton =
-+    findViewById<android.widget.ImageButton>(androidx.media3.ui.R.id.exo_fullscreen)
-   fullscreenButton?.visibility = if (visible) {
-     android.view.View.VISIBLE
-   } else {

patches/react-native-reanimated+3.11.0.patch

@@ -207,31 +207,3 @@ index 88b3fdf..2488ebc 100644
 
          const { layout, entering, exiting, sharedTransitionTag } = this.props;
          if (
-diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/index.js b/node_modules/react-native-reanimated/lib/module/reanimated2/index.js
-index ac9be5d..86d4605 100644
---- a/node_modules/react-native-reanimated/lib/module/reanimated2/index.js
-+++ b/node_modules/react-native-reanimated/lib/module/reanimated2/index.js
-@@ -47,4 +47,5 @@ export { LayoutAnimationConfig } from './component/LayoutAnimationConfig';
- export { PerformanceMonitor } from './component/PerformanceMonitor';
- export { startMapper, stopMapper } from './mappers';
- export { startScreenTransition, finishScreenTransition, ScreenTransition } from './screenTransition';
-+export { isReducedMotion } from './PlatformChecker';
- //# sourceMappingURL=index.js.map
-diff --git a/node_modules/react-native-reanimated/lib/typescript/reanimated2/index.d.ts b/node_modules/react-native-reanimated/lib/typescript/reanimated2/index.d.ts
-index f01dc57..161ef22 100644
---- a/node_modules/react-native-reanimated/lib/typescript/reanimated2/index.d.ts
-+++ b/node_modules/react-native-reanimated/lib/typescript/reanimated2/index.d.ts
-@@ -36,3 +36,4 @@ export type { FlatListPropsWithLayout } from './component/FlatList';
- export { startMapper, stopMapper } from './mappers';
- export { startScreenTransition, finishScreenTransition, ScreenTransition, } from './screenTransition';
- export type { AnimatedScreenTransition, GoBackGesture, ScreenTransitionConfig, } from './screenTransition';
-+export { isReducedMotion } from './PlatformChecker';
-diff --git a/node_modules/react-native-reanimated/src/reanimated2/index.ts b/node_modules/react-native-reanimated/src/reanimated2/index.ts
-index 5885fa1..a3c693f 100644
---- a/node_modules/react-native-reanimated/src/reanimated2/index.ts
-+++ b/node_modules/react-native-reanimated/src/reanimated2/index.ts
-@@ -284,3 +284,4 @@ export type {
-   GoBackGesture,
-   ScreenTransitionConfig,
- } from './screenTransition';
-+export { isReducedMotion } from './PlatformChecker';

plugins/starterPackAppClipExtension/withXcodeTarget.js

@@ -57,7 +57,7 @@ const withXcodeTarget = (config, {targetName}) => {
           buildSettingsObj.SWIFT_VERSION = '5.0'
           buildSettingsObj.TARGETED_DEVICE_FAMILY = `"1"`
           buildSettingsObj.DEVELOPMENT_TEAM = 'B3LX46C5HS'
-          buildSettingsObj.IPHONEOS_DEPLOYMENT_TARGET = '14.0'
+          buildSettingsObj.IPHONEOS_DEPLOYMENT_TARGET = '15.1'
           buildSettingsObj.ASSETCATALOG_COMPILER_APPICON_NAME = 'AppIcon'
         }
       }

postHooks/uploadSentrySourcemapsPostHook.js

@@ -0,0 +1,34 @@
+const exec = require('child_process').execSync
+
+const SENTRY_AUTH_TOKEN = process.env.SENTRY_AUTH_TOKEN
+
+module.exports = ({config}) => {
+  if (!SENTRY_AUTH_TOKEN) {
+    console.log(
+      'SENTRY_AUTH_TOKEN environment variable must be set to upload sourcemaps. Skipping.',
+    )
+    return
+  }
+
+  const org = config.organization
+  const project = config.project
+  const release = config.release
+  const dist = config.dist
+
+  if (!org || !project || !release || !dist) {
+    console.log(
+      '"organization", "project", "release", and "dist" must be set in the hook config to upload sourcemaps. Skipping.',
+    )
+    return
+  }
+
+  try {
+    console.log('Uploading sourcemaps to Sentry...')
+    exec(
+      `node node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps dist --url https://sentry.io/  -o ${org} -p ${project} -r ${release} -d ${dist}`,
+    )
+    console.log('Sourcemaps uploaded to Sentry.')
+  } catch (e) {
+    console.error('Error uploading sourcemaps to Sentry:', e)
+  }
+}

scripts/post-web-build.js

@@ -2,7 +2,6 @@ const path = require('path')
 const fs = require('fs')
 
 const projectRoot = path.join(__dirname, '..')
-const webBuildJs = path.join(projectRoot, 'web-build', 'static', 'js')
 const templateFile = path.join(
   projectRoot,
   'bskyweb',
@@ -10,18 +9,18 @@ const templateFile = path.join(
   'scripts.html',
 )
 
-const jsFiles = fs.readdirSync(webBuildJs).filter(name => name.endsWith('.js'))
-jsFiles.sort((a, b) => {
-  // make sure main is written last
-  if (a.startsWith('main')) return 1
-  if (b.startsWith('main')) return -1
-  return a.localeCompare(b)
-})
+const {entrypoints} = require(path.join(
+  projectRoot,
+  'web-build/asset-manifest.json',
+))
 
-console.log(`Found ${jsFiles.length} js files in web-build`)
+console.log(`Found ${entrypoints.length} entrypoints`)
 console.log(`Writing ${templateFile}`)
 
-const outputFile = jsFiles
-  .map(name => `<script defer="defer" src="/static/js/${name}"></script>`)
+const outputFile = entrypoints
+  .map(name => {
+    const file = path.basename(name)
+    return `<script defer="defer" src="/static/js/${file}"></script>`
+  })
   .join('\n')
 fs.writeFileSync(templateFile, outputFile)

src/App.native.tsx

@@ -50,16 +50,18 @@ import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
 import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
+import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
-import {ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoContext'
+import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
 import {Shell} from '#/view/shell'
-import {ThemeProvider as Alf} from '#/alf'
+import {ThemeProvider as Alf, useFonts} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
+import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
 import {Splash} from '#/Splash'
-import {Provider as TourProvider} from '#/tours'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
 
 SplashScreen.preventAutoHideAsync()
@@ -104,63 +106,60 @@ function InnerApp() {
   }, [_])
 
   return (
-    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+    <StatsigProvider
+      // Resets the entire tree below when it changes:
+      key={currentAccount?.did}>
       <Alf theme={theme}>
         <ThemeProvider theme={theme}>
           <Splash isReady={isReady && hasCheckedReferrer}>
-            <ActiveVideoProvider>
-              <RootSiblingParent>
-                <React.Fragment
-                  // Resets the entire tree below when it changes:
-                  key={currentAccount?.did}>
-                  <QueryProvider currentDid={currentAccount?.did}>
-                    <StatsigProvider>
-                      <MessagesProvider>
-                        {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                        <LabelDefsProvider>
-                          <ModerationOptsProvider>
-                            <LoggedOutViewProvider>
-                              <SelectedFeedProvider>
-                                <UnreadNotifsProvider>
-                                  <BackgroundNotificationPreferencesProvider>
-                                    <MutedThreadsProvider>
-                                      <TourProvider>
-                                        <ProgressGuideProvider>
-                                          <GestureHandlerRootView
-                                            style={s.h100pct}>
-                                            <TestCtrls />
-                                            <Shell />
-                                          </GestureHandlerRootView>
-                                        </ProgressGuideProvider>
-                                      </TourProvider>
-                                    </MutedThreadsProvider>
-                                  </BackgroundNotificationPreferencesProvider>
-                                </UnreadNotifsProvider>
-                              </SelectedFeedProvider>
-                            </LoggedOutViewProvider>
-                          </ModerationOptsProvider>
-                        </LabelDefsProvider>
-                      </MessagesProvider>
-                    </StatsigProvider>
-                  </QueryProvider>
-                </React.Fragment>
-              </RootSiblingParent>
-            </ActiveVideoProvider>
+            <RootSiblingParent>
+              <VideoVolumeProvider>
+                <QueryProvider currentDid={currentAccount?.did}>
+                  <MessagesProvider>
+                    {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                    <LabelDefsProvider>
+                      <ModerationOptsProvider>
+                        <LoggedOutViewProvider>
+                          <SelectedFeedProvider>
+                            <HiddenRepliesProvider>
+                              <UnreadNotifsProvider>
+                                <BackgroundNotificationPreferencesProvider>
+                                  <MutedThreadsProvider>
+                                    <ProgressGuideProvider>
+                                      <GestureHandlerRootView style={s.h100pct}>
+                                        <TestCtrls />
+                                        <Shell />
+                                        <NuxDialogs />
+                                      </GestureHandlerRootView>
+                                    </ProgressGuideProvider>
+                                  </MutedThreadsProvider>
+                                </BackgroundNotificationPreferencesProvider>
+                              </UnreadNotifsProvider>
+                            </HiddenRepliesProvider>
+                          </SelectedFeedProvider>
+                        </LoggedOutViewProvider>
+                      </ModerationOptsProvider>
+                    </LabelDefsProvider>
+                  </MessagesProvider>
+                </QueryProvider>
+              </VideoVolumeProvider>
+            </RootSiblingParent>
           </Splash>
         </ThemeProvider>
       </Alf>
-    </SafeAreaProvider>
+    </StatsigProvider>
   )
 }
 
 function App() {
   const [isReady, setReady] = useState(false)
+  const [loaded] = useFonts()
 
   React.useEffect(() => {
     initPersistedState().then(() => setReady(true))
   }, [])
 
-  if (!isReady) {
+  if (!isReady || !loaded) {
     return null
   }
 
@@ -172,25 +171,30 @@ function App() {
     <A11yProvider>
       <KeyboardProvider enabled={false} statusBarTranslucent={true}>
         <SessionProvider>
-          <ShellStateProvider>
-            <PrefsStateProvider>
-              <InvitesStateProvider>
-                <ModalStateProvider>
-                  <DialogStateProvider>
-                    <LightboxStateProvider>
-                      <I18nProvider>
+          <PrefsStateProvider>
+            <I18nProvider>
+              <ShellStateProvider>
+                <InvitesStateProvider>
+                  <ModalStateProvider>
+                    <DialogStateProvider>
+                      <LightboxStateProvider>
                         <PortalProvider>
                           <StarterPackProvider>
-                            <InnerApp />
+                            <SafeAreaProvider
+                              initialMetrics={initialWindowMetrics}>
+                              <IntentDialogProvider>
+                                <InnerApp />
+                              </IntentDialogProvider>
+                            </SafeAreaProvider>
                           </StarterPackProvider>
                         </PortalProvider>
-                      </I18nProvider>
-                    </LightboxStateProvider>
-                  </DialogStateProvider>
-                </ModalStateProvider>
-              </InvitesStateProvider>
-            </PrefsStateProvider>
-          </ShellStateProvider>
+                      </LightboxStateProvider>
+                    </DialogStateProvider>
+                  </ModalStateProvider>
+                </InvitesStateProvider>
+              </ShellStateProvider>
+            </I18nProvider>
+          </PrefsStateProvider>
         </SessionProvider>
       </KeyboardProvider>
     </A11yProvider>

src/App.web.tsx

@@ -35,19 +35,23 @@ import {
 } from '#/state/session'
 import {readLastActiveAccount} from '#/state/session/util'
 import {Provider as ShellStateProvider} from '#/state/shell'
+import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
 import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
 import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
-import {ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoContext'
+import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
+import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoWebContext'
+import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
 import {ToastContainer} from '#/view/com/util/Toast.web'
 import {Shell} from '#/view/shell/index'
-import {ThemeProvider as Alf} from '#/alf'
+import {ThemeProvider as Alf, useFonts} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
+import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
-import {Provider as TourProvider} from '#/tours'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
 
 function InnerApp() {
@@ -59,6 +63,8 @@ function InnerApp() {
   useIntentHandler()
   const hasCheckedReferrer = useStarterPackEntry()
 
+  useComposerKeyboardShortcut()
+
   // init
   useEffect(() => {
     async function onLaunch(account?: SessionAccount) {
@@ -90,59 +96,61 @@ function InnerApp() {
 
   return (
     <KeyboardProvider enabled={false}>
-      <Alf theme={theme}>
-        <ThemeProvider theme={theme}>
-          <RootSiblingParent>
-            <ActiveVideoProvider>
-              <React.Fragment
-                // Resets the entire tree below when it changes:
-                key={currentAccount?.did}>
-                <QueryProvider currentDid={currentAccount?.did}>
-                  <StatsigProvider>
+      <StatsigProvider
+        // Resets the entire tree below when it changes:
+        key={currentAccount?.did}>
+        <Alf theme={theme}>
+          <ThemeProvider theme={theme}>
+            <RootSiblingParent>
+              <VideoVolumeProvider>
+                <ActiveVideoProvider>
+                  <QueryProvider currentDid={currentAccount?.did}>
                     <MessagesProvider>
                       {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
                       <LabelDefsProvider>
                         <ModerationOptsProvider>
                           <LoggedOutViewProvider>
                             <SelectedFeedProvider>
-                              <UnreadNotifsProvider>
-                                <BackgroundNotificationPreferencesProvider>
-                                  <MutedThreadsProvider>
-                                    <SafeAreaProvider>
-                                      <TourProvider>
+                              <HiddenRepliesProvider>
+                                <UnreadNotifsProvider>
+                                  <BackgroundNotificationPreferencesProvider>
+                                    <MutedThreadsProvider>
+                                      <SafeAreaProvider>
                                         <ProgressGuideProvider>
                                           <Shell />
+                                          <NuxDialogs />
                                         </ProgressGuideProvider>
-                                      </TourProvider>
-                                    </SafeAreaProvider>
-                                  </MutedThreadsProvider>
-                                </BackgroundNotificationPreferencesProvider>
-                              </UnreadNotifsProvider>
+                                      </SafeAreaProvider>
+                                    </MutedThreadsProvider>
+                                  </BackgroundNotificationPreferencesProvider>
+                                </UnreadNotifsProvider>
+                              </HiddenRepliesProvider>
                             </SelectedFeedProvider>
                           </LoggedOutViewProvider>
                         </ModerationOptsProvider>
                       </LabelDefsProvider>
                     </MessagesProvider>
-                  </StatsigProvider>
-                </QueryProvider>
-              </React.Fragment>
-              <ToastContainer />
-            </ActiveVideoProvider>
-          </RootSiblingParent>
-        </ThemeProvider>
-      </Alf>
+                  </QueryProvider>
+                  <ToastContainer />
+                </ActiveVideoProvider>
+              </VideoVolumeProvider>
+            </RootSiblingParent>
+          </ThemeProvider>
+        </Alf>
+      </StatsigProvider>
     </KeyboardProvider>
   )
 }
 
 function App() {
   const [isReady, setReady] = useState(false)
+  const [loaded] = useFonts()
 
   React.useEffect(() => {
     initPersistedState().then(() => setReady(true))
   }, [])
 
-  if (!isReady) {
+  if (!isReady || !loaded) {
     return null
   }
 
@@ -153,25 +161,27 @@ function App() {
   return (
     <A11yProvider>
       <SessionProvider>
-        <ShellStateProvider>
-          <PrefsStateProvider>
-            <InvitesStateProvider>
-              <ModalStateProvider>
-                <DialogStateProvider>
-                  <LightboxStateProvider>
-                    <I18nProvider>
+        <PrefsStateProvider>
+          <I18nProvider>
+            <ShellStateProvider>
+              <InvitesStateProvider>
+                <ModalStateProvider>
+                  <DialogStateProvider>
+                    <LightboxStateProvider>
                       <PortalProvider>
                         <StarterPackProvider>
-                          <InnerApp />
+                          <IntentDialogProvider>
+                            <InnerApp />
+                          </IntentDialogProvider>
                         </StarterPackProvider>
                       </PortalProvider>
-                    </I18nProvider>
-                  </LightboxStateProvider>
-                </DialogStateProvider>
-              </ModalStateProvider>
-            </InvitesStateProvider>
-          </PrefsStateProvider>
-        </ShellStateProvider>
+                    </LightboxStateProvider>
+                  </DialogStateProvider>
+                </ModalStateProvider>
+              </InvitesStateProvider>
+            </ShellStateProvider>
+          </I18nProvider>
+        </PrefsStateProvider>
       </SessionProvider>
     </A11yProvider>
   )

src/Navigation.tsx

@@ -15,10 +15,12 @@ import {
   StackActions,
 } from '@react-navigation/native'
 
-import {timeout} from 'lib/async/timeout'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {usePalette} from 'lib/hooks/usePalette'
-import {buildStateObject} from 'lib/routes/helpers'
+import {init as initAnalytics} from '#/lib/analytics/analytics'
+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 {
   AllNavigatorParams,
   BottomTabNavigatorParams,
@@ -28,72 +30,72 @@ import {
   MyProfileTabNavigatorParams,
   NotificationsTabNavigatorParams,
   SearchTabNavigatorParams,
-} from 'lib/routes/types'
-import {RouteParams, State} from 'lib/routes/types'
-import {bskyTitle} from 'lib/strings/headings'
-import {isAndroid, isNative, isWeb} from 'platform/detection'
+} from '#/lib/routes/types'
+import {RouteParams, State} from '#/lib/routes/types'
+import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig'
+import {bskyTitle} from '#/lib/strings/headings'
+import {isAndroid, isNative, isWeb} from '#/platform/detection'
+import {useModalControls} from '#/state/modals'
+import {useUnreadNotifications} from '#/state/queries/notifications/unread'
+import {useSession} from '#/state/session'
+import {
+  shouldRequestEmailConfirmation,
+  snoozeEmailConfirmationPrompt,
+} from '#/state/shell/reminders'
+import {AccessibilitySettingsScreen} from '#/view/screens/AccessibilitySettings'
+import {AppPasswords} from '#/view/screens/AppPasswords'
+import {CommunityGuidelinesScreen} from '#/view/screens/CommunityGuidelines'
+import {CopyrightPolicyScreen} from '#/view/screens/CopyrightPolicy'
+import {DebugModScreen} from '#/view/screens/DebugMod'
+import {FeedsScreen} from '#/view/screens/Feeds'
+import {HomeScreen} from '#/view/screens/Home'
+import {LanguageSettingsScreen} from '#/view/screens/LanguageSettings'
+import {ListsScreen} from '#/view/screens/Lists'
+import {LogScreen} from '#/view/screens/Log'
+import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts'
+import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists'
+import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts'
+import {NotFoundScreen} from '#/view/screens/NotFound'
+import {NotificationsScreen} from '#/view/screens/Notifications'
+import {NotificationsSettingsScreen} from '#/view/screens/NotificationsSettings'
+import {PostThreadScreen} from '#/view/screens/PostThread'
 import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds'
-import {AppPasswords} from 'view/screens/AppPasswords'
-import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts'
-import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts'
-import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed'
-import {PreferencesThreads} from 'view/screens/PreferencesThreads'
-import {SavedFeeds} from 'view/screens/SavedFeeds'
+import {PreferencesFollowingFeed} from '#/view/screens/PreferencesFollowingFeed'
+import {PreferencesThreads} from '#/view/screens/PreferencesThreads'
+import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
+import {ProfileScreen} from '#/view/screens/Profile'
+import {ProfileFeedScreen} from '#/view/screens/ProfileFeed'
+import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
+import {ProfileFollowersScreen} from '#/view/screens/ProfileFollowers'
+import {ProfileFollowsScreen} from '#/view/screens/ProfileFollows'
+import {ProfileListScreen} from '#/view/screens/ProfileList'
+import {SavedFeeds} from '#/view/screens/SavedFeeds'
+import {SearchScreen} from '#/view/screens/Search'
+import {SettingsScreen} from '#/view/screens/Settings'
+import {Storybook} from '#/view/screens/Storybook'
+import {SupportScreen} from '#/view/screens/Support'
+import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
+import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
+import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
 import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen'
 import HashtagScreen from '#/screens/Hashtag'
+import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
+import {MessagesScreen} from '#/screens/Messages/List'
+import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {ModerationScreen} from '#/screens/Moderation'
+import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
+import {PostQuotesScreen} from '#/screens/Post/PostQuotes'
+import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy'
 import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
+import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
 import {
   StarterPackScreen,
   StarterPackScreenShort,
 } from '#/screens/StarterPack/StarterPackScreen'
 import {Wizard} from '#/screens/StarterPack/Wizard'
+import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
-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 {MessagesScreen} 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'
-import {
-  shouldRequestEmailConfirmation,
-  snoozeEmailConfirmationPrompt,
-} from './state/shell/reminders'
-import {AccessibilitySettingsScreen} from './view/screens/AccessibilitySettings'
-import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
-import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
-import {DebugModScreen} from './view/screens/DebugMod'
-import {FeedsScreen} from './view/screens/Feeds'
-import {HomeScreen} from './view/screens/Home'
-import {LanguageSettingsScreen} from './view/screens/LanguageSettings'
-import {ListsScreen} from './view/screens/Lists'
-import {LogScreen} from './view/screens/Log'
-import {ModerationModlistsScreen} from './view/screens/ModerationModlists'
-import {NotFoundScreen} from './view/screens/NotFound'
-import {NotificationsScreen} from './view/screens/Notifications'
-import {NotificationsSettingsScreen} from './view/screens/NotificationsSettings'
-import {PostLikedByScreen} from './view/screens/PostLikedBy'
-import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
-import {PostThreadScreen} from './view/screens/PostThread'
-import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
-import {ProfileScreen} from './view/screens/Profile'
-import {ProfileFeedScreen} from './view/screens/ProfileFeed'
-import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy'
-import {ProfileFollowersScreen} from './view/screens/ProfileFollowers'
-import {ProfileFollowsScreen} from './view/screens/ProfileFollows'
-import {ProfileListScreen} from './view/screens/ProfileList'
-import {SearchScreen} from './view/screens/Search'
-import {SettingsScreen} from './view/screens/Settings'
-import {Storybook} from './view/screens/Storybook'
-import {SupportScreen} from './view/screens/Support'
-import {TermsOfServiceScreen} from './view/screens/TermsOfService'
-import {BottomBar} from './view/shell/bottom-bar/BottomBar'
-import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -211,6 +213,13 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
           title: title(msg`Post by @${route.params.name}`),
         })}
       />
+      <Stack.Screen
+        name="PostQuotes"
+        getComponent={() => PostQuotesScreen}
+        options={({route}) => ({
+          title: title(msg`Post by @${route.params.name}`),
+        })}
+      />
       <Stack.Screen
         name="ProfileFeed"
         getComponent={() => ProfileFeedScreen}
@@ -310,6 +319,14 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
           requireAuth: true,
         }}
       />
+      <Stack.Screen
+        name="AppearanceSettings"
+        getComponent={() => AppearanceSettingsScreen}
+        options={{
+          title: title(msg`Appearance Settings`),
+          requireAuth: true,
+        }}
+      />
       <Stack.Screen
         name="Hashtag"
         getComponent={() => HashtagScreen}
@@ -473,6 +490,7 @@ function MyProfileTabNavigator() {
         getComponent={() => ProfileScreen}
         initialParams={{
           name: 'me',
+          hideBackButton: true,
         }}
       />
       {commonScreens(MyProfileTab as typeof HomeTab)}
@@ -643,16 +661,15 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
       linking={LINKING}
       theme={theme}
       onStateChange={() => {
-        logEvent('router:navigate:sampled', {
-          from: prevLoggedRouteName.current,
-        })
-        prevLoggedRouteName.current = getCurrentRouteName()
+        const routeName = getCurrentRouteName()
+        if (routeName === 'Notifications') {
+          logEvent('router:navigate:notifications:sampled', {})
+        }
       }}
       onReady={() => {
         attachRouteToLogEvents(getCurrentRouteName)
         logModuleInitTime()
         onReady()
-        logEvent('router:navigate:sampled', {})
       }}>
       {children}
     </NavigationContainer>

src/alf/atoms.ts

@@ -1,9 +1,14 @@
-import {Platform, StyleSheet} from 'react-native'
+import {Platform, StyleSheet, ViewStyle} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
 import {native, web} from '#/alf/util/platform'
 
 export const atoms = {
+  debug: {
+    borderColor: 'red',
+    borderWidth: 1,
+  },
+
   /*
    * Positioning
    */
@@ -55,6 +60,19 @@ export const atoms = {
     height: '100vh',
   }),
 
+  /**
+   * Used for the outermost components on screens, to ensure that they can fill
+   * the screen and extend beyond.
+   */
+  util_screen_outer: [
+    web({
+      minHeight: '100vh',
+    }),
+    native({
+      height: '100%',
+    }),
+  ] as ViewStyle,
+
   /*
    * Theme-independent bg colors
    */
@@ -207,43 +225,43 @@ export const atoms = {
   },
   text_2xs: {
     fontSize: tokens.fontSize._2xs,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_xs: {
     fontSize: tokens.fontSize.xs,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_sm: {
     fontSize: tokens.fontSize.sm,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_md: {
     fontSize: tokens.fontSize.md,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_lg: {
     fontSize: tokens.fontSize.lg,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_xl: {
     fontSize: tokens.fontSize.xl,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_2xl: {
     fontSize: tokens.fontSize._2xl,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_3xl: {
     fontSize: tokens.fontSize._3xl,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_4xl: {
     fontSize: tokens.fontSize._4xl,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   text_5xl: {
     fontSize: tokens.fontSize._5xl,
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   leading_tight: {
     lineHeight: 1.15,
@@ -255,10 +273,7 @@ export const atoms = {
     lineHeight: 1.5,
   },
   tracking_normal: {
-    letterSpacing: 0,
-  },
-  tracking_wide: {
-    letterSpacing: 0.25,
+    letterSpacing: tokens.TRACKING,
   },
   font_normal: {
     fontWeight: tokens.fontWeight.normal,
@@ -853,6 +868,7 @@ export const atoms = {
   mr_auto: {
     marginRight: 'auto',
   },
+
   /*
    * Pointer events & user select
    */
@@ -871,6 +887,7 @@ export const atoms = {
   user_select_all: {
     userSelect: 'all',
   },
+
   /*
    * Text decoration
    */
@@ -880,4 +897,11 @@ export const atoms = {
   strike_through: {
     textDecorationLine: 'line-through',
   },
+
+  /*
+   * Display
+   */
+  hidden: {
+    display: 'none',
+  },
 } as const

src/alf/fonts.ts

@@ -0,0 +1,111 @@
+import {useFonts as defaultUseFonts} from 'expo-font'
+
+import {isNative, isWeb} from '#/platform/detection'
+import {Device, device} from '#/storage'
+
+const FAMILIES = `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif`
+
+const factor = 0.0625 // 1 - (15/16)
+const fontScaleMultipliers: Record<Device['fontScale'], number> = {
+  '-2': 1 - factor * 3,
+  '-1': 1 - factor * 2,
+  '0': 1 - factor * 1, // default
+  '1': 1,
+  '2': 1 + factor * 1,
+}
+
+export function computeFontScaleMultiplier(scale: Device['fontScale']) {
+  return fontScaleMultipliers[scale]
+}
+
+export function getFontScale() {
+  return device.get(['fontScale']) ?? '0'
+}
+
+export function setFontScale(fontScale: Device['fontScale']) {
+  device.set(['fontScale'], fontScale)
+}
+
+export function getFontFamily() {
+  return device.get(['fontFamily']) || 'theme'
+}
+
+export function setFontFamily(fontFamily: Device['fontFamily']) {
+  device.set(['fontFamily'], fontFamily)
+}
+
+/*
+ * Unused fonts are commented out, but the files are there if we need them.
+ */
+export function useFonts() {
+  /**
+   * For native, the `expo-font` config plugin embeds the fonts in the
+   * application binary. But `expo-font` isn't supported on web, so we fall
+   * back to async loading here.
+   */
+  if (isNative) return [true, null]
+  return defaultUseFonts({
+    // 'Inter-Thin': require('../../assets/fonts/inter/Inter-Thin.otf'),
+    // 'Inter-ThinItalic': require('../../assets/fonts/inter/Inter-ThinItalic.otf'),
+    // 'Inter-ExtraLight': require('../../assets/fonts/inter/Inter-ExtraLight.otf'),
+    // 'Inter-ExtraLightItalic': require('../../assets/fonts/inter/Inter-ExtraLightItalic.otf'),
+    // 'Inter-Light': require('../../assets/fonts/inter/Inter-Light.otf'),
+    // 'Inter-LightItalic': require('../../assets/fonts/inter/Inter-LightItalic.otf'),
+    'Inter-Regular': require('../../assets/fonts/inter/Inter-Regular.otf'),
+    'Inter-Italic': require('../../assets/fonts/inter/Inter-Italic.otf'),
+    'Inter-Medium': require('../../assets/fonts/inter/Inter-Medium.otf'),
+    'Inter-MediumItalic': require('../../assets/fonts/inter/Inter-MediumItalic.otf'),
+    'Inter-SemiBold': require('../../assets/fonts/inter/Inter-SemiBold.otf'),
+    'Inter-SemiBoldItalic': require('../../assets/fonts/inter/Inter-SemiBoldItalic.otf'),
+    'Inter-Bold': require('../../assets/fonts/inter/Inter-Bold.otf'),
+    'Inter-BoldItalic': require('../../assets/fonts/inter/Inter-BoldItalic.otf'),
+    'Inter-ExtraBold': require('../../assets/fonts/inter/Inter-ExtraBold.otf'),
+    'Inter-ExtraBoldItalic': require('../../assets/fonts/inter/Inter-ExtraBoldItalic.otf'),
+    'Inter-Black': require('../../assets/fonts/inter/Inter-Black.otf'),
+    'Inter-BlackItalic': require('../../assets/fonts/inter/Inter-BlackItalic.otf'),
+  })
+}
+
+/*
+ * Unused fonts are commented out, but the files are there if we need them.
+ */
+export function applyFonts(
+  style: Record<string, any>,
+  fontFamily: 'system' | 'theme',
+) {
+  if (fontFamily === 'theme') {
+    style.fontFamily =
+      {
+        // '100': 'Inter-Thin',
+        // '200': 'Inter-ExtraLight',
+        // '300': 'Inter-Light',
+        '100': 'Inter-Regular',
+        '200': 'Inter-Regular',
+        '300': 'Inter-Regular',
+        '400': 'Inter-Regular',
+        '500': 'Inter-Medium',
+        '600': 'Inter-SemiBold',
+        '700': 'Inter-Bold',
+        '800': 'Inter-ExtraBold',
+        '900': 'Inter-Black',
+      }[style.fontWeight as string] || 'Inter-Regular'
+
+    if (style.fontStyle === 'italic') {
+      if (style.fontFamily === 'Inter-Regular') {
+        style.fontFamily = 'Inter-Italic'
+      } else {
+        style.fontFamily += 'Italic'
+      }
+    }
+
+    // fallback families only supported on web
+    if (isWeb) {
+      style.fontFamily += `, ${FAMILIES}`
+    }
+  } else {
+    // fallback families only supported on web
+    if (isWeb) {
+      style.fontFamily = style.fontFamily || FAMILIES
+    }
+  }
+}

src/alf/index.tsx

@@ -1,69 +1,98 @@
 import React from 'react'
-import {Dimensions} from 'react-native'
+import {useMediaQuery} from 'react-responsive'
 
+import {
+  computeFontScaleMultiplier,
+  getFontFamily,
+  getFontScale,
+  setFontFamily as persistFontFamily,
+  setFontScale as persistFontScale,
+} from '#/alf/fonts'
 import {createThemes, defaultTheme} from '#/alf/themes'
 import {Theme, ThemeName} from '#/alf/types'
 import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
+import {Device} from '#/storage'
 
 export {atoms} from '#/alf/atoms'
+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'
 
-type BreakpointName = keyof typeof breakpoints
-
-/*
- * Breakpoints
- */
-const breakpoints: {
-  [key: string]: number
-} = {
-  gtPhone: 500,
-  gtMobile: 800,
-  gtTablet: 1300,
-}
-function getActiveBreakpoints({width}: {width: number}) {
-  const active: (keyof typeof breakpoints)[] = Object.keys(breakpoints).filter(
-    breakpoint => width >= breakpoints[breakpoint],
-  )
-
-  return {
-    active: active[active.length - 1],
-    gtPhone: active.includes('gtPhone'),
-    gtMobile: active.includes('gtMobile'),
-    gtTablet: active.includes('gtTablet'),
+export type Alf = {
+  themeName: ThemeName
+  theme: Theme
+  themes: ReturnType<typeof createThemes>
+  fonts: {
+    scale: Exclude<Device['fontScale'], undefined>
+    scaleMultiplier: number
+    family: Device['fontFamily']
+    setFontScale: (fontScale: Exclude<Device['fontScale'], undefined>) => void
+    setFontFamily: (fontFamily: Device['fontFamily']) => void
   }
+  /**
+   * Feature flags or other gated options
+   */
+  flags: {}
 }
 
 /*
  * Context
  */
-export const Context = React.createContext<{
-  themeName: ThemeName
-  theme: Theme
-  breakpoints: {
-    active: BreakpointName | undefined
-    gtPhone: boolean
-    gtMobile: boolean
-    gtTablet: boolean
-  }
-}>({
+export const Context = React.createContext<Alf>({
   themeName: 'light',
   theme: defaultTheme,
-  breakpoints: {
-    active: undefined,
-    gtPhone: false,
-    gtMobile: false,
-    gtTablet: false,
+  themes: createThemes({
+    hues: {
+      primary: BLUE_HUE,
+      negative: RED_HUE,
+      positive: GREEN_HUE,
+    },
+  }),
+  fonts: {
+    scale: getFontScale(),
+    scaleMultiplier: computeFontScaleMultiplier(getFontScale()),
+    family: getFontFamily(),
+    setFontScale: () => {},
+    setFontFamily: () => {},
   },
+  flags: {},
 })
 
 export function ThemeProvider({
   children,
   theme: themeName,
 }: React.PropsWithChildren<{theme: ThemeName}>) {
+  const [fontScale, setFontScale] = React.useState<Alf['fonts']['scale']>(() =>
+    getFontScale(),
+  )
+  const [fontScaleMultiplier, setFontScaleMultiplier] = React.useState(() =>
+    computeFontScaleMultiplier(fontScale),
+  )
+  const setFontScaleAndPersist = React.useCallback<
+    Alf['fonts']['setFontScale']
+  >(
+    fontScale => {
+      setFontScale(fontScale)
+      persistFontScale(fontScale)
+      setFontScaleMultiplier(computeFontScaleMultiplier(fontScale))
+    },
+    [setFontScale],
+  )
+  const [fontFamily, setFontFamily] = React.useState<Alf['fonts']['family']>(
+    () => getFontFamily(),
+  )
+  const setFontFamilyAndPersist = React.useCallback<
+    Alf['fonts']['setFontFamily']
+  >(
+    fontFamily => {
+      setFontFamily(fontFamily)
+      persistFontFamily(fontFamily)
+    },
+    [setFontFamily],
+  )
   const themes = React.useMemo(() => {
     return createThemes({
       hues: {
@@ -73,39 +102,56 @@ export function ThemeProvider({
       },
     })
   }, [])
-  const theme = themes[themeName]
-  const [breakpoints, setBreakpoints] = React.useState(() =>
-    getActiveBreakpoints({width: Dimensions.get('window').width}),
-  )
-
-  React.useEffect(() => {
-    const listener = Dimensions.addEventListener('change', ({window}) => {
-      const bp = getActiveBreakpoints({width: window.width})
-      if (bp.active !== breakpoints.active) setBreakpoints(bp)
-    })
-
-    return listener.remove
-  }, [breakpoints, setBreakpoints])
 
   return (
     <Context.Provider
-      value={React.useMemo(
+      value={React.useMemo<Alf>(
         () => ({
+          themes,
           themeName: themeName,
-          theme: theme,
-          breakpoints,
+          theme: themes[themeName],
+          fonts: {
+            scale: fontScale,
+            scaleMultiplier: fontScaleMultiplier,
+            family: fontFamily,
+            setFontScale: setFontScaleAndPersist,
+            setFontFamily: setFontFamilyAndPersist,
+          },
+          flags: {},
         }),
-        [theme, themeName, breakpoints],
+        [
+          themeName,
+          themes,
+          fontScale,
+          setFontScaleAndPersist,
+          fontFamily,
+          setFontFamilyAndPersist,
+          fontScaleMultiplier,
+        ],
       )}>
       {children}
     </Context.Provider>
   )
 }
 
-export function useTheme() {
-  return React.useContext(Context).theme
+export function useAlf() {
+  return React.useContext(Context)
+}
+
+export function useTheme(theme?: ThemeName) {
+  const alf = useAlf()
+  return React.useMemo(() => {
+    return theme ? alf.themes[theme] : alf.theme
+  }, [theme, alf])
 }
 
 export function useBreakpoints() {
-  return React.useContext(Context).breakpoints
+  const gtPhone = useMediaQuery({minWidth: 500})
+  const gtMobile = useMediaQuery({minWidth: 800})
+  const gtTablet = useMediaQuery({minWidth: 1300})
+  return {
+    gtPhone,
+    gtMobile,
+    gtTablet,
+  }
 }

src/alf/themes.ts

@@ -186,19 +186,19 @@ export function createThemes({
     white: color.gray_0,
     black: color.trueBlack,
 
-    contrast_25: color.gray_1000,
-    contrast_50: color.gray_975,
-    contrast_100: color.gray_950,
-    contrast_200: color.gray_900,
-    contrast_300: color.gray_800,
-    contrast_400: color.gray_700,
-    contrast_500: color.gray_600,
-    contrast_600: color.gray_500,
-    contrast_700: color.gray_400,
-    contrast_800: color.gray_300,
-    contrast_900: color.gray_200,
-    contrast_950: color.gray_100,
-    contrast_975: color.gray_50,
+    contrast_25: color.gray_975,
+    contrast_50: color.gray_950,
+    contrast_100: color.gray_900,
+    contrast_200: color.gray_800,
+    contrast_300: color.gray_700,
+    contrast_400: color.gray_600,
+    contrast_500: color.gray_500,
+    contrast_600: color.gray_400,
+    contrast_700: color.gray_300,
+    contrast_800: color.gray_200,
+    contrast_900: color.gray_100,
+    contrast_950: color.gray_50,
+    contrast_975: color.gray_25,
 
     primary_25: color.primary_975,
     primary_50: color.primary_950,
@@ -400,7 +400,7 @@ export function createThemes({
         color: darkPalette.contrast_400,
       },
       text_contrast_medium: {
-        color: darkPalette.contrast_700,
+        color: darkPalette.contrast_600,
       },
       text_contrast_high: {
         color: darkPalette.contrast_900,

src/alf/tokens.ts

@@ -1,3 +1,7 @@
+import {Platform} from 'react-native'
+
+export const TRACKING = Platform.OS === 'android' ? 0.1 : 0
+
 export const color = {
   temp_purple: 'rgb(105 0 255)',
   temp_purple_dark: 'rgb(83 0 202)',

src/components/Button.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import {
   AccessibilityProps,
+  GestureResponderEvent,
+  MouseEvent,
   Pressable,
   PressableProps,
   StyleProp,
   StyleSheet,
-  Text,
   TextProps,
   TextStyle,
   View,
@@ -15,7 +16,7 @@ import {LinearGradient} from 'expo-linear-gradient'
 
 import {android, atoms as a, flatten, select, tokens, useTheme} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
-import {normalizeTextStyles} from '#/components/Typography'
+import {Text} from '#/components/Typography'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
 export type ButtonColor =
@@ -65,11 +66,22 @@ type NonTextElements =
 
 export type ButtonProps = Pick<
   PressableProps,
-  'disabled' | 'onPress' | 'testID' | 'onLongPress' | 'hitSlop'
+  | 'disabled'
+  | 'onPress'
+  | 'testID'
+  | 'onLongPress'
+  | 'hitSlop'
+  | 'onHoverIn'
+  | 'onHoverOut'
+  | 'onPressIn'
+  | 'onPressOut'
 > &
   AccessibilityProps &
   VariantProps & {
     testID?: string
+    /**
+     * For a11y, try to make this descriptive and clear
+     */
     label: string
     style?: StyleProp<ViewStyle>
     hoverStyle?: StyleProp<ViewStyle>
@@ -112,30 +124,50 @@ export const Button = React.forwardRef<View, ButtonProps>(
       focused: false,
     })
 
-    const onPressIn = React.useCallback(() => {
-      setState(s => ({
-        ...s,
-        pressed: true,
-      }))
-    }, [setState])
-    const onPressOut = React.useCallback(() => {
-      setState(s => ({
-        ...s,
-        pressed: false,
-      }))
-    }, [setState])
-    const onHoverIn = React.useCallback(() => {
-      setState(s => ({
-        ...s,
-        hovered: true,
-      }))
-    }, [setState])
-    const onHoverOut = React.useCallback(() => {
-      setState(s => ({
-        ...s,
-        hovered: false,
-      }))
-    }, [setState])
+    const onPressInOuter = rest.onPressIn
+    const onPressIn = React.useCallback(
+      (e: GestureResponderEvent) => {
+        setState(s => ({
+          ...s,
+          pressed: true,
+        }))
+        onPressInOuter?.(e)
+      },
+      [setState, onPressInOuter],
+    )
+    const onPressOutOuter = rest.onPressOut
+    const onPressOut = React.useCallback(
+      (e: GestureResponderEvent) => {
+        setState(s => ({
+          ...s,
+          pressed: false,
+        }))
+        onPressOutOuter?.(e)
+      },
+      [setState, onPressOutOuter],
+    )
+    const onHoverInOuter = rest.onHoverIn
+    const onHoverIn = React.useCallback(
+      (e: MouseEvent) => {
+        setState(s => ({
+          ...s,
+          hovered: true,
+        }))
+        onHoverInOuter?.(e)
+      },
+      [setState, onHoverInOuter],
+    )
+    const onHoverOutOuter = rest.onHoverOut
+    const onHoverOut = React.useCallback(
+      (e: MouseEvent) => {
+        setState(s => ({
+          ...s,
+          hovered: false,
+        }))
+        onHoverOutOuter?.(e)
+      },
+      [setState, onHoverOutOuter],
+    )
     const onFocus = React.useCallback(() => {
       setState(s => ({
         ...s,
@@ -199,28 +231,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
       } else if (color === 'secondary') {
         if (variant === 'solid') {
           if (!disabled) {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.contrast_25,
-                dim: t.palette.contrast_100,
-                dark: t.palette.contrast_100,
-              }),
-            })
-            hoverStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.contrast_50,
-                dim: t.palette.contrast_200,
-                dark: t.palette.contrast_200,
-              }),
-            })
+            baseStyles.push(t.atoms.bg_contrast_25)
+            hoverStyles.push(t.atoms.bg_contrast_50)
           } else {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.contrast_100,
-                dim: t.palette.contrast_25,
-                dark: t.palette.contrast_25,
-              }),
-            })
+            baseStyles.push(t.atoms.bg_contrast_100)
           }
         } else if (variant === 'outline') {
           baseStyles.push(a.border, t.atoms.bg, {
@@ -620,14 +634,7 @@ export function ButtonText({children, style, ...rest}: ButtonTextProps) {
   const textStyles = useSharedButtonTextStyles()
 
   return (
-    <Text
-      {...rest}
-      style={normalizeTextStyles([
-        a.font_bold,
-        a.text_center,
-        textStyles,
-        style,
-      ])}>
+    <Text {...rest} style={[a.font_bold, a.text_center, textStyles, style]}>
       {children}
     </Text>
   )