Feat/new hackathon layout

app/(landing)/hackathons/[slug]/HackathonPageClient.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useRouter, useSearchParams, useParams } from 'next/navigation';
 import { useHackathonData } from '@/lib/providers/hackathonProvider';
+import { useHackathonAnnouncements } from '@/hooks/hackathon/use-hackathon-queries';
 import { useRegisterHackathon } from '@/hooks/hackathon/use-register-hackathon';
 import { useLeaveHackathon } from '@/hooks/hackathon/use-leave-hackathon';
 import { useSubmission } from '@/hooks/hackathon/use-submission';
@@ -19,31 +20,34 @@ import { WinnersTab } from '@/components/hackathons/winners/WinnersTab';
 import LoadingScreen from '@/features/projects/components/CreateProjectModal/LoadingScreen';
 import { useTimelineEvents } from '@/hooks/hackathon/use-timeline-events';
 import { toast } from 'sonner';
-import type { Participant } from '@/lib/api/hackathons';
+import type { Hackathon, Participant } from '@/lib/api/hackathons';
 import { HackathonStickyCard } from '@/components/hackathons/hackathonStickyCard';
 import { HackathonParticipants } from '@/components/hackathons/participants/hackathonParticipant';
 import { useCommentSystem } from '@/hooks/use-comment-system';
 import { CommentEntityType } from '@/types/comment';
 import { useTeamPosts } from '@/hooks/hackathon/use-team-posts';
-import {
-  listAnnouncements,
-  type HackathonAnnouncement,
-} from '@/lib/api/hackathons/index';
 import { Megaphone } from 'lucide-react';
 import { AnnouncementsTab } from '@/components/hackathons/announcements/AnnouncementsTab';
-import { reportError, reportMessage } from '@/lib/error-reporting';
+import { reportMessage } from '@/lib/error-reporting';
 
