fix(hackathons): always open submissions in a new tab (#568)

* fix(hackathons): single-column teams tab and primary-colored pager

Revert the teams tab grid to a single column and rework the shared
Pagination component to match the icon-chevron layout used by the
organizer submissions and participants pages, styled with the primary
color.

* feat(submissions): link submission card avatars to profile pages

Wrap the individual avatar on SubmissionCard in a profile link and
forward team-member usernames to GroupAvatar so each clustered avatar
opens that user's profile in a new tab.

* fix(hackathons): always open submissions in a new tab

Across the hackathon, organizer, judge, and profile surfaces, clicking
a submission now opens the project page in a new tab so reviewers and
participants do not lose their list/queue context. Switched the
remaining anchor tags to next/link Link components.

Author: Benjtalkshow

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

@@ -92,7 +92,11 @@ export default function MySubmissionPanel() {
     status !== 'WITHDRAWN';
 
   const handleView = () => {
-    router.push(`/projects/${submission.id}?type=submission`);
+    window.open(
+      `/projects/${submission.id}?type=submission`,
+      '_blank',
+      'noopener,noreferrer'
+    );
   };
 
   const handleEdit = () => {

app/(landing)/hackathons/[slug]/components/tabs/contents/submissions/SubmissionCard.tsx

@@ -194,15 +194,15 @@ const SubmissionCard = ({ submission }: SubmissionCardProps) => {
               </>
             )}
 
-            <a href={projectUrl} target='_blank' rel='noopener noreferrer'>
+            <Link href={projectUrl} target='_blank' rel='noopener noreferrer'>
               <BoundlessButton
                 variant='outline'
                 size='sm'
                 className='hover:bg-primary h-9 rounded-xl border-white/5 bg-white/5 px-4 text-xs font-bold transition-all hover:text-black'
               >
                 View Project
               </BoundlessButton>
-            </a>
+            </Link>
           </div>
         </div>
       </div>

app/(landing)/hackathons/[slug]/components/tabs/contents/winners/GeneralWinnerCard.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { HackathonWinner } from '@/lib/api/hackathons';
 import { SubmissionCardProps } from '@/types/hackathon';
@@ -14,7 +15,7 @@ export const GeneralWinnerCard = ({
   const projectUrl = `/projects/${winner.submissionId}?type=submission`;
 
   return (
-    <a
+    <Link
       href={projectUrl}
       target='_blank'
       rel='noopener noreferrer'
@@ -35,6 +36,6 @@ export const GeneralWinnerCard = ({
       </div>
 
       <div className='text-primary text-xs font-bold'>{winner.prize}</div>
-    </a>
+    </Link>
   );
 };

app/(landing)/hackathons/[slug]/components/tabs/contents/winners/PodiumWinnerCard.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { HackathonWinner } from '@/lib/api/hackathons';
 import { Trophy } from 'lucide-react';
@@ -53,15 +54,15 @@ export const PodiumWinnerCard = ({
           </div>
         </div>
 
-        <a href={projectUrl} target='_blank' rel='noopener noreferrer'>
+        <Link href={projectUrl} target='_blank' rel='noopener noreferrer'>
           <BoundlessButton
             variant='outline'
             size='sm'
             className='hover:bg-primary h-8 rounded-lg border-white/5 bg-white/5 px-3 text-[10px] font-bold transition-all hover:text-black'
           >
             View Project
           </BoundlessButton>
-        </a>
+        </Link>
       </div>
     </div>
   );

app/(landing)/hackathons/[slug]/components/tabs/contents/winners/TopWinnerCard.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { HackathonWinner } from '@/lib/api/hackathons';
 import { Trophy } from 'lucide-react';
@@ -79,15 +80,15 @@ export const TopWinnerCard = ({ winner, submission }: TopWinnerCardProps) => {
               </div>
             </div>
 
-            <a href={projectUrl} target='_blank' rel='noopener noreferrer'>
+            <Link href={projectUrl} target='_blank' rel='noopener noreferrer'>
               <BoundlessButton
                 variant='outline'
                 size='sm'
                 className='hover:bg-primary h-9 rounded-xl border-white/5 bg-white/5 px-4 text-xs font-bold transition-all hover:text-black'
               >
                 View Project
               </BoundlessButton>
-            </a>
+            </Link>
           </div>
         </div>
       </div>

app/judge/[hackathonId]/submissions/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
+import { useParams } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 import {
   CheckCircle2,
@@ -29,7 +29,6 @@ export default function JudgeSubmissionsPage() {
 
 function SubmissionsList() {
   const params = useParams<{ hackathonId: string }>();
-  const router = useRouter();
   const hackathonId = params?.hackathonId ?? '';
 
   const [filter, setFilter] = useState<Filter>('all');
@@ -88,13 +87,17 @@ function SubmissionsList() {
       } else if (e.key === 'Enter') {
         const s = visible[focusIdx];
         if (s) {
-          router.push(`/judge/${hackathonId}/submissions/${s.submission.id}`);
+          window.open(
+            `/judge/${hackathonId}/submissions/${s.submission.id}`,
+            '_blank',
+            'noopener,noreferrer'
+          );
         }
       }
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [visible, focusIdx, router, hackathonId]);
+  }, [visible, focusIdx, hackathonId]);
 
   return (
     <div className='space-y-5'>
@@ -277,6 +280,8 @@ function Row({
   return (
     <Link
       href={`/judge/${hackathonId}/submissions/${submission.submission.id}`}
+      target='_blank'
+      rel='noopener noreferrer'
       onMouseEnter={onHover}
       className={cn(
         'group flex items-center gap-3 rounded-xl border bg-[#101010] px-4 py-3 transition-all',

app/me/hackathons/submissions/submission-components.tsx

@@ -16,6 +16,7 @@ import {
 import { Separator } from '@/components/ui/separator';
 import { TableCell, TableRow as ShadcnTableRow } from '@/components/ui/table';
 import Image from 'next/image';
+import Link from 'next/link';
 import { format } from 'date-fns';
 import React, { useState } from 'react';
 
@@ -206,7 +207,7 @@ export function SubmissionsSheetContent({
         </div>
         <div className='flex items-center gap-3'>
           <StatusBadge status={submission.status} />
-          <a
+          <Link
             href={viewUrl}
             target='_blank'
             rel='noopener noreferrer'
@@ -216,7 +217,7 @@ export function SubmissionsSheetContent({
           >
             <ExternalLink className='h-3.5 w-3.5' />
             View Page
-          </a>
+          </Link>
         </div>
       </div>
 
@@ -463,7 +464,7 @@ export function TableRow({
               {submission.projectName}
             </span>
             {/* Always in DOM — fade via opacity so no layout shift */}
-            <a
+            <Link
               href={viewUrl}
               target='_blank'
               rel='noopener noreferrer'
@@ -477,7 +478,7 @@ export function TableRow({
               aria-label={`Open ${submission.projectName} in new tab`}
             >
               <ExternalLink className='h-3.5 w-3.5' />
-            </a>
+            </Link>
           </div>
         </div>
       </TableCell>

components/hackathons/winners/WinnersTab.tsx

@@ -200,7 +200,12 @@ const TrackWinnerCard = ({
       </div>
 
       {projectUrl ? (
-        <Link href={projectUrl}>
+        <Link
+          href={projectUrl}
+          target='_blank'
+          rel='noopener noreferrer'
+          className='block no-underline'
+        >
           <div className='flex items-center justify-between rounded-lg border border-gray-900 bg-black/20 p-2 transition-colors hover:bg-black/40'>
             <p className='line-clamp-1 text-sm font-medium text-white'>
               {trackWinner.projectName}

components/organization/cards/JudgingParticipant.tsx

@@ -258,6 +258,8 @@ const JudgingParticipant = ({
                   <span className='h-1 w-1 rounded-full bg-gray-700' />
                   <Link
                     href={`/projects/${submissionData.id}?type=submission`}
+                    target='_blank'
+                    rel='noopener noreferrer'
                     className='flex items-center gap-1 transition-colors hover:text-white'
                   >
                     View Details <ExternalLink className='h-3 w-3' />
@@ -433,6 +435,8 @@ const JudgingParticipant = ({
             )}
             <Link
               href={`/projects/${submissionData.id}?type=submission`}
+              target='_blank'
+              rel='noopener noreferrer'
               className='flex h-7 w-7 items-center justify-center rounded-md border border-gray-800 text-gray-500 hover:bg-white/5 hover:text-white'
             >
               <ExternalLink className='h-3 w-3' />

components/organization/hackathons/submissions/SubmissionsList.tsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
 import {
   Users,
   User,
@@ -56,7 +55,6 @@ export function SubmissionsList({
   onSelectionChange,
   hackathon,
 }: SubmissionsListProps) {
-  const router = useRouter();
   const [reviewingId, setReviewingId] = useState<string | null>(null);
   const [disqualifyingId, setDisqualifyingId] = useState<string | null>(null);
   const [isDisqualifying, setIsDisqualifying] = useState(false);
@@ -155,7 +153,11 @@ export function SubmissionsList({
   };
 
   const handleSubmissionClick = (submissionId: string) => {
-    router.push(`/projects/${submissionId}?type=submission`);
+    window.open(
+      `/projects/${submissionId}?type=submission`,
+      '_blank',
+      'noopener,noreferrer'
+    );
   };
 
   if (submissions.length === 0 && !loading) {