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

sort out positioning, use new icon for fab

Browse Source
This commit is contained in:
Samuel Newman
2026-05-11 16:56:32 +03:00
parent 140c3657d1
commit a65c396886
11 changed files with 46 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/icons.tsx
-41
View File
@@ -184,47 +184,6 @@ export function RectTallIcon({
)
}
export function ComposeIcon2({
style,
size,
strokeWidth = 1.5,
}: {
style?: StyleProp<TextStyle>
size?: string | number
strokeWidth?: number
}) {
return (
<Svg
viewBox="0 0 24 24"
stroke="currentColor"
fill="none"
width={size || 24}
height={size || 24}
style={style}>
<Path
d="M 20 9 L 20 16 C 20 18.209 18.209 20 16 20 L 8 20 C 5.791 20 4 18.209 4 16 L 4 8 C 4 5.791 5.791 4 8 4 L 15 4"
strokeWidth={strokeWidth}
/>
<Line
strokeLinecap="round"
x1="10"
y1="14"
x2="18.5"
y2="5.5"
strokeWidth={strokeWidth * 1.5}
/>
<Line
strokeLinecap="round"
x1="20.5"
y1="3.5"
x2="21"
y2="3"
strokeWidth={strokeWidth * 1.5}
/>
</Svg>
)
}
export function InfoCircleIcon({
style,
size,
src/screens/Messages/components/ChatListItem.tsx
+2 -5
View File
@@ -553,11 +553,8 @@ function BaseChatItem({
{subtitle && (
<Text
numberOfLines={1}
style={[
a.text_sm,
t.atoms.text_contrast_medium,
a.pb_xs,
]}>
style={[a.text_sm, t.atoms.text_contrast_medium, a.pb_xs]}
emoji>
{subtitle}
</Text>
)}
src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx
+10 -5
View File
@@ -17,8 +17,8 @@ import {SplitViewProvider} from './context'
const CENTER_COLUMN_WIDTH = 600
const LEFT_NAV_FULL_WIDTH = 245
const LEFT_NAV_MINIMAL_WIDTH = 86
const RIGHT_NAV_FULL_WIDTH = 330 + 28
const RIGHT_NAV_MINIMAL_WIDTH = 280 + 28
const RIGHT_NAV_FULL_WIDTH = 330
const RIGHT_NAV_MINIMAL_WIDTH = 280
type MessageScreens =
| 'Messages'
@@ -80,7 +80,7 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
{maxWidth: containerWidth},
{
transform: [
{translateX: LEFT_NAV_MINIMAL_WIDTH / 2},
{translateX: LEFT_NAV_MINIMAL_WIDTH},
{translateX: web(SCROLLBAR_OFFSET) ?? 0},
],
},
@@ -91,7 +91,7 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
style={[
a.border_l,
t.atoms.border_contrast_low,
{width: centerColumnOffset ? 300 : 350},
{width: containerWidth - CENTER_COLUMN_WIDTH},
]}>
<ChatListHeader newChatControl={newChatControl} />
<ChatList
@@ -102,7 +102,12 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
</View>
</SplitViewProvider>
<SplitViewProvider side="right">
<View style={[a.border_x, t.atoms.border_contrast_low, {width: 600}]}>
<View
style={[
a.border_x,
t.atoms.border_contrast_low,
{width: CENTER_COLUMN_WIDTH},
]}>
{children}
</View>
</SplitViewProvider>
src/screens/Moderation/index.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components
import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck'
import {type Props as SVGIconProps} from '#/components/icons/common'
import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig'
import {EditBig_Stroke2_Corner2_Rounded as EditBig} from '#/components/icons/EditBig'
import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
src/screens/Profile/ProfileFeed/index.tsx
+4 -8
View File
@@ -10,7 +10,6 @@ import {useQueryClient} from '@tanstack/react-query'
import {VIDEO_FEED_URIS} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {useSetTitle} from '#/lib/hooks/useSetTitle'
import {ComposeIcon2} from '#/lib/icons'
import {type CommonNavigatorParams} from '#/lib/routes/types'
import {cleanError} from '#/lib/strings/errors'
import {makeRecordUri} from '#/lib/strings/url-helpers'
@@ -40,6 +39,8 @@ import {
ProfileFeedHeader,
ProfileFeedHeaderSkeleton,
} from '#/screens/Profile/components/ProfileFeedHeader'
import {useTheme} from '#/alf'
import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig'
import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
import * as Layout from '#/components/Layout'
import {IS_NATIVE} from '#/env'
@@ -134,6 +135,7 @@ export function ProfileFeedScreenInner({
const {hasSession} = useSession()
const {openComposer} = useOpenComposer()
const isScreenFocused = useIsFocused()
const t = useTheme()
useSetTitle(feedInfo?.displayName)
@@ -210,13 +212,7 @@ export function ProfileFeedScreenInner({
<FAB
testID="composeFAB"
onPress={() => openComposer({logContext: 'Fab'})}
icon={
<ComposeIcon2
strokeWidth={1.5}
size={29}
style={{color: 'white'}}
/>
}
icon={<EditBigIcon size="lg" fill={t.palette.white} />}
accessibilityRole="button"
accessibilityLabel={_(msg`New post`)}
accessibilityHint=""
src/screens/ProfileList/index.tsx
+3 -15
View File
@@ -15,7 +15,6 @@ import {useQueryClient} from '@tanstack/react-query'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {useSetTitle} from '#/lib/hooks/useSetTitle'
import {ComposeIcon2} from '#/lib/icons'
import {
type CommonNavigatorParams,
type NativeStackScreenProps,
@@ -38,6 +37,7 @@ import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen'
import {atoms as a, native, platform, useTheme} from '#/alf'
import {useDialogControl} from '#/components/Dialog'
import {ListAddRemoveUsersDialog} from '#/components/dialogs/lists/ListAddRemoveUsersDialog'
import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig'
import * as Layout from '#/components/Layout'
import {Loader} from '#/components/Loader'
import * as Hider from '#/components/moderation/Hider'
@@ -232,13 +232,7 @@ function ProfileListScreenLoaded({
<FAB
testID="composeFAB"
onPress={() => openComposer({logContext: 'Fab'})}
icon={
<ComposeIcon2
strokeWidth={1.5}
size={29}
style={{color: 'white'}}
/>
}
icon={<EditBigIcon size="lg" fill={t.palette.white} />}
accessibilityRole="button"
accessibilityLabel={_(msg`New post`)}
accessibilityHint=""
@@ -281,13 +275,7 @@ function ProfileListScreenLoaded({
<FAB
testID="composeFAB"
onPress={() => openComposer({logContext: 'Fab'})}
icon={
<ComposeIcon2
strokeWidth={1.5}
size={29}
style={{color: 'white'}}
/>
}
icon={<EditBigIcon size="lg" fill={t.palette.white} />}
accessibilityRole="button"
accessibilityLabel={_(msg`New post`)}
accessibilityHint=""
src/view/com/feeds/FeedPage.tsx
+9 -8
View File
@@ -15,10 +15,8 @@ import {useQueryClient} from '@tanstack/react-query'
import {DISCOVER_FEED_URI, VIDEO_FEED_URIS} from '#/lib/constants'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {ComposeIcon2} from '#/lib/icons'
import {getRootNavigation, getTabState, TabState} from '#/lib/routes/helpers'
import {type AllNavigatorParams} from '#/lib/routes/types'
import {s} from '#/lib/styles'
import {listenSoftReset} from '#/state/events'
import {FeedFeedbackProvider, useFeedFeedback} from '#/state/feed-feedback'
import {useSetHomeBadge} from '#/state/home-badge'
@@ -30,14 +28,16 @@ import {
} from '#/state/queries/post-feed'
import {truncateAndInvalidate} from '#/state/queries/util'
import {useSession} from '#/state/session'
import {PostFeed} from '#/view/com/posts/PostFeed'
import {FAB} from '#/view/com/util/fab/FAB'
import {type ListMethods} from '#/view/com/util/List'
import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
import {MainScrollProvider} from '#/view/com/util/MainScrollProvider'
import {useTheme} from '#/alf'
import {useHeaderOffset} from '#/components/hooks/useHeaderOffset'
import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig'
import {useAnalytics} from '#/analytics'
import {IS_NATIVE} from '#/env'
import {PostFeed} from '../posts/PostFeed'
import {FAB} from '../util/fab/FAB'
import {type ListMethods} from '../util/List'
import {LoadLatestBtn} from '../util/load-latest/LoadLatestBtn'
import {MainScrollProvider} from '../util/MainScrollProvider'
const POLL_FREQ = 60e3 // 60sec
@@ -81,6 +81,7 @@ export function FeedPage({
const _isVideoFeed = isBskyVideoFeed || feedIsVideoMode
return IS_NATIVE && _isVideoFeed
}, [feedInfo])
const t = useTheme()
useEffect(() => {
if (isPageFocused) {
@@ -173,7 +174,7 @@ export function FeedPage({
<FAB
testID="composeFAB"
onPress={onPressCompose}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
icon={<EditBigIcon size="lg" fill={t.palette.white} />}
accessibilityRole="button"
accessibilityLabel={_(msg({message: `New post`, context: 'action'}))}
accessibilityHint=""
src/view/screens/Feeds.tsx
+3 -2
View File
@@ -9,7 +9,6 @@ import debounce from 'lodash.debounce'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {ComposeIcon2} from '#/lib/icons'
import {
type CommonNavigatorParams,
type NativeStackScreenProps,
@@ -37,6 +36,7 @@ import * as FeedCard from '#/components/FeedCard'
import {SearchInput} from '#/components/forms/SearchInput'
import {IconCircle} from '#/components/IconCircle'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig'
import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass'
import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
@@ -104,6 +104,7 @@ type FlatlistSlice =
export function FeedsScreen(_props: Props) {
const pal = usePalette('default')
const t = useTheme()
const {openComposer} = useOpenComposer()
const {isMobile} = useWebMediaQueries()
const [query, setQuery] = useState('')
@@ -539,7 +540,7 @@ export function FeedsScreen(_props: Props) {
<FAB
testID="composeFAB"
onPress={onPressCompose}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
icon={<EditBigIcon size="lg" fill={t.palette.white} />}
accessibilityRole="button"
accessibilityLabel={_(msg`New post`)}
accessibilityHint=""
src/view/screens/Notifications.tsx
+3 -3
View File
@@ -8,12 +8,10 @@ import {useQueryClient} from '@tanstack/react-query'
import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {ComposeIcon2} from '#/lib/icons'
import {
type NativeStackScreenProps,
type NotificationsTabNavigatorParams,
} from '#/lib/routes/types'
import {s} from '#/lib/styles'
import {logger} from '#/logger'
import {emitSoftReset, listenSoftReset} from '#/state/events'
import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
@@ -33,6 +31,7 @@ import {MainScrollProvider} from '#/view/com/util/MainScrollProvider'
import {atoms as a, useTheme, web} from '#/alf'
import {Admonition} from '#/components/Admonition'
import {ButtonIcon} from '#/components/Button'
import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig'
import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsIcon} from '#/components/icons/SettingsGear2'
import * as Layout from '#/components/Layout'
import {InlineLinkText, Link} from '#/components/Link'
@@ -50,6 +49,7 @@ type Props = NativeStackScreenProps<
>
export function NotificationsScreen({}: Props) {
const {_} = useLingui()
const t = useTheme()
const {openComposer} = useOpenComposer()
const unreadNotifs = useUnreadNotifications()
const hasNew = !!unreadNotifs
@@ -161,7 +161,7 @@ export function NotificationsScreen({}: Props) {
<FAB
testID="composeFAB"
onPress={() => openComposer({logContext: 'Fab'})}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
icon={<EditBigIcon size="lg" fill={t.palette.white} />}
accessibilityRole="button"
accessibilityLabel={_(msg`New post`)}
accessibilityHint=""
src/view/screens/Profile.tsx
+5 -4
View File
@@ -16,7 +16,6 @@ import {useQueryClient} from '@tanstack/react-query'
import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
import {useSetTitle} from '#/lib/hooks/useSetTitle'
import {ComposeIcon2} from '#/lib/icons'
import {
type CommonNavigatorParams,
type NativeStackScreenProps,
@@ -25,7 +24,7 @@ import {
import {combinedDisplayName} from '#/lib/strings/display-names'
import {cleanError} from '#/lib/strings/errors'
import {isInvalidHandle} from '#/lib/strings/handles'
import {colors, s} from '#/lib/styles'
import {colors} from '#/lib/styles'
import {useProfileShadow} from '#/state/cache/profile-shadow'
import {listenSoftReset} from '#/state/events'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
@@ -43,8 +42,9 @@ import {type ListRef} from '#/view/com/util/List'
import {ProfileHeader, ProfileHeaderLoading} from '#/screens/Profile/Header'
import {ProfileFeedSection} from '#/screens/Profile/Sections/Feed'
import {ProfileLabelsSection} from '#/screens/Profile/Sections/Labels'
import {atoms as a} from '#/alf'
import {atoms as a, useTheme} from '#/alf'
import {Circle_And_Square_Stroke1_Corner0_Rounded_Filled as CircleAndSquareIcon} from '#/components/icons/CircleAndSquare'
import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig'
import {Heart2_Stroke1_Corner0_Rounded as HeartIcon} from '#/components/icons/Heart2'
import {Image_Stroke1_Corner0_Rounded as ImageIcon} from '#/components/icons/Image'
import {Message_Stroke1_Corner0_Rounded_Filled as MessageIcon} from '#/components/icons/Message'
@@ -172,6 +172,7 @@ function ProfileScreenLoaded({
hideBackButton: boolean
isPlaceholderProfile: boolean
}) {
const t = useTheme()
const profile = useProfileShadow(profileUnshadowed)
const {hasSession, currentAccount} = useSession()
const {openComposer} = useOpenComposer()
@@ -587,7 +588,7 @@ function ProfileScreenLoaded({
<FAB
testID="composeFAB"
onPress={onPressCompose}
icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
icon={<EditBigIcon size="lg" fill={t.palette.white} />}
accessibilityRole="button"
accessibilityLabel={_(msg`New post`)}
accessibilityHint=""
src/view/shell/desktop/LeftNav.tsx
+6 -24
View File
@@ -49,7 +49,7 @@ import {
BulletList_Stroke2_Corner0_Rounded as List,
} from '#/components/icons/BulletList'
import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig'
import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig'
import {
Hashtag_Filled_Corner0_Rounded as HashtagFilled,
Hashtag_Stroke2_Corner0_Rounded as Hashtag,
@@ -81,8 +81,8 @@ import * as Prompt from '#/components/Prompt'
import {Text} from '#/components/Typography'
import {useAgeAssurance} from '#/ageAssurance'
import {useActorStatus} from '#/features/liveNow'
import {router} from '#/routes'
import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army'
import {router} from '../../../routes'
const NAV_ICON_WIDTH = 28
@@ -458,10 +458,6 @@ function NavItem({
width: 24,
height: 24,
},
minimal && {
width: 30,
height: 30,
},
]}>
{isCurrent || isRelated ? iconFilled : icon}
{typeof count === 'string' && count ? (
@@ -499,12 +495,6 @@ function NavItem({
paddingVertical: 1,
minWidth: 16,
},
minimal && [
{
top: '10%',
left: count.length === 1 ? 20 : 16,
},
],
]}>
{count}
</Text>
@@ -522,10 +512,6 @@ function NavItem({
right: -2,
top: -4,
},
minimal && {
right: 4,
top: 2,
},
]}
/>
) : null}
@@ -584,15 +570,15 @@ function ComposeBtn({minimal}: {minimal: boolean}) {
openComposer({mention: await getProfileHandle(), logContext: 'Fab'})
return (
<View style={minimal ? [a.p_sm] : [a.flex_row, a.pl_md, a.pt_xl]}>
<View style={minimal ? [a.px_sm, a.pt_lg] : [a.flex_row, a.pl_md, a.pt_lg]}>
<Button
disabled={isFetchingHandle}
label={_(msg`Compose new post`)}
onPress={() => void onPressCompose()}
size="large"
color="primary"
style={[a.rounded_full, minimal && {width: 56, height: 56}]}>
<ButtonIcon icon={EditBig} size={minimal ? 'lg' : 'sm'} />
style={[a.rounded_full, minimal && {width: 48, height: 48}]}>
<ButtonIcon icon={EditBigIcon} size={minimal ? 'lg' : 'sm'} />
{!minimal && (
<ButtonText>
<Trans context="action">New post</Trans>
@@ -665,7 +651,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
-300 +
(centerColumnOffset ? CENTER_COLUMN_OFFSET : 0) +
(isMessagesRelatedScreen && !leftNavMinimalBreakpoint
? -130
? -153
: 0),
},
{translateX: '-100%'},
@@ -867,10 +853,6 @@ const styles = StyleSheet.create({
width: 245,
},
leftNavMinimal: {
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
height: '100%',
width: 86,
alignItems: 'center',