Remove use of `flatten` where possible (#9325)

* remove use of flatten where possible

* restore flatten where it says it's needed

* missing utils alpha

src/components/Button.tsx

···
   Pressable,
   type PressableProps,
   type StyleProp,
-  StyleSheet,
   type TargetedEvent,
   type TextProps,
   type TextStyle,
···
       [state, variant, color, size, disabled],
     )
 
-    const flattenedBaseStyles = flatten([baseStyles, style])
-
     return (
       <PressableComponent
         role="button"
···
           a.align_center,
           a.justify_center,
           a.curve_continuous,
-          flattenedBaseStyles,
+          baseStyles,
+          style,
           ...(state.hovered || state.pressed
-            ? [hoverStyles, flatten(hoverStyleProp)]
+            ? [hoverStyles, hoverStyleProp]
             : []),
         ]}
         onPressIn={onPressIn}
···
       baseStyles.push(a.text_xs, a.leading_snug, a.font_semi_bold)
     }
 
-    return StyleSheet.flatten(baseStyles)
+    return flatten(baseStyles)
   }, [t, variant, color, size, disabled])
 }
 

src/components/Dialog/index.web.tsx

···
 import {logger} from '#/logger'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
-import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Context} from '#/components/Dialog/context'
 import {
···
         onClick={stopPropagation}
         onStartShouldSetResponder={_ => true}
         onTouchEnd={stopPropagation}
-        style={flatten([
+        style={[
           a.relative,
           a.rounded_md,
           a.w_full,
···
           },
           !reduceMotionEnabled && a.zoom_fade_in,
           style,
-        ])}>
+        ]}>
         <DismissableLayer.DismissableLayer
           onInteractOutside={preventDefault}
           onFocusOutside={preventDefault}
···
       contentContainerStyle={[a.h_full, a.px_0, webInnerContentContainerStyle]}>
       <FlatList
         ref={ref}
-        style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
+        style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, style]}
         {...props}
       />
       {footer}

src/components/FeedCard.tsx

···
     return rt
   }, [description])
   if (!rt) return null
-  return <RichText value={rt} style={[a.leading_snug]} disableLinks {...rest} />
+  return <RichText value={rt} disableLinks {...rest} />
 }
 
 export function DescriptionPlaceholder() {

src/components/IconCircle.tsx

···
 
 import {
   atoms as a,
-  flatten,
   type TextStyleProp,
   useTheme,
   type ViewStyleProp,
···
           height: size === 'lg' ? 52 : 64,
           backgroundColor: t.palette.primary_50,
         },
-        flatten(style),
+        style,
       ]}>
-      <Icon
-        size={size}
-        style={[
-          {
-            color: t.palette.primary_500,
-          },
-          flatten(iconStyle),
-        ]}
-      />
+      <Icon size={size} style={[{color: t.palette.primary_500}, iconStyle]} />
     </View>
   )
 }

src/components/LabelingServiceCard/index.tsx

···
   const {_} = useLingui()
   return value ? (
     <Text numberOfLines={2}>
-      <RichText value={value} style={[a.leading_snug]} />
+      <RichText value={value} />
     </Text>
   ) : (
     <Text emoji style={[a.leading_snug]}>

src/components/Link.tsx

···
   return (
     <Button
       {...rest}
-      style={[a.justify_start, flatten(rest.style)]}
+      style={[a.justify_start, rest.style]}
       role="link"
       accessibilityRole="link"
       href={href}

src/components/Lists.tsx

···
 
 import {cleanError} from '#/lib/strings/errors'
 import {CenteredView} from '#/view/com/util/Views'
-import {atoms as a, flatten, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Error} from '#/components/Error'
 import {Loader} from '#/components/Loader'
···
         a.pb_lg,
         t.atoms.border_contrast_low,
         {height: height ?? 180, paddingTop: 30},
-        flatten(style),
+        style,
       ]}>
       {isFetchingNextPage ? (
         <Loader size="xl" />

src/components/Loader.tsx

···
   withTiming,
 } from 'react-native-reanimated'
 
-import {atoms as a, flatten, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {type Props, useCommonSVGProps} from '#/components/icons/common'
 import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
 
···
       ]}>
       <Icon
         {...props}
