Scrum 100 make round configuration easier to access

package.json

@@ -1,6 +1,6 @@
 {
   "name": "granda-front",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

src/app/[locale]/t/[path]/debates/[debate_id]/page.tsx

@@ -120,7 +120,6 @@ export default async function DebateDetailsPage({
         <h1 className="text-2xl font-semibold opacity-75 max-w-[686px]">
           {motion}
         </h1>
-        <div className="size-[26px] opacity-50 italic">ret</div>
       </header>
 
       <div className="py-2 mb-6"></div>

src/components/tournament/dashboard/DashSide.tsx

@@ -6,7 +6,6 @@ import {
   LucideFileClock,
   LucideFileImage,
   LucideLayoutDashboard,
-  LucidePaintBucket,
   LucideScale,
   LucideScrollText,
   LucideSettings,
@@ -125,17 +124,6 @@ const DashSide = ({ tournament_path }: { tournament_path: string }) => {
         },
       ],
     },
-    {
-      catname: t("sidebar.shareable.catname"),
-      links: [
-        {
-          name: t("sidebar.shareable.image_generation"),
-          href: `/t/${tournament_path}/image-generation`,
-          icon: LucidePaintBucket,
-          disabled: true,
-        },
-      ],
-    },
     {
       catname: t("sidebar.organisational.catname"),
       links: [

src/components/tournament/ladder/LadderRoundRow.tsx

@@ -4,6 +4,8 @@ import { LadderDebateNode } from "./LadderDebateNode";
 import { Phase } from "@/types/Phase";
 import { Motion } from "@/types/Motion";
 import { useTranslations } from "next-intl";
+import { GenericButton } from "@/components/ui/GenericButton";
+import { getRoundLabel } from "@/lib/utils";
 
 export function LadderRoundRow({
   onOpenConfig,
@@ -36,12 +38,24 @@ export function LadderRoundRow({
 
   return (
     <div className="w-3xl grid-cols-2 mb-2">
-      <button
-        className="hover:underline hover:cursor-pointer"
-        onClick={onOpenConfig}
+      <GenericButton
+        smol
+        className="w-fit hover:underline cursor-pointer"
+        onClick={() => {
+          onOpenConfig();
+
+          setTimeout(() => {
+            document
+              .querySelector("[data-round-config-popup]")
+              ?.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+              });
+          }, 50);
+        }}
       >
-        {round.name}
-      </button>
+        {getRoundLabel(round, phase, debates, t)}
+      </GenericButton>
       <div className="flex justify-center gap-10">
         {debates.map((debate) => (
           <LadderDebateNode

src/components/tournament/ladder/LadderView.tsx

@@ -87,6 +87,10 @@ export function LadderView({
               onClose={() => setIsRoundConfigOpen(false)}
               tournamentId={tournamentId}
               round={configuredRound}
+              phase={phases?.find((p) => p.id == configuredRound.phase_id)}
+              debates={
+                debates?.filter((d) => d.round_id == configuredRound.id) || []
+              }
               motion={motions?.find(
                 (motion) => configuredRound.motion_id == motion.id,
               )}

src/components/tournament/ladder/RoundConfig.tsx

@@ -6,13 +6,18 @@ import { LucideX } from "lucide-react";
 import { ReusableButton } from "../../ui/ReusableButton";
 import { InputBlock } from "../../ui/InputBlock";
 import { Round } from "@/types/Round";
+import { Phase } from "@/types/Phase";
+import { Debate } from "@/types/Debate";
 import { Motion } from "@/types/Motion";
 import { createMotion, setRoundMotion } from "@/lib/utils";
+import { getRoundLabel } from "@/lib/utils";
 
 type RoundConfigProps = {
   motion?: Motion;
   round: Round;
   tournamentId: string;
+  phase: Phase;
+  debates?: Debate[];
   onApplyAction: () => void;
   onClose: () => void;
 };
@@ -21,18 +26,22 @@ export function RoundConfig({
   motion,
   tournamentId,
   round,
+  phase,
+  debates = [],
   onApplyAction: onApply,
   onClose,
 }: RoundConfigProps) {
   const t = useTranslations("round_config");
+  const tLadder = useTranslations("ladder");
   const [motionText, setMotionText] = useState(motion?.motion || "");
   const [infoslide, setInfoslide] = useState(motion?.adinfo || "");
   const [isApplying, setIsApplying] = useState(false);
   const [resultMessage, setResultMessage] = useState({
     message: "",
     error: false,
   });
-  const name = round.name;
+
+  const name = getRoundLabel(round, phase, debates, tLadder);
 
   const isApplyDisabled = motionText.trim().length === 0 || isApplying;
 
@@ -71,45 +80,47 @@ export function RoundConfig({
   };
 
   return (
-    <div className="relative mt-40 flex w-[574px] flex-col items-center gap-[36px] rounded-md bg-zinc-950 px-[10px] py-[32px] shadow-[0px_10px_9px_0px_rgba(0,0,0,0.25)] outline-2 outline-offset-[-2px] outline-neutral-600/80">
-      <button
-        type="button"
-        aria-label="Close round configuration"
-        onClick={onClose}
-        className="absolute right-4 top-4 rounded border border-stone-700 bg-stone-700/40 p-1 text-stone-300 hover:border-stone-500 hover:bg-stone-600/40 hover:text-white focus:border-stone-500 focus:bg-stone-600/40 cursor-pointer"
-      >
-        <LucideX size={20} />
-      </button>
-
-      <div className="h-5 w-[574px] pb-[28px] text-center text-2xl font-semibold text-white opacity-75">
-        {t("title", { name })}
+    <div data-round-config-popup>
+      <div className="relative mt-40 flex w-[574px] flex-col items-center gap-[36px] rounded-md bg-zinc-950 px-[10px] py-[32px] shadow-[0px_10px_9px_0px_rgba(0,0,0,0.25)] outline-2 outline-offset-[-2px] outline-neutral-600/80">
+        <button
+          type="button"
+          aria-label="Close round configuration"
+          onClick={onClose}
+          className="absolute right-4 top-4 rounded border border-stone-700 bg-stone-700/40 p-1 text-stone-300 hover:border-stone-500 hover:bg-stone-600/40 hover:text-white focus:border-stone-500 focus:bg-stone-600/40 cursor-pointer"
+        >
+          <LucideX size={20} />
+        </button>
+
+        <div className="h-5 w-[574px] pb-[28px] text-center text-2xl font-semibold text-white opacity-75">
+          {t("title", { name })}
+        </div>
+
+        <InputBlock
+          title={t("motion_title")}
+          description={t("motion_description")}
+          value={motionText}
+          onChange={setMotionText}
+          placeholder={t("motion_placeholder")}
+        />
+
+        <InputBlock
+          title={t("infoslide_title")}
+          description={t("infoslide_description")}
+          value={infoslide}
+          onChange={setInfoslide}
+        />
+
+        <p className={resultMessage.error ? "text-red-400" : "text-green-400"}>
+          {resultMessage.message || " "}
+        </p>
+
+        <ReusableButton
+          text={t("apply")}
+          defaultSize={true}
+          disabled={isApplyDisabled}
+          onClick={handleApply}
+        />
       </div>
-
-      <InputBlock
-        title={t("motion_title")}
-        description={t("motion_description")}
-        value={motionText}
-        onChange={setMotionText}
-        placeholder={t("motion_placeholder")}
-      />
-
-      <InputBlock
-        title={t("infoslide_title")}
-        description={t("infoslide_description")}
-        value={infoslide}
-        onChange={setInfoslide}
-      />
-
-      <p className={resultMessage.error ? "text-red-400" : "text-green-400"}>
-        {resultMessage.message || " "}
-      </p>
-
-      <ReusableButton
-        text={t("apply")}
-        defaultSize={true}
-        disabled={isApplyDisabled}
-        onClick={handleApply}
-      />
     </div>
   );
 }

src/components/ui/GenericButton.tsx

@@ -45,7 +45,7 @@ const GenericButton = (
         props.hidden
           ? "hidden"
           : `
-        cursor-pointer p-1 text-center block w-full rounded px-2 border
+        cursor-pointer p-1 text-center block rounded px-2 border
         ${!props.smol ? "px-12 w-full" : ""}
         ${!props.square ? "rounded-lg" : "rounded"}
         disabled:opacity-50 disabled:cursor-not-allowed

src/i18n/translations/en.json

@@ -109,13 +109,20 @@
     "total_teams_hint": "The total number of teams taking part in the tournament.",
     "advancing_teams_hint": "Defines how many teams advance from the group phase to the finals phase. Must be a power of 2.",
     "hint_title": "Tournament Ladder",
-    "hint_content": "Each box represents a debate. You can click on a specific box to see the debate details. The ladder visualizes the flow of the tournament."
+    "hint_content": "Each box represents a debate. You can click on a specific box to see the debate details. The ladder shows the structure and flow of the tournament, including the rounds and how debates are organised.",
+    "round": "Round {n}",
+    "finals": {
+      "final": "Finale",
+      "semi_final": "Semi-finals",
+      "quarter_final": "Quarter-finals",
+      "nth_final": "1/{n}-finals"
+    }
   },
   "debates": {
     "title": "Debates"
   },
   "round_config": {
-    "title": "Round {name} configuration",
+    "title": "{name} configuration",
     "motion_title": "Motion",
     "motion_description": "What should this round's topic be?",
     "motion_placeholder": "(Required)",

src/lib/utils.ts

@@ -2,6 +2,8 @@ import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Motion } from "@/types/Motion";
 import { Round } from "@/types/Round";
+import { Debate } from "@/types/Debate";
+import { Phase } from "@/types/Phase";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -77,3 +79,41 @@ export async function setRoundMotion(
 
   return response.json();
 }
+
+type Translator = (
+  key: string,
+  values?: Record<string, string | number>,
+) => string;
+
+export function getRoundLabel(
+  round: Round,
+  phase: Phase,
+  debates: Debate[],
+  t: Translator,
+): string {
+  if (phase.is_finals) {
+    const matches = debates.length;
+
+    if (matches === 1) return t("finals.final");
+    if (matches === 2) return t("finals.semi_final");
+    if (matches === 4) return t("finals.quarter_final");
+
+    if (matches > 0 && (matches & (matches - 1)) === 0) {
+      return t("finals.nth_final", { n: matches * 2 });
+    }
+
+    return round.name;
+  }
+
+  const matchRoundName = round.name.match(/^round_(\d+)$/i);
+
+  if (matchRoundName) {
+    const roundNumber = Number(matchRoundName[1]);
+
+    if (!Number.isNaN(roundNumber)) {
+      return t("round", { n: roundNumber });
+    }
+  }
+
+  return round.name;
+}

test/e2e/e2eUtils.ts

@@ -332,7 +332,7 @@ export async function planTournament({
   totalTeams: number;
   advancingTeams: number;
 }) {
-  await page.getByRole("link", { name: "Tournament Ladder" }).click();
+  await page.getByRole("link", { name: "Tournament Ladder" }).first().click();
   await page.waitForURL(/ladder/);
   await page
     .getByRole("spinbutton", { name: "Group phase rounds" })

test/e2e/settings-shortcut.test.ts

@@ -5,7 +5,9 @@ testInTournamentAsAdmin(
   "settings shortcut redirects to settings page and is removed from account dropdown",
   async ({ page }) => {
     // GIVEN
-    await expect(page.getByRole("heading", { name: "Overview" })).toBeVisible();
+    await expect(
+      page.getByRole("heading", { name: "Welcome to" }),
+    ).toBeVisible();
 
     const settingsShortcut = page.getByRole("button", { name: "Settings" });
 

test/e2e/sidebarHighlight.test.ts

@@ -6,9 +6,9 @@ testInTournamentAsAdmin(
   async ({ page }) => {
     // GIVEN
     const overviewSidebarItem = page.getByRole("link", { name: "Overview" });
-    const tournamentSidebarItem = page.getByRole("link", {
-      name: "Tournament Ladder",
-    });
+    const tournamentSidebarItem = page
+      .getByRole("link", { name: "Tournament Ladder" })
+      .first();
     const debatesSidebarItem = page.getByRole("link", { name: "Debates" });
 
     await expect(overviewSidebarItem).toHaveClass(/border-stone-600/);