[Chat] Split view layout for web (#10258)

src/view/com/util/EmptyState.tsx

@@ -2,45 +2,53 @@ import {isValidElement} from 'react'
 import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
 import {View} from 'react-native'
 
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, type ButtonProps, ButtonText} from '#/components/Button'
+import {
+  Button,
+  ButtonIcon,
+  type ButtonProps,
+  ButtonText,
+} from '#/components/Button'
 import {EditBig_Stroke1_Corner0_Rounded as EditIcon} from '#/components/icons/EditBig'
 import {Text} from '#/components/Typography'
 
 export type EmptyStateButtonProps = Omit<ButtonProps, 'children' | 'label'> & {
   label: string
   text: string
+  icon?: React.ComponentProps<typeof ButtonIcon>['icon']
 }
 
 export function EmptyState({
   testID,
   icon,
   iconSize = '3xl',
+  iconColor,
   message,
   style,
   textStyle,
   button,
 }: {
   testID?: string
-  icon?: React.ComponentType<any> | React.ReactElement
-  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  icon?: React.ComponentType<any> | React.ReactElement | null
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
+  iconColor?: string
   message: string
   style?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
   button?: EmptyStateButtonProps
 }) {
-  const pal = usePalette('default')
-  const {isTabletOrDesktop} = useWebMediaQueries()
   const t = useTheme()
-  const {gtMobile} = useBreakpoints()
+  const {gtMobile, gtTablet} = useBreakpoints()
 
   const placeholderIcon = (
     <EditIcon size="2xl" fill={t.atoms.text_contrast_medium.color} />
   )
 
   const renderIcon = () => {
+    if (icon === null) {
+      return null
+    }
+
     if (!icon) {
       return placeholderIcon
     }
@@ -57,8 +65,7 @@ export function EmptyState({
       return (
         <IconComponent
           size={iconSize}
-          fill={t.atoms.text_contrast_medium.color}
-          style={{color: t.atoms.text_contrast_low.color}}
+          style={{color: iconColor ?? t.atoms.text_contrast_low.color}}
         />
       )
     }
@@ -79,16 +86,14 @@ export function EmptyState({
           {height: 64, width: 64},
           isValidElement(icon)
             ? a.bg_transparent
-            : [isTabletOrDesktop && {marginTop: 50}],
+            : [gtTablet && {marginTop: 50}],
         ]}>
         {renderIcon()}
       </View>
       <Text
         style={[
-          {
-            color: pal.colors.textLight,
-            maxWidth: gtMobile ? '40%' : '60%',
-          },
+          t.atoms.text_contrast_high,
+          {maxWidth: gtMobile ? '40%' : '60%'},
           a.pt_xs,
           a.font_medium,
           a.text_md,
@@ -101,8 +106,9 @@ export function EmptyState({
         {message}
       </Text>
       {button && (
-        <View style={[a.flex_shrink, a.mt_xl, a.self_center, a.mb_5xl]}>
+        <View style={[a.flex_shrink, a.mt_md, a.self_center, a.mb_5xl]}>
           <Button {...button}>
+            {button.icon && <ButtonIcon icon={button.icon} />}
             <ButtonText>{button.text}</ButtonText>
           </Button>
         </View>