Compare commits

...

2 Commits

Author SHA1 Message Date
Samuel Newman f47c9c0958 remove debug colors 2025-04-22 14:56:41 +03:00
Samuel Newman 805949e639 claude suggestions 2025-04-22 14:55:53 +03:00
3 changed files with 46 additions and 29 deletions
+40 -18
View File
@@ -208,6 +208,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
useEnableKeyboardController(isIOS)
const [keyboardHeight, setKeyboardHeight] = React.useState(0)
const keyboardVisible = keyboardHeight > 0
useKeyboardHandler(
{
@@ -219,21 +220,26 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
[],
)
let paddingBottom = 0
if (isIOS) {
paddingBottom += keyboardHeight / 4
if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
paddingBottom += insets.bottom + tokens.space.md
}
paddingBottom = Math.max(paddingBottom, tokens.space._2xl)
} else {
paddingBottom += keyboardHeight
if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
paddingBottom += insets.top
}
paddingBottom +=
Math.max(insets.bottom, tokens.space._5xl) + tokens.space._2xl
}
// Standardized padding calculation across platforms
// Only add safe area insets when the sheet is at full height
// For partial sheets, the sheet already positions above the safe area
const basePadding =
nativeSnapPoint === BottomSheetSnapPoint.Full ? insets.bottom : 0
// Standard buffer for all dialogs to ensure content isn't cut off
const standardBuffer = tokens.space._2xl
// Add keyboard offset when keyboard is visible
// iOS handles keyboard overlays more gracefully so we use a smaller factor
const keyboardOffset = keyboardVisible
? isIOS
? keyboardHeight / 3
: keyboardHeight
: 0
// Calculate final padding
const paddingBottom = basePadding + standardBuffer + keyboardOffset
const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
if (!isAndroid) {
@@ -253,6 +259,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
a.pt_2xl,
a.px_xl,
{paddingBottom},
contentContainerStyle,
]}
ref={ref}
@@ -280,6 +287,23 @@ export const InnerFlatList = React.forwardRef<
const insets = useSafeAreaInsets()
const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
// Customized padding for InnerFlatList
// FlatLists are typically used for more complex content like profile/card lists
// and need more bottom padding to ensure content isn't cut off when scrolling
// Enhanced buffer for FlatLists to ensure content is fully visible when scrolled to bottom
// Using 4xl space (much larger than the 2xl used in ScrollableInner)
const flatListBuffer = tokens.space._5xl
// Only add safe area insets when the sheet is at full height
const basePadding =
nativeSnapPoint === BottomSheetSnapPoint.Full
? insets.bottom + flatListBuffer
: 0
// Add additional padding for complex list components
const footerHeight = basePadding + tokens.space._2xl
const onScroll = (e: ReanimatedScrollEvent) => {
'worklet'
if (!isAndroid) {
@@ -298,9 +322,7 @@ export const InnerFlatList = React.forwardRef<
<List
keyboardShouldPersistTaps="handled"
bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
ListFooterComponent={
<View style={{height: insets.bottom + a.pt_5xl.paddingTop + 50}} />
}
ListFooterComponent={<View style={{height: footerHeight}} />}
ref={ref}
{...props}
style={[style]}
+2 -5
View File
@@ -1,11 +1,10 @@
import React from 'react'
import {View} from 'react-native'
import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
import {type AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {logger} from '#/logger'
import {isNative} from '#/platform/detection'
import {
usePreferencesQuery,
useRemoveMutedWordMutation,
@@ -16,7 +15,7 @@ import {
native,
useBreakpoints,
useTheme,
ViewStyleProp,
type ViewStyleProp,
web,
} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -400,8 +399,6 @@ function MutedWordsInner() {
</View>
)}
</View>
{isNative && <View style={{height: 20}} />}
</View>
<Dialog.Close />
@@ -1,18 +1,18 @@
import React from 'react'
import {ImageStyle, useWindowDimensions, View} from 'react-native'
import {type ImageStyle, useWindowDimensions, View} from 'react-native'
import {Image} from 'expo-image'
import {msg, Plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {MAX_ALT_TEXT} from '#/lib/constants'
import {enforceLen} from '#/lib/strings/helpers'
import {isAndroid, isWeb} from '#/platform/detection'
import {ComposerImage} from '#/state/gallery'
import {isWeb} from '#/platform/detection'
import {type ComposerImage} from '#/state/gallery'
import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {DialogControlProps} from '#/components/Dialog'
import {type DialogControlProps} from '#/components/Dialog'
import * as TextField from '#/components/forms/TextField'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {Text} from '#/components/Typography'
@@ -165,8 +165,6 @@ const ImageAltTextInner = ({
</Button>
</AltTextCounterWrapper>
</View>
{/* Maybe fix this later -h */}
{isAndroid ? <View style={{height: 300}} /> : null}
</Dialog.ScrollableInner>
)
}