tset preview fix

flask_app/app/static/css/app.css

@@ -815,6 +815,99 @@ body.ui-legacy .test-detail-subsection__title {
   padding: 1.25rem 1.25rem 1rem;
 }
 
+/* Модалка предпросмотра импорта документа — в духе разбора попытки */
+.import-modal.save-modal {
+  max-width: min(32rem, calc(100vw - 1.5rem));
+  width: calc(100% - 1.5rem);
+}
+.import-modal__title {
+  margin: 0 0 0.65rem;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--ink-900, #111827);
+}
+.import-modal__body {
+  margin: 0 0 1rem;
+  max-height: min(75vh, 32rem);
+  overflow-y: auto;
+  padding-right: 0.2rem;
+  -webkit-overflow-scrolling: touch;
+  color: var(--ink-700, #374151);
+  font-size: 0.9375rem;
+  line-height: 1.45;
+}
+.import-modal__actions {
+  margin: 0;
+  padding-top: 0.75rem;
+  border-top: 1px solid color-mix(in srgb, var(--outline-variant, #e5e7eb) 55%, transparent);
+}
+.import-modal-review {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.import-modal-review__draft-title {
+  margin: 0;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--ink-900, #111827);
+}
+.import-modal-review__desc,
+.import-modal-review__stats {
+  margin: 0;
+}
+.import-modal-review .attempt-review-page__params {
+  margin-bottom: 0;
+}
+.import-modal-review__stats strong {
+  color: var(--ink-900, #111827);
+  font-weight: 600;
+}
+.import-modal-review__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin: 0;
+  padding: 0;
+}
+.import-modal-review__warn {
+  margin: 0;
+  padding: 0.75rem 0.95rem;
+  border-radius: 0.65rem;
+  border: 1px solid color-mix(in srgb, #d97706 38%, transparent);
+  background: color-mix(in srgb, #fffbeb 94%, #fff);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  color: #92400e;
+}
+.import-modal-review__alert {
+  margin: 0;
+  padding: 0.75rem 0.95rem;
+  border-radius: 0.65rem;
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+.import-modal-review__alert--error {
+  border: 1px solid color-mix(in srgb, #b42318 32%, transparent);
+  background: #fef2f2;
+  color: #991b1b;
+}
+.import-modal-review__alert--warn {
+  border: 1px solid color-mix(in srgb, #d97706 38%, transparent);
+  background: color-mix(in srgb, #fffbeb 94%, #fff);
+  color: #92400e;
+  font-size: 0.8125rem;
+}
+.import-modal-review__card .attempt-review-card__question {
+  font-size: 0.95rem;
+  line-height: 1.42;
+}
+body.ui-legacy .import-modal-review__card.attempt-review-card {
+  padding: 0.85rem 1rem 0.95rem;
+}
+
 .settings-grid {
   display: flex;
   flex-direction: column;
@@ -1239,6 +1332,15 @@ body.ui-legacy .attempts-card-list__action {
   color: #b42318;
 }
 
+.attempt-review-card__badge--preview {
+  background: color-mix(in srgb, var(--outline-variant, #c8d2cf) 42%, transparent);
+  color: var(--ink-600, #4b5563);
+  text-transform: none;
+  letter-spacing: 0.02em;
+  font-weight: 600;
+  font-size: 0.7rem;
+}
+
 .attempt-review-card__question {
   margin: 0 0 0.75rem;
   font-size: 1.02rem;

flask_app/app/static/js/editor.js

@@ -805,6 +805,42 @@
   let _extractedText = '';
   let _extractedFileName = '';
 
+  /** HTML карточки вопроса в модалке предпросмотра импорта (как в разборе: текст, подсказка, все варианты). */
+  function buildImportPreviewQuestionHtml(q, index) {
+    const hint = (q.aiHint || '').trim();
+    const opts = Array.isArray(q.options) ? q.options : [];
+    const optionsHtml = opts.length
+      ? `<ul class="attempt-review-options" role="list">${opts.map((o) => {
+          const correct = !!o.isCorrect;
+          const liCls = correct
+            ? 'attempt-review-option attempt-review-option--correct'
+            : 'attempt-review-option';
+          const tag = correct ? '<span class="attempt-review-option__tag">верный ответ</span>' : '';
+          return `<li class="${liCls}">
+            <span class="attempt-review-option__text">
+              <span class="attempt-review-option__mark" aria-hidden="true">☐</span>
+              <span class="attempt-review-option__body">${escHtml(o.text || '')}${tag}</span>
+            </span>
+          </li>`;
+        }).join('')}</ul>`
+      : '';
+    const hintHtml = hint
+      ? `<div class="attempt-review-hint">
+          <span class="attempt-review-hint__label">Подсказка</span>
+          <p class="attempt-review-hint__text">${escHtml(hint)}</p>
+        </div>`
+      : '';
+    return `<article class="attempt-card attempt-review-card import-modal-review__card">
+      <div class="attempt-review-card__head">
+        <span class="attempt-review-card__num">${index + 1}</span>
+        <span class="attempt-review-card__badge attempt-review-card__badge--preview">черновик</span>
+      </div>
+      <p class="attempt-review-card__question">${escHtml(q.text || '')}</p>
+      ${hintHtml}
+      ${optionsHtml}
+    </article>`;
+  }
+
   function openImportModal(title, bodyHtml, actions) {
     importModalTitle.textContent = title;
     importModalBody.innerHTML = bodyHtml;
@@ -842,7 +878,7 @@
       aiStatusEl.textContent = '';
       openImportModal(
         'Ошибка загрузки',
-        `<p class="text-red-700">${escHtml(e.message || 'Не удалось загрузить файл.')}</p>`,
+        `<div class="import-modal-review"><p class="import-modal-review__alert import-modal-review__alert--error">${escHtml(e.message || 'Не удалось загрузить файл.')}</p></div>`,
         [{ label: 'Закрыть', onClick: () => importModal.close() }],
       );
     } finally {
@@ -884,9 +920,7 @@
       if (!g.available) {
         openImportModal(
           'AI недоступен',
-          `<p class="mb-2 text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-2 text-xs">
-            ${escHtml(g.message || 'AI недоступен — ключ не настроен.')}
-           </p>`,
+          `<div class="import-modal-review"><p class="import-modal-review__alert import-modal-review__alert--warn">${escHtml(g.message || 'AI недоступен — ключ не настроен.')}</p></div>`,
           [{ label: 'Закрыть', onClick: () => importModal.close() }],
         );
         return;
@@ -894,19 +928,15 @@
 
       const draft = g.draft || {};
       const qs = draft.questions || [];
-      const qPreview = qs.slice(0, 4).map((q, i) =>
-        `<li class="text-xs text-ink-600">${i + 1}. ${escHtml((q.text || '').slice(0, 80))}${(q.text || '').length > 80 ? '…' : ''}</li>`
-      ).join('');
-      const moreCount = qs.length > 4 ? qs.length - 4 : 0;
+      const qCards = qs.map((q, i) => buildImportPreviewQuestionHtml(q, i)).join('');
       const bodyHtml = `
-        ${draft.title ? `<p class="font-medium text-ink-800 mb-1">${escHtml(draft.title)}</p>` : ''}
-        ${draft.description ? `<p class="text-xs text-ink-500 mb-2">${escHtml(draft.description)}</p>` : ''}
-        <p class="text-xs text-ink-500 mb-1">Вопросов: <b>${qs.length}</b></p>
-        ${qs.length ? `<ul class="space-y-0.5 mb-1">${qPreview}</ul>
-          ${moreCount ? `<p class="text-xs text-ink-400">…и ещё ${moreCount}</p>` : ''}` : ''}
-        <p class="mt-3 text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-3 py-2">
-          Текущие вопросы теста будут <b>заменены</b>.
-        </p>`;
+        <div class="import-modal-review">
+          ${draft.title ? `<p class="import-modal-review__draft-title">${escHtml(draft.title)}</p>` : ''}
+          ${draft.description ? `<p class="import-modal-review__desc attempt-review-page__params">${escHtml(draft.description)}</p>` : ''}
+          <p class="import-modal-review__stats attempt-review-page__params">Вопросов в черновике: <strong>${qs.length}</strong></p>
+          ${qs.length ? `<div class="import-modal-review__list">${qCards}</div>` : ''}
+          <div class="import-modal-review__warn" role="status">Текущие вопросы теста будут <strong>заменены</strong> после «Применить».</div>
+        </div>`;
 
       openImportModal(
         `Черновик из «${escHtml(_extractedFileName)}»`,
@@ -941,7 +971,7 @@
       aiStatusEl.textContent = '';
       openImportModal(
         'Ошибка генерации',
-        `<p class="text-red-700">${escHtml(e.message || 'Не удалось сгенерировать тест.')}</p>`,
+        `<div class="import-modal-review"><p class="import-modal-review__alert import-modal-review__alert--error">${escHtml(e.message || 'Не удалось сгенерировать тест.')}</p></div>`,
         [{ label: 'Закрыть', onClick: () => importModal.close() }],
       );
     } finally {

flask_app/app/templates/tests/editor.html

@@ -230,11 +230,11 @@
     </div>
 
     {# ── Модалка результата импорта документа ─────────────────── #}
-    <dialog id="import-modal" class="save-modal">
-      <div class="save-modal__inner" style="max-width:480px; width:100%;">
-        <h3 id="import-modal-title" class="font-headline text-base font-semibold mb-2"></h3>
-        <div id="import-modal-body" class="text-sm text-ink-600 mb-4 max-h-64 overflow-y-auto"></div>
-        <div id="import-modal-actions" class="flex gap-2 justify-end flex-wrap"></div>
+    <dialog id="import-modal" class="save-modal import-modal">
+      <div class="save-modal__inner import-modal__inner">
+        <h3 id="import-modal-title" class="import-modal__title font-headline"></h3>
+        <div id="import-modal-body" class="import-modal__body"></div>
+        <div id="import-modal-actions" class="import-modal__actions flex gap-2 justify-end flex-wrap"></div>
       </div>
     </dialog>