feat(frontend): ノートのリアクションボタンのアイコンを変更し、削除をせずにリアクションを変更できるように

[mappi-pr]

What

• #11055 の実装

1. 「いいねのみ」の場合のハートアイコンを、リアクションなしの場合は+付きのハート、リアクションありの場合は-付きのハートを表示するように変更。

2. リアクションボタンのアイコンを顔アイコンに変更。

3. リアクション済の場合でも、顔アイコンをクリックしてリアクションピッカーを表示するように変更。 　※変更時は変更ダイアログを出力する。

Why

• リアクションボタンのアイコンを顔アイコンに変更する
  • より多くの環境でリアクションの文脈として使われているため
• そのノートにリアクションしているかどうかに関わらず、常にリアクションを選択するUIにする

※ただし、リアクション変更時には変更ダイアログを出して、同じノートに対して複数リアクションできると勘違いされないようにする。

Additional info (optional)

ローカル環境のChrome/Firefoxで以下の項目のテスト済み

• [x] TLのノート（いいねのみ）で新しく❤️をつける
• [x] TLのノート（いいねのみ）で既存の❤️を削除する
• [x] ノート詳細画面（いいねのみ）で新しく❤️をつける
• [x] ノート詳細画面（いいねのみ）で既存の❤️を削除する
• [x] TLのノート（通常リアクション受入）で新しくリアクションをつける
• [x] TLのノート（通常リアクション受入）で別のリアクションをつける
• [x] TLのノート（通常リアクション受入）で既存のリアクションを削除する
• [x] ノート詳細画面（通常リアクション受入）で新しくリアクションをつける
• [x] ノート詳細画面（通常リアクション受入）で別のリアクションをつける
• [x] ノート詳細画面（通常リアクション受入）で既存のリアクションを削除する

Checklist

• [x] Read the contribution guide
• [x] Test working in a local environment
• [ ] (If needed) Add story of storybook
• [x] (If needed) Update CHANGELOG.md
• [ ] (If possible) Add tests

[codecov[bot]]

Codecov Report

Merging #11157 (409c62b) into develop (74a05ec) will increase coverage by 0.02%. The diff coverage is 100.00%.

@@             Coverage Diff             @@
##           develop   #11157      +/-   ##
===========================================
+ Coverage    77.52%   77.55%   +0.02%     
===========================================
  Files          908      909       +1     
  Lines        91747    91830      +83     
  Branches      7617     7618       +1     
===========================================
+ Hits         71131    71216      +85     
+ Misses       20616    20614       -2     

Impacted Files	Coverage Δ
packages/frontend/src/components/MkNote.vue	100.00% <100.00%> (ø)

... and 2 files with indirect coverage changes

[acid-chicken]

半分独り言ですが、内容の是非はともかくとして Storybook のストーリーが欲しくなる