-        style={[
-          a.absolute,
-          a.inset_0,
-          t.atoms.text_contrast_high,
-          flatten(props.style),
-        ]}
+        style={[a.absolute, a.inset_0, t.atoms.text_contrast_high, props.style]}
       />
     </Animated.View>
   )

src/components/Loader.web.tsx

···
 import {View} from 'react-native'
 
-import {atoms as a, flatten, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {type Props, useCommonSVGProps} from '#/components/icons/common'
 import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
 
···
             a.absolute,
             a.inset_0,
             t.atoms.text_contrast_high,
-            flatten(props.style),
+            props.style,
           ]}
         />
       </div>

src/components/PolicyUpdateOverlay/Overlay.tsx

···
   useSafeAreaInsets,
 } from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
+import {utils} from '@bsky.app/alf'
 
 import {isAndroid, isNative} from '#/platform/detection'
 import {useA11y} from '#/state/a11y'
-import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
-import {transparentifyColor} from '#/alf/util/colorGeneration'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {FocusScope} from '#/components/FocusScope'
 import {LockScroll} from '#/components/LockScroll'
 
···
         ) : (
           <LinearGradient
             colors={[
-              transparentifyColor(t.atoms.bg.backgroundColor, 0),
+              utils.alpha(t.atoms.bg.backgroundColor, 0),
               t.atoms.bg.backgroundColor,
               t.atoms.bg.backgroundColor,
             ]}
···
               ]}>
               <LinearGradient
                 colors={[
-                  transparentifyColor(t.atoms.bg.backgroundColor, 0),
+                  utils.alpha(t.atoms.bg.backgroundColor, 0),
                   t.atoms.bg.backgroundColor,
                 ]}
                 start={[0.5, 0]}
···
               role="dialog"
               aria-role="dialog"
               aria-label={label}
-              style={flatten([
+              style={[
                 a.relative,
                 a.w_full,
                 a.p_2xl,
···
                     maxWidth: 420,
                   }),
                 ],
-              ])}>
+              ]}>
               {children}
             </View>
           </FocusScope>

src/components/PostControls/index.tsx

···
-import {memo, useState} from 'react'
+import {memo, useMemo, useState} from 'react'
 import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {
   type AppBskyFeedDefs,
···
   useProgressGuideControls,
 } from '#/state/shell/progress-guide'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, flatten, useBreakpoints} from '#/alf'
+import {atoms as a, useBreakpoints} from '#/alf'
 import {Reply as Bubble} from '#/components/icons/Reply'
 import {useFormatPostStatCount} from '#/components/PostControls/util'
 import {BookmarkButton} from './BookmarkButton'
···
     })
   }
 
-  const secondaryControlSpacingStyles = flatten([
-    {gap: 0}, // default, we want `gap` to be defined on the resulting object
-    variant !== 'compact' && a.gap_xs,
-    (big || gtPhone) && a.gap_sm,
-  ])
+  const secondaryControlSpacingStyles = useMemo(() => {
+    let gap = 0 // default, we want `gap` to be defined on the resulting object
+    if (variant !== 'compact') gap = a.gap_xs.gap
+    if (big || gtPhone) gap = a.gap_sm.gap
+    return {gap}
+  }, [variant, big, gtPhone])
 
   return (
     <View

src/components/ProfileCard.tsx

···
     <View style={[a.pt_xs]}>
       <RichText
         value={rt}
-        style={[a.leading_snug, style]}
+        style={style}
         numberOfLines={numberOfLines}
         disableLinks
       />

src/components/RichText.tsx

···
     [value],
   )
 
