fix: make logo show in qr code by absolutely positioning svg on top of it (#9373)

* fix: make logo show in qr code by absolutely positioning svg on top of it

* fix: remove log and add explanation comment

* fix: only apply qrcode fix to web

.env.example

@@ -34,5 +34,8 @@ EXPO_PUBLIC_SENTRY_DSN=
 # Bitdrift API key. If undefined, Bitdrift will be disabled.
 EXPO_PUBLIC_BITDRIFT_API_KEY=
 
-# bapp-config web worker URL
-BAPP_CONFIG_DEV_URL=
+# geolocation web worker URL
+GEOLOCATION_DEV_URL=
+
+# live-events web worker URL
+LIVE_EVENTS_DEV_URL=

.eslintrc.js

@@ -35,6 +35,7 @@ module.exports = {
           'Admonition',
           'Admonition.Admonition',
           'Toast.Action',
+          'toast.Action',
           'AgeAssuranceAdmonition',
           'Span',
           'StackedButton',

.github/workflows/claude.yml

@@ -0,0 +1,54 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && (contains(github.event.issue.body, '@claude') || contains(github.event.issue.title, '@claude')))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@v1
+        with:
+          claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+
+          # This is an optional setting that allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Optional: Give a custom prompt to Claude. If this is not specified, Claude will perform the instructions specified in the comment that tagged it.
+          # prompt: 'Update the pull request description to include a summary of changes.'
+
+          # Optional: Add claude_args to customize behavior and configuration
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+          # claude_args: '--allowed-tools Bash(gh pr:*)'
+
+          # NOTE(sfn): we can add a custom system prompt here
+
+          claude_args: |
+            --model claude-opus-4-5-20251101

CLAUDE.md

@@ -0,0 +1,591 @@
+# CLAUDE.md - Bluesky Social App Development Guide
+
+This document provides guidance for working effectively in the Bluesky Social app codebase.
+
+## Project Overview
+
+Bluesky Social is a cross-platform social media application built with React Native and Expo. It runs on iOS, Android, and Web, connecting to the AT Protocol (atproto) decentralized social network.
+
+**Tech Stack:**
+- React Native 0.81 with Expo 54
+- TypeScript
+- React Navigation for routing
+- TanStack Query (React Query) for data fetching
+- Lingui for internationalization
+- Custom design system called ALF (Application Layout Framework)
+
+## Essential Commands
+
+```bash
+# Development
+yarn start              # Start Expo dev server
+yarn web                # Start web version
+yarn android            # Run on Android
+yarn ios                # Run on iOS
+
+# Testing & Quality
+yarn test               # Run Jest tests
+yarn lint               # Run ESLint
+yarn typecheck          # Run TypeScript type checking
+
+# Internationalization
+yarn intl:extract       # Extract translation strings
+yarn intl:compile       # Compile translations for runtime
+
+# Build
+yarn build-web          # Build web version
+yarn prebuild           # Generate native projects
+```
+
+## Project Structure
+
+```
+src/
+├── alf/                    # Design system (ALF) - themes, atoms, tokens
+├── components/             # Shared UI components (Button, Dialog, Menu, etc.)
+├── screens/                # Full-page screen components (newer pattern)
+├── view/
+│   ├── screens/            # Full-page screens (legacy location)
+│   ├── com/                # Reusable view components
+│   └── shell/              # App shell (navigation bars, tabs)
+├── state/
+│   ├── queries/            # TanStack Query hooks
+│   ├── preferences/        # User preferences (React Context)
+│   ├── session/            # Authentication state
+│   └── persisted/          # Persistent storage layer
+├── lib/                    # Utilities, constants, helpers
+├── locale/                 # i18n configuration and language files
+└── Navigation.tsx          # Main navigation configuration
+```
+
+## Styling System (ALF)
+
+ALF is the custom design system. It uses Tailwind-inspired naming with underscores instead of hyphens.
+
+### Basic Usage
+
+```tsx
+import {atoms as a, useTheme} from '#/alf'
+
+function MyComponent() {
+  const t = useTheme()
+
+  return (
+    <View style={[a.flex_row, a.gap_md, a.p_lg, t.atoms.bg]}>
+      <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+        Hello
+      </Text>
+    </View>
+  )
+}
+```
+
+### Key Concepts
+
+**Static Atoms** - Theme-independent styles imported from `atoms`:
+```tsx
+import {atoms as a} from '#/alf'
+// a.flex_row, a.p_md, a.gap_sm, a.rounded_md, a.text_lg, etc.
+```
+
+**Theme Atoms** - Theme-dependent colors from `useTheme()`:
+```tsx
+const t = useTheme()
+// t.atoms.bg, t.atoms.text, t.atoms.border_contrast_low, etc.
+// t.palette.primary_500, t.palette.negative_400, etc.
+```
+
+**Platform Utilities** - For platform-specific styles:
+```tsx
+import {web, native, ios, android, platform} from '#/alf'
+
+const styles = [
+  a.p_md,
+  web({cursor: 'pointer'}),
+  native({paddingBottom: 20}),
+  platform({ios: {...}, android: {...}, web: {...}}),
+]
+```
+
+**Breakpoints** - Responsive design:
+```tsx
+import {useBreakpoints} from '#/alf'
+
+const {gtPhone, gtMobile, gtTablet} = useBreakpoints()
+if (gtMobile) {
+  // Tablet or desktop layout
+}
+```
+
+### Naming Conventions
+
+- Spacing: `xxs`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl` (t-shirt sizes)
+- Text: `text_xs`, `text_sm`, `text_md`, `text_lg`, `text_xl`
+- Gaps/Padding: `gap_sm`, `p_md`, `px_lg`, `py_xl`
+- Flex: `flex_row`, `flex_1`, `align_center`, `justify_between`
+- Borders: `border`, `border_t`, `rounded_md`, `rounded_full`
+
+## Component Patterns
+
+### Dialog Component
+
+Dialogs use a bottom sheet on native and a modal on web. Use `useDialogControl()` hook to manage state.
+
+```tsx
+import * as Dialog from '#/components/Dialog'
+
+function MyFeature() {
+  const control = Dialog.useDialogControl()
+
+  return (
+    <>
+      <Button label="Open" onPress={control.open}>
+        <ButtonText>Open Dialog</ButtonText>
+      </Button>
+
+      <Dialog.Outer control={control}>
+        <Dialog.Handle />  {/* Native drag handle */}
+        <Dialog.ScrollableInner label={_(msg`My Dialog`)}>
+          <Dialog.Header>
+            <Dialog.HeaderText>Title</Dialog.HeaderText>
+          </Dialog.Header>
+
+          <Text>Dialog content here</Text>
+
+          <Button label="Close" onPress={() => control.close()}>
+            <ButtonText>Close</ButtonText>
+          </Button>
+        </Dialog.ScrollableInner>
+      </Dialog.Outer>
+    </>
+  )
+}
+```
+
+### Menu Component
+
+Menus render as a dropdown on web and a bottom sheet dialog on native.
+
+```tsx
+import * as Menu from '#/components/Menu'
+
+function MyMenu() {
+  return (
+    <Menu.Root>
+      <Menu.Trigger label="Open menu">
+        {({props}) => (
+          <Button {...props} label="Menu">
+            <ButtonIcon icon={DotsHorizontal} />
+          </Button>
+        )}
+      </Menu.Trigger>
+
+      <Menu.Outer>
+        <Menu.Group>
+          <Menu.Item label="Edit" onPress={handleEdit}>
+            <Menu.ItemIcon icon={Pencil} />
+            <Menu.ItemText>Edit</Menu.ItemText>
+          </Menu.Item>
+          <Menu.Item label="Delete" onPress={handleDelete}>
+            <Menu.ItemIcon icon={Trash} />
+            <Menu.ItemText>Delete</Menu.ItemText>
+          </Menu.Item>
+        </Menu.Group>
+      </Menu.Outer>
+    </Menu.Root>
+  )
+}
+```
+
+### Button Component
+
+```tsx
+import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+
+// Solid primary button (most common)
+<Button label="Save" onPress={handleSave} color="primary" size="large">
+  <ButtonText>Save</ButtonText>
+</Button>
+
+// With icon
+<Button label="Share" onPress={handleShare} color="secondary" size="small">
+  <ButtonIcon icon={Share} />
+  <ButtonText>Share</ButtonText>
+</Button>
+
+// Icon-only button
+<Button label="Close" onPress={handleClose} color="secondary" size="small" shape="round">
+  <ButtonIcon icon={X} />
+</Button>
+
+// Ghost variant (deprecated - use color prop)
+<Button label="Cancel" variant="ghost" color="secondary" size="small">
+  <ButtonText>Cancel</ButtonText>
+</Button>
+```
+
+**Button Props:**
+- `color`: `'primary'` | `'secondary'` | `'negative'` | `'primary_subtle'` | `'negative_subtle'`
+- `size`: `'tiny'` | `'small'` | `'large'`
+- `shape`: `'default'` (pill) | `'round'` | `'square'` | `'rectangular'`
+- `variant`: `'solid'` | `'outline'` | `'ghost'` (deprecated, use `color`)
+
+### Typography
+
+```tsx
+import {Text, H1, H2, P} from '#/components/Typography'
+
+<H1 style={[a.text_xl, a.font_bold]}>Heading</H1>
+<P>Paragraph text with default styling.</P>
+<Text style={[a.text_sm, t.atoms.text_contrast_medium]}>Custom text</Text>
+
+// For text with emoji, add the emoji prop
+<Text emoji>Hello! 👋</Text>
+```
+
+### TextField
+
+```tsx
+import * as TextField from '#/components/forms/TextField'
+
+<TextField.LabelText>Email</TextField.LabelText>
+<TextField.Root>
+  <TextField.Icon icon={AtSign} />
+  <TextField.Input
+    label="Email address"
+    placeholder="you@example.com"
+    defaultValue={email}
+    onChangeText={setEmail}
+    keyboardType="email-address"
+    autoCapitalize="none"
+  />
+</TextField.Root>
+```
+
+## Internationalization (i18n)
+
+All user-facing strings must be wrapped for translation using Lingui.
+
+```tsx
+import {msg, Trans, plural} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+function MyComponent() {
+  const {_} = useLingui()
+
+  // Simple strings - use msg() with _() function
+  const title = _(msg`Settings`)
+  const errorMessage = _(msg`Something went wrong`)
+
+  // Strings with variables
+  const greeting = _(msg`Hello, ${name}!`)
+
+  // Pluralization
+  const countLabel = _(plural(count, {
+    one: '# item',
+    other: '# items',
+  }))
+
+  // JSX content - use Trans component
+  return (
+    <Text>
+      <Trans>Welcome to <Text style={a.font_bold}>Bluesky</Text></Trans>
+    </Text>
+  )
+}
+```
+
+**Commands:**
+```bash
+yarn intl:extract    # Extract new strings to locale files
+yarn intl:compile    # Compile for runtime (required after changes)
+```
+
+## State Management
+
+### TanStack Query (Data Fetching)
+
+```tsx
+// src/state/queries/profile.ts
+import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query'
+
+// Query key pattern
+const RQKEY_ROOT = 'profile'
+export const RQKEY = (did: string) => [RQKEY_ROOT, did]
+
+// Query hook
+export function useProfileQuery({did}: {did: string}) {
+  const agent = useAgent()
+
+  return useQuery({
+    queryKey: RQKEY(did),
+    queryFn: async () => {
+      const res = await agent.getProfile({actor: did})
+      return res.data
+    },
+    staleTime: STALE.MINUTES.FIVE,
+    enabled: !!did,
+  })
+}
+
+// Mutation hook
+export function useUpdateProfile() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (data) => {
+      // Update logic
+    },
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({queryKey: RQKEY(variables.did)})
+    },
+  })
+}
+```
+
+**Stale Time Constants** (from `src/state/queries/index.ts`):
+```tsx
+STALE.SECONDS.FIFTEEN  // 15 seconds
+STALE.MINUTES.ONE      // 1 minute
+STALE.MINUTES.FIVE     // 5 minutes
+STALE.HOURS.ONE        // 1 hour
+STALE.INFINITY         // Never stale
+```
+
+### Preferences (React Context)
+
+```tsx
+// Simple boolean preference pattern
+import {useAutoplayDisabled, useSetAutoplayDisabled} from '#/state/preferences'
+
+function SettingsScreen() {
+  const autoplayDisabled = useAutoplayDisabled()
+  const setAutoplayDisabled = useSetAutoplayDisabled()
+
+  return (
+    <Toggle
+      value={autoplayDisabled}
+      onValueChange={setAutoplayDisabled}
+    />
+  )
+}
+```
+
+### Session State
+
+```tsx
+import {useSession, useAgent} from '#/state/session'
+
+function MyComponent() {
+  const {hasSession, currentAccount} = useSession()
+  const agent = useAgent()
+
+  if (!hasSession) {
+    return <LoginPrompt />
+  }
+
+  // Use agent for API calls
+  const response = await agent.getProfile({actor: currentAccount.did})
+}
+```
+
+## Navigation
+
+Navigation uses React Navigation with type-safe route parameters.
+
+```tsx
+// Screen component
+import {type NativeStackScreenProps} from '@react-navigation/native-stack'
+import {type CommonNavigatorParams} from '#/lib/routes/types'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
+
+export function ProfileScreen({route, navigation}: Props) {
+  const {name} = route.params  // Type-safe params
+
+  return (
+    <Layout.Screen>
+      {/* Screen content */}
+    </Layout.Screen>
+  )
+}
+
+// Programmatic navigation
+import {useNavigation} from '@react-navigation/native'
+
+const navigation = useNavigation()
+navigation.navigate('Profile', {name: 'alice.bsky.social'})
+
+// Or use the navigate helper
+import {navigate} from '#/Navigation'
+navigate('Profile', {name: 'alice.bsky.social'})
+```
+
+## Platform-Specific Code
+
+Use file extensions for platform-specific implementations:
+
+```
+Component.tsx          # Shared/default
+Component.web.tsx      # Web-only
+Component.native.tsx   # iOS + Android
+Component.ios.tsx      # iOS-only
+Component.android.tsx  # Android-only
+```
+
+Example from Dialog:
+- `src/components/Dialog/index.tsx` - Native (uses BottomSheet)
+- `src/components/Dialog/index.web.tsx` - Web (uses modal with Radix primitives)
+
+Platform detection:
+```tsx
+import {isWeb, isNative, isIOS, isAndroid} from '#/platform/detection'
+
+if (isNative) {
+  // Native-specific logic
+}
+```
+
+## Import Aliases
+
+Always use the `#/` alias for absolute imports:
+
+```tsx
+// Good
+import {useSession} from '#/state/session'
+import {atoms as a, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
+
+// Avoid
+import {useSession} from '../../../state/session'
+```
+
+## Footguns
+
+Common pitfalls to avoid in this codebase:
+
+### Dialog Close Callback (Critical)
+
+**Always use `control.close(() => ...)` when performing actions after closing a dialog.** The callback ensures the action runs after the dialog's close animation completes. Failing to do this causes race conditions with React state updates.
+
+```tsx
+// WRONG - causes bugs with state updates, navigation, opening other dialogs
+const onConfirm = () => {
+  control.close()
+  navigation.navigate('Home')  // May race with dialog animation
+}
+
+// WRONG - same problem
+const onConfirm = () => {
+  control.close()
+  otherDialogControl.open()  // Will likely fail or cause visual glitches
+}
+
+// CORRECT - action runs after dialog fully closes
+const onConfirm = () => {
+  control.close(() => {
+    navigation.navigate('Home')
+  })
+}
+
+// CORRECT - opening another dialog after close
+const onConfirm = () => {
+  control.close(() => {
+    otherDialogControl.open()
+  })
+}
+
+// CORRECT - state updates after close
+const onConfirm = () => {
+  control.close(() => {
+    setSomeState(newValue)
+    onCallback?.()
+  })
+}
+```
+
+This applies to:
+- Navigation (`navigation.navigate()`, `navigation.push()`)
+- Opening other dialogs or menus
+- State updates that affect UI (`setState`, `queryClient.invalidateQueries`)
+- Callbacks passed from parent components
+
+The Menu component on iOS specifically uses this pattern - see `src/components/Menu/index.tsx:151`.
+
+### Controlled vs Uncontrolled Inputs
+
+Prefer `defaultValue` over `value` for TextInput on the old architecture:
+
+```tsx
+// Preferred - uncontrolled
+<TextField.Input
+  defaultValue={initialEmail}
+  onChangeText={setEmail}
+/>
+
+// Avoid when possible - controlled (can cause performance issues)
+<TextField.Input
+  value={email}
+  onChangeText={setEmail}
+/>
+```
+
+### Platform-Specific Behavior
+
+Some components behave differently across platforms:
+- `Dialog.Handle` - Only renders on native (drag handle for bottom sheet)
+- `Dialog.Close` - Only renders on web (X button)
+- `Menu.Divider` - Only renders on web
+- `Menu.ContainerItem` - Only works on native
+
+Always test on multiple platforms when using these components.
+
+### React Compiler is Enabled
+
+This codebase uses React Compiler, so **don't proactively add `useMemo` or `useCallback`**. The compiler handles memoization automatically.
+
+```tsx
+// UNNECESSARY - React Compiler handles this
+const handlePress = useCallback(() => {
+  doSomething()
+}, [doSomething])
+
+// JUST WRITE THIS
+const handlePress = () => {
+  doSomething()
+}
+```
+
+Only use `useMemo`/`useCallback` when you have a specific reason, such as:
+- The value is immediately used in an effect's dependency array
+- You're passing a callback to a non-React library that needs referential stability
+
+## Best Practices
+
+1. **Accessibility**: Always provide `label` prop for interactive elements, use `accessibilityHint` where helpful
+
+2. **Translations**: Wrap ALL user-facing strings with `msg()` or `<Trans>`
+
+3. **Styling**: Combine static atoms with theme atoms, use platform utilities for platform-specific styles
+
+4. **State**: Use TanStack Query for server state, React Context for UI preferences
+
+5. **Components**: Check if a component exists in `#/components/` before creating new ones
+
+6. **Types**: Define explicit types for props, use `NativeStackScreenProps` for screens
+
+7. **Testing**: Components should have `testID` props for E2E testing
+
+## Key Files Reference
+
+| Purpose | Location |
+|---------|----------|
+| Theme definitions | `src/alf/themes.ts` |
+| Design tokens | `src/alf/tokens.ts` |
+| Static atoms | `src/alf/atoms.ts` (extends `@bsky.app/alf`) |
+| Navigation config | `src/Navigation.tsx` |
+| Route definitions | `src/routes.ts` |
+| Route types | `src/lib/routes/types.ts` |
+| Query hooks | `src/state/queries/*.ts` |
+| Session state | `src/state/session/index.tsx` |
+| i18n setup | `src/locale/i18n.ts` |

conductor.json

