acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Rough sketch

Browse Source
This commit is contained in:
Eric Bailey
2025-08-12 21:36:09 -05:00
parent cc00102f18
commit d347717086
12 changed files with 355 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+56 -53
View File
@@ -73,6 +73,7 @@ import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialo
import {Provider as PolicyUpdateOverlayProvider} from '#/components/PolicyUpdateOverlay'
import {Provider as PortalProvider} from '#/components/Portal'
import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
import {ToastProvider} from '#/components/Toast'
import {Splash} from '#/Splash'
import {BottomSheetProvider} from '../modules/bottom-sheet'
import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
@@ -133,59 +134,61 @@ function InnerApp() {
<ContextMenuProvider>
<Splash isReady={isReady && hasCheckedReferrer}>
<RootSiblingParent>
<VideoVolumeProvider>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}>
<PolicyUpdateOverlayProvider>
<StatsigProvider>
<AgeAssuranceProvider>
<ComposerProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<HomeBadgeProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<ProgressGuideProvider>
<ServiceAccountManager>
<HideBottomBarBorderProvider>
<GestureHandlerRootView
style={s.h100pct}>
<GlobalGestureEventsProvider>
<IntentDialogProvider>
<TestCtrls />
<Shell />
<NuxDialogs />
</IntentDialogProvider>
</GlobalGestureEventsProvider>
</GestureHandlerRootView>
</HideBottomBarBorderProvider>
</ServiceAccountManager>
</ProgressGuideProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HomeBadgeProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</ComposerProvider>
</AgeAssuranceProvider>
</StatsigProvider>
</PolicyUpdateOverlayProvider>
</QueryProvider>
</React.Fragment>
</VideoVolumeProvider>
<ToastProvider>
<VideoVolumeProvider>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}>
<PolicyUpdateOverlayProvider>
<StatsigProvider>
<AgeAssuranceProvider>
<ComposerProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<HomeBadgeProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<ProgressGuideProvider>
<ServiceAccountManager>
<HideBottomBarBorderProvider>
<GestureHandlerRootView
style={s.h100pct}>
<GlobalGestureEventsProvider>
<IntentDialogProvider>
<TestCtrls />
<Shell />
<NuxDialogs />
</IntentDialogProvider>
</GlobalGestureEventsProvider>
</GestureHandlerRootView>
</HideBottomBarBorderProvider>
</ServiceAccountManager>
</ProgressGuideProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HomeBadgeProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</ComposerProvider>
</AgeAssuranceProvider>
</StatsigProvider>
</PolicyUpdateOverlayProvider>
</QueryProvider>
</React.Fragment>
</VideoVolumeProvider>
</ToastProvider>
</RootSiblingParent>
</Splash>
</ContextMenuProvider>
src/App.web.tsx
+46 -44
View File
@@ -61,7 +61,7 @@ import {Provider as PolicyUpdateOverlayProvider} from '#/components/PolicyUpdate
import {Provider as PortalProvider} from '#/components/Portal'
import {Provider as ActiveVideoProvider} from '#/components/Post/Embed/VideoEmbed/ActiveVideoWebContext'
import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
import {ToastContainer} from '#/components/Toast'
import {ToastContainer, ToastProvider} from '#/components/Toast'
import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
@@ -112,28 +112,28 @@ function InnerApp() {
<ThemeProvider theme={theme}>
<ContextMenuProvider>
<RootSiblingParent>
<VideoVolumeProvider>
<ActiveVideoProvider>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}>
<PolicyUpdateOverlayProvider>
<StatsigProvider>
<AgeAssuranceProvider>
<ComposerProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<HomeBadgeProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<SafeAreaProvider>
<ToastProvider>
<VideoVolumeProvider>
<ActiveVideoProvider>
<React.Fragment
// Resets the entire tree below when it changes:
key={currentAccount?.did}>
<QueryProvider currentDid={currentAccount?.did}>
<PolicyUpdateOverlayProvider>
<StatsigProvider>
<AgeAssuranceProvider>
<ComposerProvider>
<MessagesProvider>
{/* LabelDefsProvider MUST come before ModerationOptsProvider */}
<LabelDefsProvider>
<ModerationOptsProvider>
<LoggedOutViewProvider>
<SelectedFeedProvider>
<HiddenRepliesProvider>
<HomeBadgeProvider>
<UnreadNotifsProvider>
<BackgroundNotificationPreferencesProvider>
<MutedThreadsProvider>
<ProgressGuideProvider>
<ServiceConfigProvider>
<HideBottomBarBorderProvider>
@@ -144,26 +144,26 @@ function InnerApp() {
</HideBottomBarBorderProvider>
</ServiceConfigProvider>
</ProgressGuideProvider>
</SafeAreaProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HomeBadgeProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</ComposerProvider>
</AgeAssuranceProvider>
</StatsigProvider>
</PolicyUpdateOverlayProvider>
</QueryProvider>
<ToastContainer />
</React.Fragment>
</ActiveVideoProvider>
</VideoVolumeProvider>
</MutedThreadsProvider>
</BackgroundNotificationPreferencesProvider>
</UnreadNotifsProvider>
</HomeBadgeProvider>
</HiddenRepliesProvider>
</SelectedFeedProvider>
</LoggedOutViewProvider>
</ModerationOptsProvider>
</LabelDefsProvider>
</MessagesProvider>
</ComposerProvider>
</AgeAssuranceProvider>
</StatsigProvider>
</PolicyUpdateOverlayProvider>
</QueryProvider>
<ToastContainer />
</React.Fragment>
</ActiveVideoProvider>
</VideoVolumeProvider>
</ToastProvider>
</RootSiblingParent>
</ContextMenuProvider>
</ThemeProvider>
@@ -201,7 +201,9 @@ function App() {
<LightboxStateProvider>
<PortalProvider>
<StarterPackProvider>
<InnerApp />
<SafeAreaProvider>
<InnerApp />
</SafeAreaProvider>
</StarterPackProvider>
</PortalProvider>
</LightboxStateProvider>
src/components/Toast/Context.tsx
+13
View File
@@ -0,0 +1,13 @@
import {createContext, useContext} from 'react'
import {type ToastApi} from '#/components/Toast/types'
export type ToastContext = ToastApi
export const Context = createContext<ToastContext>({
show() {},
})
export function useToast() {
return useContext(Context)
}
src/components/Toast/Portal.tsx
+7
View File
@@ -0,0 +1,7 @@
import {createPortalGroup} from '#/components/Portal'
const portal = createPortalGroup()
export const Provider = portal.Provider
export const Outlet = portal.Outlet
export const Portal = portal.Portal
src/components/Toast/index.tsx
+88 -3
View File
@@ -1,5 +1,5 @@
import {useEffect, useMemo, useRef, useState} from 'react'
import {AccessibilityInfo} from 'react-native'
import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {AccessibilityInfo, View} from 'react-native'
import {
Gesture,
GestureDetector,
@@ -18,15 +18,100 @@ import Animated, {
} from 'react-native-reanimated'
import RootSiblings from 'react-native-root-siblings'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {nanoid} from 'nanoid/non-secure'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {atoms as a} from '#/alf'
import {DEFAULT_TOAST_DURATION} from '#/components/Toast/const'
import {Context} from '#/components/Toast/Context'
import * as Portal from '#/components/Toast/Portal'
import {Toast} from '#/components/Toast/Toast'
import {type ToastApi, type ToastType} from '#/components/Toast/types'
import {
type ToastApi,
type ToastProps,
type ToastType,
} from '#/components/Toast/types'
export {useToast} from '#/components/Toast/Context'
export {Outlet} from '#/components/Toast/Portal'
const TOAST_ANIMATION_DURATION = 300
export function ToastProvider({children}: {children: React.ReactNode}) {
const {top} = useSafeAreaInsets()
const [toasts, setToasts] = useState<
{
id: string
toast: ToastProps
timeout: NodeJS.Timeout
}[]
>([])
const show = useCallback<ToastApi['show']>(props => {
AccessibilityInfo.announceForAccessibility(props.a11yLabel)
setToasts(prevToasts => {
const id = nanoid()
return [
...prevToasts,
{
id,
toast: props,
timeout: setTimeout(() => {
setToasts(currentToasts => currentToasts.filter(t => t.id !== id))
}, props.duration || DEFAULT_TOAST_DURATION),
},
]
})
}, [])
useEffect(() => {
return () => {
setToasts(toasts => {
toasts.map(({timeout}) => {
clearTimeout(timeout)
})
return toasts
})
}
}, [])
const ctx = useMemo(
() => ({
show,
}),
[show],
)
return (
<Context.Provider value={ctx}>
<Portal.Provider>
{children}
{toasts.length ? (
<Portal.Portal>
<View
style={[
a.absolute,
a.gap_sm,
{
flexDirection: 'column-reverse',
top: top,
left: a.px_lg.paddingLeft,
right: a.px_lg.paddingLeft,
},
]}>
{toasts.map(({id, toast}) => (
<Toast key={id} type={toast.type} content={toast.content} />
))}
</View>
</Portal.Portal>
) : null}
</Portal.Provider>
</Context.Provider>
)
}
export function ToastContainer() {
return null
}
src/components/Toast/index.web.tsx
+92 -2
View File
@@ -2,15 +2,26 @@
* Note: relies on styles in #/styles.css
*/
import {useEffect, useState} from 'react'
import {useCallback, useEffect, useMemo, useState} from 'react'
import {AccessibilityInfo, Pressable, View} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {nanoid} from 'nanoid/non-secure'
import {atoms as a, useBreakpoints} from '#/alf'
import {DEFAULT_TOAST_DURATION} from '#/components/Toast/const'
import {Context} from '#/components/Toast/Context'
import * as Portal from '#/components/Toast/Portal'
import {Toast} from '#/components/Toast/Toast'
import {type ToastApi, type ToastType} from '#/components/Toast/types'
import {
type ToastApi,
type ToastProps,
type ToastType,
} from '#/components/Toast/types'
export {useToast} from '#/components/Toast/Context'
export {Outlet} from '#/components/Toast/Portal'
const TOAST_ANIMATION_STYLES = {
entering: {
@@ -31,6 +42,85 @@ let globalSetActiveToast: GlobalSetActiveToast | undefined
let toastTimeout: NodeJS.Timeout | undefined
type ToastContainerProps = {}
export function ToastProvider({children}: {children: React.ReactNode}) {
const {bottom} = useSafeAreaInsets()
const {gtPhone} = useBreakpoints()
const [toasts, setToasts] = useState<
{
id: string
toast: ToastProps
timeout: NodeJS.Timeout
}[]
>([])
const show = useCallback<ToastApi['show']>(props => {
setToasts(prevToasts => {
const id = nanoid()
return [
...prevToasts,
{
id,
toast: props,
timeout: setTimeout(() => {
setToasts(currentToasts => currentToasts.filter(t => t.id !== id))
}, props.duration || DEFAULT_TOAST_DURATION),
},
]
})
}, [])
useEffect(() => {
return () => {
setToasts(toasts => {
toasts.map(({timeout}) => {
clearTimeout(timeout)
})
return toasts
})
}
}, [])
const ctx = useMemo(
() => ({
show,
}),
[show],
)
return (
<Context.Provider value={ctx}>
<Portal.Provider>
{children}
{toasts.length && (
<Portal.Portal>
<View
style={[
a.fixed,
a.gap_sm,
{
flexDirection: 'column-reverse',
left: a.px_xl.paddingLeft,
right: a.px_xl.paddingLeft,
bottom: Math.max(bottom, a.px_xl.paddingLeft),
},
gtPhone && [
{
maxWidth: 380,
},
],
]}>
{toasts.map(({id, toast}) => (
<Toast key={id} content={toast.content} type={toast.type} />
))}
</View>
</Portal.Portal>
)}
</Portal.Provider>
</Context.Provider>
)
}
export const ToastContainer: React.FC<ToastContainerProps> = ({}) => {
const {_} = useLingui()
const {gtPhone} = useBreakpoints()
src/components/Toast/types.ts
+23 -21
View File
@@ -1,24 +1,26 @@
export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info'
export type ToastApi = {
show: (props: {
/**
* The type of toast to show. This determines the styling and icon used.
*/
type: ToastType
/**
* A string, `Text`, or `Span` components to render inside the toast. This
* allows additional formatting of the content, but should not be used for
* interactive elements link links or buttons.
*/
content: React.ReactNode | string
/**
* Accessibility label for the toast, used for screen readers.
*/
a11yLabel: string
/**
* Defaults to `DEFAULT_TOAST_DURATION` from `#components/Toast/const`.
*/
duration?: number
}) => void
export type ToastProps = {
/**
* The type of toast to show. This determines the styling and icon used.
*/
type: ToastType
/**
* A string, `Text`, or `Span` components to render inside the toast. This
* allows additional formatting of the content, but should not be used for
* interactive elements link links or buttons.
*/
content: React.ReactNode | string
/**
* Accessibility label for the toast, used for screen readers.
*/
a11yLabel: string
/**
* Defaults to `DEFAULT_TOAST_DURATION` from `#components/Toast/const`.
*/
duration?: number
}
export type ToastApi = {
show: (props: ToastProps) => void
}
src/view/com/home/HomeHeaderLayoutMobile.tsx
+9 -2
View File
@@ -2,6 +2,7 @@ import {View} from 'react-native'
import Animated from 'react-native-reanimated'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {HITSLOP_10} from '#/lib/constants'
import {PressableScale} from '#/lib/custom-animations/PressableScale'
@@ -16,6 +17,7 @@ import {ButtonIcon} from '#/components/Button'
import {Hashtag_Stroke2_Corner0_Rounded as FeedsIcon} from '#/components/icons/Hashtag'
import * as Layout from '#/components/Layout'
import {Link} from '#/components/Link'
import {IS_DEV} from '#/env'
export function HomeHeaderLayoutMobile({
children,
@@ -29,6 +31,7 @@ export function HomeHeaderLayoutMobile({
const headerMinimalShellTransform = useMinimalShellHeaderTransform()
const {hasSession} = useSession()
const playHaptic = useHaptics()
const navigate = useNavigation()
return (
<Animated.View
@@ -55,8 +58,12 @@ export function HomeHeaderLayoutMobile({
<PressableScale
targetScale={0.9}
onPress={() => {
playHaptic('Light')
emitSoftReset()
if (IS_DEV) {
navigate.navigate('Debug')
} else {
playHaptic('Light')
emitSoftReset()
}
}}>
<Logo width={30} />
</PressableScale>
src/view/screens/Storybook/Toasts.tsx
+16
View File
@@ -4,14 +4,30 @@ import {show as deprecatedShow} from '#/view/com/util/Toast'
import {atoms as a} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {toast} from '#/components/Toast'
import {useToast} from '#/components/Toast/Context'
import {Toast} from '#/components/Toast/Toast'
import {H1} from '#/components/Typography'
export function Toasts() {
const {show} = useToast()
return (
<View style={[a.gap_md]}>
<H1>Toast Examples</H1>
<Button
label="show toast"
size="large"
color="primary"
onPress={() => {
show({
type: 'default',
content: 'This is a toast example',
a11yLabel: 'This is a toast example',
})
}}>
<ButtonText>New Toast</ButtonText>
</Button>
<View style={[a.gap_md]}>
<Pressable
accessibilityRole="button"
src/view/screens/Storybook/index.tsx
+1 -1
View File
@@ -86,6 +86,7 @@ function StorybookInner() {
<ButtonText>Dark</ButtonText>
</Button>
</View>
<Toasts />
<Button
color="primary"
@@ -106,7 +107,6 @@ function StorybookInner() {
<Theming />
</ThemeProvider>
<Toasts />
<Buttons />
<Forms />
<Typography />
src/view/shell/index.tsx
+2
View File
@@ -36,6 +36,7 @@ import {
usePolicyUpdateContext,
} from '#/components/PolicyUpdateOverlay'
import {Outlet as PortalOutlet} from '#/components/Portal'
import {Outlet as ToastPortalOutlet} from '#/components/Toast/Portal'
import {RoutesContainer, TabsNavigator} from '#/Navigation'
import {BottomSheetOutlet} from '../../../modules/bottom-sheet'
import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
@@ -172,6 +173,7 @@ function ShellInner() {
<>
<PortalOutlet />
<BottomSheetOutlet />
<ToastPortalOutlet />
</>
)}
src/view/shell/index.web.tsx
+2
View File
@@ -27,6 +27,7 @@ import {
usePolicyUpdateContext,
} from '#/components/PolicyUpdateOverlay'
import {Outlet as PortalOutlet} from '#/components/Portal'
import {Outlet as ToastPortalOutlet} from '#/components/Toast/Portal'
import {FlatNavigator, RoutesContainer} from '#/Navigation'
import {Composer} from './Composer.web'
import {DrawerContent} from './Drawer'
@@ -84,6 +85,7 @@ function ShellInner() {
{policyUpdateState.completed && (
<>
<PortalOutlet />
<ToastPortalOutlet />
</>
)}