refactor(ui): modernize components with flat design and UX refinements

- Redesign chat screen header with improved layout and panel styling
- Update emoji panel tab bar from emoji to icon-based navigation
- Simplify trade detail view with inline content attributes
- Add masonry layout support to market view grid
- Refactor privacy settings from card-based to list-based dropdown UI
- Improve comment item actions layout and styling
- Update trade creation flow with buy/sell specific text
- Adjust padding, gaps, and font sizes across multiple components
- Clean up unused code and imports

src/components/business/CommentItem.tsx

@@ -143,7 +143,6 @@ function createCommentItemStyles(colors: AppColors) {
       paddingVertical: spacing.xs,
       borderLeftWidth: 2,
       borderLeftColor: colors.divider,
-      backgroundColor: colors.background.default,
     },
     subReplyItem: {
       flexDirection: 'row',
@@ -154,8 +153,8 @@ function createCommentItemStyles(colors: AppColors) {
       marginBottom: 0,
     },
     subReplyBody: {
-      fontSize: fontSizes.sm,
-      lineHeight: 20,
+      fontSize: fontSizes.md,
+      lineHeight: 22,
       marginTop: 2,
     },
     subReplyContent: {
@@ -177,10 +176,10 @@ function createCommentItemStyles(colors: AppColors) {
       paddingVertical: spacing.xs,
     },
     replyToText: {
-      fontSize: fontSizes.xs,
+      fontSize: fontSizes.sm,
     },
     replyToName: {
-      fontSize: fontSizes.xs,
+      fontSize: fontSizes.sm,
       fontWeight: '500',
     },
     subReplyActions: {
@@ -483,7 +482,7 @@ const CommentItem: React.FC<CommentItemProps> = ({
                   {targetNickname && (
                     <>
                       <Text variant="caption" color={colors.text.hint} style={styles.replyToText}>
-                        {' '}回复
+                        {' '}回复{' '}
                       </Text>
                       <Text variant="caption" color={colors.primary.main} style={styles.replyToName}>
                         {targetNickname}
@@ -501,15 +500,6 @@ const CommentItem: React.FC<CommentItemProps> = ({
                 {renderSubReplyImages(reply)}
                 {/* 子评论操作按钮 */}
                 <View style={styles.subReplyActions}>
-                  <TouchableOpacity
-                    style={styles.subActionButton}
-                    onPress={() => onReplyPress?.(reply)}
-                  >
-                    <MaterialCommunityIcons name="reply" size={12} color={colors.text.hint} />
-                    <Text variant="caption" color={colors.text.hint} style={styles.subActionText}>
-                      回复
-                    </Text>
-                  </TouchableOpacity>
                   {/* 点赞按钮 */}
                   <TouchableOpacity
                     style={styles.subActionButton}
@@ -518,7 +508,7 @@ const CommentItem: React.FC<CommentItemProps> = ({
                   >
                     <MaterialCommunityIcons
                       name={reply.is_liked ? 'heart' : 'heart-outline'}
-                      size={12}
+                      size={14}
                       color={reply.is_liked ? colors.error.main : colors.text.hint}
                     />
                     <Text
@@ -529,6 +519,15 @@ const CommentItem: React.FC<CommentItemProps> = ({
                       {reply.likes_count > 0 ? formatNumber(reply.likes_count) : '赞'}
                     </Text>
                   </TouchableOpacity>
+                  <TouchableOpacity
+                    style={styles.subActionButton}
+                    onPress={() => onReplyPress?.(reply)}
+                  >
+                    <MaterialCommunityIcons name="reply" size={14} color={colors.text.hint} />
+                    <Text variant="caption" color={colors.text.hint} style={styles.subActionText}>
+                      回复
+                    </Text>
+                  </TouchableOpacity>
                   {/* 删除按钮 - 子评论作者可见 */}
                   {isSubReplyAuthor && (
                     <TouchableOpacity
@@ -538,7 +537,7 @@ const CommentItem: React.FC<CommentItemProps> = ({
                     >
                       <MaterialCommunityIcons
                         name={isDeleting ? 'loading' : 'delete-outline'}
-                        size={12}
+                        size={14}
                         color={colors.text.hint}
                       />
                       <Text variant="caption" color={colors.text.hint} style={styles.subActionText}>
@@ -546,13 +545,12 @@ const CommentItem: React.FC<CommentItemProps> = ({
                       </Text>
                     </TouchableOpacity>
                   )}
-                  {/* 举报按钮 - 对非子评论作者显示 */}
                   {!isSubReplyAuthor && onReport && (
                     <TouchableOpacity
                       style={styles.subActionButton}
                       onPress={() => onReport(reply)}
                     >
-                      <MaterialCommunityIcons name="flag-outline" size={12} color={colors.text.hint} />
+                      <MaterialCommunityIcons name="flag-outline" size={14} color={colors.text.hint} />
                       <Text variant="caption" color={colors.text.hint} style={styles.subActionText}>
                         举报
                       </Text>

src/components/business/TradeCard/TradeCard.tsx

@@ -41,6 +41,7 @@ function createTradeCardStyles(colors: AppColors) {
       position: 'relative',
       aspectRatio: 1,
       backgroundColor: colors.background.default,
+      minHeight: 140,
     },
     listImageContainer: {
       width: 120,
@@ -104,7 +105,9 @@ function createTradeCardStyles(colors: AppColors) {
       fontWeight: '600',
     },
     gridContent: {
-      padding: spacing.sm,
+      paddingHorizontal: spacing.sm,
+      paddingTop: spacing.xs,
+      paddingBottom: spacing.sm,
     },
     titleRow: {
       flexDirection: 'row',
@@ -155,7 +158,7 @@ function createTradeCardStyles(colors: AppColors) {
       flexDirection: 'row',
       flexWrap: 'wrap',
       gap: 4,
-      marginTop: spacing.xs,
+      marginTop: 2,
     },
     tag: {
       paddingHorizontal: 5,
@@ -191,7 +194,7 @@ function createTradeCardStyles(colors: AppColors) {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      marginTop: spacing.sm,
+      marginTop: spacing.xs,
     },
     authorRow: {
       flexDirection: 'row',
@@ -354,6 +357,9 @@ const TradeCardBase: React.FC<TradeCardProps> = ({ item, variant = 'list', onPre
     );
   }
 
+  // grid variant is used in masonry layout; list variant below is unused but kept for compatibility
+
+
   return (
     <TouchableOpacity
       style={styles.listCard}

src/components/common/Text.tsx

@@ -15,7 +15,7 @@ interface CustomTextProps extends Omit<TextProps, 'style'> {
   color?: string;
   numberOfLines?: number;
   onPress?: () => void;
-  style?: TextStyle | TextStyle[];
+  style?: TextStyle | TextStyle[] | (TextStyle | undefined)[];
   weight?: 'regular' | 'medium' | 'semibold' | 'bold';
 }