| 1 | import { useSyncExternalStore } from "react"; |
| 2 | import { cancelSessionExport, sessionExportProgress } from "../lib/sessionExportProgress"; |
| 3 | import { t } from "../lib/i18n"; |
| 4 | export function SessionExportProgress() { |
| 5 | const operations = useSyncExternalStore(sessionExportProgress.subscribe, sessionExportProgress.getSnapshot); |
| 6 | if (!operations.length) return null; |
| 7 | return <div className="session-export-progress" role="status" aria-live="polite"> |
| 8 | {operations.map(operation => <div key={operation.exportId}> |
| 9 | <span>{operation.title} · {t(`topicBar.exportPhase.${operation.phase}` as Parameters<typeof t>[0])} · {operation.pages || operation.records}</span> |
| 10 | <button type="button" onClick={() => { void cancelSessionExport(operation.exportId).catch(() => {}); }}>{t("topicBar.exportCancel")}</button> |
| 11 | </div>)} |
| 12 | </div>; |
| 13 | } |
| 14 |