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/services/core/wsService.ts

@@ -172,6 +172,7 @@ export interface WSNotificationMessage {
   category?: MessageCategory;
   system_type?: SystemMessageType;
   extra_data?: SystemMessageExtraData;
+  is_read?: boolean;
   created_at: string;
 }
 
@@ -614,6 +615,12 @@ class WebSocketService {
       type: 'notification',
       id: String(payload.id ?? ''),
       content: payload.content || '',
+      sender_id: payload.sender_id,
+      receiver_id: payload.receiver_id,
+      category: payload.category,
+      system_type: payload.system_type,
+      extra_data: payload.extra_data,
+      is_read: !!payload.is_read,
       created_at: payload.created_at || new Date().toISOString(),
     };
     this.emit('notification', m);