From 4ab92144f3ef875061b1cb5aede3aff556bd7ad6 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 14 Nov 2025 22:24:42 +0000
Subject: [PATCH] completionId: cgen-f0c84c74cfee4c43a72c26d701ee755b

cgen-f0c84c74cfee4c43a72c26d701ee755b
---
 client/components/social/FeedItemCard.tsx | 48 +++++++++++++++++++----
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/client/components/social/FeedItemCard.tsx b/client/components/social/FeedItemCard.tsx
index 447a0d7b..0088d1c3 100644
--- a/client/components/social/FeedItemCard.tsx
+++ b/client/components/social/FeedItemCard.tsx
@@ -18,6 +18,26 @@ import { communityService } from "@/lib/supabase-service";
 import { Heart, MessageCircle, Share2, Volume2, VolumeX } from "lucide-react";
 import type { FeedItem } from "@/pages/Feed";
 
+const ARM_COLORS: Record<string, { bg: string; border: string; badge: string; text: string }> = {
+  labs: { bg: "bg-yellow-500/10", border: "border-l-4 border-l-yellow-400", badge: "bg-yellow-500/20 text-yellow-200", text: "text-yellow-400" },
+  gameforge: { bg: "bg-green-500/10", border: "border-l-4 border-l-green-400", badge: "bg-green-500/20 text-green-200", text: "text-green-400" },
+  corp: { bg: "bg-blue-500/10", border: "border-l-4 border-l-blue-400", badge: "bg-blue-500/20 text-blue-200", text: "text-blue-400" },
+  foundation: { bg: "bg-red-500/10", border: "border-l-4 border-l-red-400", badge: "bg-red-500/20 text-red-200", text: "text-red-400" },
+  devlink: { bg: "bg-cyan-500/10", border: "border-l-4 border-l-cyan-400", badge: "bg-cyan-500/20 text-cyan-200", text: "text-cyan-400" },
+  nexus: { bg: "bg-purple-500/10", border: "border-l-4 border-l-purple-400", badge: "bg-purple-500/20 text-purple-200", text: "text-purple-400" },
+  staff: { bg: "bg-indigo-500/10", border: "border-l-4 border-l-indigo-400", badge: "bg-indigo-500/20 text-indigo-200", text: "text-indigo-400" },
+};
+
+const ARM_LABELS: Record<string, string> = {
+  labs: "LABS",
+  gameforge: "GAMEFORGE",
+  corp: "CORP",
+  foundation: "FOUNDATION",
+  devlink: "DEV-LINK",
+  nexus: "NEXUS",
+  staff: "STAFF",
+};
+
 interface FeedItemCardProps {
   item: FeedItem;
   isFollowing: boolean;
@@ -88,11 +108,19 @@ export function FeedItemCard({
     }
   };
 
+  const armColor = ARM_COLORS[item.arm || "labs"] || ARM_COLORS.labs;
+  const armLabel = ARM_LABELS[item.arm || "labs"] || "LABS";
+
   return (
-    <Card className="overflow-hidden border-border/40 bg-background/70 shadow-2xl backdrop-blur-lg">
+    <Card className={cn(
+      "overflow-hidden border-border/40 shadow-2xl backdrop-blur-lg",
+      armColor.border,
+      armColor.bg,
+      "bg-background/70"
+    )}>
       <CardHeader className="pb-0">
         <div className="flex items-start justify-between gap-4">
-          <div className="flex items-start gap-3">
+          <div className="flex flex-1 items-start gap-3">
             <Avatar className="h-12 w-12 ring-2 ring-aethex-500/30">
               <AvatarImage
                 src={item.authorAvatar || undefined}
@@ -102,11 +130,15 @@ export function FeedItemCard({
                 {item.authorName?.[0]?.toUpperCase() || "U"}
               </AvatarFallback>
             </Avatar>
-            <div className="space-y-1">
-              <CardTitle className="text-lg font-semibold text-foreground">
-                {item.authorName}
-              </CardTitle>
-              {/* Removed snippet to avoid duplicate text with full caption below */}
+            <div className="min-w-0 flex-1 space-y-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                <CardTitle className="text-lg font-semibold text-foreground">
+                  {item.authorName}
+                </CardTitle>
+                <Badge className={cn("text-xs font-bold uppercase", armColor.badge)}>
+                  {armLabel}
+                </Badge>
+              </div>
             </div>
           </div>
           <Button
@@ -114,7 +146,7 @@ export function FeedItemCard({
             variant={isFollowing ? "outline" : "default"}
             onClick={() => onToggleFollow(item.authorId)}
             className={cn(
-              "rounded-full border-border/60",
+              "rounded-full border-border/60 flex-shrink-0",
               isFollowing
                 ? "bg-background/80 text-foreground"
                 : "bg-gradient-to-r from-aethex-500 to-neon-blue text-white",