Apply full refactor updates plus pipeline/email UX confirmations

src/components/layouts/role-nav.tsx

@@ -1,202 +1,202 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { signOut, useSession } from 'next-auth/react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { UserAvatar } from '@/components/shared/user-avatar'
-import { trpc } from '@/lib/trpc/client'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import type { Route } from 'next'
-import type { LucideIcon } from 'lucide-react'
-import { LogOut, Menu, Moon, Settings, Sun, User, X } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import { Logo } from '@/components/shared/logo'
-import { NotificationBell } from '@/components/shared/notification-bell'
-
-export type NavItem = {
-  name: string
-  href: string
-  icon: LucideIcon
-}
-
-export type RoleNavUser = {
-  name?: string | null
-  email?: string | null
-}
-
-type RoleNavProps = {
-  navigation: NavItem[]
-  roleName: string
-  user: RoleNavUser
-  /** The base path for the role (e.g., '/jury', '/mentor', '/observer'). Used for active state detection on the dashboard link. */
-  basePath: string
-  /** Optional status badge displayed next to the logo (e.g., remaining evaluations count) */
-  statusBadge?: React.ReactNode
-}
-
-function isNavItemActive(pathname: string, href: string, basePath: string): boolean {
-  return pathname === href || (href !== basePath && pathname.startsWith(href))
-}
-
-export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: RoleNavProps) {
-  const pathname = usePathname()
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
-  const { status: sessionStatus } = useSession()
-  const isAuthenticated = sessionStatus === 'authenticated'
-  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery(undefined, {
-    enabled: isAuthenticated,
-  })
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => setMounted(true), [])
-
-  return (
-    <header className="sticky top-0 z-40 border-b bg-card">
-      <div className="container-app">
-        <div className="flex h-16 items-center justify-between">
-          {/* Logo */}
-          <div className="flex items-center gap-3">
-            <Logo showText textSuffix={roleName} />
-            {statusBadge}
-          </div>
-
-          {/* Desktop nav */}
-          <nav className="hidden md:flex items-center gap-1">
-            {navigation.map((item) => {
-              const isActive = isNavItemActive(pathname, item.href, basePath)
-              return (
-                <Link
-                  key={item.name}
-                  href={item.href as Route}
-                  className={cn(
-                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
-                    isActive
-                      ? 'bg-primary/10 text-primary'
-                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-                  )}
-                >
-                  <item.icon className="h-4 w-4" />
-                  {item.name}
-                </Link>
-              )
-            })}
-          </nav>
-
-          {/* User menu & mobile toggle */}
-          <div className="flex items-center gap-2">
-            {mounted && (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-                aria-label="Toggle theme"
-              >
-                {theme === 'dark' ? (
-                  <Sun className="h-5 w-5" />
-                ) : (
-                  <Moon className="h-5 w-5" />
-                )}
-              </Button>
-            )}
-            <NotificationBell />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  className="gap-2 hidden sm:flex"
-                  size="sm"
-                >
-                  <UserAvatar user={user} avatarUrl={avatarUrl} size="xs" />
-                  <span className="max-w-[120px] truncate">
-                    {user.name || user.email}
-                  </span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48">
-                <DropdownMenuItem disabled>
-                  <User className="mr-2 h-4 w-4" />
-                  {user.email}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem asChild>
-                  <Link href={"/settings/profile" as Route} className="flex cursor-pointer items-center">
-                    <Settings className="mr-2 h-4 w-4" />
-                    Settings
-                  </Link>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onClick={() => signOut({ callbackUrl: '/login' })}
-                  className="text-destructive focus:text-destructive"
-                >
-                  <LogOut className="mr-2 h-4 w-4" />
-                  Sign Out
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-
-            <Button
-              variant="ghost"
-              size="icon"
-              className="md:hidden"
-              aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
-              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-            >
-              {isMobileMenuOpen ? (
-                <X className="h-5 w-5" />
-              ) : (
-                <Menu className="h-5 w-5" />
-              )}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile menu */}
-      {isMobileMenuOpen && (
-        <div className="border-t md:hidden">
-          <nav className="container-app py-4 space-y-1">
-            {navigation.map((item) => {
-              const isActive = isNavItemActive(pathname, item.href, basePath)
-              return (
-                <Link
-                  key={item.name}
-                  href={item.href as Route}
-                  onClick={() => setIsMobileMenuOpen(false)}
-                  className={cn(
-                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
-                    isActive
-                      ? 'bg-primary/10 text-primary'
-                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-                  )}
-                >
-                  <item.icon className="h-4 w-4" />
-                  {item.name}
-                </Link>
-              )
-            })}
-            <div className="border-t pt-4 mt-4">
-              <Button
-                variant="ghost"
-                className="w-full justify-start text-destructive hover:text-destructive"
-                onClick={() => signOut({ callbackUrl: '/login' })}
-              >
-                <LogOut className="mr-2 h-4 w-4" />
-                Sign Out
-              </Button>
-            </div>
-          </nav>
-        </div>
-      )}
-    </header>
-  )
-}
+'use client'
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { signOut, useSession } from 'next-auth/react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { trpc } from '@/lib/trpc/client'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import type { Route } from 'next'
+import type { LucideIcon } from 'lucide-react'
+import { LogOut, Menu, Moon, Settings, Sun, User, X } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { Logo } from '@/components/shared/logo'
+import { NotificationBell } from '@/components/shared/notification-bell'
+
+export type NavItem = {
+  name: string
+  href: string
+  icon: LucideIcon
+}
+
+export type RoleNavUser = {
+  name?: string | null
+  email?: string | null
+}
+
+type RoleNavProps = {
+  navigation: NavItem[]
+  roleName: string
+  user: RoleNavUser
+  /** The base path for the role (e.g., '/jury', '/mentor', '/observer'). Used for active state detection on the dashboard link. */
+  basePath: string
+  /** Optional status badge displayed next to the logo (e.g., remaining evaluations count) */
+  statusBadge?: React.ReactNode
+}
+
+function isNavItemActive(pathname: string, href: string, basePath: string): boolean {
+  return pathname === href || (href !== basePath && pathname.startsWith(href))
+}
+
+export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: RoleNavProps) {
+  const pathname = usePathname()
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { status: sessionStatus } = useSession()
+  const isAuthenticated = sessionStatus === 'authenticated'
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery(undefined, {
+    enabled: isAuthenticated,
+  })
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  return (
+    <header className="sticky top-0 z-40 border-b bg-card">
+      <div className="container-app">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo */}
+          <div className="flex items-center gap-3">
+            <Logo showText textSuffix={roleName} />
+            {statusBadge}
+          </div>
+
+          {/* Desktop nav */}
+          <nav className="hidden md:flex items-center gap-1">
+            {navigation.map((item) => {
+              const isActive = isNavItemActive(pathname, item.href, basePath)
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href as Route}
+                  className={cn(
+                    'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-primary/10 text-primary'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  {item.name}
+                </Link>
+              )
+            })}
+          </nav>
+
+          {/* User menu & mobile toggle */}
+          <div className="flex items-center gap-2">
+            {mounted && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+                aria-label="Toggle theme"
+              >
+                {theme === 'dark' ? (
+                  <Sun className="h-5 w-5" />
+                ) : (
+                  <Moon className="h-5 w-5" />
+                )}
+              </Button>
+            )}
+            <NotificationBell />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="gap-2 hidden sm:flex"
+                  size="sm"
+                >
+                  <UserAvatar user={user} avatarUrl={avatarUrl} size="xs" />
+                  <span className="max-w-[120px] truncate">
+                    {user.name || user.email}
+                  </span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem disabled>
+                  <User className="mr-2 h-4 w-4" />
+                  {user.email}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem asChild>
+                  <Link href={"/settings/profile" as Route} className="flex cursor-pointer items-center">
+                    <Settings className="mr-2 h-4 w-4" />
+                    Settings
+                  </Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => signOut({ callbackUrl: '/login' })}
+                  className="text-destructive focus:text-destructive"
+                >
+                  <LogOut className="mr-2 h-4 w-4" />
+                  Sign Out
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <Button
+              variant="ghost"
+              size="icon"
+              className="md:hidden"
+              aria-label={isMobileMenuOpen ? 'Close menu' : 'Open menu'}
+              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            >
+              {isMobileMenuOpen ? (
+                <X className="h-5 w-5" />
+              ) : (
+                <Menu className="h-5 w-5" />
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile menu */}
+      {isMobileMenuOpen && (
+        <div className="border-t md:hidden">
+          <nav className="container-app py-4 space-y-1">
+            {navigation.map((item) => {
+              const isActive = isNavItemActive(pathname, item.href, basePath)
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href as Route}
+                  onClick={() => setIsMobileMenuOpen(false)}
+                  className={cn(
+                    'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-primary/10 text-primary'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  {item.name}
+                </Link>
+              )
+            })}
+            <div className="border-t pt-4 mt-4">
+              <Button
+                variant="ghost"
+                className="w-full justify-start text-destructive hover:text-destructive"
+                onClick={() => signOut({ callbackUrl: '/login' })}
+              >
+                <LogOut className="mr-2 h-4 w-4" />
+                Sign Out
+              </Button>
+            </div>
+          </nav>
+        </div>
+      )}
+    </header>
+  )
+}