profile wave selection

app/[user]/waves/page.tsx

@@ -1,14 +1,22 @@
-import { notFound, redirect } from "next/navigation";
-
-export default async function WavesPage({
-  params,
-}: {
-  readonly params?: Promise<{ user: string }> | undefined;
-}) {
-  const resolvedParams = params ? await params : undefined;
-  const user = resolvedParams?.user;
-  if (!user) {
-    notFound();
-  }
-  redirect(`/${user}`);
+import { createUserTabPage } from "@/app/[user]/_lib/userTabPageFactory";
+import UserPageProfileWave from "@/components/user/waves/UserPageProfileWave";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
+import {
+  USER_PAGE_TAB_IDS,
+  USER_PAGE_TAB_MAP,
+} from "@/components/user/layout/userTabs.config";
+
+function WaveTab({ profile }: { readonly profile: ApiIdentity }) {
+  return <UserPageProfileWave profile={profile} />;
 }
+
+const TAB_CONFIG = USER_PAGE_TAB_MAP[USER_PAGE_TAB_IDS.WAVES];
+
+const { Page, generateMetadata } = createUserTabPage({
+  subroute: TAB_CONFIG.route,
+  metaLabel: TAB_CONFIG.metaLabel,
+  Tab: WaveTab,
+});
+
+export default Page;
+export { generateMetadata };

components/brain/my-stream/curations/MyStreamWaveCurationContent.tsx

@@ -22,6 +22,7 @@ interface MyStreamWaveCurationContentProps {
   readonly curationId: string;
   readonly curationName?: string | null | undefined;
   readonly onDropClick: (drop: ExtendedDrop) => void;
+  readonly constrainToViewport?: boolean | undefined;
 }
 
 function MyStreamWaveCurationDropItem({
@@ -129,6 +130,7 @@ export default function MyStreamWaveCurationContent({
   curationId,
   curationName,
   onDropClick,
+  constrainToViewport = true,
 }: MyStreamWaveCurationContentProps) {
   const { leaderboardViewStyle } = useLayout();
   const { drops, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
@@ -220,8 +222,12 @@ export default function MyStreamWaveCurationContent({
 
   return (
     <div
-      className="tw-flex tw-h-full tw-min-h-0 tw-w-full tw-min-w-0 tw-flex-grow tw-flex-col tw-overflow-y-auto tw-overflow-x-hidden tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300"
-      style={leaderboardViewStyle}
+      className={
+        constrainToViewport
+          ? "tw-flex tw-h-full tw-min-h-0 tw-w-full tw-min-w-0 tw-flex-grow tw-flex-col tw-overflow-y-auto tw-overflow-x-hidden tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 desktop-hover:hover:tw-scrollbar-thumb-iron-300"
+          : "tw-flex tw-min-h-0 tw-w-full tw-min-w-0 tw-flex-col"
+      }
+      style={constrainToViewport ? leaderboardViewStyle : undefined}
     >
       {content}
     </div>

components/brain/my-stream/tabs/MyStreamWaveCreateCurationAction.tsx

@@ -35,7 +35,7 @@ export default function MyStreamWaveCreateCurationAction({
 
   return (
     <>
-      <div className="tw-flex tw-flex-shrink-0 tw-items-center tw-gap-2 tw-pr-2 sm:tw-pr-4">
+      <div className="tw-flex tw-flex-shrink-0 tw-items-center tw-gap-2">
         {showCreateFirstCurationCallout ? (
           <button
             type="button"

components/user/layout/UserPageLayout.tsx

@@ -15,24 +15,23 @@ export default function UserPageLayout({
   readonly children: ReactNode;
 }) {
   const normalizedHandleOrWallet = handleOrWallet.toLowerCase();
-  const mainAddress =
-    initialProfile?.primary_wallet ?? normalizedHandleOrWallet;
+  const mainAddress = initialProfile.primary_wallet;
 
   return (
-    <main className="tw-flex tw-flex-col tw-min-h-[100dvh] tailwind-scope">
+    <main className="tailwind-scope tw-flex tw-min-h-[100dvh] tw-flex-col">
       <UserPageDropModal />
       <UserPageClientHydrator
         profile={initialProfile}
         handleOrWallet={normalizedHandleOrWallet}
       />
-      <div className="tw-flex-1 tw-bg-black tw-pb-16 lg:tw-pb-20 tw-border-r tw-border-iron-800 tw-border-solid tw-border-y-0 tw-border-l-0">
+      <div className="tw-flex-1 tw-border-y-0 tw-border-l-0 tw-border-r tw-border-solid tw-border-iron-800 tw-bg-black tw-pb-16 lg:tw-pb-20">
         <UserPageHeader
           profile={initialProfile}
           handleOrWallet={normalizedHandleOrWallet}
           fallbackMainAddress={mainAddress}
         />
-        <div className="tw-px-4 sm:tw-px-6 md:tw-px-8 tw-mx-auto">
-          <UserPageTabs />
+        <div className="tw-mx-auto tw-px-4 sm:tw-px-6 md:tw-px-8">
+          <UserPageTabs initialProfile={initialProfile} />
           <div className="tw-mt-6 lg:tw-mt-8">{children}</div>
         </div>
       </div>

components/user/layout/UserPageTabs.tsx

@@ -5,6 +5,8 @@ import { useCookieConsent } from "@/components/cookies/CookieConsentContext";
 import { useSeizeConnectContext } from "@/components/auth/SeizeConnectContext";
 import { isOwnProfileRoute } from "@/helpers/ProfileHelpers";
 import useCapacitor from "@/hooks/useCapacitor";
+import { useIdentity } from "@/hooks/useIdentity";
+import type { ApiIdentity } from "@/generated/models/ApiIdentity";
 import {
   faChevronLeft,
   faChevronRight,
@@ -33,9 +35,7 @@ import {
   type UserPageVisibilityContext,
   getUserPageTabByRoute,
 } from "./userTabs.config";
-import {
-  shouldHideSubscriptions,
-} from "./userPageVisibility";
+import { shouldHideSubscriptions } from "./userPageVisibility";
 import { shouldDelayUserPageBrainRedirect } from "./userPageBrainAccess";
 
 const DEFAULT_TAB = DEFAULT_USER_PAGE_TAB;
@@ -45,17 +45,20 @@ const getServerRenderSnapshot = () => false;
 
 const getVisibilityContext = ({
   showWaves,
+  hasProfileWave,
   capacitorIsIos,
   country,
   isOwnProfile,
 }: {
   readonly showWaves: boolean;
+  readonly hasProfileWave: boolean;
   readonly capacitorIsIos: boolean;
   readonly country: string | null | undefined;
   readonly isOwnProfile: boolean;
 }): UserPageVisibilityContext => {
   return {
     showWaves,
+    hasProfileWave,
     hideSubscriptions: shouldHideSubscriptions({
       capacitorIsIos,
       country,
@@ -71,7 +74,11 @@ const resolveTabFromPath = (pathname: string): UserPageTabKey => {
   return match?.id ?? DEFAULT_TAB;
 };
 
-export default function UserPageTabs() {
+export default function UserPageTabs({
+  initialProfile,
+}: {
+  readonly initialProfile: ApiIdentity;
+}) {
   const pathname = usePathname();
   const router = useRouter();
   const params = useParams();
@@ -82,6 +89,11 @@ export default function UserPageTabs() {
   const { country } = useCookieConsent();
   const { showWaves, connectedProfile, fetchingProfile } = useAuth();
   const { address, connectionState } = useSeizeConnectContext();
+  const { profile: viewedProfile } = useIdentity({
+    handleOrWallet,
+    initialProfile,
+  });
+  const resolvedViewedProfile = viewedProfile ?? initialProfile;
 
   const isOwnProfile = useMemo(() => {
     return isOwnProfileRoute({
@@ -90,15 +102,18 @@ export default function UserPageTabs() {
     });
   }, [connectedProfile, handleOrWallet]);
 
+  const hasProfileWave = Boolean(resolvedViewedProfile.profile_wave_id);
+
   const visibilityContext = useMemo(
     () =>
       getVisibilityContext({
         showWaves,
+        hasProfileWave,
         capacitorIsIos: capacitor.isIos,
         country,
         isOwnProfile,
       }),
-    [capacitor.isIos, country, isOwnProfile, showWaves]
+    [capacitor.isIos, country, hasProfileWave, isOwnProfile, showWaves]
   );
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);

components/user/layout/userTabs.config.ts

@@ -1,5 +1,6 @@
 export type UserPageVisibilityContext = {
   readonly showWaves: boolean;
+  readonly hasProfileWave: boolean;
   readonly hideSubscriptions: boolean;
   readonly isOwnProfile: boolean;
 };
@@ -27,6 +28,13 @@ const TAB_DEFINITIONS = [
     route: "brain",
     isVisible: ({ showWaves }: UserPageVisibilityContext) => showWaves,
   },
+  {
+    id: "waves",
+    title: "Curation",
+    route: "waves",
+    isVisible: ({ showWaves, hasProfileWave }: UserPageVisibilityContext) =>
+      showWaves && hasProfileWave,
+  },
   {
     id: "collected",
     title: "Collected",