refactor(frontend): TransitionGroupの動的切り替えをコンポーネントに分離

[kakkokari-gtyih]

What

Factors out the logic to switch between TransitionGroup and div into a new dedicated component: MkTransitionGroup. This also avoids the use of <component :is="prefer.s.animation ? TransitionGroup : 'div'"> which may be a cause of pagination errors.

https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1053

TransitionGroupとdivの切り替えを行うロジックをコンポーネントに分離

Why

• 可読性・書きやすさの向上
  • 要素の深さ自体は変化なし
• 一部のページネーションの動作に支障をきたす問題を修正

Additional info (optional)

Checklist

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

[codecov]

Codecov Report

❌ Patch coverage is 0% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 14.03%. Comparing base (389861f) to head (11fb1fb).
⚠️ Report is 83 commits behind head on develop.

Files with missing lines	Patch %	Lines
...ontend/src/components/global/MkTransitionGroup.vue	0.00%	4 Missing ⚠️
...ages/frontend/src/components/MkReactionsViewer.vue	0.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #16122       +/-   ##
============================================
- Coverage    63.65%   14.03%   -49.63%     
============================================
  Files         1160      241      -919     
  Lines       115616    11356   -104260     
  Branches      8168     3758     -4410     
============================================
- Hits         73598     1594    -72004     
+ Misses       39834     7620    -32214     
+ Partials      2184     2142       -42     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[syuilo]

独自のコンポーネントが間に挟まることによって可読性が向上した感はあまり感じられないのと、同じく間に追加でコンポーネントが挟まることによるパフォーマンス上のデメリットが気になるわね(ネストが一段深くなることによる子コンポーネントのレンダリングへの影響がどれほど変わるか)

[kakkokari-gtyih]

独自のコンポーネントが間に挟まることによって可読性が向上した感はあまり感じられないのと、同じく間に追加でコンポーネントが挟まることによるパフォーマンス上のデメリットが気になるわね(ネストが一段深くなることによる子コンポーネントのレンダリングへの影響がどれほど変わるか)

可読性というよりかは書きやすさかもしれないわね（トリッキーな処理を意識しないで良くなるのと、同じロジックを何度も書く必要がなくなる）
ネストとはいえDOM的にはネストが深くなっていないのと、グローバルでインポートされているので影響はあっても非常に微々たるものだとおもわれる

[kakkokari-gtyih]

コンフリクト解消