From 8d6f3ca11f206541e77b5ea2b4088ec0cc4fbe7a Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 5 Mar 2026 14:23:27 +0100
Subject: [PATCH] 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      | 41 +++++++++++++++++----
 src/app/(applicant)/applicant/team/page.tsx | 39 ++++++++++++++++----
 src/components/layouts/role-nav.tsx         | 13 +++++--
 3 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/src/app/(applicant)/applicant/page.tsx b/src/app/(applicant)/applicant/page.tsx
index 654e2b0..1f55990 100644
--- a/src/app/(applicant)/applicant/page.tsx
+++ b/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>
diff --git a/src/app/(applicant)/applicant/team/page.tsx b/src/app/(applicant)/applicant/team/page.tsx
index dd0255f..3c99903 100644
--- a/src/app/(applicant)/applicant/team/page.tsx
+++ b/src/app/(applicant)/applicant/team/page.tsx
@@ -68,6 +68,7 @@ import {
   GraduationCap,
   Heart,
   Calendar,
+  Pencil,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
 
@@ -243,14 +244,36 @@ export default function ApplicantProjectPage() {
     <div className="space-y-6">
       {/* Header */}
       <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">
-          {logoUrl ? (
-            <img src={logoUrl} alt={project.title} className="h-full w-full object-cover" />
-          ) : (
-            <FolderOpen className="h-7 w-7 text-muted-foreground/60" />
-          )}
-        </div>
+        {/* Project logo — clickable for team leads */}
+        {isTeamLead ? (
+          <ProjectLogoUpload
+            projectId={projectId}
+            currentLogoUrl={logoUrl}
+            onUploadComplete={() => refetchLogo()}
+          >
+            <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"
+            >
+              {logoUrl ? (
+                <img src={logoUrl} alt={project.title} className="h-full w-full object-cover" />
+              ) : (
+                <FolderOpen 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">
+            {logoUrl ? (
+              <img src={logoUrl} alt={project.title} className="h-full w-full object-cover" />
+            ) : (
+              <FolderOpen className="h-7 w-7 text-muted-foreground/60" />
+            )}
+          </div>
+        )}
         <div>
           <h1 className="text-2xl font-semibold tracking-tight">
             {project.title}
diff --git a/src/components/layouts/role-nav.tsx b/src/components/layouts/role-nav.tsx
index 0e973d2..6db07b6 100644
--- a/src/components/layouts/role-nav.tsx
+++ b/src/components/layouts/role-nav.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { signOut, useSession } from 'next-auth/react'
@@ -96,10 +96,15 @@ export function RoleNav({ navigation, roleName, user, basePath, statusBadge, edi
     signOut({ callbackUrl: '/login' })
   }
 
-  // Auto-refresh session on mount to pick up role changes without requiring re-login
+  // Auto-refresh session once on initial mount to pick up role changes.
+  // Uses a ref (not state) to avoid triggering an extra re-render.
+  const sessionRefreshedRef = useRef(false)
   useEffect(() => {
-    if (isAuthenticated) {
-      updateSession()
+    if (isAuthenticated && !sessionRefreshedRef.current) {
+      sessionRefreshedRef.current = true
+      // Delay so the initial render finishes cleanly before session refresh
+      const timer = setTimeout(() => updateSession(), 3000)
+      return () => clearTimeout(timer)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated])