feat(classroom): show stage thumbnail-save button when student is joined to a classroom

[takaokouji]

概要

クラスルーム機能で生徒がクラスに参加しているときだけ、ステージ右上の 「サムネイル保存」ボタン (✓ アイコン) を表示し、押した瞬間の実行画面を 課題提出時のサムネイル として使うようにする。

upstream Scratch の "Set Thumbnail" 機能 (PR #630 で導入) を Smalruby のクラスルーム文脈で再利用する形。

背景

PR #630 (upstream merge v13.7.2) で upstream は新しい "Set Thumbnail" ボタンを追加した。standalone Smalruby では保存先がないので一旦非表示にしたが、クラスルームに参加中の生徒なら「課題提出時にどのフレームをサムネイルにするか」を任意の好きなタイミングで決めたい、という良い動機がある。

期待される挙動

表示条件

• メニューバーにクラスルームバナーが出ている (= 生徒が classroom に joined している) ときだけ 表示
• それ以外の場合は今のまま非表示

クリック時の動作

1. 確認 popover を表示: 「いまの実行画面を提出サムネイルにしますか?」
2. OK → ステージの現在フレームを PNG にキャプチャ
3. キャプチャ画像を redux に保存 (例: state.scratchGui.classroom.submissionThumbnail)
4. アラート: 「サムネイルを設定しました」
5. 課題提出フローでこのサムネイルを classroom API に送信 (画像のアップロードは既存の student-submit ハンドラーで対応)

サムネイル未設定時のフォールバック

• 生徒がボタンを押さずに提出した場合は、提出ボタンを押した瞬間のフレームを自動キャプチャ (現状の挙動を維持)

実装メモ

• StageHeaderComponent.defaultProps の manuallySaveThumbnails / userOwnsProject を redux state から導出する。具体的には mapStateToProps で state.scratchGui.classroom.joined を見て props に渡す
• onUpdateProjectThumbnail を Smalruby 用ハンドラーに差し替える。packages/scratch-gui/src/lib/store-project-thumbnail.js または containers/use-student-submit.js 経由で redux にキャッシュ
• Set Thumbnail のメッセージを Smalruby の文脈に書き換える (例: 「提出サムネイルを設定」)
• ja / ja-Hira locale に対応
• docs/classroom/screenshots/ に新しいスクリーンショットを追加

参考

• upstream の実装: packages/scratch-gui/src/components/stage-header/stage-header.jsx の shouldShowThumbnailSaveButton 周辺
• 一時的に隠したコミット: a9293d983e (PR feat: upstream merge 2026-05 (v13.7.2 — 284 commits, scratch-blocks v2) #630)
• upstream の thumbnail import: import {storeProjectThumbnail} from '../../lib/store-project-thumbnail.js';

DoD

• classroom 未参加 → 非表示
• classroom 参加 → 表示
• 押すと現在のステージフレームが redux にキャッシュされる
• 提出時にキャッシュされたサムネイルが classroom API に送信される
• キャッシュ無しなら提出時に自動キャプチャ (現状維持)
• docs/classroom/screenshots/ に新スクリーンショット追加
• integration test (Playwright) でフロー確認