fix(web): show user names instead of IDs in activity feed

- Fetch group members for all groups in activity page
- Build userId-to-name lookup map and pass to ActivityFeed
- labelFor() now resolves actorUserId to display name
- Falls back to truncated UUID if name not found

Author: Arun-kushwaha007

apps/web/app/dashboard/activity/page.tsx

@@ -1,4 +1,4 @@
-import { ActivityDto, GroupDto } from '@fairshare/shared-types';
+import { ActivityDto, GroupDto, GroupMemberSummaryDto } from '@fairshare/shared-types';
 import { DashboardLayout } from '../../../src/components/layout';
 import { ActivityFeed } from '../../../src/components/activity/ActivityFeed';
 import { backendFetch } from '../../../src/lib/backend';
@@ -21,6 +21,23 @@ export default async function ActivityPage() {
     activity = { items: [], nextCursor: null };
   }
 
+  // Build a userId → name lookup from all group members
+  const userNameMap: Record<string, string> = {};
+  await Promise.all(
+    groups.map(async (group) => {
+      try {
+        const members = await backendFetch<GroupMemberSummaryDto[]>(`/groups/${group.id}/members`);
+        for (const member of members) {
+          if (!userNameMap[member.userId]) {
+            userNameMap[member.userId] = member.name;
+          }
+        }
+      } catch {
+        // skip if members can't be fetched
+      }
+    }),
+  );
+
   return (
     <DashboardLayout>
       <div className="space-y-10">
@@ -32,8 +49,9 @@ export default async function ActivityPage() {
           </p>
         </div>
 
-        <ActivityFeed groups={groups} initialItems={activity.items} initialCursor={activity.nextCursor} />
+        <ActivityFeed groups={groups} initialItems={activity.items} initialCursor={activity.nextCursor} userNameMap={userNameMap} />
       </div>
     </DashboardLayout>
   );
 }
+

apps/web/src/components/activity/ActivityFeed.tsx

@@ -26,8 +26,8 @@ const accentByType: Record<ActivityDto['type'], string> = {
   member_invited: '#EC4899',
 };
 
-function labelFor(activity: ActivityDto): string {
-  const actor = activity.actorUserId;
+function labelFor(activity: ActivityDto, userNameMap: Record<string, string>): string {
+  const actor = userNameMap[activity.actorUserId] ?? activity.actorUserId.slice(0, 8);
   switch (activity.type) {
     case 'expense_created':
       return `${actor} created an expense`;
@@ -69,10 +69,12 @@ export function ActivityFeed({
   groups,
   initialItems,
   initialCursor,
+  userNameMap = {},
 }: {
   groups: GroupDto[];
   initialItems: ActivityDto[];
   initialCursor: number | null;
+  userNameMap?: Record<string, string>;
 }) {
   const { toast } = useToast();
   const [items, setItems] = useState<ActivityDto[]>(initialItems);
@@ -188,7 +190,7 @@ export function ActivityFeed({
                 </div>
                 <div className="flex-1 min-w-0">
                   <p className="text-sm font-semibold text-[var(--fs-text-primary)] truncate">
-                    {labelFor(item)}
+                    {labelFor(item, userNameMap)}
                   </p>
                   <div className="flex flex-wrap items-center gap-2 text-[11px] font-medium text-[var(--fs-text-muted)]">
                     <span className="flex items-center gap-1">