Show qualification criteria on team leaderboard

app/features/leaderboards/routes/leaderboards.tsx

@@ -452,42 +452,59 @@ function TeamTable({
 }: {
   entries: NonNullable<SerializeFrom<typeof loader>["teamLeaderboard"]>;
 }) {
+  const { t } = useTranslation("common");
+  const data = useLoaderData<typeof loader>();
+  const isCurrentSeason = data.season === currentSeason(new Date())?.nth;
+  const showQualificationDividers = isCurrentSeason && entries.length > 20;
+
   return (
     <div className="placements__table">
-      {entries.map((entry) => {
+      {entries.map((entry, i) => {
         return (
-          <div key={entry.entryId} className="placements__table__row">
-            <div className="placements__table__inner-row">
-              <div className="placements__table__rank">
-                {entry.placementRank}
+          <React.Fragment key={entry.entryId}>
+            <div className="placements__table__row">
+              <div className="placements__table__inner-row">
+                <div className="placements__table__rank">
+                  {entry.placementRank}
+                </div>
+                {entry.team?.avatarUrl ? (
+                  <Link
+                    // TODO: can be made better when $narrowNotNull lands
+                    to={teamPage(entry.team.customUrl!)}
+                    // TODO: can be made better when $narrowNotNull lands
+                    title={entry.team.name!}
+                  >
+                    <Avatar
+                      size="xxs"
+                      url={userSubmittedImage(entry.team.avatarUrl)}
+                      className="placements__avatar"
+                    />
+                  </Link>
+                ) : null}
+                <div className="text-xs">
+                  {entry.members.map((member, i) => {
+                    return (
+                      <React.Fragment key={member.id}>
+                        <Link to={userPage(member)}>{member.discordName}</Link>
+                        {i !== entry.members.length - 1 ? ", " : null}
+                      </React.Fragment>
+                    );
+                  })}
+                </div>
+                <div className="placements__table__power">{entry.power}</div>
               </div>
-              {entry.team?.avatarUrl ? (
-                <Link
-                  // TODO: can be made better when $narrowNotNull lands
-                  to={teamPage(entry.team.customUrl!)}
-                  // TODO: can be made better when $narrowNotNull lands
-                  title={entry.team.name!}
-                >
-                  <Avatar
-                    size="xxs"
-                    url={userSubmittedImage(entry.team.avatarUrl)}
-                    className="placements__avatar"
-                  />
-                </Link>
-              ) : null}
-              <div className="text-xs">
-                {entry.members.map((member, i) => {
-                  return (
-                    <React.Fragment key={member.id}>
-                      <Link to={userPage(member)}>{member.discordName}</Link>
-                      {i !== entry.members.length - 1 ? ", " : null}
-                    </React.Fragment>
-                  );
-                })}
-              </div>
-              <div className="placements__table__power">{entry.power}</div>
             </div>
-          </div>
+            {i === 3 && showQualificationDividers ? (
+              <div className="placements__table__row placements__table__row__qualification">
+                {t("common:leaderboard.qualification.withBye")}
+              </div>
+            ) : null}
+            {i === 11 && showQualificationDividers ? (
+              <div className="placements__table__row placements__table__row__qualification">
+                {t("common:leaderboard.qualification")}
+              </div>
+            ) : null}
+          </React.Fragment>
         );
       })}
     </div>

app/features/sendouq/QRepository.server.ts

@@ -111,7 +111,7 @@ export async function findLookingGroups({
         eb(
           "Group.latestActionAt",
           ">",
-          sql`(unixepoch() - ${SECONDS_TILL_STALE})`,
+          sql<number>`(unixepoch() - ${SECONDS_TILL_STALE})`,
         ),
         eb("Group.id", "=", ownGroupId),
       ]),

app/features/top-search/top-search.css

@@ -52,6 +52,13 @@ a.placements__table__row:hover {
   border-radius: var(--rounded);
 }
 
+.placements__table__row__qualification {
+  font-size: var(--fonts-xs);
+  font-weight: var(--semi-bold);
+  justify-content: center;
+  background-color: var(--bg-lightest);
+}
+
 .placements__table__weapon {
   background-color: var(--bg-darker);
   border-radius: 100%;

public/locales/en/common.json

@@ -201,6 +201,8 @@
   "leaderboard.noPlayers": "No players on the leaderboard yet",
   "leaderboard.noTeams": "No teams on the leaderboard yet",
   "leaderboard.updateInfo": "Leaderboard is updated once every 30 minutes",
+  "leaderboard.qualification": "Qualification for Season Finale",
+  "leaderboard.qualification.withBye": "Qualification for Season Finale with a BYE",
 
   "chat.connected": "Connected",
   "chat.disconnected": "Disconnected",