feat: applicant dashboard — team cards, editable description, feedback visibility

- Replace flat team names list with proper cards showing roles and badges
- Hide TeamMembers from metadata display, remove Withdraw from header
- Add inline-editable project description (admin-toggleable setting)
- Move applicant feedback visibility from per-round config to admin settings
- Support EVALUATION, LIVE_FINAL, DELIBERATION round types in feedback
- Backwards-compatible: falls back to old per-round config if no settings exist
- Add observer team tab toggle and 10 new SystemSettings seed entries

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(applicant)/applicant/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { useSession } from 'next-auth/react'
 import Link from 'next/link'
 import type { Route } from 'next'
@@ -13,9 +14,8 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
-import { StatusTracker } from '@/components/shared/status-tracker'
+import { Textarea } from '@/components/ui/textarea'
 import { CompetitionTimelineSidebar } from '@/components/applicant/competition-timeline'
-import { WithdrawButton } from '@/components/applicant/withdraw-button'
 import { MentoringRequestCard } from '@/components/applicant/mentoring-request-card'
 import { AnimatedCard } from '@/components/shared/animated-container'
 import { ProjectLogoUpload } from '@/components/shared/project-logo-upload'
@@ -31,7 +31,12 @@ import {
   Star,
   AlertCircle,
   Pencil,
+  Loader2,
+  Check,
+  X,
+  UserCircle,
 } from 'lucide-react'
+import { toast } from 'sonner'
 
 const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive' | 'warning'> = {
   DRAFT: 'secondary',
@@ -44,6 +49,9 @@ const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destru
   REJECTED: 'destructive',
 }
 
+// Keys to hide from the metadata display (shown elsewhere or internal)
+const HIDDEN_METADATA_KEYS = new Set(['TeamMembers', 'teammembers', 'team_members'])
+
 export default function ApplicantDashboardPage() {
   const { data: session, status: sessionStatus } = useSession()
   const isAuthenticated = sessionStatus === 'authenticated'
@@ -65,6 +73,10 @@ export default function ApplicantDashboardPage() {
     enabled: isAuthenticated,
   })
 
