Fix mobile overflow, logo nav, round activation, compare projects setting

- 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>
2026-02-17 13:48:12 +01:00
parent bfdbd0fc6a
commit b3b3bbb8b3
5 changed files with 73 additions and 55 deletions
--- a/src/app/(jury)/jury/competitions/page.tsx
+++ b/src/app/(jury)/jury/competitions/page.tsx
@@ -58,7 +58,7 @@ export default function JuryAssignmentsPage() {
            Projects assigned to you for evaluation
          </p>
        </div>
-        <Button variant="ghost" size="sm" asChild>
+        <Button variant="ghost" size="sm" asChild className="hidden md:inline-flex">
          <Link href={'/jury' as Route}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Dashboard
@@ -89,29 +89,25 @@ export default function JuryAssignmentsPage() {
            return (
              <Card key={round.id}>
                <CardHeader className="pb-3">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <CardTitle className="text-base">{round.name}</CardTitle>
-                      <Badge variant="secondary" className="text-xs">
-                        {formatEnumLabel(round.roundType)}
+                  <div className="flex flex-wrap items-center gap-2">
+                    <CardTitle className="text-base">{round.name}</CardTitle>
+                    <Badge variant="secondary" className="text-xs shrink-0">
+                      {formatEnumLabel(round.roundType)}
+                    </Badge>
+                    {round.status !== 'ROUND_ACTIVE' && (
+                      <Badge variant="outline" className="text-xs text-muted-foreground shrink-0">
+                        {formatEnumLabel(round.status)}
                      </Badge>
-                      {round.status !== 'ROUND_ACTIVE' && (
-                        <Badge variant="outline" className="text-xs text-muted-foreground">
-                          {formatEnumLabel(round.status)}
-                        </Badge>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs text-muted-foreground">
-                        {completed}/{total} completed
-                      </span>
-                      {round.windowCloseAt && (
-                        <Badge variant="outline" className="text-xs gap-1">
-                          <Clock className="h-3 w-3" />
-                          Due {formatDateOnly(round.windowCloseAt)}
-                        </Badge>
-                      )}
-                    </div>
+                    )}
+                    <span className="text-xs text-muted-foreground ml-auto shrink-0">
+                      {completed}/{total} completed
+                    </span>
+                    {round.windowCloseAt && (
+                      <Badge variant="outline" className="text-xs gap-1 shrink-0">
+                        <Clock className="h-3 w-3" />
+                        Due {formatDateOnly(round.windowCloseAt)}
+                      </Badge>
+                    )}
                  </div>
                </CardHeader>
                <CardContent>
--- a/src/app/(jury)/jury/page.tsx
+++ b/src/app/(jury)/jury/page.tsx
@@ -47,8 +47,8 @@ async function JuryDashboardContent() {
    return null
  }

-  // Get assignments and grace periods in parallel
-  const [assignments, gracePeriods] = await Promise.all([
+  // Get assignments, grace periods, and feature flags in parallel
+  const [assignments, gracePeriods, compareFlag] = await Promise.all([
    prisma.assignment.findMany({
      where: { userId },
      include: {
@@ -106,8 +106,11 @@ async function JuryDashboardContent() {
        extendedUntil: true,
      },
    }),
+    prisma.systemSettings.findUnique({ where: { key: 'jury_compare_enabled' } }),
  ])

+  const juryCompareEnabled = compareFlag?.value === 'true'
+
  // Calculate stats
  const totalAssignments = assignments.length
  const completedAssignments = assignments.filter(
@@ -227,7 +230,7 @@ async function JuryDashboardContent() {
                Your project assignments will appear here once an administrator assigns them to you.
              </p>
            </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
                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"
@@ -240,18 +243,20 @@ async function JuryDashboardContent() {
                  <p className="text-xs text-muted-foreground">View evaluations</p>
                </div>
              </Link>
-              <Link
-                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>
-                <div className="text-left">
-                  <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
-                  <p className="text-xs text-muted-foreground">Side-by-side view</p>
-                </div>
-              </Link>
+              {juryCompareEnabled && (
+                <Link
+                  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>
+                  <div className="text-left">
+                    <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
+                    <p className="text-xs text-muted-foreground">Side-by-side view</p>
+                  </div>
+                </Link>
+              )}
            </div>
          </CardContent>
        </Card>
@@ -450,7 +455,7 @@ async function JuryDashboardContent() {
                </div>
              </CardHeader>
              <CardContent>
-                <div className="grid gap-3 sm:grid-cols-2">
+                <div className={`grid gap-3 ${juryCompareEnabled ? 'sm:grid-cols-2' : ''}`}>
                  <Link
                    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"
@@ -463,18 +468,20 @@ async function JuryDashboardContent() {
                      <p className="text-xs text-muted-foreground mt-0.5">View and manage evaluations</p>
                    </div>
                  </Link>
-                  <Link
-                    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>
-                    <div className="text-left">
-                      <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
-                      <p className="text-xs text-muted-foreground mt-0.5">Side-by-side comparison</p>
-                    </div>
-                  </Link>
+                  {juryCompareEnabled && (
+                    <Link
+                      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>
+                      <div className="text-left">
+                        <p className="font-semibold text-sm group-hover:text-brand-teal transition-colors">Compare Projects</p>
+                        <p className="text-xs text-muted-foreground mt-0.5">Side-by-side comparison</p>
+                      </div>
+                    </Link>
+                  )}
                </div>
              </CardContent>
            </Card>
--- a/src/components/layouts/role-nav.tsx
+++ b/src/components/layouts/role-nav.tsx
@@ -64,10 +64,10 @@ export function RoleNav({ navigation, roleName, user, basePath, statusBadge }: R
      <div className="container-app">
        <div className="flex h-16 items-center justify-between">
          {/* Logo */}
-          <div className="flex items-center gap-3">
+          <Link href={basePath as any} className="flex items-center gap-3">
            <Logo showText textSuffix={roleName} />
            {statusBadge}
-          </div>
+          </Link>

          {/* Desktop nav */}
          <nav className="hidden md:flex items-center gap-1">
--- a/src/server/routers/settings.ts
+++ b/src/server/routers/settings.ts
@@ -26,7 +26,7 @@ export const settingsRouter = router({
   * These are non-sensitive settings that can be exposed to any user
   */
  getFeatureFlags: protectedProcedure.query(async ({ ctx }) => {
-    const [whatsappEnabled, defaultLocale, availableLocales] = await Promise.all([
+    const [whatsappEnabled, defaultLocale, availableLocales, juryCompareEnabled] = await Promise.all([
      ctx.prisma.systemSettings.findUnique({
        where: { key: 'whatsapp_enabled' },
      }),
@@ -36,12 +36,16 @@ export const settingsRouter = router({
      ctx.prisma.systemSettings.findUnique({
        where: { key: 'i18n_available_locales' },
      }),
+      ctx.prisma.systemSettings.findUnique({
+        where: { key: 'jury_compare_enabled' },
+      }),
    ])

    return {
      whatsappEnabled: whatsappEnabled?.value === 'true',
      defaultLocale: defaultLocale?.value || 'en',
      availableLocales: availableLocales?.value ? JSON.parse(availableLocales.value) : ['en', 'fr'],
+      juryCompareEnabled: juryCompareEnabled?.value === 'true',
    }
  }),

--- a/src/server/services/round-engine.ts
+++ b/src/server/services/round-engine.ts
@@ -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 result = await tx.round.update({
        where: { id: roundId },
-        data: { status: 'ROUND_ACTIVE' },
+        data: { status: 'ROUND_ACTIVE', ...windowData },
      })

      await tx.decisionAuditLog.create({