-  const flattenedStyle = flatten(style)
-  const plainStyles = [a.leading_snug, flattenedStyle]
-  const interactiveStyles = [
-    a.leading_snug,
-    flatten(interactiveStyle),
-    flattenedStyle,
-  ]
+  const plainStyles = [a.leading_snug, style]
+  const interactiveStyles = [plainStyles, interactiveStyle]
 
   const {text, facets} = richText
 
   if (!facets?.length) {
     if (isOnlyEmoji(text)) {
+      const flattenedStyle = flatten(style)
       const fontSize =
         (flattenedStyle.fontSize ?? a.text_sm.fontSize) * emojiMultiplier
       return (

src/components/Tooltip/index.web.tsx

···
 import {Children, createContext, useContext, useMemo} from 'react'
 import {View} from 'react-native'
+import {utils} from '@bsky.app/alf'
 import {Popover} from 'radix-ui'
 
 import {atoms as a, flatten, select, useTheme} from '#/alf'
-import {transparentifyColor} from '#/alf/util/colorGeneration'
 import {
   ARROW_SIZE,
   BUBBLE_MAX_WIDTH,
···
           {
             minWidth: 'max-content',
             boxShadow: select(t.name, {
-              light: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
-              dark: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
-              dim: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
+              light: `0 0 24px ${utils.alpha(t.palette.black, 0.2)}`,
+              dark: `0 0 24px ${utils.alpha(t.palette.black, 0.2)}`,
+              dim: `0 0 24px ${utils.alpha(t.palette.black, 0.2)}`,
             }),
           },
         ])}>

src/components/Typography.tsx

···
 import {UITextView} from 'react-native-uitextview'
 
 import {logger} from '#/logger'
-import {atoms, flatten, useAlf, useTheme, web} from '#/alf'
+import {atoms, useAlf, useTheme, web} from '#/alf'
 import {
   childHasEmoji,
   normalizeTextStyles,
···
 }: TextProps) {
   const {fonts, flags} = useAlf()
   const t = useTheme()
-  const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)], {
+  const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, style], {
     fontScale: fonts.scaleMultiplier,
     fontFamily: fonts.family,
     flags,
···
     <Text
       {...attr}
       {...rest}
-      style={[atoms.text_md, atoms.leading_normal, flatten(style)]}
+      style={[atoms.text_md, atoms.leading_relaxed, style]}
     />
   )
 }

src/components/WelcomeModal.tsx

···
 import {logger} from '#/logger'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {Logo} from '#/view/icons/Logo'
-import {atoms as a, flatten, useBreakpoints, web} from '#/alf'
+import {atoms as a, useBreakpoints, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times'
 import {Text} from '#/components/Typography'
···
       ]}>
       <FocusScope.FocusScope asChild loop trapped>
         <View
-          style={flatten([
+          style={[
             {
               maxWidth: 800,
               maxHeight: 600,
···
             a.rounded_lg,
             a.overflow_hidden,
             a.zoom_in,
-          ])}>
+          ]}>
           <ImageBackground
             source={welcomeModalBg}
             style={[a.flex_1, a.justify_center]}

src/components/dms/EmojiReactionPicker.web.tsx

···
             accessibilityRole="button"
             role="button"
             onPress={() => setExpanded(true)}
-            style={flatten([
+            style={[
               a.rounded_full,
               {height: 34, width: 34},
               a.justify_center,
               a.align_center,
-            ])}>
+            ]}>
             <DotGridIcon size="lg" style={t.atoms.text_contrast_medium} />
           </Pressable>
         </DropdownMenu.Item>

src/components/dms/ReportDialog.tsx

···
         ]}>
         <RichText
           value={rt}
-          style={[a.text_md, a.leading_snug]}
+          style={[a.text_md]}
           interactiveStyle={a.underline}
           enableTags
         />

src/components/forms/Toggle.tsx

···
 import {isNative} from '#/platform/detection'
 import {
   atoms as a,
-  flatten,
   native,
   type TextStyleProp,
   useTheme,
···
         onPressOut={onPressOut}
         onFocus={onFocus}
         onBlur={onBlur}
-        style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}>
+        style={[a.flex_row, a.align_center, a.gap_sm, style]}>
         {typeof children === 'function' ? children(state) : children}
       </Pressable>
     </ItemContext.Provider>
···
         native({
           paddingTop: 2,
         }),
-        flatten(style),
+        style,
       ]}>
       {children}
     </Text>

src/components/icons/TEMPLATE.tsx

···
         viewBox="0 0 24 24"
         width={size}
         height={size}
-        style={[style]}>
+        style={style}>
         {gradient}
         <Path fill={fill} fillRule="evenodd" clipRule="evenodd" d={path} />
       </Svg>

src/screens/Messages/components/MessageInput.web.tsx

···
 import React from 'react'
