feat: add collections management and study coach features

- Implemented collection repository with CRUD operations for user collections.
- Created routes for managing collections, including listing, creating, updating, and deleting collections.
- Added sharing functionality for exams, allowing users to share and clone exams.
- Developed a study coach service that analyzes exam results and provides study tips based on weak areas.
- Introduced frontend components for managing collections, sharing exams, and displaying study coach insights.
- Enhanced user experience with loading states and error handling in shared 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 * as collectionApi from '../api/collectionApi'
 import type { Exam } from '../types'
 
 interface SavedExam {
@@ -11,27 +12,57 @@ interface SavedExam {
   question_count: number
   created_at: number
   updated_at: number
+  share_token: string | null
+  is_favorite: number
+  tags: string
+  collection_id: number | null
 }
 
 interface Props {
   onLoadExam: (exam: Exam, saveToWorkspace?: boolean, examId?: number | null) => void
 }
 
-export default function MyExams({ onLoadExam }: Props) {
+type CollectionFilter = number | null | 'all' | 'uncategorized'
+
+export default function MyExams({ onLoadExam }: Readonly<Props>) {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [exams, setExams] = useState<SavedExam[]>([])
+  const [collections, setCollections] = useState<collectionApi.Collection[]>([])
   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 [shareOpenId, setShareOpenId] = useState<number | null>(null)
+  const [sharingId, setSharingId] = useState<number | null>(null)
+  const [duplicatingId, setDuplicatingId] = useState<number | null>(null)
+  const [exportingId, setExportingId] = useState<number | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [activeFilter, setActiveFilter] = useState<CollectionFilter>('all')
+  const [showNewCollection, setShowNewCollection] = useState(false)
+  const [newCollectionName, setNewCollectionName] = useState('')
+  const [creatingCollection, setCreatingCollection] = useState(false)
+  const [moveMenuExamId, setMoveMenuExamId] = useState<number | null>(null)
+  const [movingExamId, setMovingExamId] = useState<number | null>(null)
+  const [editingCollectionId, setEditingCollectionId] = useState<number | null>(null)
+  const [editingCollectionName, setEditingCollectionName] = useState('')
+  const [deleteCollectionId, setDeleteCollectionId] = useState<number | null>(null)
+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set())
+  const [batchMoveOpen, setBatchMoveOpen] = useState(false)
+  const [batchDeleting, setBatchDeleting] = useState(false)
+  const [batchExporting, setBatchExporting] = useState(false)
+  const [batchMoving, setBatchMoving] = useState(false)
 
-  const loadExams = useCallback(async () => {
+  const loadData = useCallback(async () => {
     setLoading(true)
     setError(null)
     try {
-      const data = await examApi.listExams()
-      setExams(data)
+      const [examData, collectionData] = await Promise.all([
+        examApi.listExams(),
+        collectionApi.listCollections(),
+      ])
+      setExams(examData)
+      setCollections(collectionData)
     } catch (e) {
       setError((e as Error).message)
     } finally {
@@ -40,14 +71,14 @@ export default function MyExams({ onLoadExam }: Props) {
   }, [])
 
   useEffect(() => {
-    void loadExams()
-  }, [loadExams])
+    void loadData()
+  }, [loadData])
 
   const deleteExam = async (id: number) => {
     try {
       await examApi.deleteExam(id)
       setDeleteConfirm(null)
-      void loadExams()
+      void loadData()
     } catch (e) {
       setError((e as Error).message)
     }
@@ -68,97 +99,707 @@ export default function MyExams({ onLoadExam }: Props) {
     }
   }
 
+  const handleShare = async (id: number) => {
+    setSharingId(id)
+    try {
+      const res = await examApi.shareExam(id)
+      const url = `${window.location.origin}/share/${res.shareToken}`
+      await navigator.clipboard.writeText(url)
+      setShareOpenId(null)
+      setExams((prev) => prev.map((e) => (e.id === id ? { ...e, share_token: res.shareToken } : e)))
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setSharingId(null)
+    }
+  }
+
+  const handleUnshare = async (id: number) => {
+    try {
+      await examApi.unshareExam(id)
+      setShareOpenId(null)
+      setExams((prev) => prev.map((e) => (e.id === id ? { ...e, share_token: null } : e)))
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }
+
+  const handleFavorite = async (id: number, isFavorite: boolean) => {
+    try {
+      await examApi.setFavorite(id, isFavorite)
+      setExams((prev) => prev.map((e) => {
+        if (e.id !== id) return e
+        const updated = { ...e, is_favorite: isFavorite ? 1 : 0 }
+        return updated
+      }).sort((a, b) => (b.is_favorite - a.is_favorite) || (b.updated_at - a.updated_at)))
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }
+
+  const handleExport = async (id: number, title: string) => {
+    setExportingId(id)
+    try {
+      const blob = await examApi.exportExam(id)
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.json`
+      a.click()
+      URL.revokeObjectURL(url)
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setExportingId(null)
+    }
+  }
+
+  const handleDuplicate = async (id: number) => {
+    setDuplicatingId(id)
+    try {
+      await examApi.duplicateExam(id)
+      void loadData()
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setDuplicatingId(null)
+    }
+  }
+
+  const handleCreateCollection = async () => {
+    const name = newCollectionName.trim()
+    if (!name) return
+    setCreatingCollection(true)
+    try {
+      await collectionApi.createCollection(name)
+      setNewCollectionName('')
+      setShowNewCollection(false)
+      void loadData()
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setCreatingCollection(false)
+    }
+  }
+
+  const handleMoveExam = async (examId: number, collectionId: number | null) => {
+    setMovingExamId(examId)
+    try {
+      await collectionApi.moveExamToCollection(examId, collectionId)
+      setMoveMenuExamId(null)
+      setExams((prev) => prev.map((e) => e.id === examId ? { ...e, collection_id: collectionId } : e))
+      setCollections((prev) => prev.map((c) => {
+        if (collectionId !== null && c.id === collectionId) return { ...c, exam_count: c.exam_count + 1 }
+        const oldExam = exams.find((e) => e.id === examId)
+        if (oldExam?.collection_id !== null && c.id === oldExam?.collection_id) return { ...c, exam_count: Math.max(0, c.exam_count - 1) }
+        return c
+      }))
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setMovingExamId(null)
+    }
+  }
+
+  const handleRenameCollection = async (id: number) => {
+    const name = editingCollectionName.trim()
+    if (!name) {
+      setEditingCollectionId(null)
+      return
+    }
+    try {
+      await collectionApi.updateCollection(id, name)
+      setCollections((prev) => prev.map((c) => c.id === id ? { ...c, name } : c))
+      setEditingCollectionId(null)
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }
+
+  const handleDeleteCollection = async (id: number) => {
+    try {
+      await collectionApi.deleteCollection(id)
+      setDeleteCollectionId(null)
+      setExams((prev) => prev.map((e) => e.collection_id === id ? { ...e, collection_id: null } : e))
+      setCollections((prev) => prev.filter((c) => c.id !== id))
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }
+
+  const toggleSelect = (id: number) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const selectAllFiltered = () => {
+    setSelectedIds(new Set(filteredExams.map((e) => e.id)))
+  }
+
+  const clearSelection = () => {
+    setSelectedIds(new Set())
+  }
+
+  const handleBatchDelete = async () => {
+    if (selectedIds.size === 0) return
+    if (!window.confirm(t('workspace.batchDeleteConfirm'))) return
+    setBatchDeleting(true)
+    try {
+      await examApi.batchDelete(Array.from(selectedIds))
+      setSelectedIds(new Set())
+      void loadData()
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setBatchDeleting(false)
+    }
+  }
+
+  const handleBatchExport = async () => {
+    if (selectedIds.size === 0) return
+    setBatchExporting(true)
+    try {
+      for (const id of selectedIds) {
+        const exam = exams.find((e) => e.id === id)
+        if (exam) {
+          const blob = await examApi.exportExam(id)
+          const url = URL.createObjectURL(blob)
+          const a = document.createElement('a')
+          a.href = url
+          a.download = `${exam.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.json`
+          document.body.appendChild(a)
+          a.click()
+          document.body.removeChild(a)
+          URL.revokeObjectURL(url)
+        }
+      }
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setBatchExporting(false)
+    }
+  }
+
+  const handleBatchMove = async (collectionId: number | null) => {
+    if (selectedIds.size === 0) return
+    setBatchMoving(true)
+    try {
+      for (const id of selectedIds) {
+        await collectionApi.moveExamToCollection(id, collectionId)
+      }
+      setBatchMoveOpen(false)
+      setSelectedIds(new Set())
+      void loadData()
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setBatchMoving(false)
+    }
+  }
+
   const formatDate = (ts: number) => {
     const d = new Date(ts * 1000)
     return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
   }
 
+  const parseTags = (tagsJson: string): string[] => {
+    try {
+      const parsed = JSON.parse(tagsJson)
+      return Array.isArray(parsed) ? parsed : []
+    } catch {
+      return []
+    }
+  }
+
+  const filteredExams = exams.filter((exam) => {
+    if (!searchQuery.trim()) return true
+    const q = searchQuery.toLowerCase()
+    const tags = parseTags(exam.tags)
+    return (
+      exam.title.toLowerCase().includes(q) ||
+      (exam.subtitle?.toLowerCase().includes(q) ?? false) ||
+      tags.some((t) => t.toLowerCase().includes(q))
+    )
+  }).filter((exam) => {
+    if (activeFilter === 'all') return true
+    if (activeFilter === 'uncategorized') return exam.collection_id === null
+    return exam.collection_id === activeFilter
+  })
+
+  const uncategorizedCount = exams.filter((e) => e.collection_id === null).length
+
   return (
-    <div className="workspace-section fade-in">
-      <div className="workspace-section-header">
-        <div>
-          <div className="workspace-section-eyebrow">{t('workspace.myWorkspace')}</div>
-          <h2 className="workspace-section-title">{t('workspace.myExams')}</h2>
-        </div>
-        <button className="btn btn-primary btn-sm" onClick={createNewExam}>
-          + {t('workspace.newExam')}
-        </button>
-      </div>
-
-      {error && (
-        <div className="workspace-alert workspace-alert-error">
-          <span>{error}</span>
-          <button onClick={() => setError(null)} className="workspace-alert-close">×</button>
-        </div>
-      )}
-
-      {loading ? (
-        <div className="workspace-empty">{t('common.loading')}</div>
-      ) : exams.length === 0 ? (
-        <div className="workspace-empty">
-          <div className="workspace-empty-icon">◇</div>
-          <div className="workspace-empty-title">{t('workspace.noSavedExams')}</div>
-          <div className="workspace-empty-desc">
-            {t('workspace.noSavedExamsDesc')}
-          </div>
-          <button className="btn btn-primary" onClick={createNewExam} style={{ marginTop: 16 }}>
-            {t('workspace.createFirstExam')}
+    <div className="workspace-section fade-in" style={{ display: 'flex', gap: 20 }}>
+      {/* Collections Sidebar */}
+      <div style={{ width: 220, flexShrink: 0 }}>
+        <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-3)', marginBottom: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          {t('workspace.collections')}
+          <button
+            className="btn btn-ghost btn-sm"
+            style={{ fontSize: 16, padding: '2px 6px', lineHeight: 1 }}
+            onClick={() => setShowNewCollection(true)}
+            title={t('workspace.newCollection')}
+          >
+            +
           </button>
         </div>
-      ) : (
-        <div className="workspace-list">
-          {exams.map((exam) => (
-            <div key={exam.id} className="workspace-card">
-              <div className="workspace-card-body">
-                <div className="workspace-card-title">{exam.title}</div>
-                {exam.subtitle && (
-                  <div className="workspace-card-sub">{exam.subtitle}</div>
-                )}
-                <div className="workspace-card-meta">
-                  <span>{exam.question_count} {exam.question_count === 1 ? t('common.question') : t('common.questions')}</span>
-                  <span>·</span>
-                  <span>{t('workspace.updated')} {formatDate(exam.updated_at)}</span>
+
+        {showNewCollection && (
+          <div style={{ marginBottom: 8, display: 'flex', gap: 4 }}>
+            <input
+              type="text"
+              className="input"
+              placeholder={t('workspace.collectionNamePlaceholder')}
+              value={newCollectionName}
+              onChange={(e) => setNewCollectionName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') void handleCreateCollection() }}
+              style={{ fontSize: 12, padding: '4px 8px', flex: 1 }}
+              autoFocus
+            />
+            <button className="btn btn-sm btn-primary" onClick={() => void handleCreateCollection()} disabled={creatingCollection} style={{ fontSize: 11, padding: '4px 8px' }}>
+              {t('workspace.create')}
+            </button>
+            <button className="btn btn-sm btn-ghost" onClick={() => { setShowNewCollection(false); setNewCollectionName('') }} style={{ fontSize: 11, padding: '4px 8px' }}>
+              {t('common.cancel')}
+            </button>
+          </div>
+        )}
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <button
+            className={`btn btn-ghost btn-sm${activeFilter === 'all' ? ' active' : ''}`}
+            onClick={() => setActiveFilter('all')}
+            style={{ justifyContent: 'space-between', textAlign: 'left', fontWeight: activeFilter === 'all' ? 600 : 400 }}
+          >
+            <span>{t('workspace.allExams')}</span>
+            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{exams.length}</span>
+          </button>
+          <button
+            className={`btn btn-ghost btn-sm${activeFilter === 'uncategorized' ? ' active' : ''}`}
+            onClick={() => setActiveFilter('uncategorized')}
+            style={{ justifyContent: 'space-between', textAlign: 'left', fontWeight: activeFilter === 'uncategorized' ? 600 : 400 }}
+          >
+            <span>{t('workspace.uncategorized')}</span>
+            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{uncategorizedCount}</span>
+          </button>
+          {collections.map((col) => (
+            <div key={col.id} style={{ position: 'relative' }}>
+              {editingCollectionId === col.id ? (
+                <div style={{ display: 'flex', gap: 4, padding: '2px 0' }}>
+                  <input
+                    type="text"
+                    className="input"
+                    value={editingCollectionName}
+                    onChange={(e) => setEditingCollectionName(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') void handleRenameCollection(col.id)
+                      if (e.key === 'Escape') setEditingCollectionId(null)
+                    }}
+                    onBlur={() => void handleRenameCollection(col.id)}
+                    style={{ fontSize: 12, padding: '3px 6px', flex: 1 }}
+                    autoFocus
+                  />
                 </div>
-              </div>
-              <div className="workspace-card-actions">
+              ) : (
                 <button
-                  className="btn btn-primary btn-sm"
-                  onClick={() => void startExam(exam.id)}
-                  disabled={startingId === exam.id}
+                  className={`btn btn-ghost btn-sm${activeFilter === col.id ? ' active' : ''}`}
+                  onClick={() => setActiveFilter(col.id)}
+                  onContextMenu={(e) => {
+                    e.preventDefault()
+                    setEditingCollectionName(col.name)
+                    setEditingCollectionId(col.id)
+                  }}
+                  style={{ justifyContent: 'space-between', textAlign: 'left', fontWeight: activeFilter === col.id ? 600 : 400 }}
                 >
-                  {startingId === exam.id ? t('common.loading') : t('workspace.takeExam')}
+                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{col.name}</span>
+                  <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', flexShrink: 0 }}>{col.exam_count}</span>
                 </button>
-                <button
-                  className="btn btn-sm"
-                  onClick={() => navigate(`/exam-editor/${exam.id}`)}
-                  disabled={startingId === exam.id}
-                >
-                  {t('common.edit')}
-                </button>
-                {deleteConfirm === exam.id ? (
-                  <div className="workspace-delete-confirm">
-                    <button className="btn btn-sm admin-btn-danger" onClick={() => void deleteExam(exam.id)}>
+              )}
+              {activeFilter === col.id && editingCollectionId !== col.id && (
+                <div style={{ display: 'flex', gap: 4, padding: '0 8px 4px', marginTop: -2 }}>
+                  <button className="btn btn-ghost btn-sm" style={{ fontSize: 10, padding: '2px 6px' }} onClick={() => { setEditingCollectionName(col.name); setEditingCollectionId(col.id) }}>
+                    {t('workspace.rename')}
+                  </button>
+                  <button className="btn btn-ghost btn-sm admin-btn-danger-ghost" style={{ fontSize: 10, padding: '2px 6px' }} onClick={() => setDeleteCollectionId(col.id)}>
+                    {t('common.delete')}
+                  </button>
+                </div>
+              )}
+              {deleteCollectionId === col.id && (
+                <div style={{ padding: '4px 8px', fontSize: 11, background: 'var(--wrong-weak)', borderRadius: 6, margin: '2px 0' }}>
+                  <div style={{ marginBottom: 4 }}>{t('workspace.deleteCollectionConfirm')}</div>
+                  <div style={{ display: 'flex', gap: 4 }}>
+                    <button className="btn btn-sm admin-btn-danger" style={{ fontSize: 10, padding: '2px 8px' }} onClick={() => void handleDeleteCollection(col.id)}>
                       {t('common.confirm')}
                     </button>
-                    <button className="btn btn-ghost btn-sm" onClick={() => setDeleteConfirm(null)}>
+                    <button className="btn btn-sm btn-ghost" style={{ fontSize: 10, padding: '2px 8px' }} onClick={() => setDeleteCollectionId(null)}>
                       {t('common.cancel')}
                     </button>
                   </div>
-                ) : (
-                  <button
-                    className="btn btn-ghost btn-sm admin-btn-danger-ghost"
-                    onClick={() => setDeleteConfirm(exam.id)}
-                    title={t('common.delete')}
-                    disabled={startingId === exam.id}
-                  >
-                    ✕
-                  </button>
-                )}
-              </div>
+                </div>
+              )}
             </div>
           ))}
         </div>
-      )}
+      </div>
+
+      {/* Exams List */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div className="workspace-section-header">
+          <div>
+            <div className="workspace-section-eyebrow">{t('workspace.myWorkspace')}</div>
+            <h2 className="workspace-section-title">{t('workspace.myExams')}</h2>
+          </div>
+          <button className="btn btn-primary btn-sm" onClick={createNewExam}>
+            + {t('workspace.newExam')}
+          </button>
+        </div>
+
+        {/* Search */}
+        <div style={{ marginBottom: 16 }}>
+          <input
+            type="text"
+            className="input"
+            placeholder={t('workspace.searchExams')}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{ maxWidth: 400 }}
+          />
+        </div>
+
+        {/* Batch toolbar */}
+        {!loading && filteredExams.length > 0 && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
+            <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, cursor: 'pointer', userSelect: 'none' }}>
+              <input
+                type="checkbox"
+                checked={selectedIds.size > 0 && selectedIds.size === filteredExams.length}
+                onChange={() => {
+                  if (selectedIds.size === filteredExams.length) clearSelection()
+                  else selectAllFiltered()
+                }}
+                ref={(el) => {
+                  if (el) el.indeterminate = selectedIds.size > 0 && selectedIds.size < filteredExams.length
+                }}
+              />
+              {selectedIds.size === 0 ? t('workspace.batchSelectAll') : t('workspace.batchSelected', { count: selectedIds.size })}
+            </label>
+            {selectedIds.size > 0 && (
+              <>
+                <div style={{ width: 1, height: 16, background: 'var(--line-2)' }} />
+                <button
+                  className="btn btn-sm admin-btn-danger-ghost"
+                  onClick={() => void handleBatchDelete()}
+                  disabled={batchDeleting}
+                  style={{ fontSize: 12 }}
+                >
+                  {batchDeleting ? t('common.loading') : `${t('common.delete')} (${selectedIds.size})`}
+                </button>
+                <button
+                  className="btn btn-sm btn-ghost"
+                  onClick={() => void handleBatchExport()}
+                  disabled={batchExporting}
+                  style={{ fontSize: 12 }}
+                >
+                  {batchExporting ? t('common.loading') : `${t('workspace.export')} (${selectedIds.size})`}
+                </button>
+                <div style={{ position: 'relative' }}>
+                  <button
+                    className="btn btn-sm btn-ghost"
+                    onClick={() => setBatchMoveOpen((v) => !v)}
+                    disabled={batchMoving}
+                    style={{ fontSize: 12 }}
+                  >
+                    {batchMoving ? t('common.loading') : `${t('workspace.moveTo')} (${selectedIds.size})`}
+                  </button>
+                  {batchMoveOpen && (
+                    <div
+                      style={{
+                        position: 'absolute',
+                        left: 0,
+                        top: 'calc(100% + 4px)',
+                        zIndex: 10,
+                        minWidth: 180,
+                        background: 'var(--paper)',
+                        border: '1px solid var(--line-2)',
+                        borderRadius: 8,
+                        boxShadow: 'var(--shadow-md)',
+                        padding: '6px 0',
+                      }}
+                    >
+                      <button
+                        className="user-menu-item"
+                        style={{ fontSize: 13 }}
+                        onClick={() => void handleBatchMove(null)}
+                      >
+                        {t('workspace.uncategorized')}
+                      </button>
+                      {collections.map((col) => (
+                        <button
+                          key={col.id}
+                          className="user-menu-item"
+                          style={{ fontSize: 13 }}
+                          onClick={() => void handleBatchMove(col.id)}
+                        >
+                          {col.name}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        )}
+
+        {error && (
+          <div className="workspace-alert workspace-alert-error">
+            <span>{error}</span>
+            <button onClick={() => setError(null)} className="workspace-alert-close">×</button>
+          </div>
+        )}
+
+        {loading ? (
+          <div className="workspace-empty">{t('common.loading')}</div>
+        ) : filteredExams.length === 0 ? (
+          <div className="workspace-empty">
+            <div className="workspace-empty-icon">◇</div>
+            <div className="workspace-empty-title">
+              {searchQuery || activeFilter !== 'all' ? t('workspace.noSearchResults') : t('workspace.noSavedExams')}
+            </div>
+            <div className="workspace-empty-desc">
+              {searchQuery || activeFilter !== 'all' ? t('workspace.noSearchResultsDesc') : t('workspace.noSavedExamsDesc')}
+            </div>
+            {!searchQuery && activeFilter === 'all' && (
+              <button className="btn btn-primary" onClick={createNewExam} style={{ marginTop: 16 }}>
+                {t('workspace.createFirstExam')}
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="workspace-list">
+            {filteredExams.map((exam) => {
+              const tags = parseTags(exam.tags)
+              return (
+                <div key={exam.id} className={`workspace-card${exam.is_favorite ? ' workspace-card-favorite' : ''}`}>
+                  <div className="workspace-card-body">
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <input
+                        type="checkbox"
+                        checked={selectedIds.has(exam.id)}
+                        onChange={() => toggleSelect(exam.id)}
+                        style={{ cursor: 'pointer' }}
+                      />
+                      <button
+                        className="btn btn-ghost btn-sm"
+                        onClick={() => void handleFavorite(exam.id, !exam.is_favorite)}
+                        title={exam.is_favorite ? t('workspace.unpin') : t('workspace.pin')}
+                        style={{ fontSize: 16, padding: '2px 6px', lineHeight: 1 }}
+                      >
+                        {exam.is_favorite ? '★' : '☆'}
+                      </button>
+                      <div className="workspace-card-title">{exam.title}</div>
+                    </div>
+                    {exam.subtitle && (
+                      <div className="workspace-card-sub">{exam.subtitle}</div>
+                    )}
+                    <div className="workspace-card-meta">
+                      <span>{exam.question_count} {exam.question_count === 1 ? t('common.question') : t('common.questions')}</span>
+                      <span>·</span>
+                      <span>{t('workspace.updated')} {formatDate(exam.updated_at)}</span>
+                    </div>
+                    {tags.length > 0 && (
+                      <div style={{ display: 'flex', gap: 6, marginTop: 6, flexWrap: 'wrap' }}>
+                        {tags.map((tag) => (
+                          <span
+                            key={tag}
+                            style={{
+                              fontSize: 11,
+                              padding: '2px 8px',
+                              borderRadius: 4,
+                              background: 'var(--paper)',
+                              color: 'var(--ink-3)',
+                              border: '1px solid var(--line-2)',
+                            }}
+                          >
+                            {tag}
+                          </span>
+                        ))}
+                      </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>
+                    <button
+                      className="btn btn-sm"
+                      onClick={() => void handleDuplicate(exam.id)}
+                      disabled={duplicatingId === exam.id}
+                      title={t('workspace.duplicate')}
+                    >
+                      {duplicatingId === exam.id ? t('common.loading') : t('workspace.duplicate')}
+                    </button>
+                    <button
+                      className="btn btn-sm"
+                      onClick={() => void handleExport(exam.id, exam.title)}
+                      disabled={exportingId === exam.id}
+                      title={t('workspace.export')}
+                    >
+                      {exportingId === exam.id ? t('common.loading') : '↓'}
+                    </button>
+                    {/* Move to collection dropdown */}
+                    <div style={{ position: 'relative' }}>
+                      <button
+                        className="btn btn-sm"
+                        onClick={() => setMoveMenuExamId((id) => (id === exam.id ? null : exam.id))}
+                        disabled={movingExamId === exam.id}
+                        title={t('workspace.moveTo')}
+                      >
+                        {movingExamId === exam.id ? t('common.loading') : '▤'}
+                      </button>
+                      {moveMenuExamId === exam.id && (
+                        <div
+                          style={{
+                            position: 'absolute',
+                            right: 0,
+                            top: 'calc(100% + 4px)',
+                            zIndex: 10,
+                            minWidth: 180,
+                            background: 'var(--paper)',
+                            border: '1px solid var(--line-2)',
+                            borderRadius: 8,
+                            boxShadow: 'var(--shadow-md)',
+                            padding: '6px 0',
+                          }}
+                        >
+                          {exam.collection_id !== null && (
+                            <button
+                              className="user-menu-item"
+                              style={{ fontSize: 13 }}
+                              onClick={() => void handleMoveExam(exam.id, null)}
+                            >
+                              {t('workspace.removeFromCollection')}
+                            </button>
+                          )}
+                          {collections.map((col) => (
+                            col.id !== exam.collection_id && (
+                              <button
+                                key={col.id}
+                                className="user-menu-item"
+                                style={{ fontSize: 13 }}
+                                onClick={() => void handleMoveExam(exam.id, col.id)}
+                              >
+                                {col.name}
+                              </button>
+                            )
+                          ))}
+                          {collections.length === 0 && exam.collection_id === null && (
+                            <div className="user-menu-item" style={{ fontSize: 13, color: 'var(--ink-3)', cursor: 'default' }}>
+                              {t('workspace.noSavedExams')}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                    <div style={{ position: 'relative' }}>
+                      <button
+                        className="btn btn-sm"
+                        onClick={() => setShareOpenId((id) => (id === exam.id ? null : exam.id))}
+                        disabled={startingId === exam.id || sharingId === exam.id}
+                        title={exam.share_token ? t('share.shared') : t('share.share')}
+                      >
+                        {sharingId === exam.id ? t('common.loading') : (exam.share_token ? t('share.shared') : t('share.share'))}
+                      </button>
+                      {shareOpenId === exam.id && (
+                        <div
+                          style={{
+                            position: 'absolute',
+                            right: 0,
+                            top: 'calc(100% + 4px)',
+                            zIndex: 10,
+                            minWidth: 180,
+                            background: 'var(--paper)',
+                            border: '1px solid var(--line-2)',
+                            borderRadius: 8,
+                            boxShadow: 'var(--shadow-md)',
+                            padding: '6px 0',
+                          }}
+                        >
+                          {exam.share_token ? (
+                            <>
+                              <button
+                                className="user-menu-item"
+                                style={{ fontSize: 13 }}
+                                onClick={() => {
+                                  const url = `${window.location.origin}/share/${exam.share_token}`
+                                  void navigator.clipboard.writeText(url)
+                                  setShareOpenId(null)
+                                }}
+                              >
+                                {t('share.copyLink')}
+                              </button>
+                              <button
+                                className="user-menu-item"
+                                style={{ fontSize: 13, color: 'var(--wrong)' }}
+                                onClick={() => void handleUnshare(exam.id)}
+                              >
+                                {t('share.revokeLink')}
+                              </button>
+                            </>
+                          ) : (
+                            <button
+                              className="user-menu-item"
+                              style={{ fontSize: 13 }}
+                              onClick={() => void handleShare(exam.id)}
+                            >
+                              {t('share.generateLink')}
+                            </button>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                    {deleteConfirm === exam.id ? (
+                      <div className="workspace-delete-confirm">
+                        <button className="btn btn-sm admin-btn-danger" onClick={() => void deleteExam(exam.id)}>
+                          {t('common.confirm')}
+                        </button>
+                        <button className="btn btn-ghost btn-sm" onClick={() => setDeleteConfirm(null)}>
+                          {t('common.cancel')}
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        className="btn btn-ghost btn-sm admin-btn-danger-ghost"
+                        onClick={() => setDeleteConfirm(exam.id)}
+                        title={t('common.delete')}
+                        disabled={startingId === exam.id}
+                      >
+                        ✕
+                      </button>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
     </div>
   )
 }