feat: Enhance showcase and vault pages with flexible header options, improved demo content handling, and an unauthenticated claim banner.

src/app/showcase/[videoId]/page.tsx

@@ -19,6 +19,7 @@ import { auth } from "@/lib/auth";
 import { headers } from "next/headers";
 import { SearchBar } from '@/features/vault/components/search-bar';
 import { AddToWorkbenchButton } from '@/features/vault/components/add-to-workbench-button';
+import { UnauthenticatedBanner } from '@/features/vault/components/unauthenticated-banner';
 
 interface ShowcasePageProps {
     params: Promise<{
@@ -43,13 +44,11 @@ export default async function ShowcasePage({ params }: ShowcasePageProps) {
     const videoTitle = vault.videos?.[0]?.title || "Showcase Video";
     const editUrl = `/showcase/${videoId}/moderate`;
 
-    // Check ownership: only the creator who owns this video can access showcase
-    // CRITICAL FIX: Allow authenticated users to view the showcase if it's currently 
-    // a "demo" or "fallback" record (owned by demo-creator or similar).
+    // Check ownership or demo status
     const isDemoRecord = vault.channel.creatorId.startsWith('demo');
     const isOwner = session?.user?.id === vault.channel.creatorId;
 
-    if (!isAuthenticated || (!isOwner && !isDemoRecord)) {
+    if (!isDemoRecord && !isOwner) {
         // Redirect to public vault page instead, signaling that it came from the showcase/claim flow
         redirect(`/vault/${vault.channel.creatorSlug}/video/${videoId}?claim=true`);
     }
@@ -66,37 +65,63 @@ export default async function ShowcasePage({ params }: ShowcasePageProps) {
     return (
         <Suspense fallback={<VaultGridSkeleton />}>
             <div className="min-h-screen bg-background pb-20 overflow-x-hidden">
-                {/* Demo Banner */}
-                <div className="bg-primary/10 border-b border-primary/20 backdrop-blur-md sticky top-0 z-50">
-                    <div className="container mx-auto px-4 py-3 flex items-center justify-between gap-2">
-                        {showAddButton ? (
-                            <div className="flex items-center gap-2">
-                                <Badge variant="secondary" className="bg-amber-500/10 text-amber-600 border-amber-500/20 text-[10px] uppercase font-bold tracking-wider">
-                                    Preview Mode
-                                </Badge>
-                                <span className="text-xs text-muted-foreground hidden sm:inline">Add to workbench to save permanently</span>
+                {/* Sticky Header Section */}
+                <div className="sticky top-0 z-50 flex flex-col">
+                    {/* 1. Claim Banner (Full width, Centered) */}
+                    {!isAuthenticated && isDemoRecord && (
+                        <UnauthenticatedBanner
+                            videoId={videoId}
+                            creatorSlug={vault.channel.creatorSlug}
+                            existingProductCount={products.length}
+                            forceShow={true}
+                        />
+                    )}
+
+                    {/* 2. Navigation Bar (Container constrained to align with content, justify-between) */}
+                    <div className="bg-background/80 backdrop-blur-md border-b border-border/40 py-2">
+                        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-2">
+                            <div className="flex items-center gap-4">
+                                <Link href="/" className="text-primary font-bold text-lg tracking-tight hover:opacity-80 transition-opacity">Vault</Link>
+
+                                {showAddButton && (
+                                    <>
+                                        <Badge variant="secondary" className="bg-amber-500/10 text-amber-600 border-amber-500/20 text-[10px] uppercase font-bold tracking-wider">
+                                            Preview Mode
+                                        </Badge>
+                                        <span className="text-xs text-muted-foreground hidden sm:inline">Add to workbench to save permanently</span>
+                                    </>
+                                )}
                             </div>
-                        ) : <div />}
 
-                        <div className="flex items-center gap-2">
-                            {showAddButton && (
-                                <AddToWorkbenchButton videoId={videoId} />
-                            )}
-                            <Button asChild size="sm" variant="ghost" className="rounded-full text-xs gap-1.5 text-muted-foreground hover:text-foreground">
-                                <Link href="/dashboard">
-                                    <LayoutDashboard className="h-3.5 w-3.5" />
-                                    Dashboard
-                                </Link>
-                            </Button>
-                            <Button asChild size="sm" className="rounded-full shadow-lg shadow-primary/20">
-                                <Link href={`/vault/${vault.channel.creatorSlug}/video/${videoId}`}>View Public Page</Link>
-                            </Button>
+                            <div className="flex items-center gap-2">
+                                {showAddButton && (
+                                    <AddToWorkbenchButton videoId={videoId} />
+                                )}
+                                {isAuthenticated && (
+                                    <Button asChild size="sm" variant="ghost" className="rounded-full text-xs gap-1.5 text-muted-foreground hover:text-foreground">
+                                        <Link href="/dashboard">
+                                            <LayoutDashboard className="h-3.5 w-3.5" />
+                                            Dashboard
+                                        </Link>
+                                    </Button>
+                                )}
+                                <Button asChild size="sm" className="rounded-full border shadow-sm">
+                                    <Link href={`/vault/${vault.channel.creatorSlug}/video/${videoId}`}>View Public Page</Link>
+                                </Button>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <div className="animate-in fade-in duration-700">
-                    <VaultHeader channel={vault.channel} hideLogo={shouldHideLogo} hideSubscribers={shouldHideLogo} hideSearch={true} />
+                    <VaultHeader
+                        channel={vault.channel}
+                        hideLogo={shouldHideLogo}
+                        hideSubscribers={shouldHideLogo}
+                        hideSearch={true}
+                        hideBrand={true}
+                        maxWidth="max-w-5xl"
+                    />
                 </div>
 
                 <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 -mt-6 relative z-20 space-y-8 animate-in slide-in-from-bottom-4 duration-700 delay-150">
@@ -165,6 +190,6 @@ export default async function ShowcasePage({ params }: ShowcasePageProps) {
                     )}
                 </div>
             </div>
-        </Suspense >
+        </Suspense>
     );
 }

src/app/vault/[creatorSlug]/page.tsx

@@ -111,6 +111,7 @@ export default async function VaultPage({ params, searchParams }: PageProps) {
             hideSearch={true}
             hideLogo={isSocial}
             hideSubscribers={isSocial}
+            maxWidth="max-w-5xl"
           />
         </div>
 

src/features/vault/components/claim-vault-button.tsx

@@ -8,14 +8,16 @@ import { claimVideo } from '@/actions/claim-video';
 import { signIn } from '@/lib/auth-client';
 import { toast } from 'sonner';
 import { useRouter } from 'next/navigation';
+import { cn } from '@/lib/utils';
 
 interface ClaimVaultButtonProps {
     videoId: string;
     creatorSlug: string;
     existingCount?: number;
+    className?: string;
 }
 
-export function ClaimVaultButton({ videoId, creatorSlug, existingCount = 0 }: ClaimVaultButtonProps) {
+export function ClaimVaultButton({ videoId, creatorSlug, existingCount = 0, className }: ClaimVaultButtonProps) {
     const router = useRouter();
     const [isPending, startTransition] = useTransition();
     const { tempProducts, getAllTemporaryProducts } = useTemporaryProducts(videoId);
@@ -23,15 +25,9 @@ export function ClaimVaultButton({ videoId, creatorSlug, existingCount = 0 }: Cl
     const totalCount = existingCount + tempProducts.length;
 
     const handleClaim = async () => {
-        // First, sign in
-        const result = await signIn.social({
-            provider: 'google',
-            callbackURL: `/vault/${creatorSlug}/video/${videoId}?claim=true`,
-        });
-
-        if (result.error) {
-            toast.error('Failed to sign in');
-        }
+        // Redirect to sign-in page instead of direct social sign-in
+        const callbackUrl = `/vault/${creatorSlug}/video/${videoId}?claim=true`;
+        router.push(`/sign-in?callbackURL=${encodeURIComponent(callbackUrl)}`);
     };
 
     return (
@@ -39,7 +35,7 @@ export function ClaimVaultButton({ videoId, creatorSlug, existingCount = 0 }: Cl
             onClick={handleClaim}
             disabled={isPending}
             size="sm"
-            className="rounded-full shadow-lg shadow-primary/20 gap-1.5"
+            className={cn("rounded-full shadow-lg shadow-primary/20 gap-1.5", className)}
         >
             <Sparkles className="h-3.5 w-3.5" />
             {isPending ? 'Claiming...' : 'Claim Your Vault'}

src/features/vault/components/unauthenticated-banner.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from '@/components/ui/button';
-import { Share2 } from 'lucide-react';
+import { Share2, Sparkles, ArrowRight } from 'lucide-react';
 import Link from 'next/link';
 import { useTemporaryProducts } from '@/features/vault/hooks/use-temporary-products';
 import { useSearchParams } from 'next/navigation';
@@ -11,61 +11,53 @@ interface UnauthenticatedBannerProps {
     videoId: string;
     creatorSlug: string;
     existingProductCount: number;
+    forceShow?: boolean;
 }
 
-export function UnauthenticatedBanner({ videoId, creatorSlug, existingProductCount }: UnauthenticatedBannerProps) {
+export function UnauthenticatedBanner({ videoId, creatorSlug, existingProductCount, forceShow }: UnauthenticatedBannerProps) {
     const searchParams = useSearchParams();
     const { tempProducts } = useTemporaryProducts(videoId);
 
     // Only show banner if:
-    // 1. User was just redirected from the "Quick Analyze" flow (claim=true param)
-    // 2. User has added temporary products to this video
-    const shouldShow = searchParams.get('claim') === 'true' || tempProducts.length > 0;
+    // 1. forceShow is true (explicitly requested)
+    // 2. User was just redirected from the "Quick Analyze" flow (claim=true param)
+    // 3. User has added temporary products to this video
+    const shouldShow = forceShow || searchParams.get('claim') === 'true' || tempProducts.length > 0;
 
     if (!shouldShow) return null;
 
-    const handleShare = async () => {
-        const url = `${window.location.origin}/vault/${creatorSlug}/video/${videoId}`;
-        if (navigator.share) {
-            try {
-                await navigator.share({
-                    title: 'Check out this vault!',
-                    url: url,
-                });
-            } catch (err) {
-                // User cancelled or share failed
-                console.log('Share cancelled');
-            }
-        } else {
-            // Fallback: copy to clipboard
-            await navigator.clipboard.writeText(url);
-            // Could add a toast notification here
-        }
-    };
-
     return (
-        <div className="bg-primary/10 border-b border-primary/20 backdrop-blur-md sticky top-0 z-50">
-            <div className="container mx-auto px-4 py-3 flex items-center justify-between gap-4">
-                <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-foreground/80">
-                        Like what you see? Create your own vault to monetize your content.
-                    </span>
+        <div className="relative group overflow-hidden">
+            {/* Animated Gradient Background */}
+            <div className="absolute inset-0 bg-gradient-to-r from-indigo-600 via-violet-600 to-primary opacity-90 transition-all duration-700 group-hover:opacity-100" />
+
+            {/* Glassmorphism Overlay */}
+            <div className="absolute inset-0 backdrop-blur-md bg-black/10" />
+
+            <div className="container relative mx-auto px-4 py-3.5 flex flex-col sm:flex-row items-center justify-center gap-4 z-10">
+                <div className="flex items-center gap-3">
+                    <div className="p-2 bg-white/20 rounded-full animate-pulse shadow-lg shadow-white/5">
+                        <Sparkles className="h-4 w-4 text-white" />
+                    </div>
+                    <div className="flex flex-col">
+                        <span className="text-sm font-bold text-white tracking-tight text-center sm:text-left">
+                            Like what you see?
+                        </span>
+                        <span className="text-[11px] text-white/80 font-medium text-center sm:text-left">
+                            Transform these results into your private vault 💎
+                        </span>
+                    </div>
                 </div>
-                <div className="flex items-center gap-2">
-                    <Button
-                        onClick={handleShare}
-                        size="sm"
-                        variant="ghost"
-                        className="rounded-full text-xs gap-1.5"
-                    >
-                        <Share2 className="h-3.5 w-3.5" />
-                        <span className="hidden sm:inline">Share</span>
-                    </Button>
-                    <ClaimVaultButton
-                        videoId={videoId}
-                        creatorSlug={creatorSlug}
-                        existingCount={existingProductCount}
-                    />
+
+                <div className="flex items-center gap-2 w-full sm:w-auto justify-center">
+                    <div className="flex-1 sm:flex-none max-w-[200px]">
+                        <ClaimVaultButton
+                            videoId={videoId}
+                            creatorSlug={creatorSlug}
+                            existingCount={existingProductCount}
+                            className="w-full sm:w-auto bg-white text-indigo-600 hover:bg-neutral-100 border-none shadow-xl shadow-indigo-500/20 font-bold group/btn"
+                        />
+                    </div>
                 </div>
             </div>
         </div>

src/features/vault/components/vault-header.tsx

@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import { SearchBar } from './search-bar';
 import { UserNav } from '@/components/auth/user-nav';
+import { cn } from '@/lib/utils';
 import type { VaultHeaderProps } from '../types/vault.types';
 
 function formatSubscriberCount(count: number | null): string {
@@ -28,7 +29,9 @@ export function VaultHeader({
   dashboardUrl,
   hideLogo,
   hideSubscribers,
-  hideSearch
+  hideSearch,
+  hideBrand,
+  maxWidth = 'max-w-7xl'
 }: VaultHeaderProps & { dashboardUrl?: string }) {
   const handleShare = async () => {
     const url = window.location.href;
@@ -62,25 +65,27 @@ export function VaultHeader({
 
   return (
     <div className="bg-background/80 backdrop-blur-md border-b border-border/40 px-4 py-8 md:px-6">
-      <div className="mx-auto max-w-7xl flex flex-col items-center text-center space-y-6">
+      <div className={cn("mx-auto flex flex-col items-center text-center space-y-6", maxWidth)}>
 
         {/* Ownership/Action Banner */}
-        <div className="w-full flex justify-between items-center -mb-4">
-          <div className="flex items-center gap-2">
-            <Link href="/" className="text-primary font-bold text-lg tracking-tight hover:opacity-80 transition-opacity">Vault</Link>
-          </div>
-          <div className="flex items-center gap-4">
-            {dashboardUrl && (
-              <Button variant="ghost" size="sm" asChild className="text-muted-foreground hover:text-primary gap-2">
-                <Link href={dashboardUrl}>
-                  <LayoutDashboard className="h-4 w-4" />
-                  Dashboard
-                </Link>
-              </Button>
-            )}
-            <UserNav />
+        {!hideBrand && (
+          <div className="w-full flex justify-between items-center -mb-4">
+            <div className="flex items-center gap-2">
+              <Link href="/" className="text-primary font-bold text-lg tracking-tight hover:opacity-80 transition-opacity">Vault</Link>
+            </div>
+            <div className="flex items-center gap-4">
+              {dashboardUrl && (
+                <Button variant="ghost" size="sm" asChild className="text-muted-foreground hover:text-primary gap-2">
+                  <Link href={dashboardUrl}>
+                    <LayoutDashboard className="h-4 w-4" />
+                    Dashboard
+                  </Link>
+                </Button>
+              )}
+              <UserNav />
+            </div>
           </div>
-        </div>
+        )}
 
         {/* Creator Info Section */}
         <div className="flex flex-col items-center gap-4">

src/features/vault/services/showcase.service.ts

@@ -32,11 +32,13 @@ export class ShowcaseService {
                 thumbnailUrl: youtubeChannels.thumbnailUrl,
                 videoId: youtubeVideos.videoId,
                 userName: users.name,
-                userImage: users.image
+                userImage: users.image,
+                approvedProductCount: sql<number>`COUNT(DISTINCT CASE WHEN ${detectedObjects.moderationStatus} = 'APPROVED' THEN ${detectedObjects.id} END)`
             })
             .from(youtubeVideos)
             .innerJoin(youtubeChannels, eq(youtubeVideos.channelId, youtubeChannels.id))
             .leftJoin(users, eq(youtubeChannels.creatorId, users.id))
+            .leftJoin(detectedObjects, eq(detectedObjects.videoId, youtubeVideos.id))
             .where(
                 and(
                     inArray(youtubeVideos.videoId, videoIdVariations),
@@ -44,20 +46,37 @@ export class ShowcaseService {
                     excludeCreatorId ? ne(youtubeChannels.creatorId, excludeCreatorId) : undefined
                 )
             )
+            .groupBy(
+                youtubeChannels.creatorId,
+                youtubeChannels.channelName,
+                youtubeChannels.creatorSlug,
+                youtubeChannels.thumbnailUrl,
+                youtubeVideos.videoId,
+                users.name,
+                users.image
+            )
             .limit(10);
 
         // Map and deduplicate by creatorId
-        const result = matches.map(m => {
-            const isDemo = m.creatorId === DEMO_USER_ID;
-            return {
-                creatorId: m.creatorId,
-                name: isDemo ? "Vault Preview" : (m.userName || m.channelName),
-                avatar: isDemo ? undefined : (m.userImage || m.thumbnailUrl),
-                creatorSlug: m.creatorSlug,
-                videoId: m.videoId,
-                isDemo
-            };
-        });
+        // Also filter: Demo users MUST have at least 1 product
+        const result = matches
+            .filter(m => {
+                if (m.creatorId === DEMO_USER_ID) {
+                    return Number(m.approvedProductCount) > 0;
+                }
+                return true;
+            })
+            .map(m => {
+                const isDemo = m.creatorId === DEMO_USER_ID;
+                return {
+                    creatorId: m.creatorId,
+                    name: isDemo ? "Vault Preview" : (m.userName || m.channelName),
+                    avatar: isDemo ? undefined : (m.userImage || m.thumbnailUrl),
+                    creatorSlug: m.creatorSlug,
+                    videoId: m.videoId,
+                    isDemo
+                };
+            });
 
         const uniqueMatches = Array.from(new Map(result.map(m => [m.creatorId, m])).values());
         return uniqueMatches;
@@ -146,21 +165,29 @@ export class ShowcaseService {
             .select({
                 video: youtubeVideos,
                 channel: youtubeChannels,
+                userName: users.name,
+                userImage: users.image,
             })
             .from(youtubeVideos)
             .innerJoin(youtubeChannels, eq(youtubeVideos.channelId, youtubeChannels.id))
+            .leftJoin(users, eq(youtubeChannels.creatorId, users.id))
             .where(
                 and(
                     inArray(youtubeVideos.videoId, videoIdVariations),
-                    userId ? eq(youtubeChannels.creatorId, userId) : undefined
+                    eq(youtubeChannels.creatorId, userId || DEMO_USER_ID)
                 )
             )
             .limit(1);
 
         const video = videoResult[0]?.video;
         const channel = videoResult[0]?.channel;
+        const userName = videoResult[0]?.userName;
+        const userImage = videoResult[0]?.userImage;
 
         if (video && channel) {
+            // Override channel info with human name if available
+            if (userName) channel.channelName = userName;
+            if (userImage) channel.thumbnailUrl = userImage;
             // Attach channel for the 'with' equivalent
             const videoWithChannel = { ...video, channel };
             // Self-healing: If subscriberCount is missing or 0, trigger a background refresh

src/features/vault/types/vault.types.ts

@@ -54,6 +54,8 @@ export interface VaultHeaderProps {
   hideLogo?: boolean;
   hideSubscribers?: boolean;
   hideSearch?: boolean;
+  hideBrand?: boolean;
+  maxWidth?: string;
 }