curation view

components/brain/my-stream/MyStreamWave.tsx

@@ -6,6 +6,7 @@ import { useSetWaveData } from "@/contexts/TitleContext";
 import { useContentTab } from "../ContentTabContext";
 import type { ExtendedDrop } from "@/helpers/waves/drop.helpers";
 import MyStreamWaveChat from "./MyStreamWaveChat";
+import MyStreamWaveCurationContent from "./curations/MyStreamWaveCurationContent";
 import { useWaveData } from "@/hooks/useWaveData";
 import MyStreamWaveLeaderboard from "./MyStreamWaveLeaderboard";
 import MyStreamWaveOutcome from "./MyStreamWaveOutcome";
@@ -80,6 +81,7 @@ const MyStreamWave: React.FC<MyStreamWaveProps> = ({ waveId }) => {
 
   // Get the active tab and utilities from global context
   const { activeContentTab } = useContentTab();
+  const activeCurationId = searchParams.get("curation");
 
   // View mode for chat/gallery toggle
   const { viewMode, toggleViewMode } = useWaveViewMode(waveId);
@@ -102,6 +104,20 @@ const MyStreamWave: React.FC<MyStreamWaveProps> = ({ waveId }) => {
     router.push(`${pathname}?${params.toString()}`, { scroll: false });
   };
 
+  const onSelectCuration = (curationId: string | null) => {
+    const params = new URLSearchParams(searchParams.toString() || "");
+
+    if (curationId) {
+      params.set("curation", curationId);
+    } else {
+      params.delete("curation");
+    }
+
+    const nextQuery = params.toString();
+    const nextUrl = nextQuery ? `${pathname}?${nextQuery}` : pathname;
+    router.replace(nextUrl, { scroll: false });
+  };
+
   // Early return if no wave data - all hooks must be called before this
   if (!wave) {
     return null;
@@ -146,14 +162,28 @@ const MyStreamWave: React.FC<MyStreamWaveProps> = ({ waveId }) => {
         viewMode={viewMode}
         onToggleViewMode={toggleViewMode}
         showGalleryToggle={showGalleryToggle}
+        activeCurationId={activeCurationId}
+        onSelectCuration={onSelectCuration}
       />
 
       <div
         className="tw-relative tw-min-w-0 tw-flex-grow tw-overflow-hidden"
         role="tabpanel"
-        id={getContentTabPanelId(activeContentTab)}
+        id={
+          activeCurationId
+            ? `my-stream-wave-tabpanel-curation-${activeCurationId}`
+            : getContentTabPanelId(activeContentTab)
+        }
       >
-        {components[activeContentTab]}
+        {activeCurationId ? (
+          <MyStreamWaveCurationContent
+            wave={wave}
+            curationId={activeCurationId}
+            onDropClick={onDropClick}
+          />
+        ) : (
+          components[activeContentTab]
+        )}
       </div>
     </div>
   );