-import {Pressable, StyleSheet, View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import Graphemer from 'graphemer'
···
   type EmojiPickerPosition,
 } from '#/view/com/composer/text-input/web/EmojiPicker'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, flatten, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {useSharedInputStyles} from '#/components/forms/TextField'
 import {EmojiArc_Stroke2_Corner0_Rounded as EmojiSmile} from '#/components/icons/Emoji'
···
         </Button>
         <TextareaAutosize
           ref={textAreaRef}
-          style={StyleSheet.flatten([
+          style={flatten([
             a.flex_1,
             a.px_sm,
             a.border_0,

src/screens/Onboarding/Layout.tsx

···
 import {Context} from '#/screens/Onboarding/state'
 import {
   atoms as a,
-  flatten,
   native,
   type TextStyleProp,
   tokens,
···
 }: React.PropsWithChildren<TextStyleProp>) {
   return (
     <Text
-      style={[
-        a.pb_sm,
-        a.text_4xl,
-        a.font_semi_bold,
-        a.leading_tight,
-        flatten(style),
-      ]}>
+      style={[a.pb_sm, a.text_4xl, a.font_semi_bold, a.leading_tight, style]}>
       {children}
     </Text>
   )
···
   style,
 }: React.PropsWithChildren<TextStyleProp>) {
   const t = useTheme()
-  return (
-    <P style={[t.atoms.text_contrast_medium, flatten(style)]}>{children}</P>
-  )
+  return <P style={[t.atoms.text_contrast_medium, style]}>{children}</P>
 }

src/screens/Profile/components/ProfileFeedHeader.tsx

···
         </Button>
       </View>
 
-      <RichText value={rt} style={[a.text_md, a.leading_snug]} />
+      <RichText value={rt} style={[a.text_md]} />
 
       <View style={[a.flex_row, a.gap_sm, a.align_center]}>
         {typeof likeCount === 'number' && (

src/screens/ProfileList/components/Header.tsx

···
       </ProfileSubpageHeader>
       {descriptionRT ? (
         <View style={[a.px_lg, a.pt_sm, a.pb_sm, a.gap_md]}>
-          <RichText value={descriptionRT} style={[a.text_md, a.leading_snug]} />
+          <RichText value={descriptionRT} style={[a.text_md]} />
         </View>
       ) : null}
     </>

src/screens/StarterPack/StarterPackScreen.tsx

···
       </ProfileSubpageHeader>
       {!hasSession || richText || joinedAllTimeCount >= 25 ? (
         <View style={[a.px_lg, a.pt_md, a.pb_sm, a.gap_md]}>
-          {richText ? (
-            <RichText value={richText} style={[a.text_md, a.leading_snug]} />
-          ) : null}
+          {richText ? <RichText value={richText} style={[a.text_md]} /> : null}
           {!hasSession ? (
             <Button
               label={_(msg`Join Bluesky`)}

src/screens/VideoFeed/index.tsx

···
       ]}>
       <RichText
         value={value}
-        style={[a.text_sm, a.flex_1, a.leading_normal]}
+        style={[a.text_sm, a.flex_1, a.leading_relaxed]}
         authorHandle={authorHandle}
         enableTags
         numberOfLines={

src/view/com/util/images/ImageLayoutGrid.tsx

···
 import React from 'react'
-import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {type AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
 import {type AppBskyEmbedImages} from '@atproto/api'
 
···
   if (corners.includes('bottomRight')) {
     styles.push({borderBottomRightRadius: 0})
   }
-  return StyleSheet.flatten(styles)
+  return styles
 }

src/view/icons/Logo.tsx

···
 import React from 'react'
-import {StyleSheet, type TextProps} from 'react-native'
+import {type TextProps} from 'react-native'
 import Svg, {
   Defs,
   LinearGradient,
···
 
 import {colors} from '#/lib/styles'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
+import {flatten} from '#/alf'
 
 const ratio = 57 / 64
 
···
 export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
   const {fill, ...rest} = props
   const gradient = fill === 'sky'
-  const styles = StyleSheet.flatten(props.style)
+  const styles = flatten(props.style)
   const _fill = gradient ? 'url(#sky)' : fill || styles?.color || colors.blue3
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 32)