Cleaner sidebar layout (#9603)

src/components/FeedInterstitials.tsx

@@ -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

@@ -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'}
+        size={gtPhone ? 'small' : 'large'}
-        color="primary"
+        color="primary">
-        variant="solid">
-        <ButtonIcon icon={PersonGroupIcon} />
         <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
+          <Text style={[t.atoms.text, a.font_semi_bold, a.text_md]}>
-            style={[
+            <Trans>Follow 10 people to get started</Trans>
-              t.atoms.text_contrast_medium,
-              a.font_semi_bold,
-              a.text_sm,
-              {textTransform: 'uppercase'},
-            ]}>
-            <Trans>Getting 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}>
+            onPress={endProgressGuide}
-            <ButtonIcon icon={Times} size="sm" />
+            style={[a.bg_transparent, {marginTop: -6, marginRight: -6}]}>
+            <ButtonIcon icon={Times} size="xs" />
           </Button>
         </View>
         {guide.guide === 'follow-10' && (
-          <>
+          <View
-            <ProgressGuideTask
+            style={[
-              current={guide.numFollows + 1}
+              inlineLayout
-              total={10 + 1}
+                ? [
-              title={_(msg`Follow 10 accounts`)}
+                    a.flex_row,
-              subtitle={_(msg`Bluesky is better with friends!`)}
+                    a.flex_wrap,
-            />
+                    a.align_center,
-            <FollowDialog guide={guide} />
+                    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/TrendingTopics.tsx

@@ -20,8 +20,12 @@ export function TrendingTopic({
   topic: raw,
   size,
   style,
-}: {topic: TrendingTopic; size?: 'large' | 'small'} & ViewStyleProp) {
+  hovered,
-  const t = useTheme()
+}: {
+  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,
+                paddingVertical: 2,
-                paddingHorizontal: 10,
+                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

@@ -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

@@ -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

@@ -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,
+          paddingTop: 2,
-          marginHorizontal: -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}
+            feedInfo={feedInfo}
-            {...createStaticClick(() => {
+            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.flex_row,
-          a.leading_snug,
+          a.align_center,
-          web({
+          a.gap_sm,
-            marginHorizontal: 2,
+          a.self_start,
-            width: 'calc(100% - 4px)',
+          a.rounded_sm,
-          }),
+          {paddingVertical: 6, paddingHorizontal: 8},
-        ]}
+          route.name === 'Feeds' && {backgroundColor: t.palette.primary_50},
-        numberOfLines={1}>
+        ]}>
-        {_(msg`More feeds`)}
+        {({hovered}) => {
-      </InlineLinkText>
+          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,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>
-        {' • '}
+        <Text style={[t.atoms.text_contrast_low]}>{' ∙ '}</Text>
-        <InlineLinkText label={_(msg`Help`)} to={HELP_DESK_URL}>
+        <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 {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
-import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
 import * as Prompt from '#/components/Prompt'
-import {
+import {TrendingTopicLink} from '#/components/TrendingTopics'
-  TrendingTopic,
-  TrendingTopicLink,
-  TrendingTopicSkeleton,
-} 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(() => {
+  const onConfirmHide = () => {
-    logEvent('trendingTopics:hide', {context: 'sidebar'})
+    logger.metric('trendingTopics:hide', {context: 'sidebar'})
     setTrendingDisabled(true)
-  }, [setTrendingDisabled])
+  }
 
   return error || noTopics ? null : (
     <>
-      <View style={[a.gap_sm, {paddingBottom: 2}]}>
+      <View
-        <View style={[a.flex_row, a.align_center, a.gap_xs]}>
+        style={[a.p_lg, a.rounded_md, a.border, t.atoms.border_contrast_low]}>
-          <Graph size="sm" />
+        <View style={[a.flex_row, a.align_center, a.gap_xs, a.pb_md]}>
-          <Text
+          <TrendingIcon width={16} height={16} fill={t.atoms.text.color} />
-            style={[
+          <Text style={[a.flex_1, a.text_md, a.font_semi_bold, t.atoms.text]}>
-              a.flex_1,
-              a.text_sm,
-              a.font_semi_bold,
-              t.atoms.text_contrast_medium,
-            ]}>
             <Trans>Trending</Trans>
           </Text>
           <Button
-            label={_(msg`Hide trending topics`)}
-            size="tiny"
             variant="ghost"
+            size="tiny"
             color="secondary"
             shape="round"
-            onPress={() => trendingPrompt.open()}>
+            label={_(msg`Trending options`)}
-            <ButtonIcon icon={X} />
+            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
+                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-                      size="small"
+                      <Text
-                      topic={topic}
+                        style={[
-                      style={[
+                          a.text_sm,
-                        hovered && [
+                          a.leading_snug,
-                          t.atoms.border_contrast_high,
+                          t.atoms.text_contrast_low,
-                          t.atoms.bg_contrast_25,
+                          {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 />
     </>
   )
 }