-
- );
-};
-
-export default TournamentFilters;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournament_tabs.tsx b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournament_tabs.tsx
new file mode 100644
index 0000000000..2c604cf9a5
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournament_tabs.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import React from "react";
+
+import TournamentsTabsShell from "./tournaments-tabs-shell";
+import { Section, TournamentsSection } from "../types";
+
+type Props = { current: TournamentsSection };
+
+const TAB_KEYS = {
+ live: "tournamentsTabLive",
+ series: "tournamentsTabSeries",
+ indexes: "tournamentsTabIndexes",
+ archived: "tournamentsTabArchived",
+} as const satisfies Record
-
-
+
+
+
+
+
+ {item.header_image ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
+ ) : (
+
+
+
+
+ )}
+
+
+ + {item.name} +
+ ++ {t.rich("tournamentQuestionsCountUpper", { + count: item.questions_count ?? 0, + n: (chunks) => <>{chunks}, + })} +
+
+
+
+ {item.header_image ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
+
+
+
+ )}
+
+
+ + {t.rich("tournamentQuestionsCountUpper", { + count: item.questions_count ?? 0, + n: (chunks) => ( + + {chunks} + + ), + })} +
+ ++ {item.name} +
+ + {description ? ( ++ {description} +
+ ) : null} +
+ {item.header_image ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
+
+
+
+ )}
+
+
+
+
+ {prize && (
+
+ {prize}
+
+ )}
+ {prize ? ` ${t("tournamentPrizePool")}` : t("tournamentNoPrizePool")}
+
+
+
+ {item.forecasters_count ?? 0}
+
+
+
+ + {item.name} +
+ +
+
+ );
+}
+
+function Marker({ pct }: { pct: number }) {
+ const clamped = Math.max(0, Math.min(100, pct));
+ const left = `${clamped}%`;
+ const thumbLeft = `clamp(5px, ${left}, calc(100% - 5px))`;
+
+ return (
+
+ );
+}
+
+function ClosedMiniBar({
+ nowTs,
+ isResolved,
+ timeline,
+ closeDate,
+}: {
+ nowTs: number | null;
+ isResolved: boolean;
+ timeline: TournamentTimeline | null;
+ closeDate: string | null;
+}) {
+ const t = useTranslations();
+ const label = isResolved
+ ? t("tournamentTimelineAllResolved")
+ : t("tournamentTimelineClosed");
+ let progress = isResolved ? 50 : 0;
+
+ if (nowTs != null) {
+ const resolvedTs = pickResolveTs(nowTs, timeline);
+ const winnersTs = pickWinnersTs(resolvedTs, closeDate);
+
+ if (resolvedTs && nowTs >= resolvedTs) progress = 50;
+ if (winnersTs && nowTs >= winnersTs) progress = 100;
+ if (isResolved) progress = Math.max(progress, 50);
+ }
+
+ return (
+ + {label} +
+ +
+
+
+
+
+
+ );
+}
+
+function ClosedChip({
+ left,
+ active,
+}: {
+ left: "0%" | "50%" | "100%";
+ active: boolean;
+}) {
+ return (
+ + {label} +
+ +
+
+
+ = 50} />
+ = 100} />
+
+
+
+
+ );
+}
+
+function safeTs(iso?: string | null): number | null {
+ if (!iso) return null;
+ const t = new Date(iso).getTime();
+ return Number.isFinite(t) ? t : null;
+}
+
+function clamp01(x: number) {
+ return Math.max(0, Math.min(1, x));
+}
+
+function formatRelative(
+ t: ReturnType
+ {item.header_image ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
+
+
+
+ )}
+
+
+ + {t.rich("tournamentQuestionsCount", { + count: questionsCount, + num: (chunks) => ( + + {chunks} + + ), + })} +
+ ++ {item.name} +
+
+ {items.map((item) =>
+ renderItem ? (
+ renderItem(item)
+ ) : (
+
+ )
+ )}
+
+ );
+};
+
+export default TournamentsGrid;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_header.tsx b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_header.tsx
new file mode 100644
index 0000000000..5961785681
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_header.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+import { useBreakpoint } from "@/hooks/tailwind";
+import cn from "@/utils/core/cn";
+
+import TournamentsTabs from "./tournament_tabs";
+import TournamentsFilter from "./tournaments_filter";
+import TournamentsInfoPopover from "./tournaments_popover/tournaments_info_popover";
+import { useTournamentsSection } from "./tournaments_provider";
+import TournamentsSearch from "./tournaments_search";
+
+const STICKY_TOP = 48;
+const POPOVER_GAP = 10;
+
+const TournamentsHeader: React.FC = () => {
+ const { current, infoOpen, toggleInfo, closeInfo } = useTournamentsSection();
+
+ const sentinelRef = useRef
+
+
+ );
+};
+
+const popoverSafeGlassClasses = cn(
+ "bg-white/70 dark:bg-slate-950/45",
+ "backdrop-blur-md supports-[backdrop-filter]:backdrop-blur-md",
+ "border-b border-blue-400/50 dark:border-blue-400-dark/50"
+);
+
+export default TournamentsHeader;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_hero.tsx b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_hero.tsx
new file mode 100644
index 0000000000..7f74af5966
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_hero.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import React from "react";
+
+import { useTournamentsSection } from "./tournaments_provider";
+import { TournamentsSection } from "../types";
+
+const HERO_KEYS = {
+ live: {
+ titleKey: "tournamentsHeroLiveTitle",
+ shownKey: "tournamentsHeroLiveShown",
+ },
+ series: {
+ titleKey: "tournamentsHeroSeriesTitle",
+ shownKey: "tournamentsHeroSeriesShown",
+ },
+ indexes: {
+ titleKey: "tournamentsHeroIndexesTitle",
+ shownKey: "tournamentsHeroIndexesShown",
+ },
+ archived: null,
+} as const satisfies Record<
+ TournamentsSection,
+ { titleKey: string; shownKey: string } | null
+>;
+
+const TournamentsHero: React.FC = () => {
+ const t = useTranslations();
+ const { current, count } = useTournamentsSection();
+
+ const keys = HERO_KEYS[current];
+ if (!keys) return null;
+
+ type RichKey = Parameters
+
+
+
+
+
+
+ {current !== "indexes" && (
+
+ (next ? toggleInfo() : closeInfo())}
+ offsetPx={POPOVER_GAP}
+ stickyTopPx={STICKY_TOP}
+ />
+ ) : null}
+
+ )}
+
+
+ {t.rich(keys.titleKey as RichKey, {
+ br: () =>
+
+
+ );
+};
+
+export default TournamentsHero;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_list.tsx b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_list.tsx
deleted file mode 100644
index 42e52aea94..0000000000
--- a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_list.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-"use client";
-import { differenceInMilliseconds } from "date-fns";
-import { useTranslations } from "next-intl";
-import { FC, useEffect, useMemo, useState } from "react";
-
-import TournamentCard from "@/components/tournament_card";
-import Button from "@/components/ui/button";
-import useSearchParams from "@/hooks/use_search_params";
-import {
- TournamentPreview,
- TournamentsSortBy,
- TournamentType,
-} from "@/types/projects";
-import { getProjectLink } from "@/utils/navigation";
-
-import {
- TOURNAMENTS_SEARCH,
- TOURNAMENTS_SORT,
-} from "../constants/query_params";
-
-type Props = {
- items: TournamentPreview[];
- title: string;
- cardsPerPage: number;
- initialCardsCount?: number;
- withEmptyState?: boolean;
- disableClientSort?: boolean;
-};
-
-const TournamentsList: FC
+ {t.rich(keys.titleKey as RichKey, {
+ br: () =>
,
+ })}
+
+
+ + {t(keys.shownKey as PlainKey, { count })} +
+{title}
- {filteredItems.length === 0 && withEmptyState && ( -{t("noResults")}
- )}
-
-
-
- );
-};
-
-function filterItems(
- items: TournamentPreview[],
- searchString: string,
- sortBy: TournamentsSortBy | null
-) {
- let filteredItems;
-
- if (searchString) {
- const sanitizedSearchString = searchString.trim().toLowerCase();
- const words = sanitizedSearchString.split(/\s+/);
-
- filteredItems = items.filter((item) =>
- words.every((word) => item.name.toLowerCase().includes(word))
- );
- } else {
- filteredItems = items;
- }
-
- if (!sortBy) {
- return filteredItems;
- }
-
- return [...filteredItems].sort((a, b) => {
- switch (sortBy) {
- case TournamentsSortBy.PrizePoolDesc:
- return Number(b.prize_pool) - Number(a.prize_pool);
- case TournamentsSortBy.CloseDateAsc:
- return differenceInMilliseconds(
- new Date(a.close_date ?? 0),
- new Date(b.close_date ?? 0)
- );
- case TournamentsSortBy.StartDateDesc:
- return differenceInMilliseconds(
- new Date(b.start_date),
- new Date(a.start_date)
- );
- default:
- return 0;
- }
- });
-}
-
-export default TournamentsList;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_mobile_ctrl.tsx b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_mobile_ctrl.tsx
new file mode 100644
index 0000000000..dda37d5780
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_mobile_ctrl.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import React, { useState } from "react";
+
+import TournamentsFilter from "./tournaments_filter";
+import TournamentsInfo from "./tournaments_popover/tournaments_info";
+import TournamentsInfoButton from "./tournaments_popover/tournaments_info_button";
+import TournamentsSearch from "./tournaments_search";
+
+const TournamentsMobileCtrl: React.FC = () => {
+ const [isInfoOpen, setIsInfoOpen] = useState(true);
+
+ return (
+
- {filteredItems.slice(0, displayItemsCount).map((item) => (
-
- {hasMoreItems && (
-
-
-
- )}
-
+ {isInfoOpen && setIsInfoOpen(false)} />}
+
+ );
+};
+
+export default TournamentsMobileCtrl;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_popover/tournaments_info.tsx b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_popover/tournaments_info.tsx
new file mode 100644
index 0000000000..520864dab0
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_popover/tournaments_info.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import React from "react";
+
+import Button from "@/components/ui/button";
+import { useAuth } from "@/contexts/auth_context";
+import { useModal } from "@/contexts/modal_context";
+
+type Props = {
+ onClose: () => void;
+};
+
+const TournamentsInfo: React.FC
+ setIsInfoOpen((p) => !p)}
+ />
+
+
+
+
+
+
+ );
+};
+
+export default TournamentsInfo;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_popover/tournaments_info_button.tsx b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_popover/tournaments_info_button.tsx
new file mode 100644
index 0000000000..36efbc5caa
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_popover/tournaments_info_button.tsx
@@ -0,0 +1,43 @@
+import { useFloating } from "@floating-ui/react";
+import { useTranslations } from "next-intl";
+
+import Button from "@/components/ui/button";
+
+type Props = {
+ isOpen: boolean;
+ onClick?: () => void;
+ refs?: ReturnType+ {t("tournamentsInfoTitle")} +
+ +
+
+ {t("tournamentsInfoScoringLink")}
+
+
+ {t("tournamentsInfoPrizesLink")}
+
+
+
+ {isLoggedOut && (
+
+ )}
+
+
+
+ onOpenChange(false)} />
+
+ {children}
;
+ }
+
+ const titleKey = (
+ isSearching ? "tournamentsEmptySearchTitle" : "tournamentsEmptyDefaultTitle"
+ ) as PlainKey;
+
+ const bodyKey = (
+ isSearching ? "tournamentsEmptySearchBody" : "tournamentsEmptyDefaultBody"
+ ) as PlainKey;
+
+ return (
+
+
+ );
+};
+
+export default TournamentsResults;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_screen.tsx b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_screen.tsx
new file mode 100644
index 0000000000..bee2fd8163
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/components/tournaments_screen.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+
+import { TournamentPreview } from "@/types/projects";
+
+import TournamentsContainer from "./tournaments_container";
+import TournamentsHeader from "./tournaments_header";
+import TournamentsHero from "./tournaments_hero";
+import TournamentsMobileCtrl from "./tournaments_mobile_ctrl";
+import { TournamentsSectionProvider } from "./tournaments_provider";
+import { TournamentsSection } from "../types";
+import TournamentsResults from "./tournaments_results";
+
+type Props = {
+ current: TournamentsSection;
+ tournaments: TournamentPreview[];
+ children: React.ReactNode;
+ nowTs?: number;
+};
+
+const TournamentsScreen: React.FC
+
+ + {t(titleKey, { count })} +
+ ++ {t(bodyKey)} +
+
+
+ {children}
+
+
+
+
+ );
+};
+
+export default TournamentsSearch;
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/helpers/index.ts b/front_end/src/app/(main)/(tournaments)/tournaments/helpers/index.ts
new file mode 100644
index 0000000000..d668c6ab5b
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/helpers/index.ts
@@ -0,0 +1,39 @@
+import { isValid } from "date-fns";
+import { toDate } from "date-fns-tz";
+
+import { TournamentPreview, TournamentType } from "@/types/projects";
+
+import { TournamentsSection } from "../types";
+
+const archiveEndTs = (t: TournamentPreview) =>
+ [t.forecasting_end_date, t.close_date, t.start_date]
+ .map((s) => (s ? toDate(s.trim(), { timeZone: "UTC" }) : null))
+ .find((d) => d && isValid(d))
+ ?.getTime() ?? 0;
+
+export function selectTournamentsForSection(
+ tournaments: TournamentPreview[],
+ section: TournamentsSection
+): TournamentPreview[] {
+ if (section === "archived") {
+ const archived = tournaments.filter((t) => !t.is_ongoing);
+ archived.sort((a, b) => archiveEndTs(b) - archiveEndTs(a));
+ return archived;
+ }
+
+ const ongoing = tournaments.filter((t) => t.is_ongoing);
+
+ if (section === "series") {
+ return ongoing.filter((t) => t.type === TournamentType.QuestionSeries);
+ }
+
+ if (section === "indexes") {
+ return ongoing.filter((t) => t.type === TournamentType.Index);
+ }
+
+ return ongoing.filter(
+ (t) =>
+ t.type !== TournamentType.QuestionSeries &&
+ t.type !== TournamentType.Index
+ );
+}
diff --git a/front_end/src/app/(main)/(tournaments)/tournaments/helpers/tournament_filters.ts b/front_end/src/app/(main)/(tournaments)/tournaments/helpers/tournament_filters.ts
new file mode 100644
index 0000000000..67a29a63ea
--- /dev/null
+++ b/front_end/src/app/(main)/(tournaments)/tournaments/helpers/tournament_filters.ts
@@ -0,0 +1,72 @@
+import { differenceInMilliseconds } from "date-fns";
+
+import { TournamentPreview, TournamentsSortBy } from "@/types/projects";
+
+import {
+ TOURNAMENTS_SEARCH,
+ TOURNAMENTS_SORT,
+} from "../constants/query_params";
+
+type ParamsLike = Pick
-
- )}
-
- - {t("tournaments")} -
-{t("tournamentsHero1")}
-{t("tournamentsHero2")}
-- {t.rich("tournamentsHero3", { - scores: (chunks) => ( - {chunks} - ), - })} -
-- {t.rich("tournamentsHero4", { - email: (chunks) => ( - {chunks} - ), - })} -
-- -
-
- )}
-
- {
+ const next = e.relatedTarget as Node | null;
+ if (next && rootRef.current?.contains(next)) return;
+ collapseIfAllowed();
+ }}
+ onKeyDownCapture={(e) => {
+ if (e.key === "Escape") {
+ if (!(keepOpenWhenHasValue && value)) setOpen(false);
+ (e.target as HTMLElement)?.blur?.();
+ }
+ }}
+ >
+ {!isExpanded ? (
+
+ ) : (
+
+ );
+};
+
+export default ExpandableSearchInput;
diff --git a/front_end/src/components/search_input.tsx b/front_end/src/components/search_input.tsx
index 0957a6aa70..b1129689a0 100644
--- a/front_end/src/components/search_input.tsx
+++ b/front_end/src/components/search_input.tsx
@@ -1,12 +1,13 @@
import { faMagnifyingGlass, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Field, Input } from "@headlessui/react";
-import { ChangeEventHandler, FC, FormEvent } from "react";
+import React, { ChangeEventHandler, FC, FormEvent } from "react";
import Button from "@/components/ui/button";
import cn from "@/utils/core/cn";
type Size = "base" | "lg";
+type IconPosition = "right" | "left";
type Props = {
value: string;
@@ -20,6 +21,10 @@ type Props = {
eraseButtonClassName?: string;
submitButtonClassName?: string;
submitIconClassName?: string;
+ iconPosition?: IconPosition;
+ rightControlsClassName?: string;
+ rightButtonClassName?: string;
+ inputRef?: React.Ref