feat(ui): unify design system to Twitter/X style across screens and improve message handling

Redesign multiple screens and components from card-based responsive design to Twitter/X flat design:
- UserProfileHeader: adopt Twitter/X style with larger icons, simplified buttons, and block functionality
- AppBackButton: update to chevron-left icon with larger size, remove background styling
- Update SettingsScreen, EditProfileScreen, and UserProfileScreen with flat layout approach
- ConversationListRow: convert from bordered cards to flat list rows with updated typography

Improve message system with WebSocket notification handling:
- Add real-time system unread count updates via WebSocket
- Track lastSystemMessageAt for accurate system message timestamps
- Add notification deduplication and read-status filtering
- Combine system and conversation unread counts in background sync
- Clear system notifications from notification center on mark as read

src/components/common/AppBackButton.tsx

@@ -2,56 +2,54 @@ import React from 'react';
 import { TouchableOpacity, StyleProp, ViewStyle, StyleSheet } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 
-import { borderRadius, spacing, useAppColors } from '../../theme';
+import { useAppColors } from '../../theme';
 
-type AppBackButtonIcon = 'arrow-left' | 'close';
+type AppBackButtonIcon = 'chevron-left' | 'arrow-left' | 'close';
 
 interface AppBackButtonProps {
   onPress: () => void;
   icon?: AppBackButtonIcon;
   style?: StyleProp<ViewStyle>;
   iconColor?: string;
-  backgroundColor?: string;
   hitSlop?: number;
   testID?: string;
 }
 
 const AppBackButton: React.FC<AppBackButtonProps> = ({
   onPress,
-  icon = 'arrow-left',
+  icon = 'chevron-left',
   style,
   iconColor: iconColorProp,
-  backgroundColor: backgroundColorProp,
   hitSlop = 8,
   testID,
 }) => {
   const colors = useAppColors();
   const iconColor = iconColorProp ?? colors.text.primary;
-  const backgroundColor = backgroundColorProp ?? colors.background.paper;
 
   return (
     <TouchableOpacity
       onPress={onPress}
-      style={[styles.button, { backgroundColor }, style]}
-      activeOpacity={0.75}
+      style={[styles.button, style]}
+      activeOpacity={0.6}
       hitSlop={hitSlop}
       testID={testID}
       accessibilityRole="button"
       accessibilityLabel={icon === 'close' ? '关闭' : '返回'}
     >
-      <MaterialCommunityIcons name={icon} size={22} color={iconColor} />
+      <MaterialCommunityIcons name={icon} size={36} color={iconColor} />
     </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    width: 36,
-    height: 36,
-    borderRadius: borderRadius.full,
+    width: 40,
+    height: 40,
     alignItems: 'center',
     justifyContent: 'center',
-    marginLeft: spacing.xs,
+    marginLeft: -12,
+    marginRight: 0,
+    padding: 0,
   },
 });