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/screens/home/HomeScreen.tsx

@@ -130,19 +130,19 @@ function createHomeStyles(colors: AppColors, responsivePadding: number) {
       flexDirection: 'row',
       alignItems: 'center',
       paddingHorizontal: spacing.md,
-      paddingVertical: spacing.xs,
+      paddingVertical: spacing.sm,
     },
     sortBarCapsuleScroll: {
       flex: 1,
-      marginHorizontal: spacing.xs,
     },
     sortBarCapsuleContent: {
-      gap: spacing.xs,
+      gap: spacing.sm,
       alignItems: 'center',
+      paddingVertical: spacing.xs,
     },
     capsuleItem: {
       paddingHorizontal: spacing.md,
-      paddingVertical: spacing.xs,
+      paddingVertical: spacing.sm,
       borderRadius: 999,
     },
     capsuleText: {
@@ -156,8 +156,8 @@ function createHomeStyles(colors: AppColors, responsivePadding: number) {
     sortTrigger: {
       flexDirection: 'row',
       alignItems: 'center',
-      paddingVertical: 4,
-      paddingHorizontal: 2,
+      paddingVertical: spacing.sm,
+      paddingHorizontal: spacing.xs,
     },
     sortTriggerText: {
       fontSize: 13,
@@ -986,10 +986,7 @@ export const HomeScreen: React.FC = () => {
             renderItem={({ item }: { item: { key: string; label: string } }) => (
               <TouchableOpacity
                 activeOpacity={0.7}
-                style={[
-                  styles.capsuleItem,
-                  marketCategory === item.key && { backgroundColor: `${colors.primary.main}18` },
-                ]}
+                style={styles.capsuleItem}
                 onPress={() => setMarketCategory(item.key as TradeCategory | 'all')}
               >
                 <Text style={[

src/screens/home/MarketView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { View, StyleSheet, RefreshControl, Pressable } from 'react-native';
+import { View, StyleSheet, RefreshControl } from 'react-native';
 import { FlashList, FlashListRef } from '@shopify/flash-list';
 import type { ListRenderItem } from '@shopify/flash-list';
 import { useAppColors, type AppColors } from '../../theme';
@@ -27,12 +27,9 @@ function createMarketStyles(colors: AppColors, gap: number, padding: number) {
     },
     listContent: {
       paddingHorizontal: padding,
-      paddingTop: gap,
+      paddingTop: gap / 2,
       paddingBottom: 80,
     },
-    columnWrapper: {
-      justifyContent: 'space-between',
-    },
   });
 }
 
@@ -54,7 +51,7 @@ export function MarketView({
   const colors = useAppColors();
   const router = useRouter();
   const isAuth = useIsAuthenticated();
-  const { width, isMobile } = useResponsive();
+  const { width } = useResponsive();
 
   const gap = useResponsiveSpacing({ xs: 6, sm: 8, md: 10, lg: 12, xl: 16 });
   const padding = useResponsiveSpacing({ xs: 8, sm: 10, md: 12, lg: 16, xl: 20 });
@@ -74,7 +71,7 @@ export function MarketView({
   const setFilterType = onFilterTypeChange ?? setFilterTypeLocal;
   const setSelectedCategory = onSelectedCategoryChange ?? setSelectedCategoryLocal;
 
-  const flashListRef = useRef<any>(null);
+  const flashListRef = useRef<FlashListRef<any>>(null);
 
   // 网格列数：移动端2列，平板3列，桌面4列
   const numColumns = useMemo(() => {
@@ -83,12 +80,6 @@ export function MarketView({
     return 2;
   }, [width]);
 
-  // 计算卡片宽度（用于固定宽高比）
-  const cardWidth = useMemo(() => {
-    const totalGap = gap * (numColumns - 1);
-    return Math.floor((width - padding * 2 - totalGap) / numColumns);
-  }, [width, padding, gap, numColumns]);
-
   const fetchItems = useCallback(async (isRefresh = false) => {
     try {
       if (isRefresh) {
@@ -172,7 +163,7 @@ export function MarketView({
   }, [items, isAuth]);
 
   const renderItem = useCallback<ListRenderItem<TradeItemDTO>>(({ item }) => (
-    <View style={{ width: cardWidth, marginBottom: gap }}>
+    <View style={{ marginBottom: gap }}>
       <TradeCard
         item={item}
         variant="grid"
@@ -180,7 +171,7 @@ export function MarketView({
         onFavorite={handleFavorite}
       />
     </View>
-  ), [handlePressItem, handleFavorite, cardWidth, gap]);
+  ), [handlePressItem, handleFavorite, gap]);
 
   const keyExtractor = useCallback((item: TradeItemDTO) => item.id, []);
 
@@ -217,6 +208,7 @@ export function MarketView({
         }
         ListFooterComponent={isLoadingMore ? <Loading size="sm" /> : null}
         drawDistance={250}
+        masonry
       />
     </View>
   );