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

Cleaner sidebar layout (#9603)

Browse Source
This commit is contained in:
Alex Benzer
2026-01-09 14:13:43 -08:00
committed by GitHub
parent 966ae68dd2
commit c4fd9980cc
10 changed files with 422 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FeedInterstitials.tsx
+8 -1
View File
@@ -933,8 +933,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/ProgressGuide/FollowDialog.tsx
+12 -7
View File
@@ -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
+124 -21
View File
@@ -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
+2 -2
View File
@@ -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/TrendingTopics.tsx
+10 -9
View File
@@ -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/interstitials/Trending.tsx
+1 -2
View File
@@ -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/state/queries/profile.ts
+45
View File
@@ -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/view/shell/desktop/Feeds.tsx
+148 -36
View File
@@ -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
+11 -7
View File
@@ -18,7 +18,6 @@ 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'
@@ -86,9 +85,8 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
{hasSession && (
<>
<ProgressGuideList />
<DesktopFeeds />
<Divider />
<ProgressGuideList />
</>
)}
@@ -102,25 +100,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
+61 -44
View File
@@ -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 />
</>
)
}