From 660d52b9fc517ce799eb263eac19c61de6eb32b8 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Thu, 13 Nov 2025 07:11:12 +0000
Subject: [PATCH] completionId: cgen-117f04d5fe214ddca509b6fc72fbedd6

cgen-117f04d5fe214ddca509b6fc72fbedd6
---
 client/pages/Feed.tsx | 108 ++++++++++++++++++++++++++----------------
 1 file changed, 68 insertions(+), 40 deletions(-)

diff --git a/client/pages/Feed.tsx b/client/pages/Feed.tsx
index afe5aebf..2dc2ff42 100644
--- a/client/pages/Feed.tsx
+++ b/client/pages/Feed.tsx
@@ -431,46 +431,74 @@ export default function Feed() {
                 </div>
               </div>
 
-              <div className="flex flex-wrap items-center gap-2">
-                {[
-                  {
-                    key: "all" as const,
-                    label: "All stories",
-                    icon: Sparkles,
-                    description: "Latest community activity",
-                  },
-                  {
-                    key: "following" as const,
-                    label: "Following",
-                    icon: Users,
-                    description: "People you follow",
-                  },
-                  {
-                    key: "trending" as const,
-                    label: "Trending",
-                    icon: Flame,
-                    description: "Most engagement",
-                  },
-                ].map(({ key, label, icon: Icon, description }) => (
-                  <Button
-                    key={key}
-                    variant={activeFilter === key ? "default" : "outline"}
-                    size="sm"
-                    onClick={() => setActiveFilter(key)}
-                    className={cn(
-                      "flex items-center gap-2 rounded-full border-border/50 px-4",
-                      activeFilter === key
-                        ? "bg-gradient-to-r from-aethex-500 to-neon-blue text-white shadow-lg"
-                        : "bg-background/80 text-muted-foreground backdrop-blur",
-                    )}
-                  >
-                    <Icon className="h-4 w-4" />
-                    <span className="font-medium">{label}</span>
-                    <span className="hidden text-xs sm:inline">
-                      {description}
-                    </span>
-                  </Button>
-                ))}
+              <div className="space-y-3">
+                <div className="flex flex-wrap items-center gap-2">
+                  {[
+                    {
+                      key: "all" as const,
+                      label: "All stories",
+                      icon: Sparkles,
+                      description: "Latest community activity",
+                    },
+                    {
+                      key: "following" as const,
+                      label: "Following",
+                      icon: Users,
+                      description: "People you follow",
+                    },
+                    {
+                      key: "trending" as const,
+                      label: "Trending",
+                      icon: Flame,
+                      description: "Most engagement",
+                    },
+                  ].map(({ key, label, icon: Icon, description }) => (
+                    <Button
+                      key={key}
+                      variant={activeFilter === key ? "default" : "outline"}
+                      size="sm"
+                      onClick={() => setActiveFilter(key)}
+                      className={cn(
+                        "flex items-center gap-2 rounded-full border-border/50 px-4",
+                        activeFilter === key
+                          ? "bg-gradient-to-r from-aethex-500 to-neon-blue text-white shadow-lg"
+                          : "bg-background/80 text-muted-foreground backdrop-blur",
+                      )}
+                    >
+                      <Icon className="h-4 w-4" />
+                      <span className="font-medium">{label}</span>
+                      <span className="hidden text-xs sm:inline">
+                        {description}
+                      </span>
+                    </Button>
+                  ))}
+                </div>
+
+                <div className="flex flex-wrap items-center gap-2">
+                  {ARMS.map((arm) => (
+                    <Button
+                      key={arm.id}
+                      variant={selectedArms.includes(arm.id) ? "default" : "outline"}
+                      size="sm"
+                      onClick={() =>
+                        setSelectedArms((prev) =>
+                          prev.includes(arm.id)
+                            ? prev.filter((a) => a !== arm.id)
+                            : [...prev, arm.id],
+                        )
+                      }
+                      className={cn(
+                        "flex items-center gap-2 rounded-full border-border/50 px-3 py-1.5 text-xs sm:text-sm",
+                        selectedArms.includes(arm.id)
+                          ? "bg-gradient-to-r from-aethex-600 to-neon-blue text-white shadow-md"
+                          : "bg-background/60 text-muted-foreground backdrop-blur hover:border-border",
+                      )}
+                    >
+                      <arm.icon className={cn("h-3.5 w-3.5", arm.color)} />
+                      <span className="font-medium">{arm.label}</span>
+                    </Button>
+                  ))}
+                </div>
               </div>
             </div>
           </section>