フィードバックパネル

概要

フィードバックパネルは、プロダクト改善に直接つながるメッセージを送るための入力欄です。バグ、要望、現場での使い勝手など、短い内容でも送れる構成になっています。投稿は Firestore の feedback コレクションに蓄積され、開発側のロードマップ決定に使われます。

UI は「入力中」と「送信完了」の 2 ステートで、送信完了後は感謝メッセージと「もう 1 件書く」ボタンに切り替わります。連続して別件を投稿しやすい設計です。文字数上限は設定でコントロールされ、残量が 100 字を切ると下部カウンタが緑表示になります。

説明テキスト（送信前）: パネル冒頭に表示される短い案内文。
テキストエリア: 本文入力欄。maxlength 制約付きで、送信中は無効化されます。プレースホルダで投稿例が示されます。
残文字カウンタ: 入力残量を右下に表示。残り 100 字を切ると緑色に変化（is-low クラス）。
エラーメッセージ: 送信失敗時に赤テキストで表示。ネットワーク断や Firestore 拒否のケースが該当します。
Submit ボタン: 入力本文を Firestore に保存します。本文が空 / 空白のみのとき、または送信中は無効化。送信中は左にスピナーが回り、ラベルが「Submitting...」になります。
感謝メッセージ（送信完了後）: 「ありがとうございます」相当の文言が表示され、Write Another ボタンに切り替わります。
Write Another ボタン（送信完了後）: 入力欄をリセットして再度投稿できる状態に戻します。
折りたたみ矢印: パネルを最小化します。

現場直後に違和感をメモして送ると、再現条件を失いにくくなります。「○○の panel で△△が壊れた」のように、どのパネル / どの操作 / どんな入力でという 3 点が含まれていると、開発側で再現が早くなります。Pro Event Pass 利用者は契約 ID を含めると追跡が容易です。