feat: Conversation requests screen UI components

[lourou]

Replace Segmented Controller with new toggle design

• Removed old segmented controller component
• Implemented new toggle design using Chip components as per Figma design

Add delete all button to header

• Added a delete all button with bin icon to the screen header
• Implemented confirmation dialog before deletion
• Used existing HeaderAction component and icon system
• Added placeholder for delete functionality

Linked to #1589

Screen recording

[thierryskoda]

• Can we refactor the Chip component to not have name or avatarUri and showAvatar? And make it more composable?

Here's some code I generated with AI. Maybe need to verify but something like this would be amazing.

import { Avatar as RNAvatar } from "@/components/Avatar";
import { Center } from "@/design-system/Center";
import { Text as RNText } from "@/design-system/Text";
import { useAppTheme } from "@/theme/useAppTheme";
import React from "react";
import { Pressable, StyleProp, ViewStyle, TextStyle } from "react-native";

const ChipContext = React.createContext<{
  size: "sm" | "md";
  disabled?: boolean;
  isSelected?: boolean;
} | null>(null);

function useChipContext() {
  const context = React.useContext(ChipContext);
  if (!context) {
    throw new Error("Chip components must be used within a Chip");
  }
  return context;
}

type ChipProps = {
  isSelected?: boolean;
  onPress?: () => void;
  size?: "sm" | "md";
  disabled?: boolean;
  variant?: "filled" | "outlined";
  children: React.ReactNode;
};

export function Chip({
  children,
  isSelected,
  onPress,
  size = "sm",
  disabled,
  variant = "outlined",
}: ChipProps) {
  const styles = useChipStyles({ variant });

  return (
    <ChipContext.Provider value={{ size, disabled, isSelected }}>
      <Pressable
        onPress={onPress}
        disabled={disabled}
        style={({ pressed }) => [
          styles.$container,
          isSelected && styles.$selectedContainer,
          disabled && styles.$disabledContainer,
          pressed && styles.$pressedContainer,
        ]}
      >
        <Center style={styles.$content}>{children}</Center>
      </Pressable>
    </ChipContext.Provider>
  );
}

type ChipTextProps = {
  children: string;
  style?: StyleProp<TextStyle>;
};

export function ChipText({ children, style }: ChipTextProps) {
  const { size, disabled, isSelected } = useChipContext();
  const styles = useChipStyles({ variant: "outlined" });

  return (
    <RNText
      preset={size === "sm" ? "small" : "body"}
      style={[
        style,
        disabled && styles.$disabledText,
        isSelected && styles.$selectedText,
      ]}
    >
      {children}
    </RNText>
  );
}

type ChipIconProps = {
  children: React.ReactNode;
};

export function ChipIcon({ children }: ChipIconProps) {
  return children;
}

type ChipAvatarProps = {
  uri?: string;
  name: string;
};

export function ChipAvatar({ uri, name }: ChipAvatarProps) {
  const { theme } = useAppTheme();
  return <RNAvatar uri={uri} name={name} size={theme.avatarSize.xs} />;
}

// Usage:
{
  /* 
<Chip size="sm">
  <ChipAvatar uri={avatarUri} name={name} />
  <ChipText>{name}</ChipText>
</Chip>
*/
}

export function useChipStyles({ variant }: { variant: "filled" | "outlined" }) {
  const { theme } = useAppTheme();

  const $container = {
    borderRadius: theme.spacing.xs,
    borderWidth: variant === "outlined" ? theme.borderWidth.sm : 0,
    borderColor: theme.colors.border.subtle,
    backgroundColor:
      variant === "outlined"
        ? theme.colors.background.surface
        : theme.colors.fill.minimal,
    paddingVertical:
      theme.spacing.xxs -
      (variant === "outlined" ? theme.borderWidth.sm * 2 : 0),
    paddingHorizontal: theme.spacing.xs,
  } satisfies StyleProp<ViewStyle>;

  const $content = {
    columnGap: theme.spacing.xxxs,
    height: theme.spacing.md,
  } satisfies StyleProp<ViewStyle>;

  return {
    constants: {
      chipHeight: $container.paddingVertical * 2 + $content.height,
    },
    $container,
    $selectedContainer: {
      backgroundColor: theme.colors.fill.minimal,
      borderColor:
        variant === "outlined" ? theme.colors.fill.minimal : "transparent",
    },
    $content,
    $disabledContainer: {
      opacity: 0.5,
    },
    $pressedContainer: {
      opacity: 0.8,
    },
    $disabledText: {
      color: theme.colors.text.muted,
    },
    $selectedText: {
      color: theme.colors.text.accent,
    },
  } as const;
}

[thierryskoda]

Please use HStack and no need flexDireciton: row

[lourou]

Yes @thierryskoda great idea for <Chip> component, I'll make it composable and update existing instances!

[thierryskoda]

why Text as RNText ? Why not just Text? same with RNAvatar

[lourou]

Fixed! That should not have been there :)

[thierryskoda]

we should have type IChipSize = 'sm' | 'md'

[lourou]

done!