feat: enhance exam loading functionality with examId support and update UI components

frontend/src/components/MyExams.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import * as examApi from '../api/examApi'
+import type { Exam } from '../types'
 
 interface SavedExam {
   id: number
@@ -12,13 +13,18 @@ interface SavedExam {
   updated_at: number
 }
 
-export default function MyExams() {
+interface Props {
+  onLoadExam: (exam: Exam, saveToWorkspace?: boolean, examId?: number | null) => void
+}
+
+export default function MyExams({ onLoadExam }: Props) {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [exams, setExams] = useState<SavedExam[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null)
+  const [startingId, setStartingId] = useState<number | null>(null)
 
   const loadExams = useCallback(async () => {
     setLoading(true)
@@ -51,6 +57,17 @@ export default function MyExams() {
     navigate('/exam-editor/new')
   }
 
+  const startExam = async (id: number) => {
+    setStartingId(id)
+    try {
+      const exam = await examApi.getExam(id)
+      onLoadExam(exam, false, id)
+    } catch (e) {
+      setError((e as Error).message)
+      setStartingId(null)
+    }
+  }
+
   const formatDate = (ts: number) => {
     const d = new Date(ts * 1000)
     return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
@@ -104,9 +121,17 @@ export default function MyExams() {
                 </div>
               </div>
               <div className="workspace-card-actions">
+                <button
+                  className="btn btn-primary btn-sm"
+                  onClick={() => void startExam(exam.id)}
+                  disabled={startingId === exam.id}
+                >
+                  {startingId === exam.id ? t('common.loading') : t('workspace.takeExam')}
+                </button>
                 <button
                   className="btn btn-sm"
                   onClick={() => navigate(`/exam-editor/${exam.id}`)}
+                  disabled={startingId === exam.id}
                 >
                   {t('common.edit')}
                 </button>
@@ -124,6 +149,7 @@ export default function MyExams() {
                     className="btn btn-ghost btn-sm admin-btn-danger-ghost"
                     onClick={() => setDeleteConfirm(exam.id)}
                     title={t('common.delete')}
+                    disabled={startingId === exam.id}
                   >
                     ✕
                   </button>