curation view

components/brain/my-stream/MyStreamActionTooltip.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { Tooltip } from "react-tooltip";
+
+interface MyStreamActionTooltipProps {
+  readonly id: string;
+  readonly place?: ComponentProps<typeof Tooltip>["place"];
+}
+
+const tooltipStyle = {
+  padding: "4px 8px",
+  background: "#37373E",
+  color: "white",
+  fontSize: "13px",
+  fontWeight: 500,
+  borderRadius: "6px",
+  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+  zIndex: 99999,
+  pointerEvents: "none",
+} as const;
+
+export default function MyStreamActionTooltip({
+  id,
+  place = "top",
+}: MyStreamActionTooltipProps) {
+  return (
+    <Tooltip
+      id={id}
+      place={place}
+      offset={8}
+      opacity={1}
+      positionStrategy="fixed"
+      style={tooltipStyle}
+    />
+  );
+}

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,29 @@ 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
+            key={activeCurationId}
+            wave={wave}
+            curationId={activeCurationId}
+            onDropClick={onDropClick}
+          />
+        ) : (
+          components[activeContentTab]
+        )}
       </div>
     </div>
   );