fix(submissions): unbreak submission detail page + publish hackathon recap (#586)

* fix(submissions): wire submission entity type through votes, comments, and rank chip

The submission detail page (/projects/[slug]?type=submission) was
treating submissions as crowdfunding projects, which broke every
interactive surface for hackathon entries:

- Sidebar getVoteCounts and the voters tab's getProjectVotes were
  hardcoded to CROWDFUNDING_CAMPAIGN, so the lookup failed with
  "Failed to load voting data" and disabled the buttons.
- createVote on the voters tab was also hardcoded, so even a click
  through hit Prisma's "Invalid reference to related record" (P2025)
  for non-existent campaign rows.
- ProjectComments used CommentEntityType.PROJECT, so comments and
  replies posted against a non-existent project record.
- The Follow button hardcoded entityType='PROJECT' with the
  submission's id, leading to "Failed to update follow status". The
  follow EntityType enum has no HACKATHON_SUBMISSION value, so the
  button is hidden on submission pages.
- The status badge displayed raw enum values like "SHORTLISTED" and
  there was no signal that a submission was a winner.

All vote/comment surfaces now derive the entity type from the URL,
matching the backend's HACKATHON_SUBMISSION enum on both votes and
comments. The page mapper surfaces submissionRank and a friendly
submissionStatus on the project, and the sidebar header renders a
"Winner" / "Rank #N" chip next to the existing status badge.

* fix(blog): use object-cover so card and detail covers fill the frame

The earlier switch back to object-contain left letterbox bands around
banners that aren't an exact 2:1 ratio on both the BlogCard grid and
the post-details hero. With properly-sized cover banners, object-cover
fills the frame without visible cropping. Authors should size cover
images for a 2:1 ratio on the card and the responsive heights on the
details page.

* feat(blog): publish Boundless x Trustless Work hackathon winners recap

Adds the post-hackathon recap announcing the three main winners
(Conductor, Crypt, GoPadi), the five honorable mentions, and the
Showcase recognitions from the May 16 finale. Featured on the blog
index.

* chore(deps): npm audit fix to clear js-cookie high-severity advisory

GHSA-qjx8-664m-686j (js-cookie per-instance prototype hijack in
assign()) was newly flagged as high severity. The pre-push hook runs
`npm audit --audit-level=high` and refused to push any branch until
this was patched. Lockfile-only update, no package.json changes,
semver-compatible. Bundled here because the gate was blocking the
parent PR; reviewers can treat this as an unrelated chore commit.

Author: Benjtalkshow

app/(landing)/projects/[slug]/page.tsx

@@ -273,6 +273,29 @@ function mapSubmissionToCrowdfunding(
 
   const projectId = subData.id || subData._id || '';
 
+  // Map raw submission status to a friendly display label so the sidebar
+  // badge reads "Shortlisted" instead of "SHORTLISTED". The raw value is
+  // also preserved on submissionStatus so anything that needs the original
+  // enum value can still get it.
+  const submissionRank: number | null =
+    typeof subData.rank === 'number' ? subData.rank : null;
+  const rawSubmissionStatus: string =
+    typeof subData.status === 'string' ? subData.status : '';
+  const friendlySubmissionStatus = (() => {
+    switch (rawSubmissionStatus.toUpperCase()) {
+      case 'SUBMITTED':
+        return 'Submitted';
+      case 'SHORTLISTED':
+        return 'Shortlisted';
+      case 'DISQUALIFIED':
+        return 'Disqualified';
+      case 'WITHDRAWN':
+        return 'Withdrawn';
+      default:
+        return rawSubmissionStatus || 'pending';
+    }
+  })();
+
   // Find demo video in links if not provided directly
   let demoVideoUrl = subData.videoUrl || '';
   if (!demoVideoUrl && socialLinks.length > 0) {
@@ -320,7 +343,9 @@ function mapSubmissionToCrowdfunding(
       vision: null,
       details: null,
       category: subData.category || 'General',
-      status: subData.status || 'pending',
+      status: friendlySubmissionStatus,
+      submissionRank,
+      submissionStatus: rawSubmissionStatus || null,
       creatorId: subData.participantId || subData.userId || '',
       organizationId: subData.organizationId || null,
       teamMembers: teamMembers,

components/landing-page/blog/BlogCard.tsx

@@ -24,7 +24,7 @@ const BlogCard = ({ post, onCardClick }: BlogCardProps) => {
             src={post.coverImage}
             alt={post.title}
             fill
-            className='object-contain transition-transform duration-500 group-hover:scale-105'
+            className='object-cover transition-transform duration-500 group-hover:scale-105'
             sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
           />
           {/* Gradient Overlay */}

components/landing-page/blog/BlogPostDetails.tsx

@@ -140,7 +140,7 @@ const BlogPostDetails: React.FC<BlogPostDetailsProps> = ({
                   src={post.coverImage}
                   alt={post.title}
                   fill
-                  className='rounded-lg object-contain'
+                  className='rounded-lg object-cover'
                   priority
                   sizes='(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw'
                 />

components/project-details/comment-section/project-comments.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { useOptionalAuth } from '@/hooks/use-auth';
 import { useCommentSystem } from '@/hooks/use-comment-system';
 import { useCommentRealtime } from '@/hooks/use-comment-realtime';
@@ -17,6 +18,11 @@ interface ProjectCommentsProps {
 
 export function ProjectComments({ projectId }: ProjectCommentsProps) {
   const { user } = useOptionalAuth();
+  const searchParams = useSearchParams();
+  const entityType =
+    searchParams.get('type') === 'submission'
+      ? CommentEntityType.HACKATHON_SUBMISSION
+      : CommentEntityType.PROJECT;
   const [sortBy, setSortBy] = useState<
     'createdAt' | 'updatedAt' | 'totalReactions'
   >('createdAt');
@@ -28,7 +34,7 @@ export function ProjectComments({ projectId }: ProjectCommentsProps) {
 
   // Initialize the comment system for this project
   const commentSystem = useCommentSystem({
-    entityType: CommentEntityType.PROJECT,
+    entityType,
     entityId: projectId,
     page: 1,
     limit: 20,
@@ -38,7 +44,7 @@ export function ProjectComments({ projectId }: ProjectCommentsProps) {
   // Real-time updates
   useCommentRealtime(
     {
-      entityType: CommentEntityType.PROJECT,
+      entityType,
       entityId: projectId,
       userId: currentUserId,
       enabled: true,
@@ -71,7 +77,7 @@ export function ProjectComments({ projectId }: ProjectCommentsProps) {
     try {
       await commentSystem.createComment.createComment({
         content,
-        entityType: CommentEntityType.PROJECT,
+        entityType,
         entityId: projectId,
       });
     } catch (error) {
@@ -84,7 +90,7 @@ export function ProjectComments({ projectId }: ProjectCommentsProps) {
       await commentSystem.createComment.createComment({
         content,
         parentId: parentCommentId,
-        entityType: CommentEntityType.PROJECT,
+        entityType,
         entityId: projectId,
       } as any);
     } catch (error) {

components/project-details/project-sidebar/ProjectSidebarActions.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import {
   ArrowUp,
   DollarSign,
@@ -24,6 +25,8 @@ export function ProjectSidebarActions({
   crowdfund,
 }: ProjectSidebarActionsProps) {
   const [isSharePopupOpen, setIsSharePopupOpen] = useState(false);
+  const searchParams = useSearchParams();
+  const isSubmission = searchParams.get('type') === 'submission';
 
   const handleShareClick = () => {
     setIsSharePopupOpen(true);
@@ -109,13 +112,15 @@ export function ProjectSidebarActions({
         </BoundlessButton>
       )}
 
-      <div className='flex-1'>
-        <FollowButton
-          entityType='PROJECT'
-          entityId={project.id}
-          className='h-12 w-full'
-        />
-      </div>
+      {!isSubmission && (
+        <div className='flex-1'>
+          <FollowButton
+            entityType='PROJECT'
+            entityId={project.id}
+            className='h-12 w-full'
+          />
+        </div>
+      )}
 
       <div className='relative'>
         <BoundlessButton

components/project-details/project-sidebar/ProjectSidebarHeader.tsx

@@ -1,13 +1,14 @@
 'use client';
 
-import { Calendar } from 'lucide-react';
+import { Calendar, Trophy } from 'lucide-react';
 import Image from 'next/image';
 import { ProjectSidebarHeaderProps } from './types';
 
 export function ProjectSidebarHeader({
   project,
   projectStatus,
 }: ProjectSidebarHeaderProps) {
+  const submissionRank = project.submissionRank ?? null;
   const getStatusStyles = () => {
     switch (projectStatus) {
       case 'CAMPAIGNING':
@@ -21,11 +22,16 @@ export function ProjectSidebarHeader({
       case 'idea':
         return 'bg-warning-75 border-warning-600 text-warning-600';
       case 'Validated':
+      case 'Shortlisted':
         return 'bg-success-75 border-success-600 text-success-600';
       case 'Rejected':
+      case 'Disqualified':
         return 'bg-red-900/30 border-red-600 text-red-400';
+      case 'Withdrawn':
+        return 'bg-gray-800/60 border-gray-700 text-gray-300';
       case 'pending':
       case 'SUBMITTED':
+      case 'Submitted':
         return 'bg-gray-800 border-gray-700 text-white';
       default:
         return 'text-white border-gray-700';
@@ -60,6 +66,14 @@ export function ProjectSidebarHeader({
             >
               {projectStatus}
             </div>
+            {submissionRank != null && (
+              <div className='flex items-center gap-1 rounded-lg border border-yellow-500/40 bg-yellow-500/10 px-2.5 py-1 text-xs font-semibold text-yellow-400'>
+                <Trophy className='h-3.5 w-3.5' />
+                <span>
+                  {submissionRank === 1 ? 'Winner' : `Rank #${submissionRank}`}
+                </span>
+              </div>
+            )}
           </div>
         </div>
       </div>

components/project-details/project-sidebar/index.tsx

@@ -45,7 +45,7 @@ export function ProjectSidebar({
   // Real-time vote updates
   useVoteRealtime(
     {
-      entityType: VoteEntityType.CROWDFUNDING_CAMPAIGN,
+      entityType,
       entityId: projectId || '',
       enabled: !!projectId,
     },
@@ -82,10 +82,7 @@ export function ProjectSidebar({
 
     const fetchVoteCounts = async () => {
       try {
-        const response: any = await getVoteCounts(
-          projectId,
-          VoteEntityType.CROWDFUNDING_CAMPAIGN
-        );
+        const response: any = await getVoteCounts(projectId, entityType);
         // The API returns { success: true, message: '...', data: { ... } }
         setVoteCounts(response.data || response);
       } catch {
@@ -94,7 +91,7 @@ export function ProjectSidebar({
     };
 
     fetchVoteCounts();
-  }, [projectId]);
+  }, [projectId, entityType]);
 
   const handleVote = async (value: 1 | -1) => {
     if (isVoting) return;

components/project-details/project-sidebar/types.ts

@@ -60,4 +60,10 @@ export type ProjectStatus =
   | 'Funding'
   | 'idea'
   | 'pending'
-  | 'SUBMITTED';
+  | 'SUBMITTED'
+  // Hackathon-submission display labels emitted by the submission mapper
+  // in app/(landing)/projects/[slug]/page.tsx.
+  | 'Submitted'
+  | 'Shortlisted'
+  | 'Disqualified'
+  | 'Withdrawn';

components/project-details/project-voters/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
 import Empty from './Empty';
 import Image from 'next/image';
 import { CrowdfundingProject, Crowdfunding } from '@/features/projects/types';
@@ -40,6 +41,11 @@ interface ProjectVotersProps {
 
 const ProjectVoters = ({ project, crowdfund }: ProjectVotersProps) => {
   const { user } = useOptionalAuth();
+  const searchParams = useSearchParams();
+  const isSubmission = searchParams.get('type') === 'submission';
+  const entityType = isSubmission
+    ? VoteEntityType.HACKATHON_SUBMISSION
+    : VoteEntityType.CROWDFUNDING_CAMPAIGN;
   const [voteStats, setVoteStats] = useState<VoteStats>({
     upvotes: 0,
     downvotes: 0,
@@ -63,7 +69,7 @@ const ProjectVoters = ({ project, crowdfund }: ProjectVotersProps) => {
 
   useVoteRealtime(
     {
-      entityType: VoteEntityType.CROWDFUNDING_CAMPAIGN,
+      entityType,
       entityId: projectId || '',
       enabled: !!projectId,
     },
@@ -116,7 +122,7 @@ const ProjectVoters = ({ project, crowdfund }: ProjectVotersProps) => {
         const response = await getProjectVotes(projectId, {
           limit: 20,
           offset: 0,
-          entityType: VoteEntityType.CROWDFUNDING_CAMPAIGN,
+          entityType,
           includeVoters: true,
         });
 
@@ -137,10 +143,7 @@ const ProjectVoters = ({ project, crowdfund }: ProjectVotersProps) => {
           });
           setVoters(response.data.voters);
         } else {
-          const countsResponse = await apiGetVoteCounts(
-            projectId,
-            VoteEntityType.CROWDFUNDING_CAMPAIGN
-          );
+          const countsResponse = await apiGetVoteCounts(projectId, entityType);
           setVoteStats({
             upvotes: countsResponse.upvotes,
             downvotes: countsResponse.downvotes,
@@ -160,7 +163,7 @@ const ProjectVoters = ({ project, crowdfund }: ProjectVotersProps) => {
     };
 
     fetchInitialVoteData();
-  }, [projectId]);
+  }, [projectId, entityType]);
 
   const handleVote = async (voteType: VoteType) => {
     if (!projectId || voting) return;
@@ -171,7 +174,7 @@ const ProjectVoters = ({ project, crowdfund }: ProjectVotersProps) => {
     try {
       await createVote({
         projectId,
-        entityType: VoteEntityType.CROWDFUNDING_CAMPAIGN,
+        entityType,
         voteType,
       });