Feat/submission visibility hidden until results (#566)

* feat(hackathons): add "hidden until results" submission visibility mode

Surfaces the new HIDDEN_UNTIL_RESULTS option (added in the nestjs PR) in
the organizer settings tab. Reorders the three visibility options so the
recommended "Shortlisted only" leads, the new "Hidden until results are
announced" sits in the middle, and "All submissions" comes last. Rewrites
the copy on the "All submissions" choice that incorrectly claimed
disqualified projects would be shown -- they never were on the backend,
and Phase 2 makes that an explicit guarantee. Aligns the form's default
and API-fallback value with the backend default (ACCEPTED_SHORTLISTED,
not ALL) so organizers don't see a misleading initial selection.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(hackathons): track-based prize structure, submission polish, tracks UI

Wires the frontend for the new track-based prize flow:

- New TracksSettingsTab with full CRUD: name/slug/description/eligibility/
  prompt/customQuestions/requiredArtifacts; per-row bulk-opt-in action with
  confirmation dialog for retrofitting existing submissions
- RewardsTab gains a 3-card prize structure picker, per-tier kind toggle and
  track dropdown, amber "tracks unbound" banner, and an inline Manage Tracks
  dialog embedding the settings table
- SubmissionForm: track picker + per-track answers (prompt / custom
  questions / required artifacts), tagline, builtWith chips, screenshots,
  license, code attestation, with soft compliance gate for already-submitted
  submissions. trackIds hydrate from trackEntries on edit so bulk-opted-in
  submitters don't strip themselves out
- SubmissionDetailModal renders tagline, screenshots, built-with, license
  badge, and per-track answers
- Public hackathon page: Overview splits prizes into Overall/Track sections;
  sidebar tier list shows TRACK prefix and looks up track names; Winners tab
  gets a Track Winners section with per-track cards
- API client: lib/api/hackathons/tracks.ts with listTracks /
  listOrganizerTracks / createTrack / updateTrack / deleteTrack /
  bulkOptInAllSubmissions, plus types for HackathonTrack,
  TrackCustomQuestion, TrackRequiredArtifact, TrackAnswer,
  SubmissionTrackEntry, BulkOptInResult
- Hackathon provider/hooks expose trackWinners and per-track entries

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(submissions): tighten Zod schema + surface backend debug info

- Add max constraints that previously only existed on the backend DTO so
  validation fires inline (projectName 100, description 5000, URL 500).
- ApiErrorField gains an optional `debug` field that the backend Prisma
  filter populates outside production.
- useSubmission's error formatter prefers `debug` over the generic field
  message when present, so toasts show the real Prisma reason behind
  "Data validation failed" instead of a blank "validation: …" line.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(submit-page): hydrate Phase A fields + stop wiping user input on re-render

The submit page mapped `initialData` inline on every render, which (a)
recreated the object reference on every render so the form's reset
effect fired continuously and wiped values the user was typing, and (b)
dropped the Phase A fields entirely (tagline, builtWith, screenshots,
license, codeAttestedAt) plus trackEntries. The combined effect was the
documented symptom — only logo and videoUrl survived the save because
those round-tripped through the type-narrowed object literal, while
tagline / builtWith / license kept appearing to "switch to empty".

- Memoize `initialData` against `mySubmission` so the reference only
  changes when the underlying submission actually changes.
- Pass through Phase A fields and trackEntries so the form can hydrate
  the saved values, and so a follow-up save doesn't write back empties.
- Widen SubmissionFormContent's `initialData` prop to accept the raw
  server-side extras (trackEntries, codeAttestedAt) that the form
  already consumes via cast — keeps the parent's hydration explicit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 0xdevcollins

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { use, useEffect, useState } from 'react';
+import { use, useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useHackathon } from '@/hooks/hackathon/use-hackathon-queries';
 import { useAuthStatus } from '@/hooks/use-auth';
@@ -94,6 +94,40 @@ export default function SubmitProjectPage({
     router.push(`/hackathons/${hackathonSlug}?tab=submission`);
   };
 
+  // Stable initialData reference so the form doesn't re-reset (and wipe
+  // the user's typed-but-unsaved input) on every parent re-render. The
+  // form's reset effect depends on this object identity, so it MUST only
+  // change when the underlying submission actually changes.
+  //
+  // We also pass through the Phase A polish fields (tagline, builtWith,
+  // screenshots, license, codeAttestedAt) and trackEntries — if these
+  // are missing, the form initialises them to empty and any save then
+  // clobbers the server values with empties.
+  const initialData = useMemo(() => {
+    if (!mySubmission) return undefined;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const s = mySubmission as any;
+    return {
+      projectName: mySubmission.projectName,
+      category: mySubmission.category,
+      description: mySubmission.description,
+      logo: mySubmission.logo,
+      banner: mySubmission.banner,
+      videoUrl: mySubmission.videoUrl,
+      introduction: mySubmission.introduction,
+      links: mySubmission.links,
+      participationType: s.participationType,
+      teamName: s.teamName,
+      teamMembers: s.teamMembers,
+      tagline: s.tagline,
+      builtWith: s.builtWith,
+      screenshots: s.screenshots,
+      license: s.license,
+      codeAttestedAt: s.codeAttestedAt,
+      trackEntries: s.trackEntries,
+    };
+  }, [mySubmission]);
+
   const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
 
   useEffect(() => {
@@ -149,24 +183,7 @@ export default function SubmitProjectPage({
               hackathonSlugOrId={hackathonId}
               organizationId={orgId}
               submissionId={mySubmission?.id}
-              initialData={
-                mySubmission
-                  ? {
-                      projectName: mySubmission.projectName,
-                      category: mySubmission.category,
-                      description: mySubmission.description,
-                      logo: mySubmission.logo,
-                      banner: mySubmission.banner,
-                      videoUrl: mySubmission.videoUrl,
-                      introduction: mySubmission.introduction,
-                      links: mySubmission.links,
-                      participationType: (mySubmission as any)
-                        .participationType,
-                      teamName: (mySubmission as any).teamName,
-                      teamMembers: (mySubmission as any).teamMembers,
-                    }
-                  : undefined
-              }
+              initialData={initialData}
               onSuccess={handleSuccess}
               onClose={handleClose}
             />

components/hackathons/submissions/SubmissionForm.tsx

@@ -95,9 +95,15 @@ const LICENSE_OPTIONS = [
 type License = (typeof LICENSE_OPTIONS)[number];
 
 const baseSubmissionSchema = z.object({
-  projectName: z.string().min(3, 'Project name must be at least 3 characters'),
+  projectName: z
+    .string()
+    .min(3, 'Project name must be at least 3 characters')
+    .max(100, 'Project name cannot exceed 100 characters'),
   category: z.string().min(1, 'Please select a category'),
-  description: z.string().min(50, 'Description must be at least 50 characters'),
+  description: z
+    .string()
+    .min(50, 'Description must be at least 50 characters')
+    .max(5000, 'Description cannot exceed 5000 characters'),
   logo: z.string().optional(),
   banner: z.string().optional(),
   videoUrl: z
@@ -110,7 +116,13 @@ const baseSubmissionSchema = z.object({
   links: z.array(
     z.object({
       type: z.string(),
-      url: z.union([z.string().url('Please enter a valid URL'), z.literal('')]),
+      url: z.union([
+        z
+          .string()
+          .url('Please enter a valid URL')
+          .max(500, 'URL cannot exceed 500 characters'),
+        z.literal(''),
+      ]),
     })
   ),
   participationType: z.enum(['INDIVIDUAL', 'TEAM']),
@@ -173,7 +185,23 @@ type SubmissionFormDataLocal = z.infer<typeof baseSubmissionSchema>;
 interface SubmissionFormContentProps {
   hackathonSlugOrId: string;
   organizationId?: string;
-  initialData?: Partial<SubmissionFormDataLocal>;
+  /**
+   * Pre-populates the form when editing an existing submission. Accepts
+   * the raw submission shape from the API so server-only fields like
+   * trackEntries and codeAttestedAt can be hydrated alongside the Zod-
+   * typed form fields (which the form reads via a typed cast).
+   */
+  initialData?: Partial<SubmissionFormDataLocal> & {
+    trackEntries?: Array<{
+      trackId: string;
+      trackAnswers?: {
+        promptAnswer?: string;
+        customAnswers?: Record<string, string>;
+        artifacts?: Record<string, string>;
+      };
+    }>;
+    codeAttestedAt?: string | null;
+  };
   submissionId?: string;
   onSuccess?: () => void;
   onClose?: () => void;

hooks/hackathon/use-submission.ts

@@ -17,12 +17,16 @@ import { reportError } from '@/lib/error-reporting';
 function getApiErrorMessage(err: unknown, fallback: string): string {
   const apiErr = err as ApiError | undefined;
   if (apiErr && typeof apiErr.message === 'string' && apiErr.message) {
-    const firstField =
-      Array.isArray(apiErr.errors) && apiErr.errors.length > 0
-        ? apiErr.errors[0].message
-        : null;
-    if (firstField && firstField !== apiErr.message) {
-      return `${apiErr.message}: ${firstField}`;
+    const first = Array.isArray(apiErr.errors) ? apiErr.errors[0] : undefined;
+    const fieldMsg = first?.message;
+    // `debug` is only present outside production; surfaces the real Prisma
+    // reason when the generic "Data validation failed" fires.
+    const debug = first?.debug;
+    if (debug && debug !== apiErr.message) {
+      return `${apiErr.message}: ${debug}`;
+    }
+    if (fieldMsg && fieldMsg !== apiErr.message) {
+      return `${apiErr.message}: ${fieldMsg}`;
     }
     return apiErr.message;
   }

lib/api/api.ts

@@ -26,6 +26,8 @@ export interface ApiResponse<T = unknown> {
 export interface ApiErrorField {
   field?: string;
   message: string;
+  /** Populated by the backend Prisma filter outside production. */
+  debug?: string;
 }
 
 export interface ApiError {