fix(frontend): connect social feed to backend with proper actor mapping

apps/web/src/mocks/handlers-social.ts

@@ -0,0 +1,135 @@
+/**
+ * MSW handlers for social endpoints
+ */
+
+import { http, HttpResponse } from 'msw';
+
+export const handlersSocial = [
+  http.get('*/api/v1/social/feed', () => {
+    return HttpResponse.json({
+      success: true,
+      data: [
+        {
+          id: 'post:feed-1',
+          type: 'post',
+          actor_id: 'user-1',
+          target_id: '00000000-0000-0000-0000-000000000000',
+          target_type: 'none',
+          content: 'Just dropped a new track! Check it out 🎵',
+          created_at: '2024-01-01T12:00:00Z',
+          actor_name: 'DJ Producer',
+          actor_avatar: 'https://picsum.photos/100',
+        },
+        {
+          id: 'post:feed-2',
+          type: 'post',
+          actor_id: 'user-2',
+          target_id: '00000000-0000-0000-0000-000000000000',
+          target_type: 'none',
+          content: 'Working on some sick beats tonight',
+          created_at: '2024-01-01T10:00:00Z',
+          actor_name: 'Beat Maker',
+          actor_avatar: '',
+        },
+      ],
+    });
+  }),
+
+  http.post('*/api/v1/social/posts', async ({ request }) => {
+    const body = (await request.json()) as { content?: string };
+    return HttpResponse.json({
+      success: true,
+      data: {
+        id: `post-${Date.now()}`,
+        content: body.content,
+        created_at: new Date().toISOString(),
+        user_id: 'user-1',
+        like_count: 0,
+        comment_count: 0,
+      },
+    });
+  }),
+
+  http.get('*/api/v1/social/posts/user/:userId', () => {
+    return HttpResponse.json({
+      success: true,
+      data: [
+        {
+          id: 'post-1',
+          content: 'My latest production',
+          created_at: '2024-01-01T12:00:00Z',
+          user_id: 'user-1',
+          like_count: 10,
+          comment_count: 5,
+        },
+      ],
+    });
+  }),
+
+  http.get('*/api/v1/social/groups', () => {
+    return HttpResponse.json({
+      success: true,
+      data: {
+        groups: [
+          {
+            id: 'g1',
+            name: 'Electronic Music Producers',
+            member_count: 1200,
+            is_public: true,
+            description: 'A community for electronic music producers',
+            avatar_url: 'https://picsum.photos/800/400',
+          },
+          {
+            id: 'g2',
+            name: 'Beat Makers',
+            member_count: 850,
+            is_public: true,
+            description: 'Share your beats and get feedback',
+            avatar_url: 'https://picsum.photos/801/400',
+          },
+        ],
+        total: 2,
+      },
+    });
+  }),
+
+  http.get('*/api/v1/social/groups/:id', ({ params }) => {
+    return HttpResponse.json({
+      success: true,
+      data: {
+        id: params.id,
+        name: 'Electronic Music Producers',
+        member_count: 1200,
+        is_public: true,
+        description: 'A community for electronic music producers',
+        avatar_url: 'https://picsum.photos/800/400',
+      },
+    });
+  }),
+
+  http.post('*/api/v1/social/groups', async ({ request }) => {
+    const body = (await request.json()) as { name: string; description?: string; is_public?: boolean };
+    return HttpResponse.json(
+      {
+        success: true,
+        data: {
+          id: `g-${Date.now()}`,
+          name: body.name,
+          description: body.description ?? '',
+          is_public: body.is_public ?? true,
+          member_count: 1,
+          avatar_url: 'https://picsum.photos/id/10/800/400',
+        },
+      },
+      { status: 201 }
+    );
+  }),
+
+  http.post('*/api/v1/social/groups/:id/join', () => {
+    return HttpResponse.json({ success: true, data: { message: 'Joined group successfully' } });
+  }),
+
+  http.delete('*/api/v1/social/groups/:id/leave', () => {
+    return HttpResponse.json({ success: true, data: { message: 'Left group successfully' } });
+  }),
+];

apps/web/src/services/socialService.ts

@@ -8,13 +8,13 @@ export const socialService = {
     const response = await apiClient.get<BackendFeedItem[]>('/social/feed', {
       params,
     });
-    // Map BackendFeedItem to Post
+    // Map BackendFeedItem to Post (uses actor_name, actor_avatar from backend)
     const posts: Post[] = response.data.map((item) => ({
       id: item.id,
       author: {
-        name: 'User', // Placeholder
-        handle: '@user', // Placeholder
-        avatar: '', // Placeholder
+        name: item.actor_name || 'User',
+        handle: item.actor_name ? `@${item.actor_name.toLowerCase().replace(/\s/g, '')}` : '@user',
+        avatar: item.actor_avatar || '',
       },
       content: item.content,
       timestamp: item.created_at,

apps/web/src/types/backend-types.ts

@@ -24,4 +24,6 @@ export interface BackendFeedItem {
   target_type: string;
   content: string;
   created_at: string;
+  actor_name?: string;
+  actor_avatar?: string;
 }