Reactions

items にリアクションごとの content（絵文字や短い言葉）と by（付けた人の名前の並び）を渡します。リアクションは高さ24pxの平らな白い四角で、控えめなボタンと同じ5pxの角丸にします（ピルにはしません）。読むだけのリアクションは1px #dedede の枠だけを付けます。文字は11pxで、by の人数を灰色の太字の数で添え、ホバーすると付けた人の名前を出します。言葉のリアクションは太字で書きます。自分も付けているリアクションは mine にすると、オンの状態と同じ淡い青の縦の塗りに紺の縁と紺の文字にし、数も同じ紺にします。

add を渡すとリアクションが押せるボタンになり、控えめなボタンと同じ1px #cccccc の枠と下に1px #dddddd の影を付けます。ホバーすると面を #fafafa にし、押すと内側へへこみます。自分のリアクションを押すと外し、他の人のリアクションを押すと自分も付けます。数が0になったリアクションは消えます。付け外しで by に追加・削除する自分の名前は add.me で、mine のリアクションの by にも同じ名前を入れておきます。

add がある時は、リアクションの並びの末尾に「リアクションを追加」の操作を、枠を持たない青緑のアイコンのボタンで置きます。開くパネルには16文字までの言葉の欄と EmojiPicker があり、開くと言葉の欄へ移ります。選んだ絵文字や書いた言葉は、同じリアクションがあればそこへ自分を加え、なければ末尾に新しいリアクションを作ります。

ReactionsController を reactions、EmojiPickerController を emoji-picker として登録し、追加のパネルに使う PopoverController・TooltipController も登録します。付け外しすると reactions:toggle を発火するので、保存は利用側で行います。リアクションはcontrollerがその場で書き換えます。保存に失敗した時は、reactions のcontrollerの setReaction(content, selected, name) に reactions:toggle のdetailを selected だけ逆にして渡すと、イベントを発火せずにリアクションを元に戻します（消えたリアクションは作り直し、追加したリアクションは消します）。保存が済むまで書き換えたくない時は reactions:beforetoggle を取り消し、保存できてから setReaction で付け外しします。

add がない時は表示するだけのリアクションです。JavaScriptがない時はリアクションを押しても変わりません。