feat: add challenge and red-blue competitions across API and web

web/app/challenges/page.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import { RiArrowRightLine, RiAwardLine } from '@remixicon/react'
+import { fetchChallenges } from '@/service/challenges'
+import type { ChallengeListItem } from '@/service/challenges'
+
+export default function ChallengesListPage() {
+  const { t } = useTranslation()
+  const [challenges, setChallenges] = useState<ChallengeListItem[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const data = await fetchChallenges()
+        console.log('Loaded challenges:', data)
+        setChallenges(data)
+      }
+      catch (error) {
+        console.error('Failed to load challenges:', error)
+      }
+      finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  return (
+    <div className='min-h-screen bg-components-panel-bg'>
+      <div className='mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8'>
+        <div className='mb-8 text-center'>
+          <h1 className='mb-2 text-4xl font-bold text-text-primary'>{t('challenges.player.browse')}</h1>
+          <p className='text-lg text-text-secondary'>Test your skills and compete on the leaderboard</p>
+        </div>
+
+        {loading ? (
+          <div className='text-center text-text-tertiary'>{t('common.loading')}</div>
+        ) : challenges.length === 0 ? (
+          <div className='rounded-xl border border-divider-subtle bg-components-panel-bg p-12 text-center'>
+            <RiAwardLine className='mx-auto mb-4 h-12 w-12 text-text-quaternary' />
+            <div className='text-text-secondary'>No challenges available yet</div>
+          </div>
+        ) : (
+          <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>
+            {challenges.map(challenge => (
+              <Link
+                key={challenge.id}
+                href={`/challenges/${challenge.id}`}
+                className='group block'
+              >
+                <div className='h-full rounded-xl border border-divider-subtle bg-components-panel-bg p-6 shadow-xs transition-all hover:border-components-button-primary-bg hover:shadow-md'>
+                  <div className='mb-3 flex items-start justify-between'>
+                    <RiAwardLine className='h-8 w-8 text-util-colors-cyan-cyan-500' />
+                    <RiArrowRightLine className='h-5 w-5 text-text-quaternary transition-transform group-hover:translate-x-1' />
+                  </div>
+                  <h3 className='mb-2 text-lg font-semibold text-text-primary'>{challenge.name}</h3>
+                  {challenge.description && (
+                    <p className='mb-3 line-clamp-2 text-sm text-text-secondary'>{challenge.description}</p>
+                  )}
+                  {challenge.goal && (
+                    <div className='mt-4 rounded-lg bg-components-panel-on-panel-item-bg p-3'>
+                      <div className='mb-1 text-xs font-medium uppercase text-text-tertiary'>Goal</div>
+                      <div className='line-clamp-2 text-sm text-text-secondary'>{challenge.goal}</div>
+                    </div>
+                  )}
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}