From 287f5c0d42cddd112b65a56ccf60dde90205b06c Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 16:30:34 -0700
Subject: feat(ui): update suggested profiles interstitial top padding 16 -> 12

---
 src/components/FeedInterstitials.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index a92e7be7f..aaaa17d3c 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -333,7 +333,7 @@ export function ProfileGrid({
       <View
         style={[
           a.p_lg,
-          a.pb_xs,
+          a.py_md,
           a.flex_row,
           a.align_center,
           a.justify_between,
@@ -349,7 +349,7 @@ export function ProfileGrid({
       </View>
 
       {gtMobile ? (
-        <View style={[a.flex_1, a.px_lg, a.pt_sm, a.pb_lg, a.gap_md]}>
+        <View style={[a.flex_1, a.px_lg, a.pb_lg, a.gap_md]}>
           <View style={[a.flex_1, a.flex_row, a.flex_wrap, a.gap_sm]}>
             {content}
           </View>
@@ -372,7 +372,7 @@ export function ProfileGrid({
               showsHorizontalScrollIndicator={false}
               snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
               decelerationRate="fast">
-              <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
+              <View style={[a.px_lg, a.pb_lg, a.flex_row, a.gap_md]}>
                 {content}
 
                 <Button
-- 
cgit 1.4.1


From 92e01197344a05ff7510a274543e7cdf86fb8c4b Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 16:32:18 -0700
Subject: feat(ui): updated suggested profiles interstitial "Suggested for you"
 text color

---
 src/components/FeedInterstitials.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index aaaa17d3c..cf0f0cc21 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -338,7 +338,7 @@ export function ProfileGrid({
           a.align_center,
           a.justify_between,
         ]}>
-        <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}>
+        <Text style={[a.text_sm, a.font_bold, t.atoms.text]}>
           {viewContext === 'profile' ? (
             <Trans>Similar accounts</Trans>
           ) : (
-- 
cgit 1.4.1


From b8a257a1c782126e525efadc5a602817cc4c2619 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 17:33:26 -0700
Subject: feat(ui): replace suggested profiles interstital icon with link "See
 all"

---
 src/components/FeedInterstitials.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index cf0f0cc21..dec2dac1b 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -29,7 +29,6 @@ import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
-import {PersonPlus_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
 import {InlineLinkText} from '#/components/Link'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
@@ -345,7 +344,9 @@ export function ProfileGrid({
             <Trans>Suggested for you</Trans>
           )}
         </Text>
-        <Person fill={t.atoms.text_contrast_low.color} size="sm" />
+        <InlineLinkText label={_(msg`See all suggested profiles`)} to="/search">
+          <Trans>See all</Trans>
+        </InlineLinkText>
       </View>
 
       {gtMobile ? (
-- 
cgit 1.4.1


From e465c9e4612c41bfffce90f734b8f01d93eda95d Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:37:03 -0700
Subject: feat(ui): add dropshadow to suggested profile card

---
 src/components/FeedInterstitials.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index dec2dac1b..7af2384b0 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -282,6 +282,7 @@ export function ProfileGrid({
               style={[
                 a.flex_1,
                 (hovered || pressed) && t.atoms.border_contrast_high,
+                t.atoms.shadow_sm,
               ]}>
               <ProfileCard.Outer>
                 <ProfileCard.Header>
@@ -372,7 +373,8 @@ export function ProfileGrid({
               horizontal
               showsHorizontalScrollIndicator={false}
               snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
-              decelerationRate="fast">
+              decelerationRate="fast"
+              style={[a.overflow_visible]}>
               <View style={[a.px_lg, a.pb_lg, a.flex_row, a.gap_md]}>
                 {content}
 
-- 
cgit 1.4.1


From 2a6d04e6e203430fad61ed87cbbfa8e6836e70a5 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:37:41 -0700
Subject: feat: update ProfileCard.Avatar to take size prop

---
 src/components/ProfileCard.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index e01c27655..b2d4d16fb 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -20,7 +20,13 @@ import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, platform, useTheme} from '#/alf'
+import {
+  atoms as a,
+  platform,
+  TextStyleProp,
+  useTheme,
+  ViewStyleProp,
+} from '#/alf'
 import {
   Button,
   ButtonIcon,
@@ -136,12 +142,14 @@ export function Avatar({
   onPress,
   disabledPreview,
   liveOverride,
+  size = 40,
 }: {
   profile: bsky.profile.AnyProfileView
   moderationOpts: ModerationOpts
   onPress?: () => void
   disabledPreview?: boolean
   liveOverride?: boolean
+  size?: number
 }) {
   const moderation = moderateProfile(profile, moderationOpts)
 
@@ -149,7 +157,7 @@ export function Avatar({
 
   return disabledPreview ? (
     <UserAvatar
-      size={40}
+      size={size}
       avatar={profile.avatar}
       type={profile.associated?.labeler ? 'labeler' : 'user'}
       moderation={moderation.ui('avatar')}
@@ -157,7 +165,7 @@ export function Avatar({
     />
   ) : (
     <PreviewableUserAvatar
-      size={40}
+      size={size}
       profile={profile}
       moderation={moderation.ui('avatar')}
       onBeforePress={onPress}
-- 
cgit 1.4.1


From ff4eecc2e4c485c5fddf763008bf46b0148eac0a Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:38:10 -0700
Subject: feat: update ProfileCard.Description to take style prop

---
 src/components/ProfileCard.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index b2d4d16fb..4e135c8a2 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -354,10 +354,11 @@ export function NameAndHandlePlaceholder() {
 export function Description({
   profile: profileUnshadowed,
   numberOfLines = 3,
+  style,
 }: {
   profile: bsky.profile.AnyProfileView
   numberOfLines?: number
-}) {
+} & TextStyleProp) {
   const profile = useProfileShadow(profileUnshadowed)
   const rt = useMemo(() => {
     if (!('description' in profile)) return
@@ -377,7 +378,7 @@ export function Description({
     <View style={[a.pt_xs]}>
       <RichText
         value={rt}
-        style={[a.leading_snug]}
+        style={[a.leading_snug, style]}
         numberOfLines={numberOfLines}
         disableLinks
       />
-- 
cgit 1.4.1


From c6e7816fa73d57468bad5cd0dc4c2ed63fc972e5 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:39:02 -0700
Subject: feat(ui): update padding, border radius, and border on suggested
 profile card

---
 src/components/FeedInterstitials.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 7af2384b0..44f390da5 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -47,8 +47,8 @@ function CardOuter({
     <View
       style={[
         a.w_full,
-        a.p_lg,
-        a.rounded_md,
+        a.p_md,
+        a.rounded_lg,
         a.border,
         t.atoms.bg,
         t.atoms.border_contrast_low,
@@ -281,6 +281,8 @@ export function ProfileGrid({
             <CardOuter
               style={[
                 a.flex_1,
+                a.border,
+                t.atoms.border_contrast_low,
                 (hovered || pressed) && t.atoms.border_contrast_high,
                 t.atoms.shadow_sm,
               ]}>
-- 
cgit 1.4.1


From c93c36f6e51edb150cb7d27025a9c70c38d120b0 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:39:37 -0700
Subject: feat(ui): force width on suggested profile card

---
 src/components/FeedInterstitials.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 44f390da5..47bf228db 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -285,6 +285,7 @@ export function ProfileGrid({
                 t.atoms.border_contrast_low,
                 (hovered || pressed) && t.atoms.border_contrast_high,
                 t.atoms.shadow_sm,
+                {width: 165},
               ]}>
               <ProfileCard.Outer>
                 <ProfileCard.Header>
-- 
cgit 1.4.1


From 3c89552e924fa5380ecbe0fcdce96c2282feb875 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:40:54 -0700
Subject: refactor(ui): replace ProfileCard.Header with custom View

---
 src/components/FeedInterstitials.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 47bf228db..7318c5c5d 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -288,7 +288,7 @@ export function ProfileGrid({
                 {width: 165},
               ]}>
               <ProfileCard.Outer>
-                <ProfileCard.Header>
+                <View style={[a.flex_col, a.align_center, a.gap_sm, a.pb_sm]}>
                   <ProfileCard.Avatar
                     profile={profile}
                     moderationOpts={moderationOpts}
@@ -315,8 +315,8 @@ export function ProfileGrid({
                       })
                     }}
                   />
-                </ProfileCard.Header>
                 <ProfileCard.Description profile={profile} numberOfLines={2} />
+                </View>
               </ProfileCard.Outer>
             </CardOuter>
           )}
-- 
cgit 1.4.1


From 205e7f01909c36047a5194ac9ac2d135bd095956 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:41:30 -0700
Subject: feat(ui): update ProfileCard.Avatar size 40 -> 88

---
 src/components/FeedInterstitials.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 7318c5c5d..16167d83f 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -292,6 +292,7 @@ export function ProfileGrid({
                   <ProfileCard.Avatar
                     profile={profile}
                     moderationOpts={moderationOpts}
+                    size={88}
                   />
                   <ProfileCard.NameAndHandle
                     profile={profile}
-- 
cgit 1.4.1


From f478ebdeb581959f6a961922c5aa479474e2ff8b Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:41:55 -0700
Subject: refactor(ui): swap ProfileCard.NameAndHandle for ProfileCard.Name

---
 src/components/FeedInterstitials.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 16167d83f..fe41d322a 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -294,7 +294,7 @@ export function ProfileGrid({
                     moderationOpts={moderationOpts}
                     size={88}
                   />
-                  <ProfileCard.NameAndHandle
+                  <ProfileCard.Name
                     profile={profile}
                     moderationOpts={moderationOpts}
                   />
-- 
cgit 1.4.1


From 0598d73617eda3da7946573850813593a6fc9bba Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Thu, 24 Jul 2025 18:53:41 -0700
Subject: refactor(ui): follow button and description to match design

---
 src/components/FeedInterstitials.tsx | 57 +++++++++++++++++++++---------------
 1 file changed, 34 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index fe41d322a..28c4cbba6 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -294,30 +294,41 @@ export function ProfileGrid({
                     moderationOpts={moderationOpts}
                     size={88}
                   />
-                  <ProfileCard.Name
-                    profile={profile}
-                    moderationOpts={moderationOpts}
-                  />
-                  <ProfileCard.FollowButton
-                    profile={profile}
-                    moderationOpts={moderationOpts}
-                    logContext="FeedInterstitial"
-                    shape="round"
-                    colorInverted
-                    onFollow={() => {
-                      logEvent('suggestedUser:follow', {
-                        logContext:
-                          viewContext === 'feed'
-                            ? 'InterstitialDiscover'
-                            : 'InterstitialProfile',
-                        location: 'Card',
-                        recId,
-                        position: index,
-                      })
-                    }}
-                  />
-                <ProfileCard.Description profile={profile} numberOfLines={2} />
+                  <View style={[a.flex_col, a.align_center]}>
+                    <ProfileCard.Name
+                      profile={profile}
+                      moderationOpts={moderationOpts}
+                    />
+                    <ProfileCard.Description
+                      profile={profile}
+                      numberOfLines={2}
+                      style={[
+                        t.atoms.text_contrast_medium,
+                        a.text_center,
+                        a.text_xs,
+                      ]}
+                    />
+                  </View>
                 </View>
+
+                <ProfileCard.FollowButton
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                  logContext="FeedInterstitial"
+                  withIcon={false}
+                  style={[a.rounded_sm]}
+                  onFollow={() => {
+                    logEvent('suggestedUser:follow', {
+                      logContext:
+                        viewContext === 'feed'
+                          ? 'InterstitialDiscover'
+                          : 'InterstitialProfile',
+                      location: 'Card',
+                      recId,
+                      position: index,
+                    })
+                  }}
+                />
               </ProfileCard.Outer>
             </CardOuter>
           )}
-- 
cgit 1.4.1


From 955a864245b5da81b02363d6a2d69ffa1e6f27a3 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 16:13:04 -0700
Subject: refactor: update MOBILE_CARD_WIDTH instead of using inline width

---
 src/components/FeedInterstitials.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 28c4cbba6..b54c6622c 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -35,7 +35,7 @@ import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
 import {ProgressGuideList} from './ProgressGuide/List'
 
-const MOBILE_CARD_WIDTH = 300
+const MOBILE_CARD_WIDTH = 165
 
 function CardOuter({
   children,
@@ -285,7 +285,6 @@ export function ProfileGrid({
                 t.atoms.border_contrast_low,
                 (hovered || pressed) && t.atoms.border_contrast_high,
                 t.atoms.shadow_sm,
-                {width: 165},
               ]}>
               <ProfileCard.Outer>
                 <View style={[a.flex_col, a.align_center, a.gap_sm, a.pb_sm]}>
-- 
cgit 1.4.1


From 48f670f26ab9d2578958ba4d9805b3e52212edbb Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 16:26:25 -0700
Subject: fix(ui): follow button should always be pushed to the bottom on the
 profile card

---
 src/components/FeedInterstitials.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index b54c6622c..7cc3a92d9 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -287,7 +287,14 @@ export function ProfileGrid({
                 t.atoms.shadow_sm,
               ]}>
               <ProfileCard.Outer>
-                <View style={[a.flex_col, a.align_center, a.gap_sm, a.pb_sm]}>
+                <View
+                  style={[
+                    a.flex_col,
+                    a.align_center,
+                    a.gap_sm,
+                    a.pb_sm,
+                    a.mb_auto,
+                  ]}>
                   <ProfileCard.Avatar
                     profile={profile}
                     moderationOpts={moderationOpts}
-- 
cgit 1.4.1


From 2bf4ee5690d74ebdcd28f906d8948616a70568af Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 16:29:18 -0700
Subject: fix(ui): suggested profile card grid on web sm -> md

---
 src/components/FeedInterstitials.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 7cc3a92d9..123733923 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -373,7 +373,7 @@ export function ProfileGrid({
 
       {gtMobile ? (
         <View style={[a.flex_1, a.px_lg, a.pb_lg, a.gap_md]}>
-          <View style={[a.flex_1, a.flex_row, a.flex_wrap, a.gap_sm]}>
+          <View style={[a.flex_1, a.flex_row, a.flex_wrap, a.gap_md]}>
             {content}
           </View>
 
-- 
cgit 1.4.1


From f58ad8e4199eacf922dfe0bc3d41fd948677b6bd Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 16:38:25 -0700
Subject: refactor: replace magic 6px with dynamic a.gap_md/2

---
 src/components/FeedInterstitials.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 123733923..70e025a94 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -253,7 +253,10 @@ export function ProfileGrid({
       .map((_, i) => (
         <View
           key={i}
-          style={[gtMobile && web([a.flex_0, {width: 'calc(50% - 6px)'}])]}>
+          style={[
+            gtMobile &&
+              web([a.flex_0, {width: `calc(50% - ${a.gap_md.gap / 2}px)`}]),
+          ]}>
           <SuggestedFollowPlaceholder />
         </View>
       ))
@@ -275,7 +278,8 @@ export function ProfileGrid({
           }}
           style={[
             a.flex_1,
-            gtMobile && web([a.flex_0, {width: 'calc(50% - 6px)'}]),
+            gtMobile &&
+              web([a.flex_0, {width: `calc(50% - ${a.gap_md.gap / 2}px)`}]),
           ]}>
           {({hovered, pressed}) => (
             <CardOuter
-- 
cgit 1.4.1


From 87f2bc5be3b082d6dfb79108e688f9402ca7c996 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 17:18:59 -0700
Subject: feat: create NamePlaceholder component

---
 src/components/ProfileCard.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 4e135c8a2..99a68083a 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -23,9 +23,9 @@ import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar'
 import {
   atoms as a,
   platform,
-  TextStyleProp,
+  type TextStyleProp,
   useTheme,
-  ViewStyleProp,
+  type ViewStyleProp,
 } from '#/alf'
 import {
   Button,
@@ -351,6 +351,24 @@ export function NameAndHandlePlaceholder() {
   )
 }
 
+export function NamePlaceholder({style}: ViewStyleProp) {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.rounded_xs,
+        t.atoms.bg_contrast_25,
+        {
+          width: '60%',
+          height: 14,
+        },
+        style,
+      ]}
+    />
+  )
+}
+
 export function Description({
   profile: profileUnshadowed,
   numberOfLines = 3,
-- 
cgit 1.4.1


From 4e507caa7c5c11c41d44364270180fb4186235d1 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 17:19:13 -0700
Subject: feat: update AvatarPlaceholder to take size prop

---
 src/components/ProfileCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 99a68083a..65e20ba9a 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -174,7 +174,7 @@ export function Avatar({
   )
 }
 
-export function AvatarPlaceholder() {
+export function AvatarPlaceholder({size = 40}: {size?: number}) {
   const t = useTheme()
   return (
     <View
@@ -182,8 +182,8 @@ export function AvatarPlaceholder() {
         a.rounded_full,
         t.atoms.bg_contrast_25,
         {
-          width: 40,
-          height: 40,
+          width: size,
+          height: size,
         },
       ]}
     />
-- 
cgit 1.4.1


From f35dc19a48966cb57c9d80b84267ec98b7d5c11b Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 17:19:41 -0700
Subject: feat(ui): update SuggestedFollowPlaceholder to match new design

---
 src/components/FeedInterstitials.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 70e025a94..f2caddd74 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -66,12 +66,14 @@ export function SuggestedFollowPlaceholder() {
   const t = useTheme()
   return (
     <CardOuter style={[a.gap_md, t.atoms.border_contrast_low]}>
-      <ProfileCard.Header>
-        <ProfileCard.AvatarPlaceholder />
-        <ProfileCard.NameAndHandlePlaceholder />
-      </ProfileCard.Header>
-
-      <ProfileCard.DescriptionPlaceholder numberOfLines={2} />
+      <View style={[a.flex_col, a.align_center, a.gap_sm]}>
+        <ProfileCard.AvatarPlaceholder size={88} />
+        <ProfileCard.NamePlaceholder />
+        <ProfileCard.DescriptionPlaceholder
+          numberOfLines={2}
+          style={[a.align_center, a.flex, a.self_stretch]}
+        />
+      </View>
     </CardOuter>
   )
 }
-- 
cgit 1.4.1


From b2fe27afe72bee4fbebf3bf57418a900fb62ef45 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 17:26:06 -0700
Subject: refactor(ui): remove "Browse more suggestions" on web in favor of
 "See all"

---
 src/components/FeedInterstitials.tsx | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index f2caddd74..f16b33786 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -378,20 +378,10 @@ export function ProfileGrid({
       </View>
 
       {gtMobile ? (
-        <View style={[a.flex_1, a.px_lg, a.pb_lg, a.gap_md]}>
+        <View style={[a.px_lg, a.pb_lg]}>
           <View style={[a.flex_1, a.flex_row, a.flex_wrap, a.gap_md]}>
             {content}
           </View>
-
-          <View style={[a.flex_row, a.justify_end, a.align_center, a.gap_md]}>
-            <InlineLinkText
-              label={_(msg`Browse more suggestions`)}
-              to="/search"
-              style={[t.atoms.text_contrast_medium]}>
-              <Trans>Browse more suggestions</Trans>
-            </InlineLinkText>
-            <Arrow size="sm" fill={t.atoms.text_contrast_medium.color} />
-          </View>
         </View>
       ) : (
         <BlockDrawerGesture>
-- 
cgit 1.4.1


From 4c8d5db6a65852da244a5adc2d8e833f19be306f Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Fri, 25 Jul 2025 18:36:26 -0700
Subject: refactor(ui): web profile cards maxLength 4 -> 3 with flex grow

---
 src/components/FeedInterstitials.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index f16b33786..e9e2ee2a2 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -247,7 +247,7 @@ export function ProfileGrid({
   const navigation = useNavigation<NavigationProp>()
   const {gtMobile} = useBreakpoints()
   const isLoading = isSuggestionsLoading || !moderationOpts
-  const maxLength = gtMobile ? 4 : 6
+  const maxLength = gtMobile ? 3 : 6
 
   const content = isLoading ? (
     Array(maxLength)
@@ -281,7 +281,11 @@ export function ProfileGrid({
           style={[
             a.flex_1,
             gtMobile &&
-              web([a.flex_0, {width: `calc(50% - ${a.gap_md.gap / 2}px)`}]),
+              web([
+                a.flex_0,
+                a.flex_grow,
+                {width: `calc(30% - ${a.gap_md.gap / 2}px)`},
+              ]),
           ]}>
           {({hovered, pressed}) => (
             <CardOuter
-- 
cgit 1.4.1


From 22db8ed63978a7f96dae8c712603fd5a5359e3f2 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Mon, 28 Jul 2025 16:55:27 -0700
Subject: feat(feed): update suggested profiles link text

---
 src/components/FeedInterstitials.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index e9e2ee2a2..d2d65eddc 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -376,8 +376,10 @@ export function ProfileGrid({
             <Trans>Suggested for you</Trans>
           )}
         </Text>
-        <InlineLinkText label={_(msg`See all suggested profiles`)} to="/search">
-          <Trans>See all</Trans>
+        <InlineLinkText
+          label={_(msg`See more suggested profiles on the Explore page`)}
+          to="/search">
+          <Trans>See more</Trans>
         </InlineLinkText>
       </View>
 
-- 
cgit 1.4.1


From ab5be5cb3fe92ca2fb0b5013fbe72136054ddb91 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Mon, 28 Jul 2025 16:56:00 -0700
Subject: refactor(feed): wrap placeholder description placeholder in
 full-width view

---
 src/components/FeedInterstitials.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index d2d65eddc..48965ffb7 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -69,10 +69,9 @@ export function SuggestedFollowPlaceholder() {
       <View style={[a.flex_col, a.align_center, a.gap_sm]}>
         <ProfileCard.AvatarPlaceholder size={88} />
         <ProfileCard.NamePlaceholder />
-        <ProfileCard.DescriptionPlaceholder
-          numberOfLines={2}
-          style={[a.align_center, a.flex, a.self_stretch]}
-        />
+        <View style={[a.w_full]}>
+          <ProfileCard.DescriptionPlaceholder numberOfLines={2} />
+        </View>
       </View>
     </CardOuter>
   )
-- 
cgit 1.4.1


From da47cd0d1b8aac5a19c753a08fdcdf2006cd7eec Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Mon, 28 Jul 2025 16:58:03 -0700
Subject: fix(ui): placeholder web size and flex grow

---
 src/components/FeedInterstitials.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 48965ffb7..6cb10a523 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -256,7 +256,11 @@ export function ProfileGrid({
           key={i}
           style={[
             gtMobile &&
-              web([a.flex_0, {width: `calc(50% - ${a.gap_md.gap / 2}px)`}]),
+              web([
+                a.flex_0,
+                a.flex_grow,
+                {width: `calc(30% - ${a.gap_md.gap / 2}px)`},
+              ]),
           ]}>
           <SuggestedFollowPlaceholder />
         </View>
-- 
cgit 1.4.1


From 8dc074c47798f69d886ed6eec7b8cb01171aced8 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Mon, 28 Jul 2025 17:38:58 -0700
Subject: fix(ui): profile name and description overflowing on web

---
 src/components/FeedInterstitials.tsx | 2 +-
 src/components/ProfileCard.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 6cb10a523..1566db1bf 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -313,7 +313,7 @@ export function ProfileGrid({
                     moderationOpts={moderationOpts}
                     size={88}
                   />
-                  <View style={[a.flex_col, a.align_center]}>
+                  <View style={[a.flex_col, a.align_center, a.max_w_full]}>
                     <ProfileCard.Name
                       profile={profile}
                       moderationOpts={moderationOpts}
diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index 65e20ba9a..f12d922fd 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -282,7 +282,7 @@ export function Name({
   )
   const verification = useSimpleVerificationState({profile})
   return (
-    <View style={[a.flex_row, a.align_center]}>
+    <View style={[a.flex_row, a.align_center, a.max_w_full]}>
       <Text
         emoji
         style={[
-- 
cgit 1.4.1


From d83480cc6456d247f71359b536f362fdf310bf95 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Mon, 28 Jul 2025 18:48:40 -0700
Subject: refactor(ui): remove "Browse more accounts" card on mobile view

---
 src/components/FeedInterstitials.tsx | 21 ---------------------
 1 file changed, 21 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 1566db1bf..aab54b7df 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -243,7 +243,6 @@ export function ProfileGrid({
   const t = useTheme()
   const {_} = useLingui()
   const moderationOpts = useModerationOpts()
-  const navigation = useNavigation<NavigationProp>()
   const {gtMobile} = useBreakpoints()
   const isLoading = isSuggestionsLoading || !moderationOpts
   const maxLength = gtMobile ? 3 : 6
@@ -403,26 +402,6 @@ export function ProfileGrid({
               style={[a.overflow_visible]}>
               <View style={[a.px_lg, a.pb_lg, a.flex_row, a.gap_md]}>
                 {content}
-
-                <Button
-                  label={_(msg`Browse more accounts on the Explore page`)}
-                  onPress={() => {
-                    navigation.navigate('SearchTab')
-                  }}>
-                  <CardOuter style={[a.flex_1, {borderWidth: 0}]}>
-                    <View style={[a.flex_1, a.justify_center]}>
-                      <View style={[a.flex_row, a.px_lg]}>
-                        <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
-                          <Trans>
-                            Browse more suggestions on the Explore page
-                          </Trans>
-                        </Text>
-
-                        <Arrow size="xl" />
-                      </View>
-                    </View>
-                  </CardOuter>
-                </Button>
               </View>
             </ScrollView>
           </View>
-- 
cgit 1.4.1


From e5457c946a5bf56fafde790ced9014e1cb73cd34 Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 29 Jul 2025 17:04:47 -0700
Subject: feat(ui): improve suggested follow placeholder card

Now matches the same size and shape as the rendered card, which prevents
content layout shift.
---
 src/components/FeedInterstitials.tsx | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index aab54b7df..e4419838d 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -25,7 +25,7 @@ import {
   type ViewStyleProp,
   web,
 } from '#/alf'
-import {Button} from '#/components/Button'
+import {Button, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
@@ -64,15 +64,30 @@ function CardOuter({
 
 export function SuggestedFollowPlaceholder() {
   const t = useTheme()
+
   return (
-    <CardOuter style={[a.gap_md, t.atoms.border_contrast_low]}>
-      <View style={[a.flex_col, a.align_center, a.gap_sm]}>
-        <ProfileCard.AvatarPlaceholder size={88} />
-        <ProfileCard.NamePlaceholder />
-        <View style={[a.w_full]}>
-          <ProfileCard.DescriptionPlaceholder numberOfLines={2} />
+    <CardOuter
+      style={[a.gap_md, t.atoms.border_contrast_low, t.atoms.shadow_sm]}>
+      <ProfileCard.Outer>
+        <View
+          style={[a.flex_col, a.align_center, a.gap_sm, a.pb_sm, a.mb_auto]}>
+          <ProfileCard.AvatarPlaceholder size={88} />
+          <ProfileCard.NamePlaceholder />
+          <View style={[a.w_full]}>
+            <ProfileCard.DescriptionPlaceholder numberOfLines={2} />
+          </View>
         </View>
-      </View>
+
+        <Button
+          label=""
+          size="small"
+          variant="solid"
+          color="secondary"
+          disabled
+          style={[a.w_full, a.rounded_sm]}>
+          <ButtonText>Follow</ButtonText>
+        </Button>
+      </ProfileCard.Outer>
     </CardOuter>
   )
 }
-- 
cgit 1.4.1


From 7b4ec21e3e60cb25197fb277f3ba54fa627e4e1e Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 29 Jul 2025 17:05:13 -0700
Subject: refactor(ui): adjust border styles in ProfileGrid card

---
 src/components/FeedInterstitials.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index e4419838d..9bdfcbc5e 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -308,10 +308,8 @@ export function ProfileGrid({
             <CardOuter
               style={[
                 a.flex_1,
-                a.border,
-                t.atoms.border_contrast_low,
-                (hovered || pressed) && t.atoms.border_contrast_high,
                 t.atoms.shadow_sm,
+                (hovered || pressed) && t.atoms.border_contrast_high,
               ]}>
               <ProfileCard.Outer>
                 <View
-- 
cgit 1.4.1


From 940e00c8cb979576ae15076fa268aecda81b0e6d Mon Sep 17 00:00:00 2001
From: Caidan Williams <caidan@internet.dev>
Date: Tue, 29 Jul 2025 17:29:22 -0700
Subject: feat(ui): add "See More Suggested Profiles" card

---
 src/components/FeedInterstitials.tsx | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

(limited to 'src')

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 9bdfcbc5e..2a3a00ba7 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -415,6 +415,8 @@ export function ProfileGrid({
               style={[a.overflow_visible]}>
               <View style={[a.px_lg, a.pb_lg, a.flex_row, a.gap_md]}>
                 {content}
+
+                <SeeMoreSuggestedProfilesCard />
               </View>
             </ScrollView>
           </View>
@@ -424,6 +426,32 @@ export function ProfileGrid({
   )
 }
 
+function SeeMoreSuggestedProfilesCard() {
+  const navigation = useNavigation<NavigationProp>()
+  const t = useTheme()
+  const {_} = useLingui()
+
+  return (
+    <Button
+      label={_(msg`Browse more accounts on the Explore page`)}
+      onPress={() => {
+        navigation.navigate('SearchTab')
+      }}>
+      <CardOuter style={[a.flex_1, t.atoms.shadow_sm]}>
+        <View style={[a.flex_1, a.justify_center]}>
+          <View style={[a.flex_col, a.align_center, a.gap_md]}>
+            <Text style={[a.leading_snug, a.text_center]}>
+              <Trans>See more accounts you might like</Trans>
+            </Text>
+
+            <Arrow size="xl" />
+          </View>
+        </View>
+      </CardOuter>
+    </Button>
+  )
+}
+
 export function SuggestedFeeds() {
   const numFeedsToDisplay = 3
   const t = useTheme()
-- 
cgit 1.4.1