Fix mobile overflow, logo nav, round activation, compare projects setting
Some checks failed
Build and Push Docker Image / build (push) Has been cancelled

- Fix assignments page header overflow on mobile (flex-wrap)
- Hide 'Back to Dashboard' button on mobile (logo tap navigates home)
- Make logo/brand text clickable to navigate to role dashboard
- Snap windowOpenAt to now when manually activating a round early
- Gate Compare Projects cards behind jury_compare_enabled setting (defaults off)
- Expose jury_compare_enabled in getFeatureFlags tRPC procedure

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matt
2026-02-17 13:48:12 +01:00
parent bfdbd0fc6a
commit b3b3bbb8b3
5 changed files with 73 additions and 55 deletions

View File

@@ -58,7 +58,7 @@ export default function JuryAssignmentsPage() {
Projects assigned to you for evaluation Projects assigned to you for evaluation
</p> </p>
</div> </div>
<Button variant="ghost" size="sm" asChild> <Button variant="ghost" size="sm" asChild className="hidden md:inline-flex">
<Link href={'/jury' as Route}> <Link href={'/jury' as Route}>
<ArrowLeft className="mr-2 h-4 w-4" /> <ArrowLeft className="mr-2 h-4 w-4" />
Back to Dashboard Back to Dashboard
@@ -89,29 +89,25 @@ export default function JuryAssignmentsPage() {
return ( return (
<Card key={round.id}> <Card key={round.id}>
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between"> <div className="flex flex-wrap items-center gap-2">
<div className="flex items-center gap-3"> <CardTitle className="text-base">{round.name}</CardTitle>
<CardTitle className="text-base">{round.name}</CardTitle> <Badge variant="secondary" className="text-xs shrink-0">
<Badge variant="secondary" className="text-xs"> {formatEnumLabel(round.roundType)}
{formatEnumLabel(round.roundType)} </Badge>
{round.status !== 'ROUND_ACTIVE' && (
<Badge variant="outline" className="text-xs text-muted-foreground shrink-0">
{formatEnumLabel(round.status)}
</Badge> </Badge>
{round.status !== 'ROUND_ACTIVE' && ( )}
<Badge variant="outline" className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground ml-auto shrink-0">
{formatEnumLabel(round.status)} {completed}/{total} completed
</Badge> </span>
)} {round.windowCloseAt && (
</div> <Badge variant="outline" className="text-xs gap-1 shrink-0">
<div className="flex items-center gap-2"> <Clock className="h-3 w-3" />
<span className="text-xs text-muted-foreground"> Due {formatDateOnly(round.windowCloseAt)}
{completed}/{total} completed </Badge>
</span> )}
{round.windowCloseAt && (
<Badge variant="outline" className="text-xs gap-1">
<Clock className="h-3 w-3" />
Due {formatDateOnly(round.windowCloseAt)}
</Badge>
)}
</div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>

View File

@@ -47,8 +47,8 @@ async function JuryDashboardContent() {
return null return null
} }
// Get assignments and grace periods in parallel // Get assignments, grace periods, and feature flags in parallel
const [assignments, gracePeriods] = await Promise.all([ const [assignments, gracePeriods, compareFlag] = await Promise.all([
prisma.assignment.findMany({ prisma.assignment.findMany({
where: { userId }, where: { userId },
include: { include: {
@@ -106,8 +106,11 @@ async function JuryDashboardContent() {
extendedUntil: true, extendedUntil: true,
}, },
}), }),
prisma.systemSettings.findUnique({ where: { key: 'jury_compare_enabled' } }),
]) ])
const juryCompareEnabled = compareFlag?.value === 'true'
// Calculate stats // Calculate stats
const totalAssignments = assignments.length const totalAssignments = assignments.length
const completedAssignments = assignments.filter( const completedAssignments = assignments.filter(
@@ -227,7 +230,7 @@ async function JuryDashboardContent() {
Your project assignments will appear here once an administrator assigns them to you. Your project assignments will appear here once an administrator assigns them to you.
</p> </p>
</div> </div>
<div className="grid gap-3 sm:grid-cols-2 max-w-md mx-auto"> <div className={`grid gap-3 max-w-md mx-auto ${juryCompareEnabled ? 'sm:grid-cols-2' : ''}`}>
<Link <Link
href="/jury/competitions" href="/jury/competitions"
className="group flex items-center gap-3 rounded-xl border border-border/60 p-3 transition-all duration-200 hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md dark:hover:border-brand-teal/30 dark:hover:bg-brand-teal/5" className="group flex items-center gap-3 rounded-xl border border-border/60 p-3 transition-all duration-200 hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md dark:hover:border-brand-teal/30 dark:hover:bg-brand-teal/5"
@@ -240,18 +243,20 @@ async function JuryDashboardContent() {
<p className="text-xs text-muted-foreground">View evaluations</p> <p className="text-xs text-muted-foreground">View evaluations</p>
</div> </div>
</Link> </Link>
<Link {juryCompareEnabled && (
href="/jury/competitions" <Link
className="group flex items-center gap-3 rounded-xl border border-border/60 p-3 transition-all duration-200 hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md" href="/jury/competitions"
> className="group flex items-center gap-3 rounded-xl border border-border/60 p-3 transition-all duration-200 hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md"
<div className="rounded-lg bg-teal-50 p-2 transition-colors group-hover:bg-teal-100 dark:bg-teal-950/40"> >
<GitCompare className="h-4 w-4 text-brand-teal" /> <div className="rounded-lg bg-teal-50 p-2 transition-colors group-hover:bg-teal-100 dark:bg-teal-950/40">
</div> <GitCompare className="h-4 w-4 text-brand-teal" />
<div className="text-left"> </div>
<p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p> <div className="text-left">
<p className="text-xs text-muted-foreground">Side-by-side view</p> <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
</div> <p className="text-xs text-muted-foreground">Side-by-side view</p>
</Link> </div>
</Link>
)}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@@ -450,7 +455,7 @@ async function JuryDashboardContent() {
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="grid gap-3 sm:grid-cols-2"> <div className={`grid gap-3 ${juryCompareEnabled ? 'sm:grid-cols-2' : ''}`}>
<Link <Link
href="/jury/competitions" href="/jury/competitions"
className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md dark:hover:border-brand-teal/30 dark:hover:bg-brand-teal/5" className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-blue/30 hover:bg-brand-blue/5 hover:-translate-y-0.5 hover:shadow-md dark:hover:border-brand-teal/30 dark:hover:bg-brand-teal/5"
@@ -463,18 +468,20 @@ async function JuryDashboardContent() {
<p className="text-xs text-muted-foreground mt-0.5">View and manage evaluations</p> <p className="text-xs text-muted-foreground mt-0.5">View and manage evaluations</p>
</div> </div>
</Link> </Link>
<Link {juryCompareEnabled && (
href="/jury/competitions" <Link
className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md" href="/jury/competitions"
> className="group flex items-center gap-4 rounded-xl border border-border/60 p-4 transition-all duration-200 hover:border-brand-teal/30 hover:bg-brand-teal/5 hover:-translate-y-0.5 hover:shadow-md"
<div className="rounded-xl bg-teal-50 p-3 transition-colors group-hover:bg-teal-100 dark:bg-teal-950/40 dark:group-hover:bg-teal-950/60"> >
<GitCompare className="h-5 w-5 text-brand-teal" /> <div className="rounded-xl bg-teal-50 p-3 transition-colors group-hover:bg-teal-100 dark:bg-teal-950/40 dark:group-hover:bg-teal-950/60">
</div> <GitCompare className="h-5 w-5 text-brand-teal" />
<div className="text-left"> </div>
<p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p> <div className="text-left">
<p className="text-xs text-muted-foreground mt-0.5">Side-by-side comparison</p> <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
</div> <p className="text-xs text-muted-foreground mt-0.5">Side-by-side comparison</p>
</Link> </div>
</Link>
)}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>

View File

@@ -64,10 +64,10 @@ export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: R
<div className="container-app"> <div className="container-app">
<div className="flex h-16 items-center justify-between"> <div className="flex h-16 items-center justify-between">
{/* Logo */} {/* Logo */}
<div className="flex items-center gap-3"> <Link href={basePath as any} className="flex items-center gap-3">
<Logo showText textSuffix={roleName} /> <Logo showText textSuffix={roleName} />
{statusBadge} {statusBadge}
</div> </Link>
{/* Desktop nav */} {/* Desktop nav */}
<nav className="hidden md:flex items-center gap-1"> <nav className="hidden md:flex items-center gap-1">

View File

@@ -26,7 +26,7 @@ export const settingsRouter = router({
* These are non-sensitive settings that can be exposed to any user * These are non-sensitive settings that can be exposed to any user
*/ */
getFeatureFlags: protectedProcedure.query(async ({ ctx }) => { getFeatureFlags: protectedProcedure.query(async ({ ctx }) => {
const [whatsappEnabled, defaultLocale, availableLocales] = await Promise.all([ const [whatsappEnabled, defaultLocale, availableLocales, juryCompareEnabled] = await Promise.all([
ctx.prisma.systemSettings.findUnique({ ctx.prisma.systemSettings.findUnique({
where: { key: 'whatsapp_enabled' }, where: { key: 'whatsapp_enabled' },
}), }),
@@ -36,12 +36,16 @@ export const settingsRouter = router({
ctx.prisma.systemSettings.findUnique({ ctx.prisma.systemSettings.findUnique({
where: { key: 'i18n_available_locales' }, where: { key: 'i18n_available_locales' },
}), }),
ctx.prisma.systemSettings.findUnique({
where: { key: 'jury_compare_enabled' },
}),
]) ])
return { return {
whatsappEnabled: whatsappEnabled?.value === 'true', whatsappEnabled: whatsappEnabled?.value === 'true',
defaultLocale: defaultLocale?.value || 'en', defaultLocale: defaultLocale?.value || 'en',
availableLocales: availableLocales?.value ? JSON.parse(availableLocales.value) : ['en', 'fr'], availableLocales: availableLocales?.value ? JSON.parse(availableLocales.value) : ['en', 'fr'],
juryCompareEnabled: juryCompareEnabled?.value === 'true',
} }
}), }),

View File

@@ -106,10 +106,21 @@ export async function activateRound(
} }
} }
// If activating before the scheduled start, snap windowOpenAt to now
const now = new Date()
const windowData: Record<string, Date> = {}
if (round.windowOpenAt && new Date(round.windowOpenAt) > now) {
windowData.windowOpenAt = now
}
// If no windowOpenAt was set at all, also set it to now
if (!round.windowOpenAt) {
windowData.windowOpenAt = now
}
const updated = await prisma.$transaction(async (tx: any) => { const updated = await prisma.$transaction(async (tx: any) => {
const result = await tx.round.update({ const result = await tx.round.update({
where: { id: roundId }, where: { id: roundId },
data: { status: 'ROUND_ACTIVE' }, data: { status: 'ROUND_ACTIVE', ...windowData },
}) })
await tx.decisionAuditLog.create({ await tx.decisionAuditLog.create({