---

name: Social & Community description: "Build social features including posts, comments, likes, and user interactions. READ BEFORE MODIFYING ANY SOCIAL MEDIA CODE."

🛡️ Social Media Protection & Development Guide

🚨 CRITICAL: This skill documents ALL working features in the social hub. Before making ANY change to social-media.js or related files, you MUST verify all features still work after your changes.

Why This Exists

The social media page (/hub/social-media.js) is a 2700+ line file with 60+ functions that powers the entire social experience. It has been broken and rebuilt MULTIPLE times. Small changes have catastrophic consequences.

---

Complete Feature Registry

📰 Feed & Posts (WORKING - DO NOT BREAK)

📖 Stories (WORKING - DO NOT BREAK)

🎬 Reels (WORKING - DO NOT BREAK)

📰 Article Reader (WORKING - DO NOT BREAK)

Critical Flow:

CopyPostCard → onOpenArticle → setArticleReader → ArticleReaderModal

🔴 Live Streaming (WORKING - DO NOT BREAK)

💬 Chat Windows (WORKING - DO NOT BREAK)

🔔 Notifications (WORKING - DO NOT BREAK)

🔍 Search (WORKING - DO NOT BREAK)

---

Verification Checklist

Before committing ANY change, manually verify:

• Feed loads (scroll should show posts)
• Posts have author avatar and name
• Posts with images show images
• Posts with videos show video player
• Posts with articles show proper thumbnail card
• Clicking article opens IN-APP modal (NOT new tab!)
• Like button works (updates count)
• Comment button opens comment section
• Stories bar shows at top
• Clicking story opens viewer
• Reels carousel appears between posts
• Notifications bell shows count
• Search finds users
• Chat windows open/work
• New post creation works

---

Common Breakages & How to Avoid

The Article Reader Pattern

Copy// ❌ BREAKS IT - removes the modal handler
<PostCard post={p} />

// ✅ CORRECT - passes the modal handler
<PostCard 
    post={p} 
    onOpenArticle={(url, title) => setArticleReader({ open: true, url, title })} 
/>

The FK Join Pattern

Copy// ❌ BREAKS IT - crashes on null profile
const author = authorMap[post.author_id].username;

// ✅ CORRECT - handles null gracefully
const author = authorMap[post.author_id]?.username || 'Player';

The Filter Pattern

Copy// ❌ BREAKS IT - silently removes items
items.filter(item => item.profile);

// ✅ CORRECT - keeps with fallback
items.map(item => ({ ...item, profile: item.profile || DEFAULT }));

---

Files That Affect Social Media

Copypages/hub/social-media.js          # Main file - 2700+ lines
src/components/social/Stories.jsx   # Stories component
src/components/social/PostCard.jsx  # If extracted
src/components/social/ArticleReaderModal.jsx
src/services/UnifiedSocialService.js
services/MessagingService.js
src/stores/socialStore.js
pages/api/proxy.js                 # Article reader backend

---

Before You Start

1. Read the workflow: /social-feed-protection
2. Run tests: node scripts/test-article-reader.js
3. Understand the feature you're changing: Read this skill
4. Make minimal changes: One feature at a time
5. Test EVERYTHING: Use the checklist above

---

The Golden Rule

If you don't understand how a feature works, DON'T MODIFY IT.

Ask questions first. Break nothing. Test everything.