feat(app): support paints in reply body

Author: luke-h1

src/components/Chat/Chat.tsx

@@ -658,6 +658,11 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
         .peek()
         .find(m => m?.message_id === message.message_id);
 
+      const twitchUserId = message.userstate['user-id'];
+      if (twitchUserId) {
+        void fetchUserCosmetics(twitchUserId);
+      }
+
       setReplyTo({
         messageId: message.message_id,
         username: message.sender,
@@ -667,9 +672,10 @@ export const Chat = memo(({ channelName, channelId }: ChatProps) => {
           parentMessage?.message as ParsedPart[],
         ),
         color: message.userstate.color,
+        userId: twitchUserId || undefined,
       });
     },
-    [messages$],
+    [fetchUserCosmetics, messages$],
   );
 
   const handleEmoteSelect = useCallback((item: EmotePickerItem) => {

src/components/Chat/components/ChatInputSection.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@app/components/Button/Button';
+import { PaintedUsername } from '@app/components/Chat/components/ChatMessage/CosmeticUsername/CosmeticUsername';
 import { Icon } from '@app/components/Icon/Icon';
 import { Text } from '@app/components/Text/Text';
 import type { SanitisedEmote } from '@app/types/emote';
@@ -21,6 +22,10 @@ export interface ReplyToData {
   replyParentUserLogin: string;
   parentMessage: string;
   color?: string;
+  /**
+   * Twitch user-id for 7TV paint lookup in the reply preview
+   */
+  userId?: string;
 }
 
 interface ChatInputSectionProps {
@@ -81,17 +86,18 @@ export const ChatInputSection = memo(
           <View style={styles.replyPreview}>
             <View style={styles.replyIndicator} />
             <View style={styles.replyContent}>
-              <Text style={styles.replyLabel}>
-                Replying to{' '}
-                <Text
-                  style={[
-                    styles.replyUsername,
-                    replyTo.color && { color: lightenColor(replyTo.color) },
-                  ]}
-                >
-                  {replyTo.username}
-                </Text>
-              </Text>
+              <View style={styles.replyLabelRow}>
+                <Text style={styles.replyLabel}>Replying to </Text>
+                <PaintedUsername
+                  username={replyTo.username}
+                  userId={replyTo.userId}
+                  showColon={false}
+                  usernameTextStyle={styles.replyPaintedUsername}
+                  fallbackColor={
+                    replyTo.color ? lightenColor(replyTo.color) : undefined
+                  }
+                />
+              </View>
               {replyTo.message && (
                 <Text style={styles.replyMessagePreview} numberOfLines={1}>
                   {truncate(replyTo.message.trim() || replyTo.message, 60)}
@@ -227,13 +233,18 @@ const styles = StyleSheet.create(theme => ({
   replyContent: {
     flex: 1,
   },
+  replyLabelRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
   replyLabel: {
     fontSize: theme.font.fontSize.xs,
     opacity: 0.7,
   },
-  replyUsername: {
+  replyPaintedUsername: {
+    fontSize: theme.font.fontSize.xs,
     fontWeight: '600',
-    opacity: 1,
   },
   replyMessagePreview: {
     fontSize: theme.font.fontSize.sm,

src/components/Chat/components/ChatMessage/CosmeticUsername/CosmeticUsername.tsx

@@ -6,7 +6,7 @@ import { useSelector } from '@legendapp/state/react';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { LinearGradient } from 'expo-linear-gradient';
 import { memo, useMemo } from 'react';
-import { View } from 'react-native';
+import { type StyleProp, TextStyle, View } from 'react-native';
 import Svg, {
   Defs,
   RadialGradient as SvgRadialGradient,
@@ -32,14 +32,22 @@ interface PaintedUsernameProps {
    */
   userId?: string;
   fallbackColor?: string;
+  /**
+   * When false, omits the trailing ":" (e.g. reply preview). Default true for chat lines.
+   * */
+  showColon?: boolean;
+  usernameTextStyle?: StyleProp<TextStyle>;
 }
 
 function PaintedUsernameComponent({
   username,
   paint: paintProp,
   userId,
   fallbackColor = '#FFFFFF',
+  showColon = true,
+  usernameTextStyle,
 }: PaintedUsernameProps) {
+  const displayUsername = showColon ? `${username}:` : username;
   const paintId = useSelector(() =>
     userId ? chatStore$.userPaintIds[userId]?.get() : null,
   );
@@ -125,7 +133,9 @@ function PaintedUsernameComponent({
             </Svg>
           </View>
           {/* Invisible text to size the gradient correctly */}
-          <Text style={[styles.hiddenText, shadowStyle]}>{username}:</Text>
+          <Text style={[styles.hiddenText, usernameTextStyle, shadowStyle]}>
+            {displayUsername}
+          </Text>
         </View>
       );
     }
@@ -138,8 +148,9 @@ function PaintedUsernameComponent({
         end={gradientConfig.end}
         style={styles.gradient}
       >
-        {/* Invisible text to size the gradient correctly */}
-        <Text style={[styles.hiddenText, shadowStyle]}>{username}:</Text>
+        <Text style={[styles.hiddenText, usernameTextStyle, shadowStyle]}>
+          {displayUsername}
+        </Text>
       </LinearGradient>
     );
   };
@@ -148,7 +159,9 @@ function PaintedUsernameComponent({
     <MaskedView
       maskElement={
         <View style={styles.maskContainer}>
-          <Text style={[styles.maskText, shadowStyle]}>{username}:</Text>
+          <Text style={[styles.maskText, usernameTextStyle, shadowStyle]}>
+            {displayUsername}
+          </Text>
         </View>
       }
     >