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/message/components/ChatScreen/EmojiPanel.tsx

@@ -74,7 +74,9 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
       ...baseStyles,
       emojiContainer: {
         flex: 1,
-        padding: spacing.sm,
+        paddingTop: spacing.sm,
+        paddingHorizontal: spacing.sm,
+        backgroundColor: baseStyles.panelContainer.backgroundColor,
       },
       emojiItem: {
         width: 40,
@@ -281,21 +283,19 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
     );
   };
 
-  // 渲染管理按钮（表情面板第一位）- 现代扁平化设计
+  // 渲染管理按钮（表情面板第一位）- 填满格子
   const renderManageButton = () => (
     <TouchableOpacity
       key="manage-button"
-      style={[styles.stickerItem, stickerButtonStyles.manageButton]}
+      style={[styles.stickerItem, { alignItems: 'center', justifyContent: 'center' }]}
       onPress={handleOpenManage}
       activeOpacity={0.7}
     >
-      <View style={stickerButtonStyles.iconContainer}>
-        <MaterialCommunityIcons
-          name="cog-outline"
-          size={28}
-          color={colors.chat.textSecondary}
-        />
-      </View>
+      <MaterialCommunityIcons
+        name="cog-outline"
+        size={32}
+        color={colors.chat.textSecondary}
+      />
     </TouchableOpacity>
   );
 
@@ -561,24 +561,28 @@ export const EmojiPanel: React.FC<EmojiPanelProps> = ({
         {activeTab === 'emoji' ? renderEmojiPanel() : renderStickerPanel()}
       </View>
 
-      {/* 底部 Tab 栏 - 现代胶囊式设计 */}
+      {/* 底部 Tab 栏 - QQ/微信风格横向导航 */}
       <View style={styles.panelTabBar}>
-        <View style={styles.panelTabContainer}>
+        <View style={styles.panelTabScroll}>
           <TouchableOpacity
-            style={[styles.panelTab, activeTab === 'emoji' && styles.panelTabActive]}
+            style={[styles.panelTabItem, activeTab === 'emoji' && styles.panelTabItemActive]}
             onPress={() => setActiveTab('emoji')}
             activeOpacity={0.8}
-          >
-            <Text style={[styles.panelTabEmoji, activeTab === 'emoji' ? { opacity: 1 } : {}]}>😊</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[styles.panelTab, activeTab === 'sticker' && styles.panelTabActive]}
-            onPress={() => setActiveTab('sticker')}
-            activeOpacity={0.8}
           >
             <MaterialCommunityIcons
               name="emoticon-happy-outline"
               size={22}
+              color={activeTab === 'emoji' ? colors.primary.main : colors.chat.textSecondary}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.panelTabItem, activeTab === 'sticker' && styles.panelTabItemActive]}
+            onPress={() => setActiveTab('sticker')}
+            activeOpacity={0.8}
+          >
+            <MaterialCommunityIcons
+              name="image-multiple-outline"
+              size={22}
               color={activeTab === 'sticker' ? colors.primary.main : colors.chat.textSecondary}
             />
           </TouchableOpacity>