Merge pull request #1022 from smalruby/feature/lesson-support-1017

feat(classroom): 課題詳細刷新 — 説明タブ+プレビュー・限定ポーリング (E-4)

Author: smalruby3-editor-bot[bot]

docs/classroom/testing.md

@@ -244,6 +244,11 @@ Playwright MCP および Selenium integration tests で使用する `data-testid
 | `classroom-board-reuse-view` | div | 再利用ビュー（全課題を日付降順） |
 | `classroom-board-reuse-filter` | select | 再利用ビューのクラスフィルタ |
 | `classroom-board-reuse-copy-{classroomId}` | button | このクラスに複製 |
+| `classroom-tab-description` | button | 課題詳細の「説明」タブ（デフォルトアクティブ） |
+| `classroom-description-editor` | div | 説明タブの課題編集フォーム（埋め込み） |
+| `classroom-description-preview` | div | 右ペインの生徒視点プレビュー |
+| `classroom-description-preview-body` | div | プレビュー本文（テキスト+画像） |
+| `classroom-description-preview-prev` / `-next` | button | プレビューのページ送り |
 | `classroom-phase-teacher-group-manage` | div | 組管理フェーズのルート |
 | `classroom-group-create-name` / `classroom-group-create-year` | input | 新規組の名前 / 年度 |
 | `classroom-group-create-submit` | button | 組をつくる |

packages/scratch-gui/src/components/classroom-modal/classroom-modal.css

@@ -1347,7 +1347,8 @@
 }
 
 .detail-right-pane {
-    width: 300px;
+    /* Wider now that the sidebar is gone (teacher review round 2) */
+    width: 380px;
     flex-shrink: 0;
     border-left: 1px solid #e0e0e0;
     padding-left: 1rem;
@@ -2633,3 +2634,57 @@
     opacity: 0.5;
     cursor: default;
 }
+
+/* --- Description tab preview (student view) --- */
+
+.assignment-preview {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+}
+
+.assignment-preview-title {
+    font-weight: bold;
+    font-size: 0.9rem;
+    color: hsla(225, 15%, 40%, 1);
+}
+
+.assignment-preview-body {
+    flex: 1;
+    border: 1px solid hsla(0, 0%, 0%, 0.12);
+    border-radius: 0.5rem;
+    background: white;
+    padding: 1rem;
+    overflow-y: auto;
+}
+
+.assignment-preview-text {
+    white-space: pre-wrap;
+    margin: 0 0 0.75rem;
+}
+
+.assignment-preview-image {
+    max-width: 100%;
+    border-radius: 0.25rem;
+}
+
+.assignment-preview-pager {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.assignment-preview-pager button {
+    border: 1px solid hsla(0, 0%, 0%, 0.2);
+    background: white;
+    border-radius: 0.3rem;
+    padding: 0.25rem 0.7rem;
+    cursor: pointer;
+}
+
+.assignment-preview-pager button:disabled {
+    opacity: 0.4;
+    cursor: default;
+}

packages/scratch-gui/src/components/classroom-modal/teacher-assignment-editor.jsx

@@ -185,6 +185,7 @@ const TeacherAssignmentEditor = ({
     starterSource,
     onAddPage,
     onAttachPageImage,
+    embedded,
     onCancel,
     onChangePageText,
     onMovePage,
@@ -255,7 +256,11 @@ const TeacherAssignmentEditor = ({
     };
 
     return (
-        <div className={styles.assignmentEditor} data-testid="classroom-phase-teacher-assignment-edit">
+        <div
+            className={styles.assignmentEditor}
+            data-testid={embedded ? 'classroom-description-editor' : 'classroom-phase-teacher-assignment-edit'}
+        >
+            {!embedded && (
             <h2 className={styles.phaseTitle}>
                 <FormattedMessage
                     defaultMessage="Edit Assignment"
@@ -264,6 +269,7 @@ const TeacherAssignmentEditor = ({
                 />
                 {selectedClassroom ? ` — ${selectedClassroom.className}` : ''}
             </h2>
+            )}
             <p className={styles.assignmentEditorHint}>
                 <FormattedMessage
                     defaultMessage="Students see these pages and the starter project opens automatically when they join with the class code."
@@ -392,6 +398,7 @@ const TeacherAssignmentEditor = ({
             </div>
 
             <div className={styles.buttonRow}>
+                {!embedded && (
                 <button
                     className={styles.secondaryButton}
                     data-testid="classroom-assignment-cancel"
@@ -404,6 +411,7 @@ const TeacherAssignmentEditor = ({
                         id="gui.classroom.assignmentEditor.cancel"
                     />
                 </button>
+                )}
                 <button
                     className={styles.primaryButton}
                     data-testid="classroom-assignment-save"
@@ -443,7 +451,8 @@ TeacherAssignmentEditor.propTypes = {
     starterSource: PropTypes.object,
     onAddPage: PropTypes.func.isRequired,
     onAttachPageImage: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired,
+    embedded: PropTypes.bool,
+    onCancel: PropTypes.func,
     onChangePageText: PropTypes.func.isRequired,
     onMovePage: PropTypes.func.isRequired,
     onRemovePage: PropTypes.func.isRequired,