Cleaner sidebar layout (#9603)

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'}
-        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

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

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