-export default function HackathonPageClient() {
+interface HackathonPageClientProps {
+  /** Server-fetched hackathon — seeds React Query cache, eliminates loading state on first render. */
+  initialHackathon: Hackathon;
+}
+
+export default function HackathonPageClient({
+  initialHackathon,
+}: HackathonPageClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const params = useParams();
 
+  // `currentHackathon` is immediately available — seeded from server via initialData
   const {
     currentHackathon,
     submissions,
     winners,
     loading,
-    setCurrentHackathon,
     refreshCurrentHackathon,
   } = useHackathonData();
 
@@ -78,32 +82,9 @@ export default function HackathonPageClient() {
     autoFetch: !!hackathonId,
   });
 
-  // Fetch announcements for public view
-  const [announcements, setAnnouncements] = useState<HackathonAnnouncement[]>(
-    []
-  );
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [announcementsLoading, setAnnouncementsLoading] = useState(false);
-
-  useEffect(() => {
-    async function fetchAnnouncements() {
-      if (!hackathonId) return;
-      try {
-        setAnnouncementsLoading(true);
-        const data = await listAnnouncements(hackathonId);
-        // Only show published announcements for public view
-        setAnnouncements(data.filter(a => !a.isDraft));
-      } catch (error) {
-        reportError(error, {
-          context: 'hackathon-fetchAnnouncements',
-          hackathonId,
-        });
-      } finally {
-        setAnnouncementsLoading(false);
-      }
-    }
-    fetchAnnouncements();
-  }, [hackathonId]);
+  // React Query replaces the useEffect+useState announcements pattern
+  const { data: announcements = [], isLoading: announcementsLoading } =
+    useHackathonAnnouncements(hackathonId, !!hackathonId);
 
   const hackathonTabs = useMemo(() => {
     const hasParticipants =
@@ -115,7 +96,8 @@ export default function HackathonPageClient() {
     const isTeamHackathon =
       participantType === 'TEAM' || participantType === 'TEAM_OR_INDIVIDUAL';
 
-    const hasWinners = winners && winners.length > 0;
+    const hasWinners = (winners && winners.length > 0) || loading;
+    const hasAnnouncements = announcements.length > 0 || announcementsLoading;
 
     const tabs = [
       { id: 'overview', label: 'Overview' },
@@ -137,7 +119,7 @@ export default function HackathonPageClient() {
             },
           ]
         : []),
-      ...(announcements.length > 0
+      ...(hasAnnouncements
         ? [
             {
               id: 'announcements',
@@ -229,6 +211,8 @@ export default function HackathonPageClient() {
     teamPosts.length,
     winners,
     announcements,
+    announcementsLoading,
+    loading,
   ]);
 
   // Refresh hackathon data
@@ -318,33 +302,13 @@ export default function HackathonPageClient() {
     router.push('?tab=team-formation');
   };
 
-  // Set current hackathon on mount
-  const [isInitializing, setIsInitializing] = useState(true);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const initHackathon = async () => {
-      if (hackathonId) {
-        await setCurrentHackathon(hackathonId);
-      }
-      if (isMounted) {
-        setIsInitializing(false);
-      }
-    };
-
-    initHackathon();
+  // No longer needed — currentHackathon is seeded from server via React Query initialData.
 
-    return () => {
-      isMounted = false;
-    };
-  }, [hackathonId, setCurrentHackathon]);
-
-  // Handle tab changes from URL
-  // Now also defaults to 'overview' if the URL tab is not in the filtered hackathonTabs list.
+  // Handle tab changes from URL.
+  // Defaults to 'overview' if the URL tab is not in the filtered hackathonTabs list.
   // This handles direct URL access to a disabled tab — user is silently redirected to overview.
   useEffect(() => {
-    if (loading || !currentHackathon) return;
+    if (!currentHackathon) return;
 
     const tabFromUrl = searchParams.get('tab');
 
@@ -360,12 +324,26 @@ export default function HackathonPageClient() {
       return;
     }
 
-    // Tab is disabled or unrecognised — fall back to overview
-    setActiveTab('overview');
-    const queryParams = new URLSearchParams(searchParams.toString());
-    queryParams.set('tab', 'overview');
-    router.replace(`?${queryParams.toString()}`, { scroll: false });
-  }, [searchParams, hackathonTabs, router, loading, currentHackathon]);
+    // If the tab is not in the list yet, check if it's because we're still loading data
+    const isKnownTabLoading =
+      (tabFromUrl === 'announcements' && announcementsLoading) ||
+      (tabFromUrl === 'winners' && loading);
+
+    if (!isKnownTabLoading) {
+      // Tab is disabled or unrecognised — fall back to overview
+      setActiveTab('overview');
+      const queryParams = new URLSearchParams(searchParams.toString());
+      queryParams.set('tab', 'overview');
+      router.replace(`?${queryParams.toString()}`, { scroll: false });
+    }
+  }, [
+    searchParams,
+    hackathonTabs,
+    router,
+    currentHackathon,
+    announcementsLoading,
+    loading,
+  ]);
 
   const handleTabChange = (tabId: string) => {
     setActiveTab(tabId);
@@ -374,8 +352,8 @@ export default function HackathonPageClient() {
     router.push(`?${queryParams.toString()}`, { scroll: false });
   };
 
-  // Loading state
-  if (loading || isInitializing) {
+  // Only show a loading screen if data is still being fetched (e.g., window refocus refresh).
+  if (loading && !currentHackathon) {
     return <LoadingScreen />;
   }
 

app/(landing)/hackathons/[slug]/announcements/[announcementId]/page.tsx

@@ -93,13 +93,13 @@ export default function AnnouncementDetailPage() {
     <div className='min-h-screen bg-black pb-24'>
       {/* Top Header */}
       <div className='sticky top-0 z-10 border-b border-zinc-900 bg-black/80 backdrop-blur-md'>
-        <div className='mx-auto max-w-4xl items-center justify-between px-6 py-4'>
+        <div className='mx-auto flex max-w-4xl items-center justify-between px-6 py-4'>
           <button
-            onClick={() => window.close()}
+            onClick={() => router.push(`/hackathons/${slug}?tab=announcements`)}
             className='flex items-center gap-2 text-sm text-zinc-400 transition-colors hover:text-white'
           >
             <ArrowLeft className='h-4 w-4' />
-            Close Tab
+            Back to Hackathon
           </button>
           <div className='flex items-center gap-2 text-zinc-500'>
             <Megaphone className='text-primary h-4 w-4' />
@@ -170,7 +170,6 @@ export default function AnnouncementDetailPage() {
             </div>
           </div>
         </div>
-
         {/* Content */}
         <div className='prose prose-invert prose-primary max-w-none'>
           {markdownLoading ? (
@@ -191,7 +190,7 @@ export default function AnnouncementDetailPage() {
             This announcement was published by the hackathon organizers.
           </p>
           <BoundlessButton
-            onClick={() => window.close()}
+            onClick={() => router.push(`/hackathons/${slug}?tab=announcements`)}
             variant='outline'
             size='sm'
           >

app/(landing)/hackathons/[slug]/components/Banner.tsx

@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import React from 'react';
+
+const Banner = ({ banner, title }: { banner: string; title?: string }) => {
+  return (
+    <div className='relative h-[200px] w-full bg-gray-200 md:h-[360px]'>
+      <Image
+        src={banner}
+        alt={`${title || 'hackathon'} banner`}
+        fill
+        className='object-cover'
+        priority
+      />
+    </div>
+  );
+};
+
+export default Banner;

app/(landing)/hackathons/[slug]/components/header/ActionButtons.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import { BoundlessButton } from '@/components/buttons';
+import { IconUsers, IconUserPlus, IconLogout } from '@tabler/icons-react';
+import {
+  useHackathon,
+  useMyTeam,
+  useJoinHackathon,
+  useLeaveHackathon,
+} from '@/hooks/hackathon/use-hackathon-queries';
+import { useHackathonData } from '@/lib/providers/hackathonProvider';
+import { useAuth } from '@/hooks/use-auth';
+import SharePopover from '@/components/common/SharePopover';
+import { toast } from 'sonner';
+
+const ActionButtons = () => {
+  const { slug } = useParams<{ slug: string }>();
+  const router = useRouter();
+  const { user } = useAuth();
+  const { currentHackathon: hackathon, refreshCurrentHackathon } =
+    useHackathonData();
+  const { data: myTeam } = useMyTeam(slug);
+
+  const joinMutation = useJoinHackathon(slug);
+  const leaveMutation = useLeaveHackathon(slug);
+
+  const isParticipant = user
+    ? !!hackathon?.isParticipant ||
+      (hackathon?.participants || []).some((p: any) => p.userId === user.id)
+    : false;
+
+  const handleJoin = async () => {
+    try {
+      await joinMutation.mutateAsync();
+      await refreshCurrentHackathon();
+      toast.success('Successfully joined the hackathon!');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to join hackathon');
+    }
+  };
+
+  const handleLeave = async () => {
+    try {
+      await leaveMutation.mutateAsync();
+      toast.success('You have left the hackathon');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to leave hackathon');
+    }
+  };
+
+  const handleTabChange = (tab: string) => {
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set('tab', tab);
+    router.push(`?${searchParams.toString()}`);
+
+    const tabsElement = document.getElementById('hackathon-tabs');
+    if (tabsElement) {
+      tabsElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  const isRegistrationClosed =
+    hackathon?.registrationOpen === false ||
+    (hackathon?.registrationDeadline &&
+      new Date(hackathon.registrationDeadline) < new Date()) ||
+    ['JUDGING', 'COMPLETED', 'ARCHIVED', 'CANCELLED'].includes(
+      hackathon?.status || ''
+    );
+
+  const isIndividualOnly = hackathon?.participantType === 'INDIVIDUAL';
+
+  return (
+    <div className='flex w-full flex-col gap-3 md:w-auto md:flex-row md:items-center'>
+      {!isParticipant ? (
+        <BoundlessButton
+          className='s d h-12 w-full rounded-xl bg-[#A7F950] px-8 font-bold text-black hover:bg-[#A7F950]/90 disabled:bg-white/5 disabled:text-white/20 md:w-auto'
+          icon={!isRegistrationClosed && <IconUserPlus size={20} />}
+          onClick={handleJoin}
+          loading={joinMutation.isPending}
+          disabled={isRegistrationClosed}
+        >
+          {isRegistrationClosed ? 'REGISTRATION CLOSED' : 'JOIN HACKATHON'}
+        </BoundlessButton>
+      ) : (
+        <div className='flex w-full items-center gap-2 md:w-auto'>
+          <BoundlessButton
+            variant='outline'
+            className='h-12 flex-1 rounded-xl border-[#A7F950]/20 bg-[#232B20]/40 px-8 font-black text-[#A7F950] md:flex-none'
+            disabled
+          >
+            REGISTERED
+          </BoundlessButton>
+          <BoundlessButton
+            variant='outline'
+            size='icon'
+            className='h-12 w-12 shrink-0 rounded-xl border-red-500/20 bg-red-500/5 text-red-500 hover:border-red-500/30 hover:bg-red-500/10'
+            onClick={handleLeave}
+            loading={leaveMutation.isPending}
+            title='Leave Hackathon'
+          >
+            <IconLogout size={20} />
+          </BoundlessButton>
+        </div>
+      )}
+
+      <div className='flex w-full gap-3 md:w-auto'>
+        {!isIndividualOnly && (
+          <BoundlessButton
+            variant='outline'
+            fullWidth
+            className='h-12 flex-1 rounded-xl border-white/10 bg-white/5 px-6 font-black transition-all hover:border-white/20 hover:bg-white/10'
+            onClick={() => handleTabChange('team-formation')}
+            icon={<IconUsers size={20} />}
+          >
+            {myTeam ? 'MY TEAM' : 'FIND TEAM'}
+          </BoundlessButton>
+        )}
+
+        <SharePopover title={hackathon?.name} className='relative shrink-0' />
+      </div>
+    </div>
+  );
+};
+
+export default ActionButtons;

app/(landing)/hackathons/[slug]/components/header/Logo.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Image from 'next/image';
+
+const Logo = ({ logo, title }: { logo: string; title: string }) => {
+  return (
+    <div className='flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-[#111111]'>
+      {logo ? (
+        <Image
+          src={logo}
+          alt={title || 'Logo'}
+          width={80}
+          height={80}
+          className='h-full w-full object-cover'
+        />
+      ) : null}
+    </div>
+  );
+};
+
+export default Logo;