+  const { data: flags } = trpc.settings.getFeatureFlags.useQuery(undefined, {
+    enabled: isAuthenticated,
+  })
+
   if (sessionStatus === 'loading' || (isAuthenticated && isLoading)) {
     return (
       <div className="space-y-6">
@@ -118,10 +130,11 @@ export default function ApplicantDashboardPage() {
   const programYear = project.program?.year
   const programName = project.program?.name
   const totalEvaluations = evaluations?.reduce((sum, r) => sum + r.evaluationCount, 0) ?? 0
+  const canEditDescription = flags?.applicantAllowDescriptionEdit && !isRejected
 
   return (
     <div className="space-y-6">
-      {/* Header */}
+      {/* Header — no withdraw button here */}
       <div className="flex items-start justify-between flex-wrap gap-4">
         <div className="flex items-center gap-4">
           {/* Project logo — clickable for any team member to change */}
@@ -163,9 +176,6 @@ export default function ApplicantDashboardPage() {
             </p>
           </div>
         </div>
-        {project.isTeamLead && currentStatus !== 'REJECTED' && (currentStatus as string) !== 'WINNER' && (
-          <WithdrawButton projectId={project.id} />
-        )}
       </div>
 
       <div className="grid gap-6 lg:grid-cols-3">
@@ -184,12 +194,19 @@ export default function ApplicantDashboardPage() {
                   <p>{project.teamName}</p>
                 </div>
               )}
-              {project.description && (
+              {/* Description — editable if admin allows */}
+              {project.description && !canEditDescription && (
                 <div>
                   <p className="text-sm font-medium text-muted-foreground">Description</p>
                   <p className="whitespace-pre-wrap">{project.description}</p>
                 </div>
               )}
+              {canEditDescription && (
+                <EditableDescription
+                  projectId={project.id}
+                  initialDescription={project.description || ''}
+                />
+              )}
               {project.tags && project.tags.length > 0 && (
                 <div>
                   <p className="text-sm font-medium text-muted-foreground mb-2">Tags</p>
@@ -203,22 +220,27 @@ export default function ApplicantDashboardPage() {
                 </div>
               )}
 
-              {/* Metadata */}
-              {project.metadataJson && Object.keys(project.metadataJson as Record<string, unknown>).length > 0 && (
-                <div className="border-t pt-4 mt-4">
-                  <p className="text-sm font-medium text-muted-foreground mb-3">Additional Information</p>
-                  <dl className="space-y-2">
-                    {Object.entries(project.metadataJson as Record<string, unknown>).map(([key, value]) => (
-                      <div key={key} className="flex justify-between">
-                        <dt className="text-sm text-muted-foreground capitalize">
-                          {key.replace(/_/g, ' ')}
-                        </dt>
-                        <dd className="text-sm font-medium">{String(value)}</dd>
-                      </div>
-                    ))}
-                  </dl>
-                </div>
-              )}
+              {/* Metadata — filter out team members (shown in sidebar) */}
+              {project.metadataJson && (() => {
+                const entries = Object.entries(project.metadataJson as Record<string, unknown>)
+                  .filter(([key]) => !HIDDEN_METADATA_KEYS.has(key))
+                if (entries.length === 0) return null
+                return (
+                  <div className="border-t pt-4 mt-4">
+                    <p className="text-sm font-medium text-muted-foreground mb-3">Additional Information</p>
+                    <dl className="space-y-2">
+                      {entries.map(([key, value]) => (
+                        <div key={key} className="flex justify-between gap-4">
+                          <dt className="text-sm text-muted-foreground capitalize shrink-0">
+                            {key.replace(/_/g, ' ')}
+                          </dt>
+                          <dd className="text-sm font-medium text-right">{String(value)}</dd>
+                        </div>
+                      ))}
+                    </dl>
+                  </div>
+                )
+              })()}
 
               {/* Meta info row */}
               <div className="flex flex-wrap gap-4 text-sm text-muted-foreground border-t pt-4 mt-4">
@@ -338,7 +360,7 @@ export default function ApplicantDashboardPage() {
 
         {/* Sidebar */}
         <div className="space-y-6">
-          {/* Competition timeline or status tracker */}
+          {/* Competition timeline */}
           <AnimatedCard index={3}>
           <Card>
             <CardHeader>
@@ -350,7 +372,7 @@ export default function ApplicantDashboardPage() {
           </Card>
           </AnimatedCard>
 
-          {/* Mentoring Request Card — show when there's an active MENTORING round */}
+          {/* Mentoring Request Card */}
           {project.isTeamLead && openRounds.filter((r) => r.roundType === 'MENTORING').map((mentoringRound) => (
             <AnimatedCard key={mentoringRound.id} index={4}>
               <MentoringRequestCard
@@ -378,17 +400,21 @@ export default function ApplicantDashboardPage() {
                     </Button>
                   </div>
                 </CardHeader>
-                <CardContent>
-                  <p className="text-sm text-muted-foreground">
-                    {totalEvaluations} evaluation{totalEvaluations !== 1 ? 's' : ''} available from{' '}
-                    {evaluations?.length ?? 0} round{(evaluations?.length ?? 0) !== 1 ? 's' : ''}.
-                  </p>
+                <CardContent className="space-y-2">
+                  {evaluations?.map((round) => (
+                    <div key={round.roundId} className="flex items-center justify-between text-sm rounded-lg border p-2.5">
+                      <span className="font-medium">{round.roundName}</span>
+                      <Badge variant="secondary" className="text-xs">
+                        {round.evaluationCount} review{round.evaluationCount !== 1 ? 's' : ''}
+                      </Badge>
+                    </div>
+                  ))}
                 </CardContent>
               </Card>
             </AnimatedCard>
           )}
 
-          {/* Team overview */}
+          {/* Team overview — proper cards */}
           <AnimatedCard index={5}>
           <Card>
             <CardHeader>
@@ -404,27 +430,25 @@ export default function ApplicantDashboardPage() {
                 </Button>
               </div>
             </CardHeader>
-            <CardContent className="space-y-3">
+            <CardContent className="space-y-2">
               {project.teamMembers.length > 0 ? (
                 project.teamMembers.slice(0, 5).map((member) => (
-                  <div key={member.id} className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
+                  <div key={member.id} className="flex items-center gap-3 rounded-lg border p-2.5">
+                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted shrink-0">
                       {member.role === 'LEAD' ? (
-                        <Crown className="h-4 w-4 text-yellow-500" />
+                        <Crown className="h-4 w-4 text-amber-500" />
                       ) : (
-                        <span className="text-xs font-medium">
-                          {member.user.name?.charAt(0).toUpperCase() || '?'}
-                        </span>
+                        <UserCircle className="h-4 w-4 text-muted-foreground" />
                       )}
                     </div>
                     <div className="flex-1 min-w-0">
                       <p className="text-sm font-medium truncate">
                         {member.user.name || member.user.email}
                       </p>
-                      <p className="text-xs text-muted-foreground">
-                        {member.role === 'LEAD' ? 'Team Lead' : member.role === 'ADVISOR' ? 'Advisor' : 'Member'}
-                      </p>
                     </div>
+                    <Badge variant="outline" className="shrink-0 text-[10px] px-1.5 py-0">
+                      {member.role === 'LEAD' ? 'Lead' : member.role === 'ADVISOR' ? 'Advisor' : 'Member'}
+                    </Badge>
                   </div>
                 ))
               ) : (
@@ -494,3 +518,69 @@ export default function ApplicantDashboardPage() {
     </div>
   )
 }
+
+function EditableDescription({ projectId, initialDescription }: { projectId: string; initialDescription: string }) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [description, setDescription] = useState(initialDescription)
+  const utils = trpc.useUtils()
+
+  const mutation = trpc.applicant.updateDescription.useMutation({
+    onSuccess: () => {
+      utils.applicant.getMyDashboard.invalidate()
+      setIsEditing(false)
+      toast.success('Description updated')
+    },
+    onError: (e) => toast.error(e.message),
+  })
+
+  const handleSave = () => {
+    mutation.mutate({ projectId, description })
+  }
+
+  const handleCancel = () => {
+    setDescription(initialDescription)
+    setIsEditing(false)
+  }
+
+  if (!isEditing) {
+    return (
+      <div>
+        <div className="flex items-center justify-between mb-1">
+          <p className="text-sm font-medium text-muted-foreground">Description</p>
+          <Button variant="ghost" size="sm" className="h-6 px-2 text-xs gap-1" onClick={() => setIsEditing(true)}>
+            <Pencil className="h-3 w-3" />
+            Edit
+          </Button>
+        </div>
+        <p className="whitespace-pre-wrap">{initialDescription || <span className="text-muted-foreground italic">No description yet. Click Edit to add one.</span>}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <p className="text-sm font-medium text-muted-foreground mb-1">Description</p>
+      <Textarea
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        rows={6}
+        className="mb-2"
+        disabled={mutation.isPending}
+      />
+      <div className="flex items-center gap-2 justify-end">
+        <Button variant="ghost" size="sm" onClick={handleCancel} disabled={mutation.isPending}>
+          <X className="h-3.5 w-3.5 mr-1" />
+          Cancel
+        </Button>
+        <Button size="sm" onClick={handleSave} disabled={mutation.isPending}>
+          {mutation.isPending ? (
+            <Loader2 className="h-3.5 w-3.5 mr-1 animate-spin" />
+          ) : (
+            <Check className="h-3.5 w-3.5 mr-1" />
+          )}
+          Save
+        </Button>
+      </div>
+    </div>
+  )
+}