@@ -0,0 +1,6 @@
+{
+    "scripts": {
+        "setup": "yarn install",
+        "run": "yarn web --port $CONDUCTOR_PORT"
+    }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.113.1",
+  "version": "1.114.0",
   "private": true,
   "engines": {
     "node": ">=20"
@@ -73,7 +73,7 @@
     "icons:optimize": "svgo -f ./assets/icons"
   },
   "dependencies": {
-    "@atproto/api": "^0.18.8",
+    "@atproto/api": "^0.18.15",
     "@bitdrift/react-native": "^0.6.8",
     "@braintree/sanitize-url": "^6.0.2",
     "@bsky.app/alf": "^0.1.6",
@@ -226,7 +226,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/dev-env": "^0.3.196",
+    "@atproto/dev-env": "^0.3.204",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/runtime": "^7.26.0",
@@ -284,6 +284,7 @@
     "@react-native/babel-preset": "0.81.5",
     "@react-native/normalize-colors": "0.81.5",
     "**/@expo/image-utils": "0.8.7",
+    "**/@react-native-async-storage/async-storage": "2.2.0",
     "**/expo-constants": "18.0.8",
     "**/expo-device": "7.1.4",
     "**/zod": "3.23.8",

patches/@haileyok+bluesky-video+0.3.2.patch

@@ -18,3 +18,119 @@ index 0000000..3b5b864
 @@ -0,0 +1,2 @@
 +# Keep FullscreenActivity from being stripped by R8/ProGuard
 +-keep class expo.modules.blueskyvideo.FullscreenActivity { *; }
+diff --git a/node_modules/@haileyok/bluesky-video/android/src/main/java/expo/modules/blueskyvideo/BlueskyVideoView.kt b/node_modules/@haileyok/bluesky-video/android/src/main/java/expo/modules/blueskyvideo/BlueskyVideoView.kt
+index fdabd84..eda8c7c 100644
+--- a/node_modules/@haileyok/bluesky-video/android/src/main/java/expo/modules/blueskyvideo/BlueskyVideoView.kt
++++ b/node_modules/@haileyok/bluesky-video/android/src/main/java/expo/modules/blueskyvideo/BlueskyVideoView.kt
+@@ -1,8 +1,11 @@
+ package expo.modules.blueskyvideo
+ 
++import android.app.Activity
+ import android.content.Context
+ import android.content.Intent
+ import android.graphics.Color
++import android.os.Build
++import android.util.Log
+ import android.graphics.Rect
+ import android.net.Uri
+ import android.view.ViewGroup
+@@ -237,9 +240,44 @@ class BlueskyVideoView(
+     // Fullscreen handling
+ 
+     fun enterFullscreen(keepDisplayOn: Boolean) {
+-        val currentActivity = this.appContext.currentActivity ?: return
++        val tag = "BlueskyVideo"
++
++        Log.d(tag, "enterFullscreen() called - keepDisplayOn=$keepDisplayOn")
++        Log.d(tag, "  isFullscreen=$isFullscreen, isPlaying=$isPlaying, isMuted=$isMuted")
++        Log.d(tag, "  player=${player != null}, url=$url")
++        Log.d(tag, "  isAttachedToWindow=$isAttachedToWindow, isShown=$isShown")
++        Log.d(tag, "  Android SDK: ${Build.VERSION.SDK_INT}, Device: ${Build.MANUFACTURER} ${Build.MODEL}")
++
++        val currentActivity = this.appContext.currentActivity
++        if (currentActivity == null) {
++            Log.e(tag, "enterFullscreen() FAILED: currentActivity is null")
++            Log.e(tag, "  appContext=$appContext")
++            onError(mapOf("error" to "Cannot enter fullscreen: no current activity"))
++            return
++        }
++
++        Log.d(tag, "  currentActivity=$currentActivity")
++        Log.d(tag, "  activity.isFinishing=${currentActivity.isFinishing}")
++        Log.d(tag, "  activity.isDestroyed=${currentActivity.isDestroyed}")
++        Log.d(tag, "  activity.lifecycle=${(currentActivity as? androidx.lifecycle.LifecycleOwner)?.lifecycle?.currentState}")
++        Log.d(tag, "  activity.hasWindowFocus=${currentActivity.hasWindowFocus()}")
++        Log.d(tag, "  activity.window.isActive=${currentActivity.window?.isActive}")
++
++        // Check if activity is in a valid state to start another activity
++        if (currentActivity.isFinishing) {
++            Log.e(tag, "enterFullscreen() FAILED: currentActivity is finishing")
++            onError(mapOf("error" to "Cannot enter fullscreen: activity is finishing"))
++            return
++        }
++
++        if (currentActivity.isDestroyed) {
++            Log.e(tag, "enterFullscreen() FAILED: currentActivity is destroyed")
++            onError(mapOf("error" to "Cannot enter fullscreen: activity is destroyed"))
++            return
++        }
+ 
+         this.enteredFullscreenMuteState = this.isMuted
++        Log.d(tag, "  saved enteredFullscreenMuteState=$enteredFullscreenMuteState")
+ 
+         // We always want to start with unmuted state and playing. Fire those from here so the
+         // event dispatcher gets called
+@@ -247,18 +285,51 @@ class BlueskyVideoView(
+         if (!this.isPlaying) {
+             this.play()
+         }
++        Log.d(tag, "  after unmute/play: isPlaying=$isPlaying, isMuted=$isMuted")
+ 
+         // Remove the player from this view, but don't null the player!
+         this.playerView.player = null
++        Log.d(tag, "  detached player from playerView")
+ 
+         // create the intent and give it a view
+         val intent = Intent(context, FullscreenActivity::class.java)
+         intent.putExtra("keepDisplayOn", keepDisplayOn)
+         FullscreenActivity.asscVideoView = WeakReference(this)
+ 
++        Log.d(tag, "  intent created: $intent")
++        Log.d(tag, "  intent.component=${intent.component}")
++        Log.d(tag, "  intent.flags=${intent.flags} (0x${Integer.toHexString(intent.flags)})")
++        Log.d(tag, "  context for intent=$context")
++        Log.d(tag, "  FullscreenActivity.asscVideoView set to WeakReference(this)")
++
+         // fire the fullscreen event and launch the intent
+-        this.isFullscreen = true
+-        currentActivity.startActivity(intent)
++        try {
++            Log.d(tag, "  calling startActivity()...")
++            currentActivity.startActivity(intent)
++            this.isFullscreen = true
++            Log.d(tag, "  startActivity() SUCCESS - isFullscreen set to true")
++        } catch (e: Exception) {
++            Log.e(tag, "enterFullscreen() FAILED: startActivity() threw exception", e)
++            Log.e(tag, "  exception class: ${e.javaClass.name}")
++            Log.e(tag, "  exception message: ${e.message}")
++            Log.e(tag, "  exception cause: ${e.cause}")
++            e.printStackTrace()
++
++            // Restore state since fullscreen failed
++            this.playerView.player = this.player
++            Log.d(tag, "  restored player to playerView after failure")
++
++            if (this.enteredFullscreenMuteState) {
++                this.mute()
++                Log.d(tag, "  restored mute state after failure")
++            }
++
++            onError(mapOf(
++                "error" to "Failed to enter fullscreen: ${e.message}",
++                "exceptionClass" to e.javaClass.name,
++                "exceptionMessage" to (e.message ?: "unknown")
++            ))
++        }
+     }
+ 
+     fun onExitFullscreen() {

patches/expo-font+14.0.10.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/expo-font/ios/FontLoaderModule.swift b/node_modules/expo-font/ios/FontLoaderModule.swift
+index 183480f..7b64f6e 100644
+--- a/node_modules/expo-font/ios/FontLoaderModule.swift
++++ b/node_modules/expo-font/ios/FontLoaderModule.swift
+@@ -2,10 +2,9 @@ import ExpoModulesCore
+ 
+ public final class FontLoaderModule: Module {
+   // could be a Set, but to be able to pass to JS we keep it as an array
+-  private var registeredFonts: [String]
++  private lazy var registeredFonts: [String] = queryCustomNativeFonts()
+ 
+   public required init(appContext: AppContext) {
+-    self.registeredFonts = queryCustomNativeFonts()
+     super.init(appContext: appContext)
+   }
+ 

patches/react-native-pager-view+6.8.0.patch

@@ -0,0 +1,30 @@
+diff --git a/node_modules/react-native-pager-view/ios/RNCPagerView.m b/node_modules/react-native-pager-view/ios/RNCPagerView.m
+index adfc7c6..366df60 100644
+--- a/node_modules/react-native-pager-view/ios/RNCPagerView.m
++++ b/node_modules/react-native-pager-view/ios/RNCPagerView.m
+@@ -498,6 +498,25 @@ - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecogni
+         return YES;
+     }
+ 
++    // iOS 26+ full-screen back gesture (interactiveContentPopGestureRecognizer)
++    if (@available(iOS 26, *)) {
++        if (gestureRecognizer == self.panGestureRecognizer &&
++            otherGestureRecognizer == self.reactViewController.navigationController.interactiveContentPopGestureRecognizer) {
++            UIPanGestureRecognizer* panGestureRecognizer = (UIPanGestureRecognizer*) gestureRecognizer;
++            CGPoint velocity = [panGestureRecognizer velocityInView:self];
++            BOOL isLTR = [self isLtrLayout];
++            BOOL isBackGesture = (isLTR && velocity.x > 0) || (!isLTR && velocity.x < 0);
++
++            if (self.currentIndex == 0 && isBackGesture) {
++                self.scrollView.panGestureRecognizer.enabled = false;
++            } else {
++                self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
++            }
++
++            return YES;
++        }
++    }
++
+     self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
+     return NO;
+ }

patches/react-native-pager-view+6.8.0.patch.md

@@ -0,0 +1,11 @@
+# react-native-pager-view+6.8.0.patch
+
+Adds support for iOS 26's `interactiveContentPopGestureRecognizer` (full-screen back gesture).
+
+The pager already handles `RNSPanGestureRecognizer` (react-native-screens' custom full-screen gesture for pre-iOS 26) in `shouldRecognizeSimultaneouslyWithGestureRecognizer:`. It checks if the user is on the leftmost page and swiping right - if so, it disables the scrollview's pan gesture to let the back gesture through.
+
+This patch adds the same logic for iOS 26's native `interactiveContentPopGestureRecognizer`, so the back gesture works on the leftmost page while the pager still handles swipes on other pages.
+
+Related issues:
+- https://github.com/software-mansion/react-native-screens/issues/3512
+- https://github.com/software-mansion/react-native-screens/pull/3420

src/App.native.tsx

@@ -69,6 +69,10 @@ import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbe
 import {ToastOutlet} from '#/components/Toast'
 import {Provider as AgeAssuranceV2Provider} from '#/ageAssurance'
 import {prefetchAgeAssuranceConfig} from '#/ageAssurance'
+import {
+  prefetchLiveEvents,
+  Provider as LiveEventsProvider,
+} from '#/features/liveEvents/context'
 import * as Geo from '#/geolocation'
 import {Splash} from '#/Splash'
 import {BottomSheetProvider} from '../modules/bottom-sheet'
@@ -92,6 +96,7 @@ if (isAndroid) {
  */
 Geo.resolve()
 prefetchAgeAssuranceConfig()
+prefetchLiveEvents()
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
@@ -141,49 +146,51 @@ function InnerApp() {
                 <QueryProvider currentDid={currentAccount?.did}>
                   <PolicyUpdateOverlayProvider>
                     <StatsigProvider>
-                      <AgeAssuranceV2Provider>
-                        <ComposerProvider>
-                          <MessagesProvider>
-                            {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                            <LabelDefsProvider>
-                              <ModerationOptsProvider>
-                                <LoggedOutViewProvider>
-                                  <SelectedFeedProvider>
-                                    <HiddenRepliesProvider>
-                                      <HomeBadgeProvider>
-                                        <UnreadNotifsProvider>
-                                          <BackgroundNotificationPreferencesProvider>
-                                            <MutedThreadsProvider>
-                                              <ProgressGuideProvider>
-                                                <ServiceAccountManager>
-                                                  <EmailVerificationProvider>
-                                                    <HideBottomBarBorderProvider>
-                                                      <GestureHandlerRootView
-                                                        style={s.h100pct}>
-                                                        <GlobalGestureEventsProvider>
-                                                          <IntentDialogProvider>
-                                                            <TestCtrls />
-                                                            <Shell />
-                                                            <ToastOutlet />
-                                                          </IntentDialogProvider>
-                                                        </GlobalGestureEventsProvider>
-                                                      </GestureHandlerRootView>
-                                                    </HideBottomBarBorderProvider>
-                                                  </EmailVerificationProvider>
-                                                </ServiceAccountManager>
-                                              </ProgressGuideProvider>
-                                            </MutedThreadsProvider>
-                                          </BackgroundNotificationPreferencesProvider>
-                                        </UnreadNotifsProvider>
-                                      </HomeBadgeProvider>
-                                    </HiddenRepliesProvider>
-                                  </SelectedFeedProvider>
-                                </LoggedOutViewProvider>
-                              </ModerationOptsProvider>
-                            </LabelDefsProvider>
-                          </MessagesProvider>
-                        </ComposerProvider>
-                      </AgeAssuranceV2Provider>
+                      <LiveEventsProvider>
+                        <AgeAssuranceV2Provider>
+                          <ComposerProvider>
+                            <MessagesProvider>
+                              {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                              <LabelDefsProvider>
+                                <ModerationOptsProvider>
+                                  <LoggedOutViewProvider>
+                                    <SelectedFeedProvider>
+                                      <HiddenRepliesProvider>
+                                        <HomeBadgeProvider>
+                                          <UnreadNotifsProvider>
+                                            <BackgroundNotificationPreferencesProvider>
+                                              <MutedThreadsProvider>
+                                                <ProgressGuideProvider>
+                                                  <ServiceAccountManager>
+                                                    <EmailVerificationProvider>
+                                                      <HideBottomBarBorderProvider>
+                                                        <GestureHandlerRootView
+                                                          style={s.h100pct}>
+                                                          <GlobalGestureEventsProvider>
+                                                            <IntentDialogProvider>
+                                                              <TestCtrls />
+                                                              <Shell />
+                                                              <ToastOutlet />
+                                                            </IntentDialogProvider>
+                                                          </GlobalGestureEventsProvider>
+                                                        </GestureHandlerRootView>
+                                                      </HideBottomBarBorderProvider>
+                                                    </EmailVerificationProvider>
+                                                  </ServiceAccountManager>
+                                                </ProgressGuideProvider>
+                                              </MutedThreadsProvider>
+                                            </BackgroundNotificationPreferencesProvider>
+                                          </UnreadNotifsProvider>
+                                        </HomeBadgeProvider>
+                                      </HiddenRepliesProvider>
+                                    </SelectedFeedProvider>
+                                  </LoggedOutViewProvider>
+                                </ModerationOptsProvider>
+                              </LabelDefsProvider>
+                            </MessagesProvider>
+                          </ComposerProvider>
+                        </AgeAssuranceV2Provider>
+                      </LiveEventsProvider>
                     </StatsigProvider>
                   </PolicyUpdateOverlayProvider>
                 </QueryProvider>

src/App.web.tsx

@@ -57,6 +57,10 @@ import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbe
 import {ToastOutlet} from '#/components/Toast'
 import {Provider as AgeAssuranceV2Provider} from '#/ageAssurance'
 import {prefetchAgeAssuranceConfig} from '#/ageAssurance'
+import {
+  prefetchLiveEvents,
+  Provider as LiveEventsProvider,
+} from '#/features/liveEvents/context'
 import * as Geo from '#/geolocation'
 import {Splash} from '#/Splash'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
@@ -67,6 +71,7 @@ import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottom
  */
 Geo.resolve()
 prefetchAgeAssuranceConfig()
+prefetchLiveEvents()
 
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
@@ -117,45 +122,47 @@ function InnerApp() {
                 <QueryProvider currentDid={currentAccount?.did}>
                   <PolicyUpdateOverlayProvider>
                     <StatsigProvider>
-                      <AgeAssuranceV2Provider>
-                        <ComposerProvider>
-                          <MessagesProvider>
-                            {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                            <LabelDefsProvider>
-                              <ModerationOptsProvider>
-                                <LoggedOutViewProvider>
-                                  <SelectedFeedProvider>
-                                    <HiddenRepliesProvider>
-                                      <HomeBadgeProvider>
-                                        <UnreadNotifsProvider>
-                                          <BackgroundNotificationPreferencesProvider>
-                                            <MutedThreadsProvider>
-                                              <SafeAreaProvider>
-                                                <ProgressGuideProvider>
-                                                  <ServiceConfigProvider>
-                                                    <EmailVerificationProvider>
-                                                      <HideBottomBarBorderProvider>
-                                                        <IntentDialogProvider>
-                                                          <Shell />
-                                                          <ToastOutlet />
-                                                        </IntentDialogProvider>
-                                                      </HideBottomBarBorderProvider>
-                                                    </EmailVerificationProvider>
-                                                  </ServiceConfigProvider>
-                                                </ProgressGuideProvider>
-                                              </SafeAreaProvider>
-                                            </MutedThreadsProvider>
-                                          </BackgroundNotificationPreferencesProvider>
-                                        </UnreadNotifsProvider>
-                                      </HomeBadgeProvider>
-                                    </HiddenRepliesProvider>
-                                  </SelectedFeedProvider>
-                                </LoggedOutViewProvider>
-                              </ModerationOptsProvider>
-                            </LabelDefsProvider>
-                          </MessagesProvider>
-                        </ComposerProvider>
-                      </AgeAssuranceV2Provider>
+                      <LiveEventsProvider>
+                        <AgeAssuranceV2Provider>
+                          <ComposerProvider>
+                            <MessagesProvider>
+                              {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                              <LabelDefsProvider>
+                                <ModerationOptsProvider>
+                                  <LoggedOutViewProvider>
+                                    <SelectedFeedProvider>
+                                      <HiddenRepliesProvider>
+                                        <HomeBadgeProvider>
+                                          <UnreadNotifsProvider>
+                                            <BackgroundNotificationPreferencesProvider>
+                                              <MutedThreadsProvider>
+                                                <SafeAreaProvider>
+                                                  <ProgressGuideProvider>
+                                                    <ServiceConfigProvider>
+                                                      <EmailVerificationProvider>
+                                                        <HideBottomBarBorderProvider>
+                                                          <IntentDialogProvider>
+                                                            <Shell />
+                                                            <ToastOutlet />
+                                                          </IntentDialogProvider>
+                                                        </HideBottomBarBorderProvider>
+                                                      </EmailVerificationProvider>
+                                                    </ServiceConfigProvider>
+                                                  </ProgressGuideProvider>
+                                                </SafeAreaProvider>
+                                              </MutedThreadsProvider>
+                                            </BackgroundNotificationPreferencesProvider>
+                                          </UnreadNotifsProvider>
+                                        </HomeBadgeProvider>
+                                      </HiddenRepliesProvider>
+                                    </SelectedFeedProvider>
+                                  </LoggedOutViewProvider>
+                                </ModerationOptsProvider>
+                              </LabelDefsProvider>
+                            </MessagesProvider>
+                          </ComposerProvider>
+                        </AgeAssuranceV2Provider>
+                      </LiveEventsProvider>
                     </StatsigProvider>
                   </PolicyUpdateOverlayProvider>
                 </QueryProvider>

src/ageAssurance/components/NoAccessScreen.tsx

@@ -177,10 +177,19 @@ export function NoAccessScreen() {
                         </Trans>
                       </Text>
 
+                      {!aa.flags.isOverRegionMinAccessAge && (
+                        <Text style={[textStyles]}>
+                          <Trans>
+                            Unfortunately, your declared age indicates that you
+                            are not old enough to access Bluesky in your region.
+                          </Trans>
+                        </Text>
+                      )}
+
                       {!isBlocked && birthdateUpdateText}
                     </View>
 
-                    <AccessSection />
+                    {aa.flags.isOverRegionMinAccessAge && <AccessSection />}
                   </>
                 ) : (
                   <View style={[a.gap_lg]}>

src/ageAssurance/debug.ts

@@ -12,23 +12,26 @@ export const enabled = (IS_DEV && false) || IS_E2E
 
 export const geolocation: Geolocation | undefined = enabled
   ? {
-      countryCode: 'AA',
+      countryCode: 'BB',
       regionCode: undefined,
     }
   : undefined
 
-export const deviceGeolocation: Geolocation | undefined = enabled
-  ? {
-      countryCode: 'AA',
-      regionCode: undefined,
-    }
-  : undefined
+const deviceGeolocationEnabled = false
+export const deviceGeolocation: Geolocation | undefined =
+  enabled && deviceGeolocationEnabled
+    ? {
+        countryCode: 'AA',
+        regionCode: undefined,
+      }
+    : undefined
 
 export const config: AppBskyAgeassuranceDefs.Config = {
   regions: [
     {
       countryCode: 'AA',
       regionCode: undefined,
+      minAccessAge: 13,
       rules: [
         {
           $type: ids.Default,
@@ -36,6 +39,17 @@ export const config: AppBskyAgeassuranceDefs.Config = {
         },
       ],
     },
+    {
+      countryCode: 'BB',
+      regionCode: undefined,
+      minAccessAge: 16,
+      rules: [
+        {
+          $type: ids.Default,
+          access: 'none',
+        },
+      ],
+    },
   ],
 }
 

src/ageAssurance/index.tsx

@@ -14,7 +14,11 @@ import {
   type AgeAssuranceState,
   AgeAssuranceStatus,
 } from '#/ageAssurance/types'
-import {isUserUnderAdultAge} from '#/ageAssurance/util'
+import {
+  isUnderAge,
+  MIN_ACCESS_AGE,
+  useAgeAssuranceRegionConfigWithFallback,
+} from '#/ageAssurance/util'
 
 export {
   prefetchConfig as prefetchAgeAssuranceConfig,
@@ -24,6 +28,7 @@ export {
   usePatchServerState as usePatchAgeAssuranceServerState,
 } from '#/ageAssurance/data'
 export {logger} from '#/ageAssurance/logger'
+export {MIN_ACCESS_AGE} from '#/ageAssurance/util'
 
 const AgeAssuranceStateContext = createContext<{
   Access: typeof AgeAssuranceAccess
@@ -32,6 +37,8 @@ const AgeAssuranceStateContext = createContext<{
   flags: {
     adultContentDisabled: boolean
     chatDisabled: boolean
+    isOverRegionMinAccessAge: boolean
+    isOverAppMinAccessAge: boolean
   }
 }>({
   Access: AgeAssuranceAccess,
@@ -44,6 +51,8 @@ const AgeAssuranceStateContext = createContext<{
   flags: {
     adultContentDisabled: false,
     chatDisabled: false,
+    isOverRegionMinAccessAge: false,
+    isOverAppMinAccessAge: false,
   },
 })
 
@@ -69,6 +78,7 @@ export function Provider({children}: {children: React.ReactNode}) {
 function InnerProvider({children}: {children: React.ReactNode}) {
   const state = useAgeAssuranceState()
   const {data} = useAgeAssuranceDataContext()
+  const config = useAgeAssuranceRegionConfigWithFallback()
   const getAndRegisterPushToken = useGetAndRegisterPushToken()
 
   const handleAccessUpdate = useCallback(
@@ -89,11 +99,17 @@ function InnerProvider({children}: {children: React.ReactNode}) {
     <AgeAssuranceStateContext.Provider
       value={useMemo(() => {
         const chatDisabled = state.access !== AgeAssuranceAccess.Full
-        const isUnderage = data?.birthdate
-          ? isUserUnderAdultAge(data.birthdate)
+        const isUnderAdultAge = data?.birthdate
+          ? isUnderAge(data.birthdate, 18)
           : true
+        const isOverRegionMinAccessAge = data?.birthdate
+          ? !isUnderAge(data.birthdate, config.minAccessAge)
+          : false
+        const isOverAppMinAccessAge = data?.birthdate
+          ? !isUnderAge(data.birthdate, MIN_ACCESS_AGE)
+          : false
         const adultContentDisabled =
-          state.access !== AgeAssuranceAccess.Full || isUnderage
+          state.access !== AgeAssuranceAccess.Full || isUnderAdultAge
         return {
           Access: AgeAssuranceAccess,
           Status: AgeAssuranceStatus,
@@ -101,9 +117,11 @@ function InnerProvider({children}: {children: React.ReactNode}) {
           flags: {
             adultContentDisabled,
             chatDisabled,
+            isOverRegionMinAccessAge,
+            isOverAppMinAccessAge,
           },
         }
-      }, [state, data])}>
+      }, [state, data, config])}>
       {children}
     </AgeAssuranceStateContext.Provider>
   )

src/ageAssurance/util.ts

@@ -12,7 +12,23 @@ import {useAgeAssuranceDataContext} from '#/ageAssurance/data'
 import {AgeAssuranceAccess} from '#/ageAssurance/types'
 import {type Geolocation, useGeolocation} from '#/geolocation'
 
-const DEFAULT_MIN_AGE = 13
+export const MIN_ACCESS_AGE = 13
+const FALLBACK_REGION_CONFIG: AppBskyAgeassuranceDefs.ConfigRegion = {
+  countryCode: '*',
+  regionCode: undefined,
+  minAccessAge: MIN_ACCESS_AGE,
+  rules: [
+    {
+      $type: ids.IfDeclaredOverAge,
+      age: MIN_ACCESS_AGE,
+      access: AgeAssuranceAccess.Full,
+    },
+    {
+      $type: ids.Default,
+      access: AgeAssuranceAccess.None,
+    },
+  ],
+}
 
 /**
  * Get age assurance region config based on geolocation, with fallback to
@@ -30,23 +46,7 @@ export function getAgeAssuranceRegionConfigWithFallback(
     regionCode: geolocation.regionCode,
   })
 
-  return (
-    region || {
-      countryCode: '*',
-      regionCode: undefined,
-      rules: [
-        {
-          $type: ids.IfDeclaredOverAge,
-          age: DEFAULT_MIN_AGE,
-          access: AgeAssuranceAccess.Full,
-        },
-        {
-          $type: ids.Default,
-          access: AgeAssuranceAccess.None,
-        },
-      ],
-    }
-  )
+  return region || FALLBACK_REGION_CONFIG
 }
 
 /**
@@ -67,6 +67,14 @@ export function useAgeAssuranceRegionConfig() {
   }, [config, geolocation])
 }
 
+/**
+ * Hook to get the age assurance region config based on current geolocation.
+ * Falls back to our app defaults if no region config is found.
+ */
+export function useAgeAssuranceRegionConfigWithFallback() {
+  return useAgeAssuranceRegionConfig() || FALLBACK_REGION_CONFIG
+}
+
 /**
  * Some users may have erroneously set their birth date to the current date
  * if one wasn't set on their account. We previously didn't do validation on
@@ -78,15 +86,11 @@ export function isLegacyBirthdateBug(birthDate: string) {
 }
 
 /**
- * Returns whether the user is under the minimum age required to use the app.
- * This applies to all regions.
+ * Returns whether the date (converted to an age as a whole integer) is under
+ * the provided minimum age.
  */
-export function isUserUnderMinimumAge(birthDate: string) {
-  return getAge(new Date(birthDate)) < DEFAULT_MIN_AGE
-}
-
-export function isUserUnderAdultAge(birthDate: string) {
-  return getAge(new Date(birthDate)) < 18
+export function isUnderAge(birthDate: string, age: number) {
+  return getAge(new Date(birthDate)) < age
 }
 
 export function getBirthdateStringFromAge(age: number) {

src/alf/index.tsx

@@ -11,7 +11,12 @@ import {
 import {themes} from '#/alf/themes'
 import {type Device} from '#/storage'
 
-export {type TextStyleProp, type Theme, type ViewStyleProp} from '@bsky.app/alf'
+export {
+  type TextStyleProp,
+  type Theme,
+  utils,
+  type ViewStyleProp,
+} from '@bsky.app/alf'
 export {atoms} from '#/alf/atoms'
 export * from '#/alf/breakpoints'
 export * from '#/alf/fonts'

src/components/Dialog/index.tsx

@@ -359,7 +359,13 @@ export function FlatListFooter({children}: {children: React.ReactNode}) {
   )
 }
 
-export function Handle({difference = false}: {difference?: boolean}) {
+export function Handle({
+  difference = false,
+  fill,
+}: {
+  difference?: boolean
+  fill?: string
+}) {
   const t = useTheme()
   const {_} = useLingui()
   const {screenReaderEnabled} = useA11y()
@@ -390,7 +396,7 @@ export function Handle({difference = false}: {difference?: boolean}) {
                   opacity: 0.75,
                 }
               : {
-                  backgroundColor: t.palette.contrast_975,
+                  backgroundColor: fill || t.palette.contrast_975,
                   opacity: 0.5,
                 },
           ]}

src/components/FeedCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {type GestureResponderEvent, View} from 'react-native'
 import {
   type AppBskyFeedDefs,
@@ -21,19 +21,21 @@ import {
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, select, useTheme} from '#/alf'
 import {
   Button,
   ButtonIcon,
   type ButtonProps,
   ButtonText,
 } from '#/components/Button'
+import {Live_Stroke2_Corner0_Rounded as LiveIcon} from '#/components/icons/Live'
 import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
 import {Link as InternalLink, type LinkProps} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {RichText, type RichTextProps} from '#/components/RichText'
 import {Text} from '#/components/Typography'
+import {useActiveLiveEventFeedUris} from '#/features/liveEvents/context'
 import type * as bsky from '#/types/bsky'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from './icons/Trash'
 
@@ -49,7 +51,11 @@ export function Default(props: Props) {
       <Outer>
         <Header>
           <Avatar src={view.avatar} />
-          <TitleAndByline title={view.displayName} creator={view.creator} />
+          <TitleAndByline
+            title={view.displayName}
+            creator={view.creator}
+            uri={view.uri}
+          />
           <SaveButton view={view} pin />
         </Header>
         <Description description={view.description} />
@@ -118,14 +124,40 @@ export function AvatarPlaceholder({size = 40}: Omit<AvatarProps, 'src'>) {
 export function TitleAndByline({
   title,
   creator,
+  uri,
 }: {
   title: string
   creator?: bsky.profile.AnyProfileView
+  uri?: string
 }) {
   const t = useTheme()
+  const activeLiveEvents = useActiveLiveEventFeedUris()
+  const liveColor = useMemo(
+    () =>
+      select(t.name, {
+        dark: t.palette.negative_600,
+        dim: t.palette.negative_600,
+        light: t.palette.negative_500,
+      }),
+    [t],
+  )
 
   return (
     <View style={[a.flex_1]}>
+      {uri && activeLiveEvents.has(uri) && (
+        <View style={[a.flex_row, a.align_center, a.gap_2xs]}>
+          <LiveIcon size="xs" fill={liveColor} />
+          <Text
+            style={[
+              a.text_2xs,
+              a.font_medium,
+              a.leading_snug,
+              {color: liveColor},
+            ]}>
+            <Trans>Happening now</Trans>
+          </Text>
+        </View>
+      )}
       <Text
         emoji
         style={[a.text_md, a.font_semi_bold, a.leading_snug]}

src/components/FeedInterstitials.tsx

@@ -842,6 +842,7 @@ export function SuggestedFeeds() {
                   <FeedCard.TitleAndByline
                     title={feed.displayName}
                     creator={feed.creator}
+                    uri={feed.uri}
                   />
                 </FeedCard.Header>
                 <FeedCard.Description
@@ -933,8 +934,15 @@ export function SuggestedFeeds() {
 
 export function ProgressGuide() {
   const t = useTheme()
+  const {gtMobile} = useBreakpoints()
   return (
-    <View style={[t.atoms.border_contrast_low, a.px_lg, a.py_lg, a.pb_lg]}>
+    <View
+      style={[
+        t.atoms.border_contrast_low,
+        a.px_lg,
+        a.py_lg,
+        !gtMobile && {marginTop: 4},
+      ]}>
       <ProgressGuideList />
     </View>
   )

src/components/Menu/index.tsx

@@ -167,6 +167,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         a.gap_sm,
         a.px_md,
         a.rounded_md,
+        a.overflow_hidden,
         a.border,
         t.atoms.bg_contrast_25,
         t.atoms.border_contrast_low,
@@ -193,7 +194,6 @@ export function ItemText({children, style}: ItemTextProps) {
         a.text_md,
         a.font_semi_bold,
         t.atoms.text_contrast_high,
-        {paddingTop: 3},
         style,
         disabled && t.atoms.text_contrast_low,
       ]}>
@@ -202,16 +202,18 @@ export function ItemText({children, style}: ItemTextProps) {
   )
 }
 
-export function ItemIcon({icon: Comp}: ItemIconProps) {
+export function ItemIcon({icon: Comp, fill}: ItemIconProps) {
   const t = useTheme()
   const {disabled} = useMenuItemContext()
   return (
     <Comp
       size="lg"
       fill={
-        disabled
-          ? t.atoms.text_contrast_low.color
-          : t.atoms.text_contrast_medium.color
+        fill
+          ? fill({disabled})
+          : disabled
+            ? t.atoms.text_contrast_low.color
+            : t.atoms.text_contrast_medium.color
       }
     />
   )

src/components/Menu/index.web.tsx

@@ -262,6 +262,7 @@ export function Item({children, label, onPress, style, ...rest}: ItemProps) {
           a.gap_lg,
           a.py_sm,
           a.rounded_xs,
+          a.overflow_hidden,
           {minHeight: 32, paddingHorizontal: 10},
           web({outline: 0}),
           (hovered || focused) &&
@@ -302,7 +303,7 @@ export function ItemText({children, style}: ItemTextProps) {
   )
 }
 
-export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
+export function ItemIcon({icon: Comp, position = 'left', fill}: ItemIconProps) {
   const t = useTheme()
   const {disabled} = useMenuItemContext()
   return (
@@ -319,9 +320,11 @@ export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
       <Comp
         size="md"
         fill={
-          disabled
-            ? t.atoms.text_contrast_low.color
-            : t.atoms.text_contrast_medium.color
+          fill
+            ? fill({disabled})
+            : disabled
+              ? t.atoms.text_contrast_low.color
+              : t.atoms.text_contrast_medium.color
         }
       />
     </View>

src/components/Menu/types.ts

@@ -107,6 +107,7 @@ export type ItemTextProps = React.PropsWithChildren<TextStyleProp & {}>
 export type ItemIconProps = React.PropsWithChildren<{
   icon: React.ComponentType<SVGIconProps>
   position?: 'left' | 'right'
+  fill?: (props: {disabled: boolean}) => string
 }>
 
 export type GroupProps = React.PropsWithChildren<ViewStyleProp & {}>

src/components/Post/Embed/FeedEmbed.tsx

@@ -17,16 +17,16 @@ export function FeedEmbed({
   return (
     <FeedCard.Link
       view={embed.view}
-      style={[a.border, t.atoms.border_contrast_low, a.p_md, a.rounded_sm]}>
+      style={[a.border, t.atoms.border_contrast_low, a.p_sm, a.rounded_md]}>
       <FeedCard.Outer>
         <FeedCard.Header>
-          <FeedCard.Avatar src={embed.view.avatar} />
+          <FeedCard.Avatar src={embed.view.avatar} size={48} />
           <FeedCard.TitleAndByline
             title={embed.view.displayName}
             creator={embed.view.creator}
+            uri={embed.view.uri}
           />
         </FeedCard.Header>
-        <FeedCard.Likes count={embed.view.likeCount || 0} />
       </FeedCard.Outer>
     </FeedCard.Link>
   )

src/components/PostControls/BookmarkButton.tsx

@@ -8,6 +8,7 @@ import type React from 'react'
 import {useCleanError} from '#/lib/hooks/useCleanError'
 import {logger} from '#/logger'
 import {type Shadow} from '#/state/cache/post-shadow'
+import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {useBookmarkMutation} from '#/state/queries/bookmarks/useBookmarkMutation'
 import {useRequireAuth} from '#/state/session'
 import {useTheme} from '#/alf'
@@ -32,6 +33,7 @@ export const BookmarkButton = memo(function BookmarkButton({
   const {mutateAsync: bookmark} = useBookmarkMutation()
   const cleanError = useCleanError()
   const requireAuth = useRequireAuth()
+  const {feedDescriptor} = useFeedFeedbackContext()
 
   const {viewer} = post
   const isBookmarked = !!viewer?.bookmarked
@@ -50,7 +52,12 @@ export const BookmarkButton = memo(function BookmarkButton({
         post,
       })
 
-      logger.metric('post:bookmark', {logContext})
+      logger.metric('post:bookmark', {
+        uri: post.uri,
+        authorDid: post.author.did,
+        logContext,
+        feedDescriptor,
+      })
 
       toast.show(
         <toast.Outer>
@@ -85,7 +92,12 @@ export const BookmarkButton = memo(function BookmarkButton({
         uri: post.uri,
       })
 
-      logger.metric('post:unbookmark', {logContext})
+      logger.metric('post:unbookmark', {
+        uri: post.uri,
+        authorDid: post.author.did,
+        logContext,
+        feedDescriptor,
+      })
 
       toast.show(
         <toast.Outer>

src/components/PostControls/PostMenu/PostMenuItems.tsx

@@ -98,6 +98,7 @@ let PostMenuItems = ({
   richText,
   threadgateRecord,
   onShowLess,
+  logContext,
 }: {
   testID: string
   post: Shadow<AppBskyFeedDefs.PostView>
@@ -111,6 +112,7 @@ let PostMenuItems = ({
   timestamp: string
   threadgateRecord?: AppBskyFeedThreadgate.Record
   onShowLess?: (interaction: AppBskyFeedDefs.Interaction) => void
+  logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
 }): React.ReactNode => {
   const {hasSession, currentAccount} = useSession()
   const {_} = useLingui()
@@ -210,9 +212,21 @@ let PostMenuItems = ({
     try {
       if (isThreadMuted) {
         unmuteThread()
+        logger.metric('post:unmute', {
+          uri: postUri,
+          authorDid: postAuthor.did,
+          logContext,
+          feedDescriptor: feedFeedback.feedDescriptor,
+        })
         Toast.show(_(msg`You will now receive notifications for this thread`))
       } else {
         muteThread()
+        logger.metric('post:mute', {
+          uri: postUri,
+          authorDid: postAuthor.did,
+          logContext,
+          feedDescriptor: feedFeedback.feedDescriptor,
+        })
         Toast.show(
           _(msg`You will no longer receive notifications for this thread`),
         )
@@ -272,6 +286,12 @@ let PostMenuItems = ({
       feedContext: postFeedContext,
       reqId: postReqId,
     })
+    logger.metric('post:showMore', {
+      uri: postUri,
+      authorDid: postAuthor.did,
+      logContext,
+      feedDescriptor: feedFeedback.feedDescriptor,
+    })
     Toast.show(
       _(msg({message: 'Feedback sent to feed operator', context: 'toast'})),
     )
@@ -284,6 +304,12 @@ let PostMenuItems = ({
       feedContext: postFeedContext,
       reqId: postReqId,
     })
+    logger.metric('post:showLess', {
+      uri: postUri,
+      authorDid: postAuthor.did,
+      logContext,
+      feedDescriptor: feedFeedback.feedDescriptor,
+    })
     if (onShowLess) {
       onShowLess({
         item: postUri,

src/components/PostControls/PostMenu/index.tsx

@@ -29,6 +29,7 @@ let PostMenuButton = ({
   threadgateRecord,
   onShowLess,
   hitSlop,
+  logContext,
 }: {
   testID: string
   post: Shadow<AppBskyFeedDefs.PostView>
@@ -41,6 +42,7 @@ let PostMenuButton = ({
   threadgateRecord?: AppBskyFeedThreadgate.Record
   onShowLess?: (interaction: AppBskyFeedDefs.Interaction) => void
   hitSlop?: Insets
+  logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
 }): React.ReactNode => {
   const {_} = useLingui()
 
@@ -87,6 +89,7 @@ let PostMenuButton = ({
             timestamp={timestamp}
             threadgateRecord={threadgateRecord}
             onShowLess={onShowLess}
+            logContext={logContext}
           />
         )}
       </Menu.Root>

src/components/PostControls/ShareMenu/index.tsx

@@ -16,6 +16,7 @@ import {useGate} from '#/lib/statsig/statsig'
 import {toShareUrl} from '#/lib/strings/url-helpers'
 import {logger} from '#/logger'
 import {type Shadow} from '#/state/cache/post-shadow'
+import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {EventStopper} from '#/view/com/util/EventStopper'
 import {native} from '#/alf'
 import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ArrowOutOfBoxIcon} from '#/components/icons/ArrowOutOfBox'
@@ -35,6 +36,7 @@ let ShareMenuButton = ({
   threadgateRecord,
   onShare,
   hitSlop,
+  logContext,
 }: {
   testID: string
   post: Shadow<AppBskyFeedDefs.PostView>
@@ -45,9 +47,11 @@ let ShareMenuButton = ({
   threadgateRecord?: AppBskyFeedThreadgate.Record
   onShare: () => void
   hitSlop?: Insets
+  logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
 }): React.ReactNode => {
   const {_} = useLingui()
   const gate = useGate()
+  const {feedDescriptor} = useFeedFeedbackContext()
 
   const ShareIcon = gate('alt_share_icon')
     ? ArrowShareRightIcon
@@ -65,13 +69,27 @@ let ShareMenuButton = ({
         setTimeout(menuControl.open)
 
         logger.metric(
-          'share:open',
-          {context: big ? 'thread' : 'feed'},
+          'post:share',
+          {
+            uri: post.uri,
+            authorDid: post.author.did,
+            logContext,
+            feedDescriptor,
+            postContext: big ? 'thread' : 'feed',
+          },
           {statsig: true},
         )
       },
     }),
-    [menuControl, setHasBeenOpen, big],
+    [
+      menuControl,
+      setHasBeenOpen,
+      big,
+      logContext,
+      feedDescriptor,
+      post.uri,
+      post.author.did,
+    ],
   )
 
   const onNativeLongPress = () => {

src/components/PostControls/index.tsx

@@ -13,6 +13,7 @@ import {CountWheel} from '#/lib/custom-animations/CountWheel'
 import {AnimatedLikeIcon} from '#/lib/custom-animations/LikeIcon'
 import {useHaptics} from '#/lib/haptics'
 import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
+import {logger} from '#/logger'
 import {type Shadow} from '#/state/cache/types'
 import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {
@@ -174,6 +175,12 @@ let PostControls = ({
       feedContext,
       reqId,
     })
+    logger.metric('post:clickQuotePost', {
+      uri: post.uri,
+      authorDid: post.author.did,
+      logContext,
+      feedDescriptor,
+    })
     openComposer({
       quote: post,
       onPost: onPostReply,
@@ -217,7 +224,16 @@ let PostControls = ({
             testID="replyBtn"
             onPress={
               !replyDisabled
-                ? () => requireAuth(() => onPressReply())
+                ? () =>
+                    requireAuth(() => {
+                      logger.metric('post:clickReply', {
+                        uri: post.uri,
+                        authorDid: post.author.did,
+                        logContext,
+                        feedDescriptor,
+                      })
+                      onPressReply()
+                    })
                 : undefined
             }
             label={_(
@@ -315,6 +331,7 @@ let PostControls = ({
             left: secondaryControlSpacingStyles.gap / 2,
             right: secondaryControlSpacingStyles.gap / 2,
           }}
+          logContext={logContext}
         />
         <PostMenuButton
           testID="postDropdownBtn"
@@ -330,6 +347,7 @@ let PostControls = ({
           hitSlop={{
             left: secondaryControlSpacingStyles.gap / 2,
           }}
+          logContext={logContext}
         />
       </View>
     </View>

src/components/ProfileHoverCard/index.web.tsx

@@ -389,6 +389,7 @@ let Card = ({
       {data && moderationOpts ? (
         status.isActive ? (
           <LiveStatus
+            status={status}
             profile={data}
             embed={status.embed}
             padding="lg"

src/components/ProgressGuide/FollowDialog.tsx

@@ -31,8 +31,8 @@ import {
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon} from '#/components/icons/Arrow'
 import {MagnifyingGlass_Stroke2_Corner0_Rounded as SearchIcon} from '#/components/icons/MagnifyingGlass'
-import {PersonGroup_Stroke2_Corner2_Rounded as PersonGroupIcon} from '#/components/icons/Person'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {boostInterests, InterestTabs} from '#/components/InterestTabs'
 import * as ProfileCard from '#/components/ProfileCard'
@@ -60,10 +60,16 @@ type Item =
       key: string
     }
 
-export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
+export function FollowDialog({
+  guide,
+  showArrow,
+}: {
+  guide: Follow10ProgressGuide
+  showArrow?: boolean
+}) {
   const {_} = useLingui()
   const control = Dialog.useDialogControl()
-  const {gtMobile} = useBreakpoints()
+  const {gtPhone} = useBreakpoints()
   const {height: minHeight} = useWindowDimensions()
 
   return (
@@ -74,13 +80,12 @@ export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
           control.open()
           logEvent('progressGuide:followDialog:open', {})
         }}
-        size={gtMobile ? 'small' : 'large'}
-        color="primary"
-        variant="solid">
-        <ButtonIcon icon={PersonGroupIcon} />
+        size={gtPhone ? 'small' : 'large'}
+        color="primary">
         <ButtonText>
           <Trans>Find people to follow</Trans>
         </ButtonText>
+        {showArrow && <ButtonIcon icon={ArrowRightIcon} />}
       </Button>
       <Dialog.Outer control={control} nativeOptions={{minHeight}}>
         <Dialog.Handle />

src/components/ProgressGuide/List.tsx

@@ -2,37 +2,62 @@ import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
+import {useSession} from '#/state/session'
 import {
   useProgressGuide,
   useProgressGuideControls,
 } from '#/state/shell/progress-guide'
-import {atoms as a, useTheme} from '#/alf'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a, useBreakpoints, useLayoutBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
+import {Person_Stroke2_Corner2_Rounded as PersonIcon} from '#/components/icons/Person'
 import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times'
 import {Text} from '#/components/Typography'
+import type * as bsky from '#/types/bsky'
 import {FollowDialog} from './FollowDialog'
 import {ProgressGuideTask} from './Task'
 
+const TOTAL_AVATARS = 10
+
 export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
   const t = useTheme()
   const {_} = useLingui()
+  const {gtPhone} = useBreakpoints()
+  const {rightNavVisible} = useLayoutBreakpoints()
+  const {currentAccount} = useSession()
   const followProgressGuide = useProgressGuide('follow-10')
   const followAndLikeProgressGuide = useProgressGuide('like-10-and-follow-7')
   const guide = followProgressGuide || followAndLikeProgressGuide
   const {endProgressGuide} = useProgressGuideControls()
+  const {data: follows} = useProfileFollowsQuery(currentAccount?.did, {
+    limit: TOTAL_AVATARS,
+  })
+
+  const actualFollowsCount = follows?.pages?.[0]?.follows?.length ?? 0
+
+  // Hide if user already follows 10+ people
+  if (guide?.guide === 'follow-10' && actualFollowsCount >= TOTAL_AVATARS) {
+    return null
+  }
+
+  // Inline layout when left nav visible but no right sidebar (800-1100px)
+  const inlineLayout = gtPhone && !rightNavVisible
 
   if (guide) {
     return (
-      <View style={[a.flex_col, a.gap_md, style]}>
+      <View
+        style={[
+          a.flex_col,
+          a.gap_md,
+          a.rounded_md,
+          t.atoms.bg_contrast_25,
+          a.p_lg,
+          style,
+        ]}>
         <View style={[a.flex_row, a.align_center, a.justify_between]}>
-          <Text
-            style={[
-              t.atoms.text_contrast_medium,
-              a.font_semi_bold,
-              a.text_sm,
-              {textTransform: 'uppercase'},
-            ]}>
-            <Trans>Getting started</Trans>
+          <Text style={[t.atoms.text, a.font_semi_bold, a.text_md]}>
+            <Trans>Follow 10 people to get started</Trans>
           </Text>
           <Button
             variant="ghost"
@@ -40,20 +65,28 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
             color="secondary"
             shape="round"
             label={_(msg`Dismiss getting started guide`)}
-            onPress={endProgressGuide}>
-            <ButtonIcon icon={Times} size="sm" />
+            onPress={endProgressGuide}
+            style={[a.bg_transparent, {marginTop: -6, marginRight: -6}]}>
+            <ButtonIcon icon={Times} size="xs" />
           </Button>
         </View>
         {guide.guide === 'follow-10' && (
-          <>
-            <ProgressGuideTask
-              current={guide.numFollows + 1}
-              total={10 + 1}
-              title={_(msg`Follow 10 accounts`)}
-              subtitle={_(msg`Bluesky is better with friends!`)}
-            />
-            <FollowDialog guide={guide} />
-          </>
+          <View
+            style={[
+              inlineLayout
+                ? [
+                    a.flex_row,
+                    a.flex_wrap,
+                    a.align_center,
+                    a.justify_between,
+                    a.gap_sm,
+                  ]
+                : a.flex_col,
+              !inlineLayout && a.gap_md,
+            ]}>
+            <StackedAvatars follows={follows?.pages?.[0]?.follows} />
+            <FollowDialog guide={guide} showArrow={inlineLayout} />
+          </View>
         )}
         {guide.guide === 'like-10-and-follow-7' && (
           <>
@@ -76,3 +109,73 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
   }
   return null
 }
+
+function StackedAvatars({follows}: {follows?: bsky.profile.AnyProfileView[]}) {
+  const t = useTheme()
+  const {centerColumnOffset} = useLayoutBreakpoints()
+
+  // Smaller avatars for narrower viewport
+  const avatarSize = centerColumnOffset ? 30 : 37
+  const overlap = centerColumnOffset ? 9 : 11
+  const iconSize = centerColumnOffset ? 14 : 18
+
+  // Use actual follows count, not the guide's event counter
+  const followedAvatars = follows?.slice(0, TOTAL_AVATARS) ?? []
+  const remainingSlots = TOTAL_AVATARS - followedAvatars.length
+
+  // Total width calculation: first avatar + (remaining * visible portion)
+  const totalWidth = avatarSize + (TOTAL_AVATARS - 1) * (avatarSize - overlap)
+
+  return (
+    <View style={[a.flex_row, a.self_start, {width: totalWidth}]}>
+      {/* Show followed user avatars */}
+      {followedAvatars.map((follow, i) => (
+        <View
+          key={follow.did}
+          style={[
+            a.rounded_full,
+            {
+              marginLeft: i === 0 ? 0 : -overlap,
+              zIndex: TOTAL_AVATARS - i,
+              borderWidth: 2,
+              borderColor: t.atoms.bg_contrast_25.backgroundColor,
+            },
+          ]}>
+          <UserAvatar
+            type="user"
+            size={avatarSize - 4}
+            avatar={follow.avatar}
+          />
+        </View>
+      ))}
+      {/* Show placeholder avatars for remaining slots */}
+      {Array(remainingSlots)
+        .fill(0)
+        .map((_, i) => (
+          <View
+            key={`placeholder-${i}`}
+            style={[
+              a.align_center,
+              a.justify_center,
+              a.rounded_full,
+              t.atoms.bg_contrast_100,
+              {
+                width: avatarSize,
+                height: avatarSize,
+                marginLeft:
+                  followedAvatars.length === 0 && i === 0 ? 0 : -overlap,
+                zIndex: TOTAL_AVATARS - followedAvatars.length - i,
+                borderWidth: 2,
+                borderColor: t.atoms.bg_contrast_25.backgroundColor,
+              },
+            ]}>
+            <PersonIcon
+              width={iconSize}
+              height={iconSize}
+              fill={t.atoms.text_contrast_low.color}
+            />
+          </View>
+        ))}
+    </View>
+  )
+}

src/components/ProgressGuide/Task.tsx

@@ -31,11 +31,11 @@ export function ProgressGuideTask({
           size={20}
           thickness={3}
           borderWidth={0}
-          unfilledColor={t.palette.contrast_50}
+          unfilledColor={t.palette.contrast_100}
         />
       )}
 
-      <View style={[a.flex_col, a.gap_2xs, subtitle && {marginTop: -2}]}>
+      <View style={[a.flex_col, a.gap_xs, subtitle && {marginTop: -2}]}>
         <Text
           style={[
             a.text_sm,

src/components/RichText.tsx

@@ -11,6 +11,9 @@ import {RichTextTag} from '#/components/RichTextTag'
 import {Text, type TextProps} from '#/components/Typography'
 
 const WORD_WRAP = {wordWrap: 1}
+// lifted from facet detection in `RichText` impl, _without_ `gm` flags
+const URL_REGEX =
+  /(^|\s|\()((https?:\/\/[\S]+)|((?<domain>[a-z][a-z0-9]*(\.[a-z0-9]+)+)[\S]*))/i
 
 export type RichTextProps = TextStyleProp &
   Pick<TextProps, 'selectable' | 'onLayout' | 'onTextLayout'> & {
@@ -115,7 +118,8 @@ export function RichText({
         </ProfileHoverCard>,
       )
     } else if (link && AppBskyRichtextFacet.validateLink(link).success) {
-      if (disableLinks) {
+      const isValidLink = URL_REGEX.test(link.uri)
+      if (!isValidLink || disableLinks) {
         els.push(toShortUrl(segment.text))
       } else {
         els.push(

src/components/RichTextTag.tsx

@@ -48,10 +48,11 @@ export function RichTextTag({
     reset: resetRemove,
   } = useRemoveMutedWordsMutation()
   const navigation = useNavigation<NavigationProp>()
-  const label = _(msg`Hashtag ${tag}`)
+  const isCashtag = tag.startsWith('$')
+  const label = isCashtag ? _(msg`Cashtag ${tag}`) : _(msg`Hashtag ${tag}`)
   const hint = isNative
-    ? _(msg`Long press to open tag menu for #${tag}`)
-    : _(msg`Click to open tag menu for ${tag}`)
+    ? _(msg`Long press to open tag menu for ${isCashtag ? tag : `#${tag}`}`)
+    : _(msg`Click to open tag menu for ${isCashtag ? tag : `#${tag}`}`)
 
   const isMuted = Boolean(
     (preferences?.moderationPrefs.mutedWords?.find(
@@ -109,20 +110,24 @@ export function RichTextTag({
       <Menu.Outer>
         <Menu.Group>
           <Menu.Item
-            label={_(msg`See ${tag} posts`)}
+            label={_(msg`See ${isCashtag ? tag : `#${tag}`} posts`)}
             onPress={() => {
               navigation.push('Hashtag', {
                 tag: encodeURIComponent(tag),
               })
             }}>
             <Menu.ItemText>
-              <Trans>See #{tag} posts</Trans>
+              {isCashtag ? (
+                <Trans>See {tag} posts</Trans>
+              ) : (
+                <Trans>See #{tag} posts</Trans>
+              )}
             </Menu.ItemText>
             <Menu.ItemIcon icon={Search} />
           </Menu.Item>
           {authorHandle && !isInvalidHandle(authorHandle) && (
             <Menu.Item
-              label={_(msg`See ${tag} posts by user`)}
+              label={_(msg`See ${isCashtag ? tag : `#${tag}`} posts by user`)}
               onPress={() => {
                 navigation.push('Hashtag', {
                   tag: encodeURIComponent(tag),
@@ -130,7 +135,11 @@ export function RichTextTag({
                 })
               }}>
               <Menu.ItemText>
-                <Trans>See #{tag} posts by user</Trans>
+                {isCashtag ? (
+                  <Trans>See {tag} posts by user</Trans>
+                ) : (
+                  <Trans>See #{tag} posts by user</Trans>
+                )}
               </Menu.ItemText>
               <Menu.ItemIcon icon={Person} />
             </Menu.Item>

src/components/StarterPack/QrCode.tsx

@@ -1,4 +1,4 @@
-import {lazy} from 'react'
+import {lazy, useState} from 'react'
 import {View} from 'react-native'
 // @ts-expect-error missing types
 import QRCode from 'react-native-qrcode-styled'
@@ -102,39 +102,74 @@ export function QrCode({
 
 export function QrCodeInner({link}: {link: string}) {
   const t = useTheme()
+  const [logoArea, setLogoArea] = useState<{
+    x: number
+    y: number
+    width: number
+    height: number
+  } | null>(null)
+
+  const onLogoAreaChange = (area: {
+    x: number
+    y: number
+    width: number
+    height: number
+  }) => {
+    setLogoArea(area)
+  }
 
   return (
-    <QRCode
-      data={link}
-      style={[
-        a.rounded_sm,
-        {height: 225, width: 225, backgroundColor: '#f3f3f3'},
-      ]}
-      pieceSize={isWeb ? 8 : 6}
-      padding={20}
-      // pieceLiquidRadius={2}
-      pieceBorderRadius={isWeb ? 4.5 : 3.5}
-      outerEyesOptions={{
-        topLeft: {
-          borderRadius: [12, 12, 0, 12],
-          color: t.palette.primary_500,
-        },
-        topRight: {
-          borderRadius: [12, 12, 12, 0],
-          color: t.palette.primary_500,
-        },
-        bottomLeft: {
-          borderRadius: [12, 0, 12, 12],
-          color: t.palette.primary_500,
-        },
-      }}
-      innerEyesOptions={{borderRadius: 3}}
-      logo={{
-        href: require('../../../assets/logo.png'),
-        scale: 0.95,
-        padding: 2,
-        hidePieces: true,
-      }}
-    />
+    <View style={{position: 'relative'}}>
+      {/* An SVG version of the logo is placed on top of normal `QRCode` `logo` prop, since the PNG fails to load before the export completes on web. */}
+      {isWeb && logoArea && (
+        <View
+          style={{
+            position: 'absolute',
+            left: logoArea.x,
+            top: logoArea.y + 1,
+            zIndex: 1,
+            padding: 4,
+          }}>
+          <Logo width={logoArea.width - 14} height={logoArea.height - 14} />
+        </View>
+      )}
+      <QRCode
+        data={link}
+        style={[
+          a.rounded_sm,
+          {height: 225, width: 225, backgroundColor: '#f3f3f3'},
+        ]}
+        pieceSize={isWeb ? 8 : 6}
+        padding={20}
+        pieceBorderRadius={isWeb ? 4.5 : 3.5}
+        outerEyesOptions={{
+          topLeft: {
+            borderRadius: [12, 12, 0, 12],
+            color: t.palette.primary_500,
+          },
+          topRight: {
+            borderRadius: [12, 12, 12, 0],
+            color: t.palette.primary_500,
+          },
+          bottomLeft: {
+            borderRadius: [12, 0, 12, 12],
+            color: t.palette.primary_500,
+          },
+        }}
+        innerEyesOptions={{borderRadius: 3}}
+        logo={{
+          href: require('../../../assets/logo.png'),
+          ...(isWeb && {
+            onChange: onLogoAreaChange,
+            padding: 28,
+          }),
+          ...(!isWeb && {
+            padding: 2,
+            scale: 0.95,
+          }),
+          hidePieces: true,
+        }}
+      />
+    </View>
   )
 }

src/components/TrendingTopics.tsx

@@ -20,8 +20,12 @@ export function TrendingTopic({
   topic: raw,
   size,
   style,
-}: {topic: TrendingTopic; size?: 'large' | 'small'} & ViewStyleProp) {
-  const t = useTheme()
+  hovered,
+}: {
+  topic: TrendingTopic
+  size?: 'large' | 'small'
+  hovered?: boolean
+} & ViewStyleProp) {
   const topic = useTopic(raw)
 
   const isSmall = size === 'small'
@@ -33,18 +37,14 @@ export function TrendingTopic({
       style={[
         a.flex_row,
         a.align_center,
-        a.rounded_full,
-        a.border,
-        t.atoms.border_contrast_medium,
-        t.atoms.bg,
         isSmall
           ? [
               {
-                paddingVertical: 5,
-                paddingHorizontal: 10,
+                paddingVertical: 2,
+                paddingHorizontal: 4,
               },
             ]
-          : [a.py_sm, a.px_md],
+          : [a.py_xs, a.px_sm],
         hasIcon && {gap: 6},
         style,
       ]}>
@@ -93,6 +93,7 @@ export function TrendingTopic({
           a.font_semi_bold,
           a.leading_tight,
           isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}],
+          hovered && {textDecorationLine: 'underline'},
         ]}
         numberOfLines={1}>
         {topic.displayName}

src/components/dialogs/Context.tsx

@@ -3,6 +3,7 @@ import {createContext, useContext, useMemo, useState} from 'react'
 import {type AgeAssuranceRedirectDialogState} from '#/components/ageAssurance/AgeAssuranceRedirectDialog'
 import * as Dialog from '#/components/Dialog'
 import {type Screen} from '#/components/dialogs/EmailDialog/types'
+import {type ReportSubject} from '#/components/moderation/ReportDialog'
 
 type Control = Dialog.DialogControlProps
 
@@ -24,6 +25,7 @@ type ControlsContext = {
     share?: boolean
   }>
   ageAssuranceRedirectDialogControl: StatefulControl<AgeAssuranceRedirectDialogState>
+  reportDialogControl: StatefulControl<{subject: ReportSubject}>
 }
 
 const ControlsContext = createContext<ControlsContext | null>(null)
@@ -51,6 +53,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   }>()
   const ageAssuranceRedirectDialogControl =
     useStatefulDialogControl<AgeAssuranceRedirectDialogState>()
+  const reportDialogControl = useStatefulDialogControl<{
+    subject: ReportSubject
+  }>()
 
   const ctx = useMemo<ControlsContext>(
     () => ({
@@ -60,6 +65,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       emailDialogControl,
       linkWarningDialogControl,
       ageAssuranceRedirectDialogControl,
+      reportDialogControl,
     }),
     [
       mutedWordsDialogControl,
@@ -68,6 +74,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       emailDialogControl,
       linkWarningDialogControl,
       ageAssuranceRedirectDialogControl,
+      reportDialogControl,
     ],
   )
 

src/components/dialogs/nuxs/LiveNowBetaDialog.tsx

@@ -0,0 +1,209 @@
+import {useCallback, useMemo} from 'react'
+import {View} from 'react-native'
+import {Image} from 'expo-image'
+import {LinearGradient} from 'expo-linear-gradient'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isWeb} from '#/platform/detection'
+import {atoms as a, select, useTheme, utils, web} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {useNuxDialogContext} from '#/components/dialogs/nuxs'
+import {
+  createIsEnabledCheck,
+  isExistingUserAsOf,
+} from '#/components/dialogs/nuxs/utils'
+import {Beaker_Stroke2_Corner2_Rounded as BeakerIcon} from '#/components/icons/Beaker'
+import {Text} from '#/components/Typography'
+import {IS_E2E} from '#/env'
+
+export const enabled = createIsEnabledCheck(props => {
+  return (
+    !IS_E2E &&
+    isExistingUserAsOf(
+      '2026-01-16T00:00:00.000Z',
+      props.currentProfile.createdAt,
+    ) &&
+    props.gate('live_now_beta')
+  )
+})
+
+export function LiveNowBetaDialog() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const nuxDialogs = useNuxDialogContext()
+  const control = Dialog.useDialogControl()
+
+  Dialog.useAutoOpen(control)
+
+  const onClose = useCallback(() => {
+    nuxDialogs.dismissActiveNux()
+  }, [nuxDialogs])
+
+  const shadowColor = useMemo(() => {
+    return select(t.name, {
+      light: utils.alpha(t.palette.primary_900, 0.4),
+      dark: utils.alpha(t.palette.primary_25, 0.4),
+      dim: utils.alpha(t.palette.primary_25, 0.4),
+    })
+  }, [t])
+
+  return (
+    <Dialog.Outer
+      control={control}
+      onClose={onClose}
+      nativeOptions={{preventExpansion: true}}>
+      <Dialog.Handle fill={t.palette.primary_700} />
+
+      <Dialog.ScrollableInner
+        label={_(msg`Show when you’re live`)}
+        style={[web({maxWidth: 440})]}
+        contentContainerStyle={[
+          {
+            paddingTop: 0,
+            paddingLeft: 0,
+            paddingRight: 0,
+          },
+        ]}>
+        <View
+          style={[
+            a.align_center,
+            a.overflow_hidden,
+            {
+              gap: 16,
+              paddingTop: isWeb ? 24 : 40,
+              borderTopLeftRadius: a.rounded_md.borderRadius,
+              borderTopRightRadius: a.rounded_md.borderRadius,
+            },
+          ]}>
+          <LinearGradient
+            colors={[
+              t.palette.primary_100,
+              utils.alpha(t.palette.primary_100, 0),
+            ]}
+            locations={[0, 1]}
+            start={{x: 0, y: 0}}
+            end={{x: 0, y: 1}}
+            style={[a.absolute, a.inset_0]}
+          />
+          <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+            <BeakerIcon fill={t.palette.primary_700} size="sm" />
+            <Text
+              style={[
+                a.font_semi_bold,
+                {
+                  color: t.palette.primary_700,
+                },
+              ]}>
+              <Trans>Beta Feature</Trans>
+            </Text>
+          </View>
+
+          <View
+            style={[
+              a.relative,
+              a.w_full,
+              {
+                paddingTop: 8,
+                paddingHorizontal: 32,
+                paddingBottom: 32,
+              },
+            ]}>
+            <View
+              style={[
+                {
+                  borderRadius: 24,
+                  aspectRatio: 652 / 211,
+                },
+                isWeb
+                  ? [
+                      {
+                        boxShadow: `0px 10px 15px -3px ${shadowColor}`,
+                      },
+                    ]
+                  : [
+                      t.atoms.shadow_md,
+                      {
+                        shadowColor,
+                        shadowOpacity: 0.2,
+                        shadowOffset: {
+                          width: 0,
+                          height: 10,
+                        },
+                      },
+                    ],
+              ]}>
+              <Image
+                accessibilityIgnoresInvertColors
+                source={require('../../../../assets/images/live_now_beta.webp')}
+                style={[
+                  a.w_full,
+                  {
+                    aspectRatio: 652 / 211,
+                  },
+                ]}
+                alt={_(
+                  msg({
+                    message: `A screenshot of a post from @esb.lol, showing the user is currently livestreaming content on Twitch. The post reads: "Hello! I'm live on Twitch, and I'm testing Bluesky's latest feature too!"`,
+                    comment:
+                      'Contains a post that originally appeared in English. Consider translating the post text if it makes sense in your language, and noting that the post was translated from English.',
+                  }),
+                )}
+              />
+            </View>
+          </View>
+        </View>
+        <View style={[a.align_center, a.px_xl, a.gap_2xl, a.pb_sm]}>
+          <View style={[a.gap_sm, a.align_center]}>
+            <Text
+              style={[
+                a.text_3xl,
+                a.leading_tight,
+                a.font_bold,
+                a.text_center,
+                {
+                  fontSize: isWeb ? 28 : 32,
+                  maxWidth: 360,
+                },
+              ]}>
+              <Trans>Show when you’re live</Trans>
+            </Text>
+            <Text
+              style={[
+                a.text_md,
+                a.leading_snug,
+                a.text_center,
+                {
+                  maxWidth: 340,
+                },
+              ]}>
+              <Trans>
+                Streaming on Twitch? Set your live status on Bluesky to add a
+                badge to your avatar. Tapping it takes people straight to your
+                stream.
+              </Trans>
+            </Text>
+          </View>
+
+          {!isWeb && (
+            <Button
+              label={_(msg`Close`)}
+              size="large"
+              color="primary"
+              onPress={() => {
+                control.close()
+              }}
+              style={[a.w_full]}>
+              <ButtonText>
+                <Trans>Close</Trans>
+              </ButtonText>
+            </Button>
+          )}
+        </View>
+
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}

src/components/dialogs/nuxs/index.tsx

@@ -20,9 +20,9 @@ import {useProfileQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {useOnboardingState} from '#/state/shell'
 import {
-  enabled as isFindContactsAnnouncementEnabled,
-  FindContactsAnnouncement,
-} from '#/components/dialogs/nuxs/FindContactsAnnouncement'
+  enabled as isLiveNowBetaDialogEnabled,
+  LiveNowBetaDialog,
+} from '#/components/dialogs/nuxs/LiveNowBetaDialog'
 import {isSnoozed, snooze, unsnooze} from '#/components/dialogs/nuxs/snoozing'
 import {type EnabledCheckProps} from '#/components/dialogs/nuxs/utils'
 import {useGeolocation} from '#/geolocation'
@@ -37,8 +37,8 @@ const queuedNuxs: {
   enabled?: (props: EnabledCheckProps) => boolean
 }[] = [
   {
-    id: Nux.FindContactsAnnouncement,
-    enabled: isFindContactsAnnouncementEnabled,
+    id: Nux.LiveNowBetaDialog,
+    enabled: isLiveNowBetaDialogEnabled,
   },
 ]
 
@@ -186,9 +186,7 @@ function Inner({
   return (
     <Context.Provider value={ctx}>
       {/*For example, activeNux === Nux.NeueTypography && <NeueTypography />*/}
-      {activeNux === Nux.FindContactsAnnouncement && (
-        <FindContactsAnnouncement />
-      )}
+      {activeNux === Nux.LiveNowBetaDialog && <LiveNowBetaDialog />}
     </Context.Provider>
   )
 }

src/components/interstitials/Trending.tsx

@@ -41,7 +41,7 @@ export function Inner() {
   }, [setTrendingDisabled])
 
   return error || noTopics ? null : (
-    <View style={[t.atoms.border_contrast_low, a.border_t]}>
+    <View style={[t.atoms.border_contrast_low, a.border_t, a.border_b]}>
       <BlockDrawerGesture>
         <ScrollView
           horizontal
@@ -99,10 +99,9 @@ export function Inner() {
                     <View style={[a.py_lg]}>
                       <Text
                         style={[
-                          t.atoms.text,
+                          t.atoms.text_contrast_medium,
                           a.text_sm,
                           a.font_semi_bold,
-                          {opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
                         ]}>
                         {topic.topic}
                       </Text>

src/components/live/EditLiveDialog.tsx

@@ -18,7 +18,6 @@ import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Clock_Stroke2_Corner0_Rounded as ClockIcon} from '#/components/icons/Clock'
-import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {LinkPreview} from './LinkPreview'
@@ -172,26 +171,13 @@ function DialogInner({
             </TextField.Root>
           </View>
           {(liveLinkError || linkMetaError) && (
-            <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-              <WarningIcon
-                style={[{color: t.palette.negative_500}]}
-                size="sm"
-              />
-              <Text
-                style={[
-                  a.text_sm,
-                  a.leading_snug,
-                  a.flex_1,
-                  a.font_semi_bold,
-                  {color: t.palette.negative_500},
-                ]}>
-                {liveLinkError ? (
-                  <Trans>This is not a valid link</Trans>
-                ) : (
-                  cleanError(linkMetaError)
-                )}
-              </Text>
-            </View>
+            <Admonition type="error">
+              {liveLinkError ? (
+                <Trans>This is not a valid link</Trans>
+              ) : (
+                cleanError(linkMetaError)
+              )}
+            </Admonition>
           )}
 
           <LinkPreview linkMeta={linkMeta} loading={linkMetaLoading} />

src/components/live/GoLiveDialog.tsx

@@ -6,13 +6,14 @@ import {useLingui} from '@lingui/react'
 import {cleanError} from '#/lib/strings/errors'
 import {definitelyUrl} from '#/lib/strings/url-helpers'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useLiveNowConfig} from '#/state/service-config'
 import {useTickEveryMinute} from '#/state/shell'
 import {atoms as a, ios, native, platform, useTheme, web} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
-import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import {getLiveServiceNames} from '#/components/live/utils'
 import {Loader} from '#/components/Loader'
 import * as ProfileCard from '#/components/ProfileCard'
 import * as Select from '#/components/Select'
@@ -49,6 +50,10 @@ function DialogInner({profile}: {profile: bsky.profile.AnyProfileView}) {
   const [duration, setDuration] = useState(60)
   const moderationOpts = useModerationOpts()
   const tick = useTickEveryMinute()
+  const liveNowConfig = useLiveNowConfig()
+  const {formatted: allowedServices} = getLiveServiceNames(
+    liveNowConfig.allowedDomains,
+  )
 
   const time = useCallback(
     (offset: number) => {
@@ -139,27 +144,21 @@ function DialogInner({profile}: {profile: bsky.profile.AnyProfileView}) {
               />
             </TextField.Root>
           </View>
-          {(liveLinkError || linkMetaError) && (
-            <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-              <WarningIcon
-                style={[{color: t.palette.negative_500}]}
-                size="sm"
-              />
-              <Text
-                style={[
-                  a.text_sm,
-                  a.leading_snug,
-                  a.flex_1,
-                  a.font_semi_bold,
-                  {color: t.palette.negative_500},
-                ]}>
-                {liveLinkError ? (
-                  <Trans>This is not a valid link</Trans>
-                ) : (
-                  cleanError(linkMetaError)
-                )}
-              </Text>
-            </View>
+          {liveLinkError || linkMetaError ? (
+            <Admonition type="error">
+              {liveLinkError ? (
+                <Trans>This is not a valid link</Trans>
+              ) : (
+                cleanError(linkMetaError)
+              )}
+            </Admonition>
+          ) : (
+            <Admonition type="tip">
+              <Trans>
+                The following services are enabled for your account:{' '}
+                {allowedServices}
+              </Trans>
+            </Admonition>
           )}
 
           <LinkPreview linkMeta={linkMeta} loading={linkMetaLoading} />

src/components/live/GoLiveDisabledDialog.tsx

@@ -0,0 +1,147 @@
+import {useCallback, useState} from 'react'
+import {View} from 'react-native'
+import {type AppBskyActorDefs, ToolsOzoneReportDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useMutation} from '@tanstack/react-query'
+
+import {BLUESKY_MOD_SERVICE_HEADERS} from '#/lib/constants'
+import {logger} from '#/logger'
+import {useAgent} from '#/state/session'
+import {atoms as a, web} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Loader} from '#/components/Loader'
+import * as Toast from '#/components/Toast'
+import {Text} from '#/components/Typography'
+
+export function GoLiveDisabledDialog({
+  control,
+  status,
+}: {
+  control: Dialog.DialogControlProps
+  status: AppBskyActorDefs.StatusView
+}) {
+  return (
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
+      <Dialog.Handle />
+      <DialogInner control={control} status={status} />
+    </Dialog.Outer>
+  )
+}
+
+export function DialogInner({
+  control,
+  status,
+}: {
+  control: Dialog.DialogControlProps
+  status: AppBskyActorDefs.StatusView
+}) {
+  const {_} = useLingui()
+  const agent = useAgent()
+  const [details, setDetails] = useState('')
+
+  const {mutate, isPending} = useMutation({
+    mutationFn: async () => {
+      if (!agent.session?.did) {
+        throw new Error('Not logged in')
+      }
+      if (!status.uri || !status.cid) {
+        throw new Error('Status is missing uri or cid')
+      }
+
+      if (__DEV__) {
+        logger.info('Submitting go live appeal', {
+          details,
+        })
+      } else {
+        await agent.createModerationReport(
+          {
+            reasonType: ToolsOzoneReportDefs.REASONAPPEAL,
+            subject: {
+              $type: 'com.atproto.repo.strongRef',
+              uri: status.uri,
+              cid: status.cid,
+            },
+            reason: details,
+          },
+          {
+            encoding: 'application/json',
+            headers: BLUESKY_MOD_SERVICE_HEADERS,
+          },
+        )
+      }
+    },
+    onError: () => {
+      Toast.show(_(msg`Failed to submit appeal, please try again.`), {
+        type: 'error',
+      })
+    },
+    onSuccess: () => {
+      control.close()
+      Toast.show(_(msg({message: 'Appeal submitted', context: 'toast'})), {
+        type: 'success',
+      })
+    },
+  })
+
+  const onSubmit = useCallback(() => mutate(), [mutate])
+
+  return (
+    <Dialog.ScrollableInner
+      label={_(msg`Appeal livestream suspension`)}
+      style={[web({maxWidth: 400})]}>
+      <View style={[a.gap_lg]}>
+        <View style={[a.gap_md]}>
+          <Text
+            style={[
+              a.flex_1,
+              a.text_2xl,
+              a.font_semi_bold,
+              a.leading_snug,
+              a.pr_4xl,
+            ]}>
+            <Trans>Going live is currently disabled for your account</Trans>
+          </Text>
+          <Text style={[a.text_md, a.leading_snug]}>
+            <Trans>
+              You are currently blocked from using the Go Live feature. To
+              appeal this moderation decision, please submit the form below.
+            </Trans>
+          </Text>
+          <Text style={[a.text_md, a.leading_snug]}>
+            <Trans>
+              This appeal will be sent to Bluesky's moderation service.
+            </Trans>
+          </Text>
+        </View>
+
+        <View style={[a.gap_md]}>
+          <Dialog.Input
+            label={_(msg`Text input field`)}
+            placeholder={_(
+              msg`Please explain why you think your Go Live access was incorrectly disabled.`,
+            )}
+            value={details}
+            onChangeText={setDetails}
+            autoFocus={true}
+            numberOfLines={3}
+            multiline
+            maxLength={300}
+          />
+          <Button
+            testID="submitBtn"
+            variant="solid"
+            color="primary"
+            size="large"
+            onPress={onSubmit}
+            label={_(msg`Submit`)}>
+            <ButtonText>{_(msg`Submit`)}</ButtonText>
+            {isPending && <ButtonIcon icon={Loader} />}
+          </Button>
+        </View>
+      </View>
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}

src/components/live/LiveStatusDialog.tsx

@@ -17,6 +17,9 @@ import {unstableCacheProfileView} from '#/state/queries/profile'
 import {android, atoms as a, platform, tokens, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components/icons/CircleInfo'
+import {createStaticClick, SimpleInlineLinkText} from '#/components/Link'
+import {useGlobalReportDialogControl} from '#/components/moderation/ReportDialog'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
@@ -28,6 +31,7 @@ export function LiveStatusDialog({
   control,
   profile,
   embed,
+  status,
 }: {
   control: Dialog.DialogControlProps
   profile: bsky.profile.AnyProfileView
@@ -38,7 +42,12 @@ export function LiveStatusDialog({
   return (
     <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle difference={!!embed.external.thumb} />
-      <DialogInner profile={profile} embed={embed} navigation={navigation} />
+      <DialogInner
+        status={status}
+        profile={profile}
+        embed={embed}
+        navigation={navigation}
+      />
     </Dialog.Outer>
   )
 }
@@ -47,10 +56,12 @@ function DialogInner({
   profile,
   embed,
   navigation,
+  status,
 }: {
   profile: bsky.profile.AnyProfileView
   embed: AppBskyEmbedExternal.View
   navigation: NavigationProp
+  status: AppBskyActorDefs.StatusView
 }) {
   const {_} = useLingui()
   const control = Dialog.useDialogContext()
@@ -69,6 +80,7 @@ function DialogInner({
       contentContainerStyle={[a.pt_0, a.px_0]}
       style={[web({maxWidth: 420}), a.overflow_hidden]}>
       <LiveStatus
+        status={status}
         profile={profile}
         embed={embed}
         onPressOpenProfile={onPressOpenProfile}
@@ -79,11 +91,13 @@ function DialogInner({
 }
 
 export function LiveStatus({
+  status,
   profile,
   embed,
   padding = 'xl',
   onPressOpenProfile,
 }: {
+  status: AppBskyActorDefs.StatusView
   profile: bsky.profile.AnyProfileView
   embed: AppBskyEmbedExternal.View
   padding?: 'lg' | 'xl'
@@ -94,6 +108,8 @@ export function LiveStatus({
   const queryClient = useQueryClient()
   const openLink = useOpenLink()
   const moderationOpts = useModerationOpts()
+  const reportDialogControl = useGlobalReportDialogControl()
+  const dialogContext = Dialog.useDialogContext()
 
   return (
     <>
@@ -205,15 +221,43 @@ export function LiveStatus({
             </Button>
           </ProfileCard.Header>
         )}
-        <Text
+        <View
           style={[
-            a.w_full,
-            a.text_center,
-            t.atoms.text_contrast_low,
-            a.text_sm,
+            a.flex_row,
+            a.align_center,
+            a.justify_between,
+            a.flex_1,
+            a.pt_sm,
           ]}>
-          <Trans>Live feature is in beta testing</Trans>
-        </Text>
+          <View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}>
+            <CircleInfoIcon size="sm" fill={t.atoms.text_contrast_low.color} />
+            <Text style={[t.atoms.text_contrast_low, a.text_sm]}>
+              <Trans>Live feature is in beta</Trans>
+            </Text>
+          </View>
+          {status && (
+            <SimpleInlineLinkText
+              label={_(msg`Report this livestream`)}
+              {...createStaticClick(() => {
+                function open() {
+                  reportDialogControl.open({
+                    subject: {
+                      ...status,
+                      $type: 'app.bsky.actor.defs#statusView',
+                    },
+                  })
+                }
+                if (dialogContext.isWithinDialog) {
+                  dialogContext.close(open)
+                } else {
+                  open()
+                }
+              })}
+              style={[a.text_sm, a.underline, t.atoms.text_contrast_medium]}>
+              <Trans>Report</Trans>
+            </SimpleInlineLinkText>
+          )}
+        </View>
       </View>
     </>
   )

src/components/live/queries.ts

@@ -18,10 +18,10 @@ import {useLiveNowConfig} from '#/state/service-config'
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {useDialogContext} from '#/components/Dialog'
+import {getLiveServiceNames} from '#/components/live/utils'
 
 export function useLiveLinkMetaQuery(url: string | null) {
   const liveNowConfig = useLiveNowConfig()
-  const {currentAccount} = useSession()
   const {_} = useLingui()
 
   const agent = useAgent()
@@ -30,13 +30,14 @@ export function useLiveLinkMetaQuery(url: string | null) {
     queryKey: ['link-meta', url],
     queryFn: async () => {
       if (!url) return undefined
-      const config = liveNowConfig.find(cfg => cfg.did === currentAccount?.did)
-
-      if (!config) throw new Error(_(msg`You are not allowed to go live`))
-
       const urlp = new URL(url)
-      if (!config.domains.includes(urlp.hostname)) {
-        throw new Error(_(msg`${urlp.hostname} is not a valid URL`))
+      if (!liveNowConfig.allowedDomains.has(urlp.hostname)) {
+        const {formatted} = getLiveServiceNames(liveNowConfig.allowedDomains)
+        throw new Error(
+          _(
+            msg`This service is not supported while the Live feature is in beta. Allowed services: ${formatted}.`,
+          ),
+        )
       }
 
       return await getLinkMeta(agent, url)

src/components/live/utils.ts

@@ -35,3 +35,28 @@ export function useDebouncedValue<T>(val: T, delayMs: number): T {
 
   return prev
 }
+
+const serviceUrlToNameMap: Record<string, string> = {
+  'twitch.tv': 'Twitch',
+  'www.twitch.tv': 'Twitch',
+  'youtube.com': 'YouTube',
+  'www.youtube.com': 'YouTube',
+  'youtu.be': 'YouTube',
+  'nba.com': 'NBA',
+  'www.nba.com': 'NBA',
+  'nba.smart.link': 'nba.smart.link',
+  'espn.com': 'ESPN',
+  'www.espn.com': 'ESPN',
+  'stream.place': 'Streamplace',
+  'skylight.social': 'Skylight',
+}
+
+export function getLiveServiceNames(domains: Set<string>) {
+  const names = Array.from(
+    new Set(Array.from(domains.values()).map(d => serviceUrlToNameMap[d] || d)),
+  )
+  return {
+    names,
+    formatted: names.join(', '),
+  }
+}

src/components/moderation/ReportDialog/action.ts

@@ -70,6 +70,7 @@ export function useSubmitReportMutation() {
           }
           break
         }
+        case 'status':
         case 'post':
         case 'list':
         case 'feed':

src/components/moderation/ReportDialog/const.ts

@@ -3,6 +3,8 @@ import {
   ToolsOzoneReportDefs as OzoneReportDefs,
 } from '@atproto/api'
 
+import {type ParsedReportSubject} from '#/components/moderation/ReportDialog/types'
+
 export const DMCA_LINK = 'https://bsky.social/about/support/copyright'
 export const SUPPORT_PAGE = 'https://bsky.social/about/support'
 
@@ -112,3 +114,10 @@ export const BSKY_LABELER_ONLY_REPORT_REASONS: Set<OzoneReportDefs.ReasonType> =
     OzoneReportDefs.REASONCHILDSAFETYOTHER,
     OzoneReportDefs.REASONVIOLENCEEXTREMISTCONTENT,
   ])
+
+/**
+ * Set of _parsed_ subject types that should only be sent to Bluesky's
+ * moderation service.
+ */
+export const BSKY_LABELER_ONLY_SUBJECT_TYPES: Set<ParsedReportSubject['type']> =
+  new Set(['convoMessage', 'status'])

src/components/moderation/ReportDialog/copy.ts

@@ -14,6 +14,12 @@ export function useCopyForSubject(subject: ParsedReportSubject) {
           subtitle: _(msg`Why should this user be reviewed?`),
         }
       }
+      case 'status': {
+        return {
+          title: _(msg`Report this livestream`),
+          subtitle: _(msg`Why should this livestream be reviewed?`),
+        }
+      }
       case 'post': {
         return {
           title: _(msg`Report this post`),

src/components/moderation/ReportDialog/index.tsx

@@ -16,6 +16,7 @@ import {atoms as a, useGutters, useTheme} from '#/alf'
 import * as Admonition from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Retry} from '#/components/icons/ArrowRotate'
 import {
@@ -31,6 +32,7 @@ import {Text} from '#/components/Typography'
 import {useSubmitReportMutation} from './action'
 import {
   BSKY_LABELER_ONLY_REPORT_REASONS,
+  BSKY_LABELER_ONLY_SUBJECT_TYPES,
   NEW_TO_OLD_REASONS_MAP,
   SUPPORT_PAGE,
 } from './const'
@@ -44,17 +46,27 @@ import {
   useReportOptions,
 } from './utils/useReportOptions'
 
+export {type ReportSubject} from './types'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
+export function useGlobalReportDialogControl() {
+  return useGlobalDialogsControlContext().reportDialogControl
+}
+
 const logger = Logger.create(Logger.Context.ReportDialog)
 
+export function GlobalReportDialog() {
+  const {value, control} = useGlobalReportDialogControl()
+  return <ReportDialog control={control} subject={value?.subject} />
+}
+
 export function ReportDialog(
   props: Omit<ReportDialogProps, 'subject'> & {
-    subject: ReportSubject
+    subject?: ReportSubject
   },
 ) {
   const subject = React.useMemo(
-    () => parseReportSubject(props.subject),
+    () => (props.subject ? parseReportSubject(props.subject) : undefined),
     [props.subject],
   )
   const onClose = React.useCallback(() => {
@@ -116,8 +128,10 @@ function Inner(props: ReportDialogProps) {
   const isBskyOnlyReason = state?.selectedOption?.reason
     ? BSKY_LABELER_ONLY_REPORT_REASONS.has(state.selectedOption.reason)
     : false
-  // some subjects (chats) only go to Bluesky
-  const isBskyOnlySubject = props.subject.type === 'convoMessage'
+  // some subjects ONLY go to Bluesky
+  const isBskyOnlySubject = BSKY_LABELER_ONLY_SUBJECT_TYPES.has(
+    props.subject.type,
+  )
 
   /**
    * Labelers that support this `subject` and its NSID collection
@@ -824,12 +838,7 @@ function LabelerCard({
               {title}
             </Text>
             <Text
-              style={[
-                a.text_sm,
-                ,
-                a.leading_snug,
-                t.atoms.text_contrast_medium,
-              ]}>
+              style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
               <Trans>By {sanitizeHandle(labeler.creator.handle, '@')}</Trans>
             </Text>
           </View>

src/components/moderation/ReportDialog/types.ts

@@ -18,6 +18,7 @@ export type ReportSubject =
   | $Typed<AppBskyActorDefs.ProfileViewBasic>
   | $Typed<AppBskyActorDefs.ProfileView>
   | $Typed<AppBskyActorDefs.ProfileViewDetailed>
+  | $Typed<AppBskyActorDefs.StatusView>
   | $Typed<AppBskyGraphDefs.ListView>
   | $Typed<AppBskyFeedDefs.GeneratorView>
   | $Typed<AppBskyGraphDefs.StarterPackView>
@@ -38,6 +39,12 @@ export type ParsedReportSubject =
         quote: boolean
       }
     }
+  | {
+      type: 'status'
+      uri: string
+      cid: string
+      nsid: string
+    }
   | {
       type: 'list'
       uri: string

src/components/moderation/ReportDialog/utils/parseReportSubject.ts

@@ -33,6 +33,14 @@ export function parseReportSubject(
       did: subject.did,
       nsid: 'app.bsky.actor.profile',
     }
+  } else if (AppBskyActorDefs.isStatusView(subject)) {
+    if (!subject.uri || !subject.cid) return
+    return {
+      type: 'status',
+      uri: subject.uri,
+      cid: subject.cid,
+      nsid: 'app.bsky.actor.status',
+    }
   } else if (AppBskyGraphDefs.isListView(subject)) {
     return {
       type: 'list',

src/env/common.ts

@@ -108,8 +108,18 @@ export const GCP_PROJECT_ID: number =
  * URLs for the app config web worker. Can be a
  * locally running server, see `env.example` for more.
  */
-export const BAPP_CONFIG_DEV_URL = process.env.BAPP_CONFIG_DEV_URL
-export const BAPP_CONFIG_PROD_URL = `https://ip.bsky.app`
-export const BAPP_CONFIG_URL = IS_DEV
-  ? (BAPP_CONFIG_DEV_URL ?? BAPP_CONFIG_PROD_URL)
-  : BAPP_CONFIG_PROD_URL
+export const GEOLOCATION_DEV_URL = process.env.GEOLOCATION_DEV_URL
+export const GEOLOCATION_PROD_URL = `https://ip.bsky.app`
+export const GEOLOCATION_URL = IS_DEV
+  ? (GEOLOCATION_DEV_URL ?? GEOLOCATION_PROD_URL)
+  : GEOLOCATION_PROD_URL
+
+/**
+ * URLs for the live-event config web worker. Can be a
+ * locally running server, see `env.example` for more.
+ */
+export const LIVE_EVENTS_DEV_URL = process.env.LIVE_EVENTS_DEV_URL
+export const LIVE_EVENTS_PROD_URL = `https://live-events.workers.bsky.app`
+export const LIVE_EVENTS_URL = IS_DEV
+  ? (LIVE_EVENTS_DEV_URL ?? LIVE_EVENTS_PROD_URL)
+  : LIVE_EVENTS_PROD_URL

src/features/liveEvents/components/DiscoverFeedLiveEventFeedsAndTrendingBanner.tsx

@@ -0,0 +1,89 @@
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useTrendingSettings} from '#/state/preferences/trending'
+import {atoms as a, useLayoutBreakpoints} from '#/alf'
+import {Button} from '#/components/Button'
+import {DotGrid_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
+import {TrendingInterstitial} from '#/components/interstitials/Trending'
+import {LiveEventFeedCardWide} from '#/features/liveEvents/components/LiveEventFeedCardWide'
+import {
+  LiveEventFeedOptionsMenu,
+  useDialogControl,
+} from '#/features/liveEvents/components/LiveEventFeedOptionsMenu'
+import {useUserPreferencedLiveEvents} from '#/features/liveEvents/context'
+import {type LiveEventFeed} from '#/features/liveEvents/types'
+
+export function DiscoverFeedLiveEventFeedsAndTrendingBanner() {
+  const events = useUserPreferencedLiveEvents()
+  const {rightNavVisible} = useLayoutBreakpoints()
+  const {trendingDisabled} = useTrendingSettings()
+
+  if (!events.feeds.length) {
+    if (!rightNavVisible && !trendingDisabled) {
+      // only show trending on mobile when live event banner is not shown
+      return <TrendingInterstitial />
+    } else {
+      // no feed, no trending
+      return null
+    }
+  }
+
+  // On desktop, we show in the sidebar
+  if (rightNavVisible) return null
+
+  return events.feeds.map(feed => <Inner feed={feed} key={feed.id} />)
+}
+
+function Inner({feed}: {feed: LiveEventFeed}) {
+  const {_} = useLingui()
+  const optionsMenuControl = useDialogControl()
+  const layout = feed.layouts.wide
+
+  return (
+    <>
+      <View style={[a.px_lg, a.pt_md, a.pb_xs]}>
+        <View>
+          <LiveEventFeedCardWide feed={feed} metricContext="discover" />
+
+          <Button
+            label={_(msg`Configure live event banner`)}
+            size="tiny"
+            shape="round"
+            style={[a.absolute, a.z_10, {top: 6, right: 6}]}
+            onPress={() => {
+              optionsMenuControl.open()
+            }}>
+            {({hovered, pressed}) => (
+              <>
+                <View
+                  style={[
+                    a.absolute,
+                    a.inset_0,
+                    a.rounded_full,
+                    {
+                      backgroundColor: layout.overlayColor,
+                      opacity: hovered || pressed ? 0.8 : 0.6,
+                    },
+                  ]}
+                />
+                <EllipsisIcon
+                  size="sm"
+                  fill={layout.textColor}
+                  style={[a.z_20]}
+                />
+              </>
+            )}
+          </Button>
+        </View>
+      </View>
+
+      <LiveEventFeedOptionsMenu
+        feed={feed}
+        control={optionsMenuControl}
+        metricContext="discover"
+      />
+    </>
+  )
+}

src/features/liveEvents/components/ExploreScreenLiveEventFeedsBanner.tsx

@@ -0,0 +1,17 @@
+import {View} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+import {LiveEventFeedCardWide} from '#/features/liveEvents/components/LiveEventFeedCardWide'
+import {useLiveEvents} from '#/features/liveEvents/context'
+
+export function ExploreScreenLiveEventFeedsBanner() {
+  const t = useTheme()
+  const events = useLiveEvents()
+  return events.feeds.map(feed => (
+    <View
+      key={feed.id}
+      style={[a.p_lg, a.border_b, t.atoms.border_contrast_low]}>
+      <LiveEventFeedCardWide feed={feed} metricContext="explore" />
+    </View>
+  ))
+}

src/features/liveEvents/components/LiveEventFeedCardCompact.tsx

@@ -0,0 +1,132 @@
+import {useEffect, useMemo} from 'react'
+import {View} from 'react-native'
+import {Image} from 'expo-image'
+import {LinearGradient} from 'expo-linear-gradient'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isBskyCustomFeedUrl} from '#/lib/strings/url-helpers'
+import {logger} from '#/logger'
+import {atoms as a, utils} from '#/alf'
+import {Live_Stroke2_Corner0_Rounded as LiveIcon} from '#/components/icons/Live'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
+import {
+  type LiveEventFeed,
+  type LiveEventFeedMetricContext,
+} from '#/features/liveEvents/types'
+
+const roundedStyles = [a.rounded_md, a.curve_continuous]
+
+export function LiveEventFeedCardCompact({
+  feed,
+  metricContext,
+}: {
+  feed: LiveEventFeed
+  metricContext: LiveEventFeedMetricContext
+}) {
+  const {_} = useLingui()
+
+  const layout = feed.layouts.compact
+  const overlayColor = layout.overlayColor
+  const textColor = layout.textColor
+  const url = useMemo(() => {
+    // Validated in multiple places on the backend
+    if (isBskyCustomFeedUrl(feed.url)) {
+      return new URL(feed.url).pathname
+    }
+    return '/'
+  }, [feed.url])
+
+  useEffect(() => {
+    logger.metric('liveEvents:feedBanner:seen', {
+      feed: feed.url,
+      context: metricContext,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <Link
+      to={url}
+      label={_(msg`Live event happening now: ${feed.title}`)}
+      style={[a.w_full]}
+      onPress={() => {
+        logger.metric('liveEvents:feedBanner:click', {
+          feed: feed.url,
+          context: metricContext,
+        })
+      }}>
+      {({hovered, pressed}) => (
+        <View style={[roundedStyles, a.shadow_md, a.w_full]}>
+          <View
+            style={[a.w_full, a.align_start, a.overflow_hidden, roundedStyles]}>
+            <Image
+              accessibilityIgnoresInvertColors
+              source={{uri: layout.image}}
+              placeholder={{blurhash: layout.blurhash}}
+              style={[a.absolute, a.inset_0, a.w_full, a.h_full]}
+              contentFit="cover"
+              placeholderContentFit="cover"
+            />
+
+            <LinearGradient
+              colors={[overlayColor, utils.alpha(overlayColor, 0)]}
+              locations={[0, 1]}
+              start={{x: 0, y: 0}}
+              end={{x: 1, y: 0}}
+              style={[
+                a.absolute,
+                a.inset_0,
+                a.transition_opacity,
+                {
+                  transitionDuration: '200ms',
+                  opacity: hovered || pressed ? 0.6 : 0,
+                },
+              ]}
+            />
+
+            <View style={[a.w_full, a.justify_end]}>
+              <LinearGradient
+                colors={[
+                  overlayColor,
+                  utils.alpha(overlayColor, 0.7),
+                  utils.alpha(overlayColor, 0),
+                ]}
+                locations={[0, 0.8, 1]}
+                start={{x: 0, y: 0}}
+                end={{x: 1, y: 0}}
+                style={[a.absolute, a.inset_0]}
+              />
+
+              <View
+                style={[
+                  a.flex_1,
+                  a.flex_row,
+                  a.align_center,
+                  a.gap_xs,
+                  a.z_10,
+                  a.px_lg,
+                  a.py_md,
+                ]}>
+                <LiveIcon size="md" fill={textColor} />
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    a.flex_1,
+                    a.leading_snug,
+                    a.font_bold,
+                    a.text_lg,
+                    a.pr_xl,
+                    {color: textColor},
+                  ]}>
+                  {layout.title}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      )}
+    </Link>
+  )
+}

src/features/liveEvents/components/LiveEventFeedCardWide.tsx

@@ -0,0 +1,139 @@
+import {useEffect, useMemo} from 'react'
+import {View} from 'react-native'
+import {Image} from 'expo-image'
+import {LinearGradient} from 'expo-linear-gradient'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isBskyCustomFeedUrl} from '#/lib/strings/url-helpers'
+import {logger} from '#/logger'
+import {atoms as a, useBreakpoints, utils} from '#/alf'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
+import {
+  type LiveEventFeed,
+  type LiveEventFeedMetricContext,
+} from '#/features/liveEvents/types'
+
+const roundedStyles = [a.rounded_lg, a.curve_continuous]
+
+export function LiveEventFeedCardWide({
+  feed,
+  metricContext,
+}: {
+  feed: LiveEventFeed
+  metricContext: LiveEventFeedMetricContext
+}) {
+  const {_} = useLingui()
+  const {gtPhone} = useBreakpoints()
+
+  const layout = feed.layouts.wide
+  const overlayColor = layout.overlayColor
+  const textColor = layout.textColor
+  const url = useMemo(() => {
+    // Validated in multiple places on the backend
+    if (isBskyCustomFeedUrl(feed.url)) {
+      return new URL(feed.url).pathname
+    }
+    return '/'
+  }, [feed.url])
+
+  useEffect(() => {
+    logger.metric('liveEvents:feedBanner:seen', {
+      feed: feed.url,
+      context: metricContext,
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <Link
+      to={url}
+      label={_(msg`Live event happening now: ${feed.title}`)}
+      style={[a.w_full]}
+      onPress={() => {
+        logger.metric('liveEvents:feedBanner:click', {
+          feed: feed.url,
+          context: metricContext,
+        })
+      }}>
+      {({hovered, pressed}) => (
+        <View style={[roundedStyles, a.shadow_md, a.w_full]}>
+          <View
+            style={[
+              a.align_start,
+              roundedStyles,
+              a.overflow_hidden,
+              {
+                aspectRatio: gtPhone ? 576 / 144 : 369 / 100,
+              },
+            ]}>
+            <Image
+              accessibilityIgnoresInvertColors
+              source={{uri: layout.image}}
+              placeholder={{blurhash: layout.blurhash}}
+              style={[a.absolute, a.inset_0, a.w_full, a.h_full]}
+              contentFit="cover"
+              placeholderContentFit="cover"
+            />
+
+            <LinearGradient
+              colors={[overlayColor, utils.alpha(overlayColor, 0)]}
+              locations={[0, 1]}
+              start={{x: 0, y: 0}}
+              end={{x: 1, y: 0}}
+              style={[
+                a.absolute,
+                a.inset_0,
+                a.transition_opacity,
+                {
+                  transitionDuration: '200ms',
+                  opacity: hovered || pressed ? 0.6 : 0,
+                },
+              ]}
+            />
+
+            <View style={[a.flex_1, a.justify_end]}>
+              <LinearGradient
+                colors={[overlayColor, utils.alpha(overlayColor, 0)]}
+                locations={[0, 1]}
+                start={{x: 0, y: 0}}
+                end={{x: 1, y: 0}}
+                style={[a.absolute, a.inset_0]}
+              />
+
+              <View
+                style={[
+                  a.z_10,
+                  gtPhone ? [a.pl_xl, a.pb_lg] : [a.pl_lg, a.pb_md],
+                  {paddingRight: 64},
+                ]}>
+                <Text
+                  style={[
+                    a.leading_snug,
+                    gtPhone ? a.text_xs : a.text_2xs,
+                    {color: textColor, opacity: 0.8},
+                  ]}>
+                  {feed.preview ? (
+                    <Trans>Preview</Trans>
+                  ) : (
+                    <Trans>Happening now</Trans>
+                  )}
+                </Text>
+                <Text
+                  style={[
+                    a.leading_snug,
+                    a.font_bold,
+                    gtPhone ? a.text_3xl : a.text_lg,
+                    {color: textColor},
+                  ]}>
+                  {layout.title}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      )}
+    </Link>
+  )
+}

src/features/liveEvents/components/LiveEventFeedOptionsMenu.tsx

@@ -0,0 +1,171 @@
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useCleanError} from '#/lib/hooks/useCleanError'
+import {isNative} from '#/platform/detection'
+import {atoms as a, web} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Loader} from '#/components/Loader'
+import * as toast from '#/components/Toast'
+import {Span, Text} from '#/components/Typography'
+import {useUpdateLiveEventPreferences} from '#/features/liveEvents/preferences'
+import {
+  type LiveEventFeed,
+  type LiveEventFeedMetricContext,
+} from '#/features/liveEvents/types'
+
+export {useDialogControl} from '#/components/Dialog'
+
+export function LiveEventFeedOptionsMenu({
+  control,
+  feed,
+  metricContext,
+}: {
+  control: Dialog.DialogControlProps
+  feed: LiveEventFeed
+  metricContext: LiveEventFeedMetricContext
+}) {
+  const {_} = useLingui()
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+      <Dialog.ScrollableInner
+        label={_(msg`Configure live event banner`)}
+        style={[web({maxWidth: 400})]}>
+        <Inner control={control} feed={feed} metricContext={metricContext} />
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+
+function Inner({
+  control,
+  feed,
+  metricContext,
+}: {
+  control: Dialog.DialogControlProps
+  feed: LiveEventFeed
+  metricContext: LiveEventFeedMetricContext
+}) {
+  const {_} = useLingui()
+  const {
+    isPending,
+    mutate: update,
+    error: rawError,
+    variables,
+  } = useUpdateLiveEventPreferences({
+    feed,
+    metricContext,
+    onUpdateSuccess({undoAction}) {
+      toast.show(
+        <toast.Outer>
+          <toast.Icon />
+          <toast.Text>
+            <Trans>Your live event preferences have been updated.</Trans>
+          </toast.Text>
+          {undoAction && (
+            <toast.Action
+              label={_(msg`Undo`)}
+              onPress={() => {
+                if (undoAction) {
+                  update(undoAction)
+                }
+              }}>
+              <Trans>Undo</Trans>
+            </toast.Action>
+          )}
+        </toast.Outer>,
+        {
+          type: 'success',
+        },
+      )
+
+      /*
+       * If there is no `undoAction`, it means that the action was already
+       * undone, and therefore the menu would have been closed prior to the
+       * undo happening.
+       */
+      if (undoAction) {
+        control.close()
+      }
+    },
+  })
+  const cleanError = useCleanError()
+  const error = rawError ? cleanError(rawError) : undefined
+
+  const isHidingFeed = variables?.type === 'hideFeed' && isPending
+  const isHidingAllFeeds = variables?.type === 'toggleHideAllFeeds' && isPending
+
+  return (
+    <View style={[a.gap_lg]}>
+      <View style={[a.gap_sm]}>
+        <Text style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
+          <Trans>Live event options</Trans>
+        </Text>
+
+        <Text style={[a.text_md, a.leading_snug]}>
+          <Trans>
+            Live events appear occasionally when something exciting is
+            happening. If you'd like, you can hide this particular event, or all
+            events for this placement in your app interface.
+          </Trans>
+        </Text>
+
+        <Text style={[a.text_md, a.leading_snug]}>
+          <Trans>
+            If you choose to hide all events, you can always re-enable them from{' '}
+            <Span style={[a.font_semi_bold]}>Settings → Content & Media</Span>.
+          </Trans>
+        </Text>
+      </View>
+
+      <View style={[a.gap_sm]}>
+        <Button
+          label={_(msg`Hide this event`)}
+          size="large"
+          color="primary_subtle"
+          onPress={() => {
+            update({type: 'hideFeed', id: feed.id})
+          }}>
+          <ButtonText>
+            <Trans>Hide this event</Trans>
+          </ButtonText>
+          {isHidingFeed && <ButtonIcon icon={Loader} />}
+        </Button>
+        <Button
+          label={_(msg`Hide all events`)}
+          size="large"
+          color="secondary"
+          onPress={() => {
+            update({type: 'toggleHideAllFeeds'})
+          }}>
+          <ButtonText>
+            <Trans>Hide all events</Trans>
+          </ButtonText>
+          {isHidingAllFeeds && <ButtonIcon icon={Loader} />}
+        </Button>
+        {isNative && (
+          <Button
+            label={_(msg`Cancel`)}
+            size="large"
+            color="secondary_inverted"
+            onPress={() => control.close()}>
+            <ButtonText>
+              <Trans>Cancel</Trans>
+            </ButtonText>
+          </Button>
+        )}
+      </View>
+
+      {error && (
+        <Admonition type="error">
+          {error.clean || error.raw || _(msg`An unknown error occurred.`)}
+        </Admonition>
+      )}
+    </View>
+  )
+}

src/features/liveEvents/components/LiveEventFeedsSettingsToggle.tsx

@@ -0,0 +1,43 @@
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import * as Toggle from '#/components/forms/Toggle'
+import {Live_Stroke2_Corner0_Rounded as LiveIcon} from '#/components/icons/Live'
+import {
+  useLiveEventPreferences,
+  useUpdateLiveEventPreferences,
+} from '#/features/liveEvents/preferences'
+
+export function LiveEventFeedsSettingsToggle() {
+  const {_} = useLingui()
+  const {data: prefs} = useLiveEventPreferences()
+  const {
+    isPending,
+    data: updatedPrefs,
+    mutate: update,
+  } = useUpdateLiveEventPreferences({
+    metricContext: 'settings',
+  })
+  const hideAllFeeds = !!(updatedPrefs || prefs)?.hideAllFeeds
+
+  return (
+    <Toggle.Item
+      name="enable_live_event_banner"
+      label={_(msg`Show live events in your Discover Feed`)}
+      value={!hideAllFeeds}
+      onChange={() => {
+        if (!isPending) {
+          update({type: 'toggleHideAllFeeds'})
+        }
+      }}>
+      <SettingsList.Item>
+        <SettingsList.ItemIcon icon={LiveIcon} />
+        <SettingsList.ItemText>
+          <Trans>Show live events in your Discover Feed</Trans>
+        </SettingsList.ItemText>
+        <Toggle.Platform />
+      </SettingsList.Item>
+    </Toggle.Item>
+  )
+}

src/features/liveEvents/components/SidebarLiveEventFeedsBanner.tsx

@@ -0,0 +1,13 @@
+import {LiveEventFeedCardCompact} from '#/features/liveEvents/components/LiveEventFeedCardCompact'
+import {useLiveEvents} from '#/features/liveEvents/context'
+
+export function SidebarLiveEventFeedsBanner() {
+  const events = useLiveEvents()
+  return events.feeds.map(feed => (
+    <LiveEventFeedCardCompact
+      key={feed.id}
+      feed={feed}
+      metricContext="sidebar"
+    />
+  ))
+}

src/features/liveEvents/context.tsx

@@ -0,0 +1,110 @@
+import {createContext, useContext, useMemo} from 'react'
+import {QueryClient, useQuery} from '@tanstack/react-query'
+
+import {useIsBskyTeam} from '#/lib/hooks/useIsBskyTeam'
+import {
+  convertBskyAppUrlIfNeeded,
+  isBskyCustomFeedUrl,
+  makeRecordUri,
+} from '#/lib/strings/url-helpers'
+import {IS_DEV, LIVE_EVENTS_URL} from '#/env'
+import {useLiveEventPreferences} from '#/features/liveEvents/preferences'
+import {type LiveEventsWorkerResponse} from '#/features/liveEvents/types'
+import {useDevMode} from '#/storage/hooks/dev-mode'
+
+const qc = new QueryClient()
+const liveEventsQueryKey = ['live-events']
+
+export const DEFAULT_LIVE_EVENTS = {
+  feeds: [],
+}
+
+async function fetchLiveEvents(): Promise<LiveEventsWorkerResponse | null> {
+  try {
+    const res = await fetch(`${LIVE_EVENTS_URL}/config`)
+    if (!res.ok) return null
+    const data = await res.json()
+    return data
+  } catch {
+    return null
+  }
+}
+
+const Context = createContext<LiveEventsWorkerResponse>(DEFAULT_LIVE_EVENTS)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [isDevMode] = useDevMode()
+  const isBskyTeam = useIsBskyTeam()
+  const {data} = useQuery(
+    {
+      staleTime: IS_DEV ? 5e3 : 1000 * 60,
+      queryKey: liveEventsQueryKey,
+      async queryFn() {
+        return fetchLiveEvents()
+      },
+    },
+    qc,
+  )
+
+  const ctx = useMemo(() => {
+    if (!data) return DEFAULT_LIVE_EVENTS
+    const feeds = data.feeds.filter(f => {
+      if (f.preview && !isBskyTeam) return false
+      return true
+    })
+    return {
+      ...data,
+      // only one at a time for now, unless bsky team and dev mode
+      feeds: isBskyTeam && isDevMode ? feeds : feeds.slice(0, 1),
+    }
+  }, [data, isBskyTeam, isDevMode])
+
+  return <Context.Provider value={ctx}>{children}</Context.Provider>
+}
+
+export async function prefetchLiveEvents() {
+  const data = await fetchLiveEvents()
+  if (data) {
+    qc.setQueryData(liveEventsQueryKey, data)
+  }
+}
+
+export function useLiveEvents() {
+  const ctx = useContext(Context)
+  if (!ctx) {
+    throw new Error('useLiveEventsContext must be used within a Provider')
+  }
+  return ctx
+}
+
+export function useUserPreferencedLiveEvents() {
+  const events = useLiveEvents()
+  const {data, isLoading} = useLiveEventPreferences()
+  if (isLoading) return DEFAULT_LIVE_EVENTS
+  const {hideAllFeeds, hiddenFeedIds} = data
+  return {
+    ...events,
+    feeds: hideAllFeeds
+      ? []
+      : events.feeds.filter(f => {
+          const hidden = f?.id ? hiddenFeedIds.includes(f?.id || '') : false
+          return !hidden
+        }),
+  }
+}
+
+export function useActiveLiveEventFeedUris() {
+  const {feeds} = useLiveEvents()
+
+  return new Set(
+    feeds
+      // insurance
+      .filter(f => isBskyCustomFeedUrl(f.url))
+      .map(f => {
+        const uri = convertBskyAppUrlIfNeeded(f.url)
+        const [_0, did, _1, rkey] = uri.split('/').filter(Boolean)
+        const urip = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
+        return urip.toString()
+      }),
+  )
+}

src/features/liveEvents/preferences.ts

@@ -0,0 +1,161 @@
+import {useEffect} from 'react'
+import {type Agent, AppBskyActorDefs, asPredicate} from '@atproto/api'
+import {useMutation, useQueryClient} from '@tanstack/react-query'
+
+import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
+import {
+  preferencesQueryKey,
+  usePreferencesQuery,
+} from '#/state/queries/preferences'
+import {useAgent} from '#/state/session'
+import * as env from '#/env'
+import {
+  type LiveEventFeed,
+  type LiveEventFeedMetricContext,
+} from '#/features/liveEvents/types'
+
+export type LiveEventPreferencesAction = Parameters<
+  Agent['updateLiveEventPreferences']
+>[0] & {
+  /**
+   * Flag that is internal to this hook, do not set when updating prefs
+   */
+  __canUndo?: boolean
+}
+
+export function useLiveEventPreferences() {
+  const query = usePreferencesQuery()
+  useWebOnlyDebugLiveEventPreferences()
+  return {
+    ...query,
+    data: query.data?.liveEventPreferences || {
+      hideAllFeeds: false,
+      hiddenFeedIds: [],
+    },
+  }
+}
+
+function useWebOnlyDebugLiveEventPreferences() {
+  const queryClient = useQueryClient()
+  const agent = useAgent()
+
+  useEffect(() => {
+    if (env.IS_DEV && isWeb && typeof window !== 'undefined') {
+      // @ts-ignore
+      window.__updateLiveEventPreferences = async (
+        action: LiveEventPreferencesAction,
+      ) => {
+        await agent.updateLiveEventPreferences(action)
+        // triggers a refetch
+        await queryClient.invalidateQueries({
+          queryKey: preferencesQueryKey,
+        })
+      }
+    }
+  }, [agent, queryClient])
+}
+
+export function useUpdateLiveEventPreferences(props: {
+  feed?: LiveEventFeed
+  metricContext: LiveEventFeedMetricContext
+  onUpdateSuccess?: (props: {
+    undoAction: LiveEventPreferencesAction | null
+  }) => void
+}) {
+  const queryClient = useQueryClient()
+  const agent = useAgent()
+
+  return useMutation<
+    AppBskyActorDefs.LiveEventPreferences,
+    Error,
+    LiveEventPreferencesAction,
+    {undoAction: LiveEventPreferencesAction | null}
+  >({
+    onSettled(data, error, variables) {
+      /*
+       * `onSettled` runs after the mutation completes, success or no. The idea
+       * here is that we want to invert the action that was just passed in, and
+       * provide it as an `undoAction` to the `onUpdateSuccess` callback.
+       *
+       * If the operation was not a success, we don't provide the `undoAction`.
+       *
+       * Upon the first call of the mutation, the `__canUndo` flag is undefined,
+       * so we allow the undo. However, when we create the `undoAction`, we
+       * set its `__canUndo` flag to false, so that if the user were to call
+       * the undo action, we would not provide another undo for that.
+       */
+      const canUndo = variables.__canUndo === undefined ? true : false
+      let undoAction: LiveEventPreferencesAction | null = null
+
+      switch (variables.type) {
+        case 'hideFeed':
+          undoAction = {type: 'unhideFeed', id: variables.id, __canUndo: false}
+          break
+        case 'unhideFeed':
+          undoAction = {type: 'hideFeed', id: variables.id, __canUndo: false}
+          break
+        case 'toggleHideAllFeeds':
+          undoAction = {type: 'toggleHideAllFeeds', __canUndo: false}
+          break
+      }
+
+      if (data && !error) {
+        props?.onUpdateSuccess?.({
+          undoAction: canUndo ? undoAction : null,
+        })
+      }
+    },
+    mutationFn: async action => {
+      const updated = await agent.updateLiveEventPreferences(action)
+      const prefs = updated.find(p =>
+        asPredicate(AppBskyActorDefs.validateLiveEventPreferences)(p),
+      )
+
+      switch (action.type) {
+        case 'hideFeed':
+        case 'unhideFeed': {
+          if (!props.feed) {
+            logger.error(
+              `useUpdateLiveEventPreferences: feed is missing, but required for hiding/unhiding`,
+              {
+                action,
+              },
+            )
+            break
+          }
+
+          logger.metric(
+            action.type === 'hideFeed'
+              ? 'liveEvents:feedBanner:hide'
+              : 'liveEvents:feedBanner:unhide',
+            {
+              feed: props.feed.url,
+              context: props.metricContext,
+            },
+          )
+          break
+        }
+        case 'toggleHideAllFeeds': {
+          if (prefs!.hideAllFeeds) {
+            logger.metric('liveEvents:hideAllFeedBanners', {
+              context: props.metricContext,
+            })
+          } else {
+            logger.metric('liveEvents:unhideAllFeedBanners', {
+              context: props.metricContext,
+            })
+          }
+          break
+        }
+      }
+
+      // triggers a refetch
+      queryClient.invalidateQueries({
+        queryKey: preferencesQueryKey,
+      })
+
+      return prefs!
+    },
+  })
+}

src/features/liveEvents/types.ts

@@ -0,0 +1,27 @@
+export type LiveEventFeedImageLayout = 'wide' | 'compact' // maybe more in the future
+
+export type LiveEventFeedLayout = {
+  title: string
+  overlayColor: string
+  textColor: string
+  image: string
+  blurhash: string
+}
+
+export type LiveEventFeed = {
+  id: string
+  preview: boolean
+  title: string
+  url: string
+  layouts: Record<LiveEventFeedImageLayout, LiveEventFeedLayout>
+}
+
+export type LiveEventsWorkerResponse = {
+  feeds: LiveEventFeed[]
+}
+
+export type LiveEventFeedMetricContext =
+  | 'explore'
+  | 'discover'
+  | 'sidebar'
+  | 'settings'

src/features/nuxs/components/Dot.tsx

@@ -0,0 +1,31 @@
+import {View, type ViewStyle} from 'react-native'
+
+import {atoms as a, useTheme} from '#/alf'
+
+/**
+ * The little blue dot used to nudge a user towards a certain feature. The dot
+ * is absolutely positioned, and is intended to be configured by passing in
+ * positional styles via `top`, `bottom`, `left`, and `right` props.
+ */
+export function Dot({
+  top,
+  bottom,
+  left,
+  right,
+}: Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>) {
+  const t = useTheme()
+  return (
+    <View style={[a.absolute, {top, bottom, left, right}]}>
+      <View
+        style={[
+          a.rounded_full,
+          {
+            height: 8,
+            width: 8,
+            backgroundColor: t.palette.primary_500,
+          },
+        ]}
+      />
+    </View>
+  )
+}

src/features/nuxs/components/Gradient.tsx

@@ -0,0 +1,24 @@
+import {LinearGradient} from 'expo-linear-gradient'
+
+import {atoms as a, useTheme, utils, type ViewStyleProp} from '#/alf'
+
+/**
+ * A gradient overlay using the primary color at low opacity. This component is
+ * absolutely positioned and intended to be composed within other components,
+ * with optional styling allowed, such as adjusting border radius.
+ */
+export function Gradient({style}: ViewStyleProp) {
+  const t = useTheme()
+  return (
+    <LinearGradient
+      colors={[
+        utils.alpha(t.palette.primary_500, 0.2),
+        utils.alpha(t.palette.primary_500, 0.1),
+      ]}
+      locations={[0, 1]}
+      start={{x: 0, y: 0}}
+      end={{x: 1, y: 0}}
+      style={[a.absolute, a.inset_0, style]}
+    />
+  )
+}

src/geolocation/const.ts

@@ -1,7 +1,7 @@
-import {BAPP_CONFIG_URL} from '#/env'
+import {GEOLOCATION_URL} from '#/env'
 import {type Geolocation} from '#/geolocation/types'
 
-export const GEOLOCATION_SERVICE_URL = `${BAPP_CONFIG_URL}/geolocation`
+export const GEOLOCATION_SERVICE_URL = `${GEOLOCATION_URL}/geolocation`
 
 /**
  * Default geolocation config.

src/geolocation/debug.ts

@@ -5,14 +5,20 @@ import {type Geolocation} from '#/geolocation/types'
 const localEnabled = false
 export const enabled = IS_DEV && (localEnabled || aaDebug.geolocation)
 export const geolocation: Geolocation = aaDebug.geolocation ?? {
-  countryCode: 'AU',
-  regionCode: undefined,
-}
-export const deviceGeolocation: Geolocation = aaDebug.deviceGeolocation ?? {
-  countryCode: 'AU',
-  regionCode: undefined,
+  countryCode: 'US',
+  regionCode: 'TX',
 }
 
+const deviceLocalEnabled = false
+export const deviceGeolocation: Geolocation | undefined =
+  aaDebug.deviceGeolocation ||
+  (deviceLocalEnabled
+    ? {
+        countryCode: 'US',
+        regionCode: 'TX',
+      }
+    : undefined)
+
 export async function resolve<T>(data: T) {
   await new Promise(y => setTimeout(y, 500)) // simulate network
   return data

src/geolocation/device.ts

@@ -1,4 +1,5 @@
 import {useCallback, useEffect, useRef} from 'react'
+import {Platform} from 'react-native'
 import * as Location from 'expo-location'
 import {createPermissionHook} from 'expo-modules-core'
 
@@ -46,7 +47,8 @@ const useForegroundPermissions = createPermissionHook({
 })
 
 export async function getDeviceGeolocation(): Promise<Geolocation> {
-  if (debug.enabled) return debug.resolve(debug.deviceGeolocation)
+  if (debug.enabled && debug.deviceGeolocation)
+    return debug.resolve(debug.deviceGeolocation)
 
   try {
     const geocode = await Location.getCurrentPositionAsync()
@@ -56,6 +58,18 @@ export async function getDeviceGeolocation(): Promise<Geolocation> {
     })
     const location = locations.at(0)
     const normalized = location ? normalizeDeviceLocation(location) : undefined
+    if (normalized?.regionCode && normalized.regionCode.length > 5) {
+      /*
+       * We want short codes only, and we're still seeing some full names here.
+       * 5 is just a heuristic for a region that is probably not formatted as a
+       * short code.
+       */
+      logger.error('getDeviceGeolocation: invalid regionCode', {
+        os: Platform.OS,
+        version: Platform.Version,
+        regionCode: normalized.regionCode,
+      })
+    }
     return {
       countryCode: normalized?.countryCode ?? undefined,
       regionCode: normalized?.regionCode ?? undefined,
@@ -142,3 +156,8 @@ export function useSyncDeviceGeolocationOnStartup(
     })
   }, [status, sync])
 }
+
+export function useIsDeviceGeolocationGranted() {
+  const [status] = useForegroundPermissions()
+  return status?.granted === true
+}

src/geolocation/index.tsx

@@ -12,7 +12,10 @@ import {type Geolocation} from '#/geolocation/types'
 import {mergeGeolocations} from '#/geolocation/util'
 import {device, useStorage} from '#/storage'
 
-export {useRequestDeviceGeolocation} from '#/geolocation/device'
+export {
+  useIsDeviceGeolocationGranted,
+  useRequestDeviceGeolocation,
+} from '#/geolocation/device'
 export {resolve} from '#/geolocation/service'
 export * from '#/geolocation/types'
 

src/lib/actor-status.ts

@@ -7,7 +7,7 @@ import {
 import {isAfter, parseISO} from 'date-fns'
 
 import {useMaybeProfileShadow} from '#/state/cache/profile-shadow'
-import {useLiveNowConfig} from '#/state/service-config'
+import {type LiveNowConfig, useLiveNowConfig} from '#/state/service-config'
 import {useTickEveryMinute} from '#/state/shell'
 import type * as bsky from '#/types/bsky'
 
@@ -19,15 +19,27 @@ export function useActorStatus(actor?: bsky.profile.AnyProfileView) {
   return useMemo(() => {
     tick! // revalidate every minute
 
-    if (
-      shadowed &&
-      'status' in shadowed &&
-      shadowed.status &&
-      validateStatus(shadowed.did, shadowed.status, config) &&
-      isStatusStillActive(shadowed.status.expiresAt)
-    ) {
+    if (shadowed && 'status' in shadowed && shadowed.status) {
+      const isValid = validateStatus(shadowed.status, config)
+      const isDisabled = shadowed.status.isDisabled || false
+      const isActive = isStatusStillActive(shadowed.status.expiresAt)
+      if (isValid && !isDisabled && isActive) {
+        return {
+          uri: shadowed.status.uri,
+          cid: shadowed.status.cid,
+          isDisabled: false,
+          isActive: true,
+          status: 'app.bsky.actor.status#live',
+          embed: shadowed.status.embed as $Typed<AppBskyEmbedExternal.View>, // temp_isStatusValid asserts this
+          expiresAt: shadowed.status.expiresAt!, // isStatusStillActive asserts this
+          record: shadowed.status.record,
+        } satisfies AppBskyActorDefs.StatusView
+      }
       return {
-        isActive: true,
+        uri: shadowed.status.uri,
+        cid: shadowed.status.cid,
+        isDisabled,
+        isActive: false,
         status: 'app.bsky.actor.status#live',
         embed: shadowed.status.embed as $Typed<AppBskyEmbedExternal.View>, // temp_isStatusValid asserts this
         expiresAt: shadowed.status.expiresAt!, // isStatusStillActive asserts this
@@ -36,6 +48,7 @@ export function useActorStatus(actor?: bsky.profile.AnyProfileView) {
     } else {
       return {
         status: '',
+        isDisabled: false,
         isActive: false,
         record: {},
       } satisfies AppBskyActorDefs.StatusView
@@ -52,19 +65,14 @@ export function isStatusStillActive(timeStr: string | undefined) {
 }
 
 export function validateStatus(
-  did: string,
   status: AppBskyActorDefs.StatusView,
-  config: {did: string; domains: string[]}[],
+  config: LiveNowConfig,
 ) {
   if (status.status !== 'app.bsky.actor.status#live') return false
-  const sources = config.find(cfg => cfg.did === did)
-  if (!sources) {
-    return false
-  }
   try {
     if (AppBskyEmbedExternal.isView(status.embed)) {
       const url = new URL(status.embed.external.uri)
-      return sources.domains.includes(url.hostname)
+      return config.allowedDomains.has(url.hostname)
     } else {
       return false
     }

src/lib/hooks/useIsBskyTeam.ts

@@ -0,0 +1,8 @@
+import {useMemo} from 'react'
+
+import {useGate} from '#/lib/statsig/statsig'
+
+export function useIsBskyTeam() {
+  const gate = useGate()
+  return useMemo(() => gate('is_bsky_team_member'), [gate])
+}

src/lib/react-query.tsx

@@ -1,4 +1,4 @@
-import {useRef, useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {AppState, type AppStateStatus} from 'react-native'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
@@ -9,9 +9,15 @@ import {
 } from '@tanstack/react-query-persist-client'
 import type React from 'react'
 
-import {isNative} from '#/platform/detection'
+import {isNative, isWeb} from '#/platform/detection'
 import {listenNetworkConfirmed, listenNetworkLost} from '#/state/events'
 
+declare global {
+  interface Window {
+    __TANSTACK_QUERY_CLIENT__: import('@tanstack/query-core').QueryClient
+  }
+}
+
 // any query keys in this array will be persisted to AsyncStorage
 export const labelersDetailedInfoQueryKeyRoot = 'labelers-detailed-info'
 const STORED_CACHE_QUERY_KEY_ROOTS = [labelersDetailedInfoQueryKeyRoot]
@@ -180,6 +186,11 @@ function QueryProviderInner({
       dehydrateOptions,
     }
   })
+  useEffect(() => {
+    if (isWeb) {
+      window.__TANSTACK_QUERY_CLIENT__ = queryClient
+    }
+  }, [queryClient])
   return (
     <PersistQueryClientProvider
       client={queryClient}

src/lib/statsig/gates.ts

@@ -7,6 +7,8 @@ export type Gate =
   | 'disable_settings_find_contacts'
   | 'explore_show_suggested_feeds'
   | 'feed_reply_button_open_thread'
+  | 'is_bsky_team_member' // special, do not remove
+  | 'live_now_beta'
   | 'old_postonboarding'
   | 'onboarding_add_video_feed'
   | 'onboarding_suggested_starterpacks'

src/logger/index.ts

@@ -16,6 +16,8 @@ import {enabledLogLevels} from '#/logger/util'
 import {isNative} from '#/platform/detection'
 import {ENV} from '#/env'
 
+export {type MetricEvents as Metrics} from '#/logger/metrics'
+
 const TRANSPORTS: Transport[] = (function configureTransports() {
   switch (ENV) {
     case 'production': {

src/logger/metrics.ts

@@ -1,5 +1,6 @@
 import {type NotificationReason} from '#/lib/hooks/useNotificationHandler'
 import {type FeedDescriptor} from '#/state/queries/post-feed'
+import {type LiveEventFeedMetricContext} from '#/features/liveEvents/types'
 
 export type MetricEvents = {
   // App events
@@ -176,13 +177,19 @@ export type MetricEvents = {
   'feed:suggestion:press': {
     feedUrl: string
   }
-  'feed:showMore': {
-    feed: string
-    feedContext: string
+  'post:showMore': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
   }
-  'feed:showLess': {
-    feed: string
-    feedContext: string
+  'post:showLess': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
   }
   'feed:clickthrough': {
     feed: string
@@ -238,6 +245,8 @@ export type MetricEvents = {
     isReply: boolean
   }
   'post:like': {
+    uri: string
+    authorDid: string
     doesLikerFollowPoster: boolean | undefined
     doesPosterFollowLiker: boolean | undefined
     likerClout: number | undefined
@@ -246,26 +255,87 @@ export type MetricEvents = {
     feedDescriptor?: string
   }
   'post:repost': {
+    uri: string
+    authorDid: string
     logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
     feedDescriptor?: string
   }
   'post:unlike': {
+    uri: string
+    authorDid: string
     logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
     feedDescriptor?: string
   }
   'post:unrepost': {
+    uri: string
+    authorDid: string
     logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
     feedDescriptor?: string
   }
-  'post:mute': {}
-  'post:unmute': {}
+  'post:mute': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
+  }
+  'post:unmute': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
+  }
   'post:pin': {}
   'post:unpin': {}
   'post:bookmark': {
+    uri: string
+    authorDid: string
     logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
   }
   'post:unbookmark': {
+    uri: string
+    authorDid: string
     logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
+  }
+  'post:clickReply': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
+  }
+  'post:clickQuotePost': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
+  }
+  'post:clickthroughAuthor': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
+  }
+  'post:clickthroughItem': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
+  }
+  'post:clickthroughEmbed': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    position?: number
   }
   'post:view': {
     uri: string
@@ -565,7 +635,14 @@ export type MetricEvents = {
   'live:view:profile': {subject: string}
   'live:view:post': {subject: string; feed?: string}
 
-  'share:open': {context: 'feed' | 'thread'}
+  'post:share': {
+    uri: string
+    authorDid: string
+    logContext: 'FeedItem' | 'PostThreadItem' | 'Post' | 'ImmersiveVideo'
+    feedDescriptor?: string
+    postContext: 'feed' | 'thread'
+    position?: number
+  }
   'share:press:copyLink': {}
   'share:press:nativeShare': {}
   'share:press:openDmSearch': {}
@@ -720,4 +797,27 @@ export type MetricEvents = {
   }
   // user pressed the remove all data button
   'contacts:settings:removeData': {}
+
+  'liveEvents:feedBanner:seen': {
+    feed: string
+    context: LiveEventFeedMetricContext
+  }
+  'liveEvents:feedBanner:click': {
+    feed: string
+    context: LiveEventFeedMetricContext
+  }
+  'liveEvents:feedBanner:hide': {
+    feed: string
+    context: LiveEventFeedMetricContext
+  }
+  'liveEvents:feedBanner:unhide': {
+    feed: string
+    context: LiveEventFeedMetricContext
+  }
+  'liveEvents:hideAllFeedBanners': {
+    context: LiveEventFeedMetricContext
+  }
+  'liveEvents:unhideAllFeedBanners': {
+    context: LiveEventFeedMetricContext
+  }
 }

src/screens/Hashtag.tsx

@@ -46,13 +46,22 @@ export default function HashtagScreen({
   const {tag, author} = route.params
   const {_} = useLingui()
 
-  const fullTag = React.useMemo(() => {
-    return `#${decodeURIComponent(tag)}`
+  const decodedTag = React.useMemo(() => {
+    return decodeURIComponent(tag)
   }, [tag])
 
+  const isCashtag = decodedTag.startsWith('$')
+
+  const fullTag = React.useMemo(() => {
+    // Cashtags already include the $ prefix, hashtags need # added
+    return isCashtag ? decodedTag : `#${decodedTag}`
+  }, [decodedTag, isCashtag])
+
   const headerTitle = React.useMemo(() => {
-    return enforceLen(fullTag.toLowerCase(), 24, true, 'middle')
-  }, [fullTag])
+    // Keep cashtags uppercase, lowercase hashtags
+    const displayTag = isCashtag ? fullTag.toUpperCase() : fullTag.toLowerCase()
+    return enforceLen(displayTag, 24, true, 'middle')
+  }, [fullTag, isCashtag])
 
   const sanitizedAuthor = React.useMemo(() => {
     if (!author) return
@@ -172,10 +181,14 @@ function HashtagScreenTab({
   const {hasSession} = useSession()
   const trackPostView = usePostViewTracking('Hashtag')
 
+  const isCashtag = fullTag.startsWith('$')
+
   const queryParam = React.useMemo(() => {
-    if (!author) return fullTag
-    return `${fullTag} from:${author}`
-  }, [fullTag, author])
+    // Cashtags need # prefix for search: "#$BTC" or "#$BTC from:author"
+    const searchTag = isCashtag ? `#${fullTag}` : fullTag
+    if (!author) return searchTag
+    return `${searchTag} from:${author}`
+  }, [fullTag, author, isCashtag])
 
   const {
     data,
@@ -255,7 +268,7 @@ function HashtagScreenTab({
           isError={isError}
           onRetry={refetch}
           emptyType="results"
-          emptyMessage={_(msg`We couldn't find any results for that hashtag.`)}
+          emptyMessage={_(msg`We couldn't find any results for that tag.`)}
         />
       ) : (
         <List

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -281,6 +281,12 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
   ])
 
   const onOpenAuthor = () => {
+    logger.metric('post:clickthroughAuthor', {
+      uri: post.uri,
+      authorDid: post.author.did,
+      logContext: 'PostThreadItem',
+      feedDescriptor: feedFeedback.feedDescriptor,
+    })
     if (postSource) {
       feedFeedback.sendInteraction({
         item: post.uri,
@@ -292,6 +298,12 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
   }
 
   const onOpenEmbed = () => {
+    logger.metric('post:clickthroughEmbed', {
+      uri: post.uri,
+      authorDid: post.author.did,
+      logContext: 'PostThreadItem',
+      feedDescriptor: feedFeedback.feedDescriptor,
+    })
     if (postSource) {
       feedFeedback.sendInteraction({
         item: post.uri,

src/screens/Search/Explore.tsx

@@ -68,6 +68,7 @@ import {Loader} from '#/components/Loader'
 import * as ProfileCard from '#/components/ProfileCard'
 import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
+import {ExploreScreenLiveEventFeedsBanner} from '#/features/liveEvents/components/ExploreScreenLiveEventFeedsBanner'
 import * as ModuleHeader from './components/ModuleHeader'
 import {
   SuggestedAccountsTabBar,
@@ -201,6 +202,10 @@ type ExploreScreenItems =
       type: 'interests-card'
       key: 'interests-card'
     }
+  | {
+      type: 'liveEventFeedsBanner'
+      key: string
+    }
 
 export function Explore({
   focusSearchInput,
@@ -684,6 +689,8 @@ export function Explore({
     i.push(topBorder)
     i.push(...interestsNuxModule)
 
+    i.push({type: 'liveEventFeedsBanner', key: 'liveEventFeedsBanner'})
+
     if (useFullExperience) {
       i.push(trendingTopicsModule)
       i.push(...suggestedFeedsModule)
@@ -998,6 +1005,9 @@ export function Explore({
         case 'interests-card': {
           return <ExploreInterestsCard />
         }
+        case 'liveEventFeedsBanner': {
+          return <ExploreScreenLiveEventFeedsBanner />
+        }
       }
     },
     [

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -26,6 +26,7 @@ import {Play_Stroke2_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
 import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
 import {Window_Stroke2_Corner2_Rounded as WindowIcon} from '#/components/icons/Window'
 import * as Layout from '#/components/Layout'
+import {LiveEventFeedsSettingsToggle} from '#/features/liveEvents/components/LiveEventFeedsSettingsToggle'
 
 type Props = NativeStackScreenProps<
   CommonNavigatorParams,
@@ -124,7 +125,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
               <Toggle.Platform />
             </SettingsList.Item>
           </Toggle.Item>
-          {trendingEnabled && (
+          {trendingEnabled ? (
             <>
               <SettingsList.Divider />
               <Toggle.Item
@@ -148,6 +149,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
                   <Toggle.Platform />
                 </SettingsList.Item>
               </Toggle.Item>
+              <LiveEventFeedsSettingsToggle />
               <Toggle.Item
                 name="show_trending_videos"
                 label={_(msg`Enable trending videos in your Discover feed`)}
@@ -170,6 +172,11 @@ export function ContentAndMediaSettingsScreen({}: Props) {
                 </SettingsList.Item>
               </Toggle.Item>
             </>
+          ) : (
+            <>
+              <SettingsList.Divider />
+              <LiveEventFeedsSettingsToggle />
+            </>
           )}
         </SettingsList.Container>
       </Layout.Content>

src/screens/Signup/StepInfo/Policies.tsx

@@ -11,12 +11,8 @@ import {Text} from '#/components/Typography'
 
 export const Policies = ({
   serviceDescription,
-  needsGuardian,
-  under13,
 }: {
   serviceDescription: ComAtprotoServerDescribeServer.OutputSchema
-  needsGuardian: boolean
-  under13: boolean
 }) => {
   const t = useTheme()
   const {_} = useLingui()
@@ -91,30 +87,9 @@ export const Policies = ({
     return null
   }
 
-  return (
-    <View style={[a.gap_sm]}>
-      {els ? (
-        <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
-          {els}
-        </Text>
-      ) : null}
-
-      {under13 ? (
-        <Admonition type="error">
-          <Trans>
-            You must be 13 years of age or older to create an account.
-          </Trans>
-        </Admonition>
-      ) : needsGuardian ? (
-        <Admonition type="warning">
-          <Trans>
-            If you are not yet an adult according to the laws of your country,
-            your parent or legal guardian must read these Terms on your behalf.
-          </Trans>
-        </Admonition>
-      ) : undefined}
-    </View>
-  )
+  return els ? (
+    <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>{els}</Text>
+  ) : null
 }
 
 function validWebLink(url?: string): string | undefined {

src/screens/Signup/StepInfo/index.tsx

@@ -7,9 +7,13 @@ import type tldts from 'tldts'
 
 import {isEmailMaybeInvalid} from '#/lib/strings/email'
 import {logger} from '#/logger'
-import {is13, is18, useSignupContext} from '#/screens/Signup/state'
+import {isNative} from '#/platform/detection'
+import {useSignupContext} from '#/screens/Signup/state'
 import {Policies} from '#/screens/Signup/StepInfo/Policies'
 import {atoms as a, native} from '#/alf'
+import * as Admonition from '#/components/Admonition'
+import * as Dialog from '#/components/Dialog'
+import {DeviceLocationRequestDialog} from '#/components/dialogs/DeviceLocationRequestDialog'
 import * as DateField from '#/components/forms/DateField'
 import {type DateFieldRef} from '#/components/forms/DateField/types'
 import {FormError} from '#/components/forms/FormError'
@@ -18,8 +22,19 @@ import * as TextField from '#/components/forms/TextField'
 import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope'
 import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
 import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket'
+import {createStaticClick, SimpleInlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {usePreemptivelyCompleteActivePolicyUpdate} from '#/components/PolicyUpdateOverlay/usePreemptivelyCompleteActivePolicyUpdate'
+import * as Toast from '#/components/Toast'
+import {
+  isUnderAge,
+  MIN_ACCESS_AGE,
+  useAgeAssuranceRegionConfigWithFallback,
+} from '#/ageAssurance/util'
+import {
+  useDeviceGeolocationApi,
+  useIsDeviceGeolocationGranted,
+} from '#/geolocation'
 import {BackNextButtons} from '../BackNextButtons'
 
 function sanitizeDate(date: Date): Date {
@@ -57,6 +72,20 @@ export function StepInfo({
   const passwordInputRef = useRef<TextInput>(null)
   const birthdateInputRef = useRef<DateFieldRef>(null)
 
+  const aaRegionConfig = useAgeAssuranceRegionConfigWithFallback()
+  const {setDeviceGeolocation} = useDeviceGeolocationApi()
+  const locationControl = Dialog.useDialogControl()
+  const isOverRegionMinAccessAge = state.dateOfBirth
+    ? !isUnderAge(state.dateOfBirth.toISOString(), aaRegionConfig.minAccessAge)
+    : true
+  const isOverAppMinAccessAge = state.dateOfBirth
+    ? !isUnderAge(state.dateOfBirth.toISOString(), MIN_ACCESS_AGE)
+    : true
+  const isOverMinAdultAge = state.dateOfBirth
+    ? !isUnderAge(state.dateOfBirth.toISOString(), 18)
+    : true
+  const isDeviceGeolocationGranted = useIsDeviceGeolocationGranted()
+
   const [hasWarnedEmail, setHasWarnedEmail] = React.useState<boolean>(false)
 
   const tldtsRef = React.useRef<typeof tldts>(undefined)
@@ -76,7 +105,7 @@ export function StepInfo({
     const emailChanged = prevEmailValueRef.current !== email
     const password = passwordValueRef.current
 
-    if (!is13(state.dateOfBirth)) {
+    if (!isOverRegionMinAccessAge) {
       return
     }
 
@@ -274,16 +303,79 @@ export function StepInfo({
                 maximumDate={new Date()}
               />
             </View>
-            <Policies
-              serviceDescription={state.serviceDescription}
-              needsGuardian={!is18(state.dateOfBirth)}
-              under13={!is13(state.dateOfBirth)}
-            />
+
+            <View style={[a.gap_sm]}>
+              <Policies serviceDescription={state.serviceDescription} />
+
+              {!isOverRegionMinAccessAge || !isOverAppMinAccessAge ? (
+                <Admonition.Outer type="error">
+                  <Admonition.Row>
+                    <Admonition.Icon />
+                    <Admonition.Content>
+                      <Admonition.Text>
+                        {!isOverAppMinAccessAge ? (
+                          <Trans>
+                            You must be {MIN_ACCESS_AGE} years of age or older
+                            to create an account.
+                          </Trans>
+                        ) : (
+                          <Trans>
+                            You must be {aaRegionConfig.minAccessAge} years of
+                            age or older to create an account in your region.
+                          </Trans>
+                        )}
+                      </Admonition.Text>
+                      {isNative &&
+                        !isDeviceGeolocationGranted &&
+                        isOverAppMinAccessAge && (
+                          <Admonition.Text>
+                            <Trans>
+                              Have we got your location wrong?{' '}
+                              <SimpleInlineLinkText
+                                label={_(
+                                  msg`Tap here to confirm your location with GPS.`,
+                                )}
+                                {...createStaticClick(() => {
+                                  locationControl.open()
+                                })}>
+                                Tap here to confirm your location with GPS.
+                              </SimpleInlineLinkText>
+                            </Trans>
+                          </Admonition.Text>
+                        )}
+                    </Admonition.Content>
+                  </Admonition.Row>
+                </Admonition.Outer>
+              ) : !isOverMinAdultAge ? (
+                <Admonition.Admonition type="warning">
+                  <Trans>
+                    If you are not yet an adult according to the laws of your
+                    country, your parent or legal guardian must read these Terms
+                    on your behalf.
+                  </Trans>
+                </Admonition.Admonition>
+              ) : undefined}
+            </View>
+
+            {isNative && (
+              <DeviceLocationRequestDialog
+                control={locationControl}
+                onLocationAcquired={props => {
+                  props.closeDialog(() => {
+                    // set this after close!
+                    setDeviceGeolocation(props.geolocation)
+                    Toast.show(_(msg`Your location has been updated.`), {
+                      type: 'success',
+                    })
+                  })
+                }}
+              />
+            )}
           </>
         ) : undefined}
       </View>
       <BackNextButtons
-        hideNext={!is13(state.dateOfBirth)}
+        hideNext={!isOverRegionMinAccessAge}
         showRetry={isServerError}
         isLoading={state.isLoading}
         onBackPress={onPressBack}

src/state/feed-feedback.tsx

@@ -137,7 +137,6 @@ export function useFeedFeedback(
     sendOrAggregateInteractionsForStats(
       aggregatedStats.current,
       interactionsToSend,
-      feed?.feedDescriptor ?? 'unknown',
     )
     throttledFlushAggregatedStats()
     logger.debug('flushed')
@@ -274,28 +273,10 @@ function createAggregatedStats(): AggregatedStats {
 function sendOrAggregateInteractionsForStats(
   stats: AggregatedStats,
   interactions: AppBskyFeedDefs.Interaction[],
-  feed: string,
 ) {
   for (let interaction of interactions) {
     switch (interaction.event) {
-      // Pressing "Show more" / "Show less" is relatively uncommon so we won't aggregate them.
-      // This lets us send the feed context together with them.
-      case 'app.bsky.feed.defs#requestLess': {
-        logger.metric('feed:showLess', {
-          feed,
-          feedContext: interaction.feedContext ?? '',
-        })
-        break
-      }
-      case 'app.bsky.feed.defs#requestMore': {
-        logger.metric('feed:showMore', {
-          feed,
-          feedContext: interaction.feedContext ?? '',
-        })
-        break
-      }
-
-      // The rest of the events are aggregated and sent later in batches.
+      // The events are aggregated and sent later in batches.
       case 'app.bsky.feed.defs#clickthroughAuthor':
       case 'app.bsky.feed.defs#clickthroughEmbed':
       case 'app.bsky.feed.defs#clickthroughItem':

src/state/queries/nuxs/definitions.ts

@@ -12,6 +12,8 @@ export enum Nux {
   BookmarksAnnouncement = 'BookmarksAnnouncement',
   FindContactsAnnouncement = 'FindContactsAnnouncement',
   FindContactsDismissibleBanner = 'FindContactsDismissibleBanner',
+  LiveNowBetaDialog = 'LiveNowBetaDialog',
+  LiveNowBetaNudge = 'LiveNowBetaNudge',
 
   /*
    * Blocking announcements. New IDs are required for each new announcement.
@@ -62,6 +64,14 @@ export type AppNux = BaseNux<
       id: Nux.FindContactsDismissibleBanner
       data: undefined
     }
+  | {
+      id: Nux.LiveNowBetaDialog
+      data: undefined
+    }
+  | {
+      id: Nux.LiveNowBetaNudge
+      data: undefined
+    }
 >
 
 export const NuxSchemas: Record<Nux, zod.ZodObject<any> | undefined> = {
@@ -75,4 +85,6 @@ export const NuxSchemas: Record<Nux, zod.ZodObject<any> | undefined> = {
   [Nux.BookmarksAnnouncement]: undefined,
   [Nux.FindContactsAnnouncement]: undefined,
   [Nux.FindContactsDismissibleBanner]: undefined,
+  [Nux.LiveNowBetaDialog]: undefined,
+  [Nux.LiveNowBetaNudge]: undefined,
 }

src/state/queries/post.ts

@@ -111,7 +111,7 @@ export function usePostLikeMutationQueue(
   const postCid = post.cid
   const initialLikeUri = post.viewer?.like
   const likeMutation = usePostLikeMutation(feedDescriptor, logContext, post)
-  const unlikeMutation = usePostUnlikeMutation(feedDescriptor, logContext)
+  const unlikeMutation = usePostUnlikeMutation(feedDescriptor, logContext, post)
 
   const queueToggle = useToggleMutationQueue({
     initialState: initialLikeUri,
@@ -182,6 +182,8 @@ function usePostLikeMutation(
         ownProfile = findProfileQueryData(queryClient, currentAccount.did)
       }
       logger.metric('post:like', {
+        uri,
+        authorDid: postAuthor.did,
         logContext,
         doesPosterFollowLiker: postAuthor.viewer
           ? Boolean(postAuthor.viewer.followedBy)
@@ -206,11 +208,17 @@ function usePostLikeMutation(
 function usePostUnlikeMutation(
   feedDescriptor: string | undefined,
   logContext: LogEvents['post:unlike']['logContext'],
+  post: Shadow<AppBskyFeedDefs.PostView>,
 ) {
   const agent = useAgent()
   return useMutation<void, Error, {postUri: string; likeUri: string}>({
-    mutationFn: ({likeUri}) => {
-      logger.metric('post:unlike', {logContext, feedDescriptor})
+    mutationFn: ({postUri, likeUri}) => {
+      logger.metric('post:unlike', {
+        uri: postUri,
+        authorDid: post.author.did,
+        logContext,
+        feedDescriptor,
+      })
       return agent.deleteLike(likeUri)
     },
   })
@@ -227,8 +235,12 @@ export function usePostRepostMutationQueue(
   const postUri = post.uri
   const postCid = post.cid
   const initialRepostUri = post.viewer?.repost
-  const repostMutation = usePostRepostMutation(feedDescriptor, logContext)
-  const unrepostMutation = usePostUnrepostMutation(feedDescriptor, logContext)
+  const repostMutation = usePostRepostMutation(feedDescriptor, logContext, post)
+  const unrepostMutation = usePostUnrepostMutation(
+    feedDescriptor,
+    logContext,
+    post,
+  )
 
   const queueToggle = useToggleMutationQueue({
     initialState: initialRepostUri,
@@ -280,6 +292,7 @@ export function usePostRepostMutationQueue(
 function usePostRepostMutation(
   feedDescriptor: string | undefined,
   logContext: LogEvents['post:repost']['logContext'],
+  post: Shadow<AppBskyFeedDefs.PostView>,
 ) {
   const agent = useAgent()
   return useMutation<
@@ -288,7 +301,12 @@ function usePostRepostMutation(
     {uri: string; cid: string; via?: {uri: string; cid: string}} // the post's uri and cid, and the repost uri/cid if present
   >({
     mutationFn: ({uri, cid, via}) => {
-      logger.metric('post:repost', {logContext, feedDescriptor})
+      logger.metric('post:repost', {
+        uri,
+        authorDid: post.author.did,
+        logContext,
+        feedDescriptor,
+      })
       return agent.repost(uri, cid, via)
     },
   })
@@ -297,11 +315,17 @@ function usePostRepostMutation(
 function usePostUnrepostMutation(
   feedDescriptor: string | undefined,
   logContext: LogEvents['post:unrepost']['logContext'],
+  post: Shadow<AppBskyFeedDefs.PostView>,
 ) {
   const agent = useAgent()
   return useMutation<void, Error, {postUri: string; repostUri: string}>({
-    mutationFn: ({repostUri}) => {
-      logger.metric('post:unrepost', {logContext, feedDescriptor})
+    mutationFn: ({postUri, repostUri}) => {
+      logger.metric('post:unrepost', {
+        uri: postUri,
+        authorDid: post.author.did,
+        logContext,
+        feedDescriptor,
+      })
       return agent.deleteRepost(repostUri)
     },
   })
@@ -373,7 +397,6 @@ function useThreadMuteMutation() {
     {uri: string} // the root post's uri
   >({
     mutationFn: ({uri}) => {
-      logger.metric('post:mute', {})
       return agent.api.app.bsky.graph.muteThread({root: uri})
     },
   })
@@ -383,7 +406,6 @@ function useThreadUnmuteMutation() {
   const agent = useAgent()
   return useMutation<{}, Error, {uri: string}>({
     mutationFn: ({uri}) => {
-      logger.metric('post:unmute', {})
       return agent.api.app.bsky.graph.unmuteThread({root: uri})
     },
   })

src/state/queries/preferences/const.ts

@@ -45,4 +45,8 @@ export const DEFAULT_LOGGED_OUT_PREFERENCES: UsePreferencesQueryResponse = {
   verificationPrefs: {
     hideBadges: false,
   },
+  liveEventPreferences: {
+    hideAllFeeds: false,
+    hiddenFeedIds: [],
+  },
 }

src/state/queries/profile.ts

@@ -4,12 +4,14 @@ import {
   type AppBskyActorGetProfile,
   type AppBskyActorGetProfiles,
   type AppBskyActorProfile,
+  type AppBskyGraphGetFollows,
   AtUri,
   type BskyAgent,
   type ComAtprotoRepoUploadBlob,
   type Un$Typed,
 } from '@atproto/api'
 import {
+  type InfiniteData,
   keepPreviousData,
   type QueryClient,
   useMutation,
@@ -26,6 +28,7 @@ import {type Shadow} from '#/state/cache/types'
 import {type ImageMeta} from '#/state/gallery'
 import {STALE} from '#/state/queries'
 import {resetProfilePostsQueries} from '#/state/queries/post-feed'
+import {RQKEY as PROFILE_FOLLOWS_RQKEY} from '#/state/queries/profile-follows'
 import {
   unstableCacheProfileView,
   useUnstableProfileViewCache,
@@ -247,6 +250,7 @@ export function useProfileFollowMutationQueue(
 ) {
   const agent = useAgent()
   const queryClient = useQueryClient()
+  const {currentAccount} = useSession()
   const did = profile.did
   const initialFollowingUri = profile.viewer?.following
   const followMutation = useProfileFollowMutation(
@@ -283,6 +287,47 @@ export function useProfileFollowMutationQueue(
         followingUri: finalFollowingUri,
       })
 
+      // Optimistically update profile follows cache for avatar displays
+      if (currentAccount?.did) {
+        type FollowsQueryData =
+          InfiniteData<AppBskyGraphGetFollows.OutputSchema>
+        queryClient.setQueryData<FollowsQueryData>(
+          PROFILE_FOLLOWS_RQKEY(currentAccount.did),
+          old => {
+            if (!old?.pages?.[0]) return old
+            if (finalFollowingUri) {
+              // Add the followed profile to the beginning
+              const alreadyExists = old.pages[0].follows.some(
+                f => f.did === profile.did,
+              )
+              if (alreadyExists) return old
+              return {
+                ...old,
+                pages: [
+                  {
+                    ...old.pages[0],
+                    follows: [
+                      profile as AppBskyActorDefs.ProfileView,
+                      ...old.pages[0].follows,
+                    ],
+                  },
+                  ...old.pages.slice(1),
+                ],
+              }
+            } else {
+              // Remove the unfollowed profile
+              return {
+                ...old,
+                pages: old.pages.map(page => ({
+                  ...page,
+                  follows: page.follows.filter(f => f.did !== profile.did),
+                })),
+              }
+            }
+          },
+        )
+      }
+
       if (finalFollowingUri) {
         agent.app.bsky.graph
           .getSuggestedFollowsByActor({

src/state/service-config.tsx

@@ -1,7 +1,10 @@
 import {createContext, useContext, useMemo} from 'react'
 
+import {useGate} from '#/lib/statsig/statsig'
 import {useLanguagePrefs} from '#/state/preferences/languages'
 import {useServiceConfigQuery} from '#/state/queries/service-config'
+import {useSession} from '#/state/session'
+import {IS_DEV} from '#/env'
 import {device} from '#/storage'
 
 type TrendingContext = {
@@ -18,7 +21,7 @@ const TrendingContext = createContext<TrendingContext>({
 })
 TrendingContext.displayName = 'TrendingContext'
 
-const LiveNowContext = createContext<LiveNowContext | null>(null)
+const LiveNowContext = createContext<LiveNowContext>([])
 LiveNowContext.displayName = 'LiveNowContext'
 
 const CheckEmailConfirmedContext = createContext<boolean | null>(null)
@@ -82,19 +85,28 @@ export function useTrendingConfig() {
   return useContext(TrendingContext)
 }
 
-export function useLiveNowConfig() {
+const DEFAULT_LIVE_ALLOWED_DOMAINS = ['twitch.tv', 'www.twitch.tv']
+export type LiveNowConfig = {
+  allowedDomains: Set<string>
+}
+export function useLiveNowConfig(): LiveNowConfig {
   const ctx = useContext(LiveNowContext)
-  if (!ctx) {
-    throw new Error(
-      'useLiveNowConfig must be used within a ServiceConfigManager',
-    )
+  const canGoLive = useCanGoLive()
+  const {currentAccount} = useSession()
+  if (!currentAccount?.did || !canGoLive) return {allowedDomains: new Set()}
+  const vip = ctx.find(live => live.did === currentAccount.did)
+  return {
+    allowedDomains: new Set(
+      DEFAULT_LIVE_ALLOWED_DOMAINS.concat(vip ? vip.domains : []),
+    ),
   }
-  return ctx
 }
 
-export function useCanGoLive(did?: string) {
-  const config = useLiveNowConfig()
-  return !!config.find(cfg => cfg.did === did)
+export function useCanGoLive() {
+  const gate = useGate()
+  const {hasSession} = useSession()
+  if (!hasSession) return false
+  return IS_DEV ? true : gate('live_now_beta')
 }
 
 export function useCheckEmailConfirmed() {

src/view/com/composer/text-input/web/TagDecorator.ts

@@ -14,7 +14,11 @@
  * the facet-set.
  */
 
-import {TAG_REGEX, TRAILING_PUNCTUATION_REGEX} from '@atproto/api'
+import {
+  CASHTAG_REGEX,
+  TAG_REGEX,
+  TRAILING_PUNCTUATION_REGEX,
+} from '@atproto/api'
 import {Mark} from '@tiptap/core'
 import {type Node as ProsemirrorNode} from '@tiptap/pm/model'
 import {Plugin, PluginKey} from '@tiptap/pm/state'
@@ -28,6 +32,7 @@ function getDecorations(doc: ProsemirrorNode) {
       const regex = TAG_REGEX
       const textContent = node.textContent
 
+      // Detect hashtags
       let match
       while ((match = regex.exec(textContent))) {
         const [matchedString, __, tag] = match
@@ -52,6 +57,27 @@ function getDecorations(doc: ProsemirrorNode) {
           }),
         )
       }
+
+      // Detect cashtags
+      const cashtagRegex = new RegExp(CASHTAG_REGEX.source, 'gu')
+      while ((match = cashtagRegex.exec(textContent))) {
+        const [_fullMatch, leading, ticker] = match
+
+        if (!ticker) continue
+
+        // Calculate positions: leading char + $ + ticker
+        const matchedFrom = match.index + leading.length
+        const matchedTo = matchedFrom + 1 + ticker.length // +1 for $
+
+        const start = pos + matchedFrom
+        const end = pos + matchedTo
+
+        decorations.push(
+          Decoration.inline(start, end, {
+            class: 'autolink',
+          }),
+        )
+      }
     }
   })
 

src/view/com/feeds/ComposerPrompt.tsx

@@ -148,8 +148,6 @@ export function ComposerPrompt() {
         a.relative,
         a.flex_row,
         a.align_start,
-        a.border_t,
-        t.atoms.border_contrast_low,
         {
           paddingLeft: 18,
           paddingRight: 15,

src/view/com/posts/PostFeed.tsx

@@ -70,6 +70,7 @@ import {
 } from '#/components/feeds/PostFeedVideoGridRow'
 import {TrendingInterstitial} from '#/components/interstitials/Trending'
 import {TrendingVideos as TrendingVideosInterstitial} from '#/components/interstitials/TrendingVideos'
+import {DiscoverFeedLiveEventFeedsAndTrendingBanner} from '#/features/liveEvents/components/DiscoverFeedLiveEventFeedsAndTrendingBanner'
 import {ComposerPrompt} from '../feeds/ComposerPrompt'
 import {DiscoverFallbackHeader} from './DiscoverFallbackHeader'
 import {FeedShutdownMsg} from './FeedShutdownMsg'
@@ -155,6 +156,10 @@ type FeedRow =
       type: 'composerPrompt'
       key: string
     }
+  | {
+      type: 'liveEventFeedsAndTrendingBanner'
+      key: string
+    }
 
 export function getItemsForFeedback(feedRow: FeedRow): {
   item: FeedPostSliceItem
@@ -360,7 +365,7 @@ let PostFeed = ({
   const showProgressIntersitial =
     (followProgressGuide || followAndLikeProgressGuide) && !rightNavVisible
 
-  const {trendingDisabled, trendingVideoDisabled} = useTrendingSettings()
+  const {trendingVideoDisabled} = useTrendingSettings()
 
   const ageAssuranceBannerState = useAgeAssuranceBannerState()
   const selectedFeed = useSelectedFeed()
@@ -510,13 +515,10 @@ let PostFeed = ({
                         })
                       }
                     }
-                    if (!rightNavVisible && !trendingDisabled) {
-                      arr.push({
-                        type: 'interstitialTrending',
-                        key:
-                          'interstitial2-' + sliceIndex + '-' + lastFetchedAt,
-                      })
-                    }
+                    arr.push({
+                      type: 'liveEventFeedsAndTrendingBanner',
+                      key: 'liveEventFeedsAndTrendingBanner-' + sliceIndex,
+                    })
                     // Show composer prompt for Discover and Following feeds
                     if (
                       hasSession &&
@@ -672,9 +674,7 @@ let PostFeed = ({
     feedTab,
     hasSession,
     showProgressIntersitial,
-    trendingDisabled,
     trendingVideoDisabled,
-    rightNavVisible,
     gtMobile,
     isVideoFeed,
     areVideoFeedsEnabled,
@@ -773,6 +773,8 @@ let PostFeed = ({
         return <AgeAssuranceDismissibleFeedBanner />
       } else if (row.type === 'interstitialTrending') {
         return <TrendingInterstitial />
+      } else if (row.type === 'liveEventFeedsAndTrendingBanner') {
+        return <DiscoverFeedLiveEventFeedsAndTrendingBanner />
       } else if (row.type === 'composerPrompt') {
         return <ComposerPrompt />
       } else if (row.type === 'interstitialTrendingVideos') {
@@ -952,7 +954,7 @@ let PostFeed = ({
         const actor = post.author
         if (
           actor.status &&
-          validateStatus(actor.did, actor.status, liveNowConfig) &&
+          validateStatus(actor.status, liveNowConfig) &&
           isStatusStillActive(actor.status.expiresAt)
         ) {
           if (!seenActorWithStatusRef.current.has(actor.did)) {

src/view/com/posts/PostFeedItem.tsx

@@ -21,6 +21,7 @@ import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'
 import {useGate} from '#/lib/statsig/statsig'
 import {countLines} from '#/lib/strings/helpers'
+import {logger} from '#/logger'
 import {
   POST_TOMBSTONE,
   type Shadow,
@@ -173,7 +174,8 @@ let FeedItemInner = ({
     const urip = new AtUri(post.uri)
     return [makeProfileLink(post.author, 'post', urip.rkey), urip.rkey]
   }, [post.uri, post.author])
-  const {sendInteraction, feedSourceInfo} = useFeedFeedbackContext()
+  const {sendInteraction, feedSourceInfo, feedDescriptor} =
+    useFeedFeedbackContext()
 
   const onPressReply = () => {
     sendInteraction({
@@ -209,6 +211,12 @@ let FeedItemInner = ({
       feedContext,
       reqId,
     })
+    logger.metric('post:clickthroughAuthor', {
+      uri: post.uri,
+      authorDid: post.author.did,
+      logContext: 'FeedItem',
+      feedDescriptor,
+    })
   }
 
   const onOpenReposter = () => {
@@ -227,6 +235,12 @@ let FeedItemInner = ({
       feedContext,
       reqId,
     })
+    logger.metric('post:clickthroughEmbed', {
+      uri: post.uri,
+      authorDid: post.author.did,
+      logContext: 'FeedItem',
+      feedDescriptor,
+    })
   }
 
   const onBeforePress = () => {
@@ -236,6 +250,12 @@ let FeedItemInner = ({
       feedContext,
       reqId,
     })
+    logger.metric('post:clickthroughItem', {
+      uri: post.uri,
+      authorDid: post.author.did,
+      logContext: 'FeedItem',
+      feedDescriptor,
+    })
     unstableCacheProfileView(queryClient, post.author)
     setUnstablePostSource(buildPostSourceKey(post.uri, post.author.handle), {
       feedSourceInfo,

src/view/com/profile/ProfileMenu.tsx

@@ -15,6 +15,7 @@ import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {type Shadow} from '#/state/cache/types'
 import {useModalControls} from '#/state/modals'
+import {Nux, useNux, useSaveNux} from '#/state/queries/nuxs'
 import {
   RQKEY as profileQueryKey,
   useProfileBlockMutationQueue,
@@ -25,6 +26,7 @@ import {useCanGoLive} from '#/state/service-config'
 import {useSession} from '#/state/session'
 import {EventStopper} from '#/view/com/util/EventStopper'
 import * as Toast from '#/view/com/util/Toast'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {StarterPackDialog} from '#/components/dialogs/StarterPackDialog'
@@ -49,6 +51,7 @@ import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/
 import {StarterPack} from '#/components/icons/StarterPack'
 import {EditLiveDialog} from '#/components/live/EditLiveDialog'
 import {GoLiveDialog} from '#/components/live/GoLiveDialog'
+import {GoLiveDisabledDialog} from '#/components/live/GoLiveDisabledDialog'
 import * as Menu from '#/components/Menu'
 import {
   ReportDialog,
@@ -58,6 +61,8 @@ import * as Prompt from '#/components/Prompt'
 import {useFullVerificationState} from '#/components/verification'
 import {VerificationCreatePrompt} from '#/components/verification/VerificationCreatePrompt'
 import {VerificationRemovePrompt} from '#/components/verification/VerificationRemovePrompt'
+import {Dot} from '#/features/nuxs/components/Dot'
+import {Gradient} from '#/features/nuxs/components/Gradient'
 import {useDevMode} from '#/storage/hooks/dev-mode'
 
 let ProfileMenu = ({
@@ -65,6 +70,7 @@ let ProfileMenu = ({
 }: {
   profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>
 }): React.ReactNode => {
+  const t = useTheme()
   const {_} = useLingui()
   const {currentAccount, hasSession} = useSession()
   const {openModal} = useModalControls()
@@ -78,7 +84,15 @@ let ProfileMenu = ({
   const isLabelerAndNotBlocked = !!profile.associated?.labeler && !isBlocked
   const [devModeEnabled] = useDevMode()
   const verification = useFullVerificationState({profile})
-  const canGoLive = useCanGoLive(currentAccount?.did)
+  const canGoLive = useCanGoLive()
+  const status = useActorStatus(profile)
+  const statusNudge = useNux(Nux.LiveNowBetaNudge)
+  const statusNudgeActive =
+    isSelf &&
+    canGoLive &&
+    statusNudge.status === 'ready' &&
+    !statusNudge.nux?.completed
+  const {mutate: saveNux} = useSaveNux()
 
   const [queueMute, queueUnmute] = useProfileMuteMutationQueue(profile)
   const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)
@@ -90,6 +104,7 @@ let ProfileMenu = ({
   const blockPromptControl = Prompt.usePromptControl()
   const loggedOutWarningPromptControl = Prompt.usePromptControl()
   const goLiveDialogControl = useDialogControl()
+  const goLiveDisabledDialogControl = useDialogControl()
   const addToStarterPacksDialogControl = useDialogControl()
 
   const showLoggedOutWarning = React.useMemo(() => {
@@ -220,25 +235,28 @@ let ProfileMenu = ({
       return v.issuer === currentAccount?.did
     }) ?? []
 
-  const status = useActorStatus(profile)
-
   return (
     <EventStopper onKeyDown={false}>
       <Menu.Root>
         <Menu.Trigger label={_(msg`More options`)}>
           {({props}) => {
             return (
-              <Button
-                {...props}
-                testID="profileHeaderDropdownBtn"
-                label={_(msg`More options`)}
-                hitSlop={HITSLOP_20}
-                variant="solid"
-                color="secondary"
-                size="small"
-                shape="round">
-                <ButtonIcon icon={Ellipsis} size="sm" />
-              </Button>
+              <>
+                <Button
+                  {...props}
+                  testID="profileHeaderDropdownBtn"
+                  label={_(msg`More options`)}
+                  hitSlop={HITSLOP_20}
+                  variant="solid"
+                  color="secondary"
+                  size="small"
+                  shape="round">
+                  {statusNudgeActive && <Gradient style={[a.rounded_full]} />}
+                  <ButtonIcon icon={Ellipsis} size="sm" />
+                </Button>
+
+                {statusNudgeActive && <Dot top={1} right={1} />}
+              </>
             )
           }}
         </Menu.Trigger>
@@ -330,19 +348,54 @@ let ProfileMenu = ({
                   <Menu.Item
                     testID="profileHeaderDropdownListAddRemoveBtn"
                     label={
-                      status.isActive
-                        ? _(msg`Edit live status`)
-                        : _(msg`Go live`)
+                      status.isDisabled
+                        ? _(msg`Go live (disabled)`)
+                        : status.isActive
+                          ? _(msg`Edit live status`)
+                          : _(msg`Go live`)
                     }
-                    onPress={goLiveDialogControl.open}>
+                    onPress={() => {
+                      if (status.isDisabled) {
+                        goLiveDisabledDialogControl.open()
+                      } else {
+                        goLiveDialogControl.open()
+                      }
+                      saveNux({
+                        id: Nux.LiveNowBetaNudge,
+                        data: undefined,
+                        completed: true,
+                      })
+                    }}>
+                    {statusNudgeActive && <Gradient />}
                     <Menu.ItemText>
-                      {status.isActive ? (
+                      {status.isDisabled ? (
+                        <Trans>Go live (disabled)</Trans>
+                      ) : status.isActive ? (
                         <Trans>Edit live status</Trans>
                       ) : (
                         <Trans>Go live</Trans>
                       )}
                     </Menu.ItemText>
-                    <Menu.ItemIcon icon={LiveIcon} />
+                    {statusNudgeActive && (
+                      <Menu.ItemText
+                        style={[
+                          a.flex_0,
+                          {
+                            color: t.palette.primary_500,
+                            right: isWeb ? -8 : -4,
+                          },
+                        ]}>
+                        <Trans>New</Trans>
+                      </Menu.ItemText>
+                    )}
+                    <Menu.ItemIcon
+                      icon={LiveIcon}
+                      fill={
+                        statusNudgeActive
+                          ? () => t.palette.primary_500
+                          : undefined
+                      }
+                    />
                   </Menu.Item>
                 )}
                 {verification.viewer.role === 'verifier' &&
@@ -517,7 +570,12 @@ let ProfileMenu = ({
         verifications={currentAccountVerifications}
       />
 
-      {status.isActive ? (
+      {status.isDisabled ? (
+        <GoLiveDisabledDialog
+          control={goLiveDisabledDialogControl}
+          status={status}
+        />
+      ) : status.isActive ? (
         <EditLiveDialog
           control={goLiveDialogControl}
           status={status}

src/view/shell/desktop/Feeds.tsx

@@ -1,4 +1,4 @@
-import {View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
@@ -7,10 +7,18 @@ import {getCurrentRoute} from '#/lib/routes/helpers'
 import {type NavigationProp} from '#/lib/routes/types'
 import {logger} from '#/logger'
 import {emitSoftReset} from '#/state/events'
-import {usePinnedFeedsInfos} from '#/state/queries/feed'
+import {
+  type SavedFeedSourceInfo,
+  usePinnedFeedsInfos,
+} from '#/state/queries/feed'
 import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme, web} from '#/alf'
-import {createStaticClick, InlineLinkText} from '#/components/Link'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
+import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
 
 export function DesktopFeeds() {
   const t = useTheme()
@@ -57,13 +65,12 @@ export function DesktopFeeds() {
       style={[
         a.flex_1,
         web({
-          gap: 10,
+          gap: 2,
           /*
            * Small padding prevents overflow prior to actually overflowing the
            * height of the screen with lots of feeds.
            */
-          paddingVertical: 2,
-          marginHorizontal: -2,
+          paddingTop: 2,
           overflowY: 'auto',
         }),
       ]}>
@@ -72,10 +79,11 @@ export function DesktopFeeds() {
         const current = route.name === 'Home' && feed === selectedFeed
 
         return (
-          <InlineLinkText
+          <FeedItem
             key={feedInfo.uri}
-            label={feedInfo.displayName}
-            {...createStaticClick(() => {
+            feedInfo={feedInfo}
+            current={current}
+            onPress={() => {
               logger.metric(
                 'desktopFeeds:feed:click',
                 {
@@ -89,39 +97,143 @@ export function DesktopFeeds() {
               if (route.name === 'Home' && feed === selectedFeed) {
                 emitSoftReset()
               }
-            })}
-            style={[
-              a.text_md,
-              a.leading_snug,
-              a.flex_shrink_0,
-              current
-                ? [a.font_semi_bold, t.atoms.text]
-                : [t.atoms.text_contrast_medium],
-              web({
-                marginHorizontal: 2,
-                width: 'calc(100% - 4px)',
-              }),
-            ]}
-            numberOfLines={1}>
-            {feedInfo.displayName}
-          </InlineLinkText>
+            }}
+          />
         )
       })}
 
-      <InlineLinkText
+      <Link
         to="/feeds"
         label={_(msg`More feeds`)}
         style={[
-          a.text_md,
-          a.leading_snug,
-          web({
-            marginHorizontal: 2,
-            width: 'calc(100% - 4px)',
-          }),
-        ]}
-        numberOfLines={1}>
-        {_(msg`More feeds`)}
-      </InlineLinkText>
+          a.flex_row,
+          a.align_center,
+          a.gap_sm,
+          a.self_start,
+          a.rounded_sm,
+          {paddingVertical: 6, paddingHorizontal: 8},
+          route.name === 'Feeds' && {backgroundColor: t.palette.primary_50},
+        ]}>
+        {({hovered}) => {
+          const isActive = route.name === 'Feeds'
+          return (
+            <>
+              <View
+                style={[
+                  a.align_center,
+                  a.justify_center,
+                  a.rounded_xs,
+                  isActive
+                    ? {backgroundColor: t.palette.primary_100}
+                    : t.atoms.bg_contrast_50,
+                  {
+                    width: 20,
+                    height: 20,
+                  },
+                ]}>
+                <Plus
+                  style={{width: 16, height: 16}}
+                  fill={
+                    isActive || hovered
+                      ? t.atoms.text.color
+                      : t.atoms.text_contrast_medium.color
+                  }
+                />
+              </View>
+              <Text
+                style={[
+                  a.text_md,
+                  a.leading_snug,
+                  isActive
+                    ? [t.atoms.text, a.font_semi_bold]
+                    : hovered
+                      ? t.atoms.text
+                      : t.atoms.text_contrast_medium,
+                ]}
+                numberOfLines={1}>
+                {_(msg`More feeds`)}
+              </Text>
+            </>
+          )
+        }}
+      </Link>
     </View>
   )
 }
+
+function FeedItem({
+  feedInfo,
+  current,
+  onPress,
+}: {
+  feedInfo: SavedFeedSourceInfo
+  current: boolean
+  onPress: () => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
+  const isFollowing = feedInfo.feedDescriptor === 'following'
+
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={feedInfo.displayName}
+      accessibilityHint={_(msg`Opens ${feedInfo.displayName} feed`)}
+      onPress={onPress}
+      onHoverIn={onHoverIn}
+      onHoverOut={onHoverOut}
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        a.self_start,
+        a.rounded_sm,
+        {paddingVertical: 6, paddingHorizontal: 8},
+        current && {backgroundColor: t.palette.primary_50},
+      ]}>
+      {isFollowing ? (
+        <View
+          style={[
+            a.align_center,
+            a.justify_center,
+            a.rounded_xs,
+            {
+              width: 20,
+              height: 20,
+              backgroundColor: t.palette.primary_500,
+            },
+          ]}>
+          <FilterTimeline
+            style={{width: 14, height: 14}}
+            fill={t.palette.white}
+          />
+        </View>
+      ) : (
+        <UserAvatar
+          type={feedInfo.type === 'list' ? 'list' : 'algo'}
+          size={20}
+          avatar={feedInfo.avatar}
+          noBorder
+        />
+      )}
+      <Text
+        style={[
+          a.text_md,
+          a.leading_snug,
+          current
+            ? [t.atoms.text, a.font_semi_bold]
+            : hovered
+              ? t.atoms.text
+              : t.atoms.text_contrast_medium,
+        ]}
+        numberOfLines={1}>
+        {feedInfo.displayName}
+      </Text>
+    </Pressable>
+  )
+}

src/view/shell/desktop/RightNav.tsx

@@ -18,11 +18,11 @@ import {
   web,
 } from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
-import {Divider} from '#/components/Divider'
 import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
 import {InlineLinkText} from '#/components/Link'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
 import {Text} from '#/components/Typography'
+import {SidebarLiveEventFeedsBanner} from '#/features/liveEvents/components/SidebarLiveEventFeedsBanner'
 
 function useWebQueryParams() {
   const navigation = useNavigation()
@@ -50,7 +50,8 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
   const isSearchScreen = routeName === 'Search'
   const webqueryParams = useWebQueryParams()
   const searchQuery = webqueryParams?.q
-  const showTrending = !isSearchScreen || (isSearchScreen && !!searchQuery)
+  const showExploreScreenDuplicatedContent =
+    !isSearchScreen || (isSearchScreen && !!searchQuery)
   const {rightNavVisible, centerColumnOffset, leftNavMinimal} =
     useLayoutBreakpoints()
 
@@ -86,13 +87,13 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
 
       {hasSession && (
         <>
-          <ProgressGuideList />
           <DesktopFeeds />
-          <Divider />
+          <ProgressGuideList />
         </>
       )}
 
-      {showTrending && <SidebarTrendingTopics />}
+      {showExploreScreenDuplicatedContent && <SidebarLiveEventFeedsBanner />}
+      {showExploreScreenDuplicatedContent && <SidebarTrendingTopics />}
 
       <Text style={[a.leading_snug, t.atoms.text_contrast_low]}>
         {hasSession && (
@@ -102,25 +103,31 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
                 email: currentAccount?.email,
                 handle: currentAccount?.handle,
               })}
+              style={[t.atoms.text_contrast_medium]}
               label={_(msg`Feedback`)}>
               {_(msg`Feedback`)}
             </InlineLinkText>
-            {' • '}
+            <Text style={[t.atoms.text_contrast_low]}>{' ∙ '}</Text>
           </>
         )}
         <InlineLinkText
           to="https://bsky.social/about/support/privacy-policy"
+          style={[t.atoms.text_contrast_medium]}
           label={_(msg`Privacy`)}>
           {_(msg`Privacy`)}
         </InlineLinkText>
-        {' • '}
+        <Text style={[t.atoms.text_contrast_low]}>{' ∙ '}</Text>
         <InlineLinkText
           to="https://bsky.social/about/support/tos"
+          style={[t.atoms.text_contrast_medium]}
           label={_(msg`Terms`)}>
           {_(msg`Terms`)}
         </InlineLinkText>
-        {' • '}
-        <InlineLinkText label={_(msg`Help`)} to={HELP_DESK_URL}>
+        <Text style={[t.atoms.text_contrast_low]}>{' ∙ '}</Text>
+        <InlineLinkText
+          label={_(msg`Help`)}
+          to={HELP_DESK_URL}
+          style={[t.atoms.text_contrast_medium]}>
           {_(msg`Help`)}
         </InlineLinkText>
       </Text>

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {logEvent} from '#/lib/statsig/statsig'
+import {logger} from '#/logger'
 import {
   useTrendingSettings,
   useTrendingSettingsApi,
@@ -12,18 +11,13 @@ import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/service-config'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
-import {Divider} from '#/components/Divider'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
+import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
+import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
 import * as Prompt from '#/components/Prompt'
-import {
-  TrendingTopic,
-  TrendingTopicLink,
-  TrendingTopicSkeleton,
-} from '#/components/TrendingTopics'
+import {TrendingTopicLink} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
 
-const TRENDING_LIMIT = 6
+const TRENDING_LIMIT = 5
 
 export function SidebarTrendingTopics() {
   const {enabled} = useTrendingConfig()
@@ -39,64 +33,88 @@ function Inner() {
   const {data: trending, error, isLoading} = useTrendingTopics()
   const noTopics = !isLoading && !error && !trending?.topics?.length
 
-  const onConfirmHide = React.useCallback(() => {
-    logEvent('trendingTopics:hide', {context: 'sidebar'})
+  const onConfirmHide = () => {
+    logger.metric('trendingTopics:hide', {context: 'sidebar'})
     setTrendingDisabled(true)
-  }, [setTrendingDisabled])
+  }
 
   return error || noTopics ? null : (
     <>
-      <View style={[a.gap_sm, {paddingBottom: 2}]}>
-        <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-          <Graph size="sm" />
-          <Text
-            style={[
-              a.flex_1,
-              a.text_sm,
-              a.font_semi_bold,
-              t.atoms.text_contrast_medium,
-            ]}>
+      <View
+        style={[a.p_lg, a.rounded_md, a.border, t.atoms.border_contrast_low]}>
+        <View style={[a.flex_row, a.align_center, a.gap_xs, a.pb_md]}>
+          <TrendingIcon width={16} height={16} fill={t.atoms.text.color} />
+          <Text style={[a.flex_1, a.text_md, a.font_semi_bold, t.atoms.text]}>
             <Trans>Trending</Trans>
           </Text>
           <Button
-            label={_(msg`Hide trending topics`)}
-            size="tiny"
             variant="ghost"
+            size="tiny"
             color="secondary"
             shape="round"
-            onPress={() => trendingPrompt.open()}>
-            <ButtonIcon icon={X} />
+            label={_(msg`Trending options`)}
+            onPress={() => trendingPrompt.open()}
+            style={[a.bg_transparent, {marginTop: -6, marginRight: -6}]}>
+            <ButtonIcon icon={Ellipsis} size="xs" />
           </Button>
         </View>
 
-        <View style={[a.flex_row, a.flex_wrap, {gap: '6px 4px'}]}>
+        <View style={[a.gap_xs]}>
           {isLoading ? (
             Array(TRENDING_LIMIT)
               .fill(0)
               .map((_n, i) => (
-                <TrendingTopicSkeleton key={i} size="small" index={i} />
+                <View key={i} style={[a.flex_row, a.align_center, a.gap_sm]}>
+                  <Text
+                    style={[
+                      a.text_sm,
+                      t.atoms.text_contrast_low,
+                      {minWidth: 16},
+                    ]}>
+                    {i + 1}.
+                  </Text>
+                  <View
+                    style={[
+                      a.rounded_xs,
+                      t.atoms.bg_contrast_50,
+                      {height: 14, width: i % 2 === 0 ? 80 : 100},
+                    ]}
+                  />
+                </View>
               ))
           ) : !trending?.topics ? null : (
             <>
-              {trending.topics.slice(0, TRENDING_LIMIT).map(topic => (
+              {trending.topics.slice(0, TRENDING_LIMIT).map((topic, i) => (
                 <TrendingTopicLink
                   key={topic.link}
                   topic={topic}
-                  style={a.rounded_full}
+                  style={[a.self_start]}
                   onPress={() => {
-                    logEvent('trendingTopic:click', {context: 'sidebar'})
+                    logger.metric('trendingTopic:click', {context: 'sidebar'})
                   }}>
                   {({hovered}) => (
-                    <TrendingTopic
-                      size="small"
-                      topic={topic}
-                      style={[
-                        hovered && [
-                          t.atoms.border_contrast_high,
-                          t.atoms.bg_contrast_25,
-                        ],
-                      ]}
-                    />
+                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+                      <Text
+                        style={[
+                          a.text_sm,
+                          a.leading_snug,
+                          t.atoms.text_contrast_low,
+                          {minWidth: 16},
+                        ]}>
+                        {i + 1}.
+                      </Text>
+                      <Text
+                        style={[
+                          a.text_sm,
+                          a.leading_snug,
+                          hovered
+                            ? [t.atoms.text, a.underline]
+                            : t.atoms.text_contrast_medium,
+                        ]}
+                        numberOfLines={1}>
+                        {topic.displayName ?? topic.topic}
+                      </Text>
+                    </View>
                   )}
                 </TrendingTopicLink>
               ))}
@@ -111,7 +129,6 @@ function Inner() {
         confirmButtonCta={_(msg`Hide`)}
         onConfirm={onConfirmHide}
       />
-      <Divider />
     </>
   )
 }

src/view/shell/index.tsx

@@ -34,6 +34,7 @@ import {LinkWarningDialog} from '#/components/dialogs/LinkWarning'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {SigninDialog} from '#/components/dialogs/Signin'
+import {GlobalReportDialog} from '#/components/moderation/ReportDialog'
 import {
   Outlet as PolicyUpdateOverlayPortalOutlet,
   usePolicyUpdateContext,
@@ -117,6 +118,7 @@ function ShellInner() {
       <LinkWarningDialog />
       <Lightbox />
       <NuxDialogs />
+      <GlobalReportDialog />
 
       {/* Until policy update has been completed by the user, don't render anything that is portaled */}
       {policyUpdateState.completed && (

src/view/shell/index.web.tsx

@@ -24,6 +24,7 @@ import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {useWelcomeModal} from '#/components/hooks/useWelcomeModal'
+import {GlobalReportDialog} from '#/components/moderation/ReportDialog'
 import {
   Outlet as PolicyUpdateOverlayPortalOutlet,
   usePolicyUpdateContext,
@@ -73,6 +74,7 @@ function ShellInner() {
       <LinkWarningDialog />
       <Lightbox />
       <NuxDialogs />
+      <GlobalReportDialog />
 
       {welcomeModalControl.isOpen && (
         <WelcomeModal control={welcomeModalControl} />