feat: refine tabs translations and sheet

Author: coder13

AGENTS.md

@@ -109,7 +109,6 @@ This is a React + TypeScript web application for viewing WCA (World Cube Associa
 - **New files:** The agent can create new files for features or tests, but all new code should be covered by tests.
 - **Comments:** Add comments to explain complex logic; maintainability is valued.
 - **Composable components:** Prefer creating small, reusable components over monolithic views.
-- **Translations:** Default to updating only `src/i18n/en/translation.yaml` unless the task explicitly requests other locales.
 - **Keep instructions fresh:** When you discover new working conventions or project expectations, update this `AGENTS.md` to capture them.
 
 ---

src/i18n/es/translation.yaml

@@ -23,3 +23,22 @@ common:
       444bf: 4x4x4 Ciega
       555bf: 5x5x5 Ciega
       333mbf: 3x3x3 Multi Ciega
+header:
+  tabs:
+    groups: 'Groups'
+    events: 'Events'
+    schedule: 'Schedule'
+    rankings: 'Rankings'
+    scramblers: 'Scramblers'
+    stream: 'Stream'
+    more: 'More'
+    information: 'Information'
+    extraInfo: 'Extra Info'
+    extraInfoOptions: 'Extra Info'
+competition:
+  tabs:
+    title: Extra Information
+    view: View Competition Tabs
+    error: Unable to load competition tabs.
+    collapseAll: Collapse all
+    expandAll: Expand all

src/i18n/fr/translation.yaml

@@ -118,6 +118,10 @@ header:
     rankings: 'Classements'
     scramblers: 'Mélangeurs'
     stream: 'Stream'
+    more: 'More'
+    information: 'Information'
+    extraInfo: 'Extra Info'
+    extraInfoOptions: 'Extra Info'
 home:
   subtitle: 'Apprenez tout ce que vous devez savoir sur les tâches qui vous ont été attribuées aux compétitions WCA !'
   explanation: 'Remarque : Ce site web est un outil pratique pour les organisateurs, délégués et compétiteurs. Les informations fournies sont basées sur le planning prévisionnel. Pensez à consulter régulièrement la page de la compétition pour obtenir les informations les plus récentes. Les horaires de début et de fin peuvent varier.'
@@ -128,6 +132,12 @@ home:
   upcomingCompetitions: 'Compétitions à venir'
   yourCompetitions: 'Vos compétitions'
 competition:
+  tabs:
+    title: Extra Information
+    view: View Competition Tabs
+    error: Unable to load competition tabs.
+    collapseAll: Collapse all
+    expandAll: Expand all
   competitors:
     viewMyAssignments: 'Voir mes affectations'
     viewCompetitionInformation: 'Voir les informations sur la compétition'

src/i18n/ja/translation.yaml

@@ -23,3 +23,22 @@ common:
       444bf: 4x4x4 目隠し
       555bf: 5x5x5 目隠し
       333mbf: 3x3x3 複数目隠し
+header:
+  tabs:
+    groups: 'Groups'
+    events: 'Events'
+    schedule: 'Schedule'
+    rankings: 'Rankings'
+    scramblers: 'Scramblers'
+    stream: 'Stream'
+    more: 'More'
+    information: 'Information'
+    extraInfo: 'Extra Info'
+    extraInfoOptions: 'Extra Info'
+competition:
+  tabs:
+    title: Extra Information
+    view: View Competition Tabs
+    error: Unable to load competition tabs.
+    collapseAll: Collapse all
+    expandAll: Expand all

src/i18n/ko/translation.yaml

@@ -128,6 +128,10 @@ header:
     rankings: 순위
     scramblers: 스크램블러
     stream: 스트리밍
+    more: 'More'
+    information: 'Information'
+    extraInfo: 'Extra Info'
+    extraInfoOptions: 'Extra Info'
 home:
   subtitle: WCA 대회에 대한 모든 정보를 알아보세요!
   explanation: '참고: 이 웹사이트는 주최자, 파견위원 및 선수를 위한 편의 도구로써 존재합니다. 제공된 정보는 일정에 따라 예정된 데이터를 기반으로 합니다. 가장 최신 정보를 얻으려면 대회에 주의를 기울여 주세요. 시작 및 종료 시각은 변동될 수 있습니다.'
@@ -138,6 +142,12 @@ home:
   upcomingCompetitions: 다가오는 대회
   yourCompetitions: 귀하의 대회
 competition:
+  tabs:
+    title: Extra Information
+    view: View Competition Tabs
+    error: Unable to load competition tabs.
+    collapseAll: Collapse all
+    expandAll: Expand all
   competitors:
     viewMyAssignments: 나의 배정 보기
     viewCompetitionInformation: 대회 정보 보기

src/i18n/nl/translation.yaml

@@ -126,6 +126,10 @@ header:
     rankings: 'Ranglijsten'
     scramblers: 'Scramblers'
     stream: 'Stream'
+    more: 'More'
+    information: 'Information'
+    extraInfo: 'Extra Info'
+    extraInfoOptions: 'Extra Info'
 home:
   subtitle: 'Leer alles over je taken op je aankomende WCA competitie weten!'
   explanation: 'Note: This website exists as a convenience tool for organizers, delegates, and competitors. The information provided is based on scheduled data. Pay close attention to the competition for the most up-to-date information. Start and end times can fluctuate.'
@@ -136,6 +140,12 @@ home:
   upcomingCompetitions: 'Aankomende Competities'
   yourCompetitions: 'Jouw Competities'
 competition:
+  tabs:
+    title: Extra Information
+    view: View Competition Tabs
+    error: Unable to load competition tabs.
+    collapseAll: Collapse all
+    expandAll: Expand all
   competitors:
     viewCompetitionInformation: 'Bekijk de Competitie Informatie'
     searchCompetitors: 'Zoek deelnemers'

src/i18n/pl/translation.yaml

@@ -137,6 +137,10 @@ header:
     rankings: 'Rankingi'
     scramblers: 'Mieszacze'
     stream: 'Stream'
+    more: 'More'
+    information: 'Information'
+    extraInfo: 'Extra Info'
+    extraInfoOptions: 'Extra Info'
 home:
   subtitle: 'Naucz się wszystkiego, co potrzebne o zadaniach na zawodach WCA!'
   explanation: 'Informacja: Ta strona jest narzędziem pomocniczym dla organizatorów, delegatów i zawodników. Informacje są oparte na danych z harmonogramu. Zwróć uwagę na komunikaty na miejscu zawodów, aby uzyskać najbardziej aktualne informacje. Godziny rozpoczęcia i zakończenia mogą się zmieniać.'
@@ -147,6 +151,12 @@ home:
   upcomingCompetitions: 'Nadchodzące zawody'
   yourCompetitions: 'Twoje zawody'
 competition:
+  tabs:
+    title: Extra Information
+    view: View Competition Tabs
+    error: Unable to load competition tabs.
+    collapseAll: Collapse all
+    expandAll: Expand all
   competitors:
     viewCompetitionInformation: 'Wyświetl informacje o zawodach'
     searchCompetitors: 'Wyszukaj zawodników'

src/i18n/zh-CN/translation.yaml

@@ -24,3 +24,22 @@ common:
       444bf: 四盲
       555bf: 五盲
       333mbf: 多盲
+header:
+  tabs:
+    groups: 'Groups'
+    events: 'Events'
+    schedule: 'Schedule'
+    rankings: 'Rankings'
+    scramblers: 'Scramblers'
+    stream: 'Stream'
+    more: 'More'
+    information: 'Information'
+    extraInfo: 'Extra Info'
+    extraInfoOptions: 'Extra Info'
+competition:
+  tabs:
+    title: Extra Information
+    view: View Competition Tabs
+    error: Unable to load competition tabs.
+    collapseAll: Collapse all
+    expandAll: Expand all

src/layouts/CompetitionLayout/CompetitionTabsSheet.tsx

@@ -61,8 +61,13 @@ export const CompetitionTabsSheet = ({
               </div>
               <div className="flex flex-col gap-2 overflow-y-auto pb-6">
                 {tabs.map((tab) => (
-                  <Link key={tab.href} to={tab.href} className="link-card" onClick={onClose}>
-                    {tab.text}
+                  <Link
+                    key={tab.href}
+                    to={tab.href}
+                    className="flex items-center justify-between gap-2 rounded-lg border border-tertiary-weak bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800"
+                    onClick={onClose}>
+                    <span>{tab.text}</span>
+                    <i className="fa fa-chevron-right text-xs text-slate-400" aria-hidden="true" />
                   </Link>
                 ))}
                 {tabPanels && tabPanels.length > 0 && (
@@ -76,9 +81,13 @@ export const CompetitionTabsSheet = ({
                       <Link
                         key={tab.href}
                         to={tab.href}
-                        className="block rounded px-2 py-1 text-slate-600 hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-800"
+                        className="flex items-center justify-between gap-2 rounded-md px-2 py-1 text-slate-600 transition hover:bg-slate-100 dark:text-gray-300 dark:hover:bg-gray-800"
                         onClick={onClose}>
-                        {tab.text}
+                        <span>{tab.text}</span>
+                        <i
+                          className="fa fa-chevron-right text-[10px] text-slate-400"
+                          aria-hidden="true"
+                        />
                       </Link>
                     ))}
                   </div>

src/pages/Competition/Tabs/index.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { Container, IconButton, MarkdownContent } from '@/components';
+import { Container } from '@/components/Container';
+import { IconButton } from '@/components/IconButton/IconButton';
 import { LinkButton } from '@/components/LinkButton';
+import { MarkdownContent } from '@/components/MarkdownContent';
 import { useCompetitionTabs } from '@/hooks/queries/useCompetitionTabs';
 import {
   TabWithSlug,
@@ -145,11 +147,6 @@ export default function CompetitionTabs() {
     <div className="flex justify-center w-full">
       <Container className="p-2 space-y-4">
         <div className="flex flex-wrap items-center gap-3">
-          <LinkButton
-            to={`/competitions/${competitionId}/information`}
-            title={t('competition.competitors.viewCompetitionInformation')}
-            variant="blue"
-          />
           <div className="flex items-center gap-2 ml-auto">
             <IconButton
               type="button"
@@ -179,6 +176,11 @@ export default function CompetitionTabs() {
             <MarkdownContent content={removeDuplicateTitleLine(tab.content, tab.name)} />
           </TabPanel>
         ))}
+        <LinkButton
+          to={`/competitions/${competitionId}/information`}
+          title={t('competition.competitors.viewCompetitionInformation')}
+          variant="blue"
+        />
       </Container>
     </div>
   );