fix: dashboard flickering + clickable logo change for applicants

- Fix session auto-refresh causing re-render cascade by using useRef
  instead of useState and delaying the refresh by 3s
- Make project logo clickable on dashboard and team page for team leads
  with hover pencil overlay and ProjectLogoUpload dialog

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

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

@@ -18,6 +18,7 @@ import { CompetitionTimelineSidebar } from '@/components/applicant/competition-t
 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'
 import {
   FileText,
   Calendar,
@@ -29,6 +30,7 @@ import {
   ArrowRight,
   Star,
   AlertCircle,
+  Pencil,
 } from 'lucide-react'
 
 const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive' | 'warning'> = {
@@ -45,6 +47,7 @@ const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destru
 export default function ApplicantDashboardPage() {
   const { data: session, status: sessionStatus } = useSession()
   const isAuthenticated = sessionStatus === 'authenticated'
+  const utils = trpc.useUtils()
 
   const { data, isLoading } = trpc.applicant.getMyDashboard.useQuery(undefined, {
     enabled: isAuthenticated,
@@ -121,14 +124,36 @@ export default function ApplicantDashboardPage() {
       {/* Header */}
       <div className="flex items-start justify-between flex-wrap gap-4">
         <div className="flex items-center gap-4">
-          {/* Project logo */}
-          <div className="shrink-0 h-14 w-14 rounded-xl border bg-muted/50 flex items-center justify-center overflow-hidden">
-            {data.logoUrl ? (
-              <img src={data.logoUrl} alt={project.title} className="h-full w-full object-cover" />
-            ) : (
-              <FileText className="h-7 w-7 text-muted-foreground/60" />
-            )}
-          </div>
+          {/* Project logo — clickable for team leads to change */}
+          {project.isTeamLead ? (
+            <ProjectLogoUpload
+              projectId={project.id}
+              currentLogoUrl={data.logoUrl}
+              onUploadComplete={() => utils.applicant.getMyDashboard.invalidate()}
+            >
+              <button
+                type="button"
+                className="group relative shrink-0 h-14 w-14 rounded-xl border bg-muted/50 flex items-center justify-center overflow-hidden cursor-pointer hover:ring-2 hover:ring-primary/30 transition-all"
+              >
+                {data.logoUrl ? (
+                  <img src={data.logoUrl} alt={project.title} className="h-full w-full object-cover" />
+                ) : (
+                  <FileText className="h-7 w-7 text-muted-foreground/60" />
+                )}
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center">
+                  <Pencil className="h-4 w-4 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+                </div>
+              </button>
+            </ProjectLogoUpload>
+          ) : (
+            <div className="shrink-0 h-14 w-14 rounded-xl border bg-muted/50 flex items-center justify-center overflow-hidden">
+              {data.logoUrl ? (
+                <img src={data.logoUrl} alt={project.title} className="h-full w-full object-cover" />
+              ) : (
+                <FileText className="h-7 w-7 text-muted-foreground/60" />
+              )}
+            </div>
+          )}
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-semibold tracking-tight">{project.